sibujs 4.10.1 → 4.12.0

package/dist/extras.cjs

@@ -1103,7 +1103,7 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _runtimeVersion = true ? "4.10.1" : "dev";
+var _runtimeVersion = true ? "4.12.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g2 = globalThis;
@@ -1524,7 +1524,7 @@ var isBatching = API2.isBatching;
 // src/core/signals/signal.ts
 var _g2 = globalThis;
 function signal(initial, options) {
-  const state2 = {
+  const state3 = {
     value: initial,
     __v: 0,
     __sc: 0,
@@ -1537,57 +1537,57 @@ function signal(initial, options) {
   };
   const debugName = DEV ? options?.name : void 0;
   const equalsFn = options?.equals;
-  if (debugName) state2.__name = debugName;
+  if (debugName) state3.__name = debugName;
   function get() {
-    recordDependency2(state2);
-    return state2.value;
+    recordDependency2(state3);
+    return state3.value;
   }
-  get.__signal = state2;
+  get.__signal = state3;
   if (debugName) get.__name = debugName;
   let set;
   if (equalsFn) {
     set = (next) => {
-      const prev = state2.value;
+      const prev = state3.value;
       const newValue = typeof next === "function" ? next(prev) : next;
       if (equalsFn(prev, newValue)) return;
-      state2.value = newValue;
-      state2.__v++;
+      state3.value = newValue;
+      state3.__v++;
       if (DEV) {
         const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-        if (hook) emitDevtools(hook, "signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
+        if (hook) emitDevtools(hook, "signal:update", { signal: state3, name: debugName, oldValue: prev, newValue });
       }
-      if (!enqueueBatchedSignal(state2)) {
-        notifySubscribers2(state2);
+      if (!enqueueBatchedSignal(state3)) {
+        notifySubscribers2(state3);
       }
     };
   } else if (DEV) {
     set = (next) => {
-      const prev = state2.value;
+      const prev = state3.value;
       const newValue = typeof next === "function" ? next(prev) : next;
       if (Object.is(newValue, prev)) return;
-      state2.value = newValue;
-      state2.__v++;
+      state3.value = newValue;
+      state3.__v++;
       const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-      if (hook) emitDevtools(hook, "signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
-      if (!enqueueBatchedSignal(state2)) {
-        notifySubscribers2(state2);
+      if (hook) emitDevtools(hook, "signal:update", { signal: state3, name: debugName, oldValue: prev, newValue });
+      if (!enqueueBatchedSignal(state3)) {
+        notifySubscribers2(state3);
       }
     };
   } else {
     set = (next) => {
-      const prev = state2.value;
+      const prev = state3.value;
       const newValue = typeof next === "function" ? next(prev) : next;
       if (Object.is(newValue, prev)) return;
-      state2.value = newValue;
-      state2.__v++;
-      if (!enqueueBatchedSignal(state2)) {
-        notifySubscribers2(state2);
+      state3.value = newValue;
+      state3.__v++;
+      if (!enqueueBatchedSignal(state3)) {
+        notifySubscribers2(state3);
       }
     };
   }
   if (DEV) {
     const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-    if (hook) emitDevtools(hook, "signal:create", { signal: state2, name: debugName, getter: get, initial });
+    if (hook) emitDevtools(hook, "signal:create", { signal: state3, name: debugName, getter: get, initial });
   }
   return [get, set];
 }
@@ -3896,13 +3896,13 @@ function idle(timeout = 6e4) {
 
 // src/browser/permissions.ts
 function permissions(name) {
-  const [state2, setState] = signal("prompt");
+  const [state3, setState] = signal("prompt");
   let permissionStatus = null;
   let onChange = null;
   let disposed = false;
   if (typeof navigator === "undefined" || !navigator.permissions) {
     setState("unsupported");
-    return { state: state2, dispose: () => {
+    return { state: state3, dispose: () => {
     } };
   }
   navigator.permissions.query({ name }).then((status) => {
@@ -3925,7 +3925,7 @@ function permissions(name) {
       onChange = null;
     }
   }
-  return { state: state2, dispose: dispose2 };
+  return { state: state3, dispose: dispose2 };
 }
 
 // src/browser/clipboard.ts
@@ -4294,9 +4294,9 @@ function colorScheme() {
 // src/browser/format.ts
 var I18N_STATE = /* @__PURE__ */ Symbol.for("sibujs.i18n.v1");
 function activeI18nLocale() {
-  const state2 = globalThis[I18N_STATE];
-  if (!state2) return void 0;
-  return state2.getLocale ? state2.getLocale() : state2.locale?.[0]();
+  const state3 = globalThis[I18N_STATE];
+  if (!state3) return void 0;
+  return state3.getLocale ? state3.getLocale() : state3.locale?.[0]();
 }
 function formatNumber(value, options) {
   const { locale, ...formatOptions } = options ?? {};
@@ -4478,9 +4478,9 @@ function notifyUrlWrite() {
   for (const sync of Array.from(_url.instances)) sync();
 }
 var SCROLL_ENTRY_KEY = "__sibuScrollKey";
-function withoutEntryIdentity(state2) {
-  if (state2 === null || typeof state2 !== "object" || !Object.hasOwn(state2, SCROLL_ENTRY_KEY)) return state2;
-  const { [SCROLL_ENTRY_KEY]: _identity, ...rest } = state2;
+function withoutEntryIdentity(state3) {
+  if (state3 === null || typeof state3 !== "object" || !Object.hasOwn(state3, SCROLL_ENTRY_KEY)) return state3;
+  const { [SCROLL_ENTRY_KEY]: _identity, ...rest } = state3;
   return rest;
 }
 function urlState() {
@@ -4518,9 +4518,9 @@ function urlState() {
   window.addEventListener("hashchange", syncFromLocation);
   _url.instances.add(syncFromLocation);
   function writeHistory(newUrl, opts) {
-    const state2 = "state" in opts ? opts.state : window.history.state;
-    if (opts.replace) window.history.replaceState(state2, "", newUrl);
-    else window.history.pushState("state" in opts ? state2 : withoutEntryIdentity(state2), "", newUrl);
+    const state3 = "state" in opts ? opts.state : window.history.state;
+    if (opts.replace) window.history.replaceState(state3, "", newUrl);
+    else window.history.pushState("state" in opts ? state3 : withoutEntryIdentity(state3), "", newUrl);
   }
   function setParams(next, opts = {}) {
     const p2 = next instanceof URLSearchParams ? next : new URLSearchParams(next);
@@ -5327,7 +5327,7 @@ function ownEntry(table2, key) {
   return Object.hasOwn(table2, key) ? table2[key] : void 0;
 }
 function machine(config) {
-  const [state2, setState] = signal(config.initial);
+  const [state3, setState] = signal(config.initial);
   const [context, setContext] = signal(config.context || {});
   let currentState = config.initial;
   let currentContext = context();
@@ -5401,10 +5401,10 @@ function machine(config) {
     if (queue.length > 0) drain();
   }
   function matches(s2) {
-    return state2() === s2;
+    return state3() === s2;
   }
   function can(event) {
-    const currentState2 = state2();
+    const currentState2 = state3();
     const stateDef = ownEntry(config.states, currentState2);
     if (!stateDef?.on) return false;
     const transition2 = ownEntry(stateDef.on, event);
@@ -5415,7 +5415,7 @@ function machine(config) {
     }
     return true;
   }
-  return { state: state2, context, send, matches, can };
+  return { state: state3, context, send, matches, can };
 }
 
 // src/patterns/persist.ts
@@ -5881,11 +5881,11 @@ function adopt(value) {
     resolvePromise = resolve;
     rejectPromise = reject;
   });
-  let state2 = "invoking";
+  let state3 = "invoking";
   let nativeTarget;
   const waiters = [];
   const transition2 = (next) => {
-    state2 = next;
+    state3 = next;
     if (next === "invoking") return;
     for (const waiter of waiters.splice(0)) waiter();
   };
@@ -5943,18 +5943,18 @@ function adopt(value) {
       } catch (error) {
         onReject(error);
       }
-      if (!done && state2 === "invoking") transition2("pending");
+      if (!done && state3 === "invoking") transition2("pending");
     });
   };
   invokeLater(value, then);
   const probe = (onRejected, onOpen) => {
     const decide = () => {
-      if (state2 === "native") probeNative(nativeTarget, onRejected, onOpen);
-      else (state2 === "rejected" ? onRejected : onOpen)();
+      if (state3 === "native") probeNative(nativeTarget, onRejected, onOpen);
+      else (state3 === "rejected" ? onRejected : onOpen)();
     };
-    if (state2 === "native") probeNative(nativeTarget, onRejected, onOpen);
-    else if (state2 === "invoking") waiters.push(decide);
-    else queueMicrotask(state2 === "rejected" ? onRejected : onOpen);
+    if (state3 === "native") probeNative(nativeTarget, onRejected, onOpen);
+    else if (state3 === "invoking") waiters.push(decide);
+    else queueMicrotask(state3 === "rejected" ? onRejected : onOpen);
   };
   return { promise, failedEarly: false, probe };
 }
@@ -5995,12 +5995,12 @@ function globalStore(config) {
   const [getState, setState] = signal({ ...initialState });
   const subscriptions = /* @__PURE__ */ new Map();
   const middlewares = config.middleware || [];
-  function notifyListeners2(state2) {
+  function notifyListeners2(state3) {
     if (subscriptions.size === 0) return;
     for (const subscription of Array.from(subscriptions.values())) {
       if (!subscription.active) continue;
       try {
-        subscription.callback(state2);
+        subscription.callback(state3);
       } catch (err) {
         reportError(err, { phase: "event", name: "globalStore(subscribe)" });
       }
@@ -7864,6 +7864,9 @@ function contextualAttributeRefusal(el, name, value, origin) {
   if (SVG_ANIMATION_ELEMENTS.has(local) && el.namespaceURI === SVG_NS) return animationRefusal(name, value);
   return ContextualRefusal.None;
 }
+function isRefusedAnimationAttribute(el, name, value) {
+  return SVG_ANIMATION_ELEMENTS.has(el.localName) && el.namespaceURI === SVG_NS && animationRefusal(name, value) !== ContextualRefusal.None;
+}
 function settleAttributeProvenance(el, name, origin) {
   if (el.localName !== "link" || canonicalAttrName(name) !== "href") return;
   if (origin !== "static" && el.hasAttribute("href")) runtimeHrefLinks.add(el);
@@ -8738,6 +8741,120 @@ function noSideEffect(fn) {
   return fn;
 }
 
+// src/utils/embedPolicy.ts
+var state2 = globalSingleton(/* @__PURE__ */ Symbol.for("sibujs.embed.v2"), () => ({
+  allowed: [],
+  frames: /* @__PURE__ */ new WeakMap()
+}));
+var REQUEST_CACHE = "embed";
+function currentEmbedAllowlist() {
+  const scoped = getRequestStore()?.caches?.get(REQUEST_CACHE)?.get("allowed");
+  return scoped ?? state2.allowed;
+}
+function resolveEmbedSrc(value, allowed = currentEmbedAllowlist()) {
+  if (typeof value !== "string" || sanitizeUrl(value) === "") return null;
+  let url;
+  try {
+    url = new URL(value);
+  } catch {
+    return null;
+  }
+  if (url.protocol !== "https:" || url.username || url.password) return null;
+  if (typeof location !== "undefined" && url.origin === location.origin) return null;
+  for (const entry of allowed) {
+    if (url.origin !== entry.origin) continue;
+    const path2 = entry.path;
+    if (path2 === "" || url.pathname === path2 || url.pathname.startsWith(path2.endsWith("/") ? path2 : `${path2}/`)) {
+      return url.href;
+    }
+  }
+  return null;
+}
+var DEFAULT_EMBED_SANDBOX = [
+  "allow-scripts",
+  "allow-same-origin",
+  "allow-presentation",
+  "allow-popups",
+  "allow-popups-to-escape-sandbox"
+];
+var EMBED_FEATURES = /* @__PURE__ */ new Set([
+  "accelerometer",
+  "autoplay",
+  "clipboard-write",
+  "encrypted-media",
+  "fullscreen",
+  "gyroscope",
+  "picture-in-picture",
+  "web-share"
+]);
+function narrowEmbedSandbox(value) {
+  const out = [];
+  for (const token of value.toLowerCase().split(/[\t\n\f\r ]+/)) {
+    if (token && DEFAULT_EMBED_SANDBOX.includes(token) && !out.includes(token)) out.push(token);
+  }
+  return out.join(" ");
+}
+function narrowEmbedAllow(value) {
+  const granted = [];
+  const denied = [];
+  for (const directive of value.split(";")) {
+    const tokens = directive.trim().split(/[\t\n\f\r ]+/);
+    const feature = tokens[0];
+    if (!feature) continue;
+    const list = tokens.slice(1).map((token) => token.toLowerCase());
+    const grantsSrc = (list.length === 0 || list.includes("'src'") || list.includes("*")) && !list.includes("'none'");
+    if (!grantsSrc) denied.push(feature);
+    else if (EMBED_FEATURES.has(feature) && !granted.includes(feature)) granted.push(feature);
+  }
+  return granted.filter((feature) => !denied.includes(feature)).join("; ");
+}
+function getEmbedRecord(frame) {
+  return state2.frames.get(frame);
+}
+function intersect(current, permitted, separator) {
+  const allowed = permitted.split(separator);
+  return current.split(separator).filter((token) => token && allowed.includes(token)).join(separator);
+}
+function embedSerializedAttribute(record, seen, name, value) {
+  switch (name) {
+    case "src":
+      return resolveEmbedSrc(value, record.allowed);
+    case "title":
+      if (!value.trim()) return null;
+      seen.title = true;
+      return value;
+    case "sandbox":
+      seen.sandbox = true;
+      return intersect(narrowEmbedSandbox(value), record.sandbox, " ");
+    case "allow": {
+      const allow = intersect(narrowEmbedAllow(value), record.allow, "; ");
+      if (allow.split("; ").includes("fullscreen")) seen.fullscreen = true;
+      return allow || null;
+    }
+    case "referrerpolicy":
+      seen.referrer = true;
+      return value.trim().toLowerCase() === "no-referrer" ? "no-referrer" : record.referrer;
+    case "loading":
+      return value === "eager" ? "eager" : "lazy";
+    case "id":
+    case "class":
+    case "style":
+    case "width":
+    case "height":
+      return value;
+    default:
+      return name.startsWith("data-") || name.startsWith("aria-") ? value : null;
+  }
+}
+function embedSerializationTail(record, seen) {
+  if (!seen.title) return null;
+  let tail = "";
+  if (!seen.sandbox) tail += ` sandbox="${record.sandbox}"`;
+  if (!seen.referrer) tail += ` referrerpolicy="${record.referrer}"`;
+  if (seen.fullscreen) tail += ' allowfullscreen=""';
+  return tail;
+}
+
 // src/utils/headEntry.ts
 var SAFE_HEAD_ATTR_NAME = /^[A-Za-z_:][-A-Za-z0-9_.:]*$/;
 function isEmittableHeadAttrName(name) {
@@ -8875,69 +8992,180 @@ function childNodesOf(node) {
 function getAttributeOf(el, name) {
   return nativeAccessors().getAttribute.call(el, name);
 }
-function serializeOpenTag(element, tag) {
+var SVG_NS3 = "http://www.w3.org/2000/svg";
+var MATHML_NS = "http://www.w3.org/1998/Math/MathML";
+var XLINK_NS2 = "http://www.w3.org/1999/xlink";
+var XML_NS2 = "http://www.w3.org/XML/1998/namespace";
+var XMLNS_NS = "http://www.w3.org/2000/xmlns/";
+var BREAKOUT_TAGS = /* @__PURE__ */ new Set([
+  "b",
+  "big",
+  "blockquote",
+  "body",
+  "br",
+  "center",
+  "code",
+  "dd",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "hr",
+  "i",
+  "img",
+  "li",
+  "listing",
+  "menu",
+  "meta",
+  "nobr",
+  "ol",
+  "p",
+  "pre",
+  "ruby",
+  "s",
+  "small",
+  "span",
+  "strong",
+  "strike",
+  "sub",
+  "sup",
+  "table",
+  "tt",
+  "u",
+  "ul",
+  "var"
+]);
+function isBreakout(lowerName, element) {
+  if (BREAKOUT_TAGS.has(lowerName)) return true;
+  return lowerName === "font" && (element.hasAttribute("color") || element.hasAttribute("face") || element.hasAttribute("size"));
+}
+function fitsParseContext(ns, lowerName, element, context) {
+  if (ns === SVG_NS3) {
+    if (context === 1 /* Svg */) return !isBreakout(lowerName, element);
+    return lowerName === "svg" && (context === 0 /* Html */ || context === 3 /* Annotation */);
+  }
+  if (ns === MATHML_NS) {
+    if (context === 2 /* Math */ || context === 3 /* Annotation */) return !isBreakout(lowerName, element);
+    return lowerName === "math" && context === 0 /* Html */;
+  }
+  return context === 0 /* Html */;
+}
+function childParseContext(ns, lowerName, element) {
+  if (ns === SVG_NS3) {
+    return lowerName === "foreignobject" || lowerName === "desc" || lowerName === "title" ? 0 /* Html */ : 1 /* Svg */;
+  }
+  if (ns === MATHML_NS) {
+    if (lowerName === "mi" || lowerName === "mo" || lowerName === "mn" || lowerName === "ms" || lowerName === "mtext") {
+      return 0 /* Html */;
+    }
+    if (lowerName === "annotation-xml") {
+      const encoding = (element.getAttribute("encoding") ?? "").toLowerCase();
+      return encoding === "text/html" || encoding === "application/xhtml+xml" ? 0 /* Html */ : 3 /* Annotation */;
+    }
+    return 2 /* Math */;
+  }
+  return 0 /* Html */;
+}
+function foreignAttrName(attr) {
+  const ns = attr.namespaceURI;
+  if (ns === XLINK_NS2) return `xlink:${attr.localName}`;
+  if (ns === XML_NS2) return `xml:${attr.localName}`;
+  if (ns === XMLNS_NS) return attr.localName === "xmlns" ? "xmlns" : `xmlns:${attr.localName}`;
+  return attr.name;
+}
+function serializeOpenTag(element, tag, foreign) {
   let html2 = `<${tag}`;
-  const meta2 = tag === "meta" ? /* @__PURE__ */ new Map() : null;
+  const meta2 = tag === "meta" && !foreign ? /* @__PURE__ */ new Map() : null;
+  const embed2 = tag === "iframe" && !foreign ? getEmbedRecord(element) : void 0;
+  const embedSeen = embed2 ? { sandbox: false, referrer: false, title: false, fullscreen: false } : null;
   const attrs = attributesOf(element);
   for (let i2 = 0; i2 < attrs.length; i2++) {
     const attr = attrs[i2];
-    const rawName = attr.name;
+    const rawName = foreign ? foreignAttrName(attr) : attr.name;
     if (!isSafeAttrName(rawName)) continue;
     if (isEventHandlerAttr(rawName)) continue;
     if (isForbiddenSsrAttr(rawName)) continue;
-    const value = resolveAttributeValue(rawName.toLowerCase(), attr.value);
+    const lowerName = rawName.toLowerCase();
+    let value = resolveAttributeValue(lowerName, attr.value);
     if (value === null) continue;
+    if (foreign && isRefusedAnimationAttribute(element, rawName, value)) continue;
+    if (embed2 && embedSeen) {
+      value = embedSerializedAttribute(embed2, embedSeen, lowerName, value);
+      if (value === null) continue;
+    }
     meta2?.set(rawName, value);
     html2 += ` ${rawName}="${escapeAttr(value)}"`;
   }
   if (meta2 && isForbiddenMetaSnapshot(meta2)) return null;
+  if (embed2 && embedSeen) {
+    const tail = embedSerializationTail(embed2, embedSeen);
+    if (tail === null) return null;
+    html2 += tail;
+  }
   if (!getAttributeOf(element, "data-sibu-hydrate")) {
     html2 += ` data-sibu-ssr="true"`;
   }
   return html2;
 }
+function serializeNode(node, context) {
+  if (node.nodeType === 3) return escapeHtml(node.textContent || "");
+  if (node.nodeType === 8) return `<!--${safeCommentText(node.textContent || "")}-->`;
+  let foreign = false;
+  if (!(node instanceof HTMLElement)) {
+    const ns2 = node.nodeType === 1 ? node.namespaceURI : null;
+    if (ns2 !== SVG_NS3 && ns2 !== MATHML_NS) return escapeHtml(node.textContent || "");
+    foreign = true;
+  }
+  const element = node;
+  const tag = foreign ? element.localName : tagNameOf(element).toLowerCase();
+  if (isCodeTextElement(tag)) return DEV ? `<!--ssr:${tag}-stripped-->` : "";
+  if (!/^[a-z][a-z0-9-]*$/i.test(tag)) return DEV ? "<!--ssr:invalid-tag-->" : "";
+  const ns = foreign ? element.namespaceURI : null;
+  const lowerName = tag.toLowerCase();
+  if (!fitsParseContext(ns, lowerName, element, context)) return DEV ? `<!--ssr:${tag}-misplaced-->` : "";
+  const openTag = serializeOpenTag(element, tag, foreign);
+  if (openTag === null) return DEV ? `<!--ssr:${tag}-stripped-->` : "";
+  const children = childNodesOf(element);
+  if (foreign ? children.length === 0 : VOID_ELEMENTS.has(tag)) return `${openTag} />`;
+  return {
+    open: `${openTag}>`,
+    close: `</${tag}>`,
+    children: Array.from(children),
+    context: childParseContext(ns, lowerName, element)
+  };
+}
 function renderToString(element) {
+  return renderNodeToString(element, 0 /* Html */);
+}
+function renderNodeToString(element, context) {
   if (element instanceof DocumentFragment) {
     return Array.from(element.childNodes).map((child) => {
       try {
-        return renderToString(child);
+        return renderNodeToString(child, context);
       } catch (err) {
         return ssrErrorComment(err);
       }
     }).join("");
   }
-  if (element.nodeType === 3) {
-    return escapeHtml(element.textContent || "");
-  }
-  if (element.nodeType === 8) {
-    return `<!--${safeCommentText(element.textContent || "")}-->`;
-  }
-  if (!(element instanceof HTMLElement)) {
-    return escapeHtml(element.textContent || "");
-  }
-  const tag = tagNameOf(element).toLowerCase();
-  if (isCodeTextElement(tag)) {
-    return DEV ? `<!--ssr:${tag}-stripped-->` : "";
-  }
-  if (!/^[a-z][a-z0-9-]*$/i.test(tag)) {
-    return DEV ? "<!--ssr:invalid-tag-->" : "";
-  }
-  const openTag = serializeOpenTag(element, tag);
-  if (openTag === null) return DEV ? `<!--ssr:${tag}-stripped-->` : "";
-  let html2 = openTag;
-  if (VOID_ELEMENTS.has(tag)) {
-    return `${html2} />`;
-  }
-  html2 += ">";
-  for (const child of Array.from(childNodesOf(element))) {
+  const frame = serializeNode(element, context);
+  if (typeof frame === "string") return frame;
+  let html2 = frame.open;
+  for (const child of frame.children) {
     try {
-      html2 += renderToString(child);
+      html2 += renderNodeToString(child, frame.context);
     } catch (err) {
       html2 += ssrErrorComment(err);
     }
   }
-  html2 += `</${tag}>`;
-  return html2;
+  return html2 + frame.close;
 }
 function hydrate(component, container, options = {}) {
   const clientTree = component();
@@ -9120,56 +9348,34 @@ function renderToDocument(component, options = {}) {
   </body>
 </html>`;
 }
-async function* renderToStream(element) {
+function renderToStream(element) {
+  return streamNode(element, 0 /* Html */);
+}
+async function* streamNode(element, context) {
   if (element instanceof DocumentFragment) {
     for (const child of Array.from(element.childNodes)) {
       try {
-        yield* renderToStream(child);
+        yield* streamNode(child, context);
       } catch (err) {
         yield ssrErrorComment(err);
       }
     }
     return;
   }
-  if (element.nodeType === 3) {
-    yield escapeHtml(element.textContent || "");
+  const frame = serializeNode(element, context);
+  if (typeof frame === "string") {
+    if (frame) yield frame;
     return;
   }
-  if (element.nodeType === 8) {
-    yield `<!--${safeCommentText(element.textContent || "")}-->`;
-    return;
-  }
-  if (!(element instanceof HTMLElement)) {
-    yield escapeHtml(element.textContent || "");
-    return;
-  }
-  const tag = tagNameOf(element).toLowerCase();
-  if (isCodeTextElement(tag)) {
-    if (DEV) yield `<!--ssr:${tag}-stripped-->`;
-    return;
-  }
-  if (!/^[a-z][a-z0-9-]*$/i.test(tag)) {
-    if (DEV) yield "<!--ssr:invalid-tag-->";
-    return;
-  }
-  const openTag = serializeOpenTag(element, tag);
-  if (openTag === null) {
-    if (DEV) yield `<!--ssr:${tag}-stripped-->`;
-    return;
-  }
-  if (VOID_ELEMENTS.has(tag)) {
-    yield `${openTag} />`;
-    return;
-  }
-  yield `${openTag}>`;
-  for (const child of Array.from(childNodesOf(element))) {
+  yield frame.open;
+  for (const child of frame.children) {
     try {
-      yield* renderToStream(child);
+      yield* streamNode(child, frame.context);
     } catch (err) {
       yield ssrErrorComment(err);
     }
   }
-  yield `</${tag}>`;
+  yield frame.close;
 }
 async function collectStream(stream2) {
   let result = "";
@@ -9329,8 +9535,8 @@ function escapeScriptJson(json) {
   return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
 }
 var DEFAULT_MAX_SSR_BYTES = 1024 * 1024;
-function serializeState(state2, nonce, options) {
-  const rawJson = JSON.stringify(state2);
+function serializeState(state3, nonce, options) {
+  const rawJson = JSON.stringify(state3);
   const maxBytes = options?.maxBytes ?? DEFAULT_MAX_SSR_BYTES;
   const byteLen = typeof TextEncoder !== "undefined" ? new TextEncoder().encode(rawJson).byteLength : Buffer.byteLength(rawJson, "utf8");
   if (byteLen > maxBytes) {
@@ -9441,8 +9647,8 @@ function normalizedStore(schema) {
     return ownGet(getState().entities, id);
   }
   function getAll() {
-    const state2 = getState();
-    return state2.ids.map((id) => state2.entities[id]);
+    const state3 = getState();
+    return state3.ids.map((id) => state3.entities[id]);
   }
   function update(id, partial) {
     const prev = getState();
@@ -9475,8 +9681,8 @@ function normalizedStore(schema) {
     });
   }
   function select3(predicate) {
-    const state2 = getState();
-    return state2.ids.map((id) => state2.entities[id]).filter(predicate);
+    const state3 = getState();
+    return state3.ids.map((id) => state3.entities[id]).filter(predicate);
   }
   return { add, addMany, get, getAll, update, remove, select: select3, getState };
 }
@@ -9938,7 +10144,7 @@ function setCanonical(url) {
 }
 
 // src/platform/customElement.ts
-var SVG_NS3 = "http://www.w3.org/2000/svg";
+var SVG_NS4 = "http://www.w3.org/2000/svg";
 var MAX_RENDER_PASSES = 10;
 var ABANDONED_RENDER = /* @__PURE__ */ Symbol("sibujs.defineElement.abandonedRender");
 function defineElement(name, component, options = {}) {
@@ -10090,7 +10296,7 @@ function svgElement(tag, props = {}, ...nodes) {
   if (isBlockedElement(tag)) {
     throw new Error(`svgElement: refusing to create <${tag}> \u2014 tag is blocked for security reasons.`);
   }
-  const el = document.createElementNS(SVG_NS3, tag);
+  const el = document.createElementNS(SVG_NS4, tag);
   for (const [key, value] of Object.entries(props)) {
     if (key === "nodes") continue;
     if (typeof value === "function" && isEventHandlerAttr(key)) {
@@ -10716,8 +10922,15 @@ function bindChildNode(placeholder, getter) {
   return reactiveBinding2(commit, placeholder);
 }
 
+// src/core/rendering/requireDocument.ts
+function noDocument() {
+  throw new Error(
+    "[SibuJS] renderToString needs a DOM: register happy-dom or jsdom globals first." + (DEV ? ' There is no global `document`, and SibuJS builds live DOM nodes, on the server too. For example: import { GlobalRegistrator } from "@happy-dom/global-registrator"; GlobalRegistrator.register(); See SSR in AGENTS.md \xA710.' : "")
+  );
+}
+
 // src/core/rendering/tagFactory.ts
-var SVG_NS4 = "http://www.w3.org/2000/svg";
+var SVG_NS5 = "http://www.w3.org/2000/svg";
 var CLOBBER_RISKY_IDS = /* @__PURE__ */ new Set([
   "config",
   "location",
@@ -10896,6 +11109,7 @@ function tagFactory(tag, ns) {
     if (blocked) {
       throw new Error(`tagFactory: refusing to create <${tag}> \u2014 tag is blocked for security reasons.`);
     }
+    if (typeof document === "undefined") noDocument();
     const el = ns ? document.createElementNS(ns, tag) : document.createElement(tag);
     if (first === void 0) return el;
     if (typeof first === "string") {
@@ -11071,7 +11285,7 @@ var param = tagFactory("param");
 var picture = tagFactory("picture");
 var portal = tagFactory("portal");
 var source = tagFactory("source");
-var svg = tagFactory("svg", SVG_NS4);
+var svg = tagFactory("svg", SVG_NS5);
 var math = tagFactory("math");
 var canvas = tagFactory("canvas");
 var noscript = tagFactory("noscript");
@@ -11112,26 +11326,26 @@ var base = tagFactory("base");
 var link = tagFactory("link");
 var meta = tagFactory("meta");
 var style = tagFactory("style");
-var circle = tagFactory("circle", SVG_NS4);
-var ellipse = tagFactory("ellipse", SVG_NS4);
-var g = tagFactory("g", SVG_NS4);
-var line = tagFactory("line", SVG_NS4);
-var path = tagFactory("path", SVG_NS4);
-var polygon = tagFactory("polygon", SVG_NS4);
-var polyline = tagFactory("polyline", SVG_NS4);
-var rect = tagFactory("rect", SVG_NS4);
-var text = tagFactory("text", SVG_NS4);
-var tspan = tagFactory("tspan", SVG_NS4);
-var defs = tagFactory("defs", SVG_NS4);
-var clipPath = tagFactory("clipPath", SVG_NS4);
-var mask = tagFactory("mask", SVG_NS4);
-var pattern = tagFactory("pattern", SVG_NS4);
-var linearGradient = tagFactory("linearGradient", SVG_NS4);
-var radialGradient = tagFactory("radialGradient", SVG_NS4);
-var stop = tagFactory("stop", SVG_NS4);
-var use = tagFactory("use", SVG_NS4);
-var symbol = tagFactory("symbol", SVG_NS4);
-var marker = tagFactory("marker", SVG_NS4);
+var circle = tagFactory("circle", SVG_NS5);
+var ellipse = tagFactory("ellipse", SVG_NS5);
+var g = tagFactory("g", SVG_NS5);
+var line = tagFactory("line", SVG_NS5);
+var path = tagFactory("path", SVG_NS5);
+var polygon = tagFactory("polygon", SVG_NS5);
+var polyline = tagFactory("polyline", SVG_NS5);
+var rect = tagFactory("rect", SVG_NS5);
+var text = tagFactory("text", SVG_NS5);
+var tspan = tagFactory("tspan", SVG_NS5);
+var defs = tagFactory("defs", SVG_NS5);
+var clipPath = tagFactory("clipPath", SVG_NS5);
+var mask = tagFactory("mask", SVG_NS5);
+var pattern = tagFactory("pattern", SVG_NS5);
+var linearGradient = tagFactory("linearGradient", SVG_NS5);
+var radialGradient = tagFactory("radialGradient", SVG_NS5);
+var stop = tagFactory("stop", SVG_NS5);
+var use = tagFactory("use", SVG_NS5);
+var symbol = tagFactory("symbol", SVG_NS5);
+var marker = tagFactory("marker", SVG_NS5);
 var center = tagFactory("center");
 var font = tagFactory("font");
 var marquee = tagFactory("marquee");
@@ -11603,8 +11817,8 @@ function scrollRestoration(options) {
     nativeModeLease = acquireScrollRestorationMode("manual");
     if (currentKey !== null) tagCurrentEntry(currentKey);
     popstateHandler = (event) => {
-      const state2 = event.state ?? null;
-      const rawDestination = state2 ? state2[stateKey] : void 0;
+      const state3 = event.state ?? null;
+      const rawDestination = state3 ? state3[stateKey] : void 0;
       const destination = typeof rawDestination === "string" ? rawDestination : null;
       let outgoing = currentKey;
       if (outgoing === null && options?.getKey) {
@@ -12031,7 +12245,7 @@ var CDN_ENTRY_POINTS = {
 };
 var packageInfo = {
   name: "sibujs",
-  version: true ? "4.10.1" : "dev",
+  version: true ? "4.12.0" : "dev",
   entryPoints: MODULE_ENTRY_POINTS,
   /**
    * Generate the package.json `exports` map. Module entries resolve to the
@@ -12176,7 +12390,7 @@ var env = {
 };
 
 // src/plugins/versioning.ts
-var VERSION = true ? "4.10.1" : "dev";
+var VERSION = true ? "4.12.0" : "dev";
 var NUM = "(?:0|[1-9]\\d*)";
 var PRE_ID = `(?:${NUM}|\\d*[a-zA-Z-][0-9a-zA-Z-]*)`;
 var BUILD_ID = "[0-9a-zA-Z-]+";
@@ -13033,8 +13247,8 @@ function initDevTools(config) {
   function clearEvents() {
     eventLog.length = 0;
   }
-  function registerComponent(name, element, state2) {
-    hook.components.set(name, { element, state: state2 });
+  function registerComponent(name, element, state3) {
+    hook.components.set(name, { element, state: state3 });
     emit();
   }
   function unregisterComponent(name) {
@@ -15441,9 +15655,9 @@ function zustandAdapter(options) {
   return createPlugin("sibu-zustand", (ctx) => {
     const { store } = options;
     const [getState, setSibuState] = signal(store.getState());
-    const unsubscribe = store.subscribe((state2) => {
+    const unsubscribe = store.subscribe((state3) => {
       batch(() => {
-        setSibuState(state2);
+        setSibuState(state3);
       });
     });
     function select3(selector) {