streetui 2.1.0 → 2.2.0

package/dist/index.cjs

@@ -28,6 +28,7 @@ __export(src_exports, {
   CleanupRegistry: () => CleanupRegistry,
   ContainerBuilderImpl: () => ContainerBuilderImpl,
   DEFAULT_PERF_THRESHOLDS: () => DEFAULT_PERF_THRESHOLDS,
+  DEVTOOLS_TABS: () => DEVTOOLS_TABS,
   DerivedSignal: () => DerivedSignal,
   DiagnosticCollector: () => DiagnosticCollector,
   DiagnosticError: () => DiagnosticError,
@@ -124,13 +125,17 @@ __export(src_exports, {
   inspectApplication: () => inspectApplication,
   inspectComponents: () => inspectComponents,
   inspectContext: () => inspectContext,
+  inspectEvents: () => inspectEvents,
   inspectForm: () => inspectForm,
   inspectGraph: () => inspectGraph,
+  inspectHydration: () => inspectHydration,
   inspectI18n: () => inspectI18n,
   inspectInteractions: () => inspectInteractions,
+  inspectMutation: () => inspectMutation,
   inspectResource: () => inspectResource,
   inspectRouter: () => inspectRouter,
   inspectSignal: () => inspectSignal,
+  inspectSignalGraph: () => inspectSignalGraph,
   interpolate: () => interpolate,
   isBatching: () => isBatching,
   isComponentDefinition: () => isComponentDefinition,
@@ -164,6 +169,7 @@ __export(src_exports, {
   renderDevToolsHTML: () => renderDevToolsHTML,
   renderDevToolsReport: () => renderDevToolsReport,
   renderHead: () => renderHead,
+  renderInteractiveDevTools: () => renderInteractiveDevTools,
   renderToString: () => renderToString,
   reportDiagnostic: () => reportDiagnostic,
   reportError: () => reportError,
@@ -205,7 +211,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/version.ts
-var VERSION = "2.1.0";
+var VERSION = "2.2.0";
 
 // ../state/src/signal.ts
 var _activeConsumer = null;
@@ -5849,6 +5855,23 @@ function errorMessageOf(error) {
   if (error instanceof Error) return error.message;
   return String(error);
 }
+function inspectMutation(mutation2, options = {}) {
+  const error = mutation2.error.peek();
+  const hasError = error !== void 0 && error !== null;
+  const base = {
+    status: mutation2.status.peek(),
+    pending: mutation2.pending.peek(),
+    hasData: mutation2.data.peek() !== void 0,
+    hasError,
+    errorName: hasError ? errorConstructorName(error) : void 0
+  };
+  if (options.includeData !== true) return base;
+  return {
+    ...base,
+    data: mutation2.data.peek(),
+    ...hasError ? { errorMessage: errorMessageOf(error) } : {}
+  };
+}
 function inspectRouter(router) {
   const match = router.currentRoute.peek();
   const query = {};
@@ -5896,6 +5919,97 @@ function inspectI18n(i18n, options = {}) {
   return { ...base, missingKeys };
 }
 
+// ../devtools/src/inspect-detail.ts
+function inspectEvents(graph) {
+  const nodes = [];
+  const byType = {};
+  let totalHandlers = 0;
+  graph.walk((node, depth) => {
+    if (node.events.length === 0) return;
+    const types = node.events.map((e) => e.type);
+    for (const t of types) {
+      byType[t] = (byType[t] ?? 0) + 1;
+      totalHandlers += 1;
+    }
+    nodes.push({
+      id: node.id,
+      nodeType: node.type,
+      key: node.key,
+      depth,
+      eventTypes: [...types].sort()
+    });
+  });
+  return { nodes, totalHandlers, byType };
+}
+function inspectSignalGraph(compiled, options = {}) {
+  const graph = compiled.graph;
+  const edges = [];
+  const byId = /* @__PURE__ */ new Map();
+  graph.walk((node) => {
+    for (const ref of node.stateRefs) {
+      edges.push({
+        signalId: ref.signalId,
+        nodeId: node.id,
+        nodeType: node.type,
+        propKey: ref.propKey
+      });
+      let entry = byId.get(ref.signalId);
+      if (entry === void 0) {
+        entry = { boundNodeIds: /* @__PURE__ */ new Set(), bindingCount: 0 };
+        byId.set(ref.signalId, entry);
+      }
+      entry.boundNodeIds.add(node.id);
+      entry.bindingCount += 1;
+    }
+  });
+  const live = options.signalsById;
+  const signals = [...byId.entries()].sort((a, b) => a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0).map(([signalId, entry]) => {
+    const base = {
+      signalId,
+      boundNodeIds: [...entry.boundNodeIds],
+      bindingCount: entry.bindingCount
+    };
+    const sig = live?.[signalId];
+    if (sig === void 0) return base;
+    const oc = observerCount(sig);
+    return {
+      ...base,
+      kind: signalKind(sig),
+      ...oc !== void 0 ? { observerCount: oc } : {}
+    };
+  });
+  return { signals, edges };
+}
+
+// ../devtools/src/inspect-ssr.ts
+function countType(graph, type) {
+  let n = 0;
+  graph.walk((node) => {
+    if (node.type === type) n += 1;
+  });
+  return n;
+}
+function inspectHydration(compiled) {
+  const graph = compiled.graph;
+  const { summary } = analyzeGraph(graph);
+  const dynamicNodes = summary.totalNodes - summary.staticNodes;
+  const staticRatio = summary.totalNodes === 0 ? 0 : Math.round(summary.staticNodes / summary.totalNodes * 1e4) / 1e4;
+  return {
+    totalNodes: summary.totalNodes,
+    staticNodes: summary.staticNodes,
+    staticSubtrees: summary.staticSubtrees,
+    dynamicNodes,
+    dynamicTextNodes: summary.dynamicTextNodes,
+    dynamicAttrNodes: summary.dynamicAttrNodes,
+    eventNodes: summary.eventNodes,
+    lists: summary.lists,
+    conditionals: summary.conditionals,
+    portals: countType(graph, "portal"),
+    headAnchors: countType(graph, "head"),
+    staticRatio
+  };
+}
+
 // ../devtools/src/panels.ts
 function createDevTools(compiled, sources = {}, options = {}) {
   let current = capture(compiled, sources, options);
@@ -5949,6 +6063,12 @@ function capture(compiled, sources, options) {
     warnings: app.diagnostics.warnings,
     messages: app.diagnostics.messages
   };
+  const events = inspectEvents(compiled.graph);
+  const signalGraph = inspectSignalGraph(
+    compiled,
+    sources.signalsById !== void 0 ? { signalsById: sources.signalsById } : {}
+  );
+  const hydration = inspectHydration(compiled);
   const snapshot = {
     application,
     graph: app.graph,
@@ -5958,8 +6078,12 @@ function capture(compiled, sources, options) {
     overlays: interactions.overlays,
     transitions: interactions.transitions,
     diagnostics,
+    events,
+    signalGraph,
+    hydration,
     ...sources.router !== void 0 ? { router: inspectRouter(sources.router) } : {},
     ...sources.resources !== void 0 ? { resources: mapInspect(sources.resources, (r) => inspectResource(r)) } : {},
+    ...sources.mutations !== void 0 ? { mutations: mapInspect(sources.mutations, (m) => inspectMutation(m)) } : {},
     ...sources.forms !== void 0 ? { forms: mapInspect(sources.forms, (f) => inspectForm(f)) } : {},
     ...sources.contexts !== void 0 ? { contexts: mapInspect(sources.contexts, (c) => inspectContext(c)) } : {},
     ...sources.i18n !== void 0 ? {
@@ -6026,6 +6150,12 @@ function formatSnapshot(s) {
       lines.push(`  ${label}: ${r.status}${r.loading ? " (loading)" : ""}${r.hasError ? ` !${r.errorName}` : ""}`);
     }
   }
+  if (s.mutations !== void 0) {
+    lines.push("Mutations:");
+    for (const [label, m] of Object.entries(s.mutations)) {
+      lines.push(`  ${label}: ${m.status}${m.pending ? " (pending)" : ""}${m.hasError ? ` !${m.errorName}` : ""}`);
+    }
+  }
   if (s.forms !== void 0) {
     lines.push("Forms:");
     for (const [label, f] of Object.entries(s.forms)) {
@@ -6056,6 +6186,17 @@ function formatSnapshot(s) {
   for (const m of s.diagnostics.messages) {
     lines.push(`  ${m}`);
   }
+  lines.push(
+    `Events: ${s.events.nodes.length} node(s), ${s.events.totalHandlers} handler(s)` + (Object.keys(s.events.byType).length > 0 ? ` \xB7 ${Object.entries(s.events.byType).map(([t, n]) => `${t}\xD7${n}`).join(", ")}` : "")
+  );
+  lines.push(
+    `Signal graph: ${s.signalGraph.signals.length} signal(s), ${s.signalGraph.edges.length} binding edge(s)`
+  );
+  const h = s.hydration;
+  lines.push(
+    `SSR/Hydration: ${h.staticNodes}/${h.totalNodes} static (${(h.staticRatio * 100).toFixed(1)}%), ${h.dynamicNodes} dynamic \xB7 ${h.staticSubtrees} static subtree(s) \xB7 ${h.portals} portal(s), ${h.headAnchors} head anchor(s)`
+  );
+  lines.push("  (structural counts only \u2014 not wall-clock timings; browser gate BLOCKED)");
   return lines.join("\n");
 }
 function format(value) {
@@ -6241,6 +6382,207 @@ var DEVTOOLS_CSS = [
   "code{color:#d7d7e0}"
 ].join("");
 
+// ../devtools/src/interactive.ts
+var DEVTOOLS_TABS = [
+  { id: "components", label: "Component Tree" },
+  { id: "inspector", label: "Component Inspector" },
+  { id: "state", label: "Reactive State" },
+  { id: "signalGraph", label: "Signal Graph" },
+  { id: "router", label: "Router" },
+  { id: "resources", label: "Resource / Async" },
+  { id: "mutations", label: "Mutations" },
+  { id: "events", label: "Events" },
+  { id: "overlays", label: "Overlays" },
+  { id: "performance", label: "Performance" },
+  { id: "diagnostics", label: "Error Diagnostics" },
+  { id: "hydration", label: "SSR / Hydration" }
+];
+var EMBED_ESCAPE = new RegExp("[<\\u2028\\u2029]", "g");
+function embedJson(snapshot) {
+  return JSON.stringify(snapshot).replace(EMBED_ESCAPE, (ch) => {
+    const code = ch.charCodeAt(0).toString(16).padStart(4, "0");
+    return `\\u${code}`;
+  });
+}
+function renderInteractiveDevTools(snapshot, options = {}) {
+  const app = snapshot.application;
+  const title = options.title ?? `StreetUI DevTools \u2014 ${app.identity.name}`;
+  const initialTab = options.initialTab ?? DEVTOOLS_TABS[0].id;
+  const tabButtons = DEVTOOLS_TABS.map(
+    (t) => `<button type="button" role="tab" class="st-tab" data-tab="${escapeHtml(t.id)}"${t.id === initialTab ? ' aria-selected="true"' : ' aria-selected="false"'}>${escapeHtml(t.label)}</button>`
+  ).join("");
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${escapeHtml(title)}</title><style>${INTERACTIVE_CSS}</style></head><body class="st-dt"><header class="st-top"><h1>${escapeHtml(title)} <span class="st-dim">v${escapeHtml(app.identity.version)}</span></h1><button type="button" id="st-refresh" class="st-refresh">&#8635; Refresh</button></header><nav class="st-tabs" role="tablist" aria-label="DevTools panels">${tabButtons}</nav><main id="st-panel" class="st-body" role="tabpanel" aria-live="polite"></main><footer class="st-foot"><span class="st-dim">Structural inspection over one compiled graph. Not a production profiler; browser/AT conformance not claimed (gates BLOCKED).</span></footer><script type="application/json" id="st-data">${embedJson(snapshot)}</script><script>${CONTROLLER_JS.replace("__INITIAL_TAB__", JSON.stringify(initialTab))}</script></body></html>`;
+}
+var CONTROLLER_JS = [
+  "(function(){",
+  '"use strict";',
+  "var INITIAL_TAB=__INITIAL_TAB__;",
+  "function esc(v){",
+  " if(v===null||v===undefined)return String(v);",
+  " var s=typeof v==='string'?v:(typeof v==='object'?sj(v):String(v));",
+  ` return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');`,
+  "}",
+  'function sj(v){try{return JSON.stringify(v);}catch(e){return "[object]";}}',
+  'function read(){var el=document.getElementById("st-data");if(!el)return {};try{return JSON.parse(el.textContent||"{}");}catch(e){return {};}}',
+  "var state={data:read(),tab:INITIAL_TAB,selected:null};",
+  "function findNode(n,id){if(!n)return null;if(n.id===id)return n;var c=n.children||[];for(var i=0;i<c.length;i++){var f=findNode(c[i],id);if(f)return f;}return null;}",
+  'function empty(m){return "<p class=\\"st-empty\\">"+esc(m||"(none)")+"</p>";}',
+  'function kv(k,v){return "<div class=\\"st-kv\\"><span class=\\"st-k\\">"+esc(k)+"</span><span class=\\"st-v\\">"+esc(v)+"</span></div>";}',
+  "function rComponents(){",
+  " var cs=state.data.components||[];",
+  ' if(!cs.length)return empty("No component() instances");',
+  ' var h="<ul class=\\"st-list\\">";',
+  " for(var i=0;i<cs.length;i++){var c=cs[i];",
+  '  h+="<li class=\\"st-row st-click\\" data-node=\\""+esc(c.id||"")+"\\">"',
+  '   +"<span class=\\"st-ind\\" style=\\"--d:"+(c.depth||0)+"\\"></span>"',
+  '   +"<code>"+esc(c.name)+"</code>"',
+  '   +(c.key!=null?" <span class=\\"st-key\\">#"+esc(c.key)+"</span>":"")',
+  '   +" <span class=\\"st-dim\\">"+(c.childCount||0)+" child</span></li>";}',
+  ' return h+"</ul><p class=\\"st-dim\\">Click a component to inspect it.</p>";',
+  "}",
+  "function rInspector(){",
+  ' if(!state.selected)return empty("Select a node in Component Tree, Events or Overlays");',
+  " var n=findNode(state.data.graph,state.selected);",
+  ' if(!n)return empty("Node "+state.selected+" not found in current snapshot");',
+  ' var h="<h3><code>&lt;"+esc(n.type)+"&gt;</code>"+(n.key!=null?" <span class=\\"st-key\\">#"+esc(n.key)+"</span>":"")+"</h3>";',
+  ' h+=kv("id",n.id)+kv("depth",n.depth)+kv("children",(n.children||[]).length);',
+  " var pk=Object.keys(n.props||{});",
+  ' h+="<h4>Props</h4>"+(pk.length?pk.map(function(k){return kv(k,n.props[k]);}).join(""):empty("none"));',
+  ' h+="<h4>Event types</h4>"+((n.eventTypes||[]).length?"<code>"+esc((n.eventTypes||[]).join(", "))+"</code>":empty("none"));',
+  ' h+="<h4>State bindings</h4>"+((n.stateBindings||[]).length?"<ul class=\\"st-list\\">"+n.stateBindings.map(function(b){return "<li><code>"+esc(b)+"</code></li>";}).join("")+"</ul>":empty("none"));',
+  " return h;",
+  "}",
+  "function rState(){",
+  " var s=state.data.signals||{};var live=s.live||{};var ids=s.boundSignalIds||[];",
+  ' var h="<p class=\\"st-dim\\">"+ids.length+" signal id(s) bound in graph. Effects are shown as observer counts (no global effect registry).</p>";',
+  " var labels=Object.keys(live);",
+  ' if(!labels.length)return h+empty("No live signals registered with DevTools");',
+  ' h+="<ul class=\\"st-list\\">";',
+  " for(var i=0;i<labels.length;i++){var l=labels[i];var sg=live[l];",
+  '  h+="<li><code>"+esc(l)+"</code> <span class=\\"st-key\\">["+esc(sg.kind)+"]</span> = <code>"+esc(sg.value)+"</code> <span class=\\"st-dim\\">observers "+esc(sg.observerCount==null?"?":sg.observerCount)+"</span></li>";}',
+  ' return h+"</ul>";',
+  "}",
+  "function rSignalGraph(){",
+  " var g=state.data.signalGraph||{signals:[],edges:[]};",
+  ' if(!(g.signals||[]).length)return empty("No signal bindings in graph");',
+  ' var h="<p class=\\"st-dim\\">"+g.signals.length+" signal(s), "+(g.edges||[]).length+" binding edge(s)</p><ul class=\\"st-list\\">";',
+  " for(var i=0;i<g.signals.length;i++){var sn=g.signals[i];",
+  '  h+="<li><code>"+esc(sn.signalId)+"</code> <span class=\\"st-dim\\">&rarr; "+(sn.boundNodeIds||[]).length+" node(s), "+sn.bindingCount+" edge(s)</span>"',
+  '   +(sn.kind?" <span class=\\"st-key\\">["+esc(sn.kind)+"]</span>":"")',
+  '   +(sn.observerCount!=null?" <span class=\\"st-dim\\">obs "+esc(sn.observerCount)+"</span>":"")+"</li>";}',
+  ' return h+"</ul>";',
+  "}",
+  "function rRouter(){",
+  ' var r=state.data.router;if(!r)return empty("No router registered");',
+  ' return kv("path",r.path)+kv("pattern",r.pattern)+kv("fallback",r.isFallback?"yes":"no")',
+  '  +"<h4>Params</h4>"+(Object.keys(r.params||{}).length?Object.keys(r.params).map(function(k){return kv(k,r.params[k]);}).join(""):empty("none"))',
+  '  +"<h4>Query</h4>"+(Object.keys(r.query||{}).length?Object.keys(r.query).map(function(k){return kv(k,r.query[k]);}).join(""):empty("none"));',
+  "}",
+  "function rResources(){",
+  ' var rs=state.data.resources;if(!rs||!Object.keys(rs).length)return empty("No resources registered");',
+  ' var ks=Object.keys(rs);var h="<ul class=\\"st-list\\">";',
+  " for(var i=0;i<ks.length;i++){var r=rs[ks[i]];",
+  '  h+="<li><code>"+esc(ks[i])+"</code>: <span class=\\"st-key\\">"+esc(r.status)+"</span>"',
+  '   +(r.loading?" <span class=\\"st-dim\\">(loading)</span>":"")',
+  '   +(r.isRefetching?" <span class=\\"st-dim\\">(refetching)</span>":"")',
+  '   +(r.hasError?" <span class=\\"st-err\\">!"+esc(r.errorName)+"</span>":"")+"</li>";}',
+  ' return h+"</ul>";',
+  "}",
+  "function rMutations(){",
+  ' var ms=state.data.mutations;if(!ms||!Object.keys(ms).length)return empty("No mutations registered");',
+  ' var ks=Object.keys(ms);var h="<ul class=\\"st-list\\">";',
+  " for(var i=0;i<ks.length;i++){var m=ms[ks[i]];",
+  '  h+="<li><code>"+esc(ks[i])+"</code>: <span class=\\"st-key\\">"+esc(m.status)+"</span>"',
+  '   +(m.pending?" <span class=\\"st-dim\\">(pending)</span>":"")',
+  '   +(m.hasError?" <span class=\\"st-err\\">!"+esc(m.errorName)+"</span>":"")+"</li>";}',
+  ' return h+"</ul>";',
+  "}",
+  "function rEvents(){",
+  " var e=state.data.events||{nodes:[],totalHandlers:0,byType:{}};",
+  " var bt=e.byType||{};var bk=Object.keys(bt);",
+  ' var h="<p class=\\"st-dim\\">"+(e.nodes||[]).length+" node(s), "+e.totalHandlers+" handler(s)</p>";',
+  ' h+=bk.length?"<p>"+bk.map(function(t){return "<span class=\\"st-badge\\">"+esc(t)+" &times;"+bt[t]+"</span>";}).join(" ")+"</p>":"";',
+  ' if(!(e.nodes||[]).length)return h+empty("No event handlers wired");',
+  ' h+="<ul class=\\"st-list\\">";',
+  " for(var i=0;i<e.nodes.length;i++){var n=e.nodes[i];",
+  '  h+="<li class=\\"st-row st-click\\" data-node=\\""+esc(n.id)+"\\"><code>&lt;"+esc(n.nodeType)+"&gt;</code>"',
+  '   +(n.key!=null?" <span class=\\"st-key\\">#"+esc(n.key)+"</span>":"")',
+  '   +" <span class=\\"st-dim\\">"+esc((n.eventTypes||[]).join(", "))+"</span></li>";}',
+  ' return h+"</ul>";',
+  "}",
+  "function rOverlays(){",
+  ' var os=state.data.overlays||[];if(!os.length)return empty("No overlays wired");',
+  ' var h="<ul class=\\"st-list\\">";',
+  " for(var i=0;i<os.length;i++){var o=os[i];",
+  '  var kind=o.modal?"modal":(o.menu?"menu":(o.takesFocus?"focusable":"non-modal"));',
+  '  h+="<li class=\\"st-row st-click\\" data-node=\\""+esc(o.id)+"\\"><code>"+esc(o.key||o.id)+"</code> <span class=\\"st-key\\">["+kind+"]</span> <span class=\\"st-dim\\">"+(o.open?"open":"closed")+(o.closeOnEscape?" \\u00b7 esc":"")+(o.restoreFocus?" \\u00b7 restore":"")+"</span></li>";}',
+  ' return h+"</ul>";',
+  "}",
+  "function rPerformance(){",
+  " var p=state.data.performance||{snapshot:{},diagnostics:[]};var snap=p.snapshot||{};",
+  ' var h="<p class=\\"st-warn\\">Structural counts, not wall-clock timings. A real render/interaction timeline needs a browser (gate BLOCKED); no timings are fabricated here.</p>";',
+  " var sk=Object.keys(snap);",
+  ' h+="<h4>Graph metrics</h4>"+(sk.length?sk.map(function(k){return kv(k,snap[k]);}).join(""):empty("none"));',
+  " var d=p.diagnostics||[];",
+  ' h+="<h4>Diagnostics ("+d.length+")</h4>"+(d.length?"<ul class=\\"st-list\\">"+d.map(function(x){return "<li><code>"+esc(x.code)+"</code>: "+esc(x.message)+"</li>";}).join("")+"</ul>":empty("none"));',
+  " return h;",
+  "}",
+  "function rDiagnostics(){",
+  " var d=state.data.diagnostics||{errors:0,warnings:0,messages:[]};",
+  ' var h="<p class=\\"st-dim\\">"+d.errors+" error(s) \\u00b7 "+d.warnings+" warning(s) (compiler findings)</p>";',
+  " var m=d.messages||[];",
+  ' return h+(m.length?"<ul class=\\"st-list\\">"+m.map(function(x){return "<li>"+esc(x)+"</li>";}).join("")+"</ul>":empty("No diagnostics"));',
+  "}",
+  "function rHydration(){",
+  ' var h2=state.data.hydration;if(!h2)return empty("No hydration inspection");',
+  " var pct=(h2.staticRatio*100).toFixed(1);",
+  ' var h="<p class=\\"st-warn\\">Structural static-vs-dynamic split only \\u2014 NOT wall-clock SSR/hydration timing (browser gate BLOCKED).</p>";',
+  ' h+=kv("total nodes",h2.totalNodes)+kv("static nodes",h2.staticNodes+" ("+pct+"%)")+kv("dynamic nodes",h2.dynamicNodes)',
+  '  +kv("static subtrees",h2.staticSubtrees)+kv("dynamic text",h2.dynamicTextNodes)+kv("dynamic attrs",h2.dynamicAttrNodes)',
+  '  +kv("event nodes",h2.eventNodes)+kv("lists",h2.lists)+kv("conditionals",h2.conditionals)+kv("portals",h2.portals)+kv("head anchors",h2.headAnchors);',
+  " return h;",
+  "}",
+  "var RENDERERS={components:rComponents,inspector:rInspector,state:rState,signalGraph:rSignalGraph,router:rRouter,resources:rResources,mutations:rMutations,events:rEvents,overlays:rOverlays,performance:rPerformance,diagnostics:rDiagnostics,hydration:rHydration};",
+  'function renderTab(){var el=document.getElementById("st-panel");if(!el)return;var fn=RENDERERS[state.tab]||function(){return empty("Unknown panel");};',
+  " el.innerHTML=fn();",
+  ' var rows=el.querySelectorAll(".st-click");',
+  ' for(var i=0;i<rows.length;i++){(function(row){row.addEventListener("click",function(){var id=row.getAttribute("data-node");if(id){state.selected=id;selectTab("inspector");}});})(rows[i]);}',
+  "}",
+  'function selectTab(id){state.tab=id;var tabs=document.querySelectorAll(".st-tab");for(var i=0;i<tabs.length;i++){var t=tabs[i];t.setAttribute("aria-selected",t.getAttribute("data-tab")===id?"true":"false");}renderTab();}',
+  'function selectComponent(id){state.selected=id;selectTab("inspector");}',
+  'function refresh(){var hook=window.__STREETUI_DEVTOOLS_REFRESH__;if(typeof hook!=="function")return false;var next=hook();if(next&&typeof next==="object"){state.data=next;renderTab();return true;}return false;}',
+  "function bind(){",
+  ' var tabs=document.querySelectorAll(".st-tab");',
+  ' for(var i=0;i<tabs.length;i++){(function(t){t.addEventListener("click",function(){selectTab(t.getAttribute("data-tab"));});})(tabs[i]);}',
+  ' var rb=document.getElementById("st-refresh");if(rb)rb.addEventListener("click",refresh);',
+  "}",
+  "window.__StreetUIDevTools={get data(){return state.data;},get tab(){return state.tab;},get selected(){return state.selected;},selectTab:selectTab,selectComponent:selectComponent,refresh:refresh,render:renderTab};",
+  "bind();renderTab();",
+  "})();"
+].join("\n");
+var INTERACTIVE_CSS = [
+  "*{box-sizing:border-box}",
+  ".st-dt{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;margin:0;color:#e6e6e6;background:#1e1e28;display:flex;flex-direction:column;min-height:100vh}",
+  ".st-top{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #333;background:#15151c}",
+  ".st-top h1{font-size:14px;margin:0}",
+  ".st-refresh{font:inherit;color:#e6e6e6;background:#2c2c3a;border:1px solid #3a3a4a;border-radius:5px;padding:4px 10px;cursor:pointer}",
+  ".st-refresh:hover{background:#37374a}",
+  ".st-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:6px 10px;border-bottom:1px solid #2c2c38;background:#191922}",
+  ".st-tab{font:inherit;color:#b8b8c8;background:transparent;border:0;border-radius:5px;padding:5px 10px;cursor:pointer}",
+  ".st-tab:hover{background:#26263200}",
+  '.st-tab[aria-selected="true"]{background:#2f2f40;color:#fff}',
+  ".st-body{flex:1;padding:12px 16px;overflow:auto}",
+  ".st-body h3{font-size:13px;margin:2px 0 8px}.st-body h4{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#9a9aae;margin:14px 0 4px}",
+  ".st-list{list-style:none;margin:0;padding:0}.st-list li{padding:2px 0}",
+  ".st-row{display:flex;align-items:center;gap:6px}.st-click{cursor:pointer;border-radius:4px;padding:2px 4px}.st-click:hover{background:#26263a}",
+  ".st-ind{display:inline-block;width:calc(var(--d,0)*12px)}",
+  ".st-kv{display:flex;gap:10px;padding:1px 0}.st-k{color:#9a9aae;min-width:120px}.st-v{color:#d7d7e0;word-break:break-all}",
+  ".st-badge{display:inline-block;background:#2c2c3a;border-radius:10px;padding:1px 8px;font-size:11px}",
+  ".st-foot{padding:6px 16px;border-top:1px solid #2c2c38;background:#15151c}",
+  ".st-dim{color:#8a8a9a}.st-key{color:#7db4ff}.st-err{color:#ff8a8a}.st-empty{color:#6a6a7a}.st-warn{color:#ffce8a;margin:0 0 10px}",
+  "code{color:#d7d7e0}"
+].join("");
+
 // ../devtools/src/devtools-report.ts
 function renderDevToolsReport(compiled, sources = {}, options = {}) {
   const session = createDevTools(compiled, sources, options);
@@ -6261,6 +6603,7 @@ function defineConfig(config) {
   CleanupRegistry,
   ContainerBuilderImpl,
   DEFAULT_PERF_THRESHOLDS,
+  DEVTOOLS_TABS,
   DerivedSignal,
   DiagnosticCollector,
   DiagnosticError,
@@ -6357,13 +6700,17 @@ function defineConfig(config) {
   inspectApplication,
   inspectComponents,
   inspectContext,
+  inspectEvents,
   inspectForm,
   inspectGraph,
+  inspectHydration,
   inspectI18n,
   inspectInteractions,
+  inspectMutation,
   inspectResource,
   inspectRouter,
   inspectSignal,
+  inspectSignalGraph,
   interpolate,
   isBatching,
   isComponentDefinition,
@@ -6397,6 +6744,7 @@ function defineConfig(config) {
   renderDevToolsHTML,
   renderDevToolsReport,
   renderHead,
+  renderInteractiveDevTools,
   renderToString,
   reportDiagnostic,
   reportError,