sibujs 4.5.0 → 4.7.0

package/dist/ui.cjs

@@ -85,28 +85,6 @@ __export(ui_exports, {
 });
 module.exports = __toCommonJS(ui_exports);
 
-// src/core/dev.ts
-var DEV = typeof __SIBU_DEV__ !== "undefined" ? !!__SIBU_DEV__ : typeof globalThis.__SIBU_DEV__ !== "undefined" ? !!globalThis.__SIBU_DEV__ : (
-  // safe default: off in browser, on in test/dev Node
-  typeof process !== "undefined" && process.env?.NODE_ENV !== "production"
-);
-function devAssert(condition, message) {
-  if ((typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : DEV) && !condition) {
-    throw new Error(`[SibuJS] ${message}`);
-  }
-}
-function devWarnLazy(build) {
-  if (typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : DEV) {
-    const message = build();
-    if (message) console.warn(`[SibuJS] ${message}`);
-  }
-}
-function devWarn(message) {
-  if (typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : DEV) {
-    console.warn(`[SibuJS] ${message}`);
-  }
-}
-
 // src/core/errors.ts
 var ERROR_STATE_KEY = /* @__PURE__ */ Symbol.for("sibujs.runtime-errors.v1");
 function state() {
@@ -195,6 +173,28 @@ function reportError(error, context) {
   });
 }
 
+// src/core/dev.ts
+var DEV = typeof __SIBU_DEV__ !== "undefined" ? !!__SIBU_DEV__ : typeof globalThis.__SIBU_DEV__ !== "undefined" ? !!globalThis.__SIBU_DEV__ : (
+  // safe default: off in browser, on in test/dev Node
+  typeof process !== "undefined" && process.env?.NODE_ENV !== "production"
+);
+function devAssert(condition, message) {
+  if ((typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : DEV) && !condition) {
+    throw new Error(`[SibuJS] ${message}`);
+  }
+}
+function devWarnLazy(build) {
+  if (typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : DEV) {
+    const message = build();
+    if (message) console.warn(`[SibuJS] ${message}`);
+  }
+}
+function devWarn(message) {
+  if (typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : DEV) {
+    console.warn(`[SibuJS] ${message}`);
+  }
+}
+
 // src/core/rendering/dispose.ts
 var elementDisposers = /* @__PURE__ */ new WeakMap();
 var MAX_DRAIN_TEARDOWNS = 1e4;
@@ -206,6 +206,23 @@ function reportDrainRunaway(label, executed, remaining) {
   );
 }
 var activeBindingCount = 0;
+function resolveCapture(capture) {
+  let frame = capture;
+  while (frame?.closed) frame = frame.forwardTo;
+  return frame ?? null;
+}
+var registrationCaptures = [];
+function currentDisposerCapture() {
+  return resolveCapture(registrationCaptures[registrationCaptures.length - 1]);
+}
+function beginDisposerCapture(capture) {
+  if (capture === null && registrationCaptures.length === 0) return false;
+  registrationCaptures.push(resolveCapture(capture));
+  return true;
+}
+function endDisposerCapture() {
+  registrationCaptures.pop();
+}
 function registerDisposer(node, teardown) {
   let disposers = elementDisposers.get(node);
   if (!disposers) {
@@ -214,6 +231,61 @@ function registerDisposer(node, teardown) {
   }
   disposers.push(teardown);
   if (DEV) activeBindingCount++;
+  const capture = resolveCapture(registrationCaptures[registrationCaptures.length - 1]);
+  if (capture) capture.entries.push([node, teardown]);
+}
+function withDisposerRollback(build) {
+  const frame = { entries: [], closed: false };
+  const captured = frame.entries;
+  registrationCaptures.push(frame);
+  let result;
+  try {
+    result = build();
+  } catch (err) {
+    let executed = 0;
+    try {
+      while (captured.length > 0) {
+        if (executed >= MAX_DRAIN_TEARDOWNS) {
+          reportDrainRunaway("rollback", executed, captured.length);
+          break;
+        }
+        const [node, teardown] = captured.pop();
+        if (!unregisterDisposer(node, teardown)) continue;
+        executed++;
+        try {
+          teardown();
+        } catch (cleanupErr) {
+          reportError(cleanupErr, { phase: "cleanup", name: "disposer" });
+        }
+      }
+    } finally {
+      frame.closed = true;
+      captured.length = 0;
+      registrationCaptures.pop();
+    }
+    throw err;
+  }
+  frame.closed = true;
+  registrationCaptures.pop();
+  const parent = resolveCapture(registrationCaptures[registrationCaptures.length - 1]);
+  if (parent) {
+    for (const entry of captured) {
+      if (elementDisposers.get(entry[0])?.includes(entry[1])) parent.entries.push(entry);
+    }
+    frame.forwardTo = parent;
+  }
+  captured.length = 0;
+  return result;
+}
+function unregisterDisposer(node, teardown) {
+  const disposers = elementDisposers.get(node);
+  if (!disposers) return false;
+  const index = disposers.indexOf(teardown);
+  if (index === -1) return false;
+  disposers.splice(index, 1);
+  if (DEV) activeBindingCount--;
+  if (disposers.length === 0) elementDisposers.delete(node);
+  return true;
 }
 function dispose(node) {
   const stack = [node];
@@ -227,33 +299,34 @@ function dispose(node) {
     }
   }
   for (let i = order.length - 1; i >= 0; i--) {
-    const current = order[i];
-    if (elementDisposers.has(current)) {
-      let executed = 0;
-      let runaway = false;
-      while (!runaway) {
-        const pending = elementDisposers.get(current);
-        if (!pending || pending.length === 0) break;
-        const snapshot = pending.slice();
-        elementDisposers.delete(current);
-        if (DEV) activeBindingCount -= snapshot.length;
-        for (let i2 = 0; i2 < snapshot.length; i2++) {
-          if (executed >= MAX_DRAIN_TEARDOWNS) {
-            const rest = snapshot.slice(i2);
-            const added = elementDisposers.get(current);
-            elementDisposers.set(current, added ? rest.concat(added) : rest);
-            if (DEV) activeBindingCount += rest.length;
-            reportDrainRunaway("dispose", executed, rest.length + (added?.length ?? 0));
-            runaway = true;
-            break;
-          }
-          executed++;
-          try {
-            snapshot[i2]();
-          } catch (err) {
-            reportError(err, { phase: "cleanup", name: "disposer" });
-          }
-        }
+    disposeNodeOwn(order[i]);
+  }
+}
+function disposeNodeOwn(node) {
+  if (!elementDisposers.has(node)) return;
+  let executed = 0;
+  let runaway = false;
+  while (!runaway) {
+    const pending = elementDisposers.get(node);
+    if (!pending || pending.length === 0) break;
+    const snapshot = pending.slice();
+    elementDisposers.delete(node);
+    if (DEV) activeBindingCount -= snapshot.length;
+    for (let i = 0; i < snapshot.length; i++) {
+      if (executed >= MAX_DRAIN_TEARDOWNS) {
+        const rest = snapshot.slice(i);
+        const added = elementDisposers.get(node);
+        elementDisposers.set(node, added ? rest.concat(added) : rest);
+        if (DEV) activeBindingCount += rest.length;
+        reportDrainRunaway("dispose", executed, rest.length + (added?.length ?? 0));
+        runaway = true;
+        break;
+      }
+      executed++;
+      try {
+        snapshot[i]();
+      } catch (err) {
+        reportError(err, { phase: "cleanup", name: "disposer" });
       }
     }
   }
@@ -428,6 +501,7 @@ function retrack(effectFn, subscriber) {
   }
   currentSubscriber = subscriber;
   const sub = subscriber;
+  if (sub._cap === void 0) sub._cap = currentDisposerCapture();
   const epoch = ++subscriberEpochCounter;
   sub._epoch = epoch;
   sub._structDirty = false;
@@ -619,7 +693,12 @@ function drainQueue() {
       quarantined.add(sub);
       continue;
     }
-    safeInvoke(sub);
+    const pushed = beginDisposerCapture(sub._cap ?? null);
+    try {
+      safeInvoke(sub);
+    } finally {
+      if (pushed) endDisposerCapture();
+    }
   }
 }
 function drainNotificationQueue() {
@@ -755,7 +834,7 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _runtimeVersion = true ? "4.5.0" : "dev";
+var _runtimeVersion = true ? "4.7.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g = globalThis;
@@ -811,6 +890,14 @@ var getSubscriberCount2 = API.getSubscriberCount;
 var getSubscriberDeps2 = API.getSubscriberDeps;
 var forEachSubscriber2 = API.forEachSubscriber;
 
+// src/core/devtoolsHook.ts
+function emitDevtools(hook, event, payload) {
+  try {
+    hook.emit(event, payload);
+  } catch {
+  }
+}
+
 // src/core/signals/derived.ts
 function derived(getter, options) {
   devAssert(typeof getter === "function", "derived: argument must be a getter function.");
@@ -837,17 +924,17 @@ function derived(getter, options) {
     cs._d = false;
     cs._init = true;
   };
-  track2(() => {
-    let threw = true;
-    try {
+  try {
+    track2(() => {
       cs._v = getter();
       cs._d = false;
       cs._init = true;
-      threw = false;
-    } finally {
-      if (threw) cs._d = true;
-    }
-  }, markDirty);
+    }, markDirty);
+  } catch (err) {
+    disposed = true;
+    cleanup2(markDirty);
+    throw err;
+  }
   const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
   const validate = () => {
     if (!cs._d || disposed || pendingError !== void 0) return;
@@ -866,7 +953,7 @@ function derived(getter, options) {
       if (disposed) cleanup2(markDirty);
     }
     if (hook && !disposed && !Object.is(oldValue, cs._v)) {
-      hook.emit("computed:update", { signal: cs, oldValue, newValue: cs._v });
+      emitDevtools(hook, "computed:update", { signal: cs, oldValue, newValue: cs._v });
     }
   };
   cs._validate = validate;
@@ -917,173 +1004,10 @@ function derived(getter, options) {
       }
     }
   };
-  if (hook) hook.emit("computed:create", { signal: cs, name: debugName, getter: computedGetter });
+  if (hook) emitDevtools(hook, "computed:create", { signal: cs, name: debugName, getter: computedGetter });
   return computedGetter;
 }
 
