sibujs 1.4.0 → 2.0.0

package/dist/{chunk-QWZG56ET.js → chunk-ND2664SF.js}

@@ -139,60 +139,68 @@ import {
   use,
   var_,
   video
-} from "./chunk-32DY64NT.js";
+} from "./chunk-R73P76YZ.js";
 import {
   watch
-} from "./chunk-NYVAC6P5.js";
+} from "./chunk-ITX6OO3F.js";
+import {
+  trustHTML
+} from "./chunk-JYD2PWXH.js";
 import {
   context
-} from "./chunk-BGN5ZMP4.js";
+} from "./chunk-GTBNNBJ6.js";
 import {
   SVG_NS,
   bindChildNode,
   tagFactory
-} from "./chunk-F3FA4F32.js";
+} from "./chunk-KLRMB5ZS.js";
 import {
   bindAttribute,
-  bindDynamic,
+  bindDynamic
+} from "./chunk-DFPFITST.js";
+import {
+  derived
+} from "./chunk-54EDRCEF.js";
+import {
   checkLeaks,
   dispose,
   registerDisposer
-} from "./chunk-PTQJDMRT.js";
-import {
-  derived
-} from "./chunk-NEKUBFPT.js";
+} from "./chunk-2UPRY23K.js";
 import {
   isUrlAttribute,
+  sanitizeSrcset,
   sanitizeUrl
-} from "./chunk-CMBFNA7L.js";
+} from "./chunk-UCS6AMJ7.js";
 import {
   effect,
   on
-} from "./chunk-CHF5OHIA.js";
+} from "./chunk-HB24TBAF.js";
 import {
   disableSSR,
   enableSSR,
+  getSSRStore,
   isSSR,
+  runInSSRContext,
   withSSR
-} from "./chunk-EUZND3CB.js";
+} from "./chunk-2RA7SHDA.js";
 import {
   batch,
   enqueueBatchedSignal,
   isBatching,
   signal
-} from "./chunk-WZSPOOER.js";
+} from "./chunk-CC65Y57T.js";
 import {
   notifySubscribers,
   recordDependency,
   track,
   untracked
-} from "./chunk-ZD6OAMTH.js";
+} from "./chunk-VLPPXTYG.js";
 import {
   __export,
   devAssert,
   devWarn,
   isDev
-} from "./chunk-5X6PP2UK.js";
+} from "./chunk-LMLD24FC.js";
 
 // index.ts
 var index_exports = {};
