sibujs 3.4.0 → 4.0.0

package/dist/{chunk-AXFWGY32.js → chunk-DR7H6UGM.js}

@@ -1,25 +1,33 @@
 import {
-  bindAttribute
-} from "./chunk-K35BAR4P.js";
+  bindAttribute,
+  setSafeAttribute
+} from "./chunk-4MFZMLUU.js";
 import {
   derived
-} from "./chunk-ITWCTZYH.js";
+} from "./chunk-Z2CE42DB.js";
+import {
+  isEventHandlerAttr
+} from "./chunk-5INI7D2L.js";
 import {
   globalSingleton
 } from "./chunk-7ZHH77QA.js";
 import {
   effect
-} from "./chunk-BUKYCWHX.js";
+} from "./chunk-PBQEW5VW.js";
 import {
   dispose,
-  registerDisposer
-} from "./chunk-5VGSK6D2.js";
+  registerDisposer,
+  replaceChildrenSafely
+} from "./chunk-DHDZ7IVN.js";
 import {
   signal
-} from "./chunk-KZBEVFXZ.js";
+} from "./chunk-W55YHPEP.js";
 import {
   track
-} from "./chunk-OOUQUCNN.js";
+} from "./chunk-ACBT6UZS.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-WSGLJYFI.js → chunk-E62UADKL.js}

