sibujs 1.4.0 → 2.0.0

package/dist/ui.cjs

@@ -23,6 +23,7 @@ __export(ui_exports, {
   FocusTrap: () => FocusTrap,
   RenderProp: () => RenderProp,
   VirtualList: () => VirtualList,
+  __resetDialogStack: () => __resetDialogStack,
   announce: () => announce,
   aria: () => aria,
   assertType: () => assertType,
@@ -91,12 +92,12 @@ 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}`);
   }
 }
 
@@ -106,11 +107,11 @@ var subscriberStack = new Array(32);
 var stackCapacity = 32;
 var stackTop = -1;
 var currentSubscriber = null;
-var signalSubscribers = /* @__PURE__ */ new WeakMap();
 var SUBS = "__s";
 var notifyDepth = 0;
 var pendingQueue = [];
 var pendingSet = /* @__PURE__ */ new Set();
+var propagateStack = [];
 function safeInvoke(sub) {
   try {
     sub();
@@ -119,6 +120,15 @@ function safeInvoke(sub) {
   }
 }
 var trackingSuspended = false;
+function retrack(effectFn, subscriber) {
+  const prev = currentSubscriber;
+  currentSubscriber = subscriber;
+  try {
+    effectFn();
+  } finally {
+    currentSubscriber = prev;
+  }
+}
 function track(effectFn, subscriber) {
   if (!subscriber) subscriber = effectFn;
   cleanup(subscriber);
@@ -157,7 +167,6 @@ function recordDependency(signal2) {
   let subs = signal2[SUBS];
   if (!subs) {
     subs = /* @__PURE__ */ new Set();
-    signalSubscribers.set(signal2, subs);
     signal2[SUBS] = subs;
   }
   subs.add(currentSubscriber);
@@ -167,42 +176,46 @@ function recordDependency(signal2) {
     signal2.__f = void 0;
   }
 }
+var maxDrainIterations = 1e5;
 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) {
@@ -226,13 +239,23 @@ function notifySubscribers(signal2) {
       }
       let i = 0;
       while (i < pendingQueue.length) {
+        if (i >= maxDrainIterations) {
+          if (typeof console !== "undefined") {
+            console.error(
+              `[SibuJS] Notification queue exceeded ${maxDrainIterations} iterations \u2014 likely an effect that writes to a signal it reads. Breaking to prevent infinite loop.`
+            );
+          }
+          break;
+        }
         safeInvoke(pendingQueue[i]);
         i++;
       }
     } finally {
-      pendingQueue.length = 0;
-      pendingSet.clear();
       notifyDepth--;
+      if (notifyDepth === 0) {
+        pendingQueue.length = 0;
+        pendingSet.clear();
+      }
     }
     return;
   }
@@ -252,30 +275,48 @@ function notifySubscribers(signal2) {
   notifyDepth++;
   try {
     let directCount = 0;
+    let hasComputedSub = false;
     for (const sub of subs) {
+      if (sub._c) hasComputedSub = true;
       pendingQueue[directCount++] = sub;
     }
-    for (let i2 = 0; i2 < directCount; i2++) {
-      if (pendingQueue[i2]._c) {
-        propagateDirty(pendingQueue[i2]);
+    if (!hasComputedSub) {
+      for (let i2 = 0; i2 < directCount; i2++) {
+        safeInvoke(pendingQueue[i2]);
       }
-    }
-    for (let i2 = 0; i2 < directCount; i2++) {
-      if (!pendingQueue[i2]._c) {
-        if (!pendingSet.has(pendingQueue[i2])) {
-          safeInvoke(pendingQueue[i2]);
+    } else {
+      for (let i2 = 0; i2 < directCount; i2++) {
+        if (pendingQueue[i2]._c) {
+          propagateDirty(pendingQueue[i2]);
+        }
+      }
+      for (let i2 = 0; i2 < directCount; i2++) {
+        const sub = pendingQueue[i2];
+        if (!sub._c && !pendingSet.has(sub)) {
+          pendingSet.add(sub);
+          safeInvoke(sub);
         }
       }
     }
     let i = directCount;
     while (i < pendingQueue.length) {
+      if (i - directCount >= maxDrainIterations) {
+        if (typeof console !== "undefined") {
+          console.error(
+            `[SibuJS] Notification queue exceeded ${maxDrainIterations} iterations \u2014 likely an effect that writes to a signal it reads. Breaking to prevent infinite loop.`
+          );
+        }
+        break;
+      }
       safeInvoke(pendingQueue[i]);
       i++;
     }
   } finally {
-    pendingQueue.length = 0;
-    pendingSet.clear();
     notifyDepth--;
+    if (notifyDepth === 0) {
+      pendingQueue.length = 0;
+      pendingSet.clear();
+    }
   }
 }
 function cleanup(subscriber) {
@@ -286,7 +327,9 @@ function cleanup(subscriber) {
     if (subs) {
       subs.delete(subscriber);
       if (singleDep.__f === subscriber) {
-        singleDep.__f = void 0;
+        singleDep.__f = subs.size === 1 ? subs.values().next().value : void 0;
+      } else if (subs.size === 1 && singleDep.__f === void 0) {
+        singleDep.__f = subs.values().next().value;
       }
     }
     sub._dep = void 0;
@@ -299,7 +342,9 @@ function cleanup(subscriber) {
     if (subs) {
       subs.delete(subscriber);
       if (signal2.__f === subscriber) {
-        signal2.__f = void 0;
+        signal2.__f = subs.size === 1 ? subs.values().next().value : void 0;
+      } else if (subs.size === 1 && signal2.__f === void 0) {
+        signal2.__f = subs.values().next().value;
       }
     }
   }
@@ -310,6 +355,7 @@ function cleanup(subscriber) {
 function derived(getter, options) {
   devAssert(typeof getter === "function", "derived: argument must be a getter function.");
   const debugName = options?.name;
+  const equals = options?.equals;
   const cs = {};
   cs._d = false;
   cs._g = getter;
@@ -320,25 +366,56 @@ function derived(getter, options) {
   markDirty._c = 1;
   markDirty._sig = cs;
   track(() => {
-    cs._d = false;
-    cs._v = getter();
+    let threw = true;
+    try {
+      cs._v = getter();
+      cs._d = false;
+      threw = false;
+    } finally {
+      if (threw) cs._d = true;
+    }
   }, markDirty);
   const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  let evaluating = false;
   function computedGetter() {
+    if (evaluating) {
+      throw new Error(
+        `[SibuJS] Circular dependency detected in derived${debugName ? ` "${debugName}"` : ""}. A derived signal cannot read itself (directly or through a chain).`
+      );
+    }
     if (trackingSuspended) {
       if (cs._d) {
-        cs._d = false;
-        cs._v = getter();
+        evaluating = true;
+        let threw = true;
+        try {
+          retrack(() => {
+            cs._v = getter();
+            cs._d = false;
+            threw = false;
+          }, markDirty);
+        } finally {
+          evaluating = false;
+          if (threw) cs._d = true;
+        }
       }
       return cs._v;
     }
     recordDependency(cs);
     if (cs._d) {
       const oldValue = cs._v;
-      track(() => {
-        cs._d = false;
-        cs._v = getter();
-      }, markDirty);
+      evaluating = true;
+      let threw = true;
+      try {
+        retrack(() => {
+          const next = getter();
+          cs._v = equals && cs._v !== void 0 ? equals(cs._v, next) ? cs._v : next : next;
+          cs._d = false;
+          threw = false;
+        }, markDirty);
+      } finally {
+        evaluating = false;
+        if (threw) cs._d = true;
+      }
       if (hook && oldValue !== cs._v) {
         hook.emit("computed:update", { signal: cs, oldValue, newValue: cs._v });
       }
@@ -477,7 +554,7 @@ function bindField(field, extras) {
     blur: () => field.touch()
   };
   const { on: extraOn, value: _ignoreValue, ...restExtras } = extras ?? {};
-  const mergedOn = extraOn && typeof extraOn === "object" ? { ...fieldOn, ...extraOn } : fieldOn;
+  const mergedOn = extraOn && typeof extraOn === "object" ? { ...extraOn, ...fieldOn } : fieldOn;
   return {
     value: field.value,
     on: mergedOn,
@@ -502,9 +579,18 @@ function form(config) {
       }
       return null;
     });
+    const wrappedSet = (next) => {
+      setValue(next);
+      setManualErrors((prev) => {
+        if (!(name in prev) || prev[name] == null) return prev;
+        const copy = { ...prev };
+        copy[name] = null;
+        return copy;
+      });
+    };
     fieldMap[name] = {
       value,
-      set: setValue,
+      set: wrappedSet,
       error,
       touched: isTouched,
       touch: () => setTouched(true),
@@ -548,14 +634,23 @@ function form(config) {
     }
     return result;
   });
+  const [submitting, setSubmitting] = signal(false);
   function handleSubmit(onSubmit) {
     return (e) => {
       if (e) e.preventDefault();
+      if (submitting()) return;
       for (const field of Object.values(fieldMap)) {
         field.touch();
       }
       if (isValid()) {
-        onSubmit(values());
+        const result = onSubmit(values());
+        if (result && typeof result.then === "function") {
+          setSubmitting(true);
+          result.then(
+            () => setSubmitting(false),
+            () => setSubmitting(false)
+          );
+        }
       }
     };
   }
@@ -572,6 +667,7 @@ function form(config) {
     errors,
     isValid,
     isDirty,
+    submitting,
     touched: touchedState,
     values,
     handleSubmit,
@@ -615,10 +711,90 @@ function formAction(fn) {
   return { run, pending, error, result, reset, onSubmit };
 }
 
+// src/core/rendering/dispose.ts
+var elementDisposers = /* @__PURE__ */ new WeakMap();
+var _isDev4 = isDev();
+var activeBindingCount = 0;
+function registerDisposer(node, teardown) {
+  let disposers = elementDisposers.get(node);
+  if (!disposers) {
+    disposers = [];
+    elementDisposers.set(node, disposers);
+  }
+  disposers.push(teardown);
+  if (_isDev4) activeBindingCount++;
+}
+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/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
@@ -628,26 +804,86 @@ 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;
   const subscriber = () => {
-    cleanupHandle();
-    cleanupHandle = track(wrappedFn, subscriber);
+    if (running) {
+      if (_g2.__SIBU_DEV_WARN__ !== false && typeof console !== "undefined") {
+        console.warn(
+          "[SibuJS] effect re-entered itself while running \u2014 the triggering update will be ignored. Wrap mutual writes in `batch()` or split the effect to avoid this."
+        );
+      }
+      return;
+    }
+    running = true;
+    try {
+      runUserCleanups();
+      cleanupHandle();
+      cleanupHandle = track(wrappedFn, subscriber);
+    } finally {
+      running = false;
+    }
   };
-  cleanupHandle = track(wrappedFn, subscriber);
+  running = true;
+  try {
+    cleanupHandle = track(wrappedFn, subscriber);
+  } finally {
+    running = 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);
+      }
+    }
   };
 }
 
@@ -668,9 +904,9 @@ function VirtualList(props) {
   content.style.right = "0";
   spacer.appendChild(content);
   container.appendChild(spacer);
-  container.addEventListener("scroll", () => {
-    setScrollTop(container.scrollTop);
-  });
+  const onScroll = () => setScrollTop(container.scrollTop);
+  container.addEventListener("scroll", onScroll);
+  registerDisposer(container, () => container.removeEventListener("scroll", onScroll));
   const update = () => {
     const items = props.items();
     const totalHeight = items.length * props.itemHeight;
@@ -699,6 +935,7 @@ function intersection(options) {
   let observer = null;
   let currentElement = null;
   function observe(element) {
+    if (typeof IntersectionObserver === "undefined") return;
     unobserve();
     currentElement = element;
     observer = new IntersectionObserver((entries) => {
@@ -726,6 +963,11 @@ function intersection(options) {
   };
 }
 function lazyLoad(element, loader, options) {
+  if (typeof IntersectionObserver === "undefined") {
+    loader();
+    return () => {
+    };
+  }
   const observer = new IntersectionObserver((entries) => {
     for (const entry of entries) {
       if (entry.isIntersecting) {
@@ -778,20 +1020,65 @@ function inputMask(options) {
     }
     return raw;
   }
+  function isSlot(c) {
+    return c === "9" || c === "A" || c === "*";
+  }
+  function buildStripRegex() {
+    const hasDigit = options.pattern.includes("9");
+    const hasLetter = options.pattern.includes("A");
+    const hasAny = options.pattern.includes("*");
+    if (hasAny) {
+      const literals = /* @__PURE__ */ new Set();
+      for (const c of options.pattern) {
+        if (!isSlot(c)) literals.add(c.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+      }
+      return literals.size > 0 ? new RegExp(`[${Array.from(literals).join("")}]`, "g") : /(?!)/g;
+    }
+    if (hasDigit && hasLetter) return /[^a-zA-Z0-9]/g;
+    if (hasDigit) return /[^0-9]/g;
+    if (hasLetter) return /[^a-zA-Z]/g;
+    return /[^a-zA-Z0-9]/g;
+  }
+  const stripRegex = buildStripRegex();
+  const rawCharTest = options.pattern.includes("*") ? () => true : (c) => /[a-zA-Z0-9]/.test(c);
   function bind(input) {
-    input.addEventListener("input", () => {
-      const raw = input.value.replace(/[^a-zA-Z0-9]/g, "");
+    const onInput = () => {
+      const cursorBefore = input.selectionStart ?? input.value.length;
+      const oldValue = input.value;
+      const raw = oldValue.replace(stripRegex, "");
       const masked = applyMask(raw);
       setValue(masked);
       setRawValue(extractRaw(masked));
       input.value = masked;
-    });
-    input.addEventListener("focus", () => {
+      let rawBefore = 0;
+      for (let i = 0; i < cursorBefore && i < oldValue.length; i++) {
+        if (rawCharTest(oldValue[i])) rawBefore++;
+      }
+      let newCursor = 0;
+      let counted = 0;
+      for (; newCursor < masked.length; newCursor++) {
+        if (newCursor < options.pattern.length && isSlot(options.pattern[newCursor])) {
+          counted++;
+          if (counted >= rawBefore) {
+            newCursor++;
+            break;
+          }
+        }
+      }
+      input.setSelectionRange(newCursor, newCursor);
+    };
+    const onFocus = () => {
       if (!input.value) {
         const display = options.pattern.replace(/9/g, placeholder).replace(/A/g, placeholder).replace(/\*/g, placeholder);
         input.placeholder = display;
       }
-    });
+    };
+    input.addEventListener("input", onInput);
+    input.addEventListener("focus", onFocus);
+    return () => {
+      input.removeEventListener("input", onInput);
+      input.removeEventListener("focus", onFocus);
+    };
   }
   return { value, rawValue, bind };
 }
@@ -833,8 +1120,20 @@ function focus() {
   let currentElement = null;
   function bind(element) {
     currentElement = element;
-    element.addEventListener("focus", () => setIsFocused(true));
-    element.addEventListener("blur", () => setIsFocused(false));
+    const onFocus = () => setIsFocused(true);
+    const onBlur = () => setIsFocused(false);
+    element.addEventListener("focus", onFocus);
+    element.addEventListener("blur", onBlur);
+    let disposed = false;
+    const dispose2 = () => {
+      if (disposed) return;
+      disposed = true;
+      element.removeEventListener("focus", onFocus);
+      element.removeEventListener("blur", onBlur);
+      if (currentElement === element) currentElement = null;
+    };
+    registerDisposer(element, dispose2);
+    return dispose2;
   }
   function focus2() {
     currentElement?.focus();
@@ -849,12 +1148,39 @@ function FocusTrap(nodes, options = {}) {
   container.setAttribute("data-sibu-focus-trap", "true");
   container.appendChild(nodes);
   const previouslyFocused = document.activeElement;
-  container.addEventListener("keydown", (e) => {
+  const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]';
+  function isEffectivelyVisible(el) {
+    let node = el;
+    while (node) {
+      if (node.hasAttribute("inert")) return false;
+      if (node.getAttribute("aria-hidden") === "true") return false;
+      if (node.hidden) return false;
+      node = node.parentElement;
+    }
+    if (el.offsetParent === null && el.getClientRects().length === 0) return false;
+    return true;
+  }
+  function getFocusable() {
+    const raw = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+    const out = [];
+    for (const el of raw) {
+      if (el.hasAttribute("disabled")) continue;
+      if (el.getAttribute("aria-hidden") === "true") continue;
+      if (el.hasAttribute("inert")) continue;
+      const ce = el.getAttribute("contenteditable");
+      if (ce !== null && ce === "false") continue;
+      if (!isEffectivelyVisible(el)) continue;
+      out.push(el);
+    }
+    return out;
+  }
+  const onTrapKeydown = (e) => {
     if (e.key !== "Tab") return;
-    const focusable = container.querySelectorAll(
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    );
-    if (focusable.length === 0) return;
+    const focusable = getFocusable();
+    if (focusable.length === 0) {
+      e.preventDefault();
+      return;
+    }
     const first = focusable[0];
     const last = focusable[focusable.length - 1];
     if (e.shiftKey) {
@@ -868,33 +1194,36 @@ function FocusTrap(nodes, options = {}) {
         first.focus();
       }
     }
-  });
+  };
+  container.addEventListener("keydown", onTrapKeydown);
   if (options.autoFocus !== false) {
     queueMicrotask(() => {
-      const first = container.querySelector(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
+      const first = getFocusable()[0];
       first?.focus();
     });
   }
+  let trapObserver = null;
+  function restoreFocusAndCleanup() {
+    if (options.restoreFocus !== false) previouslyFocused?.focus();
+    container.removeEventListener("keydown", onTrapKeydown);
+    if (trapObserver) {
+      trapObserver.disconnect();
+      trapObserver = null;
+    }
+  }
   if (options.restoreFocus !== false) {
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        for (const removed of Array.from(mutation.removedNodes)) {
-          if (removed === container || removed.contains(container)) {
-            previouslyFocused?.focus();
-            observer.disconnect();
-            return;
-          }
-        }
+    trapObserver = new MutationObserver(() => {
+      if (!container.isConnected) {
+        restoreFocusAndCleanup();
       }
     });
     queueMicrotask(() => {
-      if (container.parentNode) {
-        observer.observe(container.parentNode, { childList: true });
+      if (container.isConnected) {
+        trapObserver.observe(container, { childList: true, subtree: true });
       }
     });
   }
+  registerDisposer(container, restoreFocusAndCleanup);
   return container;
 }
 function hotkey(combo, handler, options = {}) {
@@ -927,7 +1256,16 @@ function hotkey(combo, handler, options = {}) {
   document.addEventListener("keydown", listener);
   return () => document.removeEventListener("keydown", listener);
 }
-function announce(message, priority = "polite") {
+var announceQueues = {
+  polite: [],
+  assertive: []
+};
+var announceDraining = {
+  polite: false,
+  assertive: false
+};
+var ANNOUNCE_INTERVAL_MS = 150;
+function ensureLiveRegion(priority) {
   let region = document.getElementById(`sibu-announce-${priority}`);
   if (!region) {
     region = document.createElement("div");
@@ -938,11 +1276,33 @@ function announce(message, priority = "polite") {
     region.style.cssText = "position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;";
     document.body.appendChild(region);
   }
+  return region;
+}
+function drainAnnounceQueue(priority) {
+  if (announceDraining[priority]) return;
+  const queue = announceQueues[priority];
+  if (queue.length === 0) return;
+  announceDraining[priority] = true;
+  const region = ensureLiveRegion(priority);
+  const next = queue.shift();
   region.textContent = "";
   requestAnimationFrame(() => {
-    if (region) region.textContent = message;
+    if (!region.isConnected) {
+      announceDraining[priority] = false;
+      return;
+    }
+    region.textContent = next;
+    setTimeout(() => {
+      announceDraining[priority] = false;
+      drainAnnounceQueue(priority);
+    }, ANNOUNCE_INTERVAL_MS);
   });
 }
+function announce(message, priority = "polite") {
+  if (typeof document === "undefined") return;
+  announceQueues[priority].push(message);
+  drainAnnounceQueue(priority);
+}
 
 // src/core/rendering/createId.ts
 var idCounter = 0;
@@ -951,20 +1311,6 @@ function createId(prefix = "sibu") {
   return `${prefix}-${idCounter}`;
 }
 
-// src/core/rendering/dispose.ts
-var elementDisposers = /* @__PURE__ */ new WeakMap();
-var _isDev4 = isDev();
-var activeBindingCount = 0;
-function registerDisposer(node, teardown) {
-  let disposers = elementDisposers.get(node);
-  if (!disposers) {
-    disposers = [];
-    elementDisposers.set(node, disposers);
-  }
-  disposers.push(teardown);
-  if (_isDev4) activeBindingCount++;
-}
-
 // src/ui/a11yPrimitives.ts
 var DEFAULT_FOCUS_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
 function createFocusManager(container, options = {}) {
@@ -1050,22 +1396,22 @@ function createListbox(container, options = {}) {
     }
   }
   function select(value) {
+    const previous = selectedValue();
+    let nextSelectedSet;
     if (multiple) {
-      const current2 = selectedValue();
-      const set = new Set((current2 ?? "").split(",").filter(Boolean));
-      if (set.has(value)) set.delete(value);
-      else set.add(value);
-      setSelectedValue(Array.from(set).join(","));
+      nextSelectedSet = new Set((previous ?? "").split(",").filter(Boolean));
+      if (nextSelectedSet.has(value)) nextSelectedSet.delete(value);
+      else nextSelectedSet.add(value);
+      setSelectedValue(Array.from(nextSelectedSet).join(","));
     } else {
+      nextSelectedSet = /* @__PURE__ */ new Set([value]);
       setSelectedValue(value);
     }
     options.onSelect?.(value);
     const opts = getOptions();
-    const current = selectedValue();
-    const selected = new Set((current ?? "").split(",").filter(Boolean));
     for (const opt of opts) {
       const ov = opt.dataset.value ?? "";
-      opt.setAttribute("aria-selected", selected.has(ov) ? "true" : "false");
+      opt.setAttribute("aria-selected", nextSelectedSet.has(ov) ? "true" : "false");
     }
   }
   function moveActive(delta) {
@@ -1123,12 +1469,12 @@ function createListbox(container, options = {}) {
   }
   container.addEventListener("keydown", onKeyDown);
   container.addEventListener("click", onClick);
-  function dispose() {
+  function dispose2() {
     container.removeEventListener("keydown", onKeyDown);
     container.removeEventListener("click", onClick);
   }
-  registerDisposer(container, dispose);
-  return { activeValue, selectedValue, activeDescendantId, dispose };
+  registerDisposer(container, dispose2);
+  return { activeValue, selectedValue, activeDescendantId, dispose: dispose2 };
 }
 function createDialogAria(element, options = {}) {
   const titleId = options.labelledBy ?? createId("dialog-title");
@@ -1177,6 +1523,10 @@ function scopedStyle(css) {
     if (trimmed.startsWith("@") || trimmed.startsWith("from") || trimmed.startsWith("to") || /^\d+%$/.test(trimmed)) {
       return match;
     }
+    const pseudoIdx = trimmed.indexOf("::");
+    if (pseudoIdx >= 0) {
+      return `${trimmed.slice(0, pseudoIdx)}[${attr}]${trimmed.slice(pseudoIdx)}${delimiter}`;
+    }
     return `${trimmed}[${attr}]${delimiter}`;
   });
   if (typeof document !== "undefined") {
@@ -1212,22 +1562,49 @@ function removeScopedStyle(scopeId) {
 }
 
 // src/utils/sanitize.ts
+var SAFE_URL_PROTOCOLS = ["http:", "https:", "mailto:", "tel:", "ftp:"];
 function sanitizeUrl(url) {
   const trimmed = url.replace(/[\x00-\x20\x7f-\x9f]+/g, "").trim();
   if (!trimmed) return "";
   const lower = trimmed.toLowerCase();
-  if (lower.startsWith("javascript:") || lower.startsWith("data:") || lower.startsWith("vbscript:") || lower.startsWith("blob:")) {
-    return "";
+  let schemeEnd = -1;
+  for (let i = 0; i < lower.length; i++) {
+    const ch = lower.charCodeAt(i);
+    if (ch === 58) {
+      schemeEnd = i;
+      break;
+    }
+    if (ch === 47 || ch === 63 || ch === 35) break;
   }
+  if (schemeEnd === -1) return trimmed;
+  const scheme = lower.slice(0, schemeEnd + 1);
+  if (!/^[a-z][a-z0-9+.-]*:$/.test(scheme)) return trimmed;
+  if (SAFE_URL_PROTOCOLS.indexOf(scheme) === -1) return "";
   return trimmed;
 }
-var URL_ATTRIBUTES = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "cite", "poster", "background", "srcset"]);
+var URL_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "href",
+  "xlink:href",
+  "src",
+  "action",
+  "formaction",
+  "formtarget",
+  "cite",
+  "poster",
+  "background",
+  "srcset",
+  "ping",
+  "data"
+]);
 function isUrlAttribute(attr) {
   return URL_ATTRIBUTES.has(attr);
 }
 
 // src/reactivity/bindAttribute.ts
 var _isDev5 = isDev();
+function setProp(el, key, val) {
+  el[key] = val;
+}
 function isEventHandlerAttr(name) {
   if (name.length < 3) return false;
   const lower = name.toLowerCase();
@@ -1253,7 +1630,7 @@ function bindAttribute(el, attr, getter) {
     }
     if (typeof value === "boolean") {
       if (attr in el && (attr === "checked" || attr === "disabled" || attr === "selected")) {
-        el[attr] = value;
+        setProp(el, attr, value);
       } else if (value) {
         el.setAttribute(attr, "");
       } else {
@@ -1263,7 +1640,7 @@ function bindAttribute(el, attr, getter) {
     }
     const str = String(value);
     if ((attr === "value" || attr === "checked") && attr in el) {
-      el[attr] = attr === "checked" ? Boolean(value) : str;
+      setProp(el, attr, attr === "checked" ? Boolean(value) : str);
     } else {
       el.setAttribute(attr, isUrlAttribute(attr) ? sanitizeUrl(str) : str);
     }
@@ -1333,59 +1710,91 @@ function bindData(el, key, getter) {
 }
 
 // src/ui/dialog.ts
+var dialogStack = [];
+var globalListenerAttached = false;
+function __resetDialogStack() {
+  while (dialogStack.length > 0) dialogStack.pop();
+  if (typeof window !== "undefined" && globalListenerAttached) {
+    window.removeEventListener("keydown", handleGlobalKeydown);
+    globalListenerAttached = false;
+  }
+}
+function handleGlobalKeydown(event) {
+  if (event.key !== "Escape") return;
+  const top = dialogStack[dialogStack.length - 1];
+  if (top) top.close();
+}
+function ensureGlobalListener() {
+  if (typeof window === "undefined" || globalListenerAttached) return;
+  window.addEventListener("keydown", handleGlobalKeydown);
+  globalListenerAttached = true;
+}
+function removeGlobalListenerIfIdle() {
+  if (typeof window === "undefined") return;
+  if (!globalListenerAttached) return;
+  if (dialogStack.length > 0) return;
+  window.removeEventListener("keydown", handleGlobalKeydown);
+  globalListenerAttached = false;
+}
 function dialog() {
   const [isOpen, setIsOpen] = signal(false);
-  let listenerAttached = false;
-  function handleKeydown(event) {
-    if (event.key === "Escape") {
-      close();
-    }
+  const entry = { close: () => close() };
+  function pushOnStack() {
+    if (dialogStack.indexOf(entry) !== -1) return;
+    dialogStack.push(entry);
+    ensureGlobalListener();
+  }
+  function removeFromStack() {
+    const idx = dialogStack.indexOf(entry);
+    if (idx !== -1) dialogStack.splice(idx, 1);
+    removeGlobalListenerIfIdle();
   }
   function open() {
+    if (isOpen()) return;
     setIsOpen(true);
-    if (typeof window !== "undefined" && !listenerAttached) {
-      window.addEventListener("keydown", handleKeydown);
-      listenerAttached = true;
-    }
+    pushOnStack();
   }
   function close() {
-    setIsOpen(false);
-    if (typeof window !== "undefined" && listenerAttached) {
-      window.removeEventListener("keydown", handleKeydown);
-      listenerAttached = false;
+    if (!isOpen()) {
+      removeFromStack();
+      return;
     }
+    setIsOpen(false);
+    removeFromStack();
   }
   function toggle() {
-    if (isOpen()) {
-      close();
-    } else {
-      open();
-    }
+    if (isOpen()) close();
+    else open();
   }
-  return { open, close, isOpen, toggle };
+  function dispose2() {
+    removeFromStack();
+    setIsOpen(false);
+  }
+  return { open, close, isOpen, toggle, dispose: dispose2 };
 }
 
 // src/ui/toast.ts
-var toastCounter = 0;
 function toast(options) {
   const duration = options?.duration ?? 3e3;
   const maxToasts = options?.maxToasts ?? Infinity;
   const [toasts, setToasts] = signal([]);
   const timers = /* @__PURE__ */ new Map();
+  let toastCounter = 0;
   function show(message, type) {
     const id = `toast-${++toastCounter}`;
     const toast2 = { id, message, type };
+    const trimmedIds = [];
     setToasts((prev) => {
       const next = [...prev, toast2];
       if (next.length > maxToasts) {
         const removed = next.splice(0, next.length - maxToasts);
-        for (const r of removed) {
-          clearTimerForToast(r.id);
-        }
+        for (const r of removed) trimmedIds.push(r.id);
       }
       return next;
     });
-    if (duration > 0) {
+    for (const tid of trimmedIds) clearTimerForToast(tid);
+    const wasTrimmed = trimmedIds.indexOf(id) !== -1;
+    if (duration > 0 && !wasTrimmed) {
       const timer = setTimeout(() => {
         dismiss(id);
       }, duration);
@@ -1471,14 +1880,14 @@ function infiniteScroll(options) {
     },
     configurable: true
   });
-  function dispose() {
+  function dispose2() {
     disposed = true;
     if (observer) {
       observer.disconnect();
       observer = null;
     }
   }
-  return { sentinelRef: originalRef, loading, dispose };
+  return { sentinelRef: originalRef, loading, dispose: dispose2 };
 }
 
 // src/ui/pagination.ts
@@ -1553,21 +1962,21 @@ function eventBus() {
 // src/ui/lazyEffect.ts
 function lazyEffect(element, effectFn, options) {
   if (typeof IntersectionObserver === "undefined") {
-    const dispose2 = effect(effectFn);
-    return dispose2;
+    const dispose3 = effect(effectFn);
+    return dispose3;
   }
-  let dispose = null;
+  let dispose2 = null;
   let disposed = false;
   const observer = new IntersectionObserver(
     (entries) => {
       if (disposed) return;
       const entry = entries[0];
       if (!entry) return;
-      if (entry.isIntersecting && !dispose) {
-        dispose = effect(effectFn);
-      } else if (!entry.isIntersecting && dispose) {
-        dispose();
-        dispose = null;
+      if (entry.isIntersecting && !dispose2) {
+        dispose2 = effect(effectFn);
+      } else if (!entry.isIntersecting && dispose2) {
+        dispose2();
+        dispose2 = null;
       }
     },
     { threshold: 0, ...options }
@@ -1576,9 +1985,9 @@ function lazyEffect(element, effectFn, options) {
   return () => {
     disposed = true;
     observer.disconnect();
-    if (dispose) {
-      dispose();
-      dispose = null;
+    if (dispose2) {
+      dispose2();
+      dispose2 = null;
     }
   };
 }
@@ -1635,11 +2044,11 @@ function hover(target) {
   const onLeave = () => setHovered(false);
   target.addEventListener("pointerenter", onEnter);
   target.addEventListener("pointerleave", onLeave);
-  function dispose() {
+  function dispose2() {
     target.removeEventListener("pointerenter", onEnter);
     target.removeEventListener("pointerleave", onLeave);
   }
-  return { hovered, dispose };
+  return { hovered, dispose: dispose2 };
 }
 
 // src/ui/scrollLock.ts
@@ -1683,7 +2092,7 @@ function defineElement(name, component, options = {}) {
   class SibuElement extends HTMLElement {
     constructor() {
       super();
-      this._rendered = false;
+      this._rendered = null;
       if (options.shadow !== false) {
         this._root = this.attachShadow({ mode: options.mode || "open" });
       } else {
@@ -1697,25 +2106,23 @@ function defineElement(name, component, options = {}) {
       this._render();
     }
     disconnectedCallback() {
-      if (this._root instanceof ShadowRoot) {
-        this._root.innerHTML = "";
-      }
-      this._rendered = false;
+      this._teardown();
     }
     attributeChangedCallback() {
       if (this._rendered) {
         this._render();
       }
     }
+    _teardown() {
+      if (this._rendered) {
+        dispose(this._rendered);
+        this._rendered = null;
+      }
+      this._root.replaceChildren();
+    }
     _render() {
+      this._teardown();
       const props = this._getProps();
-      if (this._root instanceof ShadowRoot) {
-        this._root.innerHTML = "";
-      } else {
-        while (this._root.firstChild) {
-          this._root.removeChild(this._root.firstChild);
-        }
-      }
       if (options.styles && this._root instanceof ShadowRoot) {
         const styleEl = document.createElement("style");
         styleEl.textContent = options.styles;
@@ -1723,7 +2130,7 @@ function defineElement(name, component, options = {}) {
       }
       const el = component(props, this);
       this._root.appendChild(el);
-      this._rendered = true;
+      this._rendered = el;
     }
     _getProps() {
       const props = {};
@@ -1922,6 +2329,7 @@ function createGuard(validator) {
   FocusTrap,
   RenderProp,
   VirtualList,
+  __resetDialogStack,
   announce,
   aria,
   assertType,