@@ -276,6 +284,7 @@ __export(index_exports, {
   footer: () => footer,
   form: () => form,
   g: () => g,
+  getSSRStore: () => getSSRStore,
   getSlot: () => getSlot,
   h1: () => h1,
   h2: () => h2,
@@ -311,8 +320,6 @@ __export(index_exports, {
   mask: () => mask,
   match: () => match,
   math: () => math,
-  memo: () => memo,
-  memoFn: () => memoFn,
   menu: () => menu,
   meta: () => meta,
   meter: () => meter,
@@ -350,6 +357,7 @@ __export(index_exports, {
   rp: () => rp,
   rt: () => rt,
   ruby: () => ruby,
+  runInSSRContext: () => runInSSRContext,
   s: () => s,
   samp: () => samp,
   script: () => script,
@@ -375,6 +383,7 @@ __export(index_exports, {
   symbol: () => symbol,
   table: () => table,
   tagFactory: () => tagFactory,
+  takePendingError: () => takePendingError,
   tbody: () => tbody,
   td: () => td,
   template: () => template,
@@ -389,6 +398,7 @@ __export(index_exports, {
   track: () => track2,
   transition: () => transition,
   trapFocus: () => trapFocus,
+  trustHTML: () => trustHTML,
   tspan: () => tspan,
   u: () => u,
   ul: () => ul,
@@ -404,6 +414,8 @@ __export(index_exports, {
 });
 
 // src/core/rendering/htm.ts
+var _isDev = isDev();
+var RAW_TEXT_TAGS = /* @__PURE__ */ new Set(["script", "style"]);
 var VOID_ELEMENTS = /* @__PURE__ */ new Set([
   "area",
   "base",
@@ -588,6 +600,15 @@ function parseTemplate(strings) {
           children.push({ t: 0, el: { tag, svg: SVG_TAGS.has(tag), attrs, children: [] } });
         } else {
           const inner = parseChildren();
+          if (RAW_TEXT_TAGS.has(tag.toLowerCase())) {
+            for (let i2 = 0; i2 < inner.length; i2++) {
+              if (inner[i2].t === 2) {
+                throw new Error(
+                  `html: dynamic \${...} expressions are not allowed inside <${tag}> (raw-text context). Build the content separately and append it as a Node.`
+                );
+              }
+            }
+          }
           if (template2[pos] === "<" && pos + 1 < len && template2[pos + 1] === "/") {
             pos += 2;
             readTagName();
@@ -614,27 +635,50 @@ function executeElement(tmpl, values) {
         break;
       case 1: {
         const name = attr.name;
-        if (name[0] === "o" && name[1] === "n") break;
+        const lname = name.toLowerCase();
+        if (lname[0] === "o" && lname[1] === "n") break;
         const val = values[attr.idx];
         if (typeof val === "function") {
           registerDisposer(el, bindAttribute(el, name, val));
         } else if (val != null) {
           const str = String(val);
-          el.setAttribute(name, isUrlAttribute(name) ? sanitizeUrl(str) : str);
+          if (lname === "srcset") {
+            el.setAttribute(name, sanitizeSrcset(str));
+          } else if (isUrlAttribute(lname)) {
+            el.setAttribute(name, sanitizeUrl(str));
+          } else {
+            el.setAttribute(name, str);
+          }
         }
         break;
       }
       case 2: {
         let val = attr.statics[0];
         for (let j = 0; j < attr.exprs.length; j++) {
-          val += String(values[attr.exprs[j]]) + attr.statics[j + 1];
+          const ev = values[attr.exprs[j]];
+          val += (ev == null ? "" : String(ev)) + attr.statics[j + 1];
+        }
+        const lname2 = attr.name.toLowerCase();
+        if (lname2 === "srcset") {
+          el.setAttribute(attr.name, sanitizeSrcset(val));
+        } else if (isUrlAttribute(lname2)) {
+          el.setAttribute(attr.name, sanitizeUrl(val));
+        } else {
+          el.setAttribute(attr.name, val);
         }
-        el.setAttribute(attr.name, val);
         break;
       }
-      case 3:
-        el.addEventListener(attr.name, values[attr.idx]);
+      case 3: {
+        const fn = values[attr.idx];
+        if (typeof fn === "function") {
+          el.addEventListener(attr.name, fn);
+        } else if (_isDev) {
+          devWarn(
+            `html: on:${attr.name} handler is not a function (got ${typeof fn}). Event listener was not attached.`
+          );
+        }
         break;
+      }
       case 4:
         el.setAttribute(attr.name, "");
         break;
@@ -728,7 +772,7 @@ function html(strings, ...values) {
 function mount(component, container) {
   if (!container) {
     throw new Error(
-      "[Sibu] mount: container element not found. Make sure the DOM element exists before calling mount()."
+      "[SibuJS mount] container element not found. Make sure the DOM element exists before calling mount()."
     );
   }
   devAssert(
@@ -756,7 +800,7 @@ function mount(component, container) {
 }
 
 // src/core/rendering/each.ts
-var _isDev = isDev();
+var _isDev2 = isDev();
 function resolveNodeChild(child) {
   if (typeof child === "function") {
     return resolveNodeChild(child());
@@ -851,17 +895,31 @@ function each(getArray, render, options) {
         node = existing;
       } else {
         const itemKey = key;
-        const itemGetter = () => getArray()[keyIndexMap.get(itemKey)];
+        const itemGetter = () => untracked(() => getArray()[keyIndexMap.get(itemKey)]);
         const indexGetter = () => keyIndexMap.get(itemKey);
         try {
           node = resolveNodeChild(render(itemGetter, indexGetter));
         } catch (err) {
-          if (_isDev) {
+          if (_isDev2) {
             devWarn(
               `each: render threw for item at index ${i2} (key="${newKeys[i2]}"): ${err instanceof Error ? err.message : String(err)}`
             );
           }
           node = document.createComment(`each:error:${i2}`);
+          const errorObj = err instanceof Error ? err : new Error(String(err));
+          queueMicrotask(() => {
+            try {
+              const target = anchor.parentNode;
+              if (target?.dispatchEvent) {
+                target.dispatchEvent(
+                  new CustomEvent("sibu:error-propagate", { bubbles: true, detail: { error: errorObj } })
+                );
+              } else if (_isDev2) {
+                devWarn(`each: error not surfaced \u2014 anchor detached: ${errorObj.message}`);
+              }
+            } catch {
+            }
+          });
         }
       }
       workMap.set(key, node);
@@ -930,7 +988,8 @@ function each(getArray, render, options) {
     workMap = tmp;
     initialized = true;
   };
-  track(update);
+  const untrack = track(update);
+  registerDisposer(anchor, untrack);
   if (!initialized) {
     queueMicrotask(() => {
       if (!initialized && anchor.parentNode) {
@@ -977,24 +1036,36 @@ function Portal(nodes, target) {
   const anchor = document.createComment("portal");
   const container = target || document.body;
   let portalContent = null;
+  let disposed = false;
   queueMicrotask(() => {
+    if (disposed) return;
     try {
       portalContent = nodes();
       container.appendChild(portalContent);
     } catch (err) {
-      console.error("[Portal] Render error:", err);
+      if (typeof console !== "undefined") {
+        console.error("[Portal] Render error:", err);
+      }
+      const errorObj = err instanceof Error ? err : new Error(String(err));
+      queueMicrotask(() => {
+        try {
+          const target2 = anchor.parentNode;
+          if (target2?.dispatchEvent) {
+            target2.dispatchEvent(
+              new CustomEvent("sibu:error-propagate", { bubbles: true, detail: { error: errorObj } })
+            );
+          }
+        } catch {
+        }
+      });
     }
   });
-  const observer = new MutationObserver(() => {
-    if (!anchor.isConnected && portalContent) {
+  registerDisposer(anchor, () => {
+    disposed = true;
+    if (portalContent) {
+      dispose(portalContent);
       portalContent.remove();
       portalContent = null;
-      observer.disconnect();
-    }
-  });
-  queueMicrotask(() => {
-    if (anchor.parentNode) {
-      observer.observe(anchor.parentNode, { childList: true });
     }
   });
   return anchor;
@@ -1030,7 +1101,8 @@ function DynamicComponent(is) {
     }
     container.replaceChildren(el);
   }
-  track(render);
+  const untrack = track(render);
+  registerDisposer(container, untrack);
   return container;
 }
 
@@ -1120,11 +1192,16 @@ function KeepAlive(activeKey, cases, options) {
   const anchor = document.createComment("keep-alive");
   const cache2 = /* @__PURE__ */ new Map();
   const lruOrder = [];
-  const max = options?.max ?? 0;
+  const max = options?.max ?? 10;
+  if (max === 0 && isDev()) {
+    devWarn("KeepAlive: unbounded cache (max: 0). Cached subtrees will never be evicted \u2014 set `max` to bound memory.");
+  }
   let currentKey;
   let currentNode = null;
   let initialized = false;
+  let disposed = false;
   const update = () => {
+    if (disposed) return;
     const key = activeKey();
     const parent = anchor.parentNode;
     if (!parent) return;
@@ -1164,12 +1241,23 @@ function KeepAlive(activeKey, cases, options) {
     currentNode = node;
     initialized = true;
   };
-  track(update);
+  const untrack = track(update);
   if (!initialized) {
     queueMicrotask(() => {
       if (!initialized && anchor.parentNode) update();
     });
   }
+  registerDisposer(anchor, () => {
+    disposed = true;
+    untrack();
+    for (const node of cache2.values()) {
+      dispose(node);
+      if (node.parentNode) node.parentNode.removeChild(node);
+    }
+    cache2.clear();
+    lruOrder.length = 0;
+    currentNode = null;
+  });
   return anchor;
 }
 
@@ -1319,7 +1407,7 @@ function store(initialState) {
     },
     set() {
       throw new Error(
-        "[Sibu] store: Direct mutation is not allowed. Use actions.setState() to update store properties."
+        "[SibuJS store] Direct mutation is not allowed. Use actions.setState() to update store properties."
       );
     }
   });
@@ -1333,16 +1421,20 @@ function store(initialState) {
   const setState = (patch) => {
     const current = getSnapshot();
     const nextState = typeof patch === "function" ? patch(current) : patch;
-    Object.entries(nextState).forEach(([key, value]) => {
-      if (key in signals) {
-        signals[key][1](value);
-      }
+    batch(() => {
+      Object.entries(nextState).forEach(([key, value]) => {
+        if (key in signals) {
+          signals[key][1](value);
+        }
+      });
     });
   };
   const reset = () => {
-    Object.keys(initialState).forEach((key) => {
-      const setter = signals[key][1];
-      setter(initialState[key]);
+    batch(() => {
+      Object.keys(initialState).forEach((key) => {
+        const setter = signals[key][1];
+        setter(initialState[key]);
+      });
     });
   };
   const subscribe = (callback) => {
@@ -1389,16 +1481,6 @@ function ref(initial) {
   };
 }
 
-// src/core/signals/memo.ts
-function memo(factory) {
-  return derived(factory);
-}
-
-// src/core/signals/memoFn.ts
-function memoFn(callback) {
-  return derived(callback);
-}
-
 // src/core/signals/array.ts
 function array(initial = []) {
   const [arr, setArr] = signal([...initial]);
@@ -1486,7 +1568,8 @@ function reactiveArray(initial = []) {
   function get() {
     recordDependency(signal2);
     if (snapshot === null) {
-      snapshot = Object.freeze([...data2]);
+      const copy = data2.slice();
+      snapshot = Object.freeze(copy);
     }
     return snapshot;
   }
@@ -1596,21 +1679,67 @@ function deepEqual(a2, b2, seen) {
   if (a2 == null || b2 == null) return false;
   if (typeof a2 !== typeof b2) return false;
   if (typeof a2 !== "object") return false;
-  if (a2 instanceof Date && b2 instanceof Date) return a2.getTime() === b2.getTime();
-  if (a2 instanceof RegExp && b2 instanceof RegExp) return a2.toString() === b2.toString();
-  if (!seen) seen = /* @__PURE__ */ new Set();
-  if (seen.has(a2)) return true;
-  seen.add(a2);
+  const objA = a2;
+  const objB = b2;
+  if (objA.constructor !== objB.constructor) return false;
+  if (a2 instanceof Date) return a2.getTime() === b2.getTime();
+  if (a2 instanceof RegExp) {
+    const rb = b2;
+    return a2.source === rb.source && a2.flags === rb.flags;
+  }
+  if (!seen) seen = /* @__PURE__ */ new Map();
+  let peers = seen.get(objA);
+  if (peers?.has(objB)) return true;
+  if (!peers) {
+    peers = /* @__PURE__ */ new Set();
+    seen.set(objA, peers);
+  }
+  peers.add(objB);
+  if (a2 instanceof Map) {
+    const mb = b2;
+    if (a2.size !== mb.size) return false;
+    for (const [k, v] of a2) {
+      if (!mb.has(k)) return false;
+      if (!deepEqual(v, mb.get(k), seen)) return false;
+    }
+    return true;
+  }
+  if (a2 instanceof Set) {
+    const sb = b2;
+    if (a2.size !== sb.size) return false;
+    for (const item of a2) {
+      if (!sb.has(item)) return false;
+    }
+    return true;
+  }
+  if (a2 instanceof ArrayBuffer) {
+    const viewA = new Uint8Array(a2);
+    const viewB = new Uint8Array(b2);
+    if (viewA.length !== viewB.length) return false;
+    for (let i2 = 0; i2 < viewA.length; i2++) {
+      if (viewA[i2] !== viewB[i2]) return false;
+    }
+    return true;
+  }
+  if (ArrayBuffer.isView(a2) && ArrayBuffer.isView(b2)) {
+    const ta = a2;
+    const tb = b2;
+    if (ta.length !== tb.length) return false;
+    for (let i2 = 0; i2 < ta.length; i2++) {
+      if (ta[i2] !== tb[i2]) return false;
+    }
+    return true;
+  }
   if (Array.isArray(a2)) {
     if (!Array.isArray(b2)) return false;
     if (a2.length !== b2.length) return false;
     return a2.every((val, i2) => deepEqual(val, b2[i2], seen));
   }
-  const keysA = Object.keys(a2);
-  const keysB = Object.keys(b2);
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
   if (keysA.length !== keysB.length) return false;
   return keysA.every(
-    (key) => deepEqual(a2[key], b2[key], seen)
+    (key) => deepEqual(objA[key], objB[key], seen)
   );
 }
 function deepSignal(initial) {
@@ -1636,26 +1765,34 @@ function asyncDerived(factory, initial) {
   effect(() => {
     tick();
     const currentRun = ++runId;
-    setLoading(true);
-    setError(null);
+    batch(() => {
+      setLoading(true);
+      setError(null);
+    });
     let promise;
     try {
       promise = factory();
     } catch (err) {
-      setError(err);
-      setLoading(false);
+      batch(() => {
+        setError(err);
+        setLoading(false);
+      });
       return;
     }
     promise.then(
       (result) => {
         if (currentRun !== runId) return;
-        setValue(result);
-        setLoading(false);
+        batch(() => {
+          setValue(result);
+          setLoading(false);
+        });
       },
       (err) => {
         if (currentRun !== runId) return;
-        setError(err);
-        setLoading(false);
+        batch(() => {
+          setError(err);
+          setLoading(false);
+        });
       }
     );
   });
@@ -1670,32 +1807,198 @@ function asyncDerived(factory, initial) {
 // src/core/rendering/lifecycle.ts
 function safeCall(cb, hookName) {
   try {
-    cb();
+    return cb();
   } catch (err) {
     devWarn(`${hookName}: callback threw: ${err instanceof Error ? err.message : String(err)}`);
+    return void 0;
+  }
+}
+function runMountCallback(callback, hookName, element) {
+  const cleanup = safeCall(callback, hookName);
+  if (typeof cleanup === "function" && element) {
+    registerDisposer(element, cleanup);
+  }
+}
+var mountWatchers = /* @__PURE__ */ new WeakMap();
+var unmountWatchers = /* @__PURE__ */ new WeakMap();
+var watchedMountElements = /* @__PURE__ */ new Set();
+var watchedUnmountElements = /* @__PURE__ */ new Set();
+var sharedObserver = null;
+var mutationCounter = 0;
+var FULL_SWEEP_INTERVAL = 256;
+function fireMount(el) {
+  const cbs = mountWatchers.get(el);
+  if (!cbs) return;
+  mountWatchers.delete(el);
+  watchedMountElements.delete(el);
+  for (const cb of cbs) {
+    try {
+      cb();
+    } catch {
+    }
+  }
+}
+function fireUnmount(el) {
+  const cbs = unmountWatchers.get(el);
+  if (!cbs) return;
+  queueMicrotask(() => {
+    if (el.isConnected) return;
+    const stillCbs = unmountWatchers.get(el);
+    if (!stillCbs) return;
+    unmountWatchers.delete(el);
+    watchedUnmountElements.delete(el);
+    for (const cb of stillCbs) {
+      try {
+        cb();
+      } catch {
+      }
+    }
+  });
+}
+function visitAddedNode(node) {
+  if (watchedMountElements.size === 0) return;
+  if (node.nodeType !== 1) return;
+  const el = node;
+  if (watchedMountElements.has(el) && el.isConnected) {
+    fireMount(el);
+  }
+  if (el.firstElementChild) {
+    for (const watched of Array.from(watchedMountElements)) {
+      if (watched !== el && watched.isConnected && el.contains(watched)) {
+        fireMount(watched);
+      }
+    }
+  }
+}
+function visitRemovedNode(node) {
+  if (watchedUnmountElements.size === 0) return;
+  if (node.nodeType !== 1) return;
+  const el = node;
+  if (watchedUnmountElements.has(el) && !el.isConnected) {
+    fireUnmount(el);
+  }
+  if (el.firstElementChild) {
+    for (const watched of Array.from(watchedUnmountElements)) {
+      if (watched !== el && !watched.isConnected && el.contains(watched)) {
+        fireUnmount(watched);
+      }
+    }
+  }
+}
+function fullSweep() {
+  if (watchedMountElements.size > 0) {
+    for (const el of Array.from(watchedMountElements)) {
+      if (el.isConnected) fireMount(el);
+    }
+  }
+  if (watchedUnmountElements.size > 0) {
+    for (const el of Array.from(watchedUnmountElements)) {
+      if (!el.isConnected) fireUnmount(el);
+    }
+  }
+}
+function ensureObserver() {
+  if (sharedObserver || typeof document === "undefined") return;
+  sharedObserver = new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      if (m.type !== "childList") continue;
+      if (m.addedNodes.length > 0) {
+        for (let i2 = 0; i2 < m.addedNodes.length; i2++) {
+          visitAddedNode(m.addedNodes[i2]);
+        }
+      }
+      if (m.removedNodes.length > 0) {
+        for (let i2 = 0; i2 < m.removedNodes.length; i2++) {
+          visitRemovedNode(m.removedNodes[i2]);
+        }
+      }
+    }
+    mutationCounter += mutations.length;
+    if (mutationCounter >= FULL_SWEEP_INTERVAL) {
+      mutationCounter = 0;
+      fullSweep();
+    }
+    maybeDisconnectObserver();
+  });
+  sharedObserver.observe(document.body, { childList: true, subtree: true });
+}
+function maybeDisconnectObserver() {
+  if (!sharedObserver) return;
+  if (watchedMountElements.size === 0 && watchedUnmountElements.size === 0) {
+    sharedObserver.disconnect();
+    sharedObserver = null;
+    mutationCounter = 0;
   }
 }
+function registerMountWatcher(element, cb) {
+  let list = mountWatchers.get(element);
+  if (!list) {
+    list = [];
+    mountWatchers.set(element, list);
+  }
+  list.push(cb);
+  watchedMountElements.add(element);
+  ensureObserver();
+  return () => {
+    const cbs = mountWatchers.get(element);
+    if (cbs) {
+      const idx = cbs.indexOf(cb);
+      if (idx !== -1) cbs.splice(idx, 1);
+      if (cbs.length === 0) {
+        mountWatchers.delete(element);
+        watchedMountElements.delete(element);
+      }
+    }
+    maybeDisconnectObserver();
+  };
+}
+function registerUnmountWatcher(element, cb) {
+  let list = unmountWatchers.get(element);
+  if (!list) {
+    list = [];
+    unmountWatchers.set(element, list);
+  }
+  list.push(cb);
+  watchedUnmountElements.add(element);
+  ensureObserver();
+  return () => {
+    const cbs = unmountWatchers.get(element);
+    if (cbs) {
+      const idx = cbs.indexOf(cb);
+      if (idx !== -1) cbs.splice(idx, 1);
+      if (cbs.length === 0) {
+        unmountWatchers.delete(element);
+        watchedUnmountElements.delete(element);
+      }
+    }
+    maybeDisconnectObserver();
+  };
+}
 function onMount(callback, element) {
   if (typeof document === "undefined") return;
   if (element) {
+    let disposed = false;
+    registerDisposer(element, () => {
+      disposed = true;
+    });
     if (element.isConnected) {
       queueMicrotask(() => {
-        safeCall(callback, "onMount");
+        if (disposed) return;
+        runMountCallback(callback, "onMount", element);
       });
       return;
     }
-    const observer = new MutationObserver(() => {
-      if (element.isConnected) {
-        observer.disconnect();
-        safeCall(callback, "onMount");
-      }
-    });
     queueMicrotask(() => {
+      if (disposed) return;
       if (element.isConnected) {
-        safeCall(callback, "onMount");
-      } else {
-        observer.observe(document.body, { childList: true, subtree: true });
+        runMountCallback(callback, "onMount", element);
+        return;
       }
+      const unregister = registerMountWatcher(element, () => {
+        if (disposed) return;
+        runMountCallback(callback, "onMount", element);
+      });
+      registerDisposer(element, unregister);
     });
   } else {
     queueMicrotask(() => {
@@ -1704,20 +2007,24 @@ function onMount(callback, element) {
   }
 }
 function onUnmount(callback, element) {
-  const startObserving = () => {
-    const observer = new MutationObserver(() => {
-      if (!element.isConnected) {
-        observer.disconnect();
-        safeCall(callback, "onUnmount");
-      }
-    });
-    observer.observe(document.body, { childList: true, subtree: true });
+  if (typeof document === "undefined") return;
+  let fired = false;
+  const fireOnce = () => {
+    if (fired) return;
+    fired = true;
+    safeCall(callback, "onUnmount");
+  };
+  registerDisposer(element, fireOnce);
+  const startWatching = () => {
+    if (fired) return;
+    const unregister = registerUnmountWatcher(element, fireOnce);
+    registerDisposer(element, unregister);
   };
   if (element.isConnected) {
-    startObserving();
+    startWatching();
   } else {
     onMount(() => {
-      startObserving();
+      startWatching();
       return void 0;
     }, element);
   }
@@ -1734,7 +2041,7 @@ function strict(fn) {
       try {
         fn();
       } catch (err) {
-        console.warn("[Sibu strict] second run threw:", err);
+        console.warn("[SibuJS strict] second run threw:", err);
       }
     });
   }
@@ -1750,7 +2057,7 @@ function strictEffect(fn) {
     try {
       secondTeardown = effect(fn);
     } catch (err) {
-      console.warn("[Sibu strictEffect] second run threw:", err);
+      console.warn("[SibuJS strictEffect] second run threw:", err);
     }
   });
   return () => {
@@ -1776,9 +2083,11 @@ function nextTick() {
 function defer(getter) {
   const [value, setValue] = signal(getter());
   let pending = false;
+  let disposed = false;
   let latest = value();
   const flush = () => {
     pending = false;
+    if (disposed) return;
     setValue(latest);
   };
   const schedule = () => {
@@ -1792,11 +2101,17 @@ function defer(getter) {
       }
     });
   };
-  track(() => {
+  const teardown = track(() => {
     latest = getter();
     schedule();
   });
-  return value;
+  const accessor = (() => value());
+  accessor.dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    teardown();
+  };
+  return accessor;
 }
 var IDLE_FALLBACK_MS = 16;
 function scheduleIdle(fn) {
@@ -1837,32 +2152,56 @@ function transition() {
 }
 
 // src/core/rendering/lazy.ts
+var PENDING_ERROR = "__sibuPendingError";
+function dispatchPropagate(node, error) {
+  const fire = () => {
+    try {
+      if (!node.parentNode) return false;
+      node.dispatchEvent(new CustomEvent("sibu:error-propagate", { bubbles: true, detail: { error } }));
+      return true;
+    } catch {
+      return false;
+    }
+  };
+  if (node.parentNode && fire()) return;
+  queueMicrotask(() => {
+    if (fire()) return;
+    node[PENDING_ERROR] = error;
+  });
+}
+function takePendingError(node) {
+  const rec = node;
+  const err = rec[PENDING_ERROR];
+  if (err instanceof Error) {
+    delete rec[PENDING_ERROR];
+    return err;
+  }
+  return void 0;
+}
 function lazy(importFn) {
   let cached = null;
   return function LazyComponent() {
     if (cached) {
       return cached();
     }
-    const [_status, setStatus] = signal("loading");
-    const [_error, setError] = signal(null);
     const container = div({ class: "sibu-lazy" });
+    let disposed = false;
     importFn().then((mod) => {
+      if (disposed) return;
       cached = mod.default;
       const rendered = cached();
       container.replaceChildren(rendered);
-      setStatus("loaded");
     }).catch((err) => {
+      if (disposed) return;
       const errorObj = err instanceof Error ? err : new Error(String(err));
-      setError(errorObj);
-      setStatus("error");
-      container.replaceChildren(
-        div({
-          class: "sibu-lazy-error",
-          nodes: `Failed to load component: ${errorObj.message}`
-        })
-      );
+      devWarn(`[SibuJS] lazy() failed to load component: ${errorObj.message}`);
+      container.replaceChildren(div({ class: "sibu-lazy-error" }, `Failed to load component: ${errorObj.message}`));
+      dispatchPropagate(container, errorObj);
+    });
+    container.appendChild(span("sibu-lazy-loading", "Loading..."));
+    registerDisposer(container, () => {
+      disposed = true;
     });
-    container.appendChild(span({ class: "sibu-lazy-loading", nodes: "Loading..." }));
     return container;
   };
 }
@@ -1870,32 +2209,48 @@ function Suspense({ nodes, fallback }) {
   const container = div({ class: "sibu-suspense" });
   const fallbackEl = fallback();
   container.appendChild(fallbackEl);
+  let suspenseDisposed = false;
+  let observer = null;
+  registerDisposer(container, () => {
+    suspenseDisposed = true;
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  });
   queueMicrotask(() => {
+    if (suspenseDisposed) return;
     try {
       const childEl = nodes();
       if (childEl.classList.contains("sibu-lazy")) {
-        const observer = new MutationObserver(() => {
+        if (!childEl.querySelector(".sibu-lazy-loading")) {
+          container.replaceChildren(childEl);
+          return;
+        }
+        observer = new MutationObserver(() => {
+          if (suspenseDisposed) return;
           const loading = childEl.querySelector(".sibu-lazy-loading");
           if (!loading) {
-            observer.disconnect();
+            observer?.disconnect();
+            observer = null;
             container.replaceChildren(childEl);
           }
         });
         observer.observe(childEl, { childList: true, subtree: true });
-        if (!childEl.querySelector(".sibu-lazy-loading")) {
-          container.replaceChildren(childEl);
-        }
       } else {
         container.replaceChildren(childEl);
       }
-    } catch {
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error(String(err));
+      devWarn(`[SibuJS] Suspense nodes() threw: ${errorObj.message}`);
+      dispatchPropagate(container, errorObj);
     }
   });
   return container;
 }
 
 // src/components/ErrorDisplay.ts
-var _isDev2 = isDev();
+var _isDev3 = isDev();
 var STYLES = `
   .sibu-error-display {
     border: 1px solid var(--sibu-err-border, #e5484d);
@@ -1981,20 +2336,21 @@ var STYLES = `
     font-weight: 600;
   }
   .sibu-error-display .sibu-err-copy-btn {
-    background: transparent;
-    border: 1px solid #3a3a4e;
+    background: rgba(0, 0, 0, 0.22);
+    border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 4px;
-    color: #a0a3b8;
+    color: rgba(255, 255, 255, 0.85);
     cursor: pointer;
     padding: 2px 10px;
-    font-size: 0.95em;
+    font-size: 0.78em;
     font-family: inherit;
     transition: all 0.12s ease;
+    flex-shrink: 0;
   }
   .sibu-error-display .sibu-err-copy-btn:hover {
-    background: #2a2a3e;
-    color: #e5e7eb;
-    border-color: #4a4a5e;
+    background: rgba(0, 0, 0, 0.35);
+    color: white;
+    border-color: rgba(255, 255, 255, 0.3);
   }
 
   .sibu-error-display .sibu-err-stack {
@@ -2119,21 +2475,25 @@ function normalizeError(err) {
     cause: null
   };
 }
-function buildCopyText(err, meta2) {
+function buildCopyText(err, meta2, headline) {
   const lines = [];
+  lines.push(headline);
   lines.push(`[${err.code}] ${err.message}`);
   if (err.stack) {
     lines.push("");
+    lines.push("Stack Trace:");
     lines.push(err.stack);
   }
-  if (err.cause) {
+  let cause = err.cause;
+  while (cause) {
     lines.push("");
     lines.push("Caused by:");
-    lines.push(`  [${err.cause.code}] ${err.cause.message}`);
-    if (err.cause.stack) {
-      const indented = err.cause.stack.split("\n").map((l) => `  ${l}`).join("\n");
+    lines.push(`  [${cause.code}] ${cause.message}`);
+    if (cause.stack) {
+      const indented = cause.stack.split("\n").map((l) => `  ${l}`).join("\n");
       lines.push(indented);
     }
+    cause = cause.cause;
   }
   if (meta2 && Object.keys(meta2).length > 0) {
     lines.push("");
@@ -2143,9 +2503,13 @@ function buildCopyText(err, meta2) {
     }
   }
   lines.push("");
-  lines.push(`At: ${(/* @__PURE__ */ new Date()).toISOString()}`);
+  lines.push("Environment:");
+  lines.push(`  Timestamp: ${(/* @__PURE__ */ new Date()).toISOString()}`);
+  if (typeof location !== "undefined") {
+    lines.push(`  URL: ${location.href}`);
+  }
   if (typeof navigator !== "undefined" && navigator.userAgent) {
-    lines.push(`UA: ${navigator.userAgent}`);
+    lines.push(`  User Agent: ${navigator.userAgent}`);
   }
   return lines.join("\n");
 }
@@ -2197,7 +2561,7 @@ function ErrorDisplay(props) {
   injectStyles();
   const severity = props.severity ?? "error";
   const normalized = normalizeError(props.error);
-  const showDetails = props.alwaysShowDetails ?? _isDev2;
+  const showDetails = props.alwaysShowDetails ?? _isDev3;
   const headline = props.title ?? normalized.message;
   const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace("T", " ").slice(0, 19);
   const [copyLabel, setCopyLabel] = signal("Copy");
@@ -2206,7 +2570,7 @@ function ErrorDisplay(props) {
     nodes: () => copyLabel(),
     on: {
       click: () => {
-        const text2 = buildCopyText(normalized, props.metadata);
+        const text2 = buildCopyText(normalized, props.metadata, headline);
         if (typeof navigator !== "undefined" && navigator.clipboard) {
           navigator.clipboard.writeText(text2).then(
             () => {
@@ -2227,6 +2591,7 @@ function ErrorDisplay(props) {
     nodes: [
       code({ class: "sibu-err-icon", nodes: normalized.code }),
       h3({ class: "sibu-err-title", nodes: headline }),
+      copyBtn,
       span({ class: "sibu-err-timestamp", nodes: timestamp })
     ]
   });
@@ -2238,25 +2603,12 @@ function ErrorDisplay(props) {
         nodes: [
           div({
             class: "sibu-err-section-head",
-            nodes: [span({ nodes: "Stack Trace" }), copyBtn]
+            nodes: [span({ nodes: "Stack Trace" })]
           }),
           renderFrames(normalized.frames)
         ]
       })
     );
-  } else if (showDetails) {
-    bodyChildren.push(
-      div({
-        class: "sibu-err-section",
-        nodes: [
-          div({
-            class: "sibu-err-section-head",
-            nodes: [span({ nodes: "Details" }), copyBtn]
-          }),
-          div({ class: "sibu-err-stack", nodes: "(no stack available)" })
-        ]
-      })
-    );
   }
   if (showDetails) {
     bodyChildren.push(...renderCauseChain(normalized.cause));
@@ -2272,37 +2624,6 @@ function ErrorDisplay(props) {
       })
     );
   }
-  if (showDetails && typeof navigator !== "undefined" && navigator.userAgent) {
-    bodyChildren.push(
-      div({
-        class: "sibu-err-section",
-        nodes: [
-          div({ class: "sibu-err-section-head", nodes: [span({ nodes: "Environment" })] }),
-          div({
-            class: "sibu-err-meta",
-            nodes: (() => {
-              const dl2 = document.createElement("dl");
-              dl2.className = "sibu-err-meta";
-              const entries = [
-                ["User Agent", navigator.userAgent],
-                ["URL", typeof location !== "undefined" ? location.href : "(n/a)"],
-                ["Timestamp", (/* @__PURE__ */ new Date()).toISOString()]
-              ];
-              for (const [k, v] of entries) {
-                const dt2 = document.createElement("dt");
-                dt2.textContent = k;
-                const dd2 = document.createElement("dd");
-                dd2.textContent = v;
-                dl2.appendChild(dt2);
-                dl2.appendChild(dd2);
-              }
-              return dl2;
-            })()
-          })
-        ]
-      })
-    );
-  }
   const actionButtons = [];
   if (props.onRetry) {
     actionButtons.push(
@@ -2497,6 +2818,7 @@ function injectStyles2() {
     stylesInjected = true;
   }
 }
+var FALLBACK_CACHE_MAX = 50;
 var fallbackCache = /* @__PURE__ */ new WeakMap();
 function getMemoizedFallback(fallbackFn, error, retry) {
   let cache2 = fallbackCache.get(fallbackFn);
@@ -2505,27 +2827,42 @@ function getMemoizedFallback(fallbackFn, error, retry) {
     fallbackCache.set(fallbackFn, cache2);
   }
   const key = error.message;
-  if (!cache2.has(key)) {
-    cache2.set(key, fallbackFn(error, retry));
+  let factory = cache2.get(key);
+  if (factory) {
+    cache2.delete(key);
+    cache2.set(key, factory);
+  } else {
+    factory = () => fallbackFn(error, retry);
+    cache2.set(key, factory);
+    if (cache2.size > FALLBACK_CACHE_MAX) {
+      const oldestKey = cache2.keys().next().value;
+      if (oldestKey !== void 0) cache2.delete(oldestKey);
+    }
   }
-  return cache2.get(key);
+  return factory();
 }
 function ErrorBoundary({ nodes, fallback, onError, resetKeys }) {
   injectStyles2();
   const [error, setError] = signal(null);
   const retry = () => {
     if (fallback) {
-      fallbackCache.delete(fallback);
+      const cur = error();
+      const inner = fallbackCache.get(fallback);
+      if (cur && inner) inner.delete(cur.message);
     }
     setError(null);
   };
+  let resetKeysTeardown = null;
   if (resetKeys && resetKeys.length > 0) {
     let initialized = false;
-    effect(() => {
+    resetKeysTeardown = effect(() => {
       for (const k of resetKeys) {
         try {
           k();
-        } catch {
+        } catch (err) {
+          if (typeof console !== "undefined") {
+            console.warn("[SibuJS ErrorBoundary] resetKeys getter threw:", err);
+          }
         }
       }
       if (!initialized) {
@@ -2538,7 +2875,15 @@ function ErrorBoundary({ nodes, fallback, onError, resetKeys }) {
   const handleError = (e) => {
     const errorObj = e instanceof Error ? e : new Error(String(e));
     setError(errorObj);
-    onError?.(errorObj);
+    if (onError) {
+      try {
+        onError(errorObj);
+      } catch (cbErr) {
+        if (typeof console !== "undefined") {
+          console.error("[SibuJS ErrorBoundary] onError callback threw:", cbErr);
+        }
+      }
+    }
     return errorObj;
   };
   const defaultFallback = (err, retryFn) => {
@@ -2590,7 +2935,7 @@ function ErrorBoundary({ nodes, fallback, onError, resetKeys }) {
       }
     }
   });
-  container.addEventListener("sibu:error-propagate", (e) => {
+  const propagateListener = (e) => {
     if (error()) return;
     e.stopPropagation();
     const customEvent = e;
@@ -2598,6 +2943,30 @@ function ErrorBoundary({ nodes, fallback, onError, resetKeys }) {
     if (propagatedError) {
       handleError(propagatedError);
     }
+  };
+  container.addEventListener("sibu:error-propagate", propagateListener);
+  onMount(() => {
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+    const collected = [];
+    let node = walker.currentNode;
+    while (node) {
+      const pending = takePendingError(node);
+      if (pending) collected.push(pending);
+      node = walker.nextNode();
+    }
+    if (collected.length === 1) {
+      handleError(collected[0]);
+    } else if (collected.length > 1) {
+      const Agg = globalThis.AggregateError;
+      handleError(
+        Agg ? new Agg(collected, `${collected.length} pre-mount errors caught by ErrorBoundary`) : new Error(collected.map((e) => e.message).join("; "))
+      );
+    }
+    return void 0;
+  }, container);
+  registerDisposer(container, () => {
+    if (resetKeysTeardown) resetKeysTeardown();
+    container.removeEventListener("sibu:error-propagate", propagateListener);
   });
   return container;
 }
@@ -2719,8 +3088,6 @@ export {
   setGlobalErrorHandler,
   store,
   ref,
-  memo,
-  memoFn,
   array,
   reactiveArray,
   deepEqual,
@@ -2735,6 +3102,7 @@ export {
   nextTick,
   defer,
   transition,
+  takePendingError,
   lazy,
   Suspense,
   ErrorDisplay,