@@ -1,9 +1,9 @@
 import {
   registerDisposer
-} from "./chunk-5VGSK6D2.js";
+} from "./chunk-DHDZ7IVN.js";
 import {
   signal
-} from "./chunk-KZBEVFXZ.js";
+} from "./chunk-W55YHPEP.js";
 
 // src/ui/transition.ts
 function transition(element, options = {}) {
@@ -335,7 +335,9 @@ function TransitionGroup(options) {
 // src/ui/viewTransition.ts
 function viewTransition(callback) {
   const [isTransitioning, setIsTransitioning] = signal(false);
+  let inflight = 0;
   async function start() {
+    inflight++;
     setIsTransitioning(true);
     try {
       if (typeof document !== "undefined" && "startViewTransition" in document && typeof document.startViewTransition === "function") {
@@ -345,7 +347,11 @@ function viewTransition(callback) {
         await callback();
       }
     } finally {
-      setIsTransitioning(false);
+      inflight--;
+      if (inflight <= 0) {
+        inflight = 0;
+        setIsTransitioning(false);
+      }
     }
   }
   return { start, isTransitioning };

package/dist/{chunk-3Z2NGWQI.js → chunk-ES2GERY2.js}

@@ -1,7 +1,7 @@
 import {
   SVG_NS,
   tagFactory
-} from "./chunk-JNGGM2XE.js";
+} from "./chunk-DQVUBVNX.js";
 
 // src/core/rendering/html.ts
 var html = tagFactory("html");

package/dist/{chunk-S3V6ZXPI.js → chunk-EWEE7NBF.js}

@@ -1,13 +1,19 @@
 import {
   isUnsafeKey
 } from "./chunk-H3SRKIYX.js";
+import {
+  acquireTitle
+} from "./chunk-52XFPGSN.js";
 import {
   effect
-} from "./chunk-BUKYCWHX.js";
+} from "./chunk-PBQEW5VW.js";
 import {
   batch,
   signal
-} from "./chunk-KZBEVFXZ.js";
+} from "./chunk-W55YHPEP.js";
+import {
+  reportError
+} from "./chunk-VPP2FONR.js";
 
 // src/browser/media.ts
 function media(query) {
@@ -280,6 +286,7 @@ function permissions(name) {
     };
     status.addEventListener("change", onChange);
   }).catch(() => {
+    if (disposed) return;
     setState("unsupported");
   });
   function dispose() {
@@ -298,20 +305,25 @@ function clipboard() {
   const [text, setText] = signal("");
   const [copied, setCopied] = signal(false);
   let copiedTimer = null;
+  let disposed = false;
   async function copy(value) {
+    if (disposed) return;
     if (typeof navigator === "undefined" || !navigator.clipboard) {
       return;
     }
     await navigator.clipboard.writeText(value);
+    if (disposed) return;
     setText(value);
     setCopied(true);
     if (copiedTimer !== null) clearTimeout(copiedTimer);
     copiedTimer = setTimeout(() => {
+      if (disposed) return;
       setCopied(false);
       copiedTimer = null;
     }, 2e3);
   }
   function dispose() {
+    disposed = true;
     if (copiedTimer !== null) {
       clearTimeout(copiedTimer);
       copiedTimer = null;
@@ -437,20 +449,21 @@ function title(value) {
     return () => {
     };
   }
-  const previousTitle = document.title;
   if (typeof value === "function") {
+    let lease2 = null;
     const cleanup = effect(() => {
-      document.title = value();
+      const next = value();
+      if (lease2) lease2.set(next);
+      else lease2 = acquireTitle(next);
     });
     return () => {
       cleanup();
-      document.title = previousTitle;
+      lease2?.release();
+      lease2 = null;
     };
   }
-  document.title = value;
-  return () => {
-    document.title = previousTitle;
-  };
+  const lease = acquireTitle(value);
+  return () => lease.release();
 }
 
 // src/browser/colorScheme.ts
@@ -764,51 +777,112 @@ function wakeLock() {
     };
   }
   const api = navigator.wakeLock;
-  let sentinel = null;
+  let current = null;
+  let desire = false;
+  let generation = 0;
+  let inflight = null;
   let disposed = false;
+  function publishActive(value) {
+    if (disposed) return;
+    setActive(value);
+  }
+  function syncReleasedState() {
+    if (current?.released) {
+      current = null;
+      publishActive(false);
+    }
+  }
+  function discard(sentinel) {
+    if (sentinel.released) return;
+    sentinel.release().catch((err) => {
+      reportError(err, { phase: "async", name: "wakeLock(discard)" });
+    });
+  }
   async function request() {
     if (disposed) return;
-    try {
-      const s = await api.request("screen");
-      if (disposed) {
-        s.release().catch(() => {
-        });
-        return;
-      }
-      sentinel = s;
-      setActive(true);
-      sentinel.addEventListener("release", () => {
-        setActive(false);
-      });
-    } catch {
-      setActive(false);
+    desire = true;
+    syncReleasedState();
+    if (current && !current.released) {
+      publishActive(true);
+      return;
     }
+    if (inflight) return inflight;
+    const myGeneration = ++generation;
+    const attempt = (async () => {
+      try {
+        const sentinel = await api.request("screen");
+        if (disposed || !desire || generation !== myGeneration) {
+          discard(sentinel);
+          return;
+        }
+        if (sentinel.released) {
+          publishActive(false);
+          return;
+        }
+        try {
+          sentinel.addEventListener("release", () => {
+            if (current !== sentinel) return;
+            current = null;
+            publishActive(false);
+          });
+        } catch (listenerError) {
+          discard(sentinel);
+          publishActive(false);
+          reportError(listenerError, { phase: "async", name: "wakeLock(listener registration)" });
+          return;
+        }
+        if (sentinel.released) {
+          publishActive(false);
+          return;
+        }
+        current = sentinel;
+        publishActive(true);
+      } catch (err) {
+        if (generation === myGeneration) publishActive(false);
+        reportError(err, { phase: "async", name: "wakeLock(request)" });
+      }
+    })();
+    inflight = attempt;
+    void attempt.finally(() => {
+      if (inflight === attempt) inflight = null;
+    }).catch(() => {
+    });
+    return attempt;
   }
   async function release() {
-    if (sentinel && !sentinel.released) {
-      await sentinel.release();
+    desire = false;
+    generation++;
+    inflight = null;
+    const held = current;
+    current = null;
+    publishActive(false);
+    if (held && !held.released) {
+      await held.release();
     }
-    sentinel = null;
-    setActive(false);
   }
   const onVisibility = () => {
-    if (sentinel?.released && !document.hidden) {
-      request().catch((err) => {
-        if (typeof console !== "undefined") {
-          console.warn("[SibuJS wakeLock] re-acquire failed:", err);
-        }
-      });
-    }
+    syncReleasedState();
+    if (!desire || current || document.hidden) return;
+    request().catch((err) => {
+      reportError(err, { phase: "async", name: "wakeLock(visibility re-acquire)" });
+    });
   };
   document.addEventListener("visibilitychange", onVisibility);
   function dispose() {
-    disposed = true;
+    if (disposed) return;
+    desire = false;
+    generation++;
+    inflight = null;
     document.removeEventListener("visibilitychange", onVisibility);
-    release().catch((err) => {
-      if (typeof console !== "undefined") {
-        console.warn("[SibuJS wakeLock] release failed:", err);
-      }
-    });
+    const held = current;
+    current = null;
+    setActive(false);
+    disposed = true;
+    if (held && !held.released) {
+      held.release().catch((err) => {
+        reportError(err, { phase: "async", name: "wakeLock(dispose release)" });
+      });
+    }
   }
   return { active, request, release, dispose };
 }