sibujs 4.1.0 → 4.2.0

package/dist/plugins.cjs

@@ -22,29 +22,34 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 
 // src/core/dev.ts
 function isDev() {
-  return typeof globalThis.__SIBU_DEV__ !== "undefined" ? !!globalThis.__SIBU_DEV__ : (
-    // The bare `__SIBU_DEV__` is a bundler define that only exists in
-    // production builds; under the test runner it is always undefined, so
-    // this branch is unreachable here.
-    /* v8 ignore next 2 */
-    typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : typeof process !== "undefined" && process.env?.NODE_ENV !== "production"
-  );
+  if (typeof globalThis.__SIBU_DEV__ !== "undefined") return !!globalThis.__SIBU_DEV__;
+  if (typeof __SIBU_DEV__ !== "undefined") return !!__SIBU_DEV__;
+  return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
 }
 function devAssert(condition, message) {
-  if (_isDev && !condition) {
+  if ((typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : DEV) && !condition) {
     throw new Error(`[SibuJS] ${message}`);
   }
 }
+function devWarnLazy(build) {
+  if (typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : DEV) {
+    const message = build();
+    if (message) console.warn(`[SibuJS] ${message}`);
+  }
+}
 function devWarn(message) {
-  if (_isDev) {
+  if (typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : DEV) {
     console.warn(`[SibuJS] ${message}`);
   }
 }
-var _isDev;
+var DEV;
 var init_dev = __esm({
   "src/core/dev.ts"() {
     "use strict";
-    _isDev = isDev();
+    DEV = typeof __SIBU_DEV__ !== "undefined" ? !!__SIBU_DEV__ : typeof globalThis.__SIBU_DEV__ !== "undefined" ? !!globalThis.__SIBU_DEV__ : (
+      // safe default: off in browser, on in test/dev Node
+      typeof process !== "undefined" && process.env?.NODE_ENV !== "production"
+    );
   }
 });
 
@@ -234,20 +239,61 @@ function decodeCssEscapes(value) {
   }
   return out;
 }
-function sanitizeCSSValue(value) {
-  if (!CSS_DANGER_GATE.test(value)) return value;
+function describeElement(el) {
+  if (!el) return "an element";
+  let out = el.tagName.toLowerCase();
+  const id = el.getAttribute("id");
+  if (id) out += `#${id}`;
+  const cls = el.getAttribute("class");
+  if (cls) out += `.${cls.trim().split(/\s+/).slice(0, 3).join(".")}`;
+  return `<${out}>`;
+}
+function warnDroppedDeclaration(value, reason, ctx) {
+  devWarnLazy(() => {
+    const reasons = [
+      "url() in an inline style is an exfiltration channel: the browser fetches it immediately and the URL's path or query can carry page data off-origin",
+      "expression() executes arbitrary script in legacy engines",
+      "the javascript: scheme executes script",
+      "the vbscript: scheme executes script",
+      "-moz-binding loads and runs remote XBL",
+      "behavior: loads and runs a remote HTC script",
+      "@import pulls in a remote stylesheet",
+      "image-set() fetches remote images, the same exfiltration channel as url()",
+      "filter:progid activates legacy scriptable filters"
+    ];
+    const declaration = ctx?.property ? `${ctx.property}: ${value}` : value;
+    const where = describeElement(ctx?.element);
+    const key = `${where}|${declaration}`;
+    if (warnedDeclarations.has(key)) return "";
+    if (warnedDeclarations.size >= MAX_WARNED_DECLARATIONS) {
+      if (declarationCapAnnounced) return "";
+      declarationCapAnnounced = true;
+      return `${MAX_WARNED_DECLARATIONS} distinct dropped style declarations have been reported; suppressing further ones for the rest of this session so they cannot flood the console. The declarations are still dropped \u2014 only the reporting stops. Fix the reported ones and reload to see any that remain.`;
+    }
+    warnedDeclarations.add(key);
+    return `style declaration "${declaration}" was dropped by the style sanitizer on ${where} \u2014 ${reasons[reason]}. The element renders without it, which usually looks like a missing image rather than an error. Sanctioned alternatives: for a content image use an <img> element (or a <picture>); for decoration, put the rule in a stylesheet and set a class instead \u2014 stylesheet CSS is not sanitized, only inline style attributes are. If this declaration is not yours, it came from untrusted data and the drop just prevented an exfiltration.`;
+  });
+}
+function blockedCssReason(value) {
+  if (!CSS_DANGER_GATE.test(value)) return -1;
   const normalized = value.includes("\\") ? decodeCssEscapes(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 "";
+  for (let i2 = 0; i2 < BLOCKED_CSS_NEEDLES.length; i2++) {
+    if (lower.includes(BLOCKED_CSS_NEEDLES[i2])) return i2;
   }
-  return value;
+  return -1;
+}
+function sanitizeCSSValue(value, context) {
+  const reason = blockedCssReason(value);
+  if (reason === -1) return value;
+  warnDroppedDeclaration(value, reason, context);
+  return "";
 }
-function sanitizeStyleAttribute(cssText) {
+function sanitizeStyleAttribute(cssText, context) {
   const input2 = String(cssText);
   if (input2.trim() === "") return "";
   if (typeof document === "undefined") {
-    return sanitizeCSSValue(input2) === "" ? "" : input2;
+    return sanitizeCSSValue(input2, context) === "" ? "" : input2;
   }
   const probe = document.createElement("div");
   try {
@@ -259,8 +305,12 @@ function sanitizeStyleAttribute(cssText) {
   for (let i2 = 0; i2 < probe.style.length; i2++) {
     const property = probe.style[i2];
     const value = probe.style.getPropertyValue(property);
-    if (sanitizeCSSValue(value) === "") continue;
-    if (sanitizeCSSValue(`${property}:${value}`) === "") continue;
+    let reason = blockedCssReason(value);
+    if (reason === -1) reason = blockedCssReason(`${property}:${value}`);
+    if (reason !== -1) {
+      warnDroppedDeclaration(value, reason, { property, element: context?.element });
+      continue;
+    }
     const priority = probe.style.getPropertyPriority(property);
     declarations.push(`${property}: ${value}${priority ? ` !${priority}` : ""}`);
   }
@@ -276,21 +326,36 @@ function isPolicyAttribute(name) {
   const lower = name.toLowerCase();
   return lower === "style" || URL_ATTRIBUTES.has(lower);
 }
-function sanitizeAttributeString(attr, value) {
+function sanitizeAttributeString(attr, value, context) {
   const lower = attr.toLowerCase();
   if (lower === "srcset") return sanitizeSrcset(value);
   if (URL_ATTRIBUTES.has(lower)) return sanitizeUrl(value);
-  if (lower === "style") return sanitizeStyleAttribute(value);
+  if (lower === "style") return sanitizeStyleAttribute(value, context);
   return value;
 }
-var SAFE_URL_PROTOCOLS, OUTER_TRIM, SRCSET_DESCRIPTOR, CSS_DANGER_GATE, URL_ATTRIBUTES, HTML_CONTENT_ATTRIBUTES;
+var SAFE_URL_PROTOCOLS, OUTER_TRIM, SRCSET_DESCRIPTOR, CSS_DANGER_GATE, BLOCKED_CSS_NEEDLES, warnedDeclarations, MAX_WARNED_DECLARATIONS, declarationCapAnnounced, URL_ATTRIBUTES, HTML_CONTENT_ATTRIBUTES;
 var init_sanitize = __esm({
   "src/utils/sanitize.ts"() {
     "use strict";
+    init_dev();
     SAFE_URL_PROTOCOLS = ["http:", "https:", "mailto:", "tel:", "ftp:"];
     OUTER_TRIM = /^[\x00-\x20\x7f-\x9f]+|[\x00-\x20\x7f-\x9f]+$/g;
     SRCSET_DESCRIPTOR = /^\s+\d+(\.\d+)?[wx]$/;
     CSS_DANGER_GATE = /[(:@\\]/;
+    BLOCKED_CSS_NEEDLES = [
+      "url(",
+      "expression(",
+      "javascript:",
+      "vbscript:",
+      "-moz-binding",
+      "behavior:",
+      "@import",
+      "image-set(",
+      "filter:progid"
+    ];
+    warnedDeclarations = /* @__PURE__ */ new Set();
+    MAX_WARNED_DECLARATIONS = 100;
+    declarationCapAnnounced = false;
     URL_ATTRIBUTES = /* @__PURE__ */ new Set([
       "href",
       "xlink:href",
@@ -338,7 +403,7 @@ function registerDisposer(node, teardown) {
     elementDisposers.set(node, disposers);
   }
   disposers.push(teardown);
-  if (_isDev4) activeBindingCount++;
+  if (DEV) activeBindingCount++;
 }
 function unregisterDisposer(node, teardown) {
   const disposers = elementDisposers.get(node);
@@ -346,7 +411,7 @@ function unregisterDisposer(node, teardown) {
   const index = disposers.indexOf(teardown);
   if (index === -1) return;
   disposers.splice(index, 1);
-  if (_isDev4) activeBindingCount--;
+  if (DEV) activeBindingCount--;
   if (disposers.length === 0) elementDisposers.delete(node);
 }
 function dispose(node) {
@@ -370,13 +435,13 @@ function dispose(node) {
         if (!pending || pending.length === 0) break;
         const snapshot = pending.slice();
         elementDisposers.delete(current);
-        if (_isDev4) activeBindingCount -= snapshot.length;
+        if (DEV) activeBindingCount -= snapshot.length;
         for (let i3 = 0; i3 < snapshot.length; i3++) {
           if (executed >= MAX_DRAIN_TEARDOWNS) {
             const rest = snapshot.slice(i3);
             const added = elementDisposers.get(current);
             elementDisposers.set(current, added ? rest.concat(added) : rest);
-            if (_isDev4) activeBindingCount += rest.length;
+            if (DEV) activeBindingCount += rest.length;
             reportDrainRunaway("dispose", executed, rest.length + (added?.length ?? 0));
             runaway = true;
             break;
@@ -404,7 +469,7 @@ function replaceChildrenSafely(parent, ...next) {
   parent.replaceChildren(...next);
 }
 function checkLeaks(warnThreshold = 0) {
-  if (!_isDev4) return 0;
+  if (!DEV) return 0;
   if (warnThreshold > 0 && activeBindingCount > warnThreshold) {
     devWarn(
       `checkLeaks: ${activeBindingCount} active DOM bindings detected. Expected \u2264${warnThreshold}. This may indicate a component was removed from the DOM without calling dispose().`
@@ -412,7 +477,7 @@ function checkLeaks(warnThreshold = 0) {
   }
   return activeBindingCount;
 }
-var elementDisposers, MAX_DRAIN_TEARDOWNS, _isDev4, activeBindingCount;
+var elementDisposers, MAX_DRAIN_TEARDOWNS, activeBindingCount;
 var init_dispose = __esm({
   "src/core/rendering/dispose.ts"() {
     "use strict";
@@ -420,7 +485,6 @@ var init_dispose = __esm({
     init_errors();
     elementDisposers = /* @__PURE__ */ new WeakMap();
     MAX_DRAIN_TEARDOWNS = 1e4;
-    _isDev4 = isDev();
     activeBindingCount = 0;
   }
 });
@@ -507,9 +571,9 @@ function parseMetaRefreshContent(content) {
   i2++;
   while (i2 < raw.length && isAsciiWhitespace(raw[i2])) i2++;
   let destination;
-  const quote = raw[i2];
-  if (quote === '"' || quote === "'") {
-    const close = raw.indexOf(quote, i2 + 1);
+  const quote2 = raw[i2];
+  if (quote2 === '"' || quote2 === "'") {
+    const close = raw.indexOf(quote2, i2 + 1);
     if (close === -1) return forbidden("unterminated quoted destination");
     destination = raw.slice(i2 + 1, close);
     const rest = trimAsciiWhitespace(raw.slice(close + 1));
@@ -681,7 +745,7 @@ function isSafeAttrName(name) {
   return SAFE_ATTR_NAME.test(name);
 }
 function ssrErrorComment(err) {
-  if (_isDev8) {
+  if (DEV) {
     const msg = escapeHtml(err instanceof Error ? err.message : String(err));
     return `<!--SSR error: ${safeCommentText(msg)}-->`;
   }
@@ -711,10 +775,10 @@ function renderToString(element) {
   }
   const tag = element.tagName.toLowerCase();
   if (tag === "script" || tag === "style") {
-    return _isDev8 ? `<!--ssr:${tag}-stripped-->` : "";
+    return DEV ? `<!--ssr:${tag}-stripped-->` : "";
   }
   if (!/^[a-z][a-z0-9-]*$/i.test(tag)) {
-    return _isDev8 ? "<!--ssr:invalid-tag-->" : "";
+    return DEV ? "<!--ssr:invalid-tag-->" : "";
   }
   let html2 = `<${tag}`;
   for (const attr of Array.from(element.attributes)) {
@@ -756,7 +820,7 @@ function hydrate(component, container, options = {}) {
       const first = mismatches[0];
       if (options.onMismatch) {
         options.onMismatch(first);
-      } else if (_isDev8) {
+      } else if (DEV) {
         console.warn(
           `[SibuJS hydration] ${first.message}
   at ${first.path}
@@ -957,11 +1021,11 @@ async function* renderToStream(element) {
   }
   const tag = element.tagName.toLowerCase();
   if (tag === "script" || tag === "style") {
-    if (_isDev8) yield `<!--ssr:${tag}-stripped-->`;
+    if (DEV) yield `<!--ssr:${tag}-stripped-->`;
     return;
   }
   if (!/^[a-z][a-z0-9-]*$/i.test(tag)) {
-    if (_isDev8) yield "<!--ssr:invalid-tag-->";
+    if (DEV) yield "<!--ssr:invalid-tag-->";
     return;
   }
   let openTag = `<${tag}`;
@@ -1103,7 +1167,7 @@ function ssrSuspense(props) {
     },
     (err) => {
       if (timer) clearTimeout(timer);
-      if (_isDev8) console.warn("[SibuJS SSR] ssrSuspense rejected:", err);
+      if (DEV) console.warn("[SibuJS SSR] ssrSuspense rejected:", err);
       return { id, html: fallbackHtml };
     }
   );
@@ -1146,7 +1210,7 @@ function serializeState(state2, nonce, options) {
 }
 function deserializeState(validate) {
   if (typeof window === "undefined") return void 0;
-  if (_isDev8 && !validate) {
+  if (DEV && !validate) {
     console.warn(
       "[SibuJS SSR] deserializeState() called without a validate guard \u2014 tampered SSR payloads will not be detected."
     );
@@ -1163,7 +1227,7 @@ function escapeHtml(str) {
 function escapeAttr(str) {
   return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-var _isDev8, SAFE_ATTR_NAME, VOID_ELEMENTS, SAFE_ID, SAFE_SUSPENSE_ID, SSR_DATA_ATTR, DEFAULT_MAX_SSR_BYTES;
+var SAFE_ATTR_NAME, VOID_ELEMENTS, SAFE_ID, SAFE_SUSPENSE_ID, SSR_DATA_ATTR, DEFAULT_MAX_SSR_BYTES;
 var init_ssr = __esm({
   "src/platform/ssr.ts"() {
     "use strict";
@@ -1173,7 +1237,6 @@ var init_ssr = __esm({
     init_headEntry();
     init_metaRefresh();
     init_sanitize();
-    _isDev8 = isDev();
     SAFE_ATTR_NAME = /^[A-Za-z_:][-A-Za-z0-9_.:]*$/;
     VOID_ELEMENTS = /* @__PURE__ */ new Set([
       "area",
@@ -1290,7 +1353,6 @@ init_sanitize();
 // src/utils/setSafeAttribute.ts
 init_dev();
 init_sanitize();
-var _isDev2 = 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";
@@ -1313,7 +1375,7 @@ function setSafeAttribute(el, name, value, options = {}) {
   const ns = namespaceFor(el, name);
   const localName = ns ? name.slice(name.indexOf(":") + 1) : name;
   if (isEventHandlerAttr(name)) {
-    if (_isDev2) {
+    if (DEV) {
       devWarn(
         `${options.label ?? "setSafeAttribute"}: refusing to set event-handler attribute "${name}". Its value would be evaluated as JavaScript. Use on:{ ${name.slice(2)}: fn } instead.`
       );
@@ -1328,7 +1390,7 @@ function setSafeAttribute(el, name, value, options = {}) {
     return true;
   }
   if (isHtmlContentAttribute(name)) {
-    if (_isDev2) {
+    if (DEV) {
       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.`
       );
@@ -1357,7 +1419,7 @@ function setSafeAttribute(el, name, value, options = {}) {
     setProp(el, idlName, idlName === "checked" ? Boolean(value) : str);
     return true;
   }
-  const safe = sanitizeAttributeString(name, str);
+  const safe = sanitizeAttributeString(name, str, { element: el });
   const current = ns ? el.getAttributeNS(ns, localName) : el.getAttribute(name);
   if (current === safe) return true;
   if (ns) el.setAttributeNS(ns, name, safe);
@@ -1825,17 +1887,16 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _isDev3 = isDev();
-var _runtimeVersion = true ? "4.1.0" : "dev";
+var _runtimeVersion = true ? "4.2.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g2 = globalThis;
   const existing = g2[REGISTRY_KEY];
   if (existing) {
-    if (_isDev3 && !existing.__dupWarned) {
+    if (DEV && !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']).`
+        `Multiple instances of the reactive runtime detected on this page (active: ${existing.version}, duplicate: ${_runtimeVersion}). Reactivity is NOT broken and no bundler configuration is required: every copy routes through the first one via a global registry, so signal writes still reach subscribers registered by any copy. This is only a SIZE issue \u2014 the duplicate copy's bytes are downloaded and parsed for nothing. If you want them back, de-duplicate sibujs in your bundler (Vite: resolve.dedupe: ['sibujs']). Mismatched VERSIONS above are worth fixing regardless, since only the first one loaded is used.`
       );
     }
     return existing;
@@ -1906,7 +1967,103 @@ function bindAttribute(el, attr, getter) {
 init_dev();
 init_errors();
 init_dispose();
-var _isDev5 = isDev();
+
+// src/core/rendering/focusPreservation.ts
+init_dev();
+var IDENTITY_ATTRS = ["data-focus-key", "id", "name"];
+var SELECTABLE_TYPES = /* @__PURE__ */ new Set(["text", "search", "url", "tel", "password", ""]);
+function selectionOf(el) {
+  const tag = el.tagName;
+  const selectable = tag === "TEXTAREA" || tag === "INPUT" && SELECTABLE_TYPES.has(el.type.toLowerCase());
+  if (!selectable) return { start: null, end: null, direction: null };
+  const field = el;
+  return { start: field.selectionStart, end: field.selectionEnd, direction: field.selectionDirection };
+}
+function captureFocusWithin(nodes) {
+  if (nodes.length === 0 || typeof document === "undefined") return null;
+  const active = document.activeElement;
+  if (!active || active === document.body) return null;
+  let inside = false;
+  for (let i2 = 0; i2 < nodes.length; i2++) {
+    const n = nodes[i2];
+    if (n === active || n.nodeType === 1 && n.contains(active)) {
+      inside = true;
+      break;
+    }
+  }
+  if (!inside) return null;
+  let attr = null;
+  let value = null;
+  for (let i2 = 0; i2 < IDENTITY_ATTRS.length; i2++) {
+    const candidate = active.getAttribute(IDENTITY_ATTRS[i2]);
+    if (candidate) {
+      attr = IDENTITY_ATTRS[i2];
+      value = candidate;
+      break;
+    }
+  }
+  return { el: active, attr, value, tag: active.tagName, ...selectionOf(active) };
+}
+function quote(value) {
+  return `"${value.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+}
+function findUniqueByIdentity(nodes, selector) {
+  let el = null;
+  let count = 0;
+  for (let i2 = 0; i2 < nodes.length; i2++) {
+    const n = nodes[i2];
+    if (n.nodeType !== 1) continue;
+    const root = n;
+    if (root.matches(selector)) {
+      count++;
+      el ?? (el = root);
+    }
+    const inner = root.querySelectorAll(selector);
+    for (let j = 0; j < inner.length; j++) {
+      count++;
+      el ?? (el = inner[j]);
+    }
+    if (count > 1) return { el: null, count };
+  }
+  return count === 1 ? { el, count } : { el: null, count };
+}
+function refocus(el, snapshot) {
+  el.focus();
+  if (snapshot.start !== null && typeof el.setSelectionRange === "function") {
+    const field = el;
+    const max = field.value.length;
+    const start = Math.min(snapshot.start, max);
+    const end = Math.min(snapshot.end ?? start, max);
+    field.setSelectionRange(start, end, snapshot.direction ?? "none");
+  }
+}
+function restoreFocusWithin(snapshot, nodes, where) {
+  if (!snapshot) return;
+  if (typeof document === "undefined") return;
+  const active = document.activeElement;
+  if (active === snapshot.el) return;
+  if (active && active !== document.body && active !== document.documentElement) return;
+  if (snapshot.el.isConnected) {
+    refocus(snapshot.el, snapshot);
+    return;
+  }
+  let ambiguous = false;
+  if (snapshot.attr && snapshot.value) {
+    const { el: replacement, count } = findUniqueByIdentity(nodes, `[${snapshot.attr}=${quote(snapshot.value)}]`);
+    if (replacement && replacement.tagName === snapshot.tag) {
+      refocus(replacement, snapshot);
+      return;
+    }
+    ambiguous = count > 1;
+  }
+  devWarnLazy(() => {
+    const id = snapshot.attr ? ` (${snapshot.attr}="${snapshot.value}")` : "";
+    const why = ambiguous ? `several elements in the rebuilt subtree share ${snapshot.attr}="${snapshot.value}", so there is no way to tell which one the user was in \u2014 a shared name (a radio group) identifies a GROUP, not a control. Add a unique id or data-focus-key to each` : "no element in the rebuilt subtree carries the same identity. Give it a stable id, name, or data-focus-key that the rebuild reproduces";
+    return `${where}: a reactive rebuild discarded the focused element <${snapshot.tag.toLowerCase()}>${id} and could not re-establish it, so focus fell back to <body>. An in-progress edit ends here, and an in-progress IME composition is lost outright \u2014 a composition belongs to the DOM node, so it cannot survive the node being destroyed. ${why}, or stop the rebuild from happening: key the subtree with match(() => shapeKey(), { \u2026 }) so it is re-created only when the shape actually changes, and drive the rest with reactive attributes and text children, which mutate nodes in place instead of replacing them.`;
+  });
+}
+
+// src/reactivity/bindChildNode.ts
 function bindChildNode(placeholder, getter) {
   let lastNodes = [];
   function commit() {
@@ -1917,6 +2074,7 @@ function bindChildNode(placeholder, getter) {
       reportError(err, { phase: "binding", name: "bindChildNode", node: placeholder });
       return;
     }
+    const focused = captureFocusWithin(lastNodes);
     if (result == null || typeof result === "boolean") {
       for (let i2 = 0; i2 < lastNodes.length; i2++) {
         const node = lastNodes[i2];
@@ -1924,6 +2082,7 @@ function bindChildNode(placeholder, getter) {
         if (node.parentNode) node.parentNode.removeChild(node);
       }
       lastNodes.length = 0;
+      restoreFocusWithin(focused, lastNodes, "bindChildNode");
       return;
     }
     const parent = placeholder.parentNode;
@@ -1940,8 +2099,7 @@ function bindChildNode(placeholder, getter) {
         if (item == null || typeof item === "boolean") continue;
         const node = item instanceof Node ? item : document.createTextNode(String(item));
         if (seen.has(node)) {
-          if (_isDev5)
-            devWarn("bindChildNode: duplicate node reference in array \u2014 only the first occurrence is rendered.");
+          if (DEV) devWarn("bindChildNode: duplicate node reference in array \u2014 only the first occurrence is rendered.");
           continue;
         }
         seen.add(node);
@@ -1974,6 +2132,7 @@ function bindChildNode(placeholder, getter) {
       prev = node;
     }
     lastNodes = newNodes;
+    restoreFocusWithin(focused, newNodes, "bindChildNode");
   }
   return reactiveBinding2(commit, placeholder);
 }
@@ -1982,7 +2141,6 @@ function bindChildNode(placeholder, getter) {
 init_sanitize();
 init_dispose();
 var SVG_NS2 = "http://www.w3.org/2000/svg";
-var _isDev6 = isDev();
 var BLOCKED_TAGS = /* @__PURE__ */ new Set(["script", "iframe", "object", "embed", "frame", "frameset"]);
 function isBlockedTag(tag) {
   return BLOCKED_TAGS.has(tag.toLowerCase());
@@ -2000,18 +2158,9 @@ var CLOBBER_RISKY_IDS = /* @__PURE__ */ new Set([
   "self",
   "frames"
 ]);
-function looksLikeClassList(s2) {
-  const t2 = s2.trim();
-  if (!t2) return false;
-  const tokens = t2.split(/\s+/);
-  let sawClassish = false;
-  for (let i2 = 0; i2 < tokens.length; i2++) {
-    const tok = tokens[i2];
-    if (!/^-?[A-Za-z_][A-Za-z0-9_:/.-]*$/.test(tok)) return false;
-    if (/[-:/0-9]/.test(tok)) sawClassish = true;
-  }
-  return sawClassish;
-}
+var warnedLoneStrings = /* @__PURE__ */ new Set();
+var MAX_WARNED_LONE_STRINGS = 100;
+var loneStringCapAnnounced = false;
 var kebabCache = /* @__PURE__ */ new Map();
 function toKebab(prop) {
   let cached = kebabCache.get(prop);
@@ -2023,13 +2172,13 @@ function toKebab(prop) {
 function applyStyle(el, style2) {
   if (typeof style2 === "function") {
     const teardown = reactiveBinding2(() => {
-      el.setAttribute("style", sanitizeStyleAttribute(String(style2())));
+      el.setAttribute("style", sanitizeStyleAttribute(String(style2()), { element: el }));
     }, el);
     registerDisposer(el, teardown);
     return;
   }
   if (typeof style2 === "string") {
-    el.setAttribute("style", sanitizeStyleAttribute(style2));
+    el.setAttribute("style", sanitizeStyleAttribute(style2, { element: el }));
     return;
   }
   const htmlEl = el;
@@ -2039,14 +2188,26 @@ function applyStyle(el, style2) {
     if (typeof val === "function") {
       const getter = val;
       const teardown = reactiveBinding2(() => {
-        htmlEl.style.setProperty(name, sanitizeCSSValue(String(getter())));
+        htmlEl.style.setProperty(name, sanitizeCSSValue(String(getter()), { property: name, element: el }));
       }, el);
       registerDisposer(el, teardown);
     } else {
-      htmlEl.style.setProperty(name, sanitizeCSSValue(String(val)));
+      htmlEl.style.setProperty(name, sanitizeCSSValue(String(val), { property: name, element: el }));
     }
   }
 }
+function resolveClassValue(cls) {
+  if (typeof cls === "string") return cls;
+  if (typeof cls === "function") return cls();
+  if (!cls) return "";
+  let out = "";
+  for (const name in cls) {
+    const val = cls[name];
+    const active = typeof val === "function" ? val() : val;
+    if (active) out = out ? `${out} ${name}` : name;
+  }
+  return out;
+}
 function applyClass(el, cls) {
   if (typeof cls === "string") {
     el.setAttribute("class", cls);
@@ -2150,11 +2311,26 @@ var tagFactory = (tag, ns) => {
         appendChildren(el, second);
         return el;
       }
-      if (_isDev6 && looksLikeClassList(first)) {
-        devWarn(
-          `tagFactory: lone string "${first}" looks like a class list but is being rendered as TEXT. For a class, use ${tag}({ class: "${first}" }) \u2014 or ${tag}("${first}", children) to set the class AND add children.`
-        );
-      }
+      devWarnLazy(() => {
+        const tokens = first.trim().split(/\s+/);
+        if (tokens.length < 2) return "";
+        let utilityTokens = 0;
+        for (let i2 = 0; i2 < tokens.length; i2++) {
+          const tok = tokens[i2];
+          if (!/^-?[A-Za-z_][A-Za-z0-9_:/.-]*$/.test(tok)) return "";
+          if (/[-:/0-9]/.test(tok)) utilityTokens++;
+        }
+        if (utilityTokens < 2) return "";
+        const key = `${tag}|${first}`;
+        if (warnedLoneStrings.has(key)) return "";
+        if (warnedLoneStrings.size >= MAX_WARNED_LONE_STRINGS) {
+          if (loneStringCapAnnounced) return "";
+          loneStringCapAnnounced = true;
+          return `tagFactory: ${MAX_WARNED_LONE_STRINGS} distinct lone-string class warnings have been reported; suppressing further ones for the rest of this session so they cannot flood the console. Fix the reported ones and reload to see any that remain.`;
+        }
+        warnedLoneStrings.add(key);
+        return `tagFactory: lone string "${first}" looks like a class list but is being rendered as TEXT. For a class, use ${tag}({ class: "${first}" }) \u2014 or ${tag}("${first}", children) to set the class AND add children.`;
+      });
       el.textContent = first;
       return el;
     }
@@ -2171,7 +2347,7 @@ var tagFactory = (tag, ns) => {
     if (pClass != null) applyClass(el, pClass);
     const pId = props.id;
     if (pId != null) {
-      if (_isDev6 && typeof pId === "string" && CLOBBER_RISKY_IDS.has(pId.toLowerCase())) {
+      if (DEV && typeof pId === "string" && CLOBBER_RISKY_IDS.has(pId.toLowerCase())) {
         devWarn(
           `tagFactory: element id="${pId}" matches a common global and may cause DOM clobbering. Avoid setting ids from untrusted input.`
         );
@@ -2186,7 +2362,7 @@ var tagFactory = (tag, ns) => {
         const handler = pOn[ev];
         if (typeof handler === "function") {
           el.addEventListener(ev, handler);
-        } else if (_isDev6) {
+        } else if (DEV) {
           devWarn(
             `tagFactory: on.${ev} handler is not a function (got ${typeof handler}). Event listener was not attached.`
           );
@@ -2418,7 +2594,6 @@ var isBatching = API2.isBatching;
 // src/core/signals/signal.ts
 init_dev();
 var _g = globalThis;
-var _isDev7 = isDev();
 function signal(initial, options) {
   const state2 = {
     value: initial,
@@ -2431,7 +2606,7 @@ function signal(initial, options) {
     _d: false,
     _validate: void 0
   };
-  const debugName = _isDev7 ? options?.name : void 0;
+  const debugName = DEV ? options?.name : void 0;
   const equalsFn = options?.equals;
   if (debugName) state2.__name = debugName;
   function get() {
@@ -2448,7 +2623,7 @@ function signal(initial, options) {
       if (equalsFn(prev, newValue)) return;
       state2.value = newValue;
       state2.__v++;
-      if (_isDev7) {
+      if (DEV) {
         const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
         if (hook) hook.emit("signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
       }
@@ -2456,7 +2631,7 @@ function signal(initial, options) {
         notifySubscribers2(state2);
       }
     };
-  } else if (_isDev7) {
+  } else if (DEV) {
     set = (next) => {
       const prev = state2.value;
       const newValue = typeof next === "function" ? next(prev) : next;
@@ -2481,7 +2656,7 @@ function signal(initial, options) {
       }
     };
   }
-  if (_isDev7) {
+  if (DEV) {
     const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
     if (hook) hook.emit("signal:create", { signal: state2, name: debugName, getter: get, initial });
   }
@@ -4147,7 +4322,6 @@ function RouterLink(props, children) {
   if (!_routerRef.current) throw new Error("Router not initialized. Call createRouter() first.");
   const { to, replace: replace2 = false, activeClass, exactActiveClass, nodes, target, rel, class: classAttr, ...attrs } = props;
   const content = children !== void 0 ? children : nodes;
-  const baseClass = typeof classAttr === "string" ? classAttr : "";
   const routeGetter = _routerRef.current.routeGetter;
   const rawHref = _routerRef.current["resolvePath"](to);
   const kind = classifyNavigationTarget(rawHref);
@@ -4183,7 +4357,7 @@ function RouterLink(props, children) {
       if (exactActiveClass) classes.push(exactActiveClass);
       else if (options.linkExactActiveClass) classes.push(options.linkExactActiveClass);
     }
-    link2.className = [baseClass, ...classes].filter(Boolean).join(" ");
+    link2.className = [resolveClassValue(classAttr), ...classes].filter(Boolean).join(" ");
   });
   registerDisposer(link2, effectCleanup);
   Object.entries(attrs).forEach(([key, value]) => {
@@ -4195,7 +4369,7 @@ function RouterLink(props, children) {
         const safe = sanitizeUrl(str);
         if (safe) link2.setAttribute(key, safe);
       } else if (lkey === "style") {
-        link2.setAttribute(key, sanitizeStyleAttribute(str));
+        link2.setAttribute(key, sanitizeStyleAttribute(str, { element: link2 }));
       } else {
         link2.setAttribute(key, str);
       }