sibujs 1.2.0 → 1.3.0

package/dist/chunk-EBGIRKQY.js

@@ -0,0 +1,616 @@
+import {
+  watch
+} from "./chunk-NYVAC6P5.js";
+import {
+  derived
+} from "./chunk-NEKUBFPT.js";
+import {
+  batch,
+  signal
+} from "./chunk-WZSPOOER.js";
+
+// src/widgets/Combobox.ts
+function combobox(options) {
+  const { items, filterFn, itemToString } = options;
+  const defaultFilterFn = (item, q) => {
+    const str = itemToString ? itemToString(item) : String(item);
+    return str.toLowerCase().includes(q.toLowerCase());
+  };
+  const filter = filterFn ?? defaultFilterFn;
+  const [query, setQuery] = signal("");
+  const [selectedItem, setSelectedItem] = signal(null);
+  const [highlightedIndex, setHighlightedIndex] = signal(-1);
+  const [isOpen, setIsOpen] = signal(false);
+  const filteredItems = derived(() => {
+    const q = query();
+    if (q === "") return items;
+    return items.filter((item) => filter(item, q));
+  });
+  watch(query, () => {
+    setHighlightedIndex(-1);
+  });
+  function select2(item) {
+    batch(() => {
+      setSelectedItem(item);
+      const str = itemToString ? itemToString(item) : String(item);
+      setQuery(str);
+      setIsOpen(false);
+    });
+  }
+  function highlightNext() {
+    const filtered = filteredItems();
+    if (filtered.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const next = prev + 1;
+      return next >= filtered.length ? 0 : next;
+    });
+  }
+  function highlightPrev() {
+    const filtered = filteredItems();
+    if (filtered.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const next = prev - 1;
+      return next < 0 ? filtered.length - 1 : next;
+    });
+  }
+  function selectHighlighted() {
+    const filtered = filteredItems();
+    const idx = highlightedIndex();
+    if (idx >= 0 && idx < filtered.length) {
+      select2(filtered[idx]);
+    }
+  }
+  function open() {
+    setIsOpen(true);
+  }
+  function close() {
+    setIsOpen(false);
+  }
+  return {
+    query,
+    setQuery,
+    filteredItems,
+    selectedItem,
+    select: select2,
+    highlightedIndex,
+    highlightNext,
+    highlightPrev,
+    selectHighlighted,
+    isOpen,
+    open,
+    close
+  };
+}
+
+// src/widgets/Tabs.ts
+function tabs(options) {
+  const { tabs: tabDefs, defaultTab } = options;
+  const initialTab = defaultTab ?? tabDefs.find((t) => !t.disabled)?.id ?? tabDefs[0]?.id ?? "";
+  const [activeTab, setActiveTabState] = signal(initialTab);
+  function setActiveTab(id) {
+    const tab = tabDefs.find((t) => t.id === id);
+    if (tab && !tab.disabled) {
+      setActiveTabState(id);
+    }
+  }
+  const tabs2 = derived(
+    () => tabDefs.map((t) => ({
+      ...t,
+      isActive: t.id === activeTab()
+    }))
+  );
+  function findCurrentIndex() {
+    return tabDefs.findIndex((t) => t.id === activeTab());
+  }
+  function nextTab() {
+    const currentIdx = findCurrentIndex();
+    const len = tabDefs.length;
+    if (len === 0) return;
+    for (let i = 1; i <= len; i++) {
+      const candidate = tabDefs[(currentIdx + i) % len];
+      if (!candidate.disabled) {
+        setActiveTabState(candidate.id);
+        return;
+      }
+    }
+  }
+  function prevTab() {
+    const currentIdx = findCurrentIndex();
+    const len = tabDefs.length;
+    if (len === 0) return;
+    for (let i = 1; i <= len; i++) {
+      const candidate = tabDefs[(currentIdx - i + len) % len];
+      if (!candidate.disabled) {
+        setActiveTabState(candidate.id);
+        return;
+      }
+    }
+  }
+  function isActive(id) {
+    return activeTab() === id;
+  }
+  return {
+    activeTab,
+    setActiveTab,
+    tabs: tabs2,
+    nextTab,
+    prevTab,
+    /** Reactive check — use inside class/nodes bindings for per-tab reactivity */
+    isActive
+  };
+}
+
+// src/widgets/Accordion.ts
+function accordion(options) {
+  const { items: itemDefs, multiple = false, defaultExpanded = [] } = options;
+  const [expandedIds, setExpandedIds] = signal(new Set(defaultExpanded));
+  const items = derived(
+    () => itemDefs.map((item) => ({
+      ...item,
+      isExpanded: expandedIds().has(item.id)
+    }))
+  );
+  function expand(id) {
+    if (!itemDefs.some((item) => item.id === id)) return;
+    if (multiple) {
+      setExpandedIds((prev) => {
+        const next = new Set(prev);
+        next.add(id);
+        return next;
+      });
+    } else {
+      setExpandedIds(/* @__PURE__ */ new Set([id]));
+    }
+  }
+  function collapse(id) {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }
+  function toggle(id) {
+    if (expandedIds().has(id)) {
+      collapse(id);
+    } else {
+      expand(id);
+    }
+  }
+  function expandAll() {
+    if (multiple) {
+      setExpandedIds(new Set(itemDefs.map((item) => item.id)));
+    }
+  }
+  function collapseAll() {
+    setExpandedIds(/* @__PURE__ */ new Set());
+  }
+  function isExpanded(id) {
+    return expandedIds().has(id);
+  }
+  return {
+    items,
+    toggle,
+    expand,
+    collapse,
+    expandAll,
+    collapseAll,
+    /** Reactive check — use inside class/nodes bindings for per-item reactivity */
+    isExpanded
+  };
+}
+
+// src/widgets/Popover.ts
+function popover() {
+  const [isOpen, setIsOpen] = signal(false);
+  function open() {
+    setIsOpen(true);
+  }
+  function close() {
+    setIsOpen(false);
+  }
+  function toggle() {
+    setIsOpen((prev) => !prev);
+  }
+  return { isOpen, open, close, toggle };
+}
+
+// src/widgets/Select.ts
+function select(options) {
+  const { items, multiple = false } = options;
+  const [selectedItems, setSelectedItems] = signal([]);
+  const [isOpen, setIsOpen] = signal(false);
+  const [highlightedIndex, setHighlightedIndex] = signal(-1);
+  const selectedItem = derived(() => {
+    const sel = selectedItems();
+    return sel.length > 0 ? sel[sel.length - 1] : null;
+  });
+  function select2(item) {
+    if (multiple) {
+      setSelectedItems((prev) => {
+        if (prev.includes(item)) return prev;
+        return [...prev, item];
+      });
+    } else {
+      batch(() => {
+        setSelectedItems([item]);
+        setIsOpen(false);
+      });
+    }
+  }
+  function deselect(item) {
+    setSelectedItems((prev) => prev.filter((i) => i !== item));
+  }
+  function toggle(item) {
+    if (selectedItems().includes(item)) {
+      deselect(item);
+    } else {
+      select2(item);
+    }
+  }
+  function isSelected(item) {
+    return selectedItems().includes(item);
+  }
+  function open() {
+    setIsOpen(true);
+  }
+  function close() {
+    setIsOpen(false);
+  }
+  function highlightNext() {
+    if (items.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const next = prev + 1;
+      return next >= items.length ? 0 : next;
+    });
+  }
+  function highlightPrev() {
+    if (items.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const next = prev - 1;
+      return next < 0 ? items.length - 1 : next;
+    });
+  }
+  function selectHighlighted() {
+    const idx = highlightedIndex();
+    if (idx >= 0 && idx < items.length) {
+      select2(items[idx]);
+    }
+  }
+  function clear() {
+    setSelectedItems([]);
+  }
+  return {
+    selectedItems,
+    selectedItem,
+    select: select2,
+    deselect,
+    toggle,
+    isSelected,
+    isOpen,
+    open,
+    close,
+    highlightedIndex,
+    highlightNext,
+    highlightPrev,
+    selectHighlighted,
+    clear
+  };
+}
+
+// src/widgets/Tooltip.ts
+function tooltip(options) {
+  const delay = options?.delay ?? 0;
+  const [isVisible, setIsVisible] = signal(false);
+  const [content, setContent] = signal("");
+  let delayTimer = null;
+  function show() {
+    if (delay > 0) {
+      if (delayTimer !== null) {
+        clearTimeout(delayTimer);
+      }
+      delayTimer = setTimeout(() => {
+        setIsVisible(true);
+        delayTimer = null;
+      }, delay);
+    } else {
+      setIsVisible(true);
+    }
+  }
+  function hide() {
+    if (delayTimer !== null) {
+      clearTimeout(delayTimer);
+      delayTimer = null;
+    }
+    setIsVisible(false);
+  }
+  return { isVisible, show, hide, content, setContent };
+}
+
+// src/widgets/FileUpload.ts
+function fileUpload(options) {
+  const accept = options?.accept;
+  const multiple = options?.multiple ?? false;
+  const maxSize = options?.maxSize;
+  const onFiles = options?.onFiles;
+  const [files, setFiles] = signal([]);
+  const [errors, setErrors] = signal([]);
+  const [isDragOver, setDragOver] = signal(false);
+  function isAccepted(file) {
+    if (!accept) return true;
+    const acceptedTypes = accept.split(",").map((t) => t.trim().toLowerCase());
+    const fileName = file.name.toLowerCase();
+    const fileType = file.type.toLowerCase();
+    return acceptedTypes.some((pattern) => {
+      if (pattern.startsWith(".")) {
+        return fileName.endsWith(pattern);
+      }
+      if (pattern.endsWith("/*")) {
+        const prefix = pattern.slice(0, pattern.indexOf("/"));
+        return fileType.startsWith(`${prefix}/`);
+      }
+      return fileType === pattern;
+    });
+  }
+  function addFiles(fileList) {
+    const incoming = Array.from(fileList);
+    const validFiles = [];
+    const newErrors = [];
+    for (const file of incoming) {
+      if (!isAccepted(file)) {
+        newErrors.push(`File "${file.name}" is not an accepted type`);
+        continue;
+      }
+      if (maxSize !== void 0 && file.size > maxSize) {
+        newErrors.push(`File "${file.name}" exceeds maximum size of ${maxSize} bytes`);
+        continue;
+      }
+      validFiles.push(file);
+    }
+    batch(() => {
+      setErrors(newErrors);
+      if (validFiles.length > 0) {
+        if (multiple) {
+          setFiles((prev) => [...prev, ...validFiles]);
+        } else {
+          setFiles([validFiles[validFiles.length - 1]]);
+        }
+        if (onFiles) {
+          onFiles(validFiles);
+        }
+      }
+    });
+  }
+  function removeFile(index) {
+    setFiles((prev) => {
+      if (index < 0 || index >= prev.length) return prev;
+      const next = [...prev];
+      next.splice(index, 1);
+      return next;
+    });
+  }
+  function clear() {
+    batch(() => {
+      setFiles([]);
+      setErrors([]);
+    });
+  }
+  return {
+    files,
+    addFiles,
+    removeFile,
+    clear,
+    errors,
+    isDragOver,
+    setDragOver
+  };
+}
+
+// src/widgets/contentEditable.ts
+function contentEditable() {
+  const [content, setContent] = signal("");
+  const [isFocused, setFocused] = signal(false);
+  function wrapSelection(tagName) {
+    if (typeof window === "undefined") return;
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;
+    const range = selection.getRangeAt(0);
+    const ancestor = range.commonAncestorContainer;
+    const existingWrap = findAncestorByTag(
+      ancestor instanceof HTMLElement ? ancestor : ancestor.parentElement,
+      tagName
+    );
+    let targetNode = null;
+    if (existingWrap) {
+      const parent = existingWrap.parentNode;
+      if (parent) {
+        const firstChild = existingWrap.firstChild;
+        const lastChild = existingWrap.lastChild;
+        while (existingWrap.firstChild) {
+          parent.insertBefore(existingWrap.firstChild, existingWrap);
+        }
+        parent.removeChild(existingWrap);
+        if (firstChild && lastChild) {
+          const newRange = document.createRange();
+          newRange.setStartBefore(firstChild);
+          newRange.setEndAfter(lastChild);
+          selection.removeAllRanges();
+          selection.addRange(newRange);
+          return;
+        }
+      }
+    } else {
+      const wrapper = document.createElement(tagName);
+      try {
+        range.surroundContents(wrapper);
+      } catch {
+        const fragment = range.extractContents();
+        wrapper.appendChild(fragment);
+        range.insertNode(wrapper);
+      }
+      targetNode = wrapper;
+    }
+    if (targetNode) {
+      selection.removeAllRanges();
+      const newRange = document.createRange();
+      newRange.selectNodeContents(targetNode);
+      selection.addRange(newRange);
+    }
+  }
+  function findAncestorByTag(el, tagName) {
+    const upper = tagName.toUpperCase();
+    while (el) {
+      if (el.tagName === upper) return el;
+      el = el.parentElement;
+    }
+    return null;
+  }
+  function bold() {
+    wrapSelection("strong");
+  }
+  function italic() {
+    wrapSelection("em");
+  }
+  function underline() {
+    wrapSelection("u");
+  }
+  return {
+    content,
+    setContent,
+    isFocused,
+    setFocused,
+    bold,
+    italic,
+    underline
+  };
+}
+
+// src/widgets/datePicker.ts
+function datePicker(options) {
+  const minDate = options?.minDate;
+  const maxDate = options?.maxDate;
+  const initialDate = options?.initialDate ?? null;
+  const [selectedDate, setSelectedDate] = signal(initialDate);
+  const [viewDate, setViewDate] = signal(initialDate ?? /* @__PURE__ */ new Date());
+  function isDateDisabled(date) {
+    const d = stripTime(date);
+    if (minDate && d < stripTime(minDate)) return true;
+    if (maxDate && d > stripTime(maxDate)) return true;
+    return false;
+  }
+  function stripTime(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  }
+  function sameDay(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  }
+  function select2(date) {
+    if (!isDateDisabled(date)) {
+      setSelectedDate(date);
+    }
+  }
+  function nextMonth() {
+    setViewDate((prev) => {
+      const next = new Date(prev);
+      next.setMonth(next.getMonth() + 1);
+      return next;
+    });
+  }
+  function prevMonth() {
+    setViewDate((prev) => {
+      const next = new Date(prev);
+      next.setMonth(next.getMonth() - 1);
+      return next;
+    });
+  }
+  function nextYear() {
+    setViewDate((prev) => {
+      const next = new Date(prev);
+      next.setFullYear(next.getFullYear() + 1);
+      return next;
+    });
+  }
+  function prevYear() {
+    setViewDate((prev) => {
+      const next = new Date(prev);
+      next.setFullYear(next.getFullYear() - 1);
+      return next;
+    });
+  }
+  const daysInMonth = derived(() => {
+    const vd = viewDate();
+    const year = vd.getFullYear();
+    const month = vd.getMonth();
+    const today = /* @__PURE__ */ new Date();
+    const selected = selectedDate();
+    const firstDay = new Date(year, month, 1);
+    const startDow = firstDay.getDay();
+    const lastDay = new Date(year, month + 1, 0);
+    const totalDaysInMonth = lastDay.getDate();
+    const days = [];
+    for (let i = startDow - 1; i >= 0; i--) {
+      const date = new Date(year, month, -i);
+      days.push({
+        date,
+        isCurrentMonth: false,
+        isToday: sameDay(date, today),
+        isSelected: selected !== null && sameDay(date, selected),
+        isDisabled: isDateDisabled(date)
+      });
+    }
+    for (let d = 1; d <= totalDaysInMonth; d++) {
+      const date = new Date(year, month, d);
+      days.push({
+        date,
+        isCurrentMonth: true,
+        isToday: sameDay(date, today),
+        isSelected: selected !== null && sameDay(date, selected),
+        isDisabled: isDateDisabled(date)
+      });
+    }
+    const remaining = days.length % 7;
+    if (remaining > 0) {
+      const trailingCount = 7 - remaining;
+      for (let i = 1; i <= trailingCount; i++) {
+        const date = new Date(year, month + 1, i);
+        days.push({
+          date,
+          isCurrentMonth: false,
+          isToday: sameDay(date, today),
+          isSelected: selected !== null && sameDay(date, selected),
+          isDisabled: isDateDisabled(date)
+        });
+      }
+    }
+    return days;
+  });
+  function isSelected(date) {
+    const sel = selectedDate();
+    return sel !== null && sameDay(date, sel);
+  }
+  return {
+    selectedDate,
+    select: select2,
+    viewDate,
+    setViewDate,
+    nextMonth,
+    prevMonth,
+    nextYear,
+    prevYear,
+    daysInMonth,
+    isDateDisabled,
+    /** Reactive check — use inside class bindings for per-day reactivity */
+    isSelected
+  };
+}
+
+export {
+  combobox,
+  tabs,
+  accordion,
+  popover,
+  select,
+  tooltip,
+  fileUpload,
+  contentEditable,
+  datePicker
+};

package/dist/chunk-EUZND3CB.js

@@ -0,0 +1,27 @@
+// src/core/ssr-context.ts
+var ssrMode = false;
+function isSSR() {
+  return ssrMode;
+}
+function enableSSR() {
+  ssrMode = true;
+}
+function disableSSR() {
+  ssrMode = false;
+}
+function withSSR(fn) {
+  const wasSSR = ssrMode;
+  enableSSR();
+  try {
+    return fn();
+  } finally {
+    if (!wasSSR) disableSSR();
+  }
+}
+
+export {
+  isSSR,
+  enableSSR,
+  disableSSR,
+  withSSR
+};