sibujs 4.0.1 → 4.2.0

package/dist/extras.cjs

@@ -318,23 +318,28 @@ __export(extras_exports, {
 module.exports = __toCommonJS(extras_exports);
 
 // src/core/dev.ts
+var 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"
+);
 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";
 }
-var _isDev = isDev();
 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}`);
   }
 }
@@ -645,7 +650,14 @@ function reactiveBinding(commit, ownerNode) {
   subscriber._disposed = false;
   subscriber._errorPhase = "binding";
   subscriber._errorNode = ownerNode;
-  run();
+  try {
+    run();
+  } catch (err) {
+    subscriber._disposed = true;
+    subscriber._errorNode = void 0;
+    cleanup(subscriber);
+    throw err;
+  }
   return subscriber._dispose ?? (subscriber._dispose = () => {
     subscriber._disposed = true;
     subscriber._errorNode = void 0;
@@ -876,17 +888,16 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _isDev2 = isDev();
-var _runtimeVersion = true ? "4.0.1" : "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 (_isDev2 && !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;
@@ -1232,7 +1243,6 @@ var isBatching = API2.isBatching;
 
 // src/core/signals/signal.ts
 var _g2 = globalThis;
-var _isDev3 = isDev();
 function signal(initial, options) {
   const state2 = {
     value: initial,
@@ -1245,7 +1255,7 @@ function signal(initial, options) {
     _d: false,
     _validate: void 0
   };
-  const debugName = _isDev3 ? options?.name : void 0;
+  const debugName = DEV ? options?.name : void 0;
   const equalsFn = options?.equals;
   if (debugName) state2.__name = debugName;
   function get() {
@@ -1262,7 +1272,7 @@ function signal(initial, options) {
       if (equalsFn(prev, newValue)) return;
       state2.value = newValue;
       state2.__v++;
-      if (_isDev3) {
+      if (DEV) {
         const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
         if (hook) hook.emit("signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
       }
@@ -1270,7 +1280,7 @@ function signal(initial, options) {
         notifySubscribers2(state2);
       }
     };
-  } else if (_isDev3) {
+  } else if (DEV) {
     set = (next) => {
       const prev = state2.value;
       const newValue = typeof next === "function" ? next(prev) : next;
@@ -1295,7 +1305,7 @@ function signal(initial, options) {
       }
     };
   }
-  if (_isDev3) {
+  if (DEV) {
     const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
     if (hook) hook.emit("signal:create", { signal: state2, name: debugName, getter: get, initial });
   }
@@ -2432,11 +2442,10 @@ function syncAdapter(config) {
 }
 
 // src/core/rendering/context.ts
-var _isDev4 = isDev();
 function context(defaultValue) {
   const [getValue, setValue] = signal(defaultValue);
   const warnIfSSR = (method) => {
-    if (!_isDev4 || !isSSR()) return;
+    if (!DEV || !isSSR()) return;
     devWarn(
       `context.${method}() called during SSR. SibuJS context() is application-global \u2014 it is NOT isolated per request, so a concurrent request can observe this value. Do not use context() for request-specific SSR data; pass it explicitly or use request-scoped storage instead.`
     );
@@ -2464,7 +2473,7 @@ function context(defaultValue) {
       setValue(value);
       try {
         const result = fn();
-        if (_isDev4 && result !== null && typeof result?.then === "function") {
+        if (DEV && result !== null && typeof result?.then === "function") {
           devWarn(
             "context.withContext() received an async callback. Scoping is synchronous only \u2014 the previous value is restored as soon as the callback returns its promise, so anything after an `await` runs outside the scope."
           );
@@ -2717,20 +2726,75 @@ function decodeCssEscapes(value) {
   }
   return out;
 }
-function sanitizeCSSValue(value) {
-  if (!CSS_DANGER_GATE.test(value)) return value;
+var BLOCKED_CSS_NEEDLES = [
+  "url(",
+  "expression(",
+  "javascript:",
+  "vbscript:",
+  "-moz-binding",
+  "behavior:",
+  "@import",
+  "image-set(",
+  "filter:progid"
+];
+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}>`;
+}
+var warnedDeclarations = /* @__PURE__ */ new Set();
+var MAX_WARNED_DECLARATIONS = 100;
+var declarationCapAnnounced = false;
+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 sanitizeStyleAttribute(cssText) {
+function sanitizeCSSValue(value, context2) {
+  const reason = blockedCssReason(value);
+  if (reason === -1) return value;
+  warnDroppedDeclaration(value, reason, context2);
+  return "";
+}
+function sanitizeStyleAttribute(cssText, context2) {
   const input2 = String(cssText);
   if (input2.trim() === "") return "";
   if (typeof document === "undefined") {
-    return sanitizeCSSValue(input2) === "" ? "" : input2;
+    return sanitizeCSSValue(input2, context2) === "" ? "" : input2;
   }
   const probe = document.createElement("div");
   try {
@@ -2742,8 +2806,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: context2?.element });
+      continue;
+    }
     const priority = probe.style.getPropertyPriority(property);
     declarations.push(`${property}: ${value}${priority ? ` !${priority}` : ""}`);
   }
