sibujs 3.4.1 → 4.0.1

package/dist/{chunk-QHPUFNHZ.js → chunk-PTLJ7NQX.js}

@@ -1,14 +1,14 @@
 import {
   isSSR
-} from "./chunk-S3NFJO6L.js";
+} from "./chunk-TIRZCERI.js";
 import {
   resumeTracking,
   suspendTracking,
   track
-} from "./chunk-BQLVTAUZ.js";
+} from "./chunk-JYXQCELN.js";
 import {
   devAssert
-} from "./chunk-COY6PUD2.js";
+} from "./chunk-VPP2FONR.js";
 
 // src/core/signals/watch.ts
 function watch(getter, callback) {

package/dist/{chunk-NXR2YFZB.js → chunk-QD4I7ZGZ.js}

@@ -1,23 +1,24 @@
 import {
-  bindAttribute
-} from "./chunk-DLBFEAIS.js";
+  bindAttribute,
+  setSafeAttribute
+} from "./chunk-PHRH66Y7.js";
 import {
   isEventHandlerAttr,
-  sanitizeAttributeString,
-  sanitizeCSSValue
-} from "./chunk-L3GAGWCC.js";
+  sanitizeCSSValue,
+  sanitizeStyleAttribute
+} from "./chunk-5INI7D2L.js";
 import {
   dispose,
   registerDisposer
-} from "./chunk-5VGSK6D2.js";
+} from "./chunk-DHDZ7IVN.js";
 import {
-  reactiveBinding,
-  track
-} from "./chunk-BQLVTAUZ.js";
+  reactiveBinding
+} from "./chunk-JYXQCELN.js";
 import {
   devWarn,
-  isDev
-} from "./chunk-COY6PUD2.js";
+  isDev,
+  reportError
+} from "./chunk-VPP2FONR.js";
 
 // src/reactivity/bindChildNode.ts
 var _isDev = isDev();
@@ -28,7 +29,7 @@ function bindChildNode(placeholder, getter) {
     try {
       result = getter();
     } catch (err) {
-      if (_isDev) devWarn(`bindChildNode: getter threw: ${err instanceof Error ? err.message : String(err)}`);
+      reportError(err, { phase: "binding", name: "bindChildNode", node: placeholder });
       return;
     }
     if (result == null || typeof result === "boolean") {
@@ -89,7 +90,7 @@ function bindChildNode(placeholder, getter) {
     }
     lastNodes = newNodes;
   }
-  return reactiveBinding(commit);
+  return reactiveBinding(commit, placeholder);
 }
 
 // src/core/rendering/tagFactory.ts
@@ -112,9 +113,6 @@ var CLOBBER_RISKY_IDS = /* @__PURE__ */ new Set([
   "self",
   "frames"
 ]);
