sibujs 4.0.1 → 4.2.0

package/dist/index.cjs

@@ -95,6 +95,7 @@ __export(index_exports, {
   enhance: () => enhance,
   enhanceAll: () => enhanceAll,
   enqueueBatchedSignal: () => enqueueBatchedSignal,
+  external: () => external,
   fieldset: () => fieldset,
   figcaption: () => figcaption,
   figure: () => figure,
@@ -345,23 +346,28 @@ function reportError(error, context2) {
 }
 
 // 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}`);
   }
 }
@@ -376,7 +382,6 @@ function reportDrainRunaway(label2, executed, remaining) {
     { executed, remaining }
   );
 }
-var _isDev2 = isDev();
 var activeBindingCount = 0;
 function registerDisposer(node, teardown) {
   let disposers = elementDisposers.get(node);
@@ -385,7 +390,7 @@ function registerDisposer(node, teardown) {
     elementDisposers.set(node, disposers);
   }
   disposers.push(teardown);
-  if (_isDev2) activeBindingCount++;
+  if (DEV) activeBindingCount++;
 }
 function unregisterDisposer(node, teardown) {
   const disposers = elementDisposers.get(node);
@@ -393,7 +398,7 @@ function unregisterDisposer(node, teardown) {
   const index = disposers.indexOf(teardown);
   if (index === -1) return;
   disposers.splice(index, 1);
-  if (_isDev2) activeBindingCount--;
+  if (DEV) activeBindingCount--;
   if (disposers.length === 0) elementDisposers.delete(node);
 }
 function dispose(node) {
@@ -417,13 +422,13 @@ function dispose(node) {
         if (!pending || pending.length === 0) break;
         const snapshot = pending.slice();
         elementDisposers.delete(current);
-        if (_isDev2) 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 (_isDev2) activeBindingCount += rest.length;
+            if (DEV) activeBindingCount += rest.length;
             reportDrainRunaway("dispose", executed, rest.length + (added?.length ?? 0));
             runaway = true;
             break;
@@ -451,7 +456,7 @@ function replaceChildrenSafely(parent, ...next) {
   parent.replaceChildren(...next);
 }
 function checkLeaks(warnThreshold = 0) {
-  if (!_isDev2) 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().`
@@ -553,20 +558,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 sanitizeCSSValue(value, context2) {
+  const reason = blockedCssReason(value);
+  if (reason === -1) return value;
+  warnDroppedDeclaration(value, reason, context2);
+  return "";
 }
-function sanitizeStyleAttribute(cssText) {
+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 {
@@ -578,8 +638,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}` : ""}`);
   }
@@ -607,16 +671,15 @@ var HTML_CONTENT_ATTRIBUTES = /* @__PURE__ */ new Set(["srcdoc"]);
 function isHtmlContentAttribute(name) {
   return HTML_CONTENT_ATTRIBUTES.has(name.toLowerCase());
 }
-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;
 }
 
 // src/utils/setSafeAttribute.ts
-var _isDev3 = 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";
@@ -639,7 +702,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 (_isDev3) {
+    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.`
       );
@@ -654,7 +717,7 @@ function setSafeAttribute(el, name, value, options = {}) {
     return true;
   }
   if (isHtmlContentAttribute(name)) {
-    if (_isDev3) {
+    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.`
       );
@@ -683,7 +746,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);
@@ -909,7 +972,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;
@@ -1140,17 +1210,16 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _isDev4 = 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 (_isDev4 && !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;
@@ -1249,8 +1318,101 @@ function bindDynamic(el, nameGetter, valueGetter) {
   };
 }
 
+// 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 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
-var _isDev5 = isDev();
 function bindChildNode(placeholder, getter) {
   let lastNodes = [];
   function commit() {
@@ -1261,6 +1423,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];
@@ -1268,6 +1431,7 @@ function bindChildNode(placeholder, getter) {
         if (node.parentNode) node.parentNode.removeChild(node);
       }
       lastNodes.length = 0;
+      restoreFocusWithin(focused, lastNodes, "bindChildNode");
       return;
     }
     const parent = placeholder.parentNode;
@@ -1284,8 +1448,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);
@@ -1318,13 +1481,13 @@ function bindChildNode(placeholder, getter) {
       prev = node;
     }
     lastNodes = newNodes;
+    restoreFocusWithin(focused, newNodes, "bindChildNode");
   }
   return reactiveBinding2(commit, placeholder);
 }
 
 // src/core/rendering/tagFactory.ts
 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());
@@ -1342,18 +1505,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);
@@ -1365,13 +1519,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;
@@ -1381,11 +1535,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 }));
     }
   }
 }
@@ -1492,11 +1646,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;
     }
@@ -1513,7 +1682,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.`
         );
@@ -1528,7 +1697,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.`
           );
@@ -2327,7 +2496,6 @@ var isBatching = API2.isBatching;
 
 // src/core/signals/signal.ts
 var _g2 = globalThis;
-var _isDev7 = isDev();
 function signal(initial, options) {
   const state2 = {
     value: initial,
@@ -2340,7 +2508,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() {
@@ -2357,7 +2525,7 @@ function signal(initial, options) {
       if (equalsFn(prev, newValue)) return;
       state2.value = newValue;
       state2.__v++;
-      if (_isDev7) {
+      if (DEV) {
         const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
         if (hook) hook.emit("signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
       }
@@ -2365,7 +2533,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;
@@ -2390,12 +2558,23 @@ function signal(initial, options) {
       }
     };
   }
-  if (_isDev7) {
+  if (DEV) {
     const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
     if (hook) hook.emit("signal:create", { signal: state2, name: debugName, getter: get, initial });
   }
   return [get, set];
 }
+function external(options) {
+  const [version, bump] = signal(0, options?.name ? { name: options.name } : void 0);
+  return {
+    track() {
+      version();
+    },
+    invalidate() {
+      bump((n) => n + 1);
+    }
+  };
+}
 
 // src/components/ErrorDisplay.ts
 var STYLES = `
@@ -3371,11 +3550,10 @@ function setGlobalErrorHandler(handler) {
 }
 
 // src/core/rendering/context.ts
-var _isDev8 = isDev();
 function context(defaultValue) {
   const [getValue, setValue] = signal(defaultValue);
   const warnIfSSR = (method) => {
-    if (!_isDev8 || !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.`
     );
@@ -3403,7 +3581,7 @@ function context(defaultValue) {
       setValue(value);
       try {
         const result = fn();
-        if (_isDev8 && 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."
           );
@@ -3430,34 +3608,53 @@ function __resetIdCounter() {
 
 // src/core/rendering/directives.ts
 function show(condition, element) {
+  const resolved = typeof element === "function" ? element() : element;
   const update = () => {
-    element.style.display = condition() ? "" : "none";
+    resolved.style.display = condition() ? "" : "none";
   };
-  registerDisposer(element, track2(update));
-  return element;
+  registerDisposer(resolved, track2(update));
+  return resolved;
+}
+function attachBranch(parent, anchor, branch, attachedOnce, where) {
+  const result = typeof branch === "function" ? branch() : branch;
+  if (result == null || typeof result === "boolean") return { node: null, owned: false };
+  const node = result instanceof Node ? result : document.createTextNode(String(result));
+  const handedIn = node === branch;
+  const seenBefore = attachedOnce.has(node);
+  const owned = !handedIn && !seenBefore;
+  attachedOnce.add(node);
+  if (seenBefore) {
+    devWarnLazy(
+      () => `${where}: ${handedIn ? "a branch was given as an element rather than a function" : "a branch factory returned a node it had already returned"}, so the SAME node is being re-attached \u2014 any state it accumulated while detached (input value, scroll position, classes set imperatively) comes back with it. Its reactive bindings are left intact rather than disposed, because the node is not this directive's to tear down. Return a FRESH node per call (\`() => div(\u2026)\`) for rebuild semantics, or keep this form deliberately when the reuse is what you want.`
+    );
+  }
+  parent.insertBefore(node, anchor.nextSibling);
+  return { node, owned };
 }
 function when(condition, thenBranch, elseBranch) {
   const anchor = document.createComment("when");
   let currentNode = null;
   let lastCondition;
   let initialized = false;
+  const attachedOnce = /* @__PURE__ */ new WeakSet();
+  let currentNodeOwned = false;
   const update = () => {
     const show2 = condition();
     const parent = anchor.parentNode;
     if (!parent) return;
     if (initialized && show2 === lastCondition) return;
     lastCondition = show2;
+    const focused = currentNode ? captureFocusWithin([currentNode]) : null;
     if (currentNode?.parentNode) {
-      dispose(currentNode);
+      if (currentNodeOwned) dispose(currentNode);
       currentNode.parentNode.removeChild(currentNode);
       currentNode = null;
     }
-    const result = show2 ? thenBranch() : elseBranch ? elseBranch() : null;
-    if (result != null) {
-      const node = result instanceof Node ? result : document.createTextNode(String(result));
-      parent.insertBefore(node, anchor.nextSibling);
-      currentNode = node;
-    }
+    const branch = show2 ? thenBranch : elseBranch !== void 0 ? elseBranch : null;
+    const attached = attachBranch(parent, anchor, branch, attachedOnce, "when");
+    currentNode = attached.node;
+    currentNodeOwned = attached.owned;
+    restoreFocusWithin(focused, currentNode ? [currentNode] : [], "when");
     initialized = true;
   };
   registerDisposer(anchor, track2(update));
@@ -3473,26 +3670,25 @@ function match(value, cases, fallback) {
   let currentNode = null;
   let lastKey;
   let initialized = false;
+  const attachedOnce = /* @__PURE__ */ new WeakSet();
+  let currentNodeOwned = false;
   const update = () => {
     const key = String(value());
     const parent = anchor.parentNode;
     if (!parent) return;
     if (initialized && key === lastKey) return;
     lastKey = key;
+    const focused = currentNode ? captureFocusWithin([currentNode]) : null;
     if (currentNode?.parentNode) {
-      dispose(currentNode);
+      if (currentNodeOwned) dispose(currentNode);
       currentNode.parentNode.removeChild(currentNode);
       currentNode = null;
     }
-    const renderFn = cases[key] || fallback;
-    if (renderFn) {
-      const result = renderFn();
-      if (result != null) {
-        const node = result instanceof Node ? result : document.createTextNode(String(result));
-        parent.insertBefore(node, anchor.nextSibling);
-        currentNode = node;
-      }
-    }
+    const branch = Object.hasOwn(cases, key) ? cases[key] : fallback;
+    const attached = attachBranch(parent, anchor, branch ?? null, attachedOnce, "match");
+    currentNode = attached.node;
+    currentNodeOwned = attached.owned;
+    restoreFocusWithin(focused, currentNode ? [currentNode] : [], "match");
     initialized = true;
   };
   registerDisposer(anchor, track2(update));
@@ -3537,7 +3733,6 @@ function DynamicComponent(is) {
 }
 
 // src/core/rendering/each.ts
-var _isDev9 = isDev();
 function resolveNodeChild(child) {
   if (typeof child === "function") {
     return resolveNodeChild(child());
@@ -3628,7 +3823,7 @@ function each(getArray, render, options) {
     workMap.clear();
     keyIndexMap.clear();
     for (let i2 = 0; i2 < newLen; i2++) {
-      if (_isDev9 && keyIndexMap.has(newKeys[i2])) {
+      if (DEV && keyIndexMap.has(newKeys[i2])) {
         devWarn(
           `each: duplicate key "${String(newKeys[i2])}" at index ${i2} (first seen at ${keyIndexMap.get(newKeys[i2])}). Keys must be unique \u2014 duplicates cause rows to be dropped or mis-ordered.`
         );
@@ -3812,7 +4007,6 @@ function resolveChild(child) {
 }
 
 // src/core/rendering/htm.ts
-var _isDev10 = isDev();
 var RAW_TEXT_TAGS = /* @__PURE__ */ new Set(["script", "style"]);
 var VOID_ELEMENTS = /* @__PURE__ */ new Set([
   "area",
@@ -3899,13 +4093,13 @@ function parseTemplate(strings) {
     skipWs();
     const exprIdx = tryExprIdx();
     if (exprIdx >= 0) return { kind: "expr", idx: exprIdx };
-    const quote = template2[pos];
-    if (quote === '"' || quote === "'") {
+    const quote2 = template2[pos];
+    if (quote2 === '"' || quote2 === "'") {
       pos++;
       const statics = [];
       const exprs = [];
       let current = "";
-      while (pos < len && template2[pos] !== quote) {
+      while (pos < len && template2[pos] !== quote2) {
         const innerIdx = tryExprIdx();
         if (innerIdx >= 0) {
           statics.push(current);
@@ -4092,7 +4286,7 @@ function executeElement(tmpl, values) {
         const fn = values[attr.idx];
         if (typeof fn === "function") {
           el.addEventListener(attr.name, fn);
-        } else if (_isDev10) {
+        } else if (DEV) {
           devWarn(
             `html: on:${attr.name} handler is not a function (got ${typeof fn}). Event listener was not attached.`
           );
@@ -4960,6 +5154,7 @@ function drainTeardowns(teardowns, label2) {
     }
   }
 }
+var EACH_KEYS = ["text", "attr", "class", "show", "on", "cleanup"];
 function resolveTarget(root, target) {
   if (target == null) return root;
   if (typeof target !== "string") return target;
@@ -4970,6 +5165,11 @@ function resolveTarget(root, target) {
     return null;
   }
 }
+function bindNode(el, commit) {
+  if (isSSR()) return () => {
+  };
+  return reactiveBinding2(commit, el);
+}
 function readControlValue(el) {
   if (el instanceof HTMLInputElement) {
     if (el.type === "checkbox") return el.checked;
@@ -4993,6 +5193,50 @@ function writeControlValue(el, value) {
   const next = value == null ? "" : String(value);
   if (el.value !== next) el.value = next;
 }
+function applyEachBindings(ctx, el, spec, index) {
+  const where = `ctx.each[${index}]`;
+  if (isDev()) {
+    for (const key of Object.keys(spec)) {
+      devAssert(
+        EACH_KEYS.includes(key),
+        `${where}: unknown binding "${key}". Expected one of: ${EACH_KEYS.join(", ")}.`
+      );
+    }
+  }
+  if (spec.text !== void 0) {
+    devAssert(typeof spec.text === "function", `${where}: "text" must be a function returning the value.`);
+    ctx.text(el, spec.text);
+  }
+  if (spec.attr !== void 0) {
+    for (const name of Object.keys(spec.attr)) {
+      const value = spec.attr[name];
+      devAssert(typeof value === "function", `${where}: attr["${name}"] must be a function returning the value.`);
+      ctx.attr(el, name, value);
+    }
+  }
+  if (spec.class !== void 0) {
+    for (const name of Object.keys(spec.class)) {
+      const on2 = spec.class[name];
+      devAssert(typeof on2 === "function", `${where}: class["${name}"] must be a function returning a boolean.`);
+      ctx.classed(el, name, on2);
+    }
+  }
+  if (spec.show !== void 0) {
+    devAssert(typeof spec.show === "function", `${where}: "show" must be a function returning a boolean.`);
+    ctx.show(el, spec.show);
+  }
+  if (spec.on !== void 0) {
+    for (const event of Object.keys(spec.on)) {
+      const handler = spec.on[event];
+      devAssert(typeof handler === "function", `${where}: on["${String(event)}"] must be a function.`);
+      ctx.on(el, event, handler);
+    }
+  }
+  if (spec.cleanup !== void 0) {
+    devAssert(typeof spec.cleanup === "function", `${where}: "cleanup" must be a function.`);
+    ctx.cleanup(spec.cleanup);
+  }
+}
 function enhance(target, setup) {
   const root = typeof target === "string" ? typeof document !== "undefined" ? document.querySelector(target) : null : target;
   if (!root) {
@@ -5043,7 +5287,7 @@ function enhance(target, setup) {
     text: (t, value) => {
       bind(t, (el) => {
         teardowns.push(
-          effect(() => {
+          bindNode(el, () => {
             const v = value();
             const next = v == null ? "" : String(v);
             if (el.textContent !== next) el.textContent = next;
@@ -5054,7 +5298,7 @@ function enhance(target, setup) {
     attr: (t, name, value) => {
       bind(t, (el) => {
         teardowns.push(
-          effect(() => {
+          bindNode(el, () => {
             const v = value();
             const next = v == null ? null : String(v);
             setSafeAttribute(el, name, next, { syncValueProperty: false, label: "enhance attr()" });
@@ -5065,7 +5309,7 @@ function enhance(target, setup) {
     classed: (t, name, on2) => {
       bind(t, (el) => {
         teardowns.push(
-          effect(() => {
+          bindNode(el, () => {
             el.classList.toggle(name, Boolean(on2()));
           })
         );
@@ -5075,7 +5319,7 @@ function enhance(target, setup) {
       bind(t, (el) => {
         const prevHidden = el.hidden;
         teardowns.push(
-          effect(() => {
+          bindNode(el, () => {
             el.hidden = !when2();
           })
         );
@@ -5090,7 +5334,7 @@ function enhance(target, setup) {
         const [get, set] = state2;
         const evt = options?.event ?? (control instanceof HTMLSelectElement || control instanceof HTMLInputElement && (control.type === "checkbox" || control.type === "radio") ? "change" : "input");
         teardowns.push(
-          effect(() => {
+          bindNode(el, () => {
             writeControlValue(control, get());
           })
         );
@@ -5099,6 +5343,16 @@ function enhance(target, setup) {
         teardowns.push(() => control.removeEventListener(evt, onInput));
       });
     },
+    each: (target_, describe2) => {
+      devAssert(typeof describe2 === "function", "ctx.each: second argument must be a function.");
+      const elements = typeof target_ === "string" ? ctx.refs(target_) : Array.from(target_);
+      for (let i2 = 0; i2 < elements.length; i2++) {
+        const el = elements[i2];
+        const spec = describe2(el, i2);
+        if (spec == null) continue;
+        applyEachBindings(ctx, el, spec, i2);
+      }
+    },
     cleanup: (fn) => {
       teardowns.push(fn);
     }
@@ -5307,7 +5561,6 @@ function schedule(strategy, el, activate, options) {
 }
 
 // src/platform/ssr.ts
-var _isDev11 = isDev();
 function trustHTML(html3) {
   return html3;
 }
@@ -5474,6 +5727,7 @@ function nextTick() {
   enhance,
   enhanceAll,
   enqueueBatchedSignal,
+  external,
   fieldset,
   figcaption,
   figure,