sibujs 3.4.0 → 4.0.0

package/dist/ui.cjs

@@ -107,8 +107,104 @@ function devWarn(message) {
   }
 }
 
+// src/core/errors.ts
+var ERROR_STATE_KEY = /* @__PURE__ */ Symbol.for("sibujs.runtime-errors.v1");
+function state() {
+  const g = globalThis;
+  const existing = g[ERROR_STATE_KEY];
+  if (existing) return existing;
+  const created = { handler: null, handlerDepth: 0 };
+  g[ERROR_STATE_KEY] = created;
+  return created;
+}
+function normalizeError(value) {
+  if (value instanceof Error) return value;
+  const message = typeof value === "string" ? value : `Non-Error value thrown: ${safeStringify(value)}`;
+  return new Error(message, { cause: value });
+}
+function safeStringify(value) {
+  if (typeof value === "symbol") return value.toString();
+  try {
+    return typeof value === "object" && value !== null ? JSON.stringify(value) : String(value);
+  } catch {
+    return Object.prototype.toString.call(value);
+  }
+}
+function describe(context) {
+  return context.name ? `${context.phase} "${context.name}"` : context.phase;
+}
+var REACTIVE_REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
+function untrackedRun(fn) {
+  const api = globalThis[REACTIVE_REGISTRY_KEY];
+  return api?.untracked ? api.untracked(fn) : fn();
+}
+var PROPAGATE_EVENT = "sibu:error-propagate";
+function claimedByBoundary(error, context) {
+  const raw = context.node;
+  if (!raw || typeof CustomEvent === "undefined") return false;
+  const target = resolveEventTarget(raw);
+  if (!target) return false;
+  try {
+    const event = new CustomEvent(PROPAGATE_EVENT, {
+      bubbles: true,
+      cancelable: true,
+      detail: { error, context }
+    });
+    return target.dispatchEvent(event) === false;
+  } catch {
+    return false;
+  }
+}
+function resolveEventTarget(node) {
+  const ELEMENT_NODE = 1;
+  let current = node;
+  while (current) {
+    if (current.nodeType === ELEMENT_NODE && typeof current.dispatchEvent === "function") {
+      return current;
+    }
+    current = current.parentNode;
+  }
+  const self = node;
+  return typeof self.dispatchEvent === "function" ? self : null;
+}
+function defaultReport(error, context) {
+  if (typeof console === "undefined") return;
+  console.error(`[SibuJS] Uncaught error during ${describe(context)}: ${error.message}`, error);
+}
+function reportError(error, context) {
+  const err = normalizeError(error);
+  untrackedRun(() => {
+    if (claimedByBoundary(err, context)) return;
+    const s = state();
+    const handler = s.handler;
+    if (handler && s.handlerDepth === 0) {
+      s.handlerDepth++;
+      try {
+        handler(error instanceof Error ? error : err, context);
+        return;
+      } catch (handlerError) {
+        if (typeof console !== "undefined") {
+          const detail = handlerError instanceof Error ? handlerError.message : String(handlerError);
+          console.error(`[SibuJS] runtime error handler itself threw: ${detail}`, handlerError);
+        }
+      } finally {
+        s.handlerDepth--;
+      }
+    }
+    defaultReport(err, context);
+  });
+}
+
 // src/core/rendering/dispose.ts
 var elementDisposers = /* @__PURE__ */ new WeakMap();
+var MAX_DRAIN_TEARDOWNS = 1e4;
+function reportDrainRunaway(label, executed, remaining) {
+  if (typeof console === "undefined") return;
+  console.error(
+    `[SibuJS ${label}] runaway cleanup: stopped after running ${executed} teardowns with ${remaining} still queued. Cleanup production did not stabilize before the teardown safety ceiling was reached \u2014 the remaining work was NOT run.`,
+    { executed, remaining }
+  );
+}
 var _isDev2 = isDev();
 var activeBindingCount = 0;
 function registerDisposer(node, teardown) {
@@ -133,43 +229,49 @@ function dispose(node) {
   }
   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 (_isDev2) activeBindingCount -= snapshot.length;
-      for (const d of snapshot) {
-        try {
-          d();
-        } catch (err) {
-          if (_isDev2 && 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();
+    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 (_isDev2) activeBindingCount -= moreSnapshot.length;
-        for (const d of moreSnapshot) {
+        if (_isDev2) 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 (_isDev2) activeBindingCount += rest.length;
+            reportDrainRunaway("dispose", executed, rest.length + (added?.length ?? 0));
+            runaway = true;
+            break;
+          }
+          executed++;
           try {
-            d();
+            snapshot[i2]();
           } catch (err) {
-            if (_isDev2 && typeof console !== "undefined") {
-              console.warn("[SibuJS] Disposer threw during cleanup:", err);
-            }
+            reportError(err, { phase: "cleanup", name: "disposer" });
           }
         }
       }
     }
   }
 }
+function replaceChildrenSafely(parent, ...next) {
+  for (let i = 0; i < next.length; i++) {
+    const node = next[i];
+    node.parentNode?.removeChild(node);
+  }
+  const current = Array.from(parent.childNodes);
+  for (let i = 0; i < current.length; i++) {
+    dispose(current[i]);
+  }
+  parent.replaceChildren(...next);
+}
 
 // src/reactivity/track-core.ts