-// src/core/ssr-context.ts
-var SSR_KEY = /* @__PURE__ */ Symbol.for("sibujs.ssr.v1");
-function detectSSRShared() {
-  let detected = null;
-  try {
-    if (typeof process !== "undefined" && process.versions && process.versions.node) {
-      let mod = null;
-      const getBuiltin = process.getBuiltinModule;
-      if (typeof getBuiltin === "function") {
-        mod = getBuiltin("node:async_hooks");
-      } else if (typeof require === "function") {
-        mod = require("async_hooks");
-      }
-      if (mod) detected = new mod.AsyncLocalStorage();
-    }
-  } catch {
-    detected = null;
-  }
-  return {
-    als: detected,
-    fallbackStore: { ssr: false, suspenseIdCounter: 0, locale: void 0 },
-    fallbackDepth: 0
-  };
-}
-var _shared = globalThis[SSR_KEY] ?? (globalThis[SSR_KEY] = detectSSRShared());
-var als = _shared.als;
-var fallbackStore = _shared.fallbackStore;
-_shared.fallbackDepth ?? (_shared.fallbackDepth = 0);
-function getSSRStore() {
-  if (als) {
-    const s = als.getStore();
-    if (s) return s;
-  }
-  return fallbackStore;
-}
-function isSSR() {
-  return getSSRStore().ssr;
-}
-
-// src/core/signals/effect.ts
-var _g = globalThis;
-var MAX_RERUNS = 100;
-function flushUserCleanups(ctx) {
-  const list = ctx.userCleanups;
-  if (list.length === 0) return;
-  ctx.userCleanups = [];
-  for (let i = list.length - 1; i >= 0; i--) {
-    try {
-      list[i]();
-    } catch (err) {
-      reportError(err, { phase: "cleanup" });
-    }
-  }
-}
-function drainReruns(ctx) {
-  let reruns = 1;
-  do {
-    ctx.rerunPending = false;
-    if (ctx.userCleanups.length > 0) flushUserCleanups(ctx);
-    retrack2(ctx.bodyFn, ctx.subscriber);
-  } while (ctx.rerunPending && ++reruns <= MAX_RERUNS);
-  if (ctx.rerunPending) {
-    ctx.rerunPending = false;
-    reportError(
-      new Error(
-        `effect re-requested itself ${MAX_RERUNS}+ times \u2014 likely a write-reads-self cycle. Breaking to prevent infinite loop.`
-      ),
-      { phase: "effect" }
-    );
-  }
-}
-function disposeEffect(ctx) {
-  if (ctx.disposed) return;
-  ctx.disposed = true;
-  const h = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-  if (h) {
-    try {
-      h.emit("effect:destroy", { effectFn: ctx.fn });
-    } catch {
-    }
-  }
-  try {
-    if (ctx.userCleanups.length > 0) flushUserCleanups(ctx);
-  } catch (err) {
-    if (typeof console !== "undefined") {
-      console.warn("[SibuJS effect] onCleanup threw during dispose:", err);
-    }
-  }
-  try {
-    cleanup2(ctx.subscriber);
-  } catch (err) {
-    if (typeof console !== "undefined") {
-      console.warn("[SibuJS effect] dispose threw:", err);
-    }
-  }
-}
-function effect(effectFn, options) {
-  devAssert(typeof effectFn === "function", "effect: argument must be a function.");
-  if (isSSR()) return () => {
-  };
-  const ctx = {
-    fn: effectFn,
-    onError: options?.onError,
-    userCleanups: [],
-    running: false,
-    rerunPending: false,
-    disposed: false,
-    onCleanup: null,
-    subscriber: null,
-    bodyFn: null
-  };
-  ctx.onCleanup = (fn) => {
-    ctx.userCleanups.push(fn);
-  };
-  const onErrorCaptured = ctx.onError;
-  ctx.bodyFn = onErrorCaptured ? () => {
-    try {
-      ctx.fn(ctx.onCleanup);
-    } catch (err) {
-      onErrorCaptured(err);
-    }
-  } : () => {
-    ctx.fn(ctx.onCleanup);
-  };
-  const sub = (() => {
-    if (ctx.disposed) return;
-    if (ctx.running) {
-      ctx.rerunPending = true;
-      return;
-    }
-    ctx.running = true;
-    try {
-      ctx.rerunPending = false;
-      if (ctx.userCleanups.length > 0) flushUserCleanups(ctx);
-      retrack2(ctx.bodyFn, sub);
-      if (ctx.rerunPending) drainReruns(ctx);
-    } finally {
-      ctx.running = false;
-      ctx.rerunPending = false;
-    }
-  });
-  sub.depsHead = null;
-  sub.depsTail = null;
-  sub._epoch = 0;
-  sub._structDirty = false;
-  sub._hasComputedDep = false;
-  sub._errorPhase = "effect";
-  sub._runEpoch = 0;
-  sub._runs = 0;
-  ctx.subscriber = sub;
-  ctx.running = true;
-  try {
-    retrack2(ctx.bodyFn, ctx.subscriber);
-    if (ctx.rerunPending) drainReruns(ctx);
-  } finally {
-    ctx.running = false;
-    ctx.rerunPending = false;
-  }
-  const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-  if (hook) hook.emit("effect:create", { effectFn });
-  return () => disposeEffect(ctx);
-}
-
 // src/reactivity/batch.ts
 var batchDepth = 0;
 var pendingSignals = /* @__PURE__ */ new Set();
