sibujs 1.4.0 → 2.0.0

package/dist/{chunk-JCI5M6U6.js → chunk-O2MNQFLP.js}

@@ -1,18 +1,22 @@
 import {
   bindAttribute
-} from "./chunk-PTQJDMRT.js";
+} from "./chunk-DFPFITST.js";
 import {
   derived
-} from "./chunk-NEKUBFPT.js";
+} from "./chunk-54EDRCEF.js";
+import {
+  dispose,
+  registerDisposer
+} from "./chunk-2UPRY23K.js";
 import {
   effect
-} from "./chunk-CHF5OHIA.js";
+} from "./chunk-HB24TBAF.js";
 import {
   signal
-} from "./chunk-WZSPOOER.js";
+} from "./chunk-CC65Y57T.js";
 import {
   track
-} from "./chunk-ZD6OAMTH.js";
+} from "./chunk-VLPPXTYG.js";
 
 // src/ui/form.ts
 function required(message = "This field is required") {
@@ -90,7 +94,7 @@ function bindField(field, extras) {
     blur: () => field.touch()
   };
   const { on: extraOn, value: _ignoreValue, ...restExtras } = extras ?? {};
-  const mergedOn = extraOn && typeof extraOn === "object" ? { ...fieldOn, ...extraOn } : fieldOn;
+  const mergedOn = extraOn && typeof extraOn === "object" ? { ...extraOn, ...fieldOn } : fieldOn;
   return {
     value: field.value,
     on: mergedOn,
@@ -115,9 +119,18 @@ function form(config) {
       }
       return null;
     });
+    const wrappedSet = (next) => {
+      setValue(next);
+      setManualErrors((prev) => {
+        if (!(name in prev) || prev[name] == null) return prev;
+        const copy = { ...prev };
+        copy[name] = null;
+        return copy;
+      });
+    };
     fieldMap[name] = {
       value,
-      set: setValue,
+      set: wrappedSet,
       error,
       touched: isTouched,
       touch: () => setTouched(true),
@@ -161,14 +174,23 @@ function form(config) {
     }
     return result;
   });
+  const [submitting, setSubmitting] = signal(false);
   function handleSubmit(onSubmit) {
     return (e) => {
       if (e) e.preventDefault();
+      if (submitting()) return;
       for (const field of Object.values(fieldMap)) {
         field.touch();
       }
       if (isValid()) {
-        onSubmit(values());
+        const result = onSubmit(values());
+        if (result && typeof result.then === "function") {
+          setSubmitting(true);
+          result.then(
+            () => setSubmitting(false),
+            () => setSubmitting(false)
+          );
+        }
       }
     };
   }
