sibujs 1.5.0 → 2.1.0

package/dist/devtools.cjs

@@ -24,6 +24,7 @@ __export(devtools_exports, {
   captureSignalGraph: () => captureSignalGraph,
   checkLeaks: () => checkLeaks,
   clearDebugValues: () => clearDebugValues,
+  clearHMRModule: () => clearHMRModule,
   clearHMRState: () => clearHMRState,
   clearPerformanceData: () => clearPerformanceData,
   createDevtoolsOverlay: () => createDevtoolsOverlay,
@@ -37,6 +38,7 @@ __export(devtools_exports, {
   diffSignalGraphs: () => diffSignalGraphs,
   disableDebug: () => disableDebug,
   enableDebug: () => enableDebug,
+  exposeHMR: () => exposeHMR,
   formatError: () => formatError,
   getActiveDevTools: () => getActiveDevTools,
   getDebugValues: () => getDebugValues,
@@ -142,7 +144,10 @@ function runCleanups(component) {
     for (const cleanup2 of cleanups) {
       try {
         cleanup2();
-      } catch {
+      } catch (err) {
+        if (typeof console !== "undefined") {
+          console.warn("[SibuJS debug] cleanup threw:", err);
+        }
       }
     }
     trackedCleanups.delete(component);
@@ -168,26 +173,39 @@ function isDev() {
 var _isDev = isDev();
 function devAssert(condition, message) {
   if (_isDev && !condition) {
-    throw new Error(`[Sibu] ${message}`);
+    throw new Error(`[SibuJS] ${message}`);
   }
 }
 function devWarn(message) {
   if (_isDev) {
-    console.warn(`[Sibu] ${message}`);
+    console.warn(`[SibuJS] ${message}`);
   }
 }
 
 // src/reactivity/track.ts
 var _isDev2 = isDev();
-var subscriberStack = new Array(32);
-var stackCapacity = 32;
+var STACK_INITIAL = 32;
+var STACK_SHRINK_THRESHOLD = 128;
+var subscriberStack = new Array(STACK_INITIAL);
+var stackCapacity = STACK_INITIAL;
 var stackTop = -1;
 var currentSubscriber = null;
-var signalSubscribers = /* @__PURE__ */ new WeakMap();
 var SUBS = "__s";
+function syncFastPath(signal2, subs) {
+  const size = subs.size;
+  if (size === 0) {
+    signal2.__f = void 0;
+    delete signal2[SUBS];
+  } else if (size === 1) {
+    signal2.__f = subs.values().next().value;
+  } else {
+    signal2.__f = void 0;
+  }
+}
 var notifyDepth = 0;
 var pendingQueue = [];
 var pendingSet = /* @__PURE__ */ new Set();
+var propagateStack = [];
 function safeInvoke(sub) {
   try {
     sub();
@@ -210,75 +228,133 @@ function track(effectFn, subscriber) {
   } finally {
     stackTop--;
     currentSubscriber = stackTop >= 0 ? subscriberStack[stackTop] : null;
+    if (stackTop < 0 && stackCapacity > STACK_SHRINK_THRESHOLD) {
+      stackCapacity = Math.max(STACK_INITIAL, stackCapacity >>> 1);
+      subscriberStack.length = stackCapacity;
+    }
   }
   return () => cleanup(subscriber);
 }
 function recordDependency(signal2) {
   if (!currentSubscriber) return;
   const sub = currentSubscriber;
-  if (sub._dep === signal2) return;
+  const epoch = sub._epoch;
+  if (sub._dep === signal2) {
+    sub._depEpoch = epoch;
+    return;
+  }
   const deps = sub._deps;
   if (deps) {
-    if (deps.has(signal2)) return;
-    deps.add(signal2);
+    deps.set(signal2, epoch);
   } else if (sub._dep !== void 0) {
-    const set = /* @__PURE__ */ new Set();
-    set.add(sub._dep);
-    set.add(signal2);
-    sub._deps = set;
+    const map = /* @__PURE__ */ new Map();
+    map.set(sub._dep, sub._depEpoch);
+    map.set(signal2, epoch);
+    sub._deps = map;
     sub._dep = void 0;
+    sub._depEpoch = void 0;
   } else {
     sub._dep = signal2;
+    sub._depEpoch = epoch;
   }
-  let subs = signal2[SUBS];
+  const sig = signal2;
+  let subs = sig[SUBS];
   if (!subs) {
     subs = /* @__PURE__ */ new Set();
-    signalSubscribers.set(signal2, subs);
-    signal2[SUBS] = subs;
+    sig[SUBS] = subs;
   }
+  const prevSize = subs.size;
   subs.add(currentSubscriber);
-  if (subs.size === 1) {
-    signal2.__f = currentSubscriber;
-  } else if (signal2.__f !== void 0) {
-    signal2.__f = void 0;
+  if (subs.size !== prevSize) {
+    if (subs.size === 1) {
+      sig.__f = currentSubscriber;
+    } else if (sig.__f !== void 0) {
+      sig.__f = void 0;
+    }
+  }
+}
+var maxSubscriberRepeats = 50;
+var maxDrainIterations = 1e6;
+var drainEpoch = 0;
+function tickRepeat(sub) {
+  const s = sub;
+  if (s._runEpoch !== drainEpoch) {
+    s._runEpoch = drainEpoch;
+    s._runs = 1;
+    return false;
+  }
+  return ++s._runs > maxSubscriberRepeats;
+}
+function cycleError(sub) {
+  if (typeof console !== "undefined") {
+    const name = sub.__name ?? "<unnamed>";
+    console.error(
+      `[SibuJS] subscriber "${name}" fired more than ${maxSubscriberRepeats} times \u2014 likely a write-reads-self cycle between effects/signals. Breaking to prevent infinite loop.`
+    );
+  }
+}
+function absoluteDrainError() {
+  if (typeof console !== "undefined") {
+    console.error(
+      `[SibuJS] Notification drain exceeded ${maxDrainIterations} iterations \u2014 absolute safety net tripped. Breaking to prevent infinite loop.`
+    );
+  }
+}
+function drainQueue() {
+  let i = 0;
+  while (i < pendingQueue.length) {
+    if (i >= maxDrainIterations) {
+      absoluteDrainError();
+      break;
+    }
+    const sub = pendingQueue[i++];
+    if (tickRepeat(sub)) {
+      cycleError(sub);
+      break;
+    }
+    pendingSet.delete(sub);
+    safeInvoke(sub);
   }
 }
 function propagateDirty(sub) {
   sub();
-  let sig = sub._sig;
-  while (sig) {
+  const rootSig = sub._sig;
+  if (!rootSig) return;
+  const stack = propagateStack;
+  const baseLen = stack.length;
+  stack.push(rootSig);
+  while (stack.length > baseLen) {
+    const sig = stack.pop();
     const first = sig.__f;
     if (first) {
       if (first._c) {
         const nSig = first._sig;
-        nSig._d = true;
-        sig = nSig;
-        continue;
-      }
-      if (!pendingSet.has(first)) {
+        if (!nSig._d) {
+          nSig._d = true;
+          stack.push(nSig);
+        }
+      } else if (!pendingSet.has(first)) {
         pendingSet.add(first);
         pendingQueue.push(first);
       }
-      break;
+      continue;
     }
     const subs = sig[SUBS];
-    if (!subs) break;
-    let nextSig;
+    if (!subs) continue;
     for (const s of subs) {
       if (s._c) {
-        s();
         const nSig = s._sig;
-        if (nSig && !nextSig) {
-          nextSig = nSig;
-        } else if (nSig) {
-          propagateDirty(s);
+        if (nSig && !nSig._d) {
+          nSig._d = true;
+          stack.push(nSig);
+        } else if (!nSig) {
+          s();
         }
       } else if (!pendingSet.has(s)) {
         pendingSet.add(s);
         pendingQueue.push(s);
       }
     }
-    sig = nextSig;
   }
 }
 function notifySubscribers(signal2) {
@@ -294,21 +370,22 @@ function notifySubscribers(signal2) {
       return;
     }
     notifyDepth++;
+    drainEpoch++;
     try {
       if (first._c) {
         propagateDirty(first);
+      } else if (tickRepeat(first)) {
+        cycleError(first);
       } else {
         safeInvoke(first);
       }
-      let i = 0;
-      while (i < pendingQueue.length) {
-        safeInvoke(pendingQueue[i]);
-        i++;
-      }
+      drainQueue();
     } finally {
-      pendingQueue.length = 0;
-      pendingSet.clear();
       notifyDepth--;
+      if (notifyDepth === 0) {
+        pendingQueue.length = 0;
+        pendingSet.clear();
+      }
     }
     return;
   }
@@ -326,57 +403,45 @@ function notifySubscribers(signal2) {
     return;
   }
   notifyDepth++;
+  drainEpoch++;
   try {
-    let directCount = 0;
     for (const sub of subs) {
-      pendingQueue[directCount++] = sub;
-    }
-    for (let i2 = 0; i2 < directCount; i2++) {
-      if (pendingQueue[i2]._c) {
-        propagateDirty(pendingQueue[i2]);
-      }
-    }
-    for (let i2 = 0; i2 < directCount; i2++) {
-      if (!pendingQueue[i2]._c) {
-        if (!pendingSet.has(pendingQueue[i2])) {
-          safeInvoke(pendingQueue[i2]);
-        }
+      if (sub._c) {
+        propagateDirty(sub);
+      } else if (!pendingSet.has(sub)) {
+        pendingSet.add(sub);
+        pendingQueue.push(sub);
       }
     }
-    let i = directCount;
-    while (i < pendingQueue.length) {
-      safeInvoke(pendingQueue[i]);
-      i++;
-    }
+    drainQueue();
   } finally {
-    pendingQueue.length = 0;
-    pendingSet.clear();
     notifyDepth--;
+    if (notifyDepth === 0) {
+      pendingQueue.length = 0;
+      pendingSet.clear();
+    }
   }
 }
 function cleanup(subscriber) {
   const sub = subscriber;
   const singleDep = sub._dep;
   if (singleDep !== void 0) {
-    const subs = singleDep[SUBS];
-    if (subs) {
-      subs.delete(subscriber);
-      if (singleDep.__f === subscriber) {
-        singleDep.__f = void 0;
-      }
+    const sig = singleDep;
+    const subs = sig[SUBS];
+    if (subs?.delete(subscriber)) {
+      syncFastPath(sig, subs);
     }
     sub._dep = void 0;
+    sub._depEpoch = void 0;
     return;
   }
   const deps = sub._deps;
   if (!deps || deps.size === 0) return;
-  for (const signal2 of deps) {
-    const subs = signal2[SUBS];
-    if (subs) {
-      subs.delete(subscriber);
-      if (signal2.__f === subscriber) {
-        signal2.__f = void 0;
-      }
+  for (const signal2 of deps.keys()) {
+    const sig = signal2;
+    const subs = sig[SUBS];
+    if (subs?.delete(subscriber)) {
+      syncFastPath(sig, subs);
     }
   }
   deps.clear();
@@ -429,7 +494,17 @@ function signal(initial, options) {
   return [get, set];
 }
 
+// src/utils/sanitize.ts
+function stripHtml(html) {
+  return String(html).replace(/<[^>]*>/g, "");
+}
+
 // src/devtools/devtools.ts
+function getSibuNamespace() {
+  const g = globalThis;
+  if (!g.__SIBU__) g.__SIBU__ = { version: "1.0.0" };
+  return g.__SIBU__;
+}
 function createGlobalHook() {
   const listeners = /* @__PURE__ */ new Map();
   const events = [];
@@ -474,13 +549,16 @@ function getOrCreateHook() {
 }
 var activeDevTools = null;
 var nextNodeId = 0;
+var inferNameArmed = false;
 function getActiveDevTools() {
   return activeDevTools;
 }
 function initDevTools(config) {
   const maxEvents = config?.maxEvents ?? 1e3;
   const enabled = config?.enabled ?? isDev();
+  const expose = config?.expose ?? isDev();
   if (!enabled) return createNoopApi();
+  inferNameArmed = true;
   const hook = getOrCreateHook();
   nextNodeId = 0;
   const eventLog = [];
@@ -497,6 +575,7 @@ function initDevTools(config) {
       createdAt: Date.now()
     };
     hook.nodes.set(nextNodeId, node);
+    emit();
   });
   hook.on("signal:update", (payload) => {
     if (!isActive) return;
@@ -511,6 +590,7 @@ function initDevTools(config) {
       newValue: p.newValue,
       timestamp: Date.now()
     });
+    emit();
   });
   hook.on("computed:create", (payload) => {
     const p = payload;
@@ -525,6 +605,7 @@ function initDevTools(config) {
       createdAt: Date.now()
     };
     hook.nodes.set(nextNodeId, node);
+    emit();
   });
   hook.on("computed:update", (payload) => {
     const p = payload;
@@ -537,6 +618,7 @@ function initDevTools(config) {
       newValue: p.newValue,
       timestamp: Date.now()
     });
+    emit();
   });
   hook.on("effect:create", (payload) => {
     nextNodeId++;
@@ -544,6 +626,7 @@ function initDevTools(config) {
     const p = payload;
     const node = { id: nextNodeId, type: "effect", name, ref: p.effectFn, createdAt: Date.now() };
     hook.nodes.set(nextNodeId, node);
+    emit();
   });
   hook.on("effect:run", (payload) => {
     const p = payload;
@@ -554,6 +637,7 @@ function initDevTools(config) {
       duration: 0,
       timestamp: Date.now()
     });
+    emit();
   });
   hook.on("app:init", (payload) => {
     const p = payload;
@@ -563,12 +647,19 @@ function initDevTools(config) {
       duration: p.duration,
       timestamp: Date.now()
     });
+    emit();
     if (typeof document !== "undefined") {
-      queueMicrotask(() => discoverComponents(hook, eventLog, maxEvents));
+      queueMicrotask(() => {
+        discoverComponents(hook, eventLog, maxEvents);
+        emit();
+      });
     }
   });
   function record(event) {
-    if (isActive) pushEvent(eventLog, maxEvents, event);
+    if (isActive) {
+      pushEvent(eventLog, maxEvents, event);
+      emit();
+    }
   }
   function getEvents(filter) {
     if (!filter) return eventLog.slice();
@@ -583,9 +674,11 @@ function initDevTools(config) {
   }
   function registerComponent(name, element, state) {
     hook.components.set(name, { element, state });
+    emit();
   }
   function unregisterComponent(name) {
     hook.components.delete(name);
+    emit();
   }
   function getComponents() {
     return new Map(hook.components);
@@ -612,6 +705,12 @@ function initDevTools(config) {
     }
     return result;
   }
+  let domObserver = null;
+  const activeHighlightTimers = /* @__PURE__ */ new Set();
+  let changeVersion = 0;
+  function emit() {
+    changeVersion++;
+  }
   let isActive = enabled;
   function isEnabled() {
     return isActive;
@@ -624,32 +723,75 @@ function initDevTools(config) {
     for (const [name, entry] of hook.components) snap[name] = entry.state ? { ...entry.state } : {};
     return snap;
   }
+  function restoreHighlight(el) {
+    const prevOutline = el.dataset.sibuHighlightPrevOutline;
+    const prevOffset = el.dataset.sibuHighlightPrevOffset;
+    el.style.outline = prevOutline ?? "";
+    el.style.outlineOffset = prevOffset ?? "";
+    delete el.dataset.sibuHighlightPrevOutline;
+    delete el.dataset.sibuHighlightPrevOffset;
+    el.removeAttribute("data-sibu-highlight");
+  }
   function highlightElement(name) {
     const prev = document.querySelector("[data-sibu-highlight]");
-    if (prev) {
-      prev.style.outline = "";
-      prev.removeAttribute("data-sibu-highlight");
-    }
+    if (prev instanceof HTMLElement) restoreHighlight(prev);
+    const entry = hook.components.get(name);
+    const el = entry?.element;
+    if (!el || !el.isConnected) return;
+    el.dataset.sibuHighlightPrevOutline = el.style.outline || "";
+    el.dataset.sibuHighlightPrevOffset = el.style.outlineOffset || "";
+    el.style.outline = "2px solid #89b4fa";
+    el.setAttribute("data-sibu-highlight", "true");
+    el.scrollIntoView({ behavior: "smooth", block: "center" });
+    const timer = setTimeout(() => {
+      activeHighlightTimers.delete(timer);
+      if (!el.isConnected) return;
+      restoreHighlight(el);
+    }, 3e3);
+    activeHighlightTimers.add(timer);
+  }
+  function getElementHTML(name, max = 2e3) {
     const entry = hook.components.get(name);
-    if (entry?.element?.isConnected) {
-      entry.element.style.outline = "2px solid #89b4fa";
-      entry.element.setAttribute("data-sibu-highlight", "true");
-      entry.element.scrollIntoView({ behavior: "smooth", block: "center" });
-      setTimeout(() => {
-        entry.element.style.outline = "";
-        entry.element.removeAttribute("data-sibu-highlight");
-      }, 3e3);
+    const el = entry?.element;
+    if (!el) return null;
+    try {
+      const raw = el.outerHTML || "";
+      const cleaned = stripHtml(raw);
+      return cleaned.length > max ? `${cleaned.substring(0, max)}...` : cleaned;
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[SibuJS devtools] getElementHTML failed:", err);
+      }
+      return null;
     }
   }
   function destroy() {
+    if (domObserver) {
+      domObserver.disconnect();
+      domObserver = null;
+    }
+    for (const t of activeHighlightTimers) clearTimeout(t);
+    activeHighlightTimers.clear();
+    if (typeof document !== "undefined") {
+      const prev = document.querySelector("[data-sibu-highlight]");
+      if (prev instanceof HTMLElement) restoreHighlight(prev);
+    }
     eventLog.length = 0;
     hook.nodes.clear();
     hook.components.clear();
     hook.events.length = 0;
     isActive = false;
+    inferNameArmed = false;
     activeDevTools = null;
     const g = globalThis;
+    if (g.__SIBU__) {
+      delete g.__SIBU__.devtools;
+      delete g.__SIBU__.data;
+      delete g.__SIBU__.changeVersion;
+    }
     if (g.__SIBU_DEVTOOLS__ === api) delete g.__SIBU_DEVTOOLS__;
+    delete g.__SIBU_DEVTOOLS_VERSION__;
+    delete g.__SIBU_DEVTOOLS_DATA__;
     if (g.__SIBU_DEVTOOLS_GLOBAL_HOOK__ === hook) delete g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
   }
   const api = {
@@ -664,164 +806,155 @@ function initDevTools(config) {
     setEnabled,
     snapshot,
     highlightElement,
+    getElementHTML,
     destroy
   };
-  if (typeof window !== "undefined") {
-    window.__SIBU_DEVTOOLS__ = api;
-    let changeVersion = 0;
-    const origPush = eventLog.push.bind(eventLog);
-    eventLog.push = (...args) => {
-      changeVersion++;
-      return origPush(...args);
-    };
-    const origNodeSet = hook.nodes.set.bind(hook.nodes);
-    hook.nodes.set = (k, v) => {
-      changeVersion++;
-      return origNodeSet(k, v);
-    };
-    const origCompSet = hook.components.set.bind(hook.components);
-    hook.components.set = (k, v) => {
-      changeVersion++;
-      return origCompSet(k, v);
-    };
-    window.__SIBU_DEVTOOLS_VERSION__ = () => changeVersion;
-    window.__SIBU_DEVTOOLS_DATA__ = () => {
-      const sArr = [];
-      for (const [, node] of hook.nodes) {
-        let val = "";
-        try {
-          let raw;
-          if (node.type === "signal" && node.ref && "value" in node.ref) {
-            raw = node.ref.value;
-          } else if (node.type === "computed" && node.ref) {
-            if (node.ref._d && node.ref._g) {
-              try {
-                raw = node.ref._g();
-              } catch {
-                raw = node.ref._v;
-              }
-            } else {
+  function buildData() {
+    const sArr = [];
+    for (const [, node] of hook.nodes) {
+      let val = "";
+      try {
+        let raw;
+        if (node.type === "signal" && node.ref && "value" in node.ref) {
+          raw = node.ref.value;
+        } else if (node.type === "computed" && node.ref) {
+          if (node.ref._d && node.ref._g) {
+            try {
+              raw = node.ref._g();
+            } catch {
               raw = node.ref._v;
             }
-          } else if (node.type === "effect") {
-            raw = void 0;
-          } else if (node.ref && "value" in node.ref) {
-            raw = node.ref.value;
+          } else {
+            raw = node.ref._v;
           }
-          if (raw === void 0) val = "undefined";
-          else if (raw === null) val = "null";
-          else if (typeof raw === "object") val = JSON.stringify(raw);
-          else val = String(raw);
-        } catch {
-          val = "?";
+        } else if (node.type === "effect") {
+          raw = void 0;
+        } else if (node.ref && "value" in node.ref) {
+          raw = node.ref.value;
         }
-        const fullVal = val;
-        const shortVal = val.length > 80 ? `${val.substring(0, 80)}...` : val;
-        const subs = node.ref?.__s;
-        sArr.push({
-          id: node.id,
-          n: node.name,
-          tp: node.type,
-          v: shortVal,
-          fv: fullVal,
-          sc: subs instanceof Set ? subs.size : 0
-        });
+        if (raw === void 0) val = "undefined";
+        else if (raw === null) val = "null";
+        else if (typeof raw === "object") val = JSON.stringify(raw);
+        else val = String(raw);
+      } catch {
+        val = "?";
       }
-      function walkElement(el, depth) {
-        if (depth > 8) return [];
-        const result = [];
-        const max = Math.min(el.children.length, 50);
-        for (let i = 0; i < max; i++) {
-          const child = el.children[i];
-          const txtParts = [];
-          for (let ti = 0; ti < child.childNodes.length; ti++) {
-            const cn = child.childNodes[ti];
-            if (cn.nodeType === 3) {
-              const t = cn.textContent?.trim();
-              if (t) txtParts.push(t);
-            } else if (cn.nodeType === 1) {
-              const el2 = cn;
-              let directTxt = "";
-              for (let ci = 0; ci < el2.childNodes.length; ci++) {
-                if (el2.childNodes[ci].nodeType === 3) {
-                  const t2 = el2.childNodes[ci].textContent?.trim();
-                  if (t2) {
-                    directTxt = t2;
-                    break;
-                  }
+      const fullVal = val;
+      const shortVal = val.length > 80 ? `${val.substring(0, 80)}...` : val;
+      const subs = node.ref?.__s;
+      sArr.push({
+        id: node.id,
+        n: node.name,
+        tp: node.type,
+        v: shortVal,
+        fv: fullVal,
+        sc: subs instanceof Set ? subs.size : 0
+      });
+    }
+    function walkElement(el, depth) {
+      if (depth > 8) return [];
+      const result = [];
+      const max = Math.min(el.children.length, 50);
+      for (let i = 0; i < max; i++) {
+        const child = el.children[i];
+        const txtParts = [];
+        for (let ti = 0; ti < child.childNodes.length; ti++) {
+          const cn = child.childNodes[ti];
+          if (cn.nodeType === 3) {
+            const t = cn.textContent?.trim();
+            if (t) txtParts.push(t);
+          } else if (cn.nodeType === 1) {
+            const el2 = cn;
+            let directTxt = "";
+            for (let ci = 0; ci < el2.childNodes.length; ci++) {
+              if (el2.childNodes[ci].nodeType === 3) {
+                const t2 = el2.childNodes[ci].textContent?.trim();
+                if (t2) {
+                  directTxt = t2;
+                  break;
                 }
               }
-              if (directTxt) txtParts.push(directTxt);
             }
+            if (directTxt) txtParts.push(directTxt);
           }
-          let txt = txtParts.join(" | ");
-          if (txt.length > 120) txt = `${txt.substring(0, 120)}...`;
-          let html = "";
-          try {
-            const outer = child.outerHTML || "";
-            html = outer.length > 500 ? `${outer.substring(0, 500)}...` : outer;
-          } catch {
-            html = "";
-          }
-          const ev = child.__sibu_events__ || [];
-          result.push({
-            tg: child.tagName ? child.tagName.toLowerCase() : "?",
-            id: child.id || "",
-            cl: (child.className || "").toString().split(" ").slice(0, 3).join(" "),
-            txt: txt.length > 60 ? `${txt.substring(0, 60)}...` : txt,
-            html,
-            ev,
-            ch: child.childElementCount > 0 ? walkElement(child, depth + 1) : []
-          });
         }
-        return result;
-      }
-      const cArr = [];
-      for (const [name, entry] of hook.components) {
-        const el = entry.element;
-        cArr.push({
-          n: name,
-          tg: el?.tagName ? el.tagName.toLowerCase() : "?",
-          ch: el?.childElementCount || 0,
-          cn: !!el?.isConnected,
-          kids: el ? walkElement(el, 0) : []
+        let txt = txtParts.join(" | ");
+        if (txt.length > 120) txt = `${txt.substring(0, 120)}...`;
+        const attrs = [];
+        try {
+          const al = child.attributes;
+          for (let ai = 0; ai < al.length && ai < 20; ai++) attrs.push(al[ai].name);
+        } catch {
+        }
+        const ev = child.__sibu_events__ || [];
+        result.push({
+          tg: child.tagName ? child.tagName.toLowerCase() : "?",
+          id: child.id || "",
+          cl: (child.className || "").toString().split(" ").slice(0, 3).join(" "),
+          txt: txt.length > 60 ? `${txt.substring(0, 60)}...` : txt,
+          attrs,
+          ev,
+          ch: child.childElementCount > 0 ? walkElement(child, depth + 1) : []
         });
       }
-      const eArr = [];
-      const start = eventLog.length > 500 ? eventLog.length - 500 : 0;
-      for (let i = start; i < eventLog.length; i++) {
-        const e = eventLog[i];
-        let detail = "";
-        let ov = "";
-        let nv = "";
-        let key = "";
-        if (e.type === "state-change") {
-          const sc = e;
-          key = sc.key || "";
-          try {
-            ov = sc.oldValue === void 0 ? "undefined" : sc.oldValue === null ? "null" : typeof sc.oldValue === "object" ? JSON.stringify(sc.oldValue, null, 2) : String(sc.oldValue);
-          } catch {
-            ov = "?";
-          }
-          try {
-            nv = sc.newValue === void 0 ? "undefined" : sc.newValue === null ? "null" : typeof sc.newValue === "object" ? JSON.stringify(sc.newValue, null, 2) : String(sc.newValue);
-          } catch {
-            nv = "?";
-          }
-          const ovShort = ov.length > 40 ? `${ov.substring(0, 40)}...` : ov;
-          const nvShort = nv.length > 40 ? `${nv.substring(0, 40)}...` : nv;
-          detail = `${ovShort} \u2192 ${nvShort}`;
-        } else if (e.type === "render") {
-          detail = `${e.duration.toFixed(1)}ms`;
+      return result;
+    }
+    const cArr = [];
+    for (const [name, entry] of hook.components) {
+      const el = entry.element;
+      cArr.push({
+        n: name,
+        tg: el?.tagName ? el.tagName.toLowerCase() : "?",
+        ch: el?.childElementCount || 0,
+        cn: !!el?.isConnected,
+        kids: el ? walkElement(el, 0) : []
+      });
+    }
+    const eArr = [];
+    const start = eventLog.length > 500 ? eventLog.length - 500 : 0;
+    for (let i = start; i < eventLog.length; i++) {
+      const e = eventLog[i];
+      let detail = "";
+      let ov = "";
+      let nv = "";
+      let key = "";
+      if (e.type === "state-change") {
+        const sc = e;
+        key = sc.key || "";
+        try {
+          ov = sc.oldValue === void 0 ? "undefined" : sc.oldValue === null ? "null" : typeof sc.oldValue === "object" ? JSON.stringify(sc.oldValue, null, 2) : String(sc.oldValue);
+        } catch {
+          ov = "?";
+        }
+        try {
+          nv = sc.newValue === void 0 ? "undefined" : sc.newValue === null ? "null" : typeof sc.newValue === "object" ? JSON.stringify(sc.newValue, null, 2) : String(sc.newValue);
+        } catch {
+          nv = "?";
         }
-        eArr.push({ t: e.type, c: e.component, ts: e.timestamp, d: detail, ov, nv, k: key });
+        const ovShort = ov.length > 40 ? `${ov.substring(0, 40)}...` : ov;
+        const nvShort = nv.length > 40 ? `${nv.substring(0, 40)}...` : nv;
+        detail = `${ovShort} \u2192 ${nvShort}`;
+      } else if (e.type === "render") {
+        detail = `${e.duration.toFixed(1)}ms`;
       }
-      return JSON.stringify({ s: sArr, c: cArr, e: eArr });
-    };
+      eArr.push({ t: e.type, c: e.component, ts: e.timestamp, d: detail, ov, nv, k: key });
+    }
+    return JSON.stringify({ s: sArr, c: cArr, e: eArr });
+  }
+  if (expose && typeof window !== "undefined") {
+    const ns = getSibuNamespace();
+    ns.devtools = api;
+    ns.data = buildData;
+    ns.changeVersion = () => changeVersion;
+    const w = window;
+    w.__SIBU_DEVTOOLS__ = api;
+    w.__SIBU_DEVTOOLS_VERSION__ = () => changeVersion;
+    w.__SIBU_DEVTOOLS_DATA__ = buildData;
   }
   activeDevTools = api;
   if (typeof document !== "undefined") {
-    const observer = new MutationObserver((mutations) => {
+    domObserver = new MutationObserver((mutations) => {
+      let changed = false;
       for (const m of mutations) {
         for (const node of m.addedNodes) {
           if (node instanceof HTMLElement) {
@@ -829,6 +962,7 @@ function initDevTools(config) {
             if (name && !hook.components.has(name)) {
               hook.components.set(name, { element: node });
               pushEvent(eventLog, maxEvents, { type: "mount", component: name, element: node, timestamp: Date.now() });
+              changed = true;
             }
           }
         }
@@ -838,11 +972,14 @@ function initDevTools(config) {
             if (name && hook.components.has(name)) {
               pushEvent(eventLog, maxEvents, { type: "unmount", component: name, timestamp: Date.now() });
               hook.components.delete(name);
+              changed = true;
             }
           }
         }
       }
+      if (changed) emit();
     });
+    const observer = domObserver;
     queueMicrotask(() => {
       if (!document.body) return;
       observer.observe(document.body, { childList: true, subtree: true });
@@ -884,11 +1021,13 @@ function initDevTools(config) {
           }
         });
       }
+      emit();
     });
   }
   return api;
 }
 function inferName() {
+  if (!inferNameArmed || !isDev()) return "anonymous";
   try {
     const stack = new Error().stack || "";
     for (const line of stack.split("\n")) {
@@ -945,6 +1084,7 @@ function createNoopApi() {
     setEnabled: noop,
     snapshot: () => ({}),
     highlightElement: noop,
+    getElementHTML: ((_n) => null),
     destroy: noop
   };
 }
@@ -976,17 +1116,90 @@ function devState(name, initial) {
   return [get, trackedSet];
 }
 
+// src/core/rendering/dispose.ts
+var elementDisposers = /* @__PURE__ */ new WeakMap();
+var _isDev4 = isDev();
+var activeBindingCount = 0;
+function dispose(node) {
+  const stack = [node];
+  const order = [];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    order.push(current);
+    const children = Array.from(current.childNodes);
+    for (let i = 0; i < children.length; i++) {
+      stack.push(children[i]);
+    }
+  }
+  for (let i = order.length - 1; i >= 0; i--) {
+    const current = order[i];
+    const disposers = elementDisposers.get(current);
+    if (disposers) {
+      const snapshot = disposers.slice();
+      elementDisposers.delete(current);
+      if (_isDev4) activeBindingCount -= snapshot.length;
+      for (const d of snapshot) {
+        try {
+          d();
+        } catch (err) {
+          if (_isDev4 && typeof console !== "undefined") {
+            console.warn("[SibuJS] Disposer threw during cleanup:", err);
+          }
+        }
+      }
+      let extraPasses = 0;
+      while (extraPasses++ < 8) {
+        const added = elementDisposers.get(current);
+        if (!added || added.length === 0) break;
+        const moreSnapshot = added.slice();
+        elementDisposers.delete(current);
+        if (_isDev4) activeBindingCount -= moreSnapshot.length;
+        for (const d of moreSnapshot) {
+          try {
+            d();
+          } catch (err) {
+            if (_isDev4 && typeof console !== "undefined") {
+              console.warn("[SibuJS] Disposer threw during cleanup:", err);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 // src/devtools/hmr.ts
+var HMR_STORE_MAX_SIZE = 200;
 var hmrStateStore = /* @__PURE__ */ new Map();
+var hmrStoreOverflowWarned = false;
+function hmrStoreSet(id, value) {
+  if (hmrStateStore.has(id)) hmrStateStore.delete(id);
+  hmrStateStore.set(id, value);
+  if (hmrStateStore.size > HMR_STORE_MAX_SIZE) {
+    const oldestKey = hmrStateStore.keys().next().value;
+    if (oldestKey !== void 0) hmrStateStore.delete(oldestKey);
+    if (!hmrStoreOverflowWarned) {
+      hmrStoreOverflowWarned = true;
+      console.warn(
+        `[sibujs/hmr] HMR state store exceeded ${HMR_STORE_MAX_SIZE} entries \u2014 oldest entries are being evicted. Call clearHMRModule(id) from your module's accept/dispose handlers to avoid this.`
+      );
+    }
+  }
+}
+function clearHMRModule(id) {
+  hmrStateStore.delete(id);
+  hmrRegistry.delete(id);
+  hmrRegistry.delete(`boundary:${id}`);
+}
 var hmrRegistry = /* @__PURE__ */ new Map();
 function hmrState(id, initial) {
   const restored = hmrStateStore.has(id) ? hmrStateStore.get(id) : initial;
   const [get, set] = signal(restored);
   function hmrSet(next) {
     set(next);
-    hmrStateStore.set(id, get());
+    hmrStoreSet(id, get());
   }
-  hmrStateStore.set(id, restored);
+  hmrStoreSet(id, restored);
   return [get, hmrSet];
 }
 function registerHMR(id, component, container) {
@@ -1012,13 +1225,15 @@ function registerHMR(id, component, container) {
     }
     reg.disposeCallbacks.length = 0;
     const newElement = newComponent();
-    if (reg.currentElement?.parentNode) {
-      reg.currentElement.parentNode.replaceChild(newElement, reg.currentElement);
+    const oldElement = reg.currentElement;
+    if (oldElement?.parentNode) {
+      oldElement.parentNode.replaceChild(newElement, oldElement);
     }
+    if (oldElement) dispose(oldElement);
     reg.component = newComponent;
     reg.currentElement = newElement;
   }
-  function dispose() {
+  function dispose2() {
     const reg = hmrRegistry.get(id);
     if (!reg) return;
     for (const cb of reg.disposeCallbacks) {
@@ -1027,12 +1242,14 @@ function registerHMR(id, component, container) {
       } catch {
       }
     }
-    if (reg.currentElement?.parentNode) {
-      reg.currentElement.parentNode.removeChild(reg.currentElement);
+    if (reg.currentElement) {
+      const el = reg.currentElement;
+      if (el.parentNode) el.parentNode.removeChild(el);
+      dispose(el);
     }
     hmrRegistry.delete(id);
   }
-  return { update, dispose };
+  return { update, dispose: dispose2 };
 }
 function createHMRBoundary(id) {
   let currentElement = null;
@@ -1069,10 +1286,15 @@ function createHMRBoundary(id) {
             }
           }
           disposeCallbacks.length = 0;
-          if (currentComponent && currentElement?.parentNode) {
-            const newElement = currentComponent();
-            currentElement.parentNode.replaceChild(newElement, currentElement);
-            currentElement = newElement;
+          if (currentComponent && currentElement) {
+            const oldEl = currentElement;
+            const parent = oldEl.parentNode;
+            if (parent) {
+              const newElement = currentComponent();
+              parent.replaceChild(newElement, oldEl);
+              dispose(oldEl);
+              currentElement = newElement;
+            }
           }
           for (const cb of acceptCallbacks) {
             try {
@@ -1092,6 +1314,19 @@ function createHMRBoundary(id) {
 function clearHMRState() {
   hmrStateStore.clear();
   hmrRegistry.clear();
+  hmrStoreOverflowWarned = false;
+}
+function exposeHMR() {
+  const g = globalThis;
+  if (!g.__SIBU__) g.__SIBU__ = { version: "1.0.0" };
+  g.__SIBU__.hmr = {
+    hmrState,
+    registerHMR,
+    createHMRBoundary,
+    clearHMRState,
+    clearHMRModule,
+    isHMRAvailable
+  };
 }
 function isHMRAvailable() {
   const g = globalThis;
@@ -1227,9 +1462,28 @@ function formatError(error, context) {
 }
 
 // src/core/ssr-context.ts
-var ssrMode = false;
+var als = null;
+try {
+  if (typeof process !== "undefined" && process.versions && process.versions.node) {
+    const req = Function("return typeof require==='function'?require:null")();
+    if (req) {
+      const mod = req("node:async_hooks");
+      als = new mod.AsyncLocalStorage();
+    }
+  }
+} catch {
+  als = null;
+}
+var fallbackStore = { ssr: false, suspenseIdCounter: 0 };
+function getSSRStore() {
+  if (als) {
+    const s = als.getStore();
+    if (s) return s;
+  }
+  return fallbackStore;
+}
 function isSSR() {
-  return ssrMode;
+  return getSSRStore().ssr;
 }
 
 // src/core/signals/effect.ts
@@ -1239,26 +1493,114 @@ function effect(effectFn, options) {
   if (isSSR()) return () => {
   };
   const onError = options?.onError;
+  let userCleanups = [];
+  const onCleanup = (fn) => {
+    userCleanups.push(fn);
+  };
+  const runUserCleanups = () => {
+    if (userCleanups.length === 0) return;
+    const list = userCleanups;
+    userCleanups = [];
+    for (let i = list.length - 1; i >= 0; i--) {
+      try {
+        list[i]();
+      } catch (err) {
+        if (typeof console !== "undefined") {
+          console.warn("[SibuJS effect] onCleanup threw:", err);
+        }
+      }
+    }
+  };
+  const invokeBody = () => effectFn(onCleanup);
   const wrappedFn = onError ? () => {
     try {
-      effectFn();
+      invokeBody();
     } catch (err) {
       onError(err);
     }
-  } : effectFn;
+  } : invokeBody;
   let cleanupHandle = () => {
   };
+  let running = false;
+  let rerunPending = false;
+  const MAX_RERUNS = 100;
   const subscriber = () => {
-    cleanupHandle();
-    cleanupHandle = track(wrappedFn, subscriber);
+    if (running) {
+      rerunPending = true;
+      return;
+    }
+    running = true;
+    try {
+      let reruns = 0;
+      do {
+        rerunPending = false;
+        runUserCleanups();
+        cleanupHandle();
+        cleanupHandle = track(wrappedFn, subscriber);
+        if (++reruns > MAX_RERUNS) {
+          if (_g2.__SIBU_DEV_WARN__ !== false && typeof console !== "undefined") {
+            console.error(
+              `[SibuJS] effect re-requested itself ${MAX_RERUNS}+ times \u2014 likely a write-reads-self cycle. Breaking to prevent infinite loop.`
+            );
+          }
+          rerunPending = false;
+          break;
+        }
+      } while (rerunPending);
+    } finally {
+      running = false;
+      rerunPending = false;
+    }
   };
-  cleanupHandle = track(wrappedFn, subscriber);
+  running = true;
+  try {
+    let reruns = 0;
+    do {
+      rerunPending = false;
+      runUserCleanups();
+      cleanupHandle();
+      cleanupHandle = track(wrappedFn, subscriber);
+      if (++reruns > MAX_RERUNS) {
+        if (_g2.__SIBU_DEV_WARN__ !== false && typeof console !== "undefined") {
+          console.error(
+            `[SibuJS] effect re-requested itself ${MAX_RERUNS}+ times on initial run \u2014 likely a write-reads-self cycle. Breaking to prevent infinite loop.`
+          );
+        }
+        rerunPending = false;
+        break;
+      }
+    } while (rerunPending);
+  } finally {
+    running = false;
+    rerunPending = false;
+  }
   const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
   if (hook) hook.emit("effect:create", { effectFn });
+  let disposed = false;
   return () => {
+    if (disposed) return;
+    disposed = true;
     const h = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-    if (h) h.emit("effect:destroy", { effectFn });
-    cleanupHandle();
+    if (h) {
+      try {
+        h.emit("effect:destroy", { effectFn });
+      } catch {
+      }
+    }
+    try {
+      runUserCleanups();
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[SibuJS effect] onCleanup threw during dispose:", err);
+      }
+    }
+    try {
+      cleanupHandle();
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[SibuJS effect] dispose threw:", err);
+      }
+    }
   };
 }
 
@@ -1268,13 +1610,13 @@ function debugValue(value, formatter) {
   const format = formatter ?? ((v) => String(v));
   const entry = { value: void 0, label: "" };
   debugValues.push(entry);
-  const dispose = effect(() => {
+  const dispose2 = effect(() => {
     const resolved = value();
     entry.value = resolved;
     entry.label = format(resolved);
   });
   return () => {
-    dispose();
+    dispose2();
     const idx = debugValues.indexOf(entry);
     if (idx !== -1) debugValues.splice(idx, 1);
   };
@@ -1354,11 +1696,11 @@ function createDevtoolsOverlay(options) {
   const getPanels = () => {
     return [...panels];
   };
-  const dispose = () => {
+  const dispose2 = () => {
     panels.length = 0;
     setEnabled(false);
   };
-  return { isEnabled, toggle, addPanel, removePanel, getPanels, dispose };
+  return { isEnabled, toggle, addPanel, removePanel, getPanels, dispose: dispose2 };
 }
 
 // src/devtools/introspect.ts
@@ -1373,8 +1715,12 @@ function getSubscriberCount(getter) {
   return subs ? subs.size : 0;
 }
 function getDependencies(subscriberFn) {
-  const deps = subscriberFn._deps;
-  return deps ? Array.from(deps) : [];
+  const fn = subscriberFn;
+  const singleDep = fn._dep;
+  if (singleDep !== void 0) return [singleDep];
+  const deps = fn._deps;
+  if (!deps) return [];
+  return deps instanceof Map ? Array.from(deps.keys()) : Array.from(deps);
 }
 function inspectSignal(getter) {
   const signal2 = getter.__signal;
@@ -1386,25 +1732,24 @@ function inspectSignal(getter) {
     subscriberCount: subs ? subs.size : 0
   };
 }
-function walkDependencyGraph(getter, maxDepth = 10) {
+function walkDependencyGraph(getter, maxDepth = 10, visited = /* @__PURE__ */ new WeakSet()) {
   const signal2 = getter.__signal;
-  if (!signal2 || maxDepth <= 0) {
+  if (!signal2 || maxDepth <= 0 || visited.has(signal2)) {
     return { name: getSignalName(getter), subscribers: 0, downstream: [] };
   }
+  visited.add(signal2);
   const subs = signal2[SUBS2];
   const downstream = [];
   if (subs) {
     for (const sub of subs) {
       const subSig = sub._sig;
-      if (subSig) {
+      if (subSig && !visited.has(subSig)) {
         const subName = subSig.__name;
-        const subSubs = subSig[SUBS2];
-        downstream.push({
-          name: subName,
-          subscribers: subSubs ? subSubs.size : 0,
-          downstream: []
-          // Could recurse but we keep it simple
-        });
+        const fakeGetter = (() => void 0);
+        const tag = fakeGetter;
+        tag.__signal = subSig;
+        if (subName !== void 0) tag.__name = subName;
+        downstream.push(walkDependencyGraph(fakeGetter, maxDepth - 1, visited));
       }
     }
   }
@@ -1534,6 +1879,7 @@ function createTraceProfiler() {
   captureSignalGraph,
   checkLeaks,
   clearDebugValues,
+  clearHMRModule,
   clearHMRState,
   clearPerformanceData,
   createDevtoolsOverlay,
@@ -1547,6 +1893,7 @@ function createTraceProfiler() {
   diffSignalGraphs,
   disableDebug,
   enableDebug,
+  exposeHMR,
   formatError,
   getActiveDevTools,
   getDebugValues,