sibujs 1.2.0 → 1.4.0

package/dist/ui.cjs

@@ -30,9 +30,11 @@ __export(ui_exports, {
   bindBoolAttr: () => bindBoolAttr,
   bindData: () => bindData,
   bindField: () => bindField,
-  composable: () => composable,
   compose: () => compose,
+  createDialogAria: () => createDialogAria,
+  createFocusManager: () => createFocusManager,
   createGuard: () => createGuard,
+  createListbox: () => createListbox,
   createSlots: () => createSlots,
   creditCardMask: () => creditCardMask,
   custom: () => custom,
@@ -46,10 +48,13 @@ __export(ui_exports, {
   eventBus: () => eventBus,
   focus: () => focus,
   form: () => form,
+  formAction: () => formAction,
   hotkey: () => hotkey,
+  hover: () => hover,
   infiniteScroll: () => infiniteScroll,
   inputMask: () => inputMask,
   intersection: () => intersection,
+  interval: () => interval,
   lazyEffect: () => lazyEffect,
   lazyLoad: () => lazyLoad,
   matchesPattern: () => matchesPattern,
@@ -62,9 +67,11 @@ __export(ui_exports, {
   removeScopedStyle: () => removeScopedStyle,
   required: () => required,
   scopedStyle: () => scopedStyle,
+  scrollLock: () => scrollLock,
   ssnMask: () => ssnMask,
   svgElement: () => svgElement,
   timeMask: () => timeMask,
+  timeout: () => timeout,
   toast: () => toast,
   validateProps: () => validateProps,
   validators: () => validators,
@@ -573,6 +580,41 @@ function form(config) {
   };
 }
 
+// src/ui/formAction.ts
+function formAction(fn) {
+  const [pending, setPending] = signal(false);
+  const [error, setError] = signal(null);
+  const [result, setResult] = signal(null);
+  let runId = 0;
+  async function run(...args) {
+    const currentId = ++runId;
+    setPending(true);
+    setError(null);
+    try {
+      const value = await fn(...args);
+      if (currentId !== runId) return;
+      setResult(value);
+    } catch (err) {
+      if (currentId !== runId) return;
+      setError(err);
+    } finally {
+      if (currentId === runId) setPending(false);
+    }
+  }
+  function reset() {
+    setError(null);
+    setResult(null);
+  }
+  function onSubmit(e) {
+    e.preventDefault();
+    const formEl = e.currentTarget;
+    if (!formEl || typeof FormData === "undefined") return;
+    const data = new FormData(formEl);
+    run(data);
+  }
+  return { run, pending, error, result, reset, onSubmit };
+}
+
 // src/core/ssr-context.ts
 var ssrMode = false;
 function isSSR() {
@@ -902,10 +944,224 @@ function announce(message, priority = "polite") {
   });
 }
 
+// src/core/rendering/createId.ts
+var idCounter = 0;
+function createId(prefix = "sibu") {
+  idCounter++;
+  return `${prefix}-${idCounter}`;
+}
+
+// src/core/rendering/dispose.ts
+var elementDisposers = /* @__PURE__ */ new WeakMap();
+var _isDev4 = isDev();
+var activeBindingCount = 0;
+function registerDisposer(node, teardown) {
+  let disposers = elementDisposers.get(node);
+  if (!disposers) {
+    disposers = [];
+    elementDisposers.set(node, disposers);
+  }
+  disposers.push(teardown);
+  if (_isDev4) activeBindingCount++;
+}
+
+// src/ui/a11yPrimitives.ts
+var DEFAULT_FOCUS_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function createFocusManager(container, options = {}) {
+  const selector = options.selector ?? DEFAULT_FOCUS_SELECTOR;
+  const loop = options.loop ?? true;
+  function items() {
+    return Array.from(container.querySelectorAll(selector));
+  }
+  function focusFirst() {
+    const all = items();
+    if (all.length > 0) all[0].focus();
+  }
+  function focusLast() {
+    const all = items();
+    if (all.length > 0) all[all.length - 1].focus();
+  }
+  function focusNext() {
+    const all = items();
+    if (all.length === 0) return;
+    const idx = all.indexOf(document.activeElement);
+    if (idx === -1) {
+      all[0].focus();
+      return;
+    }
+    const next = idx + 1;
+    if (next >= all.length) {
+      if (loop) all[0].focus();
+      return;
+    }
+    all[next].focus();
+  }
+  function focusPrev() {
+    const all = items();
+    if (all.length === 0) return;
+    const idx = all.indexOf(document.activeElement);
+    if (idx === -1) {
+      all[all.length - 1].focus();
+      return;
+    }
+    const prev = idx - 1;
+    if (prev < 0) {
+      if (loop) all[all.length - 1].focus();
+      return;
+    }
+    all[prev].focus();
+  }
+  return { focusFirst, focusLast, focusNext, focusPrev, items };
+}
+function createListbox(container, options = {}) {
+  const multiple = options.multiple ?? false;
+  const optionSelector = options.optionSelector ?? '[role="option"]';
+  container.setAttribute("role", "listbox");
+  if (multiple) container.setAttribute("aria-multiselectable", "true");
+  if (!container.hasAttribute("tabindex")) container.setAttribute("tabindex", "0");
+  const [activeValue, setActiveValue] = signal(null);
+  const [selectedValue, setSelectedValue] = signal(null);
+  const [activeDescendantId, setActiveDescendantId] = signal(null);
+  function stampIds() {
+    const opts = Array.from(container.querySelectorAll(optionSelector));
+    for (const opt of opts) {
+      if (!opt.id) opt.id = createId("listbox-option");
+    }
+  }
+  stampIds();
+  function getOptions() {
+    return Array.from(container.querySelectorAll(optionSelector));
+  }
+  function setActive(value) {
+    setActiveValue(value);
+    const opts = getOptions();
+    for (const opt of opts) {
+      if (opt.dataset.value === value) {
+        opt.setAttribute("data-highlighted", "");
+        setActiveDescendantId(opt.id || null);
+        container.setAttribute("aria-activedescendant", opt.id || "");
+      } else {
+        opt.removeAttribute("data-highlighted");
+      }
+    }
+    if (value === null) {
+      setActiveDescendantId(null);
+      container.removeAttribute("aria-activedescendant");
+    }
+  }
+  function select(value) {
+    if (multiple) {
+      const current2 = selectedValue();
+      const set = new Set((current2 ?? "").split(",").filter(Boolean));
+      if (set.has(value)) set.delete(value);
+      else set.add(value);
+      setSelectedValue(Array.from(set).join(","));
+    } else {
+      setSelectedValue(value);
+    }
+    options.onSelect?.(value);
+    const opts = getOptions();
+    const current = selectedValue();
+    const selected = new Set((current ?? "").split(",").filter(Boolean));
+    for (const opt of opts) {
+      const ov = opt.dataset.value ?? "";
+      opt.setAttribute("aria-selected", selected.has(ov) ? "true" : "false");
+    }
+  }
+  function moveActive(delta) {
+    const opts = getOptions();
+    if (opts.length === 0) return;
+    const currentIdx = opts.findIndex((o) => o.dataset.value === activeValue());
+    let next = currentIdx + delta;
+    if (next < 0) next = opts.length - 1;
+    if (next >= opts.length) next = 0;
+    const nextValue = opts[next].dataset.value ?? null;
+    setActive(nextValue);
+    if (typeof opts[next].scrollIntoView === "function") {
+      opts[next].scrollIntoView({ block: "nearest" });
+    }
+  }
+  function onKeyDown(e) {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveActive(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveActive(-1);
+        break;
+      case "Home": {
+        e.preventDefault();
+        const opts = getOptions();
+        if (opts.length > 0) setActive(opts[0].dataset.value ?? null);
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        const opts = getOptions();
+        if (opts.length > 0) setActive(opts[opts.length - 1].dataset.value ?? null);
+        break;
+      }
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        const active = activeValue();
+        if (active !== null) select(active);
+        break;
+      }
+    }
+  }
+  function onClick(e) {
+    const target = e.target.closest(optionSelector);
+    if (!target || !container.contains(target)) return;
+    const value = target.dataset.value ?? null;
+    if (value !== null) {
+      setActive(value);
+      select(value);
+    }
+  }
+  container.addEventListener("keydown", onKeyDown);
+  container.addEventListener("click", onClick);
+  function dispose() {
+    container.removeEventListener("keydown", onKeyDown);
+    container.removeEventListener("click", onClick);
+  }
+  registerDisposer(container, dispose);
+  return { activeValue, selectedValue, activeDescendantId, dispose };
+}
+function createDialogAria(element, options = {}) {
+  const titleId = options.labelledBy ?? createId("dialog-title");
+  const descriptionId = options.describedBy ?? createId("dialog-desc");
+  element.setAttribute("role", options.alert ? "alertdialog" : "dialog");
+  if (options.modal ?? true) element.setAttribute("aria-modal", "true");
+  element.setAttribute("aria-labelledby", titleId);
+  element.setAttribute("aria-describedby", descriptionId);
+  if (!element.hasAttribute("tabindex")) element.setAttribute("tabindex", "-1");
+  return { titleId, descriptionId };
+}
+
 // src/ui/scopedStyle.ts
 var scopeCounter = 0;
+function decodeCssEscapes(css) {
+  return css.replace(/\\([0-9a-f]{1,6})[ \t\n\r\f]?|\\([^\n])/gi, (_match, hex, ch) => {
+    if (hex) {
+      const code = Number.parseInt(hex, 16);
+      if (Number.isFinite(code) && code > 0 && code <= 1114111) {
+        try {
+          return String.fromCodePoint(code);
+        } catch {
+          return "";
+        }
+      }
+      return "";
+    }
+    return ch || "";
+  });
+}
 function sanitizeCSS(css) {
-  let sanitized = css.replace(/@import\s+[^;]+;/gi, "/* @import removed */");
+  let sanitized = decodeCssEscapes(css);
+  sanitized = sanitized.replace(/@import\s+[^;]+;/gi, "/* @import removed */");
   sanitized = sanitized.replace(/url\s*\(\s*(?:"[^"]*"|'[^']*'|[^)]*)\s*\)/gi, "/* url() removed */");
   sanitized = sanitized.replace(/expression\s*\(\s*(?:"[^"]*"|'[^']*'|[^)]*)\s*\)/gi, "/* expression() removed */");
   sanitized = sanitized.replace(/-moz-binding\s*:[^;]+;/gi, "/* -moz-binding removed */");
@@ -971,14 +1227,27 @@ function isUrlAttribute(attr) {
 }
 
 // src/reactivity/bindAttribute.ts
-var _isDev4 = isDev();
+var _isDev5 = isDev();
+function isEventHandlerAttr(name) {
+  if (name.length < 3) return false;
+  const lower = name.toLowerCase();
+  return lower[0] === "o" && lower[1] === "n" && lower.charCodeAt(2) >= 97 && lower.charCodeAt(2) <= 122;
+}
 function bindAttribute(el, attr, getter) {
+  if (isEventHandlerAttr(attr)) {
+    if (_isDev5)
+      devWarn(
+        `bindAttribute: refusing to bind event-handler attribute "${attr}". Use on:{ ${attr.slice(2)}: fn } instead.`
+      );
+    return () => {
+    };
+  }
   function commit() {
     let value;
     try {
       value = getter();
     } catch (err) {
-      if (_isDev4)
+      if (_isDev5)
         devWarn(`bindAttribute: getter for "${attr}" threw: ${err instanceof Error ? err.message : String(err)}`);
       return;
     }
@@ -1314,6 +1583,99 @@ function lazyEffect(element, effectFn, options) {
   };
 }
 
+// src/ui/timers.ts
+function interval(fn, ms) {
+  let id = null;
+  let running = false;
+  function start() {
+    if (running) return;
+    id = setInterval(fn, ms);
+    running = true;
+  }
+  function stop() {
+    if (id !== null) {
+      clearInterval(id);
+      id = null;
+    }
+    running = false;
+  }
+  start();
+  return {
+    stop,
+    pause: stop,
+    resume: start,
+    isRunning: () => running
+  };
+}
+function timeout(fn, ms) {
+  let pending = true;
+  const id = setTimeout(() => {
+    pending = false;
+    fn();
+  }, ms);
+  return {
+    cancel: () => {
+      if (pending) {
+        clearTimeout(id);
+        pending = false;
+      }
+    },
+    isPending: () => pending
+  };
+}
+
+// src/ui/hover.ts
+function hover(target) {
+  const [hovered, setHovered] = signal(false);
+  if (typeof window === "undefined") {
+    return { hovered, dispose: () => {
+    } };
+  }
+  const onEnter = () => setHovered(true);
+  const onLeave = () => setHovered(false);
+  target.addEventListener("pointerenter", onEnter);
+  target.addEventListener("pointerleave", onLeave);
+  function dispose() {
+    target.removeEventListener("pointerenter", onEnter);
+    target.removeEventListener("pointerleave", onLeave);
+  }
+  return { hovered, dispose };
+}
+
+// src/ui/scrollLock.ts
+var lockCount = 0;
+var savedOverflow = null;
+var savedPaddingRight = null;
+function scrollLock() {
+  let owned = false;
+  function lock() {
+    if (owned) return;
+    owned = true;
+    lockCount++;
+    if (lockCount !== 1 || typeof document === "undefined") return;
+    const body = document.body;
+    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+    savedOverflow = body.style.overflow;
+    savedPaddingRight = body.style.paddingRight;
+    body.style.overflow = "hidden";
+    if (scrollBarWidth > 0) {
+      body.style.paddingRight = `${scrollBarWidth}px`;
+    }
+  }
+  function unlock() {
+    if (!owned) return;
+    owned = false;
+    lockCount = Math.max(0, lockCount - 1);
+    if (lockCount !== 0 || typeof document === "undefined") return;
+    const body = document.body;
+    body.style.overflow = savedOverflow ?? "";
+    body.style.paddingRight = savedPaddingRight ?? "";
+    savedOverflow = null;
+    savedPaddingRight = null;
+  }
+  return { lock, unlock };
+}
+
 // src/platform/customElement.ts
 function defineElement(name, component, options = {}) {
   if (customElements.get(name)) return;
@@ -1395,9 +1757,6 @@ function svgElement(tag, props = {}, ...nodes) {
 }
 
 // src/patterns/composable.ts
-function composable(setup) {
-  return setup;
-}
 function RenderProp(props) {
   return props.render(props.data());
 }
@@ -1570,9 +1929,11 @@ function createGuard(validator) {
   bindBoolAttr,
   bindData,
   bindField,
-  composable,
   compose,
+  createDialogAria,
+  createFocusManager,
   createGuard,
+  createListbox,
   createSlots,
   creditCardMask,
   custom,
@@ -1586,10 +1947,13 @@ function createGuard(validator) {
   eventBus,
   focus,
   form,
+  formAction,
   hotkey,
+  hover,
   infiniteScroll,
   inputMask,
   intersection,
+  interval,
   lazyEffect,
   lazyLoad,
   matchesPattern,
@@ -1602,9 +1966,11 @@ function createGuard(validator) {
   removeScopedStyle,
   required,
   scopedStyle,
+  scrollLock,
   ssnMask,
   svgElement,
   timeMask,
+  timeout,
   toast,
   validateProps,
   validators,