sibujs 4.5.0 → 4.7.0

package/dist/{chunk-2DCGACUU.js → chunk-2BPG2XDA.js}

@@ -1,34 +1,38 @@
+import {
+  domBinding
+} from "./chunk-BC2SECJD.js";
 import {
   bindAttribute,
   setSafeAttribute
-} from "./chunk-ONOHFDLG.js";
+} from "./chunk-FNJXNGYZ.js";
 import {
   derived
-} from "./chunk-RBTPLM32.js";
+} from "./chunk-RUSSKG6G.js";
 import {
   isEventHandlerAttr
-} from "./chunk-IXKSNWV5.js";
+} from "./chunk-2INLLLMZ.js";
 import {
   globalSingleton
 } from "./chunk-7ZHH77QA.js";
 import {
-  effect
-} from "./chunk-RIXRAYIU.js";
-import {
-  dispose,
-  registerDisposer,
-  replaceChildrenSafely
-} from "./chunk-QKRPLZ2V.js";
+  adoptThenable
+} from "./chunk-5HZXGZ6T.js";
 import {
   signal
-} from "./chunk-XZZOBQAY.js";
+} from "./chunk-FQRUXCEE.js";
 import {
   reactiveBinding,
   track
-} from "./chunk-UGRX3S57.js";
+} from "./chunk-JWKYU5GV.js";
 import {
-  reportError
-} from "./chunk-2WLZ6757.js";
+  dispose,
+  disposeNodeOwn,
+  registerDisposer,
+  replaceChildrenSafely,
+  reportError,
+  unregisterDisposer,
+  withDisposerRollback
+} from "./chunk-NYNYSPK7.js";
 
 // src/ui/form.ts
 function required(message = "This field is required") {
@@ -57,10 +61,14 @@ function maxLength(max2, message) {
 }
 function matchesPattern(regex, message = "Invalid format") {
   return (value) => {
-    if (value && !regex.test(value)) {
-      return message;
+    if (!value) return null;
+    const savedLastIndex = regex.lastIndex;
+    regex.lastIndex = 0;
+    try {
+      return regex.test(value) ? null : message;
+    } finally {
+      regex.lastIndex = savedLastIndex;
     }
-    return null;
   };
 }
 function email(message = "Invalid email address") {
@@ -109,13 +117,13 @@ function bindField(field, extras) {
   const mergedOn = extraOn && typeof extraOn === "object" ? { ...extraOn, ...fieldOn } : fieldOn;
   const onElement = (el) => {
     if (el instanceof HTMLSelectElement && el.multiple) {
-      const stop = effect(() => {
+      const stop = domBinding(() => {
         const v = field.value();
         const selected = Array.isArray(v) ? v.map(String) : [];
         for (const opt of Array.from(el.options)) {
           opt.selected = selected.includes(opt.value);
         }
-      });
+      }, el);
       registerDisposer(el, stop);
     }
     if (typeof extraOnElement === "function") {
@@ -135,6 +143,7 @@ function form(config) {
   const fieldEntries = Object.entries(config);
   const fieldMap = {};
   const [manualErrors, setManualErrors] = signal({});
+  const fieldErrors = [];
   for (const [name, cfg] of fieldEntries) {
     const [value, setValue] = signal(cfg.initial);
     const [isTouched, setTouched] = signal(false);
@@ -149,6 +158,7 @@ function form(config) {
       }
       return null;
     });
+    fieldErrors.push(error);
     const wrappedSet = (next) => {
       setValue(next);
       setManualErrors((prev) => {
@@ -225,12 +235,22 @@ function form(config) {
         field.touch();
       }
       if (isValid()) {
-        const result = onSubmit(values());
-        if (result && typeof result.then === "function") {
+        const report = (error) => reportError(error, { phase: "async", name: "form.handleSubmit" });
+        let pending;
+        try {
+          pending = adoptThenable(onSubmit(values()));
+        } catch (error) {
+          report(error);
+          return;
+        }
+        if (pending) {
           setSubmitting(true);
-          result.then(
+          pending.then(
             () => setSubmitting(false),
-            () => setSubmitting(false)
+            (error) => {
+              setSubmitting(false);
+              report(error);
+            }
           );
         }
       }
@@ -244,6 +264,17 @@ function form(config) {
   function setError(field, message) {
     setManualErrors((prev) => ({ ...prev, [field]: message }));
   }
+  let disposed = false;
+  function dispose2() {
+    if (disposed) return;
+    disposed = true;
+    errors.dispose();
+    isValid.dispose();
+    isDirty.dispose();
+    touchedState.dispose();
+    values.dispose();
+    for (const error of fieldErrors) error.dispose();
+  }
   return {
     fields: fieldMap,
     errors,
@@ -254,7 +285,8 @@ function form(config) {
     values,
     handleSubmit,
     reset,
-    setError
+    setError,
+    dispose: dispose2
   };
 }
 
@@ -298,7 +330,7 @@ function VirtualList(props) {
       content.appendChild(itemEl);
     }
   };
-  registerDisposer(container, effect(update));
+  registerDisposer(container, domBinding(update, container));
   return container;
 }
 
@@ -308,11 +340,14 @@ function intersection(options) {
   const [ratio, setRatio] = signal(0);
   let observer = null;
   let currentElement = null;
+  let generation = 0;
   function observe(element) {
     if (typeof IntersectionObserver === "undefined") return;
     unobserve();
     currentElement = element;
+    const observation = ++generation;
     observer = new IntersectionObserver((entries) => {
+      if (observation !== generation) return;
       const entry = entries[0];
       if (entry) {
         setIsIntersecting(entry.isIntersecting);
@@ -322,8 +357,10 @@ function intersection(options) {
     observer.observe(element);
   }
   function unobserve() {
+    generation++;
     if (observer) {
       if (currentElement) observer.unobserve(currentElement);
+      observer.takeRecords();
       observer.disconnect();
       observer = null;
       currentElement = null;
@@ -342,17 +379,26 @@ function lazyLoad(element, loader, options) {
     return () => {
     };
   }
+  let done = false;
+  const stop = () => {
+    done = true;
+    observer.takeRecords();
+    observer.disconnect();
+  };
   const observer = new IntersectionObserver((entries) => {
+    if (done) return;
     for (const entry of entries) {
       if (entry.isIntersecting) {
+        stop();
         loader();
-        observer.disconnect();
         break;
       }
     }
   }, options);
   observer.observe(element);
-  return () => observer.disconnect();
+  return () => {
+    if (!done) stop();
+  };
 }
 
 // src/ui/inputMask.ts
@@ -501,6 +547,7 @@ function focus() {
     const dispose2 = () => {
       if (disposed) return;
       disposed = true;
+      unregisterDisposer(element, dispose2);
       element.removeEventListener("focus", onFocus);
       element.removeEventListener("blur", onBlur);
       if (currentElement === element) currentElement = null;
@@ -569,14 +616,19 @@ function FocusTrap(nodes, options = {}) {
     }
   };
   container.addEventListener("keydown", onTrapKeydown);
+  let disposed = false;
   if (options.autoFocus !== false) {
     queueMicrotask(() => {
+      if (disposed || !container.isConnected) return;
       const first = getFocusable()[0];
       first?.focus();
     });
   }
   let trapObserver = null;
   function restoreFocusAndCleanup() {
+    if (disposed) return;
+    disposed = true;
+    unregisterDisposer(container, restoreFocusAndCleanup);
     if (options.restoreFocus !== false) previouslyFocused?.focus();
     container.removeEventListener("keydown", onTrapKeydown);
     if (trapObserver) {
@@ -591,29 +643,45 @@ function FocusTrap(nodes, options = {}) {
       }
     });
     queueMicrotask(() => {
-      if (container.isConnected) {
-        trapObserver.observe(container, { childList: true, subtree: true });
-      }
+      const observer = trapObserver;
+      if (disposed || !container.isConnected || !observer) return;
+      observer.observe(container, { childList: true, subtree: true });
     });
   }
   registerDisposer(container, restoreFocusAndCleanup);
   return container;
 }
+function isApplePlatform() {
+  if (typeof navigator === "undefined") return false;
+  const nav = navigator;
+  return /mac|iphone|ipad|ipod/i.test(nav.userAgentData?.platform || nav.platform || "");
+}
 function hotkey(combo, handler, options = {}) {
   let key = combo;
   let needCtrl = options.ctrl ?? false;
   let needShift = options.shift ?? false;
   let needAlt = options.alt ?? false;
   let needMeta = options.meta ?? false;
-  if (combo.includes("+")) {
-    const parts = combo.toLowerCase().split("+");
+  if (combo === "+") {
+    key = "+";
+  } else if (combo.includes("+")) {
+    const literalPlus = combo.endsWith("++");
+    const parts = (literalPlus ? combo.slice(0, -2) : combo).toLowerCase().split("+");
+    if (literalPlus) parts.push("+");
     key = parts[parts.length - 1];
+    if (key === "") throw new Error(`hotkey("${combo}"): missing key`);
     for (let i = 0; i < parts.length - 1; i++) {
       const mod = parts[i];
       if (mod === "ctrl" || mod === "control") needCtrl = true;
       else if (mod === "shift") needShift = true;
-      else if (mod === "alt") needAlt = true;
+      else if (mod === "alt" || mod === "option") needAlt = true;
       else if (mod === "meta" || mod === "cmd" || mod === "command") needMeta = true;
+      else if (mod === "mod") {
+        if (isApplePlatform()) needMeta = true;
+        else needCtrl = true;
+      } else {
+        throw new Error(`hotkey("${combo}"): unknown modifier "${mod}"`);
+      }
     }
   }
   const listener = (e) => {
@@ -968,6 +1036,8 @@ function removeGlobalListenerIfIdle() {
 function dialog() {
   const [isOpen, setIsOpen] = signal(false);
   const entry = { close: () => close() };
+  let opened = false;
+  let disposed = false;
   function pushOnStack() {
     if (dialogStack.indexOf(entry) !== -1) return;
     dialogStack.push(entry);
@@ -979,23 +1049,27 @@ function dialog() {
     removeGlobalListenerIfIdle();
   }
   function open() {
-    if (isOpen()) return;
-    setIsOpen(true);
+    if (disposed || opened) return;
+    opened = true;
     pushOnStack();
+    setIsOpen(true);
   }
   function close() {
-    if (!isOpen()) {
+    if (!opened) {
       removeFromStack();
       return;
     }
-    setIsOpen(false);
+    opened = false;
     removeFromStack();
+    setIsOpen(false);
   }
   function toggle() {
-    if (isOpen()) close();
+    if (opened) close();
     else open();
   }
   function dispose2() {
+    disposed = true;
+    opened = false;
     removeFromStack();
     setIsOpen(false);
   }
@@ -1200,32 +1274,49 @@ function pagination(options) {
 function eventBus() {
   const listeners = /* @__PURE__ */ new Map();
   function on(event, handler) {
-    let set = listeners.get(event);
-    if (!set) {
-      set = /* @__PURE__ */ new Set();
-      listeners.set(event, set);
+    let subs = listeners.get(event);
+    if (!subs) {
+      subs = /* @__PURE__ */ new Map();
+      listeners.set(event, subs);
+    }
+    let subscription = subs.get(handler);
+    if (!subscription) {
+      subscription = { handler, active: true };
+      subs.set(handler, subscription);
     }
-    set.add(handler);
-    return () => off(event, handler);
+    const own = subscription;
+    return () => {
+      if (listeners.get(event)?.get(handler) !== own) return;
+      off(event, handler);
+    };
   }
   function emit(event, data) {
-    const set = listeners.get(event);
-    if (set) {
-      for (const handler of set) {
-        handler(data);
+    const subs = listeners.get(event);
+    if (!subs || subs.size === 0) return;
+    for (const subscription of Array.from(subs.values())) {
+      if (!subscription.active) continue;
+      try {
+        subscription.handler(data);
+      } catch (err) {
+        reportError(err, { phase: "event", name: `eventBus(${String(event)})` });
       }
     }
   }
   function off(event, handler) {
-    const set = listeners.get(event);
-    if (set) {
-      set.delete(handler);
-      if (set.size === 0) {
-        listeners.delete(event);
-      }
+    const subs = listeners.get(event);
+    if (!subs) return;
+    const subscription = subs.get(handler);
+    if (!subscription) return;
+    subscription.active = false;
+    subs.delete(handler);
+    if (subs.size === 0) {
+      listeners.delete(event);
     }
   }
   function clear() {
+    for (const subs of listeners.values()) {
+      for (const subscription of subs.values()) subscription.active = false;
+    }
     listeners.clear();
   }
   return { on, emit, off, clear };
@@ -1233,13 +1324,33 @@ function eventBus() {
 
 // src/platform/customElement.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
+var MAX_RENDER_PASSES = 10;
+var ABANDONED_RENDER = /* @__PURE__ */ Symbol("sibujs.defineElement.abandonedRender");
 function defineElement(name, component, options = {}) {
   if (customElements.get(name)) return;
   const observed = options.observedAttributes || [];
   class SibuElement extends HTMLElement {
     constructor() {
       super();
-      this._rendered = null;
+      // Re-rendering is keyed on connection, not on a previous render: a first render
+      // that throws leaves nothing rendered, and the element must still re-render
+      // when a later attribute change fixes the input.
+      this._connected = false;
+      // A render in progress, and whether an attribute changed during it. The
+      // component may write its host's observed attributes while rendering; with
+      // the old subtree kept during the build, rendering again from inside the
+      // callback recursed until the stack overflowed.
+      this._rendering = false;
+      this._dirty = false;
+      // How many teardowns are draining. A host teardown may reconnect the element
+      // (and a nested disconnect may run inside it), and rendering the next
+      // generation from inside that drain would let the drain tear down what the
+      // new render registers. A counter, not a flag: a nested teardown returning
+      // must not declare the outer one finished.
+      this._teardownDepth = 0;
+      // Disconnects so far. A render compares it across its old-subtree teardown
+      // to detect a disconnect that happened inside it.
+      this._disconnects = 0;
       if (options.shadow !== false) {
         this._root = this.attachShadow({ mode: options.mode || "open" });
       } else {
@@ -1249,32 +1360,106 @@ function defineElement(name, component, options = {}) {
     static get observedAttributes() {
       return observed;
     }
+    /** Whether rendering must wait for work already in progress. */
+    get _busy() {
+      return this._rendering || this._teardownDepth > 0;
+    }
     connectedCallback() {
+      this._connected = true;
+      if (this._busy) {
+        this._dirty = true;
+        return;
+      }
       this._render();
     }
     disconnectedCallback() {
-      this._teardown();
+      this._connected = false;
+      this._disconnects++;
+      this._teardownDepth++;
+      try {
+        this._teardown();
+      } finally {
+        this._teardownDepth--;
+        if (this._teardownDepth === 0 && this._connected && this._dirty) {
+          this._dirty = false;
+          if (!this._rendering) this._render();
+        }
+      }
     }
-    attributeChangedCallback() {
-      if (this._rendered) {
-        this._render();
+    attributeChangedCallback(_name, oldValue, newValue) {
+      if (oldValue === newValue || !this._connected) return;
+      if (this._busy) {
+        this._dirty = true;
+        return;
       }
+      this._render();
     }
     _teardown() {
-      this._rendered = null;
       replaceChildrenSafely(this._root);
-    }
+      disposeNodeOwn(this);
+    }
+    /**
+     * Render as a transaction: build the replacement first, commit only if that
+     * succeeds. Tearing the current subtree down before calling the factory
+     * meant a throwing rerender (an invalid attribute, say) left the element
+     * blank with its live state already disposed. Now a failure keeps the
+     * working subtree, releases whatever the failed attempt registered, and is
+     * reported with this element as its node so an enclosing ErrorBoundary can
+     * claim it.
+     */
     _render() {
-      this._teardown();
+      this._rendering = true;
+      try {
+        let passes = 0;
+        do {
+          this._dirty = false;
+          if (++passes > MAX_RENDER_PASSES) {
+            reportError(
+              new Error(
+                `[SibuJS] defineElement(${name}): the component changed its own observed attributes on ${MAX_RENDER_PASSES} consecutive renders; stopped re-rendering.`
+              ),
+              { phase: "render", name: `defineElement(${name})`, node: this }
+            );
+            break;
+          }
+          this._renderOnce();
+        } while (this._dirty && this._connected);
+      } finally {
+        this._rendering = false;
+        this._dirty = false;
+      }
+    }
+    _renderOnce() {
       const props = this._getProps();
+      let el;
+      try {
+        el = withDisposerRollback(() => {
+          const built = component(props, this);
+          if (!this._connected) throw ABANDONED_RENDER;
+          return built;
+        });
+      } catch (err) {
+        if (err !== ABANDONED_RENDER) {
+          reportError(err, { phase: "render", name: `defineElement(${name})`, node: this });
+        }
+        return;
+      }
+      const next = [];
       if (options.styles && this._root instanceof ShadowRoot) {
         const styleEl = document.createElement("style");
         styleEl.textContent = options.styles;
-        this._root.appendChild(styleEl);
+        next.push(styleEl);
+      }
+      next.push(el);
+      const disconnects = this._disconnects;
+      for (const node of next) node.parentNode?.removeChild(node);
+      replaceChildrenSafely(this._root);
+      if (this._disconnects !== disconnects) {
+        for (const node of next) dispose(node);
+        if (this._connected) this._dirty = true;
+        return;
       }
-      const el = component(props, this);
-      this._root.appendChild(el);
-      this._rendered = el;
+      this._root.replaceChildren(...next);
     }
     _getProps() {
       const props = {};

package/dist/{chunk-IXKSNWV5.js → chunk-2INLLLMZ.js}

@@ -1,6 +1,6 @@
 import {
   devWarnLazy
-} from "./chunk-2WLZ6757.js";
+} from "./chunk-NYNYSPK7.js";
 
 // src/utils/sanitize.ts
 function stripControlChars(value) {