-function setProp(el, key, val) {
-  el[key] = val;
-}
 function looksLikeClassList(s) {
   const t = s.trim();
   if (!t) return false;
@@ -137,14 +135,14 @@ function toKebab(prop) {
 }
 function applyStyle(el, style) {
   if (typeof style === "function") {
-    const teardown = track(() => {
-      el.setAttribute("style", style());
-    });
+    const teardown = reactiveBinding(() => {
+      el.setAttribute("style", sanitizeStyleAttribute(String(style())));
+    }, el);
     registerDisposer(el, teardown);
     return;
   }
   if (typeof style === "string") {
-    el.setAttribute("style", style);
+    el.setAttribute("style", sanitizeStyleAttribute(style));
     return;
   }
   const htmlEl = el;
@@ -153,9 +151,9 @@ function applyStyle(el, style) {
     const name = toKebab(prop);
     if (typeof val === "function") {
       const getter = val;
-      const teardown = track(() => {
+      const teardown = reactiveBinding(() => {
         htmlEl.style.setProperty(name, sanitizeCSSValue(String(getter())));
-      });
+      }, el);
       registerDisposer(el, teardown);
     } else {
       htmlEl.style.setProperty(name, sanitizeCSSValue(String(val)));
@@ -168,9 +166,9 @@ function applyClass(el, cls) {
     return;
   }
   if (typeof cls === "function") {
-    const teardown = track(() => {
+    const teardown = reactiveBinding(() => {
       el.setAttribute("class", cls());
-    });
+    }, el);
     registerDisposer(el, teardown);
     return;
   }
@@ -195,7 +193,7 @@ function applyClass(el, cls) {
       }
       el.setAttribute("class", r);
     };
-    const teardown = track(update);
+    const teardown = reactiveBinding(update, el);
     registerDisposer(el, teardown);
   } else {
     el.setAttribute("class", result);
@@ -329,16 +327,8 @@ var tagFactory = (tag, ns) => {
           if (isEventHandlerAttr(key)) continue;
           if (typeof value === "function") {
             registerDisposer(el, bindAttribute(el, key, value));
-          } else if (typeof value === "boolean") {
-            if (key in el && (key === "checked" || key === "disabled" || key === "selected")) {
-              setProp(el, key, value);
-            } else if (value) {
-              el.setAttribute(key, "");
-            } else {
-              el.removeAttribute(key);
-            }
           } else {
-            el.setAttribute(key, sanitizeAttributeString(key, String(value)));
+            setSafeAttribute(el, key, value, { syncValueProperty: false, label: "tagFactory" });
           }
         }
       }

package/dist/{chunk-S3NFJO6L.js → chunk-TIRZCERI.js}

@@ -1,3 +1,8 @@
+import {
+  __require,
+  devWarn
+} from "./chunk-VPP2FONR.js";
+
 // src/core/ssr-context.ts
 var SSR_KEY = /* @__PURE__ */ Symbol.for("sibujs.ssr.v1");
 function detectSSRShared() {
@@ -8,20 +13,35 @@ 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);
+var _alsWarned = false;
+function warnMissingAsyncLocalStorage() {
+  if (_alsWarned || als) return;
+  const isNode = typeof process !== "undefined" && !!process.versions?.node;
+  if (!isNode) return;
+  _alsWarned = true;
+  const version = process.versions.node;
+  devWarn(
+    `SSR request isolation is UNAVAILABLE on this runtime (Node ${version}). AsyncLocalStorage could not be loaded, so concurrent requests share one SSR store: request state and the query cache can bleed between them. Node >= 22.3 is required for isolated SSR under ESM; the CommonJS build works on older versions. A fully synchronous render is unaffected.`
+  );
+}
 function getSSRStore() {
   if (als) {
     const s = als.getStore();
@@ -29,6 +49,10 @@ function getSSRStore() {
   }
   return fallbackStore;
 }
+function getRequestStore() {
+  if (als) return als.getStore() ?? null;
+  return _shared.fallbackDepth > 0 ? fallbackStore : null;
+}
 function isSSR() {
   return getSSRStore().ssr;
 }
@@ -50,19 +74,25 @@ function disableSSR() {
   getSSRStore().ssr = false;
 }
 function runInSSRContext(fn) {
-  const store = { ssr: true, suspenseIdCounter: 0 };
+  const store = { ssr: true, suspenseIdCounter: 0, locale: void 0 };
   if (als) {
     return als.run(store, fn);
   }
+  warnMissingAsyncLocalStorage();
   const prevSSR = fallbackStore.ssr;
   const prevCounter = fallbackStore.suspenseIdCounter;
+  const prevLocale = fallbackStore.locale;
   fallbackStore.ssr = true;
   fallbackStore.suspenseIdCounter = 0;
+  fallbackStore.locale = void 0;
+  _shared.fallbackDepth++;
   try {
     return fn();
   } finally {
+    _shared.fallbackDepth--;
     fallbackStore.ssr = prevSSR;
     fallbackStore.suspenseIdCounter = prevCounter;
+    fallbackStore.locale = prevLocale;
   }
 }
 function withSSR(fn) {
@@ -78,6 +108,7 @@ function withSSR(fn) {
 
 export {
   getSSRStore,
+  getRequestStore,
   isSSR,
   getRequestScopedCache,
   enableSSR,

package/dist/{chunk-7PNKW3FJ.js → chunk-TNEHT3NG.js}

@@ -1,25 +1,33 @@
 import {
-  bindAttribute
-} from "./chunk-DLBFEAIS.js";
+  bindAttribute,
+  setSafeAttribute
+} from "./chunk-PHRH66Y7.js";
 import {
   derived
-} from "./chunk-4I3M326N.js";
+} from "./chunk-AD5YSZAN.js";
+import {
+  isEventHandlerAttr
+} from "./chunk-5INI7D2L.js";
 import {
   globalSingleton
 } from "./chunk-7ZHH77QA.js";
 import {
   effect
-} from "./chunk-X4JS367G.js";
+} from "./chunk-XDOMTQHM.js";
 import {
   dispose,
-  registerDisposer
-} from "./chunk-5VGSK6D2.js";
+  registerDisposer,
+  replaceChildrenSafely
+} from "./chunk-DHDZ7IVN.js";
 import {
   signal
-} from "./chunk-335KJEN2.js";
+} from "./chunk-TVURNWDK.js";
 import {
   track
-} from "./chunk-BQLVTAUZ.js";
+} from "./chunk-JYXQCELN.js";
+import {
+  reportError
+} from "./chunk-VPP2FONR.js";
 
 // src/ui/form.ts
 function required(message = "This field is required") {
@@ -114,6 +122,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,
@@ -691,21 +701,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);
@@ -721,18 +879,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();
@@ -745,14 +895,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 () => {
@@ -763,11 +907,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 () => {
     };
   }
@@ -779,11 +919,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 = track(commit);
   return teardown;
@@ -791,7 +927,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 () => {
     };
   }
@@ -931,31 +1067,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;
@@ -965,7 +1128,10 @@ function infiniteScroll(options) {
       return _current;
     },
     set(el) {
+      if (el === _current) return;
       _current = el;
+      generation++;
+      setLoading(false);
       if (observer) {
         observer.disconnect();
         observer = null;
@@ -978,10 +1144,12 @@ function infiniteScroll(options) {
   });
   function dispose2() {
     disposed = true;
+    generation++;
     if (observer) {
       observer.disconnect();
       observer = null;
     }
+    setLoading(false);
   }
   return { sentinelRef: originalRef, loading, dispose: dispose2 };
 }
@@ -1057,6 +1225,7 @@ function eventBus() {
 }
 
 // src/platform/customElement.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
 function defineElement(name, component, options = {}) {
   if (customElements.get(name)) return;
   const observed = options.observedAttributes || [];
@@ -1085,11 +1254,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();
@@ -1114,14 +1280,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);
   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) {

package/dist/{chunk-335KJEN2.js → chunk-TVURNWDK.js}

@@ -3,10 +3,10 @@ import {
   notifySubscribers,
   queueSignalNotification,
   recordDependency
-} from "./chunk-BQLVTAUZ.js";
+} from "./chunk-JYXQCELN.js";
 import {
   isDev
-} from "./chunk-COY6PUD2.js";
+} from "./chunk-VPP2FONR.js";
 
 // src/reactivity/batch.ts
 var batchDepth = 0;
@@ -69,7 +69,9 @@ function signal(initial, options) {
     subsHead: null,
     subsTail: null,
     __activeNode: null,
-    __name: void 0
+    __name: void 0,
+    _d: false,
+    _validate: void 0
   };
   const debugName = _isDev ? options?.name : void 0;
   const equalsFn = options?.equals;