@epoch32/visage 1.1.3 → 1.1.4

package/dist/index-zr6cvset.js

@@ -0,0 +1,2092 @@
+import {
+  onCleanup2,
+  effect2,
+  signal2,
+  createSignal2
+} from "./index-6kfe1nr4.js";
+import {
+  Show2,
+  For2
+} from "./index-5s255b3w.js";
+import {
+  jsx2,
+  jsxs2
+} from "./index-9fvarkrx.js";
+import {
+  Tabs2,
+  Tooltip3,
+  Switch2
+} from "./index-8x8xz80v.js";
+import {
+  Style2
+} from "./index-0madxn60.js";
+
+// src/devtools/hub.ts
+class DevToolsHub2 {
+  isOpen = signal2(false, { internal: true });
+  activeTab = signal2("signals", { internal: true });
+  highlightDOM = signal2(false, { internal: true });
+  searchQuery = signal2("", { internal: true });
+  _signalsMap = new Map;
+  signalsList = signal2([], { internal: true });
+  _queriesMap = new Map;
+  queriesList = signal2([], { internal: true });
+  rpcLogs = signal2([], { internal: true });
+  _queryClients = new Set;
+  _signalCounter = 0;
+  constructor() {
+    if (typeof window !== "undefined") {
+      window.__VISAGE_DEVTOOLS__ = this;
+    }
+  }
+  toggle() {
+    this.isOpen.update((v) => !v);
+  }
+  setTab(tab) {
+    this.activeTab.set(tab);
+  }
+  registerSignal(options) {
+    const id = options.id ?? `sig_${++this._signalCounter}`;
+    const name = options.name ?? id;
+    const type = options.type ?? "signal";
+    const record = {
+      id,
+      name,
+      type,
+      getValue: options.getValue,
+      version: options.version,
+      dependencies: options.dependencies,
+      dependents: options.dependents,
+      subscribersCount: options.subscribersCount,
+      lastUpdatedAt: Date.now()
+    };
+    this._signalsMap.set(id, record);
+    this.refreshSignals();
+    return id;
+  }
+  unregisterSignal(id) {
+    if (this._signalsMap.delete(id)) {
+      this.refreshSignals();
+    }
+  }
+  clearSignals() {
+    this._signalsMap.clear();
+    this._signalCounter = 0;
+    this.refreshSignals();
+  }
+  clearQueries() {
+    this._queriesMap.clear();
+    this.queriesList.set([]);
+  }
+  clearAll() {
+    this.clearSignals();
+    this.clearQueries();
+    this.clearLogs();
+  }
+  refreshSignals() {
+    this.signalsList.set(Array.from(this._signalsMap.values()));
+  }
+  attachQueryClient(client) {
+    if (this._queryClients.has(client))
+      return;
+    this._queryClients.add(client);
+    const syncQueries = () => {
+      const cache = client.getQueryCache();
+      const allQueries = cache.getAll();
+      const records = allQueries.map((q) => ({
+        hash: q.queryHash,
+        key: q.queryKey,
+        status: () => q.status(),
+        fetchStatus: () => q.fetchStatus(),
+        data: () => q.data(),
+        error: () => q.error(),
+        dataUpdatedAt: () => q.dataUpdatedAt(),
+        refetch: () => q.fetch(),
+        invalidate: () => q.invalidate()
+      }));
+      this._queriesMap.clear();
+      for (const r of records) {
+        this._queriesMap.set(r.hash, r);
+      }
+      this.queriesList.set(records);
+    };
+    client.getQueryCache().subscribe(() => {
+      syncQueries();
+    });
+    syncQueries();
+  }
+  logRpcCall(record) {
+    const fullRecord = {
+      ...record,
+      status: record.status ?? "pending",
+      startTime: Date.now(),
+      events: []
+    };
+    this.rpcLogs.update((prev) => [fullRecord, ...prev.slice(0, 99)]);
+    return fullRecord.id;
+  }
+  updateRpcCall(id, updates) {
+    this.rpcLogs.update((prev) => prev.map((item) => {
+      if (item.id === id) {
+        const duration = updates.duration ?? (updates.status ? Date.now() - item.startTime : item.duration);
+        return { ...item, ...updates, duration };
+      }
+      return item;
+    }));
+  }
+  logRpcEvent(id, data) {
+    this.rpcLogs.update((prev) => prev.map((item) => {
+      if (item.id === id) {
+        const events = item.events ? [...item.events, { timestamp: Date.now(), data }] : [{ timestamp: Date.now(), data }];
+        return { ...item, events, status: "streaming" };
+      }
+      return item;
+    }));
+  }
+  clearLogs() {
+    this.rpcLogs.set([]);
+  }
+}
+var devtoolsHub2 = new DevToolsHub2;
+
+// src/devtools/DomTab.tsx
+function DomTab(props) {
+  return /* @__PURE__ */ jsx2("div", {
+    style: { flex: 1, padding: "24px", overflowY: "auto", background: "#090d16" },
+    children: /* @__PURE__ */ jsxs2("div", {
+      style: { maxWidth: "700px", margin: "0 auto" },
+      children: [
+        /* @__PURE__ */ jsxs2("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: "20px"
+          },
+          children: [
+            /* @__PURE__ */ jsxs2("div", {
+              children: [
+                /* @__PURE__ */ jsx2("h3", {
+                  style: { margin: "0 0 6px 0", color: "#f8fafc", fontSize: "16px", fontWeight: 700 },
+                  children: "Real-Time DOM Mutation Highlighter"
+                }),
+                /* @__PURE__ */ jsx2("p", {
+                  style: { margin: 0, color: "#94a3b8", fontSize: "13px", lineHeight: 1.5 },
+                  children: "Visage uses zero Virtual DOM and fine-grained reactivity. Only exact text nodes and attributes update in-place."
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs2("div", {
+              style: { display: "flex", alignItems: "center", gap: "10px" },
+              children: [
+                /* @__PURE__ */ jsx2("span", {
+                  style: {
+                    fontSize: "11px",
+                    fontWeight: 700,
+                    letterSpacing: "0.04em",
+                    color: () => props.hub.highlightDOM() ? "#10b981" : "#64748b"
+                  },
+                  children: () => props.hub.highlightDOM() ? "ENABLED" : "DISABLED"
+                }),
+                /* @__PURE__ */ jsx2(Switch2, {
+                  checked: props.hub.highlightDOM,
+                  onCheckedChange: (val) => props.hub.highlightDOM.set(val)
+                })
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs2("div", {
+          style: {
+            background: "#0c111d",
+            border: "1px solid #1e293b",
+            borderRadius: "8px",
+            padding: "16px",
+            marginBottom: "20px"
+          },
+          children: [
+            /* @__PURE__ */ jsx2("h4", {
+              style: { margin: "0 0 10px 0", color: "#38bdf8", fontSize: "13px", fontWeight: 600 },
+              children: "Usage Instructions:"
+            }),
+            /* @__PURE__ */ jsxs2("ul", {
+              style: {
+                margin: 0,
+                paddingLeft: "20px",
+                color: "#cbd5e1",
+                fontSize: "13px",
+                lineHeight: 1.6
+              },
+              children: [
+                /* @__PURE__ */ jsx2("li", {
+                  children: "Toggle the switch above to enable visual flashing outlines across your app."
+                }),
+                /* @__PURE__ */ jsx2("li", {
+                  children: "Interact with buttons, form inputs, tabs, and modals in your application."
+                }),
+                /* @__PURE__ */ jsxs2("li", {
+                  children: [
+                    "Notice that ",
+                    /* @__PURE__ */ jsx2("strong", {
+                      children: "only the exact updated node flashes"
+                    }),
+                    " without re-rendering the whole component or tree."
+                  ]
+                })
+              ]
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs2("div", {
+          style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" },
+          children: [
+            /* @__PURE__ */ jsxs2("div", {
+              style: {
+                background: "#0c111d",
+                border: "1px solid #1e293b",
+                borderRadius: "8px",
+                padding: "14px"
+              },
+              children: [
+                /* @__PURE__ */ jsx2("div", {
+                  style: {
+                    fontWeight: 700,
+                    color: "#f87171",
+                    marginBottom: "6px",
+                    fontSize: "12px",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.04em"
+                  },
+                  children: "Virtual DOM Model"
+                }),
+                /* @__PURE__ */ jsx2("p", {
+                  style: { margin: 0, color: "#94a3b8", fontSize: "12px", lineHeight: 1.5 },
+                  children: "State changes re-run entire component functions, allocate temporary Virtual DOM nodes, and diff tree structures."
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs2("div", {
+              style: {
+                background: "#0c111d",
+                border: "1px solid #1e293b",
+                borderRadius: "8px",
+                padding: "14px"
+              },
+              children: [
+                /* @__PURE__ */ jsx2("div", {
+                  style: {
+                    fontWeight: 700,
+                    color: "#34d399",
+                    marginBottom: "6px",
+                    fontSize: "12px",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.04em"
+                  },
+                  children: "Visage Reactive Engine"
+                }),
+                /* @__PURE__ */ jsx2("p", {
+                  style: { margin: 0, color: "#94a3b8", fontSize: "12px", lineHeight: 1.5 },
+                  children: "Component functions execute once during mounting. Signals push direct in-place mutations at native DOM speed."
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+
+// src/devtools/GraphInspector.tsx
+function GraphInspector(props) {
+  return /* @__PURE__ */ jsx2("div", {
+    style: {
+      width: "320px",
+      borderLeft: "1px solid #1e293b",
+      background: "#090d16",
+      padding: "16px",
+      overflowY: "auto"
+    },
+    children: /* @__PURE__ */ jsx2(Show2, {
+      when: props.selectedNode,
+      fallback: /* @__PURE__ */ jsxs2("div", {
+        style: {
+          color: "#64748b",
+          textAlign: "center",
+          marginTop: "30px",
+          fontSize: "12px",
+          lineHeight: 1.6
+        },
+        children: [
+          /* @__PURE__ */ jsx2("p", {
+            children: "Select any DAG node to inspect live dependencies, downstream subscribers, and reactive version history."
+          }),
+          /* @__PURE__ */ jsxs2("div", {
+            style: {
+              marginTop: "16px",
+              padding: "12px",
+              background: "#0f172a",
+              borderRadius: "6px",
+              textAlign: "left"
+            },
+            children: [
+              /* @__PURE__ */ jsx2("div", {
+                style: { color: "#94a3b8", fontWeight: 600, marginBottom: "4px", fontSize: "11px" },
+                children: "Legend:"
+              }),
+              /* @__PURE__ */ jsx2("div", {
+                style: { color: "#38bdf8", fontSize: "11px" },
+                children: "[SIG] Upstream Source Signals"
+              }),
+              /* @__PURE__ */ jsx2("div", {
+                style: { color: "#c084fc", fontSize: "11px" },
+                children: "[CMP] Derived Computeds"
+              })
+            ]
+          })
+        ]
+      }),
+      children: (node) => {
+        const deps = () => props.getDependencies(node());
+        const targets = () => props.getDependents(node());
+        return /* @__PURE__ */ jsxs2("div", {
+          children: [
+            /* @__PURE__ */ jsxs2("div", {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "flex-start",
+                marginBottom: "12px"
+              },
+              children: [
+                /* @__PURE__ */ jsxs2("div", {
+                  children: [
+                    /* @__PURE__ */ jsx2("h4", {
+                      style: { margin: "0 0 2px 0", color: "#f1f5f9", fontSize: "15px" },
+                      children: () => node().name
+                    }),
+                    /* @__PURE__ */ jsxs2("span", {
+                      style: { fontSize: "11px", color: "#64748b" },
+                      children: [
+                        "ID: ",
+                        () => node().id
+                      ]
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsx2("button", {
+                  type: "button",
+                  class: "visage-devtools-btn",
+                  onClick: () => props.selectedId.set(null),
+                  title: "Clear Selection",
+                  children: "Clear"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs2("div", {
+              style: { display: "flex", gap: "6px", marginBottom: "16px" },
+              children: [
+                /* @__PURE__ */ jsx2("span", {
+                  class: "visage-devtools-badge",
+                  style: {
+                    background: () => node().type === "computed" ? "#581c87" : "#0369a1",
+                    color: "#fff"
+                  },
+                  children: () => node().type.toUpperCase()
+                }),
+                /* @__PURE__ */ jsxs2("span", {
+                  class: "visage-devtools-badge",
+                  children: [
+                    "VERSION: ",
+                    () => node().version()
+                  ]
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx2("div", {
+              style: { fontSize: "12px", color: "#94a3b8", marginBottom: "6px" },
+              children: "Live Value:"
+            }),
+            /* @__PURE__ */ jsx2("pre", {
+              class: "visage-devtools-json",
+              style: { marginBottom: "16px" },
+              children: () => props.formatJSON(node().getValue())
+            }),
+            /* @__PURE__ */ jsxs2("div", {
+              style: { marginBottom: "16px" },
+              children: [
+                /* @__PURE__ */ jsxs2("div", {
+                  style: {
+                    fontSize: "11px",
+                    fontWeight: 700,
+                    textTransform: "uppercase",
+                    color: "#38bdf8",
+                    marginBottom: "6px"
+                  },
+                  children: [
+                    "Upstream Inputs (",
+                    () => deps().length,
+                    ")"
+                  ]
+                }),
+                () => deps().length > 0 ? /* @__PURE__ */ jsx2("div", {
+                  style: { display: "flex", flexDirection: "column", gap: "6px" },
+                  children: deps().map((d) => /* @__PURE__ */ jsxs2("div", {
+                    class: "visage-graph-pill source",
+                    style: {
+                      width: "100%",
+                      justifyContent: "space-between",
+                      padding: "6px 8px"
+                    },
+                    onClick: () => props.selectedId.set(d.id),
+                    children: [
+                      /* @__PURE__ */ jsx2("span", {
+                        children: d.name
+                      }),
+                      /* @__PURE__ */ jsxs2("span", {
+                        style: { color: "#94a3b8" },
+                        children: [
+                          "v",
+                          d.version()
+                        ]
+                      })
+                    ]
+                  }))
+                }) : /* @__PURE__ */ jsx2("div", {
+                  style: { fontSize: "11px", color: "#64748b" },
+                  children: "None (Root Reactive Source)"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs2("div", {
+              children: [
+                /* @__PURE__ */ jsxs2("div", {
+                  style: {
+                    fontSize: "11px",
+                    fontWeight: 700,
+                    textTransform: "uppercase",
+                    color: "#c084fc",
+                    marginBottom: "6px"
+                  },
+                  children: [
+                    "Downstream Consumers (",
+                    () => targets().length,
+                    ")"
+                  ]
+                }),
+                () => targets().length > 0 ? /* @__PURE__ */ jsx2("div", {
+                  style: { display: "flex", flexDirection: "column", gap: "6px" },
+                  children: targets().map((t) => /* @__PURE__ */ jsxs2("div", {
+                    class: "visage-graph-pill target",
+                    style: {
+                      width: "100%",
+                      justifyContent: "space-between",
+                      padding: "6px 8px"
+                    },
+                    onClick: () => props.selectedId.set(t.id),
+                    children: [
+                      /* @__PURE__ */ jsx2("span", {
+                        children: t.name
+                      }),
+                      /* @__PURE__ */ jsxs2("span", {
+                        style: { color: "#94a3b8" },
+                        children: [
+                          "v",
+                          t.version()
+                        ]
+                      })
+                    ]
+                  }))
+                }) : /* @__PURE__ */ jsx2("div", {
+                  style: { fontSize: "11px", color: "#64748b" },
+                  children: "None (Leaf / UI Consumer)"
+                })
+              ]
+            })
+          ]
+        });
+      }
+    })
+  });
+}
+
+// src/devtools/GraphTab.tsx
+function GraphTab(props) {
+  const [filterType, setFilterType] = createSignal2("all", {
+    internal: true
+  });
+  const [hoveredId, setHoveredId] = createSignal2(null, { internal: true });
+  const allSignals = () => props.hub.signalsList();
+  const getDependencies = (node) => {
+    const depIds = node.dependencies ? node.dependencies() : [];
+    if (depIds.length === 0)
+      return [];
+    return allSignals().filter((s) => depIds.includes(s.id));
+  };
+  const getDependents = (node) => {
+    const directDependents = node.dependents ? node.dependents() : [];
+    return allSignals().filter((s) => directDependents.includes(s.id) || s.dependencies?.().includes(node.id));
+  };
+  const activeFocusId = () => hoveredId() ?? props.selectedId();
+  const focusedDeps = () => {
+    const id = activeFocusId();
+    if (!id)
+      return [];
+    const node = allSignals().find((s) => s.id === id);
+    if (!node)
+      return [];
+    return getDependencies(node).map((s) => s.id);
+  };
+  const focusedTargets = () => {
+    const id = activeFocusId();
+    if (!id)
+      return [];
+    const node = allSignals().find((s) => s.id === id);
+    if (!node)
+      return [];
+    return getDependents(node).map((s) => s.id);
+  };
+  const filteredSignals = () => allSignals().filter((s) => {
+    const q = props.searchQuery().toLowerCase().trim();
+    const matchQuery = !q || s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q);
+    const matchType = filterType() === "all" || s.type === filterType();
+    return matchQuery && matchType;
+  });
+  const stateSignals = () => filteredSignals().filter((s) => s.type === "signal");
+  const computedSignals = () => filteredSignals().filter((s) => s.type === "computed");
+  const selectedNode = () => {
+    const id = props.selectedId();
+    if (!id)
+      return null;
+    return allSignals().find((s) => s.id === id) ?? null;
+  };
+  return /* @__PURE__ */ jsxs2("div", {
+    class: "visage-graph-container",
+    children: [
+      /* @__PURE__ */ jsxs2("div", {
+        class: "visage-graph-toolbar",
+        children: [
+          /* @__PURE__ */ jsxs2("div", {
+            style: { display: "flex", alignItems: "center", gap: "10px" },
+            children: [
+              /* @__PURE__ */ jsx2("input", {
+                class: "visage-devtools-input",
+                style: { width: "200px" },
+                placeholder: "Filter DAG graph...",
+                value: props.searchQuery,
+                onInput: (e) => props.searchQuery.set(e.target.value)
+              }),
+              /* @__PURE__ */ jsxs2("div", {
+                style: { display: "flex", gap: "4px" },
+                children: [
+                  /* @__PURE__ */ jsxs2("button", {
+                    type: "button",
+                    class: () => `visage-devtools-btn ${filterType() === "all" ? "active" : ""}`,
+                    onClick: () => setFilterType("all"),
+                    children: [
+                      "All (",
+                      () => filteredSignals().length,
+                      ")"
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs2("button", {
+                    type: "button",
+                    class: () => `visage-devtools-btn ${filterType() === "signal" ? "active" : ""}`,
+                    onClick: () => setFilterType("signal"),
+                    children: [
+                      "Signals (",
+                      () => stateSignals().length,
+                      ")"
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs2("button", {
+                    type: "button",
+                    class: () => `visage-devtools-btn ${filterType() === "computed" ? "active" : ""}`,
+                    onClick: () => setFilterType("computed"),
+                    children: [
+                      "Computeds (",
+                      () => computedSignals().length,
+                      ")"
+                    ]
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs2("div", {
+            style: {
+              fontSize: "11px",
+              color: "#64748b",
+              display: "flex",
+              gap: "14px",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx2("span", {
+                style: { color: "#38bdf8" },
+                children: "[SIG] Upstream"
+              }),
+              /* @__PURE__ */ jsx2("span", {
+                style: { color: "#c084fc" },
+                children: "[CMP] Derived"
+              }),
+              /* @__PURE__ */ jsx2("span", {
+                style: { color: "#10b981" },
+                children: "Glitch-Free DAG"
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs2("div", {
+        style: { flex: 1, display: "flex", overflow: "hidden" },
+        children: [
+          /* @__PURE__ */ jsxs2("div", {
+            class: "visage-graph-canvas",
+            children: [
+              /* @__PURE__ */ jsxs2("div", {
+                class: "visage-graph-column",
+                children: [
+                  /* @__PURE__ */ jsxs2("div", {
+                    class: "visage-graph-col-header",
+                    children: [
+                      /* @__PURE__ */ jsx2("span", {
+                        class: "visage-graph-pulse"
+                      }),
+                      /* @__PURE__ */ jsxs2("span", {
+                        children: [
+                          "Reactive Sources (",
+                          () => stateSignals().length,
+                          ")"
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx2(For2, {
+                    each: stateSignals,
+                    children: (node) => {
+                      const isSelected = () => props.selectedId() === node.id;
+                      const isDep = () => focusedDeps().includes(node.id);
+                      const isTarget = () => focusedTargets().includes(node.id);
+                      const isDimmed = () => activeFocusId() !== null && !isSelected() && !isDep() && !isTarget();
+                      const dependents = () => getDependents(node);
+                      return /* @__PURE__ */ jsxs2("div", {
+                        class: () => `visage-graph-node ${isSelected() ? "selected" : ""} ${isDep() ? "is-dependency" : ""} ${isTarget() ? "is-dependent" : ""} ${isDimmed() ? "is-dimmed" : ""}`,
+                        onClick: () => props.selectedId.set(node.id),
+                        onMouseEnter: () => setHoveredId(node.id),
+                        onMouseLeave: () => setHoveredId(null),
+                        children: [
+                          /* @__PURE__ */ jsxs2("div", {
+                            class: "visage-graph-node-title",
+                            children: [
+                              /* @__PURE__ */ jsxs2("span", {
+                                style: {
+                                  color: "#f8fafc",
+                                  display: "inline-flex",
+                                  alignItems: "center",
+                                  gap: "6px"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx2("span", {
+                                    style: {
+                                      fontSize: "9px",
+                                      fontWeight: 700,
+                                      padding: "1px 4px",
+                                      borderRadius: "3px",
+                                      background: "#082f49",
+                                      color: "#38bdf8",
+                                      border: "1px solid #0369a1"
+                                    },
+                                    children: "SIG"
+                                  }),
+                                  /* @__PURE__ */ jsx2("span", {
+                                    children: node.name
+                                  })
+                                ]
+                              }),
+                              /* @__PURE__ */ jsxs2("span", {
+                                class: "visage-devtools-badge",
+                                children: [
+                                  "v",
+                                  () => node.version()
+                                ]
+                              })
+                            ]
+                          }),
+                          /* @__PURE__ */ jsx2("div", {
+                            class: "visage-graph-node-val",
+                            children: () => JSON.stringify(node.getValue())
+                          }),
+                          /* @__PURE__ */ jsx2("div", {
+                            style: { marginTop: "8px", display: "flex", flexWrap: "wrap", gap: "4px" },
+                            children: () => dependents().length > 0 ? /* @__PURE__ */ jsxs2("span", {
+                              style: { fontSize: "10px", color: "#94a3b8" },
+                              children: [
+                                dependents().length,
+                                " consumer",
+                                dependents().length > 1 ? "s" : ""
+                              ]
+                            }) : /* @__PURE__ */ jsx2("span", {
+                              style: { fontSize: "10px", color: "#475569" },
+                              children: "Root State"
+                            })
+                          })
+                        ]
+                      });
+                    }
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx2("div", {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  color: "#334155",
+                  fontSize: "14px",
+                  fontWeight: 700,
+                  padding: "0 10px"
+                },
+                children: /* @__PURE__ */ jsx2("span", {
+                  children: ">"
+                })
+              }),
+              /* @__PURE__ */ jsxs2("div", {
+                class: "visage-graph-column",
+                children: [
+                  /* @__PURE__ */ jsxs2("div", {
+                    class: "visage-graph-col-header",
+                    children: [
+                      /* @__PURE__ */ jsx2("span", {
+                        class: "visage-graph-pulse computed"
+                      }),
+                      /* @__PURE__ */ jsxs2("span", {
+                        children: [
+                          "Derived Computeds (",
+                          () => computedSignals().length,
+                          ")"
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx2(For2, {
+                    each: computedSignals,
+                    children: (node) => {
+                      const isSelected = () => props.selectedId() === node.id;
+                      const isDep = () => focusedDeps().includes(node.id);
+                      const isTarget = () => focusedTargets().includes(node.id);
+                      const isDimmed = () => activeFocusId() !== null && !isSelected() && !isDep() && !isTarget();
+                      const deps = () => getDependencies(node);
+                      return /* @__PURE__ */ jsxs2("div", {
+                        class: () => `visage-graph-node ${isSelected() ? "selected" : ""} ${isDep() ? "is-dependency" : ""} ${isTarget() ? "is-dependent" : ""} ${isDimmed() ? "is-dimmed" : ""}`,
+                        onClick: () => props.selectedId.set(node.id),
+                        onMouseEnter: () => setHoveredId(node.id),
+                        onMouseLeave: () => setHoveredId(null),
+                        children: [
+                          /* @__PURE__ */ jsxs2("div", {
+                            class: "visage-graph-node-title",
+                            children: [
+                              /* @__PURE__ */ jsxs2("span", {
+                                style: {
+                                  color: "#f8fafc",
+                                  display: "inline-flex",
+                                  alignItems: "center",
+                                  gap: "6px"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx2("span", {
+                                    style: {
+                                      fontSize: "9px",
+                                      fontWeight: 700,
+                                      padding: "1px 4px",
+                                      borderRadius: "3px",
+                                      background: "#3b0764",
+                                      color: "#c084fc",
+                                      border: "1px solid #581c87"
+                                    },
+                                    children: "CMP"
+                                  }),
+                                  /* @__PURE__ */ jsx2("span", {
+                                    children: node.name
+                                  })
+                                ]
+                              }),
+                              /* @__PURE__ */ jsxs2("span", {
+                                class: "visage-devtools-badge",
+                                style: { background: "#581c87", color: "#fff" },
+                                children: [
+                                  "v",
+                                  () => node.version()
+                                ]
+                              })
+                            ]
+                          }),
+                          /* @__PURE__ */ jsx2("div", {
+                            class: "visage-graph-node-val",
+                            children: () => JSON.stringify(node.getValue())
+                          }),
+                          /* @__PURE__ */ jsx2("div", {
+                            style: { marginTop: "8px", display: "flex", flexWrap: "wrap", gap: "4px" },
+                            children: () => deps().length > 0 ? deps().map((d) => /* @__PURE__ */ jsxs2("span", {
+                              class: "visage-graph-pill source",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                props.selectedId.set(d.id);
+                              },
+                              children: [
+                                "in: ",
+                                d.name
+                              ]
+                            })) : /* @__PURE__ */ jsx2("span", {
+                              style: { fontSize: "10px", color: "#64748b" },
+                              children: "Memoized"
+                            })
+                          })
+                        ]
+                      });
+                    }
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx2(GraphInspector, {
+            selectedNode,
+            selectedId: props.selectedId,
+            getDependencies,
+            getDependents,
+            formatJSON: props.formatJSON
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/devtools/highlighter.ts
+var styleInjected = false;
+var activeTimeouts = new WeakMap;
+function injectHighlighterStyles() {
+  if (styleInjected || typeof document === "undefined")
+    return;
+  const style = document.createElement("style");
+  style.id = "visage-devtools-highlighter";
+  style.textContent = `
+    @keyframes visage-devtools-flash {
+      0% {
+        outline: 2px solid rgba(56, 189, 248, 0.9);
+        box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
+      }
+      100% {
+        outline: 2px solid transparent;
+        box-shadow: none;
+      }
+    }
+    .visage-dev-highlight {
+      outline-offset: -1px;
+      animation: visage-devtools-flash 0.5s ease-out !important;
+    }
+  `;
+  document.head.appendChild(style);
+  styleInjected = true;
+}
+function highlightElement2(element) {
+  if (!element || typeof document === "undefined" || !(element instanceof Element))
+    return;
+  injectHighlighterStyles();
+  const prevTimeout = activeTimeouts.get(element);
+  if (prevTimeout) {
+    clearTimeout(prevTimeout);
+  }
+  element.classList.remove("visage-dev-highlight");
+  element.offsetWidth;
+  element.classList.add("visage-dev-highlight");
+  const timeout = setTimeout(() => {
+    element.classList.remove("visage-dev-highlight");
+    activeTimeouts.delete(element);
+  }, 500);
+  activeTimeouts.set(element, timeout);
+}
+var observer = null;
+function setupDomMutationHighlighter(enabledGetter) {
+  if (typeof window === "undefined" || typeof MutationObserver === "undefined")
+    return;
+  const startObserver = () => {
+    if (observer)
+      return;
+    injectHighlighterStyles();
+    observer = new MutationObserver((mutations) => {
+      if (!enabledGetter())
+        return;
+      const seen = new Set;
+      for (const mutation of mutations) {
+        const target = mutation.target;
+        let el = null;
+        if (target instanceof Element) {
+          el = target;
+        } else if (target.parentElement) {
+          el = target.parentElement;
+        }
+        if (!el)
+          continue;
+        if (el.closest?.(".visage-devtools-root") || el.closest?.("#visage-devtools-highlighter")) {
+          continue;
+        }
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+          const oldCls = (mutation.oldValue || "").replace(/\bvisage-dev-highlight\b/g, "").replace(/\s+/g, " ").trim();
+          const newCls = (el.getAttribute("class") || "").replace(/\bvisage-dev-highlight\b/g, "").replace(/\s+/g, " ").trim();
+          if (oldCls === newCls) {
+            continue;
+          }
+        }
+        if (!seen.has(el)) {
+          seen.add(el);
+          highlightElement2(el);
+        }
+      }
+    });
+    const targetNode = document.body || document.documentElement;
+    if (targetNode) {
+      observer.observe(targetNode, {
+        childList: true,
+        attributes: true,
+        attributeOldValue: true,
+        characterData: true,
+        subtree: true
+      });
+    }
+  };
+  const stopObserver = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  };
+  effect2(() => {
+    if (enabledGetter()) {
+      startObserver();
+    } else {
+      stopObserver();
+    }
+  });
+  onCleanup2(() => {
+    stopObserver();
+  });
+}
+
+// src/devtools/QueryTab.tsx
+function QueryTab(props) {
+  const filteredQueries = () => {
+    const q = props.searchQuery().toLowerCase().trim();
+    const list = props.hub.queriesList();
+    if (!q)
+      return list;
+    return list.filter((item) => item.hash.toLowerCase().includes(q) || JSON.stringify(item.key).toLowerCase().includes(q));
+  };
+  const selectedQuery = () => {
+    const id = props.selectedId();
+    if (!id)
+      return null;
+    return props.hub.queriesList().find((qr) => qr.hash === id) ?? null;
+  };
+  return /* @__PURE__ */ jsxs2("div", {
+    style: { display: "flex", flex: 1, width: "100%", height: "100%", overflow: "hidden" },
+    children: [
+      /* @__PURE__ */ jsxs2("div", {
+        class: "visage-devtools-sidebar",
+        children: [
+          /* @__PURE__ */ jsx2("div", {
+            class: "visage-devtools-search",
+            children: /* @__PURE__ */ jsx2("input", {
+              class: "visage-devtools-input",
+              placeholder: "Search query cache...",
+              value: props.searchQuery,
+              onInput: (e) => props.searchQuery.set(e.target.value)
+            })
+          }),
+          /* @__PURE__ */ jsx2("div", {
+            class: "visage-devtools-list",
+            children: /* @__PURE__ */ jsx2(For2, {
+              each: filteredQueries,
+              fallback: /* @__PURE__ */ jsx2("div", {
+                style: { padding: "12px", color: "#64748b", fontSize: "12px" },
+                children: "No active queries in cache."
+              }),
+              children: (qr) => {
+                const isSelected = () => props.selectedId() === qr.hash;
+                return /* @__PURE__ */ jsxs2("div", {
+                  class: () => `visage-devtools-item ${isSelected() ? "selected" : ""}`,
+                  onClick: () => props.selectedId.set(qr.hash),
+                  children: [
+                    /* @__PURE__ */ jsxs2("div", {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "6px",
+                        overflow: "hidden"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2("span", {
+                          class: "visage-devtools-badge",
+                          style: {
+                            background: qr.status() === "success" ? "#065f46" : qr.status() === "error" ? "#991b1b" : "#854d0e",
+                            color: "#fff"
+                          },
+                          children: () => qr.status()
+                        }),
+                        /* @__PURE__ */ jsx2("span", {
+                          style: {
+                            fontWeight: 500,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                          },
+                          children: JSON.stringify(qr.key)
+                        })
+                      ]
+                    }),
+                    /* @__PURE__ */ jsx2("span", {
+                      style: { fontSize: "10px", color: "#64748b" },
+                      children: () => qr.fetchStatus()
+                    })
+                  ]
+                });
+              }
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        class: "visage-devtools-main",
+        children: /* @__PURE__ */ jsx2(Show2, {
+          when: selectedQuery,
+          fallback: /* @__PURE__ */ jsx2("div", {
+            style: { color: "#64748b", textAlign: "center", marginTop: "40px", fontSize: "13px" },
+            children: "Select a query from the cache list to view live cached response and trigger manual refetches."
+          }),
+          children: (qr) => /* @__PURE__ */ jsxs2("div", {
+            children: [
+              /* @__PURE__ */ jsxs2("div", {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: "16px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs2("div", {
+                    children: [
+                      /* @__PURE__ */ jsx2("h3", {
+                        style: { margin: 0, fontSize: "15px", color: "#f8fafc" },
+                        children: () => JSON.stringify(qr().key)
+                      }),
+                      /* @__PURE__ */ jsxs2("span", {
+                        style: { fontSize: "11px", color: "#64748b" },
+                        children: [
+                          "Hash: ",
+                          () => qr().hash
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs2("div", {
+                    style: { display: "flex", gap: "8px" },
+                    children: [
+                      /* @__PURE__ */ jsx2("button", {
+                        type: "button",
+                        class: "visage-devtools-btn",
+                        onClick: () => qr().refetch?.(),
+                        children: "Refetch"
+                      }),
+                      /* @__PURE__ */ jsx2("button", {
+                        type: "button",
+                        class: "visage-devtools-btn",
+                        onClick: () => qr().invalidate?.(),
+                        children: "Invalidate Cache"
+                      })
+                    ]
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs2("div", {
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: "1fr 1fr",
+                  gap: "10px",
+                  marginBottom: "16px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs2("div", {
+                    style: {
+                      background: "#0c111d",
+                      padding: "10px",
+                      borderRadius: "6px",
+                      border: "1px solid #1e293b"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx2("div", {
+                        style: { fontSize: "11px", color: "#64748b" },
+                        children: "STATUS"
+                      }),
+                      /* @__PURE__ */ jsx2("div", {
+                        style: { fontWeight: 600, color: "#38bdf8" },
+                        children: () => `${qr().status()} (${qr().fetchStatus()})`
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs2("div", {
+                    style: {
+                      background: "#0c111d",
+                      padding: "10px",
+                      borderRadius: "6px",
+                      border: "1px solid #1e293b"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx2("div", {
+                        style: { fontSize: "11px", color: "#64748b" },
+                        children: "LAST UPDATED"
+                      }),
+                      /* @__PURE__ */ jsx2("div", {
+                        style: { fontWeight: 600, color: "#f1f5f9" },
+                        children: () => qr().dataUpdatedAt() ? new Date(qr().dataUpdatedAt()).toLocaleTimeString() : "Never"
+                      })
+                    ]
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx2("div", {
+                style: { fontSize: "12px", color: "#94a3b8", marginBottom: "6px" },
+                children: "Cached Response Payload:"
+              }),
+              /* @__PURE__ */ jsx2("pre", {
+                class: "visage-devtools-json",
+                children: () => props.formatJSON(qr().data())
+              })
+            ]
+          })
+        })
+      })
+    ]
+  });
+}
+
+// src/devtools/RpcTab.tsx
+function RpcTab(props) {
+  const filteredRpc = () => {
+    const q = props.searchQuery().toLowerCase().trim();
+    const list = props.hub.rpcLogs();
+    if (!q)
+      return list;
+    return list.filter((r) => r.path.toLowerCase().includes(q) || r.type.toLowerCase().includes(q));
+  };
+  const selectedRpc = () => {
+    const id = props.selectedId();
+    if (!id)
+      return null;
+    return props.hub.rpcLogs().find((r) => r.id === id) ?? null;
+  };
+  return /* @__PURE__ */ jsxs2("div", {
+    style: { display: "flex", flex: 1, width: "100%", height: "100%", overflow: "hidden" },
+    children: [
+      /* @__PURE__ */ jsxs2("div", {
+        class: "visage-devtools-sidebar",
+        children: [
+          /* @__PURE__ */ jsxs2("div", {
+            class: "visage-devtools-search",
+            style: { display: "flex", gap: "6px" },
+            children: [
+              /* @__PURE__ */ jsx2("input", {
+                class: "visage-devtools-input",
+                placeholder: "Filter RPC routes...",
+                value: props.searchQuery,
+                onInput: (e) => props.searchQuery.set(e.target.value)
+              }),
+              /* @__PURE__ */ jsx2("button", {
+                type: "button",
+                class: "visage-devtools-btn",
+                onClick: () => props.hub.clearLogs(),
+                title: "Clear RPC Logs",
+                children: "Clear"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx2("div", {
+            class: "visage-devtools-list",
+            children: /* @__PURE__ */ jsx2(For2, {
+              each: filteredRpc,
+              fallback: /* @__PURE__ */ jsx2("div", {
+                style: { padding: "12px", color: "#64748b", fontSize: "12px" },
+                children: "No RPC activity recorded yet."
+              }),
+              children: (r) => {
+                const isSelected = () => props.selectedId() === r.id;
+                return /* @__PURE__ */ jsxs2("div", {
+                  class: () => `visage-devtools-item ${isSelected() ? "selected" : ""}`,
+                  onClick: () => props.selectedId.set(r.id),
+                  children: [
+                    /* @__PURE__ */ jsxs2("div", {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "6px",
+                        overflow: "hidden"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2("span", {
+                          class: "visage-devtools-badge",
+                          style: {
+                            background: r.type === "mutation" ? "#c026d3" : r.type === "subscription" ? "#7c3aed" : "#0284c7",
+                            color: "#fff"
+                          },
+                          children: r.type.slice(0, 3).toUpperCase()
+                        }),
+                        /* @__PURE__ */ jsx2("span", {
+                          style: {
+                            fontWeight: 500,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                          },
+                          children: r.path
+                        })
+                      ]
+                    }),
+                    /* @__PURE__ */ jsxs2("div", {
+                      style: { display: "flex", alignItems: "center", gap: "6px" },
+                      children: [
+                        /* @__PURE__ */ jsx2("span", {
+                          style: {
+                            fontSize: "11px",
+                            color: r.status === "success" ? "#10b981" : r.status === "error" ? "#ef4444" : "#f59e0b"
+                          },
+                          children: r.status
+                        }),
+                        r.duration !== undefined ? /* @__PURE__ */ jsxs2("span", {
+                          style: { fontSize: "10px", color: "#64748b" },
+                          children: [
+                            r.duration,
+                            "ms"
+                          ]
+                        }) : null
+                      ]
+                    })
+                  ]
+                });
+              }
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        class: "visage-devtools-main",
+        children: /* @__PURE__ */ jsx2(Show2, {
+          when: selectedRpc,
+          fallback: /* @__PURE__ */ jsx2("div", {
+            style: { color: "#64748b", textAlign: "center", marginTop: "40px", fontSize: "13px" },
+            children: "Select an RPC procedure call from the left to inspect full payload, latency, and streaming SSE frames."
+          }),
+          children: (r) => /* @__PURE__ */ jsxs2("div", {
+            children: [
+              /* @__PURE__ */ jsxs2("div", {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: "16px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs2("div", {
+                    children: [
+                      /* @__PURE__ */ jsx2("h3", {
+                        style: { margin: 0, fontSize: "16px", color: "#f8fafc" },
+                        children: () => `${r().type.toUpperCase()}: ${r().path}`
+                      }),
+                      /* @__PURE__ */ jsxs2("span", {
+                        style: { fontSize: "11px", color: "#64748b" },
+                        children: [
+                          "Call ID: ",
+                          () => r().id
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx2("span", {
+                    class: "visage-devtools-badge",
+                    style: { fontSize: "12px", padding: "3px 8px" },
+                    children: () => r().duration !== undefined ? `${r().duration}ms` : "Active"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs2("div", {
+                style: { marginBottom: "12px" },
+                children: [
+                  /* @__PURE__ */ jsx2("div", {
+                    style: { fontSize: "12px", color: "#94a3b8", marginBottom: "4px" },
+                    children: "Input Parameters:"
+                  }),
+                  /* @__PURE__ */ jsx2("pre", {
+                    class: "visage-devtools-json",
+                    children: () => props.formatJSON(r().input)
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx2(Show2, {
+                when: () => r().response !== undefined,
+                children: /* @__PURE__ */ jsxs2("div", {
+                  style: { marginBottom: "12px" },
+                  children: [
+                    /* @__PURE__ */ jsx2("div", {
+                      style: { fontSize: "12px", color: "#94a3b8", marginBottom: "4px" },
+                      children: "Server Response:"
+                    }),
+                    /* @__PURE__ */ jsx2("pre", {
+                      class: "visage-devtools-json",
+                      children: () => props.formatJSON(r().response)
+                    })
+                  ]
+                })
+              }),
+              /* @__PURE__ */ jsx2(Show2, {
+                when: () => (r().events?.length ?? 0) > 0,
+                children: /* @__PURE__ */ jsxs2("div", {
+                  children: [
+                    /* @__PURE__ */ jsxs2("div", {
+                      style: { fontSize: "12px", color: "#94a3b8", marginBottom: "4px" },
+                      children: [
+                        "Live SSE Event Stream (",
+                        () => r().events?.length ?? 0,
+                        " frames):"
+                      ]
+                    }),
+                    /* @__PURE__ */ jsx2("pre", {
+                      class: "visage-devtools-json",
+                      children: () => props.formatJSON(r().events)
+                    })
+                  ]
+                })
+              })
+            ]
+          })
+        })
+      })
+    ]
+  });
+}
+
+// src/devtools/SignalsTab.tsx
+function SignalsTab(props) {
+  const filteredSignals = () => {
+    const q = props.searchQuery().toLowerCase().trim();
+    const list = props.hub.signalsList();
+    if (!q)
+      return list;
+    return list.filter((s) => s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q));
+  };
+  const selectedSignal = () => {
+    const id = props.selectedId();
+    if (!id)
+      return null;
+    return props.hub.signalsList().find((s) => s.id === id) ?? null;
+  };
+  return /* @__PURE__ */ jsxs2("div", {
+    style: { display: "flex", flex: 1, width: "100%", height: "100%", overflow: "hidden" },
+    children: [
+      /* @__PURE__ */ jsxs2("div", {
+        class: "visage-devtools-sidebar",
+        children: [
+          /* @__PURE__ */ jsx2("div", {
+            class: "visage-devtools-search",
+            children: /* @__PURE__ */ jsx2("input", {
+              class: "visage-devtools-input",
+              placeholder: "Search signals...",
+              value: props.searchQuery,
+              onInput: (e) => props.searchQuery.set(e.target.value)
+            })
+          }),
+          /* @__PURE__ */ jsx2("div", {
+            class: "visage-devtools-list",
+            children: /* @__PURE__ */ jsx2(For2, {
+              each: filteredSignals,
+              children: (sig) => {
+                const isSelected = () => props.selectedId() === sig.id;
+                return /* @__PURE__ */ jsxs2("div", {
+                  class: () => `visage-devtools-item ${sig.type} ${isSelected() ? "selected" : ""}`,
+                  onClick: () => props.selectedId.set(sig.id),
+                  children: [
+                    /* @__PURE__ */ jsxs2("div", {
+                      style: { display: "flex", alignItems: "center", gap: "8px" },
+                      children: [
+                        /* @__PURE__ */ jsx2("span", {
+                          style: {
+                            fontSize: "9px",
+                            fontWeight: 700,
+                            padding: "1px 4px",
+                            borderRadius: "3px",
+                            background: sig.type === "computed" ? "#3b0764" : "#082f49",
+                            color: sig.type === "computed" ? "#c084fc" : "#38bdf8",
+                            border: `1px solid ${sig.type === "computed" ? "#581c87" : "#0369a1"}`
+                          },
+                          children: sig.type === "computed" ? "CMP" : "SIG"
+                        }),
+                        /* @__PURE__ */ jsx2("span", {
+                          style: { fontWeight: 500, color: "#f1f5f9" },
+                          children: sig.name
+                        })
+                      ]
+                    }),
+                    /* @__PURE__ */ jsxs2("span", {
+                      class: "visage-devtools-badge",
+                      children: [
+                        "v",
+                        () => sig.version()
+                      ]
+                    })
+                  ]
+                });
+              }
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        class: "visage-devtools-main",
+        children: /* @__PURE__ */ jsx2(Show2, {
+          when: selectedSignal,
+          fallback: /* @__PURE__ */ jsx2("div", {
+            style: {
+              color: "#64748b",
+              textAlign: "center",
+              marginTop: "40px",
+              fontSize: "13px"
+            },
+            children: "Select a signal or computed from the left to inspect its live reactive value."
+          }),
+          children: (sig) => /* @__PURE__ */ jsxs2("div", {
+            children: [
+              /* @__PURE__ */ jsxs2("div", {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: "16px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs2("div", {
+                    children: [
+                      /* @__PURE__ */ jsx2("h3", {
+                        style: { margin: 0, fontSize: "16px", color: "#f8fafc" },
+                        children: () => sig().name
+                      }),
+                      /* @__PURE__ */ jsxs2("span", {
+                        style: { fontSize: "11px", color: "#64748b" },
+                        children: [
+                          "ID: ",
+                          () => sig().id
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs2("div", {
+                    style: { display: "flex", gap: "8px" },
+                    children: [
+                      /* @__PURE__ */ jsx2("span", {
+                        class: "visage-devtools-badge",
+                        style: {
+                          background: () => sig().type === "computed" ? "#581c87" : "#0369a1",
+                          color: "#fff"
+                        },
+                        children: () => sig().type.toUpperCase()
+                      }),
+                      /* @__PURE__ */ jsxs2("span", {
+                        class: "visage-devtools-badge",
+                        children: [
+                          "VERSION: ",
+                          () => sig().version()
+                        ]
+                      })
+                    ]
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx2("div", {
+                style: { marginBottom: "12px", fontSize: "12px", color: "#94a3b8" },
+                children: "Current Reactive Value:"
+              }),
+              /* @__PURE__ */ jsx2("pre", {
+                class: "visage-devtools-json",
+                children: () => props.formatJSON(sig().getValue())
+              })
+            ]
+          })
+        })
+      })
+    ]
+  });
+}
+
+// src/devtools/styles.ts
+var devtoolsStyles = `
+  .visage-devtools-root {
+    position: fixed;
+    z-index: 999999;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    color: #f1f5f9;
+    box-sizing: border-box;
+  }
+  .visage-devtools-root * {
+    box-sizing: border-box;
+  }
+  .visage-devtools-trigger {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    background: #0f172a;
+    color: #38bdf8;
+    border: 1px solid #334155;
+    border-radius: 9999px;
+    padding: 8px 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 0 10px rgba(56, 189, 248, 0.2);
+    transition: all 0.2s ease;
+    z-index: 999999;
+  }
+  .visage-devtools-trigger:hover {
+    background: #1e293b;
+    border-color: #38bdf8;
+    transform: translateY(-2px);
+  }
+  .visage-devtools-drawer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 420px;
+    background: #090d16;
+    border-top: 1px solid #1e293b;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 -20px 25px -5px rgba(0, 0, 0, 0.7);
+    z-index: 999999;
+  }
+  .visage-devtools-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    background: #0f172a;
+    border-bottom: 1px solid #1e293b;
+  }
+  .visage-devtools-tabs {
+    display: flex;
+    gap: 4px;
+  }
+  .visage-devtools-tab {
+    background: transparent;
+    border: none;
+    color: #94a3b8;
+    padding: 6px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .visage-devtools-tab:hover {
+    color: #f1f5f9;
+    background: #1e293b;
+  }
+  .visage-devtools-tab.active {
+    color: #38bdf8;
+    background: #1e293b;
+    font-weight: 600;
+  }
+  .visage-devtools-badge {
+    background: #334155;
+    color: #f1f5f9;
+    padding: 1px 6px;
+    border-radius: 9999px;
+    font-size: 10px;
+    font-weight: 600;
+  }
+  .visage-devtools-body {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
+  .visage-devtools-sidebar {
+    width: 320px;
+    border-right: 1px solid #1e293b;
+    display: flex;
+    flex-direction: column;
+    background: #0c111d;
+  }
+  .visage-devtools-search {
+    padding: 8px;
+    border-bottom: 1px solid #1e293b;
+  }
+  .visage-devtools-input {
+    width: 100%;
+    background: #090d16;
+    border: 1px solid #334155;
+    border-radius: 6px;
+    color: #f1f5f9;
+    padding: 6px 10px;
+    font-size: 12px;
+    outline: none;
+  }
+  .visage-devtools-input:focus {
+    border-color: #38bdf8;
+  }
+  .visage-devtools-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px;
+  }
+  .visage-devtools-item {
+    padding: 8px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2px;
+    font-size: 12px;
+  }
+  .visage-devtools-item:hover {
+    background: #1e293b;
+  }
+  .visage-devtools-item.selected {
+    background: #1e293b;
+    border-left: 3px solid #38bdf8;
+  }
+  .visage-devtools-main {
+    flex: 1;
+    padding: 16px;
+    overflow-y: auto;
+    background: #090d16;
+  }
+  .visage-devtools-json {
+    background: #050811;
+    border: 1px solid #1e293b;
+    border-radius: 6px;
+    padding: 12px;
+    font-family: "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
+    font-size: 12px;
+    color: #38bdf8;
+    overflow-x: auto;
+    white-space: pre-wrap;
+  }
+  .visage-devtools-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .visage-devtools-btn {
+    background: #1e293b;
+    border: 1px solid #334155;
+    color: #f1f5f9;
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-size: 11px;
+    cursor: pointer;
+    font-weight: 500;
+  }
+  .visage-devtools-btn:hover {
+    background: #334155;
+  }
+  .visage-devtools-btn.active {
+    background: #0284c7;
+    border-color: #38bdf8;
+  }
+  /* DAG Graph Visualization */
+  .visage-graph-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: #050811;
+    position: relative;
+  }
+  .visage-graph-toolbar {
+    padding: 8px 16px;
+    background: #090d16;
+    border-bottom: 1px solid #1e293b;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+  .visage-graph-canvas {
+    flex: 1;
+    overflow: auto;
+    padding: 24px;
+    position: relative;
+    display: flex;
+    gap: 40px;
+  }
+  .visage-graph-column {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 220px;
+  }
+  .visage-graph-col-header {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #64748b;
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .visage-graph-node {
+    background: #0f172a;
+    border: 1px solid #1e293b;
+    border-radius: 8px;
+    padding: 10px 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+  }
+  .visage-graph-node:hover {
+    border-color: #38bdf8;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
+  }
+  .visage-graph-node.selected {
+    border-color: #38bdf8;
+    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4);
+    background: #131d35;
+  }
+  .visage-graph-node.is-dependency {
+    border-color: #38bdf8;
+    box-shadow: 0 0 0 1px #38bdf8, 0 2px 8px rgba(56, 189, 248, 0.25);
+    background: #082f49;
+  }
+  .visage-graph-node.is-dependent {
+    border-color: #c084fc;
+    box-shadow: 0 0 0 1px #c084fc, 0 2px 8px rgba(192, 132, 252, 0.25);
+    background: #3b0764;
+  }
+  .visage-graph-node.is-dimmed {
+    opacity: 0.3;
+    filter: grayscale(0.5);
+  }
+  .visage-graph-node-title {
+    font-weight: 600;
+    font-size: 12px;
+    color: #f8fafc;
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .visage-graph-node-val {
+    font-family: monospace;
+    font-size: 11px;
+    color: #94a3b8;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 190px;
+  }
+  .visage-graph-pulse {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #10b981;
+    box-shadow: 0 0 8px #10b981;
+  }
+  .visage-graph-pulse.computed {
+    background: #a855f7;
+    box-shadow: 0 0 8px #a855f7;
+  }
+  .visage-graph-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    background: #1e293b;
+    color: #cbd5e1;
+    padding: 3px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    cursor: pointer;
+    border: 1px solid #334155;
+    transition: all 0.15s ease;
+  }
+  .visage-graph-pill:hover {
+    background: #334155;
+    color: #fff;
+    border-color: #38bdf8;
+  }
+  .visage-graph-pill.source {
+    border-color: #0369a1;
+    color: #7dd3fc;
+  }
+  .visage-graph-pill.target {
+    border-color: #7e22ce;
+    color: #d8b4fe;
+  }
+`;
+
+// src/devtools/component.tsx
+function VisageDevTools2(props = {}) {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const hub = devtoolsHub2;
+  if (typeof window !== "undefined" && !window.__VISAGE_DEVTOOLS__) {
+    window.__VISAGE_DEVTOOLS__ = hub;
+  }
+  if (props.initialOpen !== undefined) {
+    hub.isOpen.set(props.initialOpen);
+  }
+  if (props.initialTab !== undefined) {
+    hub.activeTab.set(props.initialTab);
+  }
+  if (props.highlightDOM !== undefined) {
+    hub.highlightDOM.set(props.highlightDOM);
+  }
+  setupDomMutationHighlighter(() => hub.highlightDOM());
+  const selectedId = signal2(null, { internal: true });
+  const searchQuery = signal2("", { internal: true });
+  if (typeof window !== "undefined") {
+    const handleKeyDown = (e) => {
+      if (e.shiftKey && e.altKey && e.key.toLowerCase() === "v") {
+        e.preventDefault();
+        hub.toggle();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup2(() => window.removeEventListener("keydown", handleKeyDown));
+  }
+  const formatJSON = (val) => {
+    try {
+      if (val === undefined)
+        return "undefined";
+      return JSON.stringify(val, null, 2);
+    } catch {
+      return String(val);
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", {
+    class: "visage-devtools-root",
+    children: [
+      /* @__PURE__ */ jsx2(Style2, {
+        children: devtoolsStyles
+      }),
+      () => !hub.isOpen() ? /* @__PURE__ */ jsx2(Tooltip3, {
+        content: "Press Shift+Alt+V to toggle Visage DevTools",
+        side: "top",
+        children: /* @__PURE__ */ jsxs2("button", {
+          type: "button",
+          class: "visage-devtools-trigger",
+          onClick: () => hub.toggle(),
+          "aria-label": "Open Visage DevTools",
+          children: [
+            /* @__PURE__ */ jsx2("svg", {
+              "aria-hidden": "true",
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              children: /* @__PURE__ */ jsx2("path", {
+                d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z"
+              })
+            }),
+            /* @__PURE__ */ jsx2("span", {
+              children: "DevTools"
+            })
+          ]
+        })
+      }) : /* @__PURE__ */ jsxs2("div", {
+        class: "visage-devtools-drawer",
+        role: "dialog",
+        "aria-label": "Visage In-Browser DevTools",
+        children: [
+          /* @__PURE__ */ jsxs2("div", {
+            class: "visage-devtools-header",
+            children: [
+              /* @__PURE__ */ jsxs2("div", {
+                style: { display: "flex", alignItems: "center", gap: "8px" },
+                children: [
+                  /* @__PURE__ */ jsx2("svg", {
+                    "aria-hidden": "true",
+                    width: "14",
+                    height: "14",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "#38bdf8",
+                    "stroke-width": "2",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    children: /* @__PURE__ */ jsx2("path", {
+                      d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx2("strong", {
+                    style: {
+                      fontSize: "12px",
+                      letterSpacing: "0.04em",
+                      color: "#f8fafc",
+                      fontWeight: 700
+                    },
+                    children: "VISAGE"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx2(Tabs2, {
+                value: () => hub.activeTab(),
+                onValueChange: (val) => {
+                  hub.setTab(val);
+                  selectedId.set(null);
+                },
+                listClass: "visage-devtools-tabs",
+                items: [
+                  {
+                    value: "signals",
+                    label: () => /* @__PURE__ */ jsxs2("span", {
+                      style: { display: "inline-flex", alignItems: "center", gap: "6px" },
+                      children: [
+                        /* @__PURE__ */ jsx2("span", {
+                          children: "Signals"
+                        }),
+                        /* @__PURE__ */ jsx2("span", {
+                          class: "visage-devtools-badge",
+                          children: () => hub.signalsList().length
+                        })
+                      ]
+                    })
+                  },
+                  {
+                    value: "graph",
+                    label: () => /* @__PURE__ */ jsxs2("span", {
+                      style: { display: "inline-flex", alignItems: "center", gap: "6px" },
+                      children: [
+                        /* @__PURE__ */ jsx2("span", {
+                          children: "DAG Graph"
+                        }),
+                        /* @__PURE__ */ jsx2("span", {
+                          class: "visage-devtools-badge",
+                          style: { background: "#581c87", color: "#fff" },
+                          children: "LIVE"
+                        })
+                      ]
+                    })
+                  },
+                  {
+                    value: "query",
+                    label: () => /* @__PURE__ */ jsxs2("span", {
+                      style: { display: "inline-flex", alignItems: "center", gap: "6px" },
+                      children: [
+                        /* @__PURE__ */ jsx2("span", {
+                          children: "Query Cache"
+                        }),
+                        /* @__PURE__ */ jsx2("span", {
+                          class: "visage-devtools-badge",
+                          children: () => hub.queriesList().length
+                        })
+                      ]
+                    })
+                  },
+                  {
+                    value: "rpc",
+                    label: () => /* @__PURE__ */ jsxs2("span", {
+                      style: { display: "inline-flex", alignItems: "center", gap: "6px" },
+                      children: [
+                        /* @__PURE__ */ jsx2("span", {
+                          children: "RPC"
+                        }),
+                        /* @__PURE__ */ jsx2("span", {
+                          class: "visage-devtools-badge",
+                          children: () => hub.rpcLogs().length
+                        })
+                      ]
+                    })
+                  },
+                  {
+                    value: "dom",
+                    label: "DOM Inspector"
+                  }
+                ]
+              }),
+              /* @__PURE__ */ jsx2("div", {
+                class: "visage-devtools-actions",
+                children: /* @__PURE__ */ jsx2("button", {
+                  type: "button",
+                  class: "visage-devtools-btn",
+                  onClick: () => hub.isOpen.set(false),
+                  title: "Close DevTools (Shift+Alt+V)",
+                  children: "Close"
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx2("div", {
+            class: "visage-devtools-body",
+            children: () => {
+              const tab = hub.activeTab();
+              if (tab === "signals") {
+                return /* @__PURE__ */ jsx2(SignalsTab, {
+                  hub,
+                  selectedId,
+                  searchQuery,
+                  formatJSON
+                });
+              }
+              if (tab === "graph") {
+                return /* @__PURE__ */ jsx2(GraphTab, {
+                  hub,
+                  selectedId,
+                  searchQuery,
+                  formatJSON
+                });
+              }
+              if (tab === "query") {
+                return /* @__PURE__ */ jsx2(QueryTab, {
+                  hub,
+                  selectedId,
+                  searchQuery,
+                  formatJSON
+                });
+              }
+              if (tab === "rpc") {
+                return /* @__PURE__ */ jsx2(RpcTab, {
+                  hub,
+                  selectedId,
+                  searchQuery,
+                  formatJSON
+                });
+              }
+              return /* @__PURE__ */ jsx2(DomTab, {
+                hub
+              });
+            }
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/devtools/index.ts
+function connectDevTools2(client) {
+  devtoolsHub2.attachQueryClient(client);
+}
+
+export { DevToolsHub2, devtoolsHub2, highlightElement2, VisageDevTools2, connectDevTools2 };