sibujs 1.0.0-beta.1

package/dist/ui.cjs

@@ -0,0 +1,1497 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ui.ts
+var ui_exports = {};
+__export(ui_exports, {
+  FocusTrap: () => FocusTrap,
+  RenderProp: () => RenderProp,
+  VirtualList: () => VirtualList,
+  announce: () => announce,
+  aria: () => aria,
+  assertType: () => assertType,
+  bindAttrs: () => bindAttrs,
+  bindBoolAttr: () => bindBoolAttr,
+  bindData: () => bindData,
+  composable: () => composable,
+  compose: () => compose,
+  createGuard: () => createGuard,
+  createSlots: () => createSlots,
+  creditCardMask: () => creditCardMask,
+  custom: () => custom,
+  dateMask: () => dateMask,
+  defineComponent: () => defineComponent,
+  defineElement: () => defineElement,
+  defineSlottedComponent: () => defineSlottedComponent,
+  defineStrictComponent: () => defineStrictComponent,
+  dialog: () => dialog,
+  email: () => email,
+  eventBus: () => eventBus,
+  focus: () => focus,
+  form: () => form,
+  hotkey: () => hotkey,
+  infiniteScroll: () => infiniteScroll,
+  inputMask: () => inputMask,
+  intersection: () => intersection,
+  lazyLoad: () => lazyLoad,
+  matchesPattern: () => matchesPattern,
+  max: () => max,
+  maxLength: () => maxLength,
+  min: () => min,
+  minLength: () => minLength,
+  pagination: () => pagination,
+  phoneMask: () => phoneMask,
+  removeScopedStyle: () => removeScopedStyle,
+  required: () => required,
+  scopedStyle: () => scopedStyle,
+  ssnMask: () => ssnMask,
+  svgElement: () => svgElement,
+  timeMask: () => timeMask,
+  toast: () => toast,
+  validateProps: () => validateProps,
+  validators: () => validators,
+  withBoundary: () => withBoundary,
+  withDefaults: () => withDefaults,
+  withProps: () => withProps,
+  withScopedStyle: () => withScopedStyle,
+  withWrapper: () => withWrapper,
+  zipMask: () => zipMask
+});
+module.exports = __toCommonJS(ui_exports);
+
+// src/reactivity/track.ts
+var subscriberStack = [];
+var currentSubscriber = null;
+var signalSubscribers = /* @__PURE__ */ new WeakMap();
+var SUBS = "__s";
+var notifyDepth = 0;
+var pendingQueue = [];
+var pendingSet = /* @__PURE__ */ new Set();
+var suspendDepth = 0;
+var trackingSuspended = false;
+function track(effectFn, subscriber) {
+  if (!subscriber) subscriber = effectFn;
+  cleanup(subscriber);
+  subscriberStack.push(subscriber);
+  currentSubscriber = subscriber;
+  effectFn();
+  subscriberStack.pop();
+  currentSubscriber = subscriberStack[subscriberStack.length - 1] || null;
+  return () => cleanup(subscriber);
+}
+function suspendTracking() {
+  if (suspendDepth === 0) {
+    subscriberStack.push(null);
+    currentSubscriber = null;
+    trackingSuspended = true;
+  }
+  suspendDepth++;
+}
+function resumeTracking() {
+  suspendDepth--;
+  if (suspendDepth === 0) {
+    subscriberStack.pop();
+    currentSubscriber = subscriberStack[subscriberStack.length - 1] || null;
+    trackingSuspended = false;
+  }
+}
+function recordDependency(signal2) {
+  if (!currentSubscriber) return;
+  let deps = currentSubscriber._deps;
+  if (!deps) {
+    deps = /* @__PURE__ */ new Set();
+    currentSubscriber._deps = deps;
+  }
+  if (!deps.has(signal2)) {
+    deps.add(signal2);
+    let subs = signal2[SUBS];
+    if (!subs) {
+      subs = /* @__PURE__ */ new Set();
+      signalSubscribers.set(signal2, subs);
+      signal2[SUBS] = subs;
+    }
+    subs.add(currentSubscriber);
+    if (subs.size === 1) {
+      signal2.__f = currentSubscriber;
+    } else if (signal2.__f !== void 0) {
+      signal2.__f = void 0;
+    }
+  }
+}
+function propagateDirty(sub) {
+  sub();
+  let sig = sub._sig;
+  let suspended = false;
+  if (sig && sig._g) {
+    const sDeps = sub._deps;
+    if (sDeps && sDeps.size === 1) {
+      suspendTracking();
+      suspended = true;
+      const s = sig;
+      s._d = false;
+      s._v = s._g();
+    }
+  }
+  while (sig) {
+    const first = sig.__f;
+    if (first) {
+      if (first._c) {
+        const nSig = first._sig;
+        nSig._d = true;
+        if (suspended && nSig._g) {
+          const fDeps = first._deps;
+          if (fDeps && fDeps.size === 1) {
+            nSig._d = false;
+            nSig._v = nSig._g();
+          }
+        }
+        sig = nSig;
+        continue;
+      }
+      if (!pendingSet.has(first)) {
+        pendingSet.add(first);
+        pendingQueue.push(first);
+      }
+      break;
+    }
+    const subs = sig[SUBS];
+    if (!subs) break;
+    let nextSig;
+    for (const s of subs) {
+      if (s._c) {
+        s();
+        const nSig = s._sig;
+        if (nSig && !nextSig) {
+          nextSig = nSig;
+        } else if (nSig) {
+          propagateDirty(s);
+        }
+      } else if (!pendingSet.has(s)) {
+        pendingSet.add(s);
+        pendingQueue.push(s);
+      }
+    }
+    sig = nextSig;
+  }
+  if (suspended) resumeTracking();
+}
+function notifySubscribers(signal2) {
+  const first = signal2.__f;
+  if (first) {
+    if (notifyDepth > 0) {
+      if (first._c) {
+        propagateDirty(first);
+      } else if (!pendingSet.has(first)) {
+        pendingSet.add(first);
+        pendingQueue.push(first);
+      }
+      return;
+    }
+    notifyDepth++;
+    try {
+      if (first._c) {
+        propagateDirty(first);
+      } else {
+        first();
+      }
+      let i = 0;
+      while (i < pendingQueue.length) {
+        pendingQueue[i]();
+        i++;
+      }
+    } finally {
+      pendingQueue.length = 0;
+      pendingSet.clear();
+      notifyDepth--;
+    }
+    return;
+  }
+  const subs = signal2[SUBS];
+  if (!subs || subs.size === 0) return;
+  if (notifyDepth > 0) {
+    for (const sub of subs) {
+      if (sub._c) {
+        propagateDirty(sub);
+      } else if (!pendingSet.has(sub)) {
+        pendingSet.add(sub);
+        pendingQueue.push(sub);
+      }
+    }
+    return;
+  }
+  notifyDepth++;
+  try {
+    let directCount = 0;
+    for (const sub of subs) {
+      pendingQueue[directCount++] = sub;
+    }
+    for (let i2 = 0; i2 < directCount; i2++) {
+      if (pendingQueue[i2]._c) {
+        propagateDirty(pendingQueue[i2]);
+      }
+    }
+    for (let i2 = 0; i2 < directCount; i2++) {
+      if (!pendingQueue[i2]._c) {
+        if (!pendingSet.has(pendingQueue[i2])) {
+          pendingQueue[i2]();
+        }
+      }
+    }
+    let i = directCount;
+    while (i < pendingQueue.length) {
+      pendingQueue[i]();
+      i++;
+    }
+  } finally {
+    pendingQueue.length = 0;
+    pendingSet.clear();
+    notifyDepth--;
+  }
+}
+function cleanup(subscriber) {
+  const deps = subscriber._deps;
+  if (!deps || deps.size === 0) return;
+  for (const signal2 of deps) {
+    const subs = signal2[SUBS];
+    if (subs) {
+      subs.delete(subscriber);
+      if (signal2.__f === subscriber) {
+        signal2.__f = void 0;
+      }
+    }
+  }
+  deps.clear();
+}
+
+// src/core/dev.ts
+function isDev() {
+  return typeof globalThis.__SIBU_DEV__ !== "undefined" ? !!globalThis.__SIBU_DEV__ : typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : true;
+}
+function devAssert(condition, message) {
+  if (isDev() && !condition) {
+    throw new Error(`[Sibu] ${message}`);
+  }
+}
+
+// src/core/signals/derived.ts
+function derived(getter, options) {
+  devAssert(typeof getter === "function", "derived: argument must be a getter function.");
+  const debugName = options?.name;
+  const cs = {};
+  cs._d = false;
+  cs._g = getter;
+  const markDirty = () => {
+    if (cs._d) return;
+    cs._d = true;
+  };
+  markDirty._c = 1;
+  markDirty._sig = cs;
+  track(() => {
+    cs._d = false;
+    cs._v = getter();
+  }, markDirty);
+  const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  function computedGetter() {
+    if (trackingSuspended) {
+      if (cs._d) {
+        cs._d = false;
+        cs._v = getter();
+      }
+      return cs._v;
+    }
+    recordDependency(cs);
+    if (cs._d) {
+      const oldValue = cs._v;
+      cs._d = false;
+      suspendTracking();
+      try {
+        cs._v = getter();
+      } finally {
+        resumeTracking();
+      }
+      if (hook && oldValue !== cs._v) {
+        hook.emit("computed:update", { signal: cs, oldValue, newValue: cs._v });
+      }
+    }
+    return cs._v;
+  }
+  if (debugName) {
+    computedGetter.__name = debugName;
+    cs.__name = debugName;
+  }
+  computedGetter.__signal = cs;
+  if (hook) hook.emit("computed:create", { signal: cs, name: debugName, getter: computedGetter });
+  return computedGetter;
+}
+
+// src/reactivity/batch.ts
+var batchDepth = 0;
+var pendingSignals = /* @__PURE__ */ new Set();
+function enqueueBatchedSignal(signal2) {
+  if (batchDepth === 0) return false;
+  pendingSignals.add(signal2);
+  return true;
+}
+
+// src/core/signals/signal.ts
+function signal(initial, options) {
+  const state = { value: initial };
+  const debugName = options?.name;
+  if (debugName) {
+    state.__name = debugName;
+  }
+  function get() {
+    recordDependency(state);
+    return state.value;
+  }
+  get.__signal = state;
+  if (debugName) get.__name = debugName;
+  function set(next) {
+    const newValue = typeof next === "function" ? next(state.value) : next;
+    if (Object.is(newValue, state.value)) return;
+    const oldValue = state.value;
+    state.value = newValue;
+    const hook2 = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+    if (hook2) hook2.emit("signal:update", { signal: state, name: debugName, oldValue, newValue });
+    if (!enqueueBatchedSignal(state)) {
+      notifySubscribers(state);
+    }
+  }
+  const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook) hook.emit("signal:create", { signal: state, name: debugName, getter: get, initial });
+  return [get, set];
+}
+
+// src/ui/form.ts
+function required(message = "This field is required") {
+  return (value) => {
+    if (value == null || value === "" || Array.isArray(value) && value.length === 0) {
+      return message;
+    }
+    return null;
+  };
+}
+function minLength(min2, message) {
+  return (value) => {
+    if (value && value.length < min2) {
+      return message || `Must be at least ${min2} characters`;
+    }
+    return null;
+  };
+}
+function maxLength(max2, message) {
+  return (value) => {
+    if (value && value.length > max2) {
+      return message || `Must be at most ${max2} characters`;
+    }
+    return null;
+  };
+}
+function matchesPattern(regex, message = "Invalid format") {
+  return (value) => {
+    if (value && !regex.test(value)) {
+      return message;
+    }
+    return null;
+  };
+}
+function email(message = "Invalid email address") {
+  return matchesPattern(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, message);
+}
+function min(minVal, message) {
+  return (value) => {
+    if (value != null && value < minVal) {
+      return message || `Must be at least ${minVal}`;
+    }
+    return null;
+  };
+}
+function max(maxVal, message) {
+  return (value) => {
+    if (value != null && value > maxVal) {
+      return message || `Must be at most ${maxVal}`;
+    }
+    return null;
+  };
+}
+function custom(fn, message) {
+  return (value) => fn(value) ? null : message;
+}
+function form(config) {
+  const fieldEntries = Object.entries(config);
+  const fieldMap = {};
+  const manualErrors = {};
+  for (const [name, cfg] of fieldEntries) {
+    const [value, setValue] = signal(cfg.initial);
+    const [isTouched, setTouched] = signal(false);
+    const error = derived(() => {
+      if (manualErrors[name]) return manualErrors[name];
+      const val = value();
+      if (!cfg.validators) return null;
+      for (const validator of cfg.validators) {
+        const msg = validator(val);
+        if (msg) return msg;
+      }
+      return null;
+    });
+    fieldMap[name] = {
+      value,
+      set: setValue,
+      error,
+      touched: isTouched,
+      touch: () => setTouched(true),
+      reset: () => {
+        setValue(cfg.initial);
+        setTouched(false);
+        manualErrors[name] = null;
+      }
+    };
+  }
+  const errors = derived(() => {
+    const result = {};
+    for (const [name, field] of Object.entries(fieldMap)) {
+      result[name] = field.error();
+    }
+    return result;
+  });
+  const isValid = derived(() => {
+    for (const field of Object.values(fieldMap)) {
+      if (field.error() != null) return false;
+    }
+    return true;
+  });
+  const isDirty = derived(() => {
+    for (const [name, cfg] of fieldEntries) {
+      if (!Object.is(fieldMap[name].value(), cfg.initial)) return true;
+    }
+    return false;
+  });
+  const touchedState = derived(() => {
+    const result = {};
+    for (const [name, field] of Object.entries(fieldMap)) {
+      result[name] = field.touched();
+    }
+    return result;
+  });
+  const values = derived(() => {
+    const result = {};
+    for (const [name, field] of Object.entries(fieldMap)) {
+      result[name] = field.value();
+    }
+    return result;
+  });
+  function handleSubmit(onSubmit) {
+    return (e) => {
+      if (e) e.preventDefault();
+      for (const field of Object.values(fieldMap)) {
+        field.touch();
+      }
+      if (isValid()) {
+        onSubmit(values());
+      }
+    };
+  }
+  function reset() {
+    for (const field of Object.values(fieldMap)) {
+      field.reset();
+    }
+  }
+  function setError(field, message) {
+    manualErrors[field] = message;
+  }
+  return {
+    fields: fieldMap,
+    errors,
+    isValid,
+    isDirty,
+    touched: touchedState,
+    values,
+    handleSubmit,
+    reset,
+    setError
+  };
+}
+
+// src/core/ssr-context.ts
+var ssrMode = false;
+function isSSR() {
+  return ssrMode;
+}
+
+// src/core/signals/effect.ts
+function effect(effectFn) {
+  devAssert(typeof effectFn === "function", "effect: argument must be a function.");
+  if (isSSR()) return () => {
+  };
+  let runCount = 0;
+  let cleanupHandle = () => {
+  };
+  const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  const subscriber = () => {
+    cleanupHandle();
+    runCount++;
+    if (hook) hook.emit("effect:run", { effectFn, runCount });
+    cleanupHandle = track(effectFn, subscriber);
+  };
+  cleanupHandle = track(effectFn, subscriber);
+  runCount = 1;
+  if (hook) hook.emit("effect:create", { effectFn });
+  return () => {
+    if (hook) hook.emit("effect:destroy", { effectFn });
+    cleanupHandle();
+  };
+}
+
+// src/ui/virtualList.ts
+function VirtualList(props) {
+  const overscan = props.overscan ?? 3;
+  const [scrollTop, setScrollTop] = signal(0);
+  const container = document.createElement("div");
+  container.style.overflow = "auto";
+  container.style.height = `${props.containerHeight}px`;
+  container.style.position = "relative";
+  if (props.class) container.className = props.class;
+  const spacer = document.createElement("div");
+  spacer.style.position = "relative";
+  const content = document.createElement("div");
+  content.style.position = "absolute";
+  content.style.left = "0";
+  content.style.right = "0";
+  spacer.appendChild(content);
+  container.appendChild(spacer);
+  container.addEventListener("scroll", () => {
+    setScrollTop(container.scrollTop);
+  });
+  const update = () => {
+    const items = props.items();
+    const totalHeight = items.length * props.itemHeight;
+    spacer.style.height = `${totalHeight}px`;
+    const currentScroll = scrollTop();
+    const startIndex = Math.max(0, Math.floor(currentScroll / props.itemHeight) - overscan);
+    const visibleCount = Math.ceil(props.containerHeight / props.itemHeight) + 2 * overscan;
+    const endIndex = Math.min(items.length, startIndex + visibleCount);
+    content.style.top = `${startIndex * props.itemHeight}px`;
+    content.innerHTML = "";
+    for (let i = startIndex; i < endIndex; i++) {
+      const itemEl = props.renderItem(items[i], i);
+      itemEl.style.height = `${props.itemHeight}px`;
+      itemEl.style.boxSizing = "border-box";
+      content.appendChild(itemEl);
+    }
+  };
+  effect(update);
+  return container;
+}
+
+// src/ui/intersection.ts
+function intersection(options) {
+  const [isIntersecting, setIsIntersecting] = signal(false);
+  const [ratio, setRatio] = signal(0);
+  let observer = null;
+  let currentElement = null;
+  function observe(element) {
+    unobserve();
+    currentElement = element;
+    observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        setIsIntersecting(entry.isIntersecting);
+        setRatio(entry.intersectionRatio);
+      }
+    }, options);
+    observer.observe(element);
+  }
+  function unobserve() {
+    if (observer) {
+      if (currentElement) observer.unobserve(currentElement);
+      observer.disconnect();
+      observer = null;
+      currentElement = null;
+    }
+  }
+  return {
+    isIntersecting,
+    intersectionRatio: ratio,
+    observe,
+    unobserve
+  };
+}
+function lazyLoad(element, loader, options) {
+  const observer = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        loader();
+        observer.disconnect();
+        break;
+      }
+    }
+  }, options);
+  observer.observe(element);
+  return () => observer.disconnect();
+}
+
+// src/ui/inputMask.ts
+function inputMask(options) {
+  const placeholder = options.placeholder || "_";
+  const [value, setValue] = signal("");
+  const [rawValue, setRawValue] = signal("");
+  function applyMask(raw) {
+    let result = "";
+    let rawIndex = 0;
+    for (let i = 0; i < options.pattern.length && rawIndex < raw.length; i++) {
+      const maskChar = options.pattern[i];
+      if (maskChar === "9") {
+        while (rawIndex < raw.length && !/\d/.test(raw[rawIndex])) rawIndex++;
+        if (rawIndex < raw.length) {
+          result += raw[rawIndex++];
+        }
+      } else if (maskChar === "A") {
+        while (rawIndex < raw.length && !/[a-zA-Z]/.test(raw[rawIndex])) rawIndex++;
+        if (rawIndex < raw.length) {
+          result += raw[rawIndex++];
+        }
+      } else if (maskChar === "*") {
+        result += raw[rawIndex++];
+      } else {
+        result += maskChar;
+        if (raw[rawIndex] === maskChar) rawIndex++;
+      }
+    }
+    return result;
+  }
+  function extractRaw(masked) {
+    let raw = "";
+    for (let i = 0; i < masked.length && i < options.pattern.length; i++) {
+      const maskChar = options.pattern[i];
+      if (maskChar === "9" || maskChar === "A" || maskChar === "*") {
+        raw += masked[i];
+      }
+    }
+    return raw;
+  }
+  function bind(input) {
+    input.addEventListener("input", () => {
+      const raw = input.value.replace(/[^a-zA-Z0-9]/g, "");
+      const masked = applyMask(raw);
+      setValue(masked);
+      setRawValue(extractRaw(masked));
+      input.value = masked;
+    });
+    input.addEventListener("focus", () => {
+      if (!input.value) {
+        const display = options.pattern.replace(/9/g, placeholder).replace(/A/g, placeholder).replace(/\*/g, placeholder);
+        input.placeholder = display;
+      }
+    });
+  }
+  return { value, rawValue, bind };
+}
+function phoneMask() {
+  return { pattern: "(999) 999-9999" };
+}
+function dateMask() {
+  return { pattern: "99/99/9999" };
+}
+function creditCardMask() {
+  return { pattern: "9999 9999 9999 9999" };
+}
+function timeMask() {
+  return { pattern: "99:99" };
+}
+function ssnMask() {
+  return { pattern: "999-99-9999" };
+}
+function zipMask() {
+  return { pattern: "99999" };
+}
+
+// src/ui/a11y.ts
+function aria(element, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    const ariaKey = key.startsWith("aria-") ? key : `aria-${key}`;
+    if (typeof value === "function") {
+      const getter = value;
+      track(() => {
+        element.setAttribute(ariaKey, String(getter()));
+      });
+    } else {
+      element.setAttribute(ariaKey, String(value));
+    }
+  }
+}
+function focus() {
+  const [isFocused, setIsFocused] = signal(false);
+  let currentElement = null;
+  function bind(element) {
+    currentElement = element;
+    element.addEventListener("focus", () => setIsFocused(true));
+    element.addEventListener("blur", () => setIsFocused(false));
+  }
+  function focus2() {
+    currentElement?.focus();
+  }
+  function blur() {
+    currentElement?.blur();
+  }
+  return { isFocused, focus: focus2, blur, bind };
+}
+function FocusTrap(nodes, options = {}) {
+  const container = document.createElement("div");
+  container.setAttribute("data-sibu-focus-trap", "true");
+  container.appendChild(nodes);
+  const previouslyFocused = document.activeElement;
+  container.addEventListener("keydown", (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 first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  });
+  if (options.autoFocus !== false) {
+    queueMicrotask(() => {
+      const first = container.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      first?.focus();
+    });
+  }
+  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;
+          }
+        }
+      }
+    });
+    queueMicrotask(() => {
+      if (container.parentNode) {
+        observer.observe(container.parentNode, { childList: true });
+      }
+    });
+  }
+  return container;
+}
+function hotkey(key, handler, options = {}) {
+  const listener = (e) => {
+    const ke = e;
+    if (ke.key.toLowerCase() !== key.toLowerCase()) return;
+    if (options.ctrl && !ke.ctrlKey) return;
+    if (options.shift && !ke.shiftKey) return;
+    if (options.alt && !ke.altKey) return;
+    if (options.meta && !ke.metaKey) return;
+    handler(ke);
+  };
+  document.addEventListener("keydown", listener);
+  return () => document.removeEventListener("keydown", listener);
+}
+function announce(message, priority = "polite") {
+  let region = document.getElementById(`sibu-announce-${priority}`);
+  if (!region) {
+    region = document.createElement("div");
+    region.id = `sibu-announce-${priority}`;
+    region.setAttribute("aria-live", priority);
+    region.setAttribute("aria-atomic", "true");
+    region.setAttribute("role", priority === "assertive" ? "alert" : "status");
+    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);
+  }
+  region.textContent = "";
+  requestAnimationFrame(() => {
+    if (region) region.textContent = message;
+  });
+}
+
+// src/ui/scopedStyle.ts
+var scopeCounter = 0;
+function scopedStyle(css) {
+  const id = `sibu-s${scopeCounter++}`;
+  const attr = `data-${id}`;
+  const scopedCSS = css.replace(/([^\r\n,{}]+)(,(?=[^}]*{)|\s*{)/g, (match, selector, delimiter) => {
+    const trimmed = selector.trim();
+    if (trimmed.startsWith("@") || trimmed.startsWith("from") || trimmed.startsWith("to") || /^\d+%$/.test(trimmed)) {
+      return match;
+    }
+    return `${trimmed}[${attr}]${delimiter}`;
+  });
+  const styleEl = document.createElement("style");
+  styleEl.setAttribute("data-sibu-scope", id);
+  styleEl.textContent = scopedCSS;
+  document.head.appendChild(styleEl);
+  return { scope: id, attr };
+}
+function withScopedStyle(css, component) {
+  const { attr } = scopedStyle(css);
+  return (props) => {
+    const el = component(props);
+    applyScopeRecursive(el, attr);
+    return el;
+  };
+}
+function applyScopeRecursive(element, attr) {
+  element.setAttribute(attr, "");
+  for (const child of Array.from(element.children)) {
+    if (child instanceof HTMLElement) {
+      applyScopeRecursive(child, attr);
+    }
+  }
+}
+function removeScopedStyle(scopeId) {
+  const el = document.head.querySelector(`style[data-sibu-scope="${scopeId}"]`);
+  if (el) el.remove();
+}
+
+// src/utils/sanitize.ts
+function sanitize(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function sanitizeUrl(url) {
+  const trimmed = url.replace(/[\x00-\x20\x7f-\x9f]+/g, "").trim();
+  if (!trimmed) return "";
+  const lower = trimmed.toLowerCase();
+  if (lower.startsWith("javascript:") || lower.startsWith("data:") || lower.startsWith("vbscript:") || lower.startsWith("blob:")) {
+    return "";
+  }
+  return trimmed;
+}
+var URL_ATTRIBUTES = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "cite", "poster", "background", "srcset"]);
+function isUrlAttribute(attr) {
+  return URL_ATTRIBUTES.has(attr);
+}
+function sanitizeAttribute(attr, value) {
+  if (isUrlAttribute(attr)) {
+    return sanitizeUrl(value);
+  }
+  return sanitize(value);
+}
+
+// src/reactivity/bindAttribute.ts
+function bindAttribute(el, attr, getter) {
+  function commit() {
+    let value;
+    try {
+      value = getter();
+    } catch {
+      return;
+    }
+    if (typeof value === "boolean") {
+      if (attr in el && (attr === "checked" || attr === "disabled" || attr === "selected")) {
+        el[attr] = value;
+      } else if (value) {
+        el.setAttribute(attr, "");
+      } else {
+        el.removeAttribute(attr);
+      }
+      return;
+    }
+    const str = sanitizeAttribute(attr, String(value));
+    if ((attr === "value" || attr === "checked") && attr in el) {
+      el[attr] = attr === "checked" ? Boolean(value) : str;
+    } else {
+      el.setAttribute(attr, str);
+    }
+  }
+  const teardown = track(commit);
+  return teardown;
+}
+
+// src/ui/reactiveAttr.ts
+function bindAttrs(el, attrs) {
+  const teardowns = [];
+  for (const [attr, value] of Object.entries(attrs)) {
+    if (typeof value === "function") {
+      const teardown = bindAttribute(el, attr, value);
+      teardowns.push(teardown);
+    } else if (typeof value === "boolean") {
+      if (value) {
+        el.setAttribute(attr, "");
+      } else {
+        el.removeAttribute(attr);
+      }
+    } else {
+      el.setAttribute(attr, String(value));
+    }
+  }
+  return () => {
+    for (const td of teardowns) {
+      td();
+    }
+  };
+}
+function bindBoolAttr(el, attr, getter) {
+  if (typeof getter !== "function") {
+    if (getter) {
+      el.setAttribute(attr, "");
+    } else {
+      el.removeAttribute(attr);
+    }
+    return () => {
+    };
+  }
+  const reactiveGetter = getter;
+  function commit() {
+    let value;
+    try {
+      value = reactiveGetter();
+    } catch {
+      return;
+    }
+    if (value) {
+      el.setAttribute(attr, "");
+    } else {
+      el.removeAttribute(attr);
+    }
+  }
+  const teardown = track(commit);
+  return teardown;
+}
+function bindData(el, key, getter) {
+  const dataAttr = `data-${key}`;
+  if (typeof getter !== "function") {
+    el.setAttribute(dataAttr, String(getter));
+    return () => {
+    };
+  }
+  return bindAttribute(el, dataAttr, getter);
+}
+
+// src/ui/dialog.ts
+function dialog() {
+  const [isOpen, setIsOpen] = signal(false);
+  let listenerAttached = false;
+  function handleKeydown(event) {
+    if (event.key === "Escape") {
+      close();
+    }
+  }
+  function open() {
+    setIsOpen(true);
+    if (typeof window !== "undefined" && !listenerAttached) {
+      window.addEventListener("keydown", handleKeydown);
+      listenerAttached = true;
+    }
+  }
+  function close() {
+    setIsOpen(false);
+    if (typeof window !== "undefined" && listenerAttached) {
+      window.removeEventListener("keydown", handleKeydown);
+      listenerAttached = false;
+    }
+  }
+  function toggle() {
+    if (isOpen()) {
+      close();
+    } else {
+      open();
+    }
+  }
+  return { open, close, isOpen, toggle };
+}
+
+// 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();
+  function show(message, type) {
+    const id = `toast-${++toastCounter}`;
+    const toast2 = { id, message, type };
+    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);
+        }
+      }
+      return next;
+    });
+    if (duration > 0) {
+      const timer = setTimeout(() => {
+        dismiss(id);
+      }, duration);
+      timers.set(id, timer);
+    }
+    return id;
+  }
+  function dismiss(id) {
+    clearTimerForToast(id);
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }
+  function dismissAll() {
+    for (const timer of timers.values()) {
+      clearTimeout(timer);
+    }
+    timers.clear();
+    setToasts([]);
+  }
+  function clearTimerForToast(id) {
+    const timer = timers.get(id);
+    if (timer !== void 0) {
+      clearTimeout(timer);
+      timers.delete(id);
+    }
+  }
+  return { toasts, show, dismiss, dismissAll };
+}
+
+// src/ui/infiniteScroll.ts
+function infiniteScroll(options) {
+  const { onLoadMore, hasMore, threshold = 0 } = options;
+  const [loading, setLoading] = signal(false);
+  const sentinelRef = { current: null };
+  let observer = null;
+  let disposed = false;
+  function createObserver() {
+    if (typeof IntersectionObserver === "undefined") return;
+    observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting && !loading() && hasMore() && !disposed) {
+          loadMore();
+        }
+      },
+      { threshold }
+    );
+    if (sentinelRef.current) {
+      observer.observe(sentinelRef.current);
+    }
+  }
+  async function loadMore() {
+    setLoading(true);
+    try {
+      await onLoadMore();
+    } finally {
+      setLoading(false);
+    }
+  }
+  const originalRef = sentinelRef;
+  let _current = null;
+  Object.defineProperty(originalRef, "current", {
+    get() {
+      return _current;
+    },
+    set(el) {
+      _current = el;
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
+      if (el && !disposed) {
+        createObserver();
+      }
+    },
+    configurable: true
+  });
+  function dispose() {
+    disposed = true;
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  }
+  return { sentinelRef: originalRef, loading, dispose };
+}
+
+// src/ui/pagination.ts
+function pagination(options) {
+  const pageSizeValue = options.pageSize ?? 10;
+  const [page, setPage] = signal(options.initialPage ?? 1);
+  const [pageSize] = signal(pageSizeValue);
+  const totalPages = derived(() => {
+    const total = options.totalItems();
+    return Math.max(1, Math.ceil(total / pageSizeValue));
+  });
+  const startIndex = derived(() => {
+    return (page() - 1) * pageSizeValue;
+  });
+  const endIndex = derived(() => {
+    const end = page() * pageSizeValue;
+    const total = options.totalItems();
+    return Math.min(end, total);
+  });
+  function next() {
+    if (page() < totalPages()) {
+      setPage((p) => p + 1);
+    }
+  }
+  function prev() {
+    if (page() > 1) {
+      setPage((p) => p - 1);
+    }
+  }
+  function goTo(target) {
+    const clamped = Math.max(1, Math.min(target, totalPages()));
+    setPage(clamped);
+  }
+  return { page, pageSize, totalPages, next, prev, goTo, startIndex, endIndex };
+}
+
+// src/ui/eventBus.ts
+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);
+    }
+    set.add(handler);
+    return () => off(event, handler);
+  }
+  function emit(event, data) {
+    const set = listeners.get(event);
+    if (set) {
+      for (const handler of set) {
+        handler(data);
+      }
+    }
+  }
+  function off(event, handler) {
+    const set = listeners.get(event);
+    if (set) {
+      set.delete(handler);
+      if (set.size === 0) {
+        listeners.delete(event);
+      }
+    }
+  }
+  function clear() {
+    listeners.clear();
+  }
+  return { on, emit, off, clear };
+}
+
+// src/platform/customElement.ts
+function defineElement(name, component, options = {}) {
+  if (customElements.get(name)) return;
+  const observed = options.observedAttributes || [];
+  class SibuElement extends HTMLElement {
+    constructor() {
+      super();
+      this._rendered = false;
+      if (options.shadow !== false) {
+        this._root = this.attachShadow({ mode: options.mode || "open" });
+      } else {
+        this._root = this;
+      }
+    }
+    static get observedAttributes() {
+      return observed;
+    }
+    connectedCallback() {
+      this._render();
+    }
+    disconnectedCallback() {
+      if (this._root instanceof ShadowRoot) {
+        this._root.innerHTML = "";
+      }
+      this._rendered = false;
+    }
+    attributeChangedCallback() {
+      if (this._rendered) {
+        this._render();
+      }
+    }
+    _render() {
+      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;
+        this._root.appendChild(styleEl);
+      }
+      const el = component(props, this);
+      this._root.appendChild(el);
+      this._rendered = true;
+    }
+    _getProps() {
+      const props = {};
+      for (const attr of this.attributes) {
+        props[attr.name] = attr.value;
+      }
+      return props;
+    }
+  }
+  customElements.define(name, SibuElement);
+}
+function svgElement(tag, props = {}, ...nodes) {
+  const SVG_NS = "http://www.w3.org/2000/svg";
+  const el = document.createElementNS(SVG_NS, tag);
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "nodes") continue;
+    if (typeof value === "function" && key.startsWith("on")) {
+      el.addEventListener(key.slice(2).toLowerCase(), value);
+    } else if (value != null) {
+      el.setAttribute(key, String(value));
+    }
+  }
+  for (const child of nodes) {
+    if (typeof child === "string") {
+      el.appendChild(document.createTextNode(child));
+    } else if (child instanceof Node) {
+      el.appendChild(child);
+    }
+  }
+  return el;
+}
+
+// src/patterns/composable.ts
+function composable(setup) {
+  return setup;
+}
+function RenderProp(props) {
+  return props.render(props.data());
+}
+function withBoundary(name, component) {
+  return (props) => {
+    const wrapper = document.createElement("div");
+    wrapper.setAttribute("data-sibu-boundary", name);
+    try {
+      const el = component(props);
+      wrapper.appendChild(el);
+    } catch (error) {
+      const errorEl = document.createElement("div");
+      errorEl.setAttribute("data-sibu-boundary-error", name);
+      errorEl.style.cssText = "color: red; border: 1px solid red; padding: 8px; margin: 4px;";
+      errorEl.textContent = `[${name}] ${error instanceof Error ? error.message : String(error)}`;
+      wrapper.appendChild(errorEl);
+    }
+    return wrapper;
+  };
+}
+function createSlots(slots) {
+  return {
+    renderSlot(name, fallback) {
+      const slotFn = slots[name];
+      if (slotFn) {
+        const result = slotFn();
+        if (Array.isArray(result)) {
+          const fragment = document.createElement("div");
+          fragment.style.display = "contents";
+          for (const el of result) fragment.appendChild(el);
+          return fragment;
+        }
+        return result;
+      }
+      return fallback ? fallback() : null;
+    },
+    hasSlot(name) {
+      return name in slots;
+    }
+  };
+}
+
+// src/patterns/hoc.ts
+function withWrapper(WrappedComponent, wrapper) {
+  return (props) => wrapper(WrappedComponent, props);
+}
+function withDefaults(component, defaults) {
+  return (props) => component({ ...defaults, ...props });
+}
+function compose(...wrappers) {
+  return (component) => wrappers.reduceRight((comp, wrapper) => wrapper(comp), component);
+}
+
+// src/patterns/componentProps.ts
+function defineComponent(config) {
+  const { defaults, setup } = config;
+  return (props) => {
+    const merged = defaults ? { ...defaults, ...props } : props;
+    return setup(merged);
+  };
+}
+function defineSlottedComponent(config) {
+  const { defaults, setup } = config;
+  return (props) => {
+    const merged = defaults ? { ...defaults, ...props } : props;
+    return setup(merged);
+  };
+}
+function withProps(component, mapProps) {
+  return (props) => component(mapProps(props));
+}
+
+// src/patterns/contracts.ts
+var validators = {
+  string: ((value, name) => typeof value === "string" || `${name} must be a string, got ${typeof value}`),
+  number: ((value, name) => typeof value === "number" || `${name} must be a number, got ${typeof value}`),
+  boolean: ((value, name) => typeof value === "boolean" || `${name} must be a boolean, got ${typeof value}`),
+  function: ((value, name) => typeof value === "function" || `${name} must be a function, got ${typeof value}`),
+  object: ((value, name) => typeof value === "object" && value !== null || `${name} must be an object`),
+  array: ((value, name) => Array.isArray(value) || `${name} must be an array`),
+  required: ((value, name) => value != null || `${name} is required`),
+  oneOf: (...values) => (value, name) => values.includes(value) || `${name} must be one of: ${values.join(", ")}`,
+  instanceOf: (ctor) => (value, name) => value instanceof ctor || `${name} must be an instance of ${ctor.name}`,
+  arrayOf: (itemValidator) => (value, name) => {
+    if (!Array.isArray(value)) return `${name} must be an array`;
+    for (let i = 0; i < value.length; i++) {
+      const result = itemValidator(value[i], `${name}[${i}]`);
+      if (result !== true) return result;
+    }
+    return true;
+  },
+  shape: (schema) => (value, name) => {
+    if (typeof value !== "object" || value === null) return `${name} must be an object`;
+    for (const [key, validator] of Object.entries(schema)) {
+      const result = validator(value[key], `${name}.${key}`);
+      if (result !== true) return result;
+    }
+    return true;
+  },
+  optional: (validator) => (value, name) => {
+    if (value == null) return true;
+    return validator(value, name);
+  },
+  range: (min2, max2) => (value, name) => {
+    if (typeof value !== "number") return `${name} must be a number`;
+    return value >= min2 && value <= max2 || `${name} must be between ${min2} and ${max2}`;
+  },
+  pattern: (regex) => (value, name) => {
+    if (typeof value !== "string") return `${name} must be a string`;
+    return regex.test(value) || `${name} must match pattern ${regex}`;
+  }
+};
+function validateProps(props, schema) {
+  const result = { ...props };
+  const errors = [];
+  const isDev2 = typeof process === "undefined" || process?.env?.NODE_ENV !== "production";
+  for (const [key, def] of Object.entries(schema)) {
+    const propDef = typeof def === "function" ? { type: def } : def;
+    if (result[key] == null && propDef.default !== void 0) {
+      result[key] = typeof propDef.default === "function" ? propDef.default() : propDef.default;
+    }
+    if (!isDev2) continue;
+    if (propDef.required && result[key] == null) {
+      errors.push(`Prop '${key}' is required`);
+      continue;
+    }
+    if (result[key] == null) continue;
+    if (propDef.type) {
+      const typeResult = propDef.type(result[key], key);
+      if (typeResult !== true) errors.push(typeResult);
+    }
+    if (propDef.validator) {
+      const validResult = propDef.validator(result[key], key);
+      if (validResult !== true) errors.push(validResult);
+    }
+  }
+  if (errors.length > 0 && isDev2) {
+    console.warn(`[SibuJS] Prop validation errors:
+${errors.map((e) => `  - ${e}`).join("\n")}`);
+  }
+  return result;
+}
+function defineStrictComponent(config) {
+  return (props) => {
+    const validated = validateProps(props, config.props);
+    return config.setup(validated);
+  };
+}
+function assertType(value, validator, label) {
+  if (typeof process !== "undefined" && process?.env?.NODE_ENV === "production") return;
+  const result = validator(value, label || "value");
+  if (result !== true) {
+    throw new TypeError(`[SibuJS Contract] ${result}`);
+  }
+}
+function createGuard(validator) {
+  return (value) => {
+    return validator(value, "value") === true;
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FocusTrap,
+  RenderProp,
+  VirtualList,
+  announce,
+  aria,
+  assertType,
+  bindAttrs,
+  bindBoolAttr,
+  bindData,
+  composable,
+  compose,
+  createGuard,
+  createSlots,
+  creditCardMask,
+  custom,
+  dateMask,
+  defineComponent,
+  defineElement,
+  defineSlottedComponent,
+  defineStrictComponent,
+  dialog,
+  email,
+  eventBus,
+  focus,
+  form,
+  hotkey,
+  infiniteScroll,
+  inputMask,
+  intersection,
+  lazyLoad,
+  matchesPattern,
+  max,
+  maxLength,
+  min,
+  minLength,
+  pagination,
+  phoneMask,
+  removeScopedStyle,
+  required,
+  scopedStyle,
+  ssnMask,
+  svgElement,
+  timeMask,
+  toast,
+  validateProps,
+  validators,
+  withBoundary,
+  withDefaults,
+  withProps,
+  withScopedStyle,
+  withWrapper,
+  zipMask
+});