sibujs 4.1.0 → 4.2.0

package/dist/{chunk-I3VI34DP.js → chunk-6ZGI3RBE.js}

@@ -1,27 +1,121 @@
 import {
   bindAttribute,
   setSafeAttribute
-} from "./chunk-SHDVWATN.js";
+} from "./chunk-HJEPKZ2O.js";
 import {
   isEventHandlerAttr,
   sanitizeCSSValue,
   sanitizeStyleAttribute
-} from "./chunk-5INI7D2L.js";
+} from "./chunk-IXKSNWV5.js";
 import {
   dispose,
   registerDisposer
-} from "./chunk-DHDZ7IVN.js";
+} from "./chunk-QKRPLZ2V.js";
 import {
   reactiveBinding
-} from "./chunk-D3SZ4LVS.js";
+} from "./chunk-7ALC7KGE.js";
 import {
+  DEV,
   devWarn,
-  isDev,
+  devWarnLazy,
   reportError
-} from "./chunk-VPP2FONR.js";
+} from "./chunk-2WLZ6757.js";
+
+// 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 i = 0; i < nodes.length; i++) {
+    const n = nodes[i];
+    if (n === active || n.nodeType === 1 && n.contains(active)) {
+      inside = true;
+      break;
+    }
+  }
+  if (!inside) return null;
+  let attr = null;
+  let value = null;
+  for (let i = 0; i < IDENTITY_ATTRS.length; i++) {
+    const candidate = active.getAttribute(IDENTITY_ATTRS[i]);
+    if (candidate) {
+      attr = IDENTITY_ATTRS[i];
+      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 i = 0; i < nodes.length; i++) {
+    const n = nodes[i];
+    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 _isDev = isDev();
 function bindChildNode(placeholder, getter) {
   let lastNodes = [];
   function commit() {
@@ -32,6 +126,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 i = 0; i < lastNodes.length; i++) {
         const node = lastNodes[i];
@@ -39,6 +134,7 @@ function bindChildNode(placeholder, getter) {
         if (node.parentNode) node.parentNode.removeChild(node);
       }
       lastNodes.length = 0;
+      restoreFocusWithin(focused, lastNodes, "bindChildNode");
       return;
     }
     const parent = placeholder.parentNode;
@@ -55,8 +151,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 (_isDev)
-            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);
@@ -89,13 +184,13 @@ function bindChildNode(placeholder, getter) {
       prev = node;
     }
     lastNodes = newNodes;
+    restoreFocusWithin(focused, newNodes, "bindChildNode");
   }
   return reactiveBinding(commit, placeholder);
 }
 
 // src/core/rendering/tagFactory.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
