@epoch32/visage 1.1.2 → 1.1.4

package/dist/index-b5wc752a.js

@@ -0,0 +1,1696 @@
+import {
+  onCleanup2,
+  createContext2,
+  useContext2,
+  signal2,
+  createSignal2
+} from "./index-6kfe1nr4.js";
+import {
+  Show2,
+  For2,
+  Portal2
+} from "./index-5s255b3w.js";
+import {
+  Fragment2,
+  jsx2,
+  jsxs2
+} from "./index-9fvarkrx.js";
+import {
+  createId2,
+  createControllableSignal2,
+  trapFocus2,
+  onClickOutside2
+} from "./index-8x8xz80v.js";
+
+// src/ui/accordion.tsx
+var AccordionContext = createContext2(null);
+function useAccordionContext2() {
+  return useContext2(AccordionContext);
+}
+function AccordionRoot(props) {
+  const isSingle = props.type === "single";
+  const collapsible = props.collapsible ?? !isSingle;
+  const [singleValue, setSingleValue] = createControllableSignal2({
+    value: isSingle ? props.value : undefined,
+    defaultValue: isSingle ? props.defaultValue ?? "" : "",
+    onChange: isSingle ? props.onValueChange : undefined
+  });
+  const [multiValue, setMultiValue] = createControllableSignal2({
+    value: !isSingle ? props.value : undefined,
+    defaultValue: !isSingle ? props.defaultValue ?? [] : [],
+    onChange: !isSingle ? props.onValueChange : undefined
+  });
+  const isExpanded = (val) => {
+    if (isSingle) {
+      return singleValue() === val;
+    }
+    return multiValue().includes(val);
+  };
+  const toggleItem = (val) => {
+    if (isSingle) {
+      if (singleValue() === val) {
+        if (collapsible) {
+          setSingleValue("");
+        }
+      } else {
+        setSingleValue(val);
+      }
+    } else {
+      const current = multiValue();
+      if (current.includes(val)) {
+        setMultiValue(current.filter((item) => item !== val));
+      } else {
+        setMultiValue([...current, val]);
+      }
+    }
+  };
+  const ctx = {
+    isExpanded,
+    toggleItem,
+    type: props.type,
+    collapsible
+  };
+  const {
+    as: Tag = "div",
+    items,
+    itemClass,
+    triggerClass,
+    contentClass,
+    children,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return AccordionContext.Provider({
+    value: ctx,
+    children: () => /* @__PURE__ */ jsxs2(Tag, {
+      class: className,
+      style,
+      ...rest,
+      children: [
+        items ? items.map((item) => /* @__PURE__ */ jsx2(AccordionItem2, {
+          value: item.value,
+          disabled: item.disabled,
+          class: itemClass,
+          children: () => /* @__PURE__ */ jsxs2(Fragment2, {
+            children: [
+              /* @__PURE__ */ jsx2(AccordionTrigger2, {
+                class: triggerClass,
+                children: typeof item.trigger === "function" ? item.trigger() : item.trigger
+              }),
+              /* @__PURE__ */ jsx2(AccordionContent2, {
+                class: contentClass,
+                children: typeof item.content === "function" ? item.content() : item.content
+              })
+            ]
+          })
+        })) : null,
+        typeof children === "function" ? children() : children
+      ]
+    })
+  });
+}
+var AccordionItemContext = createContext2(null);
+function useAccordionItemContext2() {
+  return useContext2(AccordionItemContext);
+}
+function AccordionItem2(props) {
+  const itemId = createId2("accordion-item");
+  const ctx = {
+    value: props.value,
+    itemId
+  };
+  const accordion = useContext2(AccordionContext);
+  const isOpen = () => accordion ? accordion.isExpanded(props.value) : false;
+  const { value, disabled, as: Tag = "div", children, class: className, style, ...rest } = props;
+  return AccordionItemContext.Provider({
+    value: ctx,
+    children: () => /* @__PURE__ */ jsx2(Tag, {
+      "data-state": () => isOpen() ? "open" : "closed",
+      "data-disabled": disabled,
+      class: className,
+      style,
+      ...rest,
+      children: typeof children === "function" ? children() : children
+    })
+  });
+}
+function AccordionTrigger2(props) {
+  const accordion = useContext2(AccordionContext);
+  const item = useContext2(AccordionItemContext);
+  const isOpen = () => accordion && item ? accordion.isExpanded(item.value) : false;
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && accordion && item) {
+      accordion.toggleItem(item.value);
+    }
+  };
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    id: item ? `${item.itemId}-trigger` : undefined,
+    type: Tag === "button" ? "button" : undefined,
+    "aria-expanded": isOpen,
+    "aria-controls": item ? `${item.itemId}-content` : undefined,
+    "data-state": () => isOpen() ? "open" : "closed",
+    class: className,
+    style,
+    onClick: handleClick,
+    ...rest,
+    children
+  });
+}
+function AccordionContent2(props) {
+  const accordion = useContext2(AccordionContext);
+  const item = useContext2(AccordionItemContext);
+  const isOpen = () => accordion && item ? accordion.isExpanded(item.value) : false;
+  const { forceMount, as: Tag = "div", children, class: className, style, ...rest } = props;
+  if (forceMount) {
+    return /* @__PURE__ */ jsx2(Tag, {
+      id: item ? `${item.itemId}-content` : undefined,
+      role: "region",
+      "aria-labelledby": item ? `${item.itemId}-trigger` : undefined,
+      "data-state": () => isOpen() ? "open" : "closed",
+      hidden: () => !isOpen(),
+      class: className,
+      style,
+      ...rest,
+      children
+    });
+  }
+  return /* @__PURE__ */ jsx2(Show2, {
+    when: isOpen,
+    children: /* @__PURE__ */ jsx2(Tag, {
+      id: item ? `${item.itemId}-content` : undefined,
+      role: "region",
+      "aria-labelledby": item ? `${item.itemId}-trigger` : undefined,
+      "data-state": "open",
+      class: className,
+      style,
+      ...rest,
+      children
+    })
+  });
+}
+var Accordion2 = Object.assign(AccordionRoot, {
+  Root: AccordionRoot,
+  Item: AccordionItem2,
+  Trigger: AccordionTrigger2,
+  Content: AccordionContent2
+});
+// src/ui/command-dialog.tsx
+function CommandDialog2(props) {
+  const [open, setOpen] = createControllableSignal2({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const { overlayClass, contentClass, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Portal2, {
+    children: /* @__PURE__ */ jsx2("div", {
+      style: () => ({
+        display: open() ? "flex" : "none",
+        position: "fixed",
+        inset: 0,
+        background: "rgba(0, 0, 0, 0.6)",
+        backdropFilter: "blur(4px)",
+        alignItems: "flex-start",
+        justifyContent: "center",
+        paddingTop: "15vh",
+        zIndex: 9999
+      }),
+      class: overlayClass,
+      onClick: (e) => {
+        if (e.target === e.currentTarget)
+          setOpen(false);
+      },
+      children: /* @__PURE__ */ jsx2("div", {
+        style: { width: "100%", maxWidth: "560px" },
+        class: contentClass,
+        children: /* @__PURE__ */ jsx2(CommandRoot, {
+          ...rest
+        })
+      })
+    })
+  });
+}
+
+// src/ui/command.tsx
+var CommandContext = createContext2(null);
+function useCommandContext2() {
+  return useContext2(CommandContext);
+}
+function CommandRoot(props) {
+  const [search, setSearch] = createControllableSignal2({
+    value: props.search,
+    defaultValue: "",
+    onChange: props.onSearchChange
+  });
+  const [activeValue, setActiveValue] = createControllableSignal2({
+    value: props.value,
+    defaultValue: props.defaultValue ?? "",
+    onChange: props.onValueChange
+  });
+  const commandId = createId2("command");
+  const filterMatches = (text, keywords) => {
+    const q = search().toLowerCase().trim();
+    if (!q)
+      return true;
+    if (text.toLowerCase().includes(q))
+      return true;
+    if (keywords?.some((k) => k.toLowerCase().includes(q)))
+      return true;
+    return false;
+  };
+  const ctx = {
+    search,
+    setSearch,
+    activeValue,
+    setActiveValue,
+    filterMatches,
+    commandId
+  };
+  const {
+    as: Tag = "div",
+    placeholder = "Type a command or search...",
+    groups,
+    items,
+    emptyText = "No results found.",
+    class: className,
+    style,
+    inputClass,
+    listClass,
+    itemClass,
+    children,
+    ...rest
+  } = props;
+  if (groups || items) {
+    return CommandContext.Provider({
+      value: ctx,
+      children: () => /* @__PURE__ */ jsxs2(Tag, {
+        class: className,
+        style: { display: "flex", flexDirection: "column", overflow: "hidden", ...style },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx2(CommandInput2, {
+            placeholder,
+            class: inputClass
+          }),
+          /* @__PURE__ */ jsxs2(CommandList2, {
+            class: listClass,
+            children: [
+              /* @__PURE__ */ jsx2(CommandEmpty2, {
+                children: emptyText
+              }),
+              groups?.map((grp) => /* @__PURE__ */ jsx2(CommandGroup2, {
+                heading: grp.heading,
+                children: grp.items.map((item) => /* @__PURE__ */ jsxs2(CommandItem2, {
+                  value: item.value,
+                  shortcut: item.shortcut,
+                  disabled: item.disabled,
+                  onSelect: item.onSelect,
+                  keywords: item.keywords,
+                  class: item.class ?? itemClass,
+                  children: [
+                    item.icon ? /* @__PURE__ */ jsx2("span", {
+                      style: { display: "inline-flex", alignItems: "center", marginRight: "8px" },
+                      children: typeof item.icon === "function" ? item.icon() : item.icon
+                    }) : null,
+                    typeof item.label === "function" ? item.label() : item.label
+                  ]
+                }))
+              })),
+              items?.map((item) => /* @__PURE__ */ jsxs2(CommandItem2, {
+                value: item.value,
+                shortcut: item.shortcut,
+                disabled: item.disabled,
+                onSelect: item.onSelect,
+                keywords: item.keywords,
+                class: item.class ?? itemClass,
+                children: [
+                  item.icon ? /* @__PURE__ */ jsx2("span", {
+                    style: { display: "inline-flex", alignItems: "center", marginRight: "8px" },
+                    children: typeof item.icon === "function" ? item.icon() : item.icon
+                  }) : null,
+                  typeof item.label === "function" ? item.label() : item.label
+                ]
+              })),
+              typeof children === "function" ? children() : children
+            ]
+          })
+        ]
+      })
+    });
+  }
+  return CommandContext.Provider({
+    value: ctx,
+    children: () => /* @__PURE__ */ jsx2(Tag, {
+      class: className,
+      style,
+      ...rest,
+      children: typeof children === "function" ? children() : children
+    })
+  });
+}
+function CommandInput2(props) {
+  const ctx = useContext2(CommandContext);
+  const handleKeyDown = (e) => {
+    const list = e.currentTarget.closest('[role="combobox"], [data-command-root], div')?.querySelector('[role="listbox"]');
+    if (!list)
+      return;
+    const items = Array.from(list.querySelectorAll('[role="option"]:not([aria-disabled="true"]):not([style*="display: none"])'));
+    if (items.length === 0)
+      return;
+    const currentActive = items.find((el) => el.getAttribute("aria-selected") === "true") ?? items[0];
+    const index = currentActive ? items.indexOf(currentActive) : 0;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const nextIndex = (index + 1) % items.length;
+      const nextItem = items[nextIndex];
+      if (nextItem && ctx) {
+        ctx.setActiveValue(nextItem.getAttribute("data-value") ?? "");
+        nextItem.scrollIntoView({ block: "nearest" });
+      }
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const prevIndex = (index - 1 + items.length) % items.length;
+      const prevItem = items[prevIndex];
+      if (prevItem && ctx) {
+        ctx.setActiveValue(prevItem.getAttribute("data-value") ?? "");
+        prevItem.scrollIntoView({ block: "nearest" });
+      }
+    } else if (e.key === "Enter" && currentActive) {
+      e.preventDefault();
+      currentActive.click();
+    }
+  };
+  const { placeholder = "Type a command...", class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2("input", {
+    type: "text",
+    role: "searchbox",
+    placeholder,
+    value: () => ctx?.search() ?? "",
+    onInput: (e) => ctx?.setSearch(e.target.value),
+    onKeyDown: handleKeyDown,
+    class: className,
+    style,
+    ...rest
+  });
+}
+function CommandList2(props) {
+  const { as: Tag = "div", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    role: "listbox",
+    class: className,
+    style: { overflowY: "auto", ...style },
+    ...rest,
+    children
+  });
+}
+function CommandEmpty2(props) {
+  const ctx = useContext2(CommandContext);
+  const { as: Tag = "div", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    class: className,
+    style: () => ({
+      display: ctx && ctx.search().trim().length > 0 ? undefined : "none",
+      textAlign: "center",
+      padding: "16px",
+      color: "#94a3b8",
+      ...style
+    }),
+    ...rest,
+    children
+  });
+}
+function CommandGroup2(props) {
+  const { heading, as: Tag = "div", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsxs2(Tag, {
+    role: "group",
+    class: className,
+    style,
+    ...rest,
+    children: [
+      heading ? /* @__PURE__ */ jsx2("div", {
+        style: {
+          fontSize: "11px",
+          fontWeight: 700,
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+          color: "#64748b",
+          padding: "6px 10px"
+        },
+        children: heading
+      }) : null,
+      children
+    ]
+  });
+}
+function CommandItem2(props) {
+  const ctx = useContext2(CommandContext);
+  const itemValue = props.value ?? (typeof props.children === "string" ? props.children : createId2("item"));
+  const isVisible = () => {
+    if (!ctx)
+      return true;
+    const text = typeof props.children === "string" ? props.children : itemValue;
+    return ctx.filterMatches(text, props.keywords);
+  };
+  const isSelected = () => ctx ? ctx.activeValue() === itemValue : false;
+  const handleClick = () => {
+    if (props.disabled)
+      return;
+    if (props.onSelect)
+      props.onSelect();
+  };
+  const { as: Tag = "div", shortcut, disabled, children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsxs2(Tag, {
+    role: "option",
+    "data-value": itemValue,
+    "aria-selected": isSelected,
+    "aria-disabled": disabled,
+    class: className,
+    style: () => ({
+      display: isVisible() ? "flex" : "none",
+      alignItems: "center",
+      justifyContent: "space-between",
+      cursor: disabled ? "not-allowed" : "pointer",
+      ...style
+    }),
+    onClick: handleClick,
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsx2("div", {
+        style: { display: "flex", alignItems: "center" },
+        children
+      }),
+      shortcut ? /* @__PURE__ */ jsx2("span", {
+        style: {
+          fontSize: "11px",
+          color: "#64748b",
+          background: "#1e293b",
+          padding: "2px 6px",
+          borderRadius: "4px"
+        },
+        children: shortcut
+      }) : null
+    ]
+  });
+}
+var Command2 = Object.assign(CommandRoot, {
+  Root: CommandRoot,
+  Dialog: CommandDialog2,
+  Input: CommandInput2,
+  List: CommandList2,
+  Empty: CommandEmpty2,
+  Group: CommandGroup2,
+  Item: CommandItem2
+});
+// src/ui/data-table.tsx
+function DataTable2(props) {
+  const [sortState, setSortState] = createControllableSignal2({
+    value: props.sort,
+    defaultValue: { column: "", direction: null },
+    onChange: props.onSortChange
+  });
+  const [selectedKeys, setSelectedKeys] = createControllableSignal2({
+    value: props.selectedKeys,
+    defaultValue: [],
+    onChange: props.onSelectionChange
+  });
+  const [currentPage, setCurrentPage] = createSignal2(0, { internal: true });
+  const pageSize = props.pageSize ?? 10;
+  const selectionMode = props.selection ?? "none";
+  const getRowId = (row, index) => {
+    if (props.getRowId)
+      return props.getRowId(row, index);
+    if (row && typeof row === "object" && "id" in row)
+      return String(row.id);
+    return String(index);
+  };
+  const filteredData = () => {
+    const raw = typeof props.data === "function" ? props.data() : props.data;
+    if (!raw)
+      return [];
+    const filterQuery = props.filter ? (typeof props.filter === "function" ? props.filter() : props.filter)?.toLowerCase().trim() : "";
+    if (!filterQuery)
+      return raw;
+    return raw.filter((row) => Object.values(row).some((val) => String(val).toLowerCase().includes(filterQuery)));
+  };
+  const sortedData = () => {
+    const list = [...filteredData()];
+    const currentSort = sortState();
+    if (!currentSort.column || !currentSort.direction)
+      return list;
+    return list.sort((a, b) => {
+      const aVal = a[currentSort.column];
+      const bVal = b[currentSort.column];
+      if (aVal === bVal)
+        return 0;
+      if (aVal === null || aVal === undefined)
+        return 1;
+      if (bVal === null || bVal === undefined)
+        return -1;
+      const comp = aVal < bVal ? -1 : 1;
+      return currentSort.direction === "asc" ? comp : -comp;
+    });
+  };
+  const totalPages = () => Math.ceil(sortedData().length / pageSize) || 1;
+  const paginatedData = () => {
+    if (!props.pageSize)
+      return sortedData();
+    const start = currentPage() * pageSize;
+    return sortedData().slice(start, start + pageSize);
+  };
+  const handleSort = (colId) => {
+    const current = sortState();
+    if (current.column !== colId) {
+      setSortState({ column: colId, direction: "asc" });
+    } else if (current.direction === "asc") {
+      setSortState({ column: colId, direction: "desc" });
+    } else {
+      setSortState({ column: "", direction: null });
+    }
+  };
+  const handleSelectRow = (key, e) => {
+    e.stopPropagation();
+    if (selectionMode === "single") {
+      setSelectedKeys(selectedKeys().includes(key) ? [] : [key]);
+    } else if (selectionMode === "multi") {
+      const current = selectedKeys();
+      if (current.includes(key)) {
+        setSelectedKeys(current.filter((k) => k !== key));
+      } else {
+        setSelectedKeys([...current, key]);
+      }
+    }
+  };
+  const handleSelectAll = () => {
+    if (selectionMode !== "multi")
+      return;
+    const allCurrentKeys = paginatedData().map((row, i) => getRowId(row, i));
+    const allSelected = allCurrentKeys.every((k) => selectedKeys().includes(k));
+    if (allSelected) {
+      setSelectedKeys(selectedKeys().filter((k) => !allCurrentKeys.includes(k)));
+    } else {
+      setSelectedKeys(Array.from(new Set([...selectedKeys(), ...allCurrentKeys])));
+    }
+  };
+  const {
+    class: className,
+    style,
+    tableClass,
+    headerClass,
+    rowClass,
+    cellClass,
+    paginationClass,
+    emptyText = "No data available",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs2("div", {
+    class: className,
+    style: { display: "flex", flexDirection: "column", width: "100%", ...style },
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsx2("div", {
+        style: { overflowX: "auto", width: "100%" },
+        children: /* @__PURE__ */ jsxs2("table", {
+          class: tableClass,
+          style: { width: "100%", borderCollapse: "collapse" },
+          children: [
+            /* @__PURE__ */ jsx2("thead", {
+              class: headerClass,
+              children: /* @__PURE__ */ jsxs2("tr", {
+                children: [
+                  selectionMode === "multi" ? /* @__PURE__ */ jsx2("th", {
+                    style: { width: "40px", padding: "8px" },
+                    children: /* @__PURE__ */ jsx2("input", {
+                      type: "checkbox",
+                      checked: () => {
+                        const keys = paginatedData().map((row, i) => getRowId(row, i));
+                        return keys.length > 0 && keys.every((k) => selectedKeys().includes(k));
+                      },
+                      onChange: handleSelectAll
+                    })
+                  }) : null,
+                  props.columns.map((col) => {
+                    const isSorted = () => sortState().column === col.id;
+                    const sortDir = () => isSorted() ? sortState().direction : null;
+                    return /* @__PURE__ */ jsx2("th", {
+                      style: {
+                        width: col.width,
+                        textAlign: col.align ?? "left",
+                        cursor: col.sortable ? "pointer" : "default",
+                        userSelect: col.sortable ? "none" : "auto",
+                        padding: "10px 12px"
+                      },
+                      onClick: () => {
+                        if (col.sortable)
+                          handleSort(col.id);
+                      },
+                      children: /* @__PURE__ */ jsxs2("div", {
+                        style: { display: "inline-flex", alignItems: "center", gap: "6px" },
+                        children: [
+                          /* @__PURE__ */ jsx2("span", {
+                            children: typeof col.header === "function" ? col.header() : col.header
+                          }),
+                          col.sortable ? /* @__PURE__ */ jsx2("span", {
+                            style: { fontSize: "10px", color: isSorted() ? "#38bdf8" : "#64748b" },
+                            children: () => sortDir() === "asc" ? "▲" : sortDir() === "desc" ? "▼" : "⇅"
+                          }) : null
+                        ]
+                      })
+                    });
+                  })
+                ]
+              })
+            }),
+            /* @__PURE__ */ jsx2("tbody", {
+              children: /* @__PURE__ */ jsx2(For2, {
+                each: paginatedData,
+                fallback: /* @__PURE__ */ jsx2("tr", {
+                  children: /* @__PURE__ */ jsx2("td", {
+                    colSpan: props.columns.length + (selectionMode === "multi" ? 1 : 0),
+                    style: { textAlign: "center", padding: "24px", color: "#64748b" },
+                    children: emptyText
+                  })
+                }),
+                children: (row, idx) => {
+                  const key = () => getRowId(row, idx());
+                  const isSelected = () => selectedKeys().includes(key());
+                  return /* @__PURE__ */ jsxs2("tr", {
+                    class: rowClass,
+                    style: { cursor: props.onRowClick ? "pointer" : "default" },
+                    "data-selected": isSelected,
+                    onClick: () => {
+                      if (props.onRowClick)
+                        props.onRowClick(row, idx());
+                    },
+                    children: [
+                      selectionMode === "multi" ? /* @__PURE__ */ jsx2("td", {
+                        style: { width: "40px", padding: "8px" },
+                        children: /* @__PURE__ */ jsx2("input", {
+                          type: "checkbox",
+                          checked: isSelected,
+                          onClick: (e) => handleSelectRow(key(), e)
+                        })
+                      }) : null,
+                      props.columns.map((col) => {
+                        const content = col.cell ? col.cell(row, idx()) : col.accessorKey ? row[col.accessorKey] : row[col.id];
+                        return /* @__PURE__ */ jsx2("td", {
+                          class: cellClass,
+                          style: {
+                            textAlign: col.align ?? "left",
+                            padding: "10px 12px"
+                          },
+                          children: typeof content === "function" ? content() : content
+                        });
+                      })
+                    ]
+                  });
+                }
+              })
+            })
+          ]
+        })
+      }),
+      props.pageSize ? /* @__PURE__ */ jsxs2("div", {
+        class: paginationClass,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "10px 12px",
+          borderTop: "1px solid #1e293b",
+          fontSize: "12px",
+          color: "#94a3b8"
+        },
+        children: [
+          /* @__PURE__ */ jsxs2("div", {
+            children: [
+              "Showing ",
+              /* @__PURE__ */ jsx2("strong", {
+                children: () => currentPage() * pageSize + 1
+              }),
+              " to",
+              " ",
+              /* @__PURE__ */ jsx2("strong", {
+                children: () => Math.min((currentPage() + 1) * pageSize, sortedData().length)
+              }),
+              " ",
+              "of ",
+              /* @__PURE__ */ jsx2("strong", {
+                children: () => sortedData().length
+              }),
+              " entries"
+            ]
+          }),
+          /* @__PURE__ */ jsxs2("div", {
+            style: { display: "flex", gap: "6px", alignItems: "center" },
+            children: [
+              /* @__PURE__ */ jsx2("button", {
+                type: "button",
+                disabled: () => currentPage() === 0,
+                onClick: () => setCurrentPage((p) => Math.max(0, p - 1)),
+                style: { padding: "4px 8px", cursor: "pointer" },
+                children: "Previous"
+              }),
+              /* @__PURE__ */ jsxs2("span", {
+                children: [
+                  "Page ",
+                  /* @__PURE__ */ jsx2("strong", {
+                    children: () => currentPage() + 1
+                  }),
+                  " of ",
+                  /* @__PURE__ */ jsx2("strong", {
+                    children: totalPages
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx2("button", {
+                type: "button",
+                disabled: () => currentPage() >= totalPages() - 1,
+                onClick: () => setCurrentPage((p) => Math.min(totalPages() - 1, p + 1)),
+                style: { padding: "4px 8px", cursor: "pointer" },
+                children: "Next"
+              })
+            ]
+          })
+        ]
+      }) : null
+    ]
+  });
+}
+// src/ui/dialog.tsx
+var DialogContext = createContext2(null);
+function useDialogContext2() {
+  const ctx = useContext2(DialogContext);
+  return ctx;
+}
+function DialogRoot(props) {
+  const [open, setOpen] = createControllableSignal2({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const titleId = createId2("dialog-title");
+  const descriptionId = createId2("dialog-desc");
+  const contentRef = { current: null };
+  const ctx = {
+    open,
+    setOpen,
+    titleId,
+    descriptionId,
+    contentRef
+  };
+  if (props.trigger !== undefined || props.title !== undefined || props.description !== undefined) {
+    return DialogContext.Provider({
+      value: ctx,
+      children: () => /* @__PURE__ */ jsxs2(Fragment2, {
+        children: [
+          props.trigger ? /* @__PURE__ */ jsx2(DialogTrigger2, {
+            as: "span",
+            class: props.triggerClass,
+            children: typeof props.trigger === "function" ? props.trigger() : props.trigger
+          }) : null,
+          /* @__PURE__ */ jsx2(DialogOverlay2, {
+            class: props.overlayClass,
+            portalled: props.portalled
+          }),
+          /* @__PURE__ */ jsxs2(DialogContent2, {
+            portalled: props.portalled,
+            class: props.contentClass,
+            children: [
+              props.title ? /* @__PURE__ */ jsx2(DialogTitle2, {
+                class: props.titleClass,
+                children: typeof props.title === "function" ? props.title() : props.title
+              }) : null,
+              props.description ? /* @__PURE__ */ jsx2(DialogDescription2, {
+                class: props.descriptionClass,
+                children: typeof props.description === "function" ? props.description() : props.description
+              }) : null,
+              typeof props.children === "function" ? props.children() : props.children,
+              props.footer ? /* @__PURE__ */ jsx2("div", {
+                class: props.footerClass,
+                children: typeof props.footer === "function" ? props.footer() : props.footer
+              }) : null
+            ]
+          })
+        ]
+      })
+    });
+  }
+  return DialogContext.Provider({
+    value: ctx,
+    children: props.children
+  });
+}
+function DialogTrigger2(props) {
+  const ctx = useContext2(DialogContext);
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(true);
+    }
+  };
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    type: Tag === "button" ? "button" : undefined,
+    "aria-haspopup": "dialog",
+    "aria-expanded": () => ctx?.open() ?? false,
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    class: className,
+    style,
+    onClick: handleClick,
+    ...rest,
+    children
+  });
+}
+function DialogPortal2(props) {
+  return /* @__PURE__ */ jsx2(Portal2, {
+    mount: props.mount,
+    children: props.children
+  });
+}
+function DialogOverlay2(props) {
+  const ctx = useContext2(DialogContext);
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(false);
+    }
+  };
+  const {
+    as: Tag = "div",
+    children,
+    onClick,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+  const overlay = /* @__PURE__ */ jsx2(Tag, {
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    style: () => ({
+      display: ctx?.open() ? undefined : "none",
+      ...style
+    }),
+    class: className,
+    onClick: handleClick,
+    "aria-hidden": "true",
+    ...rest,
+    children
+  });
+  return portalled ? /* @__PURE__ */ jsx2(Portal2, {
+    mount,
+    children: overlay
+  }) : overlay;
+}
+function DialogContent2(props) {
+  const ctx = useContext2(DialogContext);
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.defaultPrevented)
+      return;
+    if (e.key === "Escape") {
+      ctx?.setOpen(false);
+      e.stopPropagation();
+    } else if (e.key === "Tab" && ctx?.contentRef.current) {
+      trapFocus2(ctx.contentRef.current, e);
+    }
+  };
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (e.defaultPrevented)
+      return;
+    const target = e.target;
+    if (target?.closest("[data-dialog-close]")) {
+      ctx?.setOpen(false);
+    }
+  };
+  const {
+    as: Tag = "div",
+    children,
+    onKeyDown,
+    onClick: _onClick,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+  const content = /* @__PURE__ */ jsx2(Tag, {
+    ref: (el) => {
+      if (ctx) {
+        ctx.contentRef.current = el;
+        if (el && ctx.open()) {
+          const focusable = el.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+          if (focusable) {
+            setTimeout(() => focusable.focus(), 0);
+          }
+        }
+      }
+    },
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": ctx?.titleId,
+    "aria-describedby": ctx?.descriptionId,
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    style: () => ({
+      display: ctx?.open() ? undefined : "none",
+      ...style
+    }),
+    class: className,
+    onKeyDown: handleKeyDown,
+    onClick: handleClick,
+    tabIndex: -1,
+    ...rest,
+    children
+  });
+  return portalled ? /* @__PURE__ */ jsx2(Portal2, {
+    mount,
+    children: content
+  }) : content;
+}
+function DialogTitle2(props) {
+  const ctx = useContext2(DialogContext);
+  const { as: Tag = "h2", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    id: ctx?.titleId,
+    class: className,
+    style,
+    ...rest,
+    children
+  });
+}
+function DialogDescription2(props) {
+  const ctx = useContext2(DialogContext);
+  const { as: Tag = "p", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    id: ctx?.descriptionId,
+    class: className,
+    style,
+    ...rest,
+    children
+  });
+}
+function DialogClose2(props) {
+  const ctx = useContext2(DialogContext);
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(false);
+    }
+  };
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    type: Tag === "button" ? "button" : undefined,
+    "data-dialog-close": "",
+    class: className,
+    style,
+    onClick: handleClick,
+    ...rest,
+    children
+  });
+}
+var Dialog2 = Object.assign(DialogRoot, {
+  Root: DialogRoot,
+  Trigger: DialogTrigger2,
+  Portal: DialogPortal2,
+  Overlay: DialogOverlay2,
+  Content: DialogContent2,
+  Title: DialogTitle2,
+  Description: DialogDescription2,
+  Close: DialogClose2
+});
+// src/ui/dropdown-menu.tsx
+var DropdownMenuContext = createContext2(null);
+function useDropdownMenuContext2() {
+  return useContext2(DropdownMenuContext);
+}
+function DropdownMenuRoot(props) {
+  const [open, setOpen] = createControllableSignal2({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const triggerRef = { current: null };
+  const contentRef = { current: null };
+  const menuId = createId2("dropdown-menu");
+  const ctx = {
+    open,
+    setOpen,
+    triggerRef,
+    contentRef,
+    menuId
+  };
+  if (props.trigger !== undefined || props.items !== undefined) {
+    return DropdownMenuContext.Provider({
+      value: ctx,
+      children: () => /* @__PURE__ */ jsxs2("div", {
+        class: "visage-dropdown-root",
+        style: { position: "relative", display: "inline-block" },
+        children: [
+          props.trigger ? /* @__PURE__ */ jsx2(DropdownMenuTrigger2, {
+            as: "span",
+            class: props.triggerClass,
+            children: typeof props.trigger === "function" ? props.trigger() : props.trigger
+          }) : null,
+          /* @__PURE__ */ jsxs2(DropdownMenuContent2, {
+            portalled: props.portalled ?? false,
+            class: props.contentClass,
+            children: [
+              props.items ? props.items.map((item) => {
+                if (item.separator) {
+                  return /* @__PURE__ */ jsx2(DropdownMenuSeparator2, {
+                    class: item.class ?? props.separatorClass
+                  });
+                }
+                return /* @__PURE__ */ jsxs2(DropdownMenuItem2, {
+                  disabled: item.disabled,
+                  onSelect: item.onSelect,
+                  class: [props.itemClass, item.class, item.danger ? "danger" : ""].filter(Boolean).join(" "),
+                  children: [
+                    item.icon ? /* @__PURE__ */ jsx2("span", {
+                      class: "dropdown-item-icon",
+                      style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        marginRight: "8px"
+                      },
+                      children: typeof item.icon === "function" ? item.icon() : item.icon
+                    }) : null,
+                    typeof item.label === "function" ? item.label() : item.label
+                  ]
+                });
+              }) : null,
+              typeof props.children === "function" ? props.children() : props.children
+            ]
+          })
+        ]
+      })
+    });
+  }
+  return DropdownMenuContext.Provider({
+    value: ctx,
+    children: props.children
+  });
+}
+function DropdownMenuTrigger2(props) {
+  const ctx = useContext2(DropdownMenuContext);
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(!ctx.open());
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.defaultPrevented)
+      return;
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      if (ctx) {
+        ctx.setOpen(true);
+        e.preventDefault();
+        setTimeout(() => {
+          const firstItem = ctx.contentRef.current?.querySelector('[role="menuitem"]:not([disabled])');
+          firstItem?.focus();
+        }, 0);
+      }
+    }
+  };
+  const {
+    as: Tag = "button",
+    children,
+    onClick,
+    onKeyDown,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    ref: (el) => {
+      if (ctx)
+        ctx.triggerRef.current = el;
+    },
+    type: Tag === "button" ? "button" : undefined,
+    "aria-haspopup": "menu",
+    "aria-expanded": () => ctx?.open() ?? false,
+    "aria-controls": ctx?.menuId,
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    class: className,
+    style,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ...rest,
+    children
+  });
+}
+function DropdownMenuPortal2(props) {
+  return /* @__PURE__ */ jsx2(Portal2, {
+    mount: props.mount,
+    children: props.children
+  });
+}
+function DropdownMenuContent2(props) {
+  const ctx = useContext2(DropdownMenuContext);
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.defaultPrevented)
+      return;
+    const el = ctx?.contentRef.current;
+    if (!el)
+      return;
+    const items = Array.from(el.querySelectorAll('[role="menuitem"]:not([disabled])'));
+    const active = document.activeElement;
+    const index = active ? items.indexOf(active) : -1;
+    if (e.key === "ArrowDown") {
+      const nextIndex = index === items.length - 1 || index === -1 ? 0 : index + 1;
+      items[nextIndex]?.focus();
+      e.preventDefault();
+    } else if (e.key === "ArrowUp") {
+      const nextIndex = index <= 0 ? items.length - 1 : index - 1;
+      items[nextIndex]?.focus();
+      e.preventDefault();
+    } else if (e.key === "Home") {
+      items[0]?.focus();
+      e.preventDefault();
+    } else if (e.key === "End") {
+      items[items.length - 1]?.focus();
+      e.preventDefault();
+    } else if (e.key === "Escape") {
+      if (ctx) {
+        ctx.setOpen(false);
+        ctx.triggerRef.current?.focus();
+      }
+      e.preventDefault();
+    } else if (e.key === "Tab") {
+      if (ctx)
+        ctx.setOpen(false);
+    }
+  };
+  const {
+    as: Tag = "div",
+    children,
+    onKeyDown,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+  const content = /* @__PURE__ */ jsx2(Tag, {
+    ref: (el) => {
+      if (ctx) {
+        ctx.contentRef.current = el;
+        if (el) {
+          const cleanup = onClickOutside2([ctx.triggerRef.current, el], () => {
+            if (ctx.open()) {
+              ctx.setOpen(false);
+            }
+          });
+          onCleanup2(cleanup);
+        }
+      }
+    },
+    id: ctx?.menuId,
+    role: "menu",
+    "aria-orientation": "vertical",
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    class: className,
+    style: () => ({
+      display: ctx?.open() ? undefined : "none",
+      ...style
+    }),
+    onKeyDown: handleKeyDown,
+    tabIndex: -1,
+    ...rest,
+    children
+  });
+  return portalled ? /* @__PURE__ */ jsx2(Portal2, {
+    mount,
+    children: content
+  }) : content;
+}
+function DropdownMenuItem2(props) {
+  const ctx = useContext2(DropdownMenuContext);
+  const closeOnSelect = props.closeOnSelect ?? true;
+  const handleSelect = (e) => {
+    if (props.disabled)
+      return;
+    if (props.onSelect)
+      props.onSelect(e);
+    if (!e.defaultPrevented && closeOnSelect && ctx) {
+      ctx.setOpen(false);
+      ctx.triggerRef.current?.focus();
+    }
+  };
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    handleSelect(e);
+  };
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleSelect(e);
+    }
+  };
+  const {
+    disabled,
+    closeOnSelect: _cos,
+    as: Tag = "div",
+    children,
+    onClick,
+    onKeyDown,
+    onSelect: _os,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    role: "menuitem",
+    tabIndex: -1,
+    "aria-disabled": disabled,
+    class: className,
+    style,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ...rest,
+    children
+  });
+}
+function DropdownMenuSeparator2(props) {
+  const { as: Tag = "div", class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    role: "separator",
+    "aria-orientation": "horizontal",
+    class: className,
+    style,
+    ...rest
+  });
+}
+var DropdownMenu2 = Object.assign(DropdownMenuRoot, {
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger2,
+  Portal: DropdownMenuPortal2,
+  Content: DropdownMenuContent2,
+  Item: DropdownMenuItem2,
+  Separator: DropdownMenuSeparator2
+});
+// src/ui/icon.tsx
+function createIcon2(name, iconNode) {
+  const IconComponent = function Icon(props = {}) {
+    const size = () => typeof props.size === "function" ? props.size() : props.size ?? 24;
+    const color = () => typeof props.color === "function" ? props.color() : props.color ?? "currentColor";
+    const strokeWidth = () => typeof props.strokeWidth === "function" ? props.strokeWidth() : props.strokeWidth ?? 2;
+    const {
+      size: _s,
+      color: _c,
+      strokeWidth: _sw,
+      class: className,
+      style,
+      children,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs2("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      "stroke-width": strokeWidth,
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: className,
+      style,
+      role: "img",
+      "aria-label": props["aria-label"] ?? name,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx2("title", {
+          children: props.title ?? name
+        }),
+        iconNode.map(([Tag, attrs]) => /* @__PURE__ */ jsx2(Tag, {
+          ...attrs
+        })),
+        typeof children === "function" ? children() : children
+      ]
+    });
+  };
+  IconComponent.displayName = name;
+  return IconComponent;
+}
+// src/ui/popover.tsx
+var PopoverContext = createContext2(null);
+function usePopoverContext2() {
+  return useContext2(PopoverContext);
+}
+function PopoverRoot(props) {
+  const [open, setOpen] = createControllableSignal2({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const triggerRef = { current: null };
+  const contentRef = { current: null };
+  const contentId = createId2("popover-content");
+  const ctx = {
+    open,
+    setOpen,
+    triggerRef,
+    contentRef,
+    contentId
+  };
+  if (props.trigger !== undefined || props.content !== undefined) {
+    return PopoverContext.Provider({
+      value: ctx,
+      children: () => /* @__PURE__ */ jsxs2(Fragment2, {
+        children: [
+          props.trigger ? /* @__PURE__ */ jsx2(PopoverTrigger2, {
+            as: "span",
+            class: props.triggerClass,
+            children: typeof props.trigger === "function" ? props.trigger() : props.trigger
+          }) : null,
+          /* @__PURE__ */ jsxs2(PopoverContent2, {
+            portalled: props.portalled,
+            class: props.contentClass,
+            children: [
+              typeof props.content === "function" ? props.content() : props.content,
+              typeof props.children === "function" ? props.children() : props.children
+            ]
+          })
+        ]
+      })
+    });
+  }
+  return PopoverContext.Provider({
+    value: ctx,
+    children: props.children
+  });
+}
+function PopoverTrigger2(props) {
+  const ctx = useContext2(PopoverContext);
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(!ctx.open());
+    }
+  };
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    ref: (el) => {
+      if (ctx)
+        ctx.triggerRef.current = el;
+    },
+    type: Tag === "button" ? "button" : undefined,
+    "aria-haspopup": "dialog",
+    "aria-expanded": () => ctx?.open() ?? false,
+    "aria-controls": ctx?.contentId,
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    class: className,
+    style,
+    onClick: handleClick,
+    ...rest,
+    children
+  });
+}
+function PopoverPortal2(props) {
+  return /* @__PURE__ */ jsx2(Portal2, {
+    mount: props.mount,
+    children: props.children
+  });
+}
+function PopoverContent2(props) {
+  const ctx = useContext2(PopoverContext);
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.defaultPrevented)
+      return;
+    if (e.key === "Escape" && ctx) {
+      ctx.setOpen(false);
+      ctx.triggerRef.current?.focus();
+      e.stopPropagation();
+    }
+  };
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (e.defaultPrevented)
+      return;
+    const target = e.target;
+    if (target?.closest("[data-popover-close]")) {
+      ctx?.setOpen(false);
+    }
+  };
+  const {
+    as: Tag = "div",
+    children,
+    onKeyDown,
+    onClick: _onClick,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+  const content = /* @__PURE__ */ jsx2(Tag, {
+    ref: (el) => {
+      if (ctx) {
+        ctx.contentRef.current = el;
+        if (el) {
+          const cleanup = onClickOutside2([ctx.triggerRef.current, el], () => {
+            if (ctx.open()) {
+              ctx.setOpen(false);
+            }
+          });
+          onCleanup2(cleanup);
+        }
+      }
+    },
+    id: ctx?.contentId,
+    role: "dialog",
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    class: className,
+    style: () => ({
+      display: ctx?.open() ? undefined : "none",
+      ...style
+    }),
+    onKeyDown: handleKeyDown,
+    onClick: handleClick,
+    tabIndex: -1,
+    ...rest,
+    children
+  });
+  return portalled ? /* @__PURE__ */ jsx2(Portal2, {
+    mount,
+    children: content
+  }) : content;
+}
+function PopoverClose2(props) {
+  const ctx = useContext2(PopoverContext);
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(false);
+    }
+  };
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    type: Tag === "button" ? "button" : undefined,
+    "data-popover-close": "",
+    class: className,
+    style,
+    onClick: handleClick,
+    ...rest,
+    children
+  });
+}
+var Popover2 = Object.assign(PopoverRoot, {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger2,
+  Portal: PopoverPortal2,
+  Content: PopoverContent2,
+  Close: PopoverClose2
+});
+// src/ui/toast.tsx
+function createToastManager2() {
+  const toasts = signal2([]);
+  const dismiss = (id) => {
+    const item = toasts().find((t) => t.id === id);
+    if (item?.onDismiss)
+      item.onDismiss();
+    toasts.update((list) => list.filter((t) => t.id !== id));
+  };
+  const show = (options) => {
+    const id = createId2("toast");
+    const normalized = typeof options === "string" ? { title: options } : options;
+    const data = {
+      id,
+      title: normalized.title,
+      description: normalized.description,
+      variant: normalized.variant ?? "default",
+      duration: normalized.duration ?? 5000,
+      onDismiss: normalized.onDismiss
+    };
+    toasts.update((list) => [...list, data]);
+    if (data.duration && data.duration > 0) {
+      setTimeout(() => {
+        dismiss(id);
+      }, data.duration);
+    }
+    return id;
+  };
+  const success = (title, options) => show({ ...options, title, variant: "success" });
+  const error = (title, options) => show({ ...options, title, variant: "error" });
+  const warning = (title, options) => show({ ...options, title, variant: "warning" });
+  const info = (title, options) => show({ ...options, title, variant: "info" });
+  const clear = () => {
+    toasts.set([]);
+  };
+  const fn = function toast(options) {
+    return show(options);
+  };
+  fn.toasts = toasts;
+  fn.show = show;
+  fn.success = success;
+  fn.error = error;
+  fn.warning = warning;
+  fn.info = info;
+  fn.dismiss = dismiss;
+  fn.clear = clear;
+  return fn;
+}
+var defaultToastManager2 = createToastManager2();
+var toast2 = defaultToastManager2;
+var ToastContext = createContext2(defaultToastManager2);
+function useToast2() {
+  return useContext2(ToastContext) ?? defaultToastManager2;
+}
+function ToastProvider2(props) {
+  const manager = props.manager ?? defaultToastManager2;
+  return ToastContext.Provider({
+    value: manager,
+    children: props.children
+  });
+}
+function ToastViewport2(props) {
+  const manager = useToast2();
+  const { as: Tag = "section", children, class: className, style, ...rest } = props;
+  const defaultRender = (t) => /* @__PURE__ */ jsxs2(Toast2, {
+    id: t.id,
+    variant: t.variant,
+    class: `visage-toast toast toast-${t.variant ?? "default"}`,
+    onDismiss: () => manager.dismiss(t.id),
+    children: [
+      /* @__PURE__ */ jsxs2("div", {
+        class: "visage-toast-content",
+        children: [
+          t.title && /* @__PURE__ */ jsx2(ToastTitle2, {
+            class: "visage-toast-title",
+            children: t.title
+          }),
+          t.description && /* @__PURE__ */ jsx2(ToastDescription2, {
+            class: "visage-toast-description",
+            children: t.description
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2(ToastClose2, {
+        class: "visage-toast-close",
+        onClick: () => manager.dismiss(t.id)
+      })
+    ]
+  });
+  const renderItem = children ?? defaultRender;
+  return /* @__PURE__ */ jsx2(Tag, {
+    role: "region",
+    "aria-label": "Notifications",
+    class: className,
+    style,
+    tabIndex: -1,
+    ...rest,
+    children: /* @__PURE__ */ jsx2(For2, {
+      each: manager.toasts,
+      children: (t) => renderItem(t)
+    })
+  });
+}
+function ToastRoot(props) {
+  const {
+    id,
+    variant = "default",
+    onDismiss,
+    as: Tag = "div",
+    children,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  const role = variant === "error" ? "alert" : "status";
+  const ariaLive = variant === "error" ? "assertive" : "polite";
+  return /* @__PURE__ */ jsx2(Tag, {
+    id,
+    role,
+    "aria-live": ariaLive,
+    "data-variant": variant,
+    "data-state": "open",
+    class: className,
+    style,
+    ...rest,
+    children
+  });
+}
+function ToastTitle2(props) {
+  const { as: Tag = "div", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    class: className,
+    style,
+    ...rest,
+    children
+  });
+}
+function ToastDescription2(props) {
+  const { as: Tag = "div", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    class: className,
+    style,
+    ...rest,
+    children
+  });
+}
+function ToastClose2(props) {
+  const { as: Tag = "button", children = "✕", onClick, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Tag, {
+    type: Tag === "button" ? "button" : undefined,
+    "aria-label": "Close notification",
+    class: className,
+    style,
+    onClick,
+    ...rest,
+    children
+  });
+}
+var Toast2 = Object.assign(ToastRoot, {
+  Root: ToastRoot,
+  Provider: ToastProvider2,
+  Viewport: ToastViewport2,
+  Title: ToastTitle2,
+  Description: ToastDescription2,
+  Close: ToastClose2
+});
+export { useAccordionContext2, useAccordionItemContext2, AccordionItem2, AccordionTrigger2, AccordionContent2, Accordion2, CommandDialog2, useCommandContext2, CommandInput2, CommandList2, CommandEmpty2, CommandGroup2, CommandItem2, Command2, DataTable2, useDialogContext2, DialogTrigger2, DialogPortal2, DialogOverlay2, DialogContent2, DialogTitle2, DialogDescription2, DialogClose2, Dialog2, useDropdownMenuContext2, DropdownMenuTrigger2, DropdownMenuPortal2, DropdownMenuContent2, DropdownMenuItem2, DropdownMenuSeparator2, DropdownMenu2, createIcon2, usePopoverContext2, PopoverTrigger2, PopoverPortal2, PopoverContent2, PopoverClose2, Popover2, createToastManager2, defaultToastManager2, toast2, useToast2, ToastProvider2, ToastViewport2, ToastTitle2, ToastDescription2, ToastClose2, Toast2 };