@@ -1135,7 +1059,7 @@ var enqueueBatchedSignal = API2.enqueueBatchedSignal;
 var isBatching = API2.isBatching;
 
 // src/core/signals/signal.ts
-var _g2 = globalThis;
+var _g = globalThis;
 function signal(initial, options) {
   const state2 = {
     value: initial,
@@ -1166,8 +1090,8 @@ function signal(initial, options) {
       state2.value = newValue;
       state2.__v++;
       if (DEV) {
-        const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-        if (hook) hook.emit("signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
+        const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+        if (hook) emitDevtools(hook, "signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
       }
       if (!enqueueBatchedSignal(state2)) {
         notifySubscribers2(state2);
@@ -1180,8 +1104,8 @@ function signal(initial, options) {
       if (Object.is(newValue, prev)) return;
       state2.value = newValue;
       state2.__v++;
-      const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-      if (hook) hook.emit("signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
+      const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+      if (hook) emitDevtools(hook, "signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
       if (!enqueueBatchedSignal(state2)) {
         notifySubscribers2(state2);
       }
@@ -1198,11 +1122,82 @@ function signal(initial, options) {
       }
     };
   }
-  if (DEV) {
-    const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-    if (hook) hook.emit("signal:create", { signal: state2, name: debugName, getter: get, initial });
+  if (DEV) {
+    const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+    if (hook) emitDevtools(hook, "signal:create", { signal: state2, name: debugName, getter: get, initial });
+  }
+  return [get, set];
+}
+
+// src/core/ssr-context.ts
+var SSR_KEY = /* @__PURE__ */ Symbol.for("sibujs.ssr.v1");
+function detectSSRShared() {
+  let detected = null;
+  try {
+    if (typeof process !== "undefined" && process.versions && process.versions.node) {
+      let mod = null;
+      const getBuiltin = process.getBuiltinModule;
+      if (typeof getBuiltin === "function") {
+        mod = getBuiltin("node:async_hooks");
+      } else if (typeof require === "function") {
+        mod = require("async_hooks");
+      }
+      if (mod) detected = new mod.AsyncLocalStorage();
+    }
+  } catch {
+    detected = null;
+  }
+  return {
+    als: detected,
+    fallbackStore: { ssr: false, suspenseIdCounter: 0, locale: void 0 },
+    fallbackDepth: 0
+  };
+}
+var _shared = globalThis[SSR_KEY] ?? (globalThis[SSR_KEY] = detectSSRShared());
+var als = _shared.als;
+var fallbackStore = _shared.fallbackStore;
+_shared.fallbackDepth ?? (_shared.fallbackDepth = 0);
+function getSSRStore() {
+  if (als) {
+    const s = als.getStore();
+    if (s) return s;
+  }
+  return fallbackStore;
+}
+function getRequestStore() {
+  if (als) return als.getStore() ?? null;
+  return _shared.fallbackDepth > 0 ? fallbackStore : null;
+}
+function isSSR() {
+  return getSSRStore().ssr;
+}
+
+// src/reactivity/domBinding.ts
+function domBinding(commit, ownerNode) {
+  if (isSSR()) return () => {
+  };
+  return reactiveBinding2(commit, ownerNode);
+}
+
+// src/utils/adoptThenable.ts
+function adoptThenable(value) {
+  if (value === null || typeof value !== "object" && typeof value !== "function") return null;
+  let then;
+  try {
+    then = value.then;
+  } catch (error) {
+    return Promise.reject(error);
   }
-  return [get, set];
+  if (typeof then !== "function") return null;
+  return new Promise((resolve, reject) => {
+    queueMicrotask(() => {
+      try {
+        Reflect.apply(then, value, [resolve, reject]);
+      } catch (error) {
+        reject(error);
+      }
+    });
+  });
 }
 
 // src/ui/form.ts
@@ -1232,10 +1227,14 @@ function maxLength(max2, message) {
 }
 function matchesPattern(regex, message = "Invalid format") {
   return (value) => {
-    if (value && !regex.test(value)) {
-      return message;
+    if (!value) return null;
+    const savedLastIndex = regex.lastIndex;
+    regex.lastIndex = 0;
+    try {
+      return regex.test(value) ? null : message;
+    } finally {
+      regex.lastIndex = savedLastIndex;
     }
-    return null;
   };
 }
 function email(message = "Invalid email address") {
@@ -1284,13 +1283,13 @@ function bindField(field, extras) {
   const mergedOn = extraOn && typeof extraOn === "object" ? { ...extraOn, ...fieldOn } : fieldOn;
   const onElement = (el) => {
     if (el instanceof HTMLSelectElement && el.multiple) {
-      const stop = effect(() => {
+      const stop = domBinding(() => {
         const v = field.value();
         const selected = Array.isArray(v) ? v.map(String) : [];
         for (const opt of Array.from(el.options)) {
           opt.selected = selected.includes(opt.value);
         }
-      });
+      }, el);
       registerDisposer(el, stop);
     }
     if (typeof extraOnElement === "function") {
@@ -1310,6 +1309,7 @@ function form(config) {
   const fieldEntries = Object.entries(config);
   const fieldMap = {};
   const [manualErrors, setManualErrors] = signal({});
+  const fieldErrors = [];
   for (const [name, cfg] of fieldEntries) {
     const [value, setValue] = signal(cfg.initial);
     const [isTouched, setTouched] = signal(false);
@@ -1324,6 +1324,7 @@ function form(config) {
       }
       return null;
     });
+    fieldErrors.push(error);
     const wrappedSet = (next) => {
       setValue(next);
       setManualErrors((prev) => {
@@ -1400,12 +1401,22 @@ function form(config) {
         field.touch();
       }
       if (isValid()) {
-        const result = onSubmit(values());
-        if (result && typeof result.then === "function") {
+        const report = (error) => reportError(error, { phase: "async", name: "form.handleSubmit" });
+        let pending;
+        try {
+          pending = adoptThenable(onSubmit(values()));
+        } catch (error) {
+          report(error);
+          return;
+        }
+        if (pending) {
           setSubmitting(true);
-          result.then(
+          pending.then(
             () => setSubmitting(false),
-            () => setSubmitting(false)
+            (error) => {
+              setSubmitting(false);
+              report(error);
+            }
           );
         }
       }
@@ -1419,6 +1430,17 @@ function form(config) {
   function setError(field, message) {
     setManualErrors((prev) => ({ ...prev, [field]: message }));
   }
+  let disposed = false;
+  function dispose2() {
+    if (disposed) return;
+    disposed = true;
+    errors.dispose();
+    isValid.dispose();
+    isDirty.dispose();
+    touchedState.dispose();
+    values.dispose();
+    for (const error of fieldErrors) error.dispose();
+  }
   return {
     fields: fieldMap,
     errors,
@@ -1429,7 +1451,8 @@ function form(config) {
     values,
     handleSubmit,
     reset,
-    setError
+    setError,
+    dispose: dispose2
   };
 }
 
@@ -1508,7 +1531,7 @@ function VirtualList(props) {
       content.appendChild(itemEl);
     }
   };
-  registerDisposer(container, effect(update));
+  registerDisposer(container, domBinding(update, container));
   return container;
 }
 
@@ -1518,11 +1541,14 @@ function intersection(options) {
   const [ratio, setRatio] = signal(0);
   let observer = null;
   let currentElement = null;
+  let generation = 0;
   function observe(element) {
     if (typeof IntersectionObserver === "undefined") return;
     unobserve();
     currentElement = element;
+    const observation = ++generation;
     observer = new IntersectionObserver((entries) => {
+      if (observation !== generation) return;
       const entry = entries[0];
       if (entry) {
         setIsIntersecting(entry.isIntersecting);
@@ -1532,8 +1558,10 @@ function intersection(options) {
     observer.observe(element);
   }
   function unobserve() {
+    generation++;
     if (observer) {
       if (currentElement) observer.unobserve(currentElement);
+      observer.takeRecords();
       observer.disconnect();
       observer = null;
       currentElement = null;
@@ -1552,17 +1580,26 @@ function lazyLoad(element, loader, options) {
     return () => {
     };
   }
+  let done = false;
+  const stop = () => {
+    done = true;
+    observer.takeRecords();
+    observer.disconnect();
+  };
   const observer = new IntersectionObserver((entries) => {
+    if (done) return;
     for (const entry of entries) {
       if (entry.isIntersecting) {
+        stop();
         loader();
-        observer.disconnect();
         break;
       }
     }
   }, options);
   observer.observe(element);
-  return () => observer.disconnect();
+  return () => {
+    if (!done) stop();
+  };
 }
 
 // src/ui/inputMask.ts
@@ -1717,6 +1754,7 @@ function focus() {
     const dispose2 = () => {
       if (disposed) return;
       disposed = true;
+      unregisterDisposer(element, dispose2);
       element.removeEventListener("focus", onFocus);
       element.removeEventListener("blur", onBlur);
       if (currentElement === element) currentElement = null;
@@ -1785,14 +1823,19 @@ function FocusTrap(nodes, options = {}) {
     }
   };
   container.addEventListener("keydown", onTrapKeydown);
+  let disposed = false;
   if (options.autoFocus !== false) {
     queueMicrotask(() => {
+      if (disposed || !container.isConnected) return;
       const first = getFocusable()[0];
       first?.focus();
     });
   }
   let trapObserver = null;
   function restoreFocusAndCleanup() {
+    if (disposed) return;
+    disposed = true;
+    unregisterDisposer(container, restoreFocusAndCleanup);
     if (options.restoreFocus !== false) previouslyFocused?.focus();
     container.removeEventListener("keydown", onTrapKeydown);
     if (trapObserver) {
@@ -1807,29 +1850,45 @@ function FocusTrap(nodes, options = {}) {
       }
     });
     queueMicrotask(() => {
-      if (container.isConnected) {
-        trapObserver.observe(container, { childList: true, subtree: true });
-      }
+      const observer = trapObserver;
+      if (disposed || !container.isConnected || !observer) return;
+      observer.observe(container, { childList: true, subtree: true });
     });
   }
   registerDisposer(container, restoreFocusAndCleanup);
   return container;
 }
+function isApplePlatform() {
+  if (typeof navigator === "undefined") return false;
+  const nav = navigator;
+  return /mac|iphone|ipad|ipod/i.test(nav.userAgentData?.platform || nav.platform || "");
+}
 function hotkey(combo, handler, options = {}) {
   let key = combo;
   let needCtrl = options.ctrl ?? false;
   let needShift = options.shift ?? false;
   let needAlt = options.alt ?? false;
   let needMeta = options.meta ?? false;
-  if (combo.includes("+")) {
-    const parts = combo.toLowerCase().split("+");
+  if (combo === "+") {
+    key = "+";
+  } else if (combo.includes("+")) {
+    const literalPlus = combo.endsWith("++");
+    const parts = (literalPlus ? combo.slice(0, -2) : combo).toLowerCase().split("+");
+    if (literalPlus) parts.push("+");
     key = parts[parts.length - 1];
+    if (key === "") throw new Error(`hotkey("${combo}"): missing key`);
     for (let i = 0; i < parts.length - 1; i++) {
       const mod = parts[i];
       if (mod === "ctrl" || mod === "control") needCtrl = true;
       else if (mod === "shift") needShift = true;
-      else if (mod === "alt") needAlt = true;
+      else if (mod === "alt" || mod === "option") needAlt = true;
       else if (mod === "meta" || mod === "cmd" || mod === "command") needMeta = true;
+      else if (mod === "mod") {
+        if (isApplePlatform()) needMeta = true;
+        else needCtrl = true;
+      } else {
+        throw new Error(`hotkey("${combo}"): unknown modifier "${mod}"`);
+      }
     }
   }
   const listener = (e) => {
@@ -1895,6 +1954,11 @@ function announce(message, priority = "polite") {
 var COUNTER_KEY = /* @__PURE__ */ Symbol.for("sibujs.createId.v1");
 var _counter = globalThis[COUNTER_KEY] ?? (globalThis[COUNTER_KEY] = { n: 0 });
 function createId(prefix = "sibu") {
+  const request = getRequestStore();
+  if (request) {
+    request.idCounter = (request.idCounter ?? 0) + 1;
+    return `${prefix}-${request.idCounter}`;
+  }
   _counter.n++;
   return `${prefix}-${_counter.n}`;
 }
@@ -1954,22 +2018,43 @@ function createListbox(container, options = {}) {
   if (multiple) container.setAttribute("aria-multiselectable", "true");
   if (!container.hasAttribute("tabindex")) container.setAttribute("tabindex", "0");
   const [activeValue, setActiveValue] = signal(null);
+  const [selectedValues, setSelectedValues] = signal([]);
   const [selectedValue, setSelectedValue] = signal(null);
   const [activeDescendantId, setActiveDescendantId] = signal(null);
-  function stampIds() {
+  let activeValueRef = null;
+  let currentSelection = [];
+  function reconcileOptions() {
     const opts = Array.from(container.querySelectorAll(optionSelector));
+    const selectedSet = new Set(currentSelection);
+    let activeStillPresent = false;
+    const active = activeValueRef;
     for (const opt of opts) {
       if (!opt.id) opt.id = createId("listbox-option");
-      if (!opt.hasAttribute("aria-selected")) opt.setAttribute("aria-selected", "false");
+      const ov = opt.dataset.value;
+      if (!opt.hasAttribute("aria-selected")) {
+        opt.setAttribute("aria-selected", ov !== void 0 && selectedSet.has(ov) ? "true" : "false");
+      }
+      if (active !== null && ov === active) activeStillPresent = true;
     }
+    if (active !== null && !activeStillPresent) setActive(null, opts);
+    return opts;
   }
-  stampIds();
   function getOptions() {
-    return Array.from(container.querySelectorAll(optionSelector));
+    return reconcileOptions();
+  }
+  function isDisabled(opt) {
+    return opt.getAttribute("aria-disabled") === "true" || opt.hasAttribute("disabled");
   }
-  function setActive(value) {
+  function enabledOptions() {
+    return getOptions().filter((opt) => !isDisabled(opt) && opt.dataset.value !== void 0);
+  }
+  function optionByValue(value) {
+    return getOptions().find((opt) => opt.dataset.value === value);
+  }
+  function setActive(value, known) {
+    activeValueRef = value;
     setActiveValue(value);
-    const opts = getOptions();
+    const opts = known ?? getOptions();
     for (const opt of opts) {
       if (opt.dataset.value === value) {
         opt.setAttribute("data-highlighted", "");
@@ -1985,29 +2070,33 @@ function createListbox(container, options = {}) {
     }
   }
   function select(value) {
-    const previous = selectedValue();
-    let nextSelectedSet;
+    const target = optionByValue(value);
+    if (!target || isDisabled(target)) return;
+    const previous = selectedValues();
+    let next;
     if (multiple) {
-      nextSelectedSet = new Set((previous ?? "").split(",").filter(Boolean));
-      if (nextSelectedSet.has(value)) nextSelectedSet.delete(value);
-      else nextSelectedSet.add(value);
-      setSelectedValue(Array.from(nextSelectedSet).join(","));
+      next = previous.includes(value) ? previous.filter((v) => v !== value) : [...previous, value];
     } else {
-      nextSelectedSet = /* @__PURE__ */ new Set([value]);
-      setSelectedValue(value);
+      next = [value];
     }
+    currentSelection = next;
+    batch(() => {
+      setSelectedValues(next);
+      setSelectedValue(multiple ? next.join(",") : value);
+    });
     options.onSelect?.(value);
+    const nextSelectedSet = new Set(next);
     const opts = getOptions();
     for (const opt of opts) {
-      const ov = opt.dataset.value ?? "";
-      opt.setAttribute("aria-selected", nextSelectedSet.has(ov) ? "true" : "false");
+      const ov = opt.dataset.value;
+      opt.setAttribute("aria-selected", ov !== void 0 && nextSelectedSet.has(ov) ? "true" : "false");
     }
   }
   function moveActive(delta) {
-    const opts = getOptions();
+    const opts = enabledOptions();
     if (opts.length === 0) return;
-    const currentIdx = opts.findIndex((o) => o.dataset.value === activeValue());
-    let next = currentIdx + delta;
+    const currentIdx = opts.findIndex((o) => o.dataset.value === activeValueRef);
+    let next = currentIdx === -1 ? delta > 0 ? 0 : opts.length - 1 : currentIdx + delta;
     if (next < 0) next = opts.length - 1;
     if (next >= opts.length) next = 0;
     const nextValue = opts[next].dataset.value ?? null;
@@ -2028,13 +2117,13 @@ function createListbox(container, options = {}) {
         break;
       case "Home": {
         e.preventDefault();
-        const opts = getOptions();
+        const opts = enabledOptions();
         if (opts.length > 0) setActive(opts[0].dataset.value ?? null);
         break;
       }
       case "End": {
         e.preventDefault();
-        const opts = getOptions();
+        const opts = enabledOptions();
         if (opts.length > 0) setActive(opts[opts.length - 1].dataset.value ?? null);
         break;
       }
@@ -2049,7 +2138,7 @@ function createListbox(container, options = {}) {
   }
   function onClick(e) {
     const target = e.target.closest(optionSelector);
-    if (!target || !container.contains(target)) return;
+    if (!target || !container.contains(target) || isDisabled(target)) return;
     const value = target.dataset.value ?? null;
     if (value !== null) {
       setActive(value);
@@ -2058,12 +2147,26 @@ function createListbox(container, options = {}) {
   }
   container.addEventListener("keydown", onKeyDown);
   container.addEventListener("click", onClick);
+  reconcileOptions();
+  let observer = null;
+  if (typeof MutationObserver !== "undefined") {
+    observer = new MutationObserver(() => {
+      if (!disposed) reconcileOptions();
+    });
+    observer.observe(container, { childList: true, subtree: true });
+  }
+  let disposed = false;
   function dispose2() {
+    if (disposed) return;
+    disposed = true;
+    unregisterDisposer(container, dispose2);
+    observer?.disconnect();
+    observer = null;
     container.removeEventListener("keydown", onKeyDown);
     container.removeEventListener("click", onClick);
   }
   registerDisposer(container, dispose2);
-  return { activeValue, selectedValue, activeDescendantId, dispose: dispose2 };
+  return { activeValue, selectedValues, selectedValue, activeDescendantId, refresh: reconcileOptions, dispose: dispose2 };
 }
 function createDialogAria(element, options = {}) {
   const titleId = options.labelledBy ?? createId("dialog-title");
@@ -2686,6 +2789,8 @@ function removeGlobalListenerIfIdle() {
 function dialog() {
   const [isOpen, setIsOpen] = signal(false);
   const entry = { close: () => close() };
+  let opened = false;
+  let disposed = false;
   function pushOnStack() {
     if (dialogStack.indexOf(entry) !== -1) return;
     dialogStack.push(entry);
@@ -2697,23 +2802,27 @@ function dialog() {
     removeGlobalListenerIfIdle();
   }
   function open() {
-    if (isOpen()) return;
-    setIsOpen(true);
+    if (disposed || opened) return;
+    opened = true;
     pushOnStack();
+    setIsOpen(true);
   }
   function close() {
-    if (!isOpen()) {
+    if (!opened) {
       removeFromStack();
       return;
     }
-    setIsOpen(false);
+    opened = false;
     removeFromStack();
+    setIsOpen(false);
   }
   function toggle() {
-    if (isOpen()) close();
+    if (opened) close();
     else open();
   }
   function dispose2() {
+    disposed = true;
+    opened = false;
     removeFromStack();
     setIsOpen(false);
   }
@@ -2918,37 +3027,183 @@ function pagination(options) {
 function eventBus() {
   const listeners = /* @__PURE__ */ new Map();
   function on(event, handler) {
-    let set = listeners.get(event);
-    if (!set) {
-      set = /* @__PURE__ */ new Set();
-      listeners.set(event, set);
+    let subs = listeners.get(event);
+    if (!subs) {
+      subs = /* @__PURE__ */ new Map();
+      listeners.set(event, subs);
+    }
+    let subscription = subs.get(handler);
+    if (!subscription) {
+      subscription = { handler, active: true };
+      subs.set(handler, subscription);
     }
-    set.add(handler);
-    return () => off(event, handler);
+    const own = subscription;
+    return () => {
+      if (listeners.get(event)?.get(handler) !== own) return;
+      off(event, handler);
+    };
   }
   function emit(event, data) {
-    const set = listeners.get(event);
-    if (set) {
-      for (const handler of set) {
-        handler(data);
+    const subs = listeners.get(event);
+    if (!subs || subs.size === 0) return;
+    for (const subscription of Array.from(subs.values())) {
+      if (!subscription.active) continue;
+      try {
+        subscription.handler(data);
+      } catch (err) {
+        reportError(err, { phase: "event", name: `eventBus(${String(event)})` });
       }
     }
   }
   function off(event, handler) {
-    const set = listeners.get(event);
-    if (set) {
-      set.delete(handler);
-      if (set.size === 0) {
-        listeners.delete(event);
-      }
+    const subs = listeners.get(event);
+    if (!subs) return;
+    const subscription = subs.get(handler);
+    if (!subscription) return;
+    subscription.active = false;
+    subs.delete(handler);
+    if (subs.size === 0) {
+      listeners.delete(event);
     }
   }
   function clear() {
+    for (const subs of listeners.values()) {
+      for (const subscription of subs.values()) subscription.active = false;
+    }
     listeners.clear();
   }
   return { on, emit, off, clear };
 }
 
+// src/core/signals/effect.ts
+var _g2 = globalThis;
+var MAX_RERUNS = 100;
+function flushUserCleanups(ctx) {
+  const list = ctx.userCleanups;
+  if (list.length === 0) return;
+  ctx.userCleanups = [];
+  for (let i = list.length - 1; i >= 0; i--) {
+    try {
+      list[i]();
+    } catch (err) {
+      reportError(err, { phase: "cleanup" });
+    }
+  }
+}
+function drainReruns(ctx) {
+  let reruns = 1;
+  do {
+    ctx.rerunPending = false;
+    if (ctx.userCleanups.length > 0) flushUserCleanups(ctx);
+    retrack2(ctx.bodyFn, ctx.subscriber);
+  } while (ctx.rerunPending && ++reruns <= MAX_RERUNS);
+  if (ctx.rerunPending) {
+    ctx.rerunPending = false;
+    reportError(
+      new Error(
+        `effect re-requested itself ${MAX_RERUNS}+ times \u2014 likely a write-reads-self cycle. Breaking to prevent infinite loop.`
+      ),
+      { phase: "effect" }
+    );
+  }
+}
+function disposeEffect(ctx) {
+  if (ctx.disposed) return;
+  ctx.disposed = true;
+  const h = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  if (h) {
+    try {
+      h.emit("effect:destroy", { effectFn: ctx.fn });
+    } catch {
+    }
+  }
+  try {
+    if (ctx.userCleanups.length > 0) flushUserCleanups(ctx);
+  } catch (err) {
+    if (typeof console !== "undefined") {
+      console.warn("[SibuJS effect] onCleanup threw during dispose:", err);
+    }
+  }
+  try {
+    cleanup2(ctx.subscriber);
+  } catch (err) {
+    if (typeof console !== "undefined") {
+      console.warn("[SibuJS effect] dispose threw:", err);
+    }
+  }
+}
+function effect(effectFn, options) {
+  devAssert(typeof effectFn === "function", "effect: argument must be a function.");
+  if (isSSR()) return () => {
+  };
+  const ctx = {
+    fn: effectFn,
+    onError: options?.onError,
+    userCleanups: [],
+    running: false,
+    rerunPending: false,
+    disposed: false,
+    onCleanup: null,
+    subscriber: null,
+    bodyFn: null
+  };
+  ctx.onCleanup = (fn) => {
+    ctx.userCleanups.push(fn);
+  };
+  const onErrorCaptured = ctx.onError;
+  ctx.bodyFn = onErrorCaptured ? () => {
+    try {
+      ctx.fn(ctx.onCleanup);
+    } catch (err) {
+      onErrorCaptured(err);
+    }
+  } : () => {
+    ctx.fn(ctx.onCleanup);
+  };
+  const sub = (() => {
+    if (ctx.disposed) return;
+    if (ctx.running) {
+      ctx.rerunPending = true;
+      return;
+    }
+    ctx.running = true;
+    try {
+      ctx.rerunPending = false;
+      if (ctx.userCleanups.length > 0) flushUserCleanups(ctx);
+      retrack2(ctx.bodyFn, sub);
+      if (ctx.rerunPending) drainReruns(ctx);
+    } finally {
+      ctx.running = false;
+      ctx.rerunPending = false;
+    }
+  });
+  sub.depsHead = null;
+  sub.depsTail = null;
+  sub._epoch = 0;
+  sub._structDirty = false;
+  sub._hasComputedDep = false;
+  sub._errorPhase = "effect";
+  sub._runEpoch = 0;
+  sub._runs = 0;
+  ctx.subscriber = sub;
+  ctx.running = true;
+  try {
+    retrack2(ctx.bodyFn, ctx.subscriber);
+    if (ctx.rerunPending) drainReruns(ctx);
+  } catch (err) {
+    ctx.disposed = true;
+    if (ctx.userCleanups.length > 0) flushUserCleanups(ctx);
+    cleanup2(ctx.subscriber);
+    throw err;
+  } finally {
+    ctx.running = false;
+    ctx.rerunPending = false;
+  }
+  const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook) emitDevtools(hook, "effect:create", { effectFn });
+  return () => disposeEffect(ctx);
+}
+
 // src/ui/lazyEffect.ts
 function lazyEffect(element, effectFn, options) {
   if (typeof IntersectionObserver === "undefined") {
@@ -2984,25 +3239,59 @@ function lazyEffect(element, effectFn, options) {
 
 // src/ui/timers.ts
 function interval(fn, ms) {
-  let id = null;
+  let intervalId = null;
+  let resumeId = null;
   let running = false;
-  function start() {
+  let nextDue = 0;
+  let remaining = ms;
+  function tick() {
+    nextDue = Date.now() + ms;
+    fn();
+  }
+  function clearTimers() {
+    if (intervalId !== null) {
+      clearInterval(intervalId);
+      intervalId = null;
+    }
+    if (resumeId !== null) {
+      clearTimeout(resumeId);
+      resumeId = null;
+    }
+  }
+  function startRegular() {
+    nextDue = Date.now() + ms;
+    intervalId = setInterval(tick, ms);
+  }
+  function resume() {
     if (running) return;
-    id = setInterval(fn, ms);
     running = true;
+    if (remaining >= ms) {
+      startRegular();
+      return;
+    }
+    nextDue = Date.now() + remaining;
+    resumeId = setTimeout(() => {
+      resumeId = null;
+      startRegular();
+      fn();
+    }, remaining);
+  }
+  function pause() {
+    if (!running) return;
+    remaining = Math.min(ms, Math.max(0, nextDue - Date.now()));
+    clearTimers();
+    running = false;
   }
   function stop() {
-    if (id !== null) {
-      clearInterval(id);
-      id = null;
-    }
+    clearTimers();
     running = false;
+    remaining = ms;
   }
-  start();
+  resume();
   return {
     stop,
-    pause: stop,
-    resume: start,
+    pause,
+    resume,
     isRunning: () => running
   };
 }
@@ -3034,7 +3323,11 @@ function hover(target) {
   const onLeave = () => setHovered(false);
   target.addEventListener("pointerenter", onEnter);
   target.addEventListener("pointerleave", onLeave);
+  let disposed = false;
   function dispose2() {
+    if (disposed) return;
+    disposed = true;
+    unregisterDisposer(target, dispose2);
     target.removeEventListener("pointerenter", onEnter);
     target.removeEventListener("pointerleave", onLeave);
   }
@@ -3048,21 +3341,37 @@ var _lock = globalSingleton(/* @__PURE__ */ Symbol.for("sibujs.scrollLock.v1"),
   savedOverflow: null,
   savedPaddingRight: null
 }));
+function applyBodyLock() {
+  const body = document.body;
+  if (!body) throw new Error("[scrollLock] document.body is not available yet");
+  const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+  const savedOverflow = body.style.overflow;
+  const savedPaddingRight = body.style.paddingRight;
+  try {
+    body.style.overflow = "hidden";
+    if (scrollBarWidth > 0) {
+      body.style.paddingRight = `${scrollBarWidth}px`;
+    }
+  } catch (err) {
+    try {
+      body.style.overflow = savedOverflow;
+      body.style.paddingRight = savedPaddingRight;
+    } catch {
+    }
+    throw err;
+  }
+  _lock.savedOverflow = savedOverflow;
+  _lock.savedPaddingRight = savedPaddingRight;
+}
 function scrollLock() {
   let owned = false;
   function lock() {
     if (owned) return;
+    if (_lock.count === 0 && typeof document !== "undefined") {
+      applyBodyLock();
+    }
     owned = true;
     _lock.count++;
-    if (_lock.count !== 1 || typeof document === "undefined") return;
-    const body = document.body;
-    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
-    _lock.savedOverflow = body.style.overflow;
-    _lock.savedPaddingRight = body.style.paddingRight;
-    body.style.overflow = "hidden";
-    if (scrollBarWidth > 0) {
-      body.style.paddingRight = `${scrollBarWidth}px`;
-    }
   }
   function unlock() {
     if (!owned) return;
@@ -3080,13 +3389,33 @@ function scrollLock() {
 
 // src/platform/customElement.ts
 var SVG_NS2 = "http://www.w3.org/2000/svg";
+var MAX_RENDER_PASSES = 10;
+var ABANDONED_RENDER = /* @__PURE__ */ Symbol("sibujs.defineElement.abandonedRender");
 function defineElement(name, component, options = {}) {
   if (customElements.get(name)) return;
   const observed = options.observedAttributes || [];
   class SibuElement extends HTMLElement {
     constructor() {
       super();
-      this._rendered = null;
+      // Re-rendering is keyed on connection, not on a previous render: a first render
+      // that throws leaves nothing rendered, and the element must still re-render
+      // when a later attribute change fixes the input.
+      this._connected = false;
+      // A render in progress, and whether an attribute changed during it. The
+      // component may write its host's observed attributes while rendering; with
+      // the old subtree kept during the build, rendering again from inside the
+      // callback recursed until the stack overflowed.
+      this._rendering = false;
+      this._dirty = false;
+      // How many teardowns are draining. A host teardown may reconnect the element
+      // (and a nested disconnect may run inside it), and rendering the next
+      // generation from inside that drain would let the drain tear down what the
+      // new render registers. A counter, not a flag: a nested teardown returning
+      // must not declare the outer one finished.
+      this._teardownDepth = 0;
+      // Disconnects so far. A render compares it across its old-subtree teardown
+      // to detect a disconnect that happened inside it.
+      this._disconnects = 0;
       if (options.shadow !== false) {
         this._root = this.attachShadow({ mode: options.mode || "open" });
       } else {
@@ -3096,32 +3425,106 @@ function defineElement(name, component, options = {}) {
     static get observedAttributes() {
       return observed;
     }
+    /** Whether rendering must wait for work already in progress. */
+    get _busy() {
+      return this._rendering || this._teardownDepth > 0;
+    }
     connectedCallback() {
+      this._connected = true;
+      if (this._busy) {
+        this._dirty = true;
+        return;
+      }
       this._render();
     }
     disconnectedCallback() {
-      this._teardown();
+      this._connected = false;
+      this._disconnects++;
+      this._teardownDepth++;
+      try {
+        this._teardown();
+      } finally {
+        this._teardownDepth--;
+        if (this._teardownDepth === 0 && this._connected && this._dirty) {
+          this._dirty = false;
+          if (!this._rendering) this._render();
+        }
+      }
     }
-    attributeChangedCallback() {
-      if (this._rendered) {
-        this._render();
+    attributeChangedCallback(_name, oldValue, newValue) {
+      if (oldValue === newValue || !this._connected) return;
+      if (this._busy) {
+        this._dirty = true;
+        return;
       }
+      this._render();
     }
     _teardown() {
-      this._rendered = null;
       replaceChildrenSafely(this._root);
-    }
+      disposeNodeOwn(this);
+    }
+    /**
+     * Render as a transaction: build the replacement first, commit only if that
+     * succeeds. Tearing the current subtree down before calling the factory
+     * meant a throwing rerender (an invalid attribute, say) left the element
+     * blank with its live state already disposed. Now a failure keeps the
+     * working subtree, releases whatever the failed attempt registered, and is
+     * reported with this element as its node so an enclosing ErrorBoundary can
+     * claim it.
+     */
     _render() {
-      this._teardown();
+      this._rendering = true;
+      try {
+        let passes = 0;
+        do {
+          this._dirty = false;
+          if (++passes > MAX_RENDER_PASSES) {
+            reportError(
+              new Error(
+                `[SibuJS] defineElement(${name}): the component changed its own observed attributes on ${MAX_RENDER_PASSES} consecutive renders; stopped re-rendering.`
+              ),
+              { phase: "render", name: `defineElement(${name})`, node: this }
+            );
+            break;
+          }
+          this._renderOnce();
+        } while (this._dirty && this._connected);
+      } finally {
+        this._rendering = false;
+        this._dirty = false;
+      }
+    }
+    _renderOnce() {
       const props = this._getProps();
+      let el;
+      try {
+        el = withDisposerRollback(() => {
+          const built = component(props, this);
+          if (!this._connected) throw ABANDONED_RENDER;
+          return built;
+        });
+      } catch (err) {
+        if (err !== ABANDONED_RENDER) {
+          reportError(err, { phase: "render", name: `defineElement(${name})`, node: this });
+        }
+        return;
+      }
+      const next = [];
       if (options.styles && this._root instanceof ShadowRoot) {
         const styleEl = document.createElement("style");
         styleEl.textContent = options.styles;
-        this._root.appendChild(styleEl);
+        next.push(styleEl);
+      }
+      next.push(el);
+      const disconnects = this._disconnects;
+      for (const node of next) node.parentNode?.removeChild(node);
+      replaceChildrenSafely(this._root);
+      if (this._disconnects !== disconnects) {
+        for (const node of next) dispose(node);
+        if (this._connected) this._dirty = true;
+        return;
       }
-      const el = component(props, this);
-      this._root.appendChild(el);
-      this._rendered = el;
+      this._root.replaceChildren(...next);
     }
     _getProps() {
       const props = {};
@@ -3272,7 +3675,7 @@ function validateProps(props, schema) {
     const errors = [];
     for (const [key, def] of Object.entries(schema)) {
       const propDef = typeof def === "function" ? { type: def } : def;
-      if (result[key] == null && propDef.default !== void 0) {
+      if (result[key] === void 0 && propDef.default !== void 0) {
         result[key] = typeof propDef.default === "function" ? propDef.default() : propDef.default;
       }
       if (propDef.required && result[key] == null) {
@@ -3298,7 +3701,7 @@ ${errors.map((e) => `  - ${e}`).join("\n")}`);
   for (const [key, def] of Object.entries(schema)) {
     if (typeof def === "function") continue;
     const fallback = def.default;
-    if (result[key] == null && fallback !== void 0) {
+    if (result[key] === void 0 && fallback !== void 0) {
       result[key] = typeof fallback === "function" ? fallback() : fallback;
     }
   }