@@ -2791,11 +2859,11 @@ function isPolicyAttribute(name) {
   const lower = name.toLowerCase();
   return lower === "style" || URL_ATTRIBUTES.has(lower);
 }
-function sanitizeAttributeString(attr, value) {
+function sanitizeAttributeString(attr, value, context2) {
   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, context2);
   return value;
 }
 
@@ -5111,7 +5179,6 @@ function reportDrainRunaway(label2, executed, remaining) {
     { executed, remaining }
   );
 }
-var _isDev5 = isDev();
 var activeBindingCount = 0;
 function registerDisposer(node, teardown) {
   let disposers = elementDisposers.get(node);
@@ -5120,7 +5187,7 @@ function registerDisposer(node, teardown) {
     elementDisposers.set(node, disposers);
   }
   disposers.push(teardown);
-  if (_isDev5) activeBindingCount++;
+  if (DEV) activeBindingCount++;
 }
 function dispose(node) {
   const stack = [node];
@@ -5143,13 +5210,13 @@ function dispose(node) {
         if (!pending || pending.length === 0) break;
         const snapshot = pending.slice();
         elementDisposers.delete(current);
-        if (_isDev5) 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 (_isDev5) activeBindingCount += rest.length;
+            if (DEV) activeBindingCount += rest.length;
             reportDrainRunaway("dispose", executed, rest.length + (added?.length ?? 0));
             runaway = true;
             break;
@@ -6266,16 +6333,16 @@ function sanitizeCSS(css) {
 function firstCompoundEnd(selector) {
   let parens = 0;
   let brackets = 0;
-  let quote = null;
+  let quote2 = null;
   for (let i2 = 0; i2 < selector.length; i2++) {
     const ch = selector[i2];
-    if (quote) {
+    if (quote2) {
       if (ch === "\\") i2++;
-      else if (ch === quote) quote = null;
+      else if (ch === quote2) quote2 = null;
       continue;
     }
     if (ch === '"' || ch === "'") {
-      quote = ch;
+      quote2 = ch;
       continue;
     }
     if (ch === "\\") {
@@ -6451,7 +6518,6 @@ function removeScopedStyle(scopeId) {
 }
 
 // src/utils/setSafeAttribute.ts
-var _isDev6 = 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";
@@ -6474,7 +6540,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 (_isDev6) {
+    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.`
       );
@@ -6489,7 +6555,7 @@ function setSafeAttribute(el, name, value, options = {}) {
     return true;
   }
   if (isHtmlContentAttribute(name)) {
-    if (_isDev6) {
+    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.`
       );
@@ -6518,7 +6584,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);
@@ -7090,7 +7156,6 @@ function uniqueId(suffix) {
 }
 
 // src/performance/domRecycler.ts
-var _isDev7 = isDev();
 var DOMPool = class {
   constructor(maxSize = 50) {
     this.pools = /* @__PURE__ */ new Map();
@@ -7117,7 +7182,7 @@ var DOMPool = class {
    * is almost certainly a bug.
    */
   release(element) {
-    if (_isDev7 && element.isConnected) {
+    if (DEV && element.isConnected) {
       devWarn(
         "DOMPool.release() called on a still-connected element. Detach it from the DOM first (remove() / dispose())."
       );
@@ -7262,9 +7327,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));
@@ -7395,13 +7460,12 @@ function isForbiddenSsrAttr(lowerName) {
 function sanitizeSsrAttributeValue(lowerName, value) {
   return sanitizeAttributeString(lowerName, value);
 }
-var _isDev8 = isDev();
 var SAFE_ATTR_NAME = /^[A-Za-z_:][-A-Za-z0-9_.:]*$/;
 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)}-->`;
   }
@@ -7447,10 +7511,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)) {
@@ -7492,7 +7556,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}
@@ -7693,11 +7757,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}`;
@@ -7840,7 +7904,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 };
     }
   );
@@ -7886,7 +7950,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."
     );
@@ -8906,8 +8970,101 @@ function isWasmCached(key) {
   return moduleCache.has(key);
 }
 
+// src/core/rendering/focusPreservation.ts
+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 max2 = field.value.length;
+    const start = Math.min(snapshot.start, max2);
+    const end = Math.min(snapshot.end ?? start, max2);
+    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
-var _isDev9 = isDev();
 function bindChildNode(placeholder, getter) {
   let lastNodes = [];
   function commit() {
@@ -8918,6 +9075,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];
@@ -8925,6 +9083,7 @@ function bindChildNode(placeholder, getter) {
         if (node.parentNode) node.parentNode.removeChild(node);
       }
       lastNodes.length = 0;
+      restoreFocusWithin(focused, lastNodes, "bindChildNode");
       return;
     }
     const parent = placeholder.parentNode;
@@ -8941,8 +9100,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 (_isDev9)
-            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);
@@ -8975,13 +9133,13 @@ function bindChildNode(placeholder, getter) {
       prev = node;
     }
     lastNodes = newNodes;
+    restoreFocusWithin(focused, newNodes, "bindChildNode");
   }
   return reactiveBinding2(commit, placeholder);
 }
 
 // src/core/rendering/tagFactory.ts
 var SVG_NS3 = "http://www.w3.org/2000/svg";
-var _isDev10 = isDev();
 var BLOCKED_TAGS = /* @__PURE__ */ new Set(["script", "iframe", "object", "embed", "frame", "frameset"]);
 function isBlockedTag(tag) {
   return BLOCKED_TAGS.has(tag.toLowerCase());
@@ -8999,18 +9157,9 @@ var CLOBBER_RISKY_IDS = /* @__PURE__ */ new Set([
   "self",
   "frames"
 ]);
-function looksLikeClassList(s2) {
-  const t = s2.trim();
-  if (!t) return false;
-  const tokens = t.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);
@@ -9022,13 +9171,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;
@@ -9038,11 +9187,11 @@ 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 }));
     }
   }
 }
@@ -9149,11 +9298,26 @@ var tagFactory = (tag, ns) => {
         appendChildren(el, second);
         return el;
       }
-      if (_isDev10 && 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;
     }
@@ -9170,7 +9334,7 @@ var tagFactory = (tag, ns) => {
     if (pClass != null) applyClass(el, pClass);
     const pId = props.id;
     if (pId != null) {
-      if (_isDev10 && 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.`
         );
@@ -9185,7 +9349,7 @@ var tagFactory = (tag, ns) => {
         const handler = pOn[ev];
         if (typeof handler === "function") {
           el.addEventListener(ev, handler);
-        } else if (_isDev10) {
+        } else if (DEV) {
           devWarn(
             `tagFactory: on.${ev} handler is not a function (got ${typeof handler}). Event listener was not attached.`
           );