-var _isDev3 = isDev();
 var POOL_MAX = 4096;
 var nodePool = [];
 function createNode() {
@@ -177,6 +279,7 @@ function createNode() {
     sig: null,
     sub: null,
     epoch: 0,
+    depVersion: 0,
     sigPrev: null,
     sigNext: null,
     subPrev: null,
@@ -261,8 +364,27 @@ function safeInvoke(sub) {
   try {
     sub();
   } catch (err) {
-    if (_isDev3) devWarn(`Subscriber threw during notification: ${err instanceof Error ? err.message : String(err)}`);
+    const s = sub;
+    reportError(err, { phase: s._errorPhase ?? "effect", name: s.__name, node: s._errorNode });
+  }
+}
+function depsChanged(sub) {
+  let node = sub.depsHead ?? null;
+  if (node === null) return true;
+  while (node !== null) {
+    const sig = node.sig;
+    if (sig === null) return true;
+    if (sig._d === true && sig._validate !== void 0) {
+      try {
+        sig._validate();
+      } catch {
+        return true;
+      }
+    }
+    if (node.depVersion !== sig.__v) return true;
+    node = node.subNext;
   }
+  return false;
 }
 var suspendDepth = 0;
 var trackingSuspended = false;
@@ -344,7 +466,7 @@ function track(effectFn, subscriber) {
   const sub = subscriber;
   return sub._dispose ?? (sub._dispose = () => cleanup(subscriber));
 }
-function reactiveBinding(commit) {
+function reactiveBinding(commit, ownerNode) {
   const run = () => {
     const s = subscriber;
     if (s._disposed || s._reentrant) return;
@@ -360,13 +482,17 @@ function reactiveBinding(commit) {
   subscriber.depsTail = null;
   subscriber._epoch = 0;
   subscriber._structDirty = false;
+  subscriber._hasComputedDep = false;
   subscriber._runEpoch = 0;
   subscriber._runs = 0;
   subscriber._reentrant = false;
   subscriber._disposed = false;
+  subscriber._errorPhase = "binding";
+  subscriber._errorNode = ownerNode;
   run();
   return subscriber._dispose ?? (subscriber._dispose = () => {
     subscriber._disposed = true;
+    subscriber._errorNode = void 0;
     cleanup(subscriber);
   });
 }
@@ -378,9 +504,12 @@ function recordDependency(signal2) {
   const active = sig.__activeNode ?? null;
   if (active !== null && active.sub === sub) {
     active.epoch = epoch;
+    active.depVersion = sig.__v ?? Number.NaN;
     return;
   }
+  if (sig._validate !== void 0) sub._hasComputedDep = true;
   const node = allocNode(signal2, sub, epoch);
+  node.depVersion = sig.__v ?? Number.NaN;
   node.prevActive = active;
   sig.__activeNode = node;
   linkSub(sub, node);
@@ -399,9 +528,10 @@ function cleanup(subscriber) {
     node = next;
   }
 }
-var maxSubscriberRepeats = 50;
+var maxSubscriberRepeats = 1e3;
 var maxDrainIterations = 1e6;
 var drainEpoch = 0;
+var quarantined = /* @__PURE__ */ new Set();
 function setMaxSubscriberRepeats(n) {
   const prev = maxSubscriberRepeats;
   if (Number.isFinite(n) && n > 0) maxSubscriberRepeats = Math.floor(n);
@@ -423,19 +553,21 @@ function tickRepeat(sub) {
   return s._runs > maxSubscriberRepeats;
 }
 function cycleError(sub) {
-  if (typeof console !== "undefined") {
-    const name = sub.__name ?? "<unnamed>";
-    console.error(
-      `[SibuJS] subscriber "${name}" fired more than ${maxSubscriberRepeats} times \u2014 likely a write-reads-self cycle between effects/signals. Breaking to prevent infinite loop.`
-    );
-  }
+  const name = sub.__name ?? "<unnamed>";
+  reportError(
+    new Error(
+      `subscriber "${name}" fired more than ${maxSubscriberRepeats} times \u2014 likely a write-reads-self cycle between effects/signals. This subscriber is quarantined for the rest of this update; other pending work still runs.`
+    ),
+    { phase: "scheduler", name }
+  );
 }
 function absoluteDrainError() {
-  if (typeof console !== "undefined") {
-    console.error(
-      `[SibuJS] Notification drain exceeded ${maxDrainIterations} iterations \u2014 absolute safety net tripped. Breaking to prevent infinite loop.`
-    );
-  }
+  reportError(
+    new Error(
+      `Notification drain exceeded ${maxDrainIterations} iterations \u2014 absolute safety net tripped. Breaking to prevent infinite loop.`
+    ),
+    { phase: "scheduler" }
+  );
 }
 function drainQueue() {
   let i = 0;
@@ -445,11 +577,14 @@ function drainQueue() {
       break;
     }
     const sub = pendingQueue[i++];
+    pendingSet.delete(sub);
+    if (quarantined.size > 0 && quarantined.has(sub)) continue;
+    if (sub._hasComputedDep === true && !depsChanged(sub)) continue;
     if (tickRepeat(sub)) {
       cycleError(sub);
-      break;
+      quarantined.add(sub);
+      continue;
     }
-    pendingSet.delete(sub);
     safeInvoke(sub);
   }
 }
@@ -464,6 +599,7 @@ function drainNotificationQueue() {
     if (notifyDepth === 0) {
       pendingQueue.length = 0;
       pendingSet.clear();
+      if (quarantined.size > 0) quarantined.clear();
     }
   }
 }
@@ -557,6 +693,7 @@ function notifySubscribers(signal2) {
     if (notifyDepth === 0) {
       pendingQueue.length = 0;
       pendingSet.clear();
+      if (quarantined.size > 0) quarantined.clear();
     }
   }
 }
@@ -583,14 +720,14 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _isDev4 = isDev();
-var _runtimeVersion = true ? "3.4.0" : "dev";
+var _isDev3 = isDev();
+var _runtimeVersion = true ? "4.0.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g = globalThis;
   const existing = g[REGISTRY_KEY];
   if (existing) {
-    if (_isDev4 && !existing.__dupWarned) {
+    if (_isDev3 && !existing.__dupWarned) {
       existing.__dupWarned = true;
       devWarn(
         `Multiple instances of the reactive runtime detected on this page (active: ${existing.version}, duplicate: ${_runtimeVersion}). Reactivity still works \u2014 all copies share the first one \u2014 but de-duplicate sibujs in your bundler (e.g. Vite optimizeDeps.exclude: ['sibujs'] or resolve.dedupe: ['sibujs']).`
@@ -675,6 +812,21 @@ function derived(getter, options) {
   }, markDirty);
   const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
   let evaluating = false;
+  const validate = () => {
+    if (!cs._d) return;
+    const oldValue = cs._v;
+    evaluating = true;
+    try {
+      retrack2(recompute, markDirty);
+      if (!Object.is(oldValue, cs._v)) cs.__v++;
+    } finally {
+      evaluating = false;
+    }
+    if (hook && !Object.is(oldValue, cs._v)) {
+      hook.emit("computed:update", { signal: cs, oldValue, newValue: cs._v });
+    }
+  };
+  cs._validate = validate;
   function computedGetter() {
     if (evaluating) {
       throw new Error(
@@ -682,32 +834,11 @@ function derived(getter, options) {
       );
     }
     if (isTrackingSuspended2()) {
-      if (cs._d) {
-        const prev = cs._v;
-        evaluating = true;
-        try {
-          retrack2(recompute, markDirty);
-          if (!Object.is(prev, cs._v)) cs.__v++;
-        } finally {
-          evaluating = false;
-        }
-      }
+      if (cs._d) validate();
       return cs._v;
     }
+    if (cs._d) validate();
     recordDependency2(cs);
-    if (cs._d) {
-      const oldValue = cs._v;
-      evaluating = true;
-      try {
-        retrack2(recompute, markDirty);
-        if (!Object.is(oldValue, cs._v)) cs.__v++;
-      } finally {
-        evaluating = false;
-      }
-      if (hook && oldValue !== cs._v) {
-        hook.emit("computed:update", { signal: cs, oldValue, newValue: cs._v });
-      }
-    }
     return cs._v;
   }
   if (debugName) {
@@ -729,20 +860,24 @@ function detectSSRShared() {
       const getBuiltin = process.getBuiltinModule;
       if (typeof getBuiltin === "function") {
         mod = getBuiltin("node:async_hooks");
-      } else {
-        const req = Function("return typeof require==='function'?require:null")();
-        if (req) mod = req("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 } };
+  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();
@@ -765,7 +900,7 @@ function flushUserCleanups(ctx) {
     try {
       list[i]();
     } catch (err) {
-      if (typeof console !== "undefined") console.warn("[SibuJS effect] onCleanup threw:", err);
+      reportError(err, { phase: "cleanup" });
     }
   }
 }
@@ -778,11 +913,12 @@ function drainReruns(ctx) {
   } while (ctx.rerunPending && ++reruns <= MAX_RERUNS);
   if (ctx.rerunPending) {
     ctx.rerunPending = false;
-    if (_g.__SIBU_DEV_WARN__ !== false && typeof console !== "undefined") {
-      console.error(
-        `[SibuJS] effect re-requested itself ${MAX_RERUNS}+ times \u2014 likely a write-reads-self cycle. Breaking to prevent infinite loop.`
-      );
-    }
+    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) {
@@ -859,6 +995,8 @@ function effect(effectFn, options) {
   sub.depsTail = null;
   sub._epoch = 0;
   sub._structDirty = false;
+  sub._hasComputedDep = false;
+  sub._errorPhase = "effect";
   sub._runEpoch = 0;
   sub._runs = 0;
   ctx.subscriber = sub;
@@ -927,70 +1065,72 @@ var isBatching = API2.isBatching;
 
 // src/core/signals/signal.ts
 var _g2 = globalThis;
-var _isDev5 = isDev();
+var _isDev4 = isDev();
 function signal(initial, options) {
-  const state = {
+  const state2 = {
     value: initial,
     __v: 0,
     __sc: 0,
     subsHead: null,
     subsTail: null,
     __activeNode: null,
-    __name: void 0
+    __name: void 0,
+    _d: false,
+    _validate: void 0
   };
-  const debugName = _isDev5 ? options?.name : void 0;
+  const debugName = _isDev4 ? options?.name : void 0;
   const equalsFn = options?.equals;
-  if (debugName) state.__name = debugName;
+  if (debugName) state2.__name = debugName;
   function get() {
-    recordDependency2(state);
-    return state.value;
+    recordDependency2(state2);
+    return state2.value;
   }
-  get.__signal = state;
+  get.__signal = state2;
   if (debugName) get.__name = debugName;
   let set;
   if (equalsFn) {
     set = (next) => {
-      const prev = state.value;
+      const prev = state2.value;
       const newValue = typeof next === "function" ? next(prev) : next;
       if (equalsFn(prev, newValue)) return;
-      state.value = newValue;
-      state.__v++;
-      if (_isDev5) {
+      state2.value = newValue;
+      state2.__v++;
+      if (_isDev4) {
         const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-        if (hook) hook.emit("signal:update", { signal: state, name: debugName, oldValue: prev, newValue });
+        if (hook) hook.emit("signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
       }
-      if (!enqueueBatchedSignal(state)) {
-        notifySubscribers2(state);
+      if (!enqueueBatchedSignal(state2)) {
+        notifySubscribers2(state2);
       }
     };
-  } else if (_isDev5) {
+  } else if (_isDev4) {
     set = (next) => {
-      const prev = state.value;
+      const prev = state2.value;
       const newValue = typeof next === "function" ? next(prev) : next;
       if (Object.is(newValue, prev)) return;
-      state.value = newValue;
-      state.__v++;
+      state2.value = newValue;
+      state2.__v++;
       const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-      if (hook) hook.emit("signal:update", { signal: state, name: debugName, oldValue: prev, newValue });
-      if (!enqueueBatchedSignal(state)) {
-        notifySubscribers2(state);
+      if (hook) hook.emit("signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
+      if (!enqueueBatchedSignal(state2)) {
+        notifySubscribers2(state2);
       }
     };
   } else {
     set = (next) => {
-      const prev = state.value;
+      const prev = state2.value;
       const newValue = typeof next === "function" ? next(prev) : next;
       if (Object.is(newValue, prev)) return;
-      state.value = newValue;
-      state.__v++;
-      if (!enqueueBatchedSignal(state)) {
-        notifySubscribers2(state);
+      state2.value = newValue;
+      state2.__v++;
+      if (!enqueueBatchedSignal(state2)) {
+        notifySubscribers2(state2);
       }
     };
   }
-  if (_isDev5) {
+  if (_isDev4) {
     const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-    if (hook) hook.emit("signal:create", { signal: state, name: debugName, getter: get, initial });
+    if (hook) hook.emit("signal:create", { signal: state2, name: debugName, getter: get, initial });
   }
   return [get, set];
 }
@@ -1088,6 +1228,8 @@ function bindField(field, extras) {
     }
   };
   return {
+    // The field's own getter, no longer widened to `unknown` — that widening is
+    // what forced every consumer to cast. (TYPE-010)
     value: field.value,
     on: mergedOn,
     onElement,
@@ -1891,21 +2033,169 @@ function sanitizeCSS(css) {
   sanitized = sanitized.replace(/behavior\s*:[^;]+;/gi, "/* behavior removed */");
   return sanitized;
 }
+function firstCompoundEnd(selector) {
+  let parens = 0;
+  let brackets = 0;
+  let quote = null;
+  for (let i = 0; i < selector.length; i++) {
+    const ch = selector[i];
+    if (quote) {
+      if (ch === "\\") i++;
+      else if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      continue;
+    }
+    if (ch === "\\") {
+      i++;
+      continue;
+    }
+    if (ch === "(") parens++;
+    else if (ch === ")") parens--;
+    else if (ch === "[") brackets++;
+    else if (ch === "]") brackets--;
+    if (parens > 0 || brackets > 0) continue;
+    if (ch === " " || ch === "	" || ch === "\n" || ch === "\r" || ch === "\f") return i;
+    if (ch === ">" || ch === "+" || ch === "~") return i;
+    if (ch === ":" && selector[i + 1] === ":") return i;
+  }
+  return selector.length;
+}
+function scopeSelector(selector, attr) {
+  const end = firstCompoundEnd(selector);
+  const selfForm = `${selector.slice(0, end)}[${attr}]${selector.slice(end)}`;
+  const descendantForm = `[${attr}] ${selector}`;
+  return `${descendantForm}, ${selfForm}`;
+}
+function skipNonCode(text, i) {
+  const ch = text[i];
+  if (ch === "\\") return i + 2;
+  if (ch === '"' || ch === "'") {
+    let j = i + 1;
+    while (j < text.length) {
+      if (text[j] === "\\") {
+        j += 2;
+        continue;
+      }
+      if (text[j] === ch) return j + 1;
+      j++;
+    }
+    return text.length;
+  }
+  if (ch === "/" && text[i + 1] === "*") {
+    const end = text.indexOf("*/", i + 2);
+    return end === -1 ? text.length : end + 2;
+  }
+  return -1;
+}
+function splitSelectorList(prelude) {
+  const parts = [];
+  let parens = 0;
+  let brackets = 0;
+  let start = 0;
+  for (let i = 0; i < prelude.length; i++) {
+    const skip = skipNonCode(prelude, i);
+    if (skip !== -1) {
+      i = skip - 1;
+      continue;
+    }
+    const ch = prelude[i];
+    if (ch === "(") parens++;
+    else if (ch === ")") parens--;
+    else if (ch === "[") brackets++;
+    else if (ch === "]") brackets--;
+    else if (ch === "," && parens === 0 && brackets === 0) {
+      parts.push(prelude.slice(start, i));
+      start = i + 1;
+    }
+  }
+  parts.push(prelude.slice(start));
+  return parts;
+}
+function findBlockEnd(css, openBrace) {
+  let depth = 0;
+  for (let i = openBrace; i < css.length; i++) {
+    const skip = skipNonCode(css, i);
+    if (skip !== -1) {
+      i = skip - 1;
+      continue;
+    }
+    const ch = css[i];
+    if (ch === "{") depth++;
+    else if (ch === "}") {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return css.length;
+}
+var NESTED_AT_RULE = /^@(media|supports|layer|container|scope|document)\b/i;
+function scopeStylesheet(css, attr) {
+  let out = "";
+  let preludeStart = 0;
+  let parens = 0;
+  let brackets = 0;
+  let i = 0;
+  while (i < css.length) {
+    const skip = skipNonCode(css, i);
+    if (skip !== -1) {
+      i = skip;
+      continue;
+    }
+    const ch = css[i];
+    if (ch === "(") {
+      parens++;
+      i++;
+      continue;
+    }
+    if (ch === ")") {
+      parens--;
+      i++;
+      continue;
+    }
+    if (ch === "[") {
+      brackets++;
+      i++;
+      continue;
+    }
+    if (ch === "]") {
+      brackets--;
+      i++;
+      continue;
+    }
+    if (ch === "{" && parens === 0 && brackets === 0) {
+      const prelude = css.slice(preludeStart, i);
+      const bodyEnd = findBlockEnd(css, i);
+      const body = css.slice(i + 1, bodyEnd);
+      const trimmed = prelude.trim();
+      const lead = prelude.slice(0, prelude.length - prelude.trimStart().length);
+      if (trimmed === "") {
+        out += `${prelude}{${body}}`;
+      } else if (trimmed.startsWith("@")) {
+        out += NESTED_AT_RULE.test(trimmed) ? `${prelude}{${scopeStylesheet(body, attr)}}` : `${prelude}{${body}}`;
+      } else {
+        const scoped = splitSelectorList(trimmed).map((part) => {
+          const selector = part.trim();
+          return selector ? scopeSelector(selector, attr) : part;
+        }).join(", ");
+        out += `${lead}${scoped}{${body}}`;
+      }
+      i = bodyEnd + 1;
+      preludeStart = i;
+      continue;
+    }
+    i++;
+  }
+  out += css.slice(preludeStart);
+  return out;
+}
 function scopedStyle(css) {
   const id = `sibu-s${_scope.n++}`;
   const attr = `data-${id}`;
   const safeCss = sanitizeCSS(css);
-  const scopedCSS = safeCss.replace(/([^\r\n,{}]+)(,(?=[^}]*{)|\s*{)/g, (match, selector, delimiter) => {
-    const trimmed = selector.trim();
-    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}`;
-  });
+  const scopedCSS = scopeStylesheet(safeCss, attr);
   if (typeof document !== "undefined") {
     const styleEl = document.createElement("style");
     styleEl.setAttribute("data-sibu-scope", id);
@@ -1921,18 +2211,10 @@ function withScopedStyle(css, component) {
       style = scopedStyle(css);
     }
     const el = component(props);
-    applyScopeRecursive(el, style.attr);
+    el.setAttribute(style.attr, "");
     return el;
   };
 }
-function applyScopeRecursive(element, attr) {
-  element.setAttribute(attr, "");
-  for (const child of Array.from(element.children)) {
-    if (child instanceof HTMLElement) {
-      applyScopeRecursive(child, attr);
-    }
-  }
-}
 function removeScopedStyle(scopeId) {
   const el = document.head.querySelector(`style[data-sibu-scope="${scopeId}"]`);
   if (el) el.remove();
@@ -1948,10 +2230,12 @@ function isEventHandlerAttr(name) {
   return lower[0] === "o" && lower[1] === "n" && lower.charCodeAt(2) >= 97 && lower.charCodeAt(2) <= 122;
 }
 var SAFE_URL_PROTOCOLS = ["http:", "https:", "mailto:", "tel:", "ftp:"];
+var OUTER_TRIM = /^[\x00-\x20\x7f-\x9f]+|[\x00-\x20\x7f-\x9f]+$/g;
 function sanitizeUrl(url) {
-  const trimmed = stripControlChars(url).trim();
-  if (!trimmed) return "";
-  const lower = trimmed.toLowerCase();
+  const probe = stripControlChars(url).trim();
+  if (!probe) return "";
+  const output = url.replace(OUTER_TRIM, "");
+  const lower = probe.toLowerCase();
   let schemeEnd = -1;
   for (let i = 0; i < lower.length; i++) {
     const ch = lower.charCodeAt(i);
@@ -1961,12 +2245,13 @@ function sanitizeUrl(url) {
     }
     if (ch === 47 || ch === 63 || ch === 35) break;
   }
-  if (schemeEnd === -1) return trimmed;
+  if (schemeEnd === -1) return output;
   const scheme = lower.slice(0, schemeEnd + 1);
-  if (!/^[a-z][a-z0-9+.-]*:$/.test(scheme)) return trimmed;
+  if (!/^[a-z][a-z0-9+.-]*:$/.test(scheme)) return output;
   if (SAFE_URL_PROTOCOLS.indexOf(scheme) === -1) return "";
-  return trimmed;
+  return output;
 }
+var SRCSET_DESCRIPTOR = /^\s+\d+(\.\d+)?[wx]$/;
 function sanitizeSrcset(value) {
   const parts = value.split(",");
   const out = [];
@@ -1975,12 +2260,91 @@ function sanitizeSrcset(value) {
     if (!part) continue;
     const m = part.match(/^(\S+)(\s+.+)?$/);
     if (!m) continue;
+    if (m[2] !== void 0 && !SRCSET_DESCRIPTOR.test(m[2])) continue;
     const safe = sanitizeUrl(m[1]);
     if (!safe) continue;
     out.push(m[2] ? `${safe}${m[2]}` : safe);
   }
   return out.join(", ");
 }
+var CSS_DANGER_GATE = /[(:@\\]/;
+function isCssWhitespace(ch) {
+  return ch === " " || ch === "	" || ch === "\n" || ch === "\r" || ch === "\f";
+}
+function isHexDigit(ch) {
+  return ch >= "0" && ch <= "9" || ch >= "a" && ch <= "f" || ch >= "A" && ch <= "F";
+}
+function decodeCssEscapes2(value) {
+  let out = "";
+  for (let i = 0; i < value.length; i++) {
+    const ch = value[i];
+    if (ch !== "\\") {
+      out += ch;
+      continue;
+    }
+    if (i + 1 >= value.length) break;
+    const next = value[i + 1];
+    if (next === "\n" || next === "\f") {
+      i += 1;
+      continue;
+    }
+    if (next === "\r") {
+      i += value[i + 2] === "\n" ? 2 : 1;
+      continue;
+    }
+    if (isHexDigit(next)) {
+      let hex = "";
+      let j = i + 1;
+      while (j < value.length && hex.length < 6 && isHexDigit(value[j])) {
+        hex += value[j];
+        j++;
+      }
+      if (j < value.length && isCssWhitespace(value[j])) {
+        j += value[j] === "\r" && value[j + 1] === "\n" ? 2 : 1;
+      }
+      const code = Number.parseInt(hex, 16);
+      const invalid = code === 0 || code > 1114111 || code >= 55296 && code <= 57343;
+      out += invalid ? "\uFFFD" : String.fromCodePoint(code);
+      i = j - 1;
+      continue;
+    }
+    out += next;
+    i += 1;
+  }
+  return out;
+}
+function sanitizeCSSValue(value) {
+  if (!CSS_DANGER_GATE.test(value)) return value;
+  const normalized = value.includes("\\") ? decodeCssEscapes2(value) : value;
+  const lower = normalized.toLowerCase().replace(/\s+/g, "");
+  if (lower.includes("url(") || lower.includes("expression(") || lower.includes("javascript:") || lower.includes("vbscript:") || lower.includes("-moz-binding") || lower.includes("behavior:") || lower.includes("@import") || lower.includes("image-set(") || lower.includes("filter:progid")) {
+    return "";
+  }
+  return value;
+}
+function sanitizeStyleAttribute(cssText) {
+  const input = String(cssText);
+  if (input.trim() === "") return "";
+  if (typeof document === "undefined") {
+    return sanitizeCSSValue(input) === "" ? "" : input;
+  }
+  const probe = document.createElement("div");
+  try {
+    probe.style.cssText = input;
+  } catch {
+    return "";
+  }
+  const declarations = [];
+  for (let i = 0; i < probe.style.length; i++) {
+    const property = probe.style[i];
+    const value = probe.style.getPropertyValue(property);
+    if (sanitizeCSSValue(value) === "") continue;
+    if (sanitizeCSSValue(`${property}:${value}`) === "") continue;
+    const priority = probe.style.getPropertyPriority(property);
+    declarations.push(`${property}: ${value}${priority ? ` !${priority}` : ""}`);
+  }
+  return declarations.join("; ");
+}
 var URL_ATTRIBUTES = /* @__PURE__ */ new Set([
   "href",
   "xlink:href",
@@ -1993,26 +2357,104 @@ var URL_ATTRIBUTES = /* @__PURE__ */ new Set([
   "background",
   "srcset",
   "ping",
-  "data"
+  "data",
+  // `<html manifest>` is a URL sink too. It was carried only by the SSR
+  // serializers' private copy of this set; folding that copy into this one would
+  // otherwise have silently dropped its coverage.
+  "manifest"
 ]);
+var HTML_CONTENT_ATTRIBUTES = /* @__PURE__ */ new Set(["srcdoc"]);
+function isHtmlContentAttribute(name) {
+  return HTML_CONTENT_ATTRIBUTES.has(name.toLowerCase());
+}
 function sanitizeAttributeString(attr, value) {
   const lower = attr.toLowerCase();
   if (lower === "srcset") return sanitizeSrcset(value);
   if (URL_ATTRIBUTES.has(lower)) return sanitizeUrl(value);
+  if (lower === "style") return sanitizeStyleAttribute(value);
   return value;
 }
 
-// src/reactivity/bindAttribute.ts
-var _isDev6 = isDev();
+// src/utils/setSafeAttribute.ts
+var _isDev5 = isDev();
+var HTML_NS = "http://www.w3.org/1999/xhtml";
+var SVG_NS = "http://www.w3.org/2000/svg";
+var XLINK_NS = "http://www.w3.org/1999/xlink";
+var XML_NS = "http://www.w3.org/XML/1998/namespace";
+var BOOLEAN_IDL_ATTRS = /* @__PURE__ */ new Set(["checked", "disabled", "selected"]);
+function isHtmlElement(el) {
+  return el.namespaceURI === null || el.namespaceURI === HTML_NS;
+}
 function setProp(el, key, val) {
   el[key] = val;
 }
-function bindAttribute(el, attr, getter) {
-  if (isEventHandlerAttr(attr)) {
-    if (_isDev6)
+function namespaceFor(el, name) {
+  if (el.namespaceURI !== SVG_NS) return null;
+  const lower = name.toLowerCase();
+  if (lower.startsWith("xlink:")) return XLINK_NS;
+  if (lower.startsWith("xml:")) return XML_NS;
+  return null;
+}
+function setSafeAttribute(el, name, value, options = {}) {
+  const ns = namespaceFor(el, name);
+  const localName = ns ? name.slice(name.indexOf(":") + 1) : name;
+  if (isEventHandlerAttr(name)) {
+    if (_isDev5) {
       devWarn(
-        `bindAttribute: refusing to bind event-handler attribute "${attr}". Use on:{ ${attr.slice(2)}: fn } instead.`
+        `${options.label ?? "setSafeAttribute"}: refusing to set event-handler attribute "${name}". Its value would be evaluated as JavaScript. Use on:{ ${name.slice(2)}: fn } instead.`
       );
+    }
+    if (ns) el.removeAttributeNS(ns, localName);
+    else el.removeAttribute(name);
+    return false;
+  }
+  if (value == null) {
+    if (ns) el.removeAttributeNS(ns, localName);
+    else el.removeAttribute(name);
+    return true;
+  }
+  if (isHtmlContentAttribute(name)) {
+    if (_isDev5) {
+      devWarn(
+        `${options.label ?? "setSafeAttribute"}: refusing to set "${name}". The browser parses this attribute as a nested HTML document, so a generic string value cannot be made safe \u2014 attribute escaping is undone before the parse. Build the frame's content another way.`
+      );
+    }
+    if (ns) el.removeAttributeNS(ns, localName);
+    else el.removeAttribute(name);
+    return false;
+  }
+  const html = isHtmlElement(el);
+  const idlName = html ? name.toLowerCase() : name;
+  if (typeof value === "boolean") {
+    if (html && BOOLEAN_IDL_ATTRS.has(idlName) && idlName in el) {
+      setProp(el, idlName, value);
+    } else if (value) {
+      if (ns) el.setAttributeNS(ns, name, "");
+      else el.setAttribute(name, "");
+    } else if (ns) {
+      el.removeAttributeNS(ns, localName);
+    } else {
+      el.removeAttribute(name);
+    }
+    return true;
+  }
+  const str = String(value);
+  if (options.syncValueProperty !== false && html && (idlName === "value" || idlName === "checked") && idlName in el) {
+    setProp(el, idlName, idlName === "checked" ? Boolean(value) : str);
+    return true;
+  }
+  const safe = sanitizeAttributeString(name, str);
+  const current = ns ? el.getAttributeNS(ns, localName) : el.getAttribute(name);
+  if (current === safe) return true;
+  if (ns) el.setAttributeNS(ns, name, safe);
+  else el.setAttribute(name, safe);
+  return true;
+}
+
+// src/reactivity/bindAttribute.ts
+function bindAttribute(el, attr, getter) {
+  if (isEventHandlerAttr(attr)) {
+    setSafeAttribute(el, attr, "", { label: `bindAttribute("${attr}")` });
     return () => {
     };
   }
@@ -2021,28 +2463,12 @@ function bindAttribute(el, attr, getter) {
     try {
       value = getter();
     } catch (err) {
-      if (_isDev6)
-        devWarn(`bindAttribute: getter for "${attr}" threw: ${err instanceof Error ? err.message : String(err)}`);
-      return;
-    }
-    if (typeof value === "boolean") {
-      if (attr in el && (attr === "checked" || attr === "disabled" || attr === "selected")) {
-        setProp(el, attr, value);
-      } else if (value) {
-        el.setAttribute(attr, "");
-      } else {
-        el.removeAttribute(attr);
-      }
+      reportError(err, { phase: "binding", name: `bindAttribute("${attr}")`, node: el });
       return;
     }
-    const str = String(value);
-    if ((attr === "value" || attr === "checked") && attr in el) {
-      setProp(el, attr, attr === "checked" ? Boolean(value) : str);
-    } else {
-      el.setAttribute(attr, sanitizeAttributeString(attr, str));
-    }
+    setSafeAttribute(el, attr, value, { label: `bindAttribute("${attr}")` });
   }
-  return reactiveBinding2(commit);
+  return reactiveBinding2(commit, el);
 }
 
 // src/ui/reactiveAttr.ts
@@ -2052,14 +2478,8 @@ function bindAttrs(el, attrs) {
     if (typeof value === "function") {
       const teardown = bindAttribute(el, attr, value);
       teardowns.push(teardown);
-    } else if (typeof value === "boolean") {
-      if (value) {
-        el.setAttribute(attr, "");
-      } else {
-        el.removeAttribute(attr);
-      }
     } else {
-      el.setAttribute(attr, String(value));
+      setSafeAttribute(el, attr, value, { label: "bindAttrs" });
     }
   }
   return () => {
@@ -2070,11 +2490,7 @@ function bindAttrs(el, attrs) {
 }
 function bindBoolAttr(el, attr, getter) {
   if (typeof getter !== "function") {
-    if (getter) {
-      el.setAttribute(attr, "");
-    } else {
-      el.removeAttribute(attr);
-    }
+    setSafeAttribute(el, attr, getter, { label: "bindBoolAttr" });
     return () => {
     };
   }
@@ -2086,11 +2502,7 @@ function bindBoolAttr(el, attr, getter) {
     } catch {
       return;
     }
-    if (value) {
-      el.setAttribute(attr, "");
-    } else {
-      el.removeAttribute(attr);
-    }
+    setSafeAttribute(el, attr, Boolean(value), { label: "bindBoolAttr" });
   }
   const teardown = track2(commit);
   return teardown;
@@ -2098,7 +2510,7 @@ function bindBoolAttr(el, attr, getter) {
 function bindData(el, key, getter) {
   const dataAttr = `data-${key}`;
   if (typeof getter !== "function") {
-    el.setAttribute(dataAttr, String(getter));
+    setSafeAttribute(el, dataAttr, getter, { label: "bindData" });
     return () => {
     };
   }
@@ -2238,31 +2650,58 @@ function infiniteScroll(options) {
   const sentinelRef = { current: null };
   let observer = null;
   let disposed = false;
+  let generation = 0;
+  function safeHasMore() {
+    try {
+      return hasMore();
+    } catch (err) {
+      reportError(err, { phase: "async", name: "infiniteScroll(hasMore)" });
+      return false;
+    }
+  }
+  function ownsAttachment(owner) {
+    return !disposed && generation === owner.generation && observer === owner.observer && _current === owner.sentinel;
+  }
   function createObserver() {
     if (typeof IntersectionObserver === "undefined") return;
-    observer = new IntersectionObserver(
+    let createdObserver;
+    createdObserver = new IntersectionObserver(
       (entries) => {
         const entry = entries[0];
-        if (entry?.isIntersecting && !loading() && hasMore() && !disposed) {
-          loadMore();
-        }
+        if (!entry?.isIntersecting) return;
+        const sentinel = _current;
+        if (!sentinel) return;
+        const owner = { generation, observer: createdObserver, sentinel };
+        if (!ownsAttachment(owner) || loading()) return;
+        const shouldLoad = safeHasMore();
+        if (!shouldLoad || !ownsAttachment(owner)) return;
+        void loadMore(owner);
       },
       { threshold }
     );
+    observer = createdObserver;
     if (sentinelRef.current) {
-      observer.observe(sentinelRef.current);
+      createdObserver.observe(sentinelRef.current);
     }
   }
-  async function loadMore() {
-    setLoading(true);
+  async function loadMore(owner) {
     try {
-      await onLoadMore();
-    } finally {
-      setLoading(false);
-      if (!disposed && observer && _current && hasMore()) {
-        observer.unobserve(_current);
-        observer.observe(_current);
+      setLoading(true);
+      if (!ownsAttachment(owner)) return;
+      try {
+        await onLoadMore();
+      } catch (err) {
+        reportError(err, { phase: "async", name: "infiniteScroll(onLoadMore)" });
       }
+      if (!ownsAttachment(owner)) return;
+      setLoading(false);
+      if (!ownsAttachment(owner)) return;
+      const shouldContinue = safeHasMore();
+      if (!shouldContinue || !ownsAttachment(owner)) return;
+      owner.observer.unobserve(owner.sentinel);
+      owner.observer.observe(owner.sentinel);
+    } catch (err) {
+      reportError(err, { phase: "async", name: "infiniteScroll(loadMore)" });
     }
   }
   const originalRef = sentinelRef;
@@ -2272,7 +2711,10 @@ function infiniteScroll(options) {
       return _current;
     },
     set(el) {
+      if (el === _current) return;
       _current = el;
+      generation++;
+      setLoading(false);
       if (observer) {
         observer.disconnect();
         observer = null;
@@ -2285,10 +2727,12 @@ function infiniteScroll(options) {
   });
   function dispose2() {
     disposed = true;
+    generation++;
     if (observer) {
       observer.disconnect();
       observer = null;
     }
+    setLoading(false);
   }
   return { sentinelRef: originalRef, loading, dispose: dispose2 };
 }
@@ -2493,6 +2937,7 @@ function scrollLock() {
 }
 
 // src/platform/customElement.ts
+var SVG_NS2 = "http://www.w3.org/2000/svg";
 function defineElement(name, component, options = {}) {
   if (customElements.get(name)) return;
   const observed = options.observedAttributes || [];
@@ -2521,11 +2966,8 @@ function defineElement(name, component, options = {}) {
       }
     }
     _teardown() {
-      if (this._rendered) {
-        dispose(this._rendered);
-        this._rendered = null;
-      }
-      this._root.replaceChildren();
+      this._rendered = null;
+      replaceChildrenSafely(this._root);
     }
     _render() {
       this._teardown();
@@ -2550,14 +2992,13 @@ function defineElement(name, component, options = {}) {
   customElements.define(name, SibuElement);
 }
 function svgElement(tag, props = {}, ...nodes) {
-  const SVG_NS = "http://www.w3.org/2000/svg";
-  const el = document.createElementNS(SVG_NS, tag);
+  const el = document.createElementNS(SVG_NS2, tag);
   for (const [key, value] of Object.entries(props)) {
     if (key === "nodes") continue;
-    if (typeof value === "function" && key.startsWith("on")) {
+    if (typeof value === "function" && isEventHandlerAttr(key)) {
       el.addEventListener(key.slice(2).toLowerCase(), value);
     } else if (value != null) {
-      el.setAttribute(key, String(value));
+      setSafeAttribute(el, key, value, { label: "svgElement" });
     }
   }
   for (const child of nodes) {