sibujs 1.1.0 → 1.3.0

package/dist/testing.js

@@ -1,4 +1,9 @@
-import "./chunk-MLKGABMK.js";
+import {
+  effect
+} from "./chunk-CHF5OHIA.js";
+import "./chunk-EUZND3CB.js";
+import "./chunk-ZD6OAMTH.js";
+import "./chunk-5X6PP2UK.js";
 
 // src/testing/a11y.ts
 var VALID_ARIA_ROLES = /* @__PURE__ */ new Set([
@@ -1389,6 +1394,119 @@ function testComponent(component, options = {}) {
   };
 }
 
+// src/testing/queries.ts
+function queryByText(container, text) {
+  const walk = (node) => {
+    if (node.childNodes.length === 1 && node.childNodes[0].nodeType === 3) {
+      if (node.textContent?.includes(text)) return node;
+    }
+    for (const child of Array.from(node.children)) {
+      const found = walk(child);
+      if (found) return found;
+    }
+    return null;
+  };
+  return walk(container);
+}
+function queryByTestId(container, testId) {
+  return container.querySelector(`[data-testid="${testId}"]`);
+}
+function queryByRole(container, role) {
+  return container.querySelector(`[role="${role}"]`);
+}
+function cssEscape(value) {
+  const g = globalThis;
+  if (g.CSS && typeof g.CSS.escape === "function") return g.CSS.escape(value);
+  return value.replace(/[^\w-]/g, (m) => `\\${m.charCodeAt(0).toString(16)} `);
+}
+function queryByLabel(container, labelText) {
+  const labels = Array.from(container.querySelectorAll("label"));
+  for (const label of labels) {
+    if (label.textContent?.trim() === labelText) {
+      const forId = label.getAttribute("for");
+      if (forId) {
+        const target = container.querySelector(`#${cssEscape(forId)}`);
+        if (target) return target;
+      }
+      const child = label.querySelector("input, select, textarea, button");
+      if (child) return child;
+    }
+  }
+  return container.querySelector(`[aria-label="${labelText}"]`);
+}
+async function pollUntil(fn, timeout, interval, errorIfTimeout) {
+  const start = Date.now();
+  return new Promise((resolve, reject) => {
+    const check = () => {
+      const result = fn();
+      if (result !== null) {
+        resolve(result);
+        return;
+      }
+      if (Date.now() - start >= timeout) {
+        reject(new Error(errorIfTimeout));
+        return;
+      }
+      setTimeout(check, interval);
+    };
+    check();
+  });
+}
+function findByText(container, text, options = {}) {
+  return pollUntil(
+    () => queryByText(container, text),
+    options.timeout ?? 1e3,
+    options.interval ?? 50,
+    `findByText: no element with text "${text}" after ${options.timeout ?? 1e3}ms`
+  );
+}
+function findByTestId(container, testId, options = {}) {
+  return pollUntil(
+    () => queryByTestId(container, testId),
+    options.timeout ?? 1e3,
+    options.interval ?? 50,
+    `findByTestId: no element with data-testid="${testId}" after ${options.timeout ?? 1e3}ms`
+  );
+}
+function findByRole(container, role, options = {}) {
+  return pollUntil(
+    () => queryByRole(container, role),
+    options.timeout ?? 1e3,
+    options.interval ?? 50,
+    `findByRole: no element with role="${role}" after ${options.timeout ?? 1e3}ms`
+  );
+}
+function waitForSignal(getter, predicate, options = {}) {
+  const timeoutMs = options.timeout ?? 1e3;
+  return new Promise((resolve, reject) => {
+    let resolved = false;
+    const timer = setTimeout(() => {
+      if (!resolved) {
+        resolved = true;
+        teardown();
+        reject(new Error(`waitForSignal: predicate did not match within ${timeoutMs}ms`));
+      }
+    }, timeoutMs);
+    const teardown = effect(() => {
+      if (resolved) return;
+      const value = getter();
+      if (predicate(value)) {
+        resolved = true;
+        clearTimeout(timer);
+        queueMicrotask(() => teardown());
+        resolve(value);
+      }
+    });
+  });
+}
+function type(element, text) {
+  for (const char of text) {
+    element.value += char;
+    element.dispatchEvent(new InputEvent("input", { bubbles: true, data: char }));
+  }
+  element.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
 // src/testing/snapshot.ts
 function serializeElement2(el, indent) {
   const pad = "  ".repeat(indent);
@@ -1851,12 +1969,21 @@ export {
   createTimerMock,
   createUniversalAdapter,
   createVisualSuite,
+  findByRole,
+  findByTestId,
+  findByText,
   fireEvent,
   matchSnapshot,
   mockRouter,
   mockStore,
+  queryByLabel,
+  queryByRole,
+  queryByTestId,
+  queryByText,
   render,
   snapshotComponent,
   testComponent,
-  waitFor
+  type,
+  waitFor,
+  waitForSignal
 };

package/dist/ui.cjs

@@ -32,7 +32,10 @@ __export(ui_exports, {
   bindField: () => bindField,
   composable: () => composable,
   compose: () => compose,
+  createDialogAria: () => createDialogAria,
+  createFocusManager: () => createFocusManager,
   createGuard: () => createGuard,
+  createListbox: () => createListbox,
   createSlots: () => createSlots,
   creditCardMask: () => creditCardMask,
   custom: () => custom,
@@ -46,10 +49,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 +68,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 +581,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 +945,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 +1228,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 +1584,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;
@@ -1572,7 +1935,10 @@ function createGuard(validator) {
   bindField,
   composable,
   compose,
+  createDialogAria,
+  createFocusManager,
   createGuard,
+  createListbox,
   createSlots,
   creditCardMask,
   custom,
@@ -1586,10 +1952,13 @@ function createGuard(validator) {
   eventBus,
   focus,
   form,
+  formAction,
   hotkey,
+  hover,
   infiniteScroll,
   inputMask,
   intersection,
+  interval,
   lazyEffect,
   lazyLoad,
   matchesPattern,
@@ -1602,9 +1971,11 @@ function createGuard(validator) {
   removeScopedStyle,
   required,
   scopedStyle,
+  scrollLock,
   ssnMask,
   svgElement,
   timeMask,
+  timeout,
   toast,
   validateProps,
   validators,