@@ -185,6 +207,7 @@ function form(config) {
     errors,
     isValid,
     isDirty,
+    submitting,
     touched: touchedState,
     values,
     handleSubmit,
@@ -210,9 +233,9 @@ function VirtualList(props) {
   content.style.right = "0";
   spacer.appendChild(content);
   container.appendChild(spacer);
-  container.addEventListener("scroll", () => {
-    setScrollTop(container.scrollTop);
-  });
+  const onScroll = () => setScrollTop(container.scrollTop);
+  container.addEventListener("scroll", onScroll);
+  registerDisposer(container, () => container.removeEventListener("scroll", onScroll));
   const update = () => {
     const items = props.items();
     const totalHeight = items.length * props.itemHeight;
@@ -241,6 +264,7 @@ function intersection(options) {
   let observer = null;
   let currentElement = null;
   function observe(element) {
+    if (typeof IntersectionObserver === "undefined") return;
     unobserve();
     currentElement = element;
     observer = new IntersectionObserver((entries) => {
@@ -268,6 +292,11 @@ function intersection(options) {
   };
 }
 function lazyLoad(element, loader, options) {
+  if (typeof IntersectionObserver === "undefined") {
+    loader();
+    return () => {
+    };
+  }
   const observer = new IntersectionObserver((entries) => {
     for (const entry of entries) {
       if (entry.isIntersecting) {
@@ -320,20 +349,65 @@ function inputMask(options) {
     }
     return raw;
   }
+  function isSlot(c) {
+    return c === "9" || c === "A" || c === "*";
+  }
+  function buildStripRegex() {
+    const hasDigit = options.pattern.includes("9");
+    const hasLetter = options.pattern.includes("A");
+    const hasAny = options.pattern.includes("*");
+    if (hasAny) {
+      const literals = /* @__PURE__ */ new Set();
+      for (const c of options.pattern) {
+        if (!isSlot(c)) literals.add(c.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+      }
+      return literals.size > 0 ? new RegExp(`[${Array.from(literals).join("")}]`, "g") : /(?!)/g;
+    }
+    if (hasDigit && hasLetter) return /[^a-zA-Z0-9]/g;
+    if (hasDigit) return /[^0-9]/g;
+    if (hasLetter) return /[^a-zA-Z]/g;
+    return /[^a-zA-Z0-9]/g;
+  }
+  const stripRegex = buildStripRegex();
+  const rawCharTest = options.pattern.includes("*") ? () => true : (c) => /[a-zA-Z0-9]/.test(c);
   function bind(input) {
-    input.addEventListener("input", () => {
-      const raw = input.value.replace(/[^a-zA-Z0-9]/g, "");
+    const onInput = () => {
+      const cursorBefore = input.selectionStart ?? input.value.length;
+      const oldValue = input.value;
+      const raw = oldValue.replace(stripRegex, "");
       const masked = applyMask(raw);
       setValue(masked);
       setRawValue(extractRaw(masked));
       input.value = masked;
-    });
-    input.addEventListener("focus", () => {
+      let rawBefore = 0;
+      for (let i = 0; i < cursorBefore && i < oldValue.length; i++) {
+        if (rawCharTest(oldValue[i])) rawBefore++;
+      }
+      let newCursor = 0;
+      let counted = 0;
+      for (; newCursor < masked.length; newCursor++) {
+        if (newCursor < options.pattern.length && isSlot(options.pattern[newCursor])) {
+          counted++;
+          if (counted >= rawBefore) {
+            newCursor++;
+            break;
+          }
+        }
+      }
+      input.setSelectionRange(newCursor, newCursor);
+    };
+    const onFocus = () => {
       if (!input.value) {
         const display = options.pattern.replace(/9/g, placeholder).replace(/A/g, placeholder).replace(/\*/g, placeholder);
         input.placeholder = display;
       }
-    });
+    };
+    input.addEventListener("input", onInput);
+    input.addEventListener("focus", onFocus);
+    return () => {
+      input.removeEventListener("input", onInput);
+      input.removeEventListener("focus", onFocus);
+    };
   }
   return { value, rawValue, bind };
 }
@@ -375,8 +449,20 @@ function focus() {
   let currentElement = null;
   function bind(element) {
     currentElement = element;
-    element.addEventListener("focus", () => setIsFocused(true));
-    element.addEventListener("blur", () => setIsFocused(false));
+    const onFocus = () => setIsFocused(true);
+    const onBlur = () => setIsFocused(false);
+    element.addEventListener("focus", onFocus);
+    element.addEventListener("blur", onBlur);
+    let disposed = false;
+    const dispose2 = () => {
+      if (disposed) return;
+      disposed = true;
+      element.removeEventListener("focus", onFocus);
+      element.removeEventListener("blur", onBlur);
+      if (currentElement === element) currentElement = null;
+    };
+    registerDisposer(element, dispose2);
+    return dispose2;
   }
   function focus2() {
     currentElement?.focus();
@@ -391,12 +477,39 @@ function FocusTrap(nodes, options = {}) {
   container.setAttribute("data-sibu-focus-trap", "true");
   container.appendChild(nodes);
   const previouslyFocused = document.activeElement;
-  container.addEventListener("keydown", (e) => {
+  const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]';
+  function isEffectivelyVisible(el) {
+    let node = el;
+    while (node) {
+      if (node.hasAttribute("inert")) return false;
+      if (node.getAttribute("aria-hidden") === "true") return false;
+      if (node.hidden) return false;
+      node = node.parentElement;
+    }
+    if (el.offsetParent === null && el.getClientRects().length === 0) return false;
+    return true;
+  }
+  function getFocusable() {
+    const raw = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+    const out = [];
+    for (const el of raw) {
+      if (el.hasAttribute("disabled")) continue;
+      if (el.getAttribute("aria-hidden") === "true") continue;
+      if (el.hasAttribute("inert")) continue;
+      const ce = el.getAttribute("contenteditable");
+      if (ce !== null && ce === "false") continue;
+      if (!isEffectivelyVisible(el)) continue;
+      out.push(el);
+    }
+    return out;
+  }
+  const onTrapKeydown = (e) => {
     if (e.key !== "Tab") return;
-    const focusable = container.querySelectorAll(
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    );
-    if (focusable.length === 0) return;
+    const focusable = getFocusable();
+    if (focusable.length === 0) {
+      e.preventDefault();
+      return;
+    }
     const first = focusable[0];
     const last = focusable[focusable.length - 1];
     if (e.shiftKey) {
@@ -410,33 +523,36 @@ function FocusTrap(nodes, options = {}) {
         first.focus();
       }
     }
-  });
+  };
+  container.addEventListener("keydown", onTrapKeydown);
   if (options.autoFocus !== false) {
     queueMicrotask(() => {
-      const first = container.querySelector(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
+      const first = getFocusable()[0];
       first?.focus();
     });
   }
+  let trapObserver = null;
+  function restoreFocusAndCleanup() {
+    if (options.restoreFocus !== false) previouslyFocused?.focus();
+    container.removeEventListener("keydown", onTrapKeydown);
+    if (trapObserver) {
+      trapObserver.disconnect();
+      trapObserver = null;
+    }
+  }
   if (options.restoreFocus !== false) {
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        for (const removed of Array.from(mutation.removedNodes)) {
-          if (removed === container || removed.contains(container)) {
-            previouslyFocused?.focus();
-            observer.disconnect();
-            return;
-          }
-        }
+    trapObserver = new MutationObserver(() => {
+      if (!container.isConnected) {
+        restoreFocusAndCleanup();
       }
     });
     queueMicrotask(() => {
-      if (container.parentNode) {
-        observer.observe(container.parentNode, { childList: true });
+      if (container.isConnected) {
+        trapObserver.observe(container, { childList: true, subtree: true });
       }
     });
   }
+  registerDisposer(container, restoreFocusAndCleanup);
   return container;
 }
 function hotkey(combo, handler, options = {}) {
@@ -469,7 +585,16 @@ function hotkey(combo, handler, options = {}) {
   document.addEventListener("keydown", listener);
   return () => document.removeEventListener("keydown", listener);
 }
-function announce(message, priority = "polite") {
+var announceQueues = {
+  polite: [],
+  assertive: []
+};
+var announceDraining = {
+  polite: false,
+  assertive: false
+};
+var ANNOUNCE_INTERVAL_MS = 150;
+function ensureLiveRegion(priority) {
   let region = document.getElementById(`sibu-announce-${priority}`);
   if (!region) {
     region = document.createElement("div");
@@ -480,11 +605,33 @@ function announce(message, priority = "polite") {
     region.style.cssText = "position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;";
     document.body.appendChild(region);
   }
+  return region;
+}
+function drainAnnounceQueue(priority) {
+  if (announceDraining[priority]) return;
+  const queue = announceQueues[priority];
+  if (queue.length === 0) return;
+  announceDraining[priority] = true;
+  const region = ensureLiveRegion(priority);
+  const next = queue.shift();
   region.textContent = "";
   requestAnimationFrame(() => {
-    if (region) region.textContent = message;
+    if (!region.isConnected) {
+      announceDraining[priority] = false;
+      return;
+    }
+    region.textContent = next;
+    setTimeout(() => {
+      announceDraining[priority] = false;
+      drainAnnounceQueue(priority);
+    }, ANNOUNCE_INTERVAL_MS);
   });
 }
+function announce(message, priority = "polite") {
+  if (typeof document === "undefined") return;
+  announceQueues[priority].push(message);
+  drainAnnounceQueue(priority);
+}
 
 // src/ui/scopedStyle.ts
 var scopeCounter = 0;
@@ -522,6 +669,10 @@ function scopedStyle(css) {
     if (trimmed.startsWith("@") || trimmed.startsWith("from") || trimmed.startsWith("to") || /^\d+%$/.test(trimmed)) {
       return match;
     }
+    const pseudoIdx = trimmed.indexOf("::");
+    if (pseudoIdx >= 0) {
+      return `${trimmed.slice(0, pseudoIdx)}[${attr}]${trimmed.slice(pseudoIdx)}${delimiter}`;
+    }
     return `${trimmed}[${attr}]${delimiter}`;
   });
   if (typeof document !== "undefined") {
@@ -617,59 +768,91 @@ function bindData(el, key, getter) {
 }
 
 // src/ui/dialog.ts
+var dialogStack = [];
+var globalListenerAttached = false;
+function __resetDialogStack() {
+  while (dialogStack.length > 0) dialogStack.pop();
+  if (typeof window !== "undefined" && globalListenerAttached) {
+    window.removeEventListener("keydown", handleGlobalKeydown);
+    globalListenerAttached = false;
+  }
+}
+function handleGlobalKeydown(event) {
+  if (event.key !== "Escape") return;
+  const top = dialogStack[dialogStack.length - 1];
+  if (top) top.close();
+}
+function ensureGlobalListener() {
+  if (typeof window === "undefined" || globalListenerAttached) return;
+  window.addEventListener("keydown", handleGlobalKeydown);
+  globalListenerAttached = true;
+}
+function removeGlobalListenerIfIdle() {
+  if (typeof window === "undefined") return;
+  if (!globalListenerAttached) return;
+  if (dialogStack.length > 0) return;
+  window.removeEventListener("keydown", handleGlobalKeydown);
+  globalListenerAttached = false;
+}
 function dialog() {
   const [isOpen, setIsOpen] = signal(false);
-  let listenerAttached = false;
-  function handleKeydown(event) {
-    if (event.key === "Escape") {
-      close();
-    }
+  const entry = { close: () => close() };
+  function pushOnStack() {
+    if (dialogStack.indexOf(entry) !== -1) return;
+    dialogStack.push(entry);
+    ensureGlobalListener();
+  }
+  function removeFromStack() {
+    const idx = dialogStack.indexOf(entry);
+    if (idx !== -1) dialogStack.splice(idx, 1);
+    removeGlobalListenerIfIdle();
   }
   function open() {
+    if (isOpen()) return;
     setIsOpen(true);
-    if (typeof window !== "undefined" && !listenerAttached) {
-      window.addEventListener("keydown", handleKeydown);
-      listenerAttached = true;
-    }
+    pushOnStack();
   }
   function close() {
-    setIsOpen(false);
-    if (typeof window !== "undefined" && listenerAttached) {
-      window.removeEventListener("keydown", handleKeydown);
-      listenerAttached = false;
+    if (!isOpen()) {
+      removeFromStack();
+      return;
     }
+    setIsOpen(false);
+    removeFromStack();
   }
   function toggle() {
-    if (isOpen()) {
-      close();
-    } else {
-      open();
-    }
+    if (isOpen()) close();
+    else open();
+  }
+  function dispose2() {
+    removeFromStack();
+    setIsOpen(false);
   }
-  return { open, close, isOpen, toggle };
+  return { open, close, isOpen, toggle, dispose: dispose2 };
 }
 
 // src/ui/toast.ts
-var toastCounter = 0;
 function toast(options) {
   const duration = options?.duration ?? 3e3;
   const maxToasts = options?.maxToasts ?? Infinity;
   const [toasts, setToasts] = signal([]);
   const timers = /* @__PURE__ */ new Map();
+  let toastCounter = 0;
   function show(message, type) {
     const id = `toast-${++toastCounter}`;
     const toast2 = { id, message, type };
+    const trimmedIds = [];
     setToasts((prev) => {
       const next = [...prev, toast2];
       if (next.length > maxToasts) {
         const removed = next.splice(0, next.length - maxToasts);
-        for (const r of removed) {
-          clearTimerForToast(r.id);
-        }
+        for (const r of removed) trimmedIds.push(r.id);
       }
       return next;
     });
-    if (duration > 0) {
+    for (const tid of trimmedIds) clearTimerForToast(tid);
+    const wasTrimmed = trimmedIds.indexOf(id) !== -1;
+    if (duration > 0 && !wasTrimmed) {
       const timer = setTimeout(() => {
         dismiss(id);
       }, duration);
@@ -755,14 +938,14 @@ function infiniteScroll(options) {
     },
     configurable: true
   });
-  function dispose() {
+  function dispose2() {
     disposed = true;
     if (observer) {
       observer.disconnect();
       observer = null;
     }
   }
-  return { sentinelRef: originalRef, loading, dispose };
+  return { sentinelRef: originalRef, loading, dispose: dispose2 };
 }
 
 // src/ui/pagination.ts
@@ -841,7 +1024,7 @@ function defineElement(name, component, options = {}) {
   class SibuElement extends HTMLElement {
     constructor() {
       super();
-      this._rendered = false;
+      this._rendered = null;
       if (options.shadow !== false) {
         this._root = this.attachShadow({ mode: options.mode || "open" });
       } else {
@@ -855,25 +1038,23 @@ function defineElement(name, component, options = {}) {
       this._render();
     }
     disconnectedCallback() {
-      if (this._root instanceof ShadowRoot) {
-        this._root.innerHTML = "";
-      }
-      this._rendered = false;
+      this._teardown();
     }
     attributeChangedCallback() {
       if (this._rendered) {
         this._render();
       }
     }
+    _teardown() {
+      if (this._rendered) {
+        dispose(this._rendered);
+        this._rendered = null;
+      }
+      this._root.replaceChildren();
+    }
     _render() {
+      this._teardown();
       const props = this._getProps();
-      if (this._root instanceof ShadowRoot) {
-        this._root.innerHTML = "";
-      } else {
-        while (this._root.firstChild) {
-          this._root.removeChild(this._root.firstChild);
-        }
-      }
       if (options.styles && this._root instanceof ShadowRoot) {
         const styleEl = document.createElement("style");
         styleEl.textContent = options.styles;
@@ -881,7 +1062,7 @@ function defineElement(name, component, options = {}) {
       }
       const el = component(props, this);
       this._root.appendChild(el);
-      this._rendered = true;
+      this._rendered = el;
     }
     _getProps() {
       const props = {};
@@ -946,6 +1127,7 @@ export {
   bindAttrs,
   bindBoolAttr,
   bindData,
+  __resetDialogStack,
   dialog,
   toast,
   infiniteScroll,

package/dist/{chunk-EWFVA3TJ.js → chunk-R73P76YZ.js}

@@ -1,7 +1,7 @@
 import {
   SVG_NS,
   tagFactory
-} from "./chunk-MDVXJWFN.js";
+} from "./chunk-KLRMB5ZS.js";
 
 // src/core/rendering/html.ts
 var html = tagFactory("html");