-var _isDev2 = isDev();
 var BLOCKED_TAGS = /* @__PURE__ */ new Set(["script", "iframe", "object", "embed", "frame", "frameset"]);
 function isBlockedTag(tag) {
   return BLOCKED_TAGS.has(tag.toLowerCase());
@@ -113,18 +208,9 @@ var CLOBBER_RISKY_IDS = /* @__PURE__ */ new Set([
   "self",
   "frames"
 ]);
-function looksLikeClassList(s) {
-  const t = s.trim();
-  if (!t) return false;
-  const tokens = t.split(/\s+/);
-  let sawClassish = false;
-  for (let i = 0; i < tokens.length; i++) {
-    const tok = tokens[i];
-    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);
@@ -136,13 +222,13 @@ function toKebab(prop) {
 function applyStyle(el, style) {
   if (typeof style === "function") {
     const teardown = reactiveBinding(() => {
-      el.setAttribute("style", sanitizeStyleAttribute(String(style())));
+      el.setAttribute("style", sanitizeStyleAttribute(String(style()), { element: el }));
     }, el);
     registerDisposer(el, teardown);
     return;
   }
   if (typeof style === "string") {
-    el.setAttribute("style", sanitizeStyleAttribute(style));
+    el.setAttribute("style", sanitizeStyleAttribute(style, { element: el }));
     return;
   }
   const htmlEl = el;
@@ -152,14 +238,26 @@ function applyStyle(el, style) {
     if (typeof val === "function") {
       const getter = val;
       const teardown = reactiveBinding(() => {
-        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);
@@ -263,11 +361,26 @@ var tagFactory = (tag, ns) => {
         appendChildren(el, second);
         return el;
       }
-      if (_isDev2 && 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 i = 0; i < tokens.length; i++) {
+          const tok = tokens[i];
+          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;
     }
@@ -284,7 +397,7 @@ var tagFactory = (tag, ns) => {
     if (pClass != null) applyClass(el, pClass);
     const pId = props.id;
     if (pId != null) {
-      if (_isDev2 && 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.`
         );
@@ -299,7 +412,7 @@ var tagFactory = (tag, ns) => {
         const handler = pOn[ev];
         if (typeof handler === "function") {
           el.addEventListener(ev, handler);
-        } else if (_isDev2) {
+        } else if (DEV) {
           devWarn(
             `tagFactory: on.${ev} handler is not a function (got ${typeof handler}). Event listener was not attached.`
           );
@@ -341,7 +454,10 @@ var tagFactory = (tag, ns) => {
 };
 
 export {
+  captureFocusWithin,
+  restoreFocusWithin,
   bindChildNode,
   SVG_NS,
+  resolveClassValue,
   tagFactory
 };

package/dist/{chunk-D3SZ4LVS.js → chunk-7ALC7KGE.js}

@@ -1,8 +1,8 @@
 import {
+  DEV,
   devWarn,
-  isDev,
   reportError
-} from "./chunk-VPP2FONR.js";
+} from "./chunk-2WLZ6757.js";
 
 // src/reactivity/track-core.ts
 var POOL_MAX = 4096;
@@ -460,17 +460,16 @@ function forEachSubscriber(signal, visit) {
 }
 
 // src/reactivity/track.ts
-var _isDev = 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 g = globalThis;
   const existing = g[REGISTRY_KEY];
   if (existing) {
-    if (_isDev && !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;

package/dist/{chunk-PFTDGEPZ.js → chunk-7VEC3UD2.js}

@@ -1,15 +1,15 @@
 import {
   isSSR
-} from "./chunk-TIRZCERI.js";
+} from "./chunk-5DXA2J44.js";
 import {
   cleanup,
   retrack,
   untracked
-} from "./chunk-D3SZ4LVS.js";
+} from "./chunk-7ALC7KGE.js";
 import {
   devAssert,
   reportError
-} from "./chunk-VPP2FONR.js";
+} from "./chunk-2WLZ6757.js";
 
 // src/core/signals/effect.ts
 var _g = globalThis;

package/dist/{chunk-KSOEJGFO.js → chunk-BMYYZWHX.js}

@@ -1,14 +1,14 @@
 import {
   isSSR
-} from "./chunk-TIRZCERI.js";
+} from "./chunk-5DXA2J44.js";
 import {
   resumeTracking,
   suspendTracking,
   track
-} from "./chunk-D3SZ4LVS.js";
+} from "./chunk-7ALC7KGE.js";
 import {
   devAssert
-} from "./chunk-VPP2FONR.js";
+} from "./chunk-2WLZ6757.js";
 
 // src/core/signals/watch.ts
 function watch(getter, callback) {

package/dist/{chunk-LOFZHP6V.js → chunk-BNKV4REK.js}

@@ -1,24 +1,24 @@
 import {
   sanitizeUrl
-} from "./chunk-5INI7D2L.js";
+} from "./chunk-IXKSNWV5.js";
 import {
   globalSingleton
 } from "./chunk-7ZHH77QA.js";
 import {
   effect
-} from "./chunk-PFTDGEPZ.js";
+} from "./chunk-7VEC3UD2.js";
 import {
   dispose,
   replaceChildrenSafely
-} from "./chunk-DHDZ7IVN.js";
+} from "./chunk-QKRPLZ2V.js";
 import {
   signal
-} from "./chunk-UFSQEO7P.js";
+} from "./chunk-HECVW343.js";
 import {
+  DEV,
   devWarn,
-  isDev,
   reportError
-} from "./chunk-VPP2FONR.js";
+} from "./chunk-2WLZ6757.js";
 
 // src/performance/scheduler.ts
 var Priority = {
@@ -228,7 +228,6 @@ function uniqueId(suffix) {
 }
 
 // src/performance/domRecycler.ts
-var _isDev = isDev();
 var DOMPool = class {
   constructor(maxSize = 50) {
     this.pools = /* @__PURE__ */ new Map();
@@ -255,7 +254,7 @@ var DOMPool = class {
    * is almost certainly a bug.
    */
   release(element) {
-    if (_isDev && element.isConnected) {
+    if (DEV && element.isConnected) {
       devWarn(
         "DOMPool.release() called on a still-connected element. Detach it from the DOM first (remove() / dispose())."
       );

package/dist/{chunk-5GJ5RTHA.js → chunk-FOWBJZDL.js}

@@ -1,20 +1,19 @@
 import {
   isSSR
-} from "./chunk-TIRZCERI.js";
+} from "./chunk-5DXA2J44.js";
 import {
   signal
-} from "./chunk-UFSQEO7P.js";
+} from "./chunk-HECVW343.js";
 import {
-  devWarn,
-  isDev
-} from "./chunk-VPP2FONR.js";
+  DEV,
+  devWarn
+} from "./chunk-2WLZ6757.js";
 
 // src/core/rendering/context.ts
-var _isDev = isDev();
 function context(defaultValue) {
   const [getValue, setValue] = signal(defaultValue);
   const warnIfSSR = (method) => {
-    if (!_isDev || !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.`
     );
@@ -42,7 +41,7 @@ function context(defaultValue) {
       setValue(value);
       try {
         const result = fn();
-        if (_isDev && 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."
           );

package/dist/{chunk-FB7KQXZI.js → chunk-GDUNQCCW.js}

@@ -3,17 +3,17 @@ import {
 } from "./chunk-WWV3SJ3L.js";
 import {
   tagFactory
-} from "./chunk-I3VI34DP.js";
+} from "./chunk-6ZGI3RBE.js";
 import {
   derived
-} from "./chunk-DCDS2PQ6.js";
+} from "./chunk-2LOYNGBY.js";
 import {
   effect
-} from "./chunk-PFTDGEPZ.js";
+} from "./chunk-7VEC3UD2.js";
 import {
   batch,
   signal
-} from "./chunk-UFSQEO7P.js";
+} from "./chunk-HECVW343.js";
 
 // src/ecosystem/adapters/mobx.ts
 function mobXAdapter(options) {

package/dist/{chunk-UFSQEO7P.js → chunk-HECVW343.js}

@@ -3,10 +3,10 @@ import {
   notifySubscribers,
   queueSignalNotification,
   recordDependency
-} from "./chunk-D3SZ4LVS.js";
+} from "./chunk-7ALC7KGE.js";
 import {
-  isDev
-} from "./chunk-VPP2FONR.js";
+  DEV
+} from "./chunk-2WLZ6757.js";
 
 // src/reactivity/batch.ts
 var batchDepth = 0;
@@ -60,7 +60,6 @@ var isBatching = API.isBatching;
 
 // src/core/signals/signal.ts
 var _g = globalThis;
-var _isDev = isDev();
 function signal(initial, options) {
   const state = {
     value: initial,
@@ -73,7 +72,7 @@ function signal(initial, options) {
     _d: false,
     _validate: void 0
   };
-  const debugName = _isDev ? options?.name : void 0;
+  const debugName = DEV ? options?.name : void 0;
   const equalsFn = options?.equals;
   if (debugName) state.__name = debugName;
   function get() {
@@ -90,7 +89,7 @@ function signal(initial, options) {
       if (equalsFn(prev, newValue)) return;
       state.value = newValue;
       state.__v++;
-      if (_isDev) {
+      if (DEV) {
         const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
         if (hook) hook.emit("signal:update", { signal: state, name: debugName, oldValue: prev, newValue });
       }
@@ -98,7 +97,7 @@ function signal(initial, options) {
         notifySubscribers(state);
       }
     };
-  } else if (_isDev) {
+  } else if (DEV) {
     set = (next) => {
       const prev = state.value;
       const newValue = typeof next === "function" ? next(prev) : next;
@@ -123,7 +122,7 @@ function signal(initial, options) {
       }
     };
   }
-  if (_isDev) {
+  if (DEV) {
     const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
     if (hook) hook.emit("signal:create", { signal: state, name: debugName, getter: get, initial });
   }

package/dist/{chunk-SHDVWATN.js → chunk-HJEPKZ2O.js}

@@ -2,18 +2,17 @@ import {
   isEventHandlerAttr,
   isHtmlContentAttribute,
   sanitizeAttributeString
-} from "./chunk-5INI7D2L.js";
+} from "./chunk-IXKSNWV5.js";
 import {
   reactiveBinding
-} from "./chunk-D3SZ4LVS.js";
+} from "./chunk-7ALC7KGE.js";
 import {
+  DEV,
   devWarn,
-  isDev,
   reportError
-} from "./chunk-VPP2FONR.js";
+} from "./chunk-2WLZ6757.js";
 
 // src/utils/setSafeAttribute.ts
-var _isDev = 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";
@@ -36,7 +35,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 (_isDev) {
+    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.`
       );
@@ -51,7 +50,7 @@ function setSafeAttribute(el, name, value, options = {}) {
     return true;
   }
   if (isHtmlContentAttribute(name)) {
-    if (_isDev) {
+    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.`
       );
@@ -80,7 +79,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);