@memelabui/ui 0.8.1 → 0.9.0

package/dist/index.cjs

@@ -101,11 +101,11 @@ function useDisclosure(defaultOpen = false) {
 }
 function useMediaQuery(query) {
   const [matches, setMatches] = React.useState(() => {
-    if (typeof window === "undefined") return false;
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
     return window.matchMedia(query).matches;
   });
   React.useEffect(() => {
-    if (typeof window === "undefined") return;
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mediaQueryList = window.matchMedia(query);
     setMatches(mediaQueryList.matches);
     const handler = (event) => {
@@ -460,6 +460,765 @@ var SearchInput = React.forwardRef(function SearchInput2({ label, onClear, class
     wrapper
   ] });
 });
+var sizeClass4 = {
+  left: { sm: "w-64", md: "w-80", lg: "w-96", full: "w-screen" },
+  right: { sm: "w-64", md: "w-80", lg: "w-96", full: "w-screen" },
+  bottom: { sm: "h-1/4", md: "h-1/3", lg: "h-1/2", full: "h-screen" }
+};
+var positionClass = {
+  left: "inset-y-0 left-0",
+  right: "inset-y-0 right-0",
+  bottom: "inset-x-0 bottom-0"
+};
+var slideIn = {
+  left: "translate-x-0",
+  right: "translate-x-0",
+  bottom: "translate-y-0"
+};
+var slideOut = {
+  left: "-translate-x-full",
+  right: "translate-x-full",
+  bottom: "translate-y-full"
+};
+function Drawer({
+  isOpen,
+  onClose,
+  children,
+  side = "right",
+  size = "md",
+  ariaLabel,
+  closeOnBackdrop = true,
+  closeOnEsc = true,
+  className
+}) {
+  const panelRef = React.useRef(null);
+  const lastActiveRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!isOpen) return;
+    lastActiveRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const raf = requestAnimationFrame(() => {
+      const el = panelRef.current;
+      if (!el) return;
+      const focusables = getFocusableElements(el);
+      focusSafely(focusables[0] ?? el);
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      const lastActive = lastActiveRef.current;
+      lastActiveRef.current = null;
+      if (lastActive?.isConnected) focusSafely(lastActive);
+    };
+  }, [isOpen]);
+  useScrollLock(isOpen);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50", role: "presentation", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity duration-200",
+        "aria-hidden": "true",
+        onClick: closeOnBackdrop ? onClose : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        tabIndex: -1,
+        className: cn(
+          "fixed flex flex-col bg-surface-50 shadow-2xl ring-1 ring-white/10 transition-transform duration-300 ease-out focus:outline-none",
+          positionClass[side],
+          sizeClass4[side][size],
+          isOpen ? slideIn[side] : slideOut[side],
+          className
+        ),
+        onKeyDownCapture: (e) => {
+          if (closeOnEsc && e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            onClose();
+            return;
+          }
+          if (e.key !== "Tab") return;
+          const el = panelRef.current;
+          if (!el) return;
+          const focusables = getFocusableElements(el);
+          if (focusables.length === 0) {
+            e.preventDefault();
+            focusSafely(el);
+            return;
+          }
+          const active = document.activeElement;
+          const first = focusables[0];
+          const last = focusables[focusables.length - 1];
+          if (e.shiftKey) {
+            if (active === first) {
+              e.preventDefault();
+              focusSafely(last);
+            }
+          } else {
+            if (active === last) {
+              e.preventDefault();
+              focusSafely(first);
+            }
+          }
+        },
+        children
+      }
+    )
+  ] });
+}
+function Popover({
+  content,
+  children,
+  placement = "bottom",
+  closeOnClickOutside = true,
+  closeOnEsc = true,
+  open: controlledOpen,
+  onOpenChange,
+  offset = 8,
+  className
+}) {
+  const popoverId = React.useId();
+  const anchorRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const [pos, setPos] = React.useState(null);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const setOpen = React.useCallback(
+    (value) => {
+      if (!isControlled) setInternalOpen(value);
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange]
+  );
+  const toggle = React.useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);
+  const close = React.useCallback(() => setOpen(false), [setOpen]);
+  const updatePosition = React.useCallback(() => {
+    const el = anchorRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    let left;
+    let top;
+    let effPlacement = placement;
+    if (placement === "bottom" || placement === "top") {
+      left = r.left + r.width / 2;
+      if (placement === "bottom") {
+        top = r.bottom + offset;
+        if (top + 200 > window.innerHeight && r.top - offset > 200) {
+          effPlacement = "top";
+          top = r.top - offset;
+        }
+      } else {
+        top = r.top - offset;
+        if (top < 8) {
+          effPlacement = "bottom";
+          top = r.bottom + offset;
+        }
+      }
+    } else {
+      top = r.top + r.height / 2;
+      if (placement === "right") {
+        left = r.right + offset;
+      } else {
+        left = r.left - offset;
+      }
+    }
+    setPos({ left: Math.round(left), top: Math.round(top), placement: effPlacement });
+  }, [placement, offset]);
+  React.useEffect(() => {
+    if (!isOpen) return;
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isOpen, updatePosition]);
+  React.useEffect(() => {
+    if (!isOpen || !closeOnClickOutside) return;
+    const handleClick = (e) => {
+      const target = e.target;
+      if (anchorRef.current?.contains(target) || popoverRef.current?.contains(target)) {
+        return;
+      }
+      close();
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [isOpen, closeOnClickOutside, close]);
+  React.useEffect(() => {
+    if (!isOpen || !closeOnEsc) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+        anchorRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen, closeOnEsc, close]);
+  if (!React.isValidElement(children)) return children;
+  const child = React.cloneElement(children, {
+    ref: (node) => {
+      anchorRef.current = node;
+      const childProps = children.props;
+      const prevRef = childProps.ref;
+      if (typeof prevRef === "function") prevRef(node);
+      else if (prevRef && typeof prevRef === "object") prevRef.current = node;
+    },
+    onClick: (e) => {
+      const childProps = children.props;
+      if (typeof childProps.onClick === "function") childProps.onClick(e);
+      toggle();
+    },
+    "aria-expanded": isOpen,
+    "aria-haspopup": "dialog",
+    "aria-controls": isOpen ? popoverId : void 0
+  });
+  const getTransform = () => {
+    if (!pos) return "translate(-9999px, -9999px)";
+    switch (pos.placement) {
+      case "top":
+        return "translate(-50%, -100%)";
+      case "bottom":
+        return "translate(-50%, 0%)";
+      case "left":
+        return "translate(-100%, -50%)";
+      case "right":
+        return "translate(0%, -50%)";
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    child,
+    isOpen && typeof document !== "undefined" ? reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: popoverRef,
+          id: popoverId,
+          role: "dialog",
+          className: cn(
+            "fixed z-[9999] rounded-xl shadow-xl ring-1 ring-white/10 bg-surface-50 backdrop-blur-md p-4",
+            className
+          ),
+          style: {
+            left: pos?.left ?? 0,
+            top: pos?.top ?? 0,
+            transform: getTransform()
+          },
+          children: content
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+var DAY_NAMES = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+var DAY_IN_MS = 24 * 60 * 60 * 1e3;
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function addDays(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+}
+function addMonths(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+function getCalendarStart(date) {
+  const monthStart = startOfMonth(date);
+  const day = monthStart.getDay();
+  const diff = day === 0 ? 6 : day - 1;
+  return addDays(monthStart, -diff);
+}
+function isSameDay(a, b) {
+  if (!a || !b) return false;
+  return startOfDay(a).getTime() === startOfDay(b).getTime();
+}
+function isBetween(day, from, to) {
+  if (!from || !to) return false;
+  const current = startOfDay(day).getTime();
+  return current > startOfDay(from).getTime() && current < startOfDay(to).getTime();
+}
+function diffInDays(from, to) {
+  return Math.round((startOfDay(to).getTime() - startOfDay(from).getTime()) / DAY_IN_MS);
+}
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function formatDate(date, pattern) {
+  return pattern.replace("dd", pad(date.getDate())).replace("MM", pad(date.getMonth() + 1)).replace("yyyy", String(date.getFullYear()));
+}
+function formatMonthLabel(date) {
+  return new Intl.DateTimeFormat(void 0, { month: "long", year: "numeric" }).format(date);
+}
+function formatFullDate(date) {
+  return new Intl.DateTimeFormat(void 0, {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  }).format(date);
+}
+function parseDateInput(value) {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) {
+    const [year2, month2, day2] = trimmed.split("-").map(Number);
+    const parsed2 = new Date(year2, month2 - 1, day2);
+    if (parsed2.getFullYear() === year2 && parsed2.getMonth() === month2 - 1 && parsed2.getDate() === day2) {
+      return startOfDay(parsed2);
+    }
+    return null;
+  }
+  const match = trimmed.match(/^(\d{1,2})[./-](\d{1,2})[./-](\d{4})$/);
+  if (!match) return null;
+  const day = Number(match[1]);
+  const month = Number(match[2]);
+  const year = Number(match[3]);
+  const parsed = new Date(year, month - 1, day);
+  if (parsed.getFullYear() !== year || parsed.getMonth() !== month - 1 || parsed.getDate() !== day) {
+    return null;
+  }
+  return startOfDay(parsed);
+}
+function getPlaceholder(placeholder, key, fallback) {
+  if (typeof placeholder === "string") {
+    return key === "trigger" ? placeholder : fallback;
+  }
+  return placeholder?.[key] ?? fallback;
+}
+function buildCalendarDays(month) {
+  const start = getCalendarStart(month);
+  return Array.from({ length: 42 }, (_, index) => addDays(start, index));
+}
+function getRangeSummary(range, formatPattern) {
+  if (range.from && range.to) {
+    return `${formatDate(range.from, formatPattern)} - ${formatDate(range.to, formatPattern)}`;
+  }
+  if (range.from) {
+    return `${formatDate(range.from, formatPattern)} - ...`;
+  }
+  return "No date range selected";
+}
+function normalizeRange(range) {
+  return {
+    from: range.from ? startOfDay(range.from) : null,
+    to: range.to ? startOfDay(range.to) : null
+  };
+}
+function clampRange(range, min, max, maxRangeDays) {
+  let nextFrom = range.from ? startOfDay(range.from) : null;
+  let nextTo = range.to ? startOfDay(range.to) : null;
+  if (min) {
+    const minDay = startOfDay(min);
+    if (nextFrom && nextFrom < minDay) nextFrom = minDay;
+    if (nextTo && nextTo < minDay) nextTo = minDay;
+  }
+  if (max) {
+    const maxDay = startOfDay(max);
+    if (nextFrom && nextFrom > maxDay) nextFrom = maxDay;
+    if (nextTo && nextTo > maxDay) nextTo = maxDay;
+  }
+  if (nextFrom && nextTo && nextFrom > nextTo) {
+    const swap = nextFrom;
+    nextFrom = nextTo;
+    nextTo = swap;
+  }
+  if (nextFrom && nextTo && maxRangeDays && diffInDays(nextFrom, nextTo) + 1 > maxRangeDays) {
+    nextTo = addDays(nextFrom, maxRangeDays - 1);
+  }
+  return { from: nextFrom, to: nextTo };
+}
+function isDateDisabled(day, range, min, max, maxRangeDays) {
+  const normalized = startOfDay(day);
+  const minDay = min ? startOfDay(min) : null;
+  const maxDay = max ? startOfDay(max) : null;
+  if (minDay && normalized < minDay) return true;
+  if (maxDay && normalized > maxDay) return true;
+  if (range.from && !range.to && maxRangeDays) {
+    return Math.abs(diffInDays(range.from, normalized)) + 1 > maxRangeDays;
+  }
+  return false;
+}
+function CalendarIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "h-4 w-4",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "4", width: "14", height: "13", rx: "2.5", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 2.75V5.5M13.5 2.75V5.5M3 8h14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function ChevronIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: cn("h-4 w-4", className),
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+function CalendarMonth({
+  month,
+  viewMonth,
+  range,
+  formatPattern,
+  min,
+  max,
+  maxRangeDays,
+  onPrevMonth,
+  onNextMonth,
+  onSelectDay
+}) {
+  const days = React.useMemo(() => buildCalendarDays(month), [month]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-white/10 bg-white/[0.03] p-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onPrevMonth,
+          disabled: !onPrevMonth,
+          "aria-label": "Previous month",
+          className: cn(
+            "inline-flex h-8 w-8 items-center justify-center rounded-lg text-white/70 transition-colors",
+            onPrevMonth ? "hover:bg-white/10 hover:text-white" : "pointer-events-none opacity-0"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "h-4 w-4", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5l-5 5 5 5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium capitalize text-white", children: formatMonthLabel(month) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onNextMonth,
+          disabled: !onNextMonth,
+          "aria-label": "Next month",
+          className: cn(
+            "inline-flex h-8 w-8 items-center justify-center rounded-lg text-white/70 transition-colors",
+            onNextMonth ? "hover:bg-white/10 hover:text-white" : "pointer-events-none opacity-0"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "h-4 w-4", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5l5 5-5 5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 grid grid-cols-7 gap-1 text-center text-[11px] font-medium uppercase tracking-[0.14em] text-white/35", children: DAY_NAMES.map((day) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: day }, day)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((day) => {
+      const inMonth = day.getMonth() === month.getMonth();
+      const disabled = isDateDisabled(day, range, min, max, maxRangeDays);
+      const selectedStart = isSameDay(day, range.from);
+      const selectedEnd = isSameDay(day, range.to);
+      const inRange = isBetween(day, range.from, range.to);
+      const isToday = isSameDay(day, /* @__PURE__ */ new Date());
+      const roundedClass = selectedStart && selectedEnd ? "rounded-xl" : selectedStart ? "rounded-l-xl rounded-r-md" : selectedEnd ? "rounded-r-xl rounded-l-md" : inRange ? "rounded-md" : "rounded-xl";
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: () => onSelectDay(day),
+          "aria-label": formatFullDate(day),
+          "aria-pressed": selectedStart || selectedEnd || inRange,
+          className: cn(
+            "relative h-9 w-full text-sm tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+            roundedClass,
+            !inMonth && "text-white/25",
+            inMonth && !selectedStart && !selectedEnd && !inRange && "text-white/75",
+            (selectedStart || selectedEnd) && "bg-primary text-white shadow-glow",
+            inRange && !selectedStart && !selectedEnd && "bg-primary/15 text-white",
+            !selectedStart && !selectedEnd && !inRange && !disabled && "hover:bg-white/10 hover:text-white",
+            disabled && "cursor-not-allowed opacity-35"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatDate(day, "dd") }),
+            isToday && !selectedStart && !selectedEnd && !inRange ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-x-2 bottom-1 h-0.5 rounded-full bg-primary/70" }) : null,
+            isSameDay(day, viewMonth) ? null : null
+          ]
+        },
+        day.toISOString()
+      );
+    }) }),
+    range.from || range.to ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-xs text-white/45", children: getRangeSummary(range, formatPattern) }) : null
+  ] });
+}
+function DateRangePicker({
+  value,
+  onChange,
+  presets,
+  format = "dd.MM.yyyy",
+  placeholder,
+  min,
+  max,
+  maxRangeDays,
+  label,
+  helperText,
+  clearable = true,
+  disabled,
+  hasError,
+  error,
+  closeOnSelect = false,
+  compact = false,
+  className
+}) {
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const [open, setOpen] = React.useState(false);
+  const normalizedValue = React.useMemo(() => normalizeRange(value), [value]);
+  const [viewMonth, setViewMonth] = React.useState(() => startOfMonth(normalizedValue.from ?? normalizedValue.to ?? /* @__PURE__ */ new Date()));
+  const [fromInput, setFromInput] = React.useState("");
+  const [toInput, setToInput] = React.useState("");
+  const showError = hasError || Boolean(error);
+  const hasValue = normalizedValue.from !== null || normalizedValue.to !== null;
+  const triggerPlaceholder = getPlaceholder(placeholder, "trigger", compact ? "Any date" : "Select date range");
+  const fromPlaceholder = getPlaceholder(placeholder, "from", "dd.mm.yyyy");
+  const toPlaceholder = getPlaceholder(placeholder, "to", "dd.mm.yyyy");
+  const monthsToRender = isMobile ? [viewMonth] : [viewMonth, addMonths(viewMonth, 1)];
+  React.useEffect(() => {
+    setFromInput(normalizedValue.from ? formatDate(normalizedValue.from, format) : "");
+    setToInput(normalizedValue.to ? formatDate(normalizedValue.to, format) : "");
+  }, [normalizedValue.from, normalizedValue.to, format]);
+  React.useEffect(() => {
+    if (!open) {
+      setViewMonth(startOfMonth(normalizedValue.from ?? normalizedValue.to ?? /* @__PURE__ */ new Date()));
+    }
+  }, [normalizedValue.from, normalizedValue.to, open]);
+  const selectedText = React.useMemo(() => {
+    if (normalizedValue.from && normalizedValue.to) {
+      return `${formatDate(normalizedValue.from, format)} - ${formatDate(normalizedValue.to, format)}`;
+    }
+    if (normalizedValue.from) {
+      return `${formatDate(normalizedValue.from, format)} - ...`;
+    }
+    return triggerPlaceholder;
+  }, [format, normalizedValue.from, normalizedValue.to, triggerPlaceholder]);
+  const handleRangeChange = (nextRange) => {
+    onChange(clampRange(nextRange, min, max, maxRangeDays));
+  };
+  const handleSelectDay = (day) => {
+    if (isDateDisabled(day, normalizedValue, min, max, maxRangeDays)) {
+      return;
+    }
+    const normalizedDay = startOfDay(day);
+    if (!normalizedValue.from || normalizedValue.to) {
+      handleRangeChange({ from: normalizedDay, to: null });
+      return;
+    }
+    const nextRange = normalizedDay < normalizedValue.from ? { from: normalizedDay, to: normalizedValue.from } : { from: normalizedValue.from, to: normalizedDay };
+    handleRangeChange(nextRange);
+    if (closeOnSelect) {
+      setOpen(false);
+    }
+  };
+  const commitInput = (kind, rawValue) => {
+    const parsed = parseDateInput(rawValue);
+    if (!rawValue.trim()) {
+      handleRangeChange({
+        from: kind === "from" ? null : normalizedValue.from,
+        to: kind === "to" ? null : normalizedValue.to
+      });
+      return;
+    }
+    if (!parsed || isDateDisabled(parsed, normalizedValue, min, max, maxRangeDays)) {
+      return;
+    }
+    if (kind === "from") {
+      handleRangeChange({ from: parsed, to: normalizedValue.to });
+      setViewMonth(startOfMonth(parsed));
+      return;
+    }
+    handleRangeChange({ from: normalizedValue.from, to: parsed });
+    setViewMonth(startOfMonth(parsed));
+  };
+  const handleClear = () => {
+    handleRangeChange({ from: null, to: null });
+    setOpen(false);
+  };
+  const panel = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4 p-4", isMobile ? "h-full overflow-y-auto" : "w-[min(42rem,calc(100vw-1.5rem))] max-w-[calc(100vw-1.5rem)]"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-white", children: "Date range" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-white/50", children: "Pick a start and end date or use a preset." })
+      ] }),
+      !isMobile ? /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "ghost", onClick: () => setOpen(false), children: "Done" }) : null
+    ] }),
+    presets && presets.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: presets.map((preset) => {
+      const presetRange = clampRange(preset.range, min, max, maxRangeDays);
+      const active = isSameDay(presetRange.from, normalizedValue.from) && isSameDay(presetRange.to, normalizedValue.to);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            handleRangeChange(presetRange);
+            if (closeOnSelect) {
+              setOpen(false);
+            }
+          },
+          className: cn(
+            "rounded-xl border px-3 py-1.5 text-xs font-medium transition-colors",
+            active ? "border-primary/60 bg-primary/15 text-white" : "border-white/10 bg-white/[0.03] text-white/70 hover:bg-white/10 hover:text-white"
+          ),
+          children: preset.label
+        },
+        preset.label
+      );
+    }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          label: "From",
+          value: fromInput,
+          placeholder: fromPlaceholder,
+          onChange: (event) => setFromInput(event.target.value),
+          onBlur: (event) => commitInput("from", event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              commitInput("from", fromInput);
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          label: "To",
+          value: toInput,
+          placeholder: toPlaceholder,
+          onChange: (event) => setToInput(event.target.value),
+          onBlur: (event) => commitInput("to", event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              commitInput("to", toInput);
+            }
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-4", isMobile ? "grid-cols-1" : "md:grid-cols-2"), children: monthsToRender.map((month, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      CalendarMonth,
+      {
+        month,
+        viewMonth,
+        range: normalizedValue,
+        formatPattern: format,
+        min,
+        max,
+        maxRangeDays,
+        onPrevMonth: index === 0 ? () => setViewMonth((prev) => addMonths(prev, -1)) : void 0,
+        onNextMonth: index === monthsToRender.length - 1 ? () => setViewMonth((prev) => addMonths(prev, 1)) : void 0,
+        onSelectDay: handleSelectDay
+      },
+      month.toISOString()
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-white/10 pt-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-white/45", children: getRangeSummary(normalizedValue, format) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        clearable ? /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }) : null,
+        isMobile ? /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "secondary", onClick: () => setOpen(false), children: "Done" }) : null
+      ] })
+    ] })
+  ] });
+  const triggerButton = /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick: () => {
+        if (isMobile) {
+          setOpen(true);
+        }
+      },
+      "aria-label": `Date range: ${selectedText}`,
+      className: cn(
+        "flex w-full items-center justify-between gap-3 rounded-xl bg-white/10 text-left text-white shadow-sm outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-primary/40",
+        compact ? "min-h-10 px-3 py-2 text-sm" : "min-h-11 px-3 py-2.5 text-sm",
+        hasValue && clearable && "pr-16",
+        showError && "ring-2 ring-rose-500/40 focus-visible:ring-rose-500/40",
+        disabled && "cursor-not-allowed opacity-60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(hasValue ? "text-primary" : "text-white/40"), children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate", hasValue ? "text-white" : "text-white/40"), children: selectedText })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-white/45", children: [
+          normalizedValue.from && normalizedValue.to ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "hidden rounded-full bg-white/10 px-2 py-0.5 text-[11px] text-white/60 sm:inline-flex", children: [
+            diffInDays(normalizedValue.from, normalizedValue.to) + 1,
+            "d"
+          ] }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { className: cn(open && "rotate-180 transition-transform") })
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1.5 block text-sm text-white/70", children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      isMobile ? triggerButton : /* @__PURE__ */ jsxRuntime.jsx(
+        Popover,
+        {
+          open,
+          onOpenChange: setOpen,
+          placement: "bottom",
+          className: "overflow-hidden p-0",
+          content: panel,
+          children: triggerButton
+        }
+      ),
+      clearable && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (event) => {
+            event.stopPropagation();
+            handleClear();
+          },
+          "aria-label": "Clear date range",
+          className: "absolute right-10 top-1/2 -translate-y-1/2 rounded-md p-1 text-white/35 transition-colors hover:bg-white/10 hover:text-white",
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "h-3.5 w-3.5", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+        }
+      ) : null
+    ] }),
+    error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-rose-400", children: error }) : null,
+    helperText && !error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-white/40", children: helperText }) : null,
+    isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+      Drawer,
+      {
+        isOpen: open,
+        onClose: () => setOpen(false),
+        side: "bottom",
+        size: "full",
+        ariaLabel: "Date range picker",
+        className: "rounded-t-3xl",
+        children: panel
+      }
+    ) : null
+  ] });
+}
 var selectBase = "w-full rounded-xl px-3 py-2.5 text-sm bg-white/10 text-white shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-primary/40 transition-shadow";
 var Select = React.forwardRef(function Select2({ hasError, label, error, helperText, className, id: externalId, children, ...props }, ref) {
   const generatedId = React.useId();
@@ -637,7 +1396,7 @@ var TagInput = React.forwardRef(
   }
 );
 var base3 = "inline-flex items-center justify-center rounded-full font-semibold ring-1 ring-white/10";
-var sizeClass4 = {
+var sizeClass5 = {
   sm: "text-xs px-2.5 py-1",
   md: "text-sm px-3 py-1.5"
 };
@@ -652,7 +1411,7 @@ var variantClass3 = {
   accent: "bg-accent/15 text-accent-light ring-accent/20"
 };
 var Badge = React.forwardRef(function Badge2({ children, variant = "neutral", size = "sm", className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...props, className: cn(base3, sizeClass4[size], variantClass3[variant], className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...props, className: cn(base3, sizeClass5[size], variantClass3[variant], className), children });
 });
 var Pill = Badge;
 var trackSize = {
@@ -1102,7 +1861,7 @@ function RadioItem({ value, disabled: itemDisabled, children, className }) {
     }
   );
 }
-var sizeClass5 = {
+var sizeClass6 = {
   sm: "h-3 w-3 border",
   md: "h-4 w-4 border-2",
   lg: "h-6 w-6 border-2"
@@ -1111,7 +1870,7 @@ function Spinner({ className, size = "md", label }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: cn("inline-block rounded-full border-white/15 border-t-primary animate-spin", sizeClass5[size], className),
+      className: cn("inline-block rounded-full border-white/15 border-t-primary animate-spin", sizeClass6[size], className),
       role: label ? "status" : void 0,
       "aria-hidden": label ? void 0 : "true",
       "aria-label": label || void 0
@@ -2031,93 +2790,203 @@ function Divider({ orientation = "horizontal", label, className }) {
     }
   );
 }
-var Table = React.forwardRef(({ children, className }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl ring-1 ring-white/10 overflow-hidden bg-white/5", children: /* @__PURE__ */ jsxRuntime.jsx("table", { ref, className: cn("w-full text-sm text-white", className), children }) }));
-Table.displayName = "Table";
-var TableHeader = React.forwardRef(
-  ({ children, className }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("bg-white/5 border-b border-white/10", className), children })
-);
-TableHeader.displayName = "TableHeader";
-var TableBody = React.forwardRef(
-  ({ children, className }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: cn("divide-y divide-white/[0.06]", className), children })
-);
-TableBody.displayName = "TableBody";
-var TableRow = React.forwardRef(
-  ({ children, className, hoverable }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "tr",
-    {
-      ref,
-      className: cn(hoverable && "hover:bg-white/[0.03] transition-colors", className),
-      children
-    }
-  )
-);
-TableRow.displayName = "TableRow";
-var TableHead = React.forwardRef(
-  ({ children, className }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "th",
+var Table = React.forwardRef(function Table2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl ring-1 ring-white/10 overflow-hidden bg-white/5", children: /* @__PURE__ */ jsxRuntime.jsx("table", { ref, className: cn("w-full text-sm text-white", className), ...props, children }) });
+});
+var TableHeader = React.forwardRef(function TableHeader2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("bg-white/5 border-b border-white/10", className), ...props, children });
+});
+var TableBody = React.forwardRef(function TableBody2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: cn("divide-y divide-white/[0.06]", className), ...props, children });
+});
+var TableRow = React.forwardRef(function TableRow2({ children, className, hoverable, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      ref,
+      className: cn(hoverable && "hover:bg-white/[0.03] transition-colors", className),
+      ...props,
+      children
+    }
+  );
+});
+var TableHead = React.forwardRef(function TableHead2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      ref,
+      className: cn(
+        "px-4 py-3 text-left text-xs font-semibold text-white/50 uppercase tracking-wider",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+var alignClass = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+var TableCell = React.forwardRef(function TableCell2({ children, className, align = "left", ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { ref, className: cn("px-4 py-3 text-white/80", alignClass[align], className), ...props, children });
+});
+var variantBorderColor = {
+  info: "border-blue-500",
+  success: "border-emerald-500",
+  warning: "border-amber-500",
+  error: "border-rose-500"
+};
+var variantIconColor = {
+  info: "text-blue-400",
+  success: "text-emerald-400",
+  warning: "text-amber-400",
+  error: "text-rose-400"
+};
+function InfoIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 8v5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "5.5", r: "0.875", fill: "currentColor" })
+      ]
+    }
+  );
+}
+function SuccessIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M5.5 9.5l2.5 2.5 4.5-5",
+            stroke: "currentColor",
+            strokeWidth: "1.75",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function WarningIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M7.634 2.896a1.6 1.6 0 0 1 2.732 0l5.866 10.167A1.6 1.6 0 0 1 14.866 15.5H3.134a1.6 1.6 0 0 1-1.366-2.437L7.634 2.896Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 7v4", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "12.5", r: "0.875", fill: "currentColor" })
+      ]
+    }
+  );
+}
+function ErrorIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
     {
-      ref,
-      className: cn(
-        "px-4 py-3 text-left text-xs font-semibold text-white/50 uppercase tracking-wider",
-        className
-      ),
-      children
+      "aria-hidden": "true",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M6.5 6.5l5 5M11.5 6.5l-5 5",
+            stroke: "currentColor",
+            strokeWidth: "1.75",
+            strokeLinecap: "round"
+          }
+        )
+      ]
     }
-  )
-);
-TableHead.displayName = "TableHead";
-var alignClass = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right"
-};
-var TableCell = React.forwardRef(
-  ({ children, className, align = "left" }, ref) => /* @__PURE__ */ jsxRuntime.jsx("td", { ref, className: cn("px-4 py-3 text-white/80", alignClass[align], className), children })
-);
-TableCell.displayName = "TableCell";
-function TrendIndicator({ trend }) {
-  if (trend.value > 0) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-emerald-400", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "w-3 h-3 shrink-0", fill: "none", viewBox: "0 0 12 12", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9V3M3 6l3-3 3 3" }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        "+",
-        trend.value,
-        trend.label ? ` ${trend.label}` : ""
-      ] })
-    ] });
-  }
-  if (trend.value < 0) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-rose-400", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "w-3 h-3 shrink-0", fill: "none", viewBox: "0 0 12 12", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 3v6M3 6l3 3 3-3" }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        trend.value,
-        trend.label ? ` ${trend.label}` : ""
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-white/40", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "w-3 h-3 shrink-0", fill: "none", viewBox: "0 0 12 12", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2 6h8" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      trend.value,
-      trend.label ? ` ${trend.label}` : ""
-    ] })
-  ] });
+  );
 }
-function StatCard({ value, label, icon, trend, className }) {
+var variantIcon = {
+  info: InfoIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  error: ErrorIcon
+};
+function Alert({ variant = "info", title, children, onDismiss, className }) {
+  const Icon = variantIcon[variant];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      role: "alert",
       className: cn(
-        "glass rounded-xl p-4 flex items-start gap-3",
+        "flex items-start gap-3 rounded-xl bg-white/5 ring-1 ring-white/10",
+        "border-l-4 pl-4 pr-3 py-3",
+        variantBorderColor[variant],
         className
       ),
       children: [
-        icon != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center text-primary shrink-0", children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-bold text-white tabular-nums leading-none", children: value }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-white/50 truncate", children: label }),
-          trend != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(TrendIndicator, { trend }) })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mt-0.5 shrink-0", variantIconColor[variant]), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-white leading-snug mb-0.5", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-white/70 leading-relaxed", children })
+        ] }),
+        onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss",
+            onClick: onDismiss,
+            className: cn(
+              "shrink-0 flex items-center justify-center h-6 w-6 rounded-lg mt-0.5",
+              "text-white/40 transition-colors hover:bg-white/10 hover:text-white/80",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                width: "10",
+                height: "10",
+                viewBox: "0 0 10 10",
+                fill: "none",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 1l8 8M9 1L1 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+              }
+            )
+          }
+        )
       ]
     }
   );
@@ -2253,6 +3122,567 @@ function Pagination({
     }
   );
 }
+function useControllableState(controlledValue, defaultValue, onChange) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const value = controlledValue ?? internalValue;
+  const setValue = (nextValue) => {
+    const resolvedValue = typeof nextValue === "function" ? nextValue(value) : nextValue;
+    if (controlledValue === void 0) {
+      setInternalValue(resolvedValue);
+    }
+    onChange?.(resolvedValue);
+  };
+  return [value, setValue];
+}
+function startOfDay2(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function endOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+}
+function isDateRangeValue(value) {
+  return typeof value === "object" && value !== null && "from" in value && "to" in value;
+}
+function hasActiveDateRange(range) {
+  return range.from !== null || range.to !== null;
+}
+function isFilterValueActive(value) {
+  if (value == null) return false;
+  if (typeof value === "string") return value.trim() !== "";
+  if (Array.isArray(value)) return value.length > 0;
+  if (isDateRangeValue(value)) return hasActiveDateRange(value);
+  return true;
+}
+function getColumnValue(column, row) {
+  if (column.accessorFn) {
+    return column.accessorFn(row);
+  }
+  if (column.accessorKey) {
+    return row[column.accessorKey];
+  }
+  return void 0;
+}
+function coerceDate(value) {
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    return value;
+  }
+  if (typeof value === "string" || typeof value === "number") {
+    const parsed = new Date(value);
+    return Number.isNaN(parsed.getTime()) ? null : parsed;
+  }
+  return null;
+}
+function compareValues(left, right) {
+  if (left == null && right == null) return 0;
+  if (left == null) return 1;
+  if (right == null) return -1;
+  if (left instanceof Date || right instanceof Date) {
+    const leftDate = coerceDate(left);
+    const rightDate = coerceDate(right);
+    if (!leftDate && !rightDate) return 0;
+    if (!leftDate) return 1;
+    if (!rightDate) return -1;
+    return leftDate.getTime() - rightDate.getTime();
+  }
+  if (typeof left === "number" && typeof right === "number") {
+    return left - right;
+  }
+  return String(left).localeCompare(String(right), void 0, {
+    numeric: true,
+    sensitivity: "base"
+  });
+}
+function matchColumnFilter(column, row, filterValue) {
+  if (!isFilterValueActive(filterValue)) {
+    return true;
+  }
+  const rawValue = getColumnValue(column, row);
+  if (column.filterFn) {
+    return column.filterFn(rawValue, row, filterValue);
+  }
+  if (typeof column.filter === "function") {
+    return true;
+  }
+  switch (column.filter) {
+    case "select":
+    case "boolean":
+      return String(rawValue ?? "") === String(filterValue);
+    case "date-range": {
+      if (!isDateRangeValue(filterValue)) return true;
+      const dateValue = coerceDate(rawValue);
+      if (!dateValue) return false;
+      if (filterValue.from && dateValue < startOfDay2(filterValue.from)) return false;
+      if (filterValue.to && dateValue > endOfDay(filterValue.to)) return false;
+      return true;
+    }
+    case "text":
+    default:
+      return String(rawValue ?? "").toLowerCase().includes(String(filterValue).trim().toLowerCase());
+  }
+}
+function defaultResultsLabel(meta) {
+  return `Showing ${meta.from} - ${meta.to} of ${meta.total}`;
+}
+function SortIndicator({ active, desc }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("inline-flex flex-col text-[10px] leading-none", active ? "text-white" : "text-white/25"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", className: cn("h-2.5 w-2.5", active && !desc && "text-primary"), viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 9.5 8 6l3.5 3.5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", className: cn("h-2.5 w-2.5 -mt-0.5", active && desc && "text-primary"), viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 6.5 8 10l3.5-3.5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) })
+  ] });
+}
+function DataTable({
+  data,
+  columns,
+  caption,
+  searchValue,
+  defaultSearchValue = "",
+  onSearchValueChange,
+  searchPlaceholder = "Search records...",
+  enableSearch,
+  sortBy,
+  defaultSortBy = null,
+  onSortChange,
+  filters,
+  defaultFilters = {},
+  onFiltersChange,
+  showFilters,
+  defaultShowFilters = false,
+  onShowFiltersChange,
+  page,
+  defaultPage = 1,
+  onPageChange,
+  pageSize,
+  defaultPageSize = 25,
+  onPageSizeChange,
+  pageSizeOptions = [25, 50, 100],
+  totalItems,
+  loading,
+  loadingRows = 5,
+  error,
+  onRetry,
+  emptyState,
+  emptyTitle = "Nothing to show yet",
+  emptyDescription = "No rows matched the current filters.",
+  filterToggleLabel = "Filters",
+  clearFiltersLabel = "Clear",
+  pageSizeLabel = "Rows",
+  resultsLabel = defaultResultsLabel,
+  toolbarActions,
+  stickyHeader,
+  dense,
+  className,
+  manualSorting,
+  manualFiltering,
+  manualPagination,
+  onRowClick,
+  rowHref,
+  getRowId,
+  getRowClassName
+}) {
+  const visibleColumns = React.useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+  const [currentSearch, setCurrentSearch] = useControllableState(searchValue, defaultSearchValue, onSearchValueChange);
+  const [currentSort, setCurrentSort] = useControllableState(sortBy, defaultSortBy, onSortChange);
+  const [currentFilters, setCurrentFilters] = useControllableState(filters, defaultFilters, onFiltersChange);
+  const [filtersVisible, setFiltersVisible] = useControllableState(showFilters, defaultShowFilters, onShowFiltersChange);
+  const [currentPage, setCurrentPage] = useControllableState(page, defaultPage, onPageChange);
+  const [currentPageSize, setCurrentPageSize] = useControllableState(pageSize, defaultPageSize, onPageSizeChange);
+  const hasSearchControl = enableSearch || searchValue !== void 0 || defaultSearchValue !== "";
+  const searchTerm = currentSearch.trim().toLowerCase();
+  const searchableColumns = React.useMemo(
+    () => visibleColumns.filter((column) => column.searchable !== false),
+    [visibleColumns]
+  );
+  const filteredRows = React.useMemo(() => {
+    if (manualFiltering) {
+      return data;
+    }
+    return data.filter((row) => {
+      const matchesSearch = !searchTerm || searchableColumns.some((column) => {
+        const value = getColumnValue(column, row);
+        return String(value ?? "").toLowerCase().includes(searchTerm);
+      });
+      if (!matchesSearch) {
+        return false;
+      }
+      return visibleColumns.every((column) => matchColumnFilter(column, row, currentFilters[column.id]));
+    });
+  }, [currentFilters, data, manualFiltering, searchTerm, searchableColumns, visibleColumns]);
+  const sortedRows = React.useMemo(() => {
+    if (manualSorting || currentSort == null) {
+      return filteredRows;
+    }
+    const sortColumn = visibleColumns.find((column) => column.id === currentSort.id);
+    if (!sortColumn) {
+      return filteredRows;
+    }
+    return [...filteredRows].sort((left, right) => {
+      const result = compareValues(getColumnValue(sortColumn, left), getColumnValue(sortColumn, right));
+      return currentSort.desc ? -result : result;
+    });
+  }, [currentSort, filteredRows, manualSorting, visibleColumns]);
+  const derivedTotalItems = manualPagination ? totalItems ?? data.length : sortedRows.length;
+  const totalPages = Math.max(1, Math.ceil(derivedTotalItems / currentPageSize));
+  React.useEffect(() => {
+    if (currentPage > totalPages) {
+      setCurrentPage(totalPages);
+    }
+  }, [currentPage, setCurrentPage, totalPages]);
+  const pagedRows = React.useMemo(() => {
+    if (manualPagination) {
+      return data;
+    }
+    const startIndex = (currentPage - 1) * currentPageSize;
+    return sortedRows.slice(startIndex, startIndex + currentPageSize);
+  }, [currentPage, currentPageSize, data, manualPagination, sortedRows]);
+  const activeFilterCount = React.useMemo(
+    () => Object.values(currentFilters).filter(isFilterValueActive).length + (searchTerm ? 1 : 0),
+    [currentFilters, searchTerm]
+  );
+  const from = derivedTotalItems === 0 ? 0 : (currentPage - 1) * currentPageSize + 1;
+  const to = derivedTotalItems === 0 ? 0 : manualPagination ? Math.min(from + pagedRows.length - 1, derivedTotalItems) : Math.min(currentPage * currentPageSize, derivedTotalItems);
+  const handleSortToggle = (column) => {
+    if (!column.sortable) return;
+    setCurrentPage(1);
+    setCurrentSort((previousSort) => {
+      if (!previousSort || previousSort.id !== column.id) {
+        return { id: column.id, desc: Boolean(column.sortDescFirst) };
+      }
+      if (previousSort.desc === Boolean(column.sortDescFirst)) {
+        return { id: column.id, desc: !previousSort.desc };
+      }
+      return null;
+    });
+  };
+  const handleFilterChange = (columnId, value) => {
+    setCurrentPage(1);
+    setCurrentFilters((previousFilters) => ({
+      ...previousFilters,
+      [columnId]: value
+    }));
+  };
+  const handleClear = () => {
+    setCurrentSearch("");
+    setCurrentPage(1);
+    setCurrentFilters({});
+  };
+  const handlePageSizeChange = (value) => {
+    setCurrentPage(1);
+    setCurrentPageSize(value);
+  };
+  const handleRowActivate = (row) => {
+    onRowClick?.(row);
+    const href = rowHref?.(row);
+    if (href && typeof window !== "undefined") {
+      window.location.assign(href);
+    }
+  };
+  const renderFilterControl = (column) => {
+    const filterValue = currentFilters[column.id];
+    if (typeof column.filter === "function") {
+      return column.filter({
+        column,
+        value: filterValue,
+        onChange: (value) => handleFilterChange(column.id, value),
+        data
+      });
+    }
+    switch (column.filter) {
+      case "select":
+      case "boolean":
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            "aria-label": `Filter ${typeof column.header === "string" ? column.header : column.id}`,
+            value: typeof filterValue === "string" ? filterValue : "",
+            onChange: (event) => handleFilterChange(column.id, event.target.value),
+            className: "w-full rounded-lg border border-white/10 bg-white/5 px-2.5 py-2 text-sm text-white outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All" }),
+              column.filterOptions?.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))
+            ]
+          }
+        );
+      case "date-range":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          DateRangePicker,
+          {
+            compact: true,
+            value: isDateRangeValue(filterValue) ? filterValue : { from: null, to: null },
+            onChange: (range) => handleFilterChange(column.id, range),
+            placeholder: { trigger: "Any date" }
+          }
+        );
+      case "text":
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            "aria-label": `Filter ${typeof column.header === "string" ? column.header : column.id}`,
+            type: "text",
+            value: typeof filterValue === "string" ? filterValue : "",
+            onChange: (event) => handleFilterChange(column.id, event.target.value),
+            className: "w-full rounded-lg border border-white/10 bg-white/5 px-2.5 py-2 text-sm text-white outline-none placeholder:text-white/25 focus-visible:ring-2 focus-visible:ring-primary/40",
+            placeholder: "Filter..."
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4", className), children: [
+    hasSearchControl || toolbarActions || visibleColumns.some((column) => column.filter) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm text-white/60", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: pageSizeLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              "aria-label": "Rows per page",
+              value: currentPageSize,
+              onChange: (event) => handlePageSizeChange(Number(event.target.value)),
+              className: "rounded-lg border border-white/10 bg-white/5 px-2.5 py-2 text-sm text-white outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+              children: pageSizeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: option }, option))
+            }
+          )
+        ] }),
+        visibleColumns.some((column) => column.filter) ? /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            size: "sm",
+            variant: filtersVisible ? "secondary" : "ghost",
+            onClick: () => setFiltersVisible((previousValue) => !previousValue),
+            children: [
+              filterToggleLabel,
+              activeFilterCount > 0 ? ` (${activeFilterCount})` : ""
+            ]
+          }
+        ) : null,
+        activeFilterCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "ghost", onClick: handleClear, children: clearFiltersLabel }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end", children: [
+        hasSearchControl ? /* @__PURE__ */ jsxRuntime.jsx(
+          SearchInput,
+          {
+            value: currentSearch,
+            onChange: (event) => {
+              setCurrentPage(1);
+              setCurrentSearch(event.target.value);
+            },
+            onClear: () => {
+              setCurrentPage(1);
+              setCurrentSearch("");
+            },
+            placeholder: searchPlaceholder,
+            className: "min-w-[16rem]"
+          }
+        ) : null,
+        toolbarActions
+      ] })
+    ] }) : null,
+    error ? /* @__PURE__ */ jsxRuntime.jsx(Alert, { variant: "error", title: "Unable to load table data", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
+      onRetry ? /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "secondary", onClick: onRetry, children: "Retry" }) : null
+    ] }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(Table, { className: "min-w-full", children: [
+      caption ? /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: caption }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs(TableHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: visibleColumns.map((column) => {
+          const sorted = currentSort?.id === column.id ? currentSort : null;
+          const ariaSort = column.sortable ? sorted ? sorted.desc ? "descending" : "ascending" : "none" : void 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            TableHead,
+            {
+              className: cn(
+                stickyHeader && "sticky top-0 z-10 bg-[#121420] backdrop-blur-sm",
+                column.headerClassName
+              ),
+              style: { width: column.width, minWidth: column.minWidth },
+              "aria-sort": ariaSort,
+              children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleSortToggle(column),
+                  className: "flex w-full items-center gap-2 text-left transition-colors hover:text-white",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: typeof column.header === "function" ? column.header({ column, sort: sorted }) : column.header }),
+                    /* @__PURE__ */ jsxRuntime.jsx(SortIndicator, { active: sorted !== null, desc: sorted?.desc })
+                  ]
+                }
+              ) : typeof column.header === "function" ? column.header({ column, sort: sorted }) : column.header
+            },
+            column.id
+          );
+        }) }),
+        filtersVisible ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "bg-white/[0.025]", children: visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+          TableHead,
+          {
+            className: "normal-case text-white/70 tracking-normal",
+            style: { width: column.width, minWidth: column.minWidth },
+            children: column.filter ? renderFilterControl(column) : null
+          },
+          `${column.id}-filter`
+        )) }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: loading ? Array.from({ length: loadingRows }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: dense ? "py-2" : void 0, align: column.align, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: cn(column.align === "right" ? "ml-auto" : "", "h-5 w-full max-w-[12rem]") }) }, `${column.id}-${rowIndex}`)) }, `loading-${rowIndex}`)) : pagedRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: visibleColumns.length, className: "py-10", align: "center", children: emptyState ?? /* @__PURE__ */ jsxRuntime.jsx(
+        EmptyState,
+        {
+          title: emptyTitle,
+          description: emptyDescription
+        }
+      ) }) }) : pagedRows.map((row, rowIndex) => {
+        const key = getRowId?.(row, rowIndex) ?? String(rowIndex);
+        const href = rowHref?.(row);
+        const interactive = Boolean(onRowClick || href);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TableRow,
+          {
+            hoverable: interactive,
+            className: cn(
+              dense && "[&>td]:py-2",
+              interactive && "cursor-pointer",
+              getRowClassName?.(row, rowIndex)
+            ),
+            ...interactive ? {
+              tabIndex: 0,
+              onClick: () => handleRowActivate(row),
+              onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  handleRowActivate(row);
+                }
+              }
+            } : {},
+            children: visibleColumns.map((column) => {
+              const value = getColumnValue(column, row);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                TableCell,
+                {
+                  align: column.align,
+                  className: column.className,
+                  children: column.cell ? column.cell({ row, value, rowIndex, column }) : value == null ? "\u2014" : String(value)
+                },
+                column.id
+              );
+            })
+          },
+          key
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 border-t border-white/10 pt-3 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/50", children: resultsLabel({ from, to, total: derivedTotalItems }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Pagination, { page: currentPage, totalPages, onPageChange: (nextPage) => setCurrentPage(nextPage) })
+    ] })
+  ] });
+}
+var sizeStyles = {
+  sm: "p-3 gap-3",
+  md: "p-4 gap-3",
+  lg: "p-5 gap-4"
+};
+var valueStyles = {
+  sm: "text-xl",
+  md: "text-2xl",
+  lg: "text-3xl"
+};
+var labelStyles = {
+  sm: "text-[11px] uppercase tracking-[0.16em]",
+  md: "text-sm",
+  lg: "text-sm uppercase tracking-[0.18em]"
+};
+var iconStyles = {
+  sm: "h-9 w-9 rounded-xl text-sm",
+  md: "h-10 w-10 rounded-xl text-base",
+  lg: "h-11 w-11 rounded-2xl text-base"
+};
+function getSignedValue(value) {
+  if (value > 0) return `+${value}`;
+  return `${value}`;
+}
+function getValueColorClass(valueColor, value) {
+  if (valueColor === "default") return "text-white";
+  if (valueColor === "success") return "text-emerald-400";
+  if (valueColor === "danger") return "text-rose-400";
+  if (valueColor === "warning") return "text-amber-400";
+  const raw = typeof value === "number" ? value : Number(String(value).replace(/[%,$\s]/g, ""));
+  if (!Number.isNaN(raw)) {
+    if (raw > 0) return "text-emerald-400";
+    if (raw < 0) return "text-rose-400";
+  }
+  const trimmed = String(value).trim();
+  if (trimmed.startsWith("+")) return "text-emerald-400";
+  if (trimmed.startsWith("-")) return "text-rose-400";
+  return "text-white";
+}
+function TrendIndicator({ trend }) {
+  const tone = trend.value > 0 ? "text-emerald-400" : trend.value < 0 ? "text-rose-400" : "text-white/40";
+  const icon = trend.value > 0 ? /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9V3M3 6l3-3 3 3" }) : trend.value < 0 ? /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 3v6M3 6l3 3 3-3" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2 6h8" });
+  const text = trend.format ? trend.format({ value: trend.value, percentValue: trend.percentValue }) : `${getSignedValue(trend.value)}${trend.percentValue != null ? ` (${getSignedValue(trend.percentValue)}%)` : ""}${trend.label ? ` ${trend.label}` : ""}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("inline-flex items-center gap-1 text-xs", tone), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "h-3 w-3 shrink-0", fill: "none", viewBox: "0 0 12 12", stroke: "currentColor", strokeWidth: 2, children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: text })
+  ] });
+}
+function MetricContent({ value, label, trend, size, valueColor }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("block font-bold leading-none tabular-nums", valueStyles[size], getValueColorClass(valueColor, value)), children: value }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("block truncate text-white/55", labelStyles[size]), children: label }),
+    trend ? /* @__PURE__ */ jsxRuntime.jsx(TrendIndicator, { trend }) : null
+  ] });
+}
+function ChevronIcon2() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "h-4 w-4", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5l5 5-5 5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function StatCard({
+  value,
+  label,
+  icon,
+  trend,
+  size = "md",
+  valueColor = "default",
+  href,
+  onClick,
+  loading,
+  secondaryMetric,
+  className
+}) {
+  const clickable = Boolean(href || onClick);
+  const rootClassName = cn(
+    "glass rounded-xl transition-[transform,background-color,box-shadow,ring-color]",
+    sizeStyles[size],
+    clickable && "group hover:bg-white/[0.08] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/20",
+    className
+  );
+  const content = loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start gap-3", children: [
+    icon ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: cn(iconStyles[size]) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: cn("h-7 max-w-[8rem]", size === "lg" && "h-8 max-w-[10rem]") }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 max-w-[11rem]" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-3 max-w-[9rem]" })
+    ] })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("shrink-0 bg-white/10 flex items-center justify-center text-primary", iconStyles[size]), children: icon }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MetricContent, { value, label, trend, size, valueColor }),
+      secondaryMetric ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 border-t border-white/10 pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+        MetricContent,
+        {
+          value: secondaryMetric.value,
+          label: secondaryMetric.label,
+          trend: secondaryMetric.trend,
+          size: size === "lg" ? "md" : size,
+          valueColor: "default"
+        }
+      ) }) : null
+    ] }),
+    clickable ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 shrink-0 text-white/35 transition-colors group-hover:text-white/70", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon2, {}) }) : null
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: cn("flex items-start", rootClassName), children: content });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, className: cn("flex w-full items-start text-left", rootClassName), children: content });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-start", rootClassName), children: content });
+}
 function Stepper({ steps, activeStep, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-start w-full", className), children: steps.map((step, index) => {
     const isCompleted = index < activeStep;
@@ -2585,8 +4015,221 @@ function DotIndicator({
           );
         })
       }
-    ),
-    showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium tabular-nums", urgency.label), children: label })
+    ),
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium tabular-nums", urgency.label), children: label })
+  ] });
+}
+var toneClass = {
+  default: "text-white/55 bg-white/[0.04] ring-white/10",
+  primary: "text-primary bg-primary/10 ring-primary/20",
+  success: "text-emerald-400 bg-emerald-500/10 ring-emerald-500/20",
+  warning: "text-amber-400 bg-amber-500/10 ring-amber-500/20",
+  danger: "text-rose-400 bg-rose-500/10 ring-rose-500/20",
+  accent: "text-accent-light bg-accent/10 ring-accent/20"
+};
+var variantStyles = {
+  default: {
+    gap: "gap-4",
+    icon: "h-10 w-10 text-sm",
+    textGap: "gap-2"
+  },
+  compact: {
+    gap: "gap-3",
+    icon: "h-8 w-8 text-xs",
+    textGap: "gap-1.5"
+  }
+};
+function toDate(value) {
+  if (!value) return null;
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value;
+  }
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+function formatTimestamp(value) {
+  return new Intl.DateTimeFormat(void 0, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  }).format(value);
+}
+function formatGroupHeader(value, groupBy) {
+  if (groupBy === "day") {
+    return new Intl.DateTimeFormat(void 0, {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    }).format(value);
+  }
+  if (groupBy === "month") {
+    return new Intl.DateTimeFormat(void 0, {
+      year: "numeric",
+      month: "long"
+    }).format(value);
+  }
+  return new Intl.DateTimeFormat(void 0, {
+    year: "numeric"
+  }).format(value);
+}
+function getGroupKey(value, groupBy) {
+  const year = value.getFullYear();
+  const month = String(value.getMonth() + 1).padStart(2, "0");
+  const day = String(value.getDate()).padStart(2, "0");
+  if (groupBy === "year") return `${year}`;
+  if (groupBy === "month") return `${year}-${month}`;
+  return `${year}-${month}-${day}`;
+}
+function DefaultIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-current", "aria-hidden": "true" });
+}
+function getToneStyle(iconColor) {
+  if (!iconColor || iconColor in toneClass) {
+    const tone = iconColor ?? "default";
+    return { className: toneClass[tone] };
+  }
+  return {
+    className: "bg-white/[0.04] ring-white/10",
+    style: { color: iconColor }
+  };
+}
+function getLineClass(lineStyle) {
+  if (lineStyle === "dashed") {
+    return "border-l border-dashed border-white/10";
+  }
+  if (lineStyle === "solid") {
+    return "border-l border-white/10";
+  }
+  return "border-l border-transparent";
+}
+function LoadingTimeline({ variant }) {
+  const styles = variantStyles[variant];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start", styles.gap), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex w-10 shrink-0 justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { circle: true, className: styles.icon }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 max-w-[12rem]" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-5 max-w-[14rem]" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 max-w-[18rem]" })
+    ] })
+  ] }, index)) });
+}
+function Timeline({
+  events,
+  timestampFormatter = formatTimestamp,
+  timestampPosition = "above",
+  groupBy = "none",
+  groupHeaderFormatter = formatGroupHeader,
+  variant = "default",
+  lineStyle = "solid",
+  order = "asc",
+  maxVisible,
+  onLoadMore,
+  hasMore,
+  loading,
+  emptyState,
+  className
+}) {
+  const styles = variantStyles[variant];
+  const orderedEvents = React.useMemo(() => {
+    const nextEvents = [...events].map((event, index) => ({
+      event,
+      index,
+      timestamp: toDate(event.timestamp)
+    }));
+    nextEvents.sort((left, right) => {
+      const leftTime = left.timestamp?.getTime();
+      const rightTime = right.timestamp?.getTime();
+      if (leftTime == null && rightTime == null) return left.index - right.index;
+      if (leftTime == null) return 1;
+      if (rightTime == null) return -1;
+      return order === "asc" ? leftTime - rightTime : rightTime - leftTime;
+    });
+    return nextEvents.map((entry) => entry.event);
+  }, [events, order]);
+  const visibleEvents = maxVisible ? orderedEvents.slice(0, maxVisible) : orderedEvents;
+  const groupedEvents = React.useMemo(() => {
+    if (groupBy === "none") {
+      return [{ key: "all", date: null, items: visibleEvents }];
+    }
+    const groups = /* @__PURE__ */ new Map();
+    visibleEvents.forEach((event) => {
+      const timestamp = toDate(event.timestamp);
+      const key = timestamp ? getGroupKey(timestamp, groupBy) : "ungrouped";
+      const existing = groups.get(key);
+      if (existing) {
+        existing.items.push(event);
+        return;
+      }
+      groups.set(key, {
+        key,
+        date: timestamp,
+        items: [event]
+      });
+    });
+    return Array.from(groups.values());
+  }, [groupBy, visibleEvents]);
+  const showLoadMore = Boolean(onLoadMore) && (hasMore ?? orderedEvents.length > visibleEvents.length);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(LoadingTimeline, { variant });
+  }
+  if (visibleEvents.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: emptyState ?? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { title: "No events yet", description: "Timeline entries will appear here once activity starts." }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-6", className), children: [
+    groupedEvents.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      groupBy !== "none" && group.date ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.18em] text-white/35", children: groupHeaderFormatter(group.date, groupBy) }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "space-y-4", children: group.items.map((event, index) => {
+        const timestamp = toDate(event.timestamp);
+        const tone = getToneStyle(event.iconColor);
+        const isLast = index === group.items.length - 1;
+        const timestampNode = timestamp ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: timestamp.toISOString(), className: "text-xs text-white/45", children: timestampFormatter(timestamp) }) : null;
+        return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn(timestampPosition === "side" ? "grid gap-3 md:grid-cols-[11rem_1fr]" : ""), children: [
+          timestampPosition === "side" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-1 text-xs text-white/45", children: timestampNode }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start", styles.gap), "aria-label": timestamp ? `${timestampFormatter(timestamp)} ${String(event.title)}` : void 0, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex w-10 shrink-0 justify-center", children: [
+              lineStyle !== "none" && !isLast ? /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn("absolute left-1/2 top-10 bottom-[-1rem] -translate-x-1/2", getLineClass(lineStyle))
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "relative z-[1] inline-flex shrink-0 items-center justify-center rounded-full ring-1",
+                    styles.icon,
+                    tone.className
+                  ),
+                  style: tone.style,
+                  "aria-hidden": "true",
+                  children: event.icon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("min-w-0 flex-1", styles.textGap, timestampPosition === "inline" ? "space-y-1.5" : "space-y-2"), children: [
+              timestampPosition === "above" ? timestampNode : null,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(timestampPosition === "inline" ? "flex flex-wrap items-start justify-between gap-2" : "space-y-2"), children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium leading-relaxed text-white", children: event.title }),
+                  event.description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-relaxed text-white/60", children: event.description }) : null
+                ] }),
+                timestampPosition === "inline" ? timestampNode : null
+              ] }),
+              event.metadata && Object.keys(event.metadata).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "grid gap-2 rounded-xl border border-white/10 bg-white/[0.03] p-3 sm:grid-cols-2", children: Object.entries(event.metadata).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-[11px] uppercase tracking-[0.14em] text-white/35", children: key }),
+                /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-sm text-white/70", children: value })
+              ] }, key)) }) : null
+            ] })
+          ] })
+        ] }, event.id);
+      }) })
+    ] }, group.key)),
+    showLoadMore ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", size: "sm", onClick: onLoadMore, children: "Load more" }) }) : null
   ] });
 }
 function ActiveFilterPills({
@@ -2761,7 +4404,7 @@ function Sidebar({ children, collapsed = false, onToggle, className }) {
     }
   );
 }
-var maxWidthClass2 = {
+var widthClass = {
   sm: "max-w-2xl",
   md: "max-w-4xl",
   lg: "max-w-5xl",
@@ -2769,309 +4412,247 @@ var maxWidthClass2 = {
   "2xl": "max-w-[92rem]",
   full: "max-w-full"
 };
-function DashboardLayout({ children, navbar, sidebar, className, mainClassName, maxWidth = "lg" }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("min-h-screen bg-surface relative overflow-hidden", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-hidden": "true", className: "pointer-events-none fixed inset-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orb orb-purple w-[400px] h-[400px] -top-[150px] -left-[150px] opacity-15" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orb orb-blue w-[300px] h-[300px] top-[60%] -right-[100px] opacity-10" })
-    ] }),
-    navbar,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex", navbar && "pt-16"), children: [
-      sidebar,
-      /* @__PURE__ */ jsxRuntime.jsx("main", { className: cn("flex-1 min-w-0 py-8 px-6", mainClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto", maxWidthClass2[maxWidth]), children }) })
-    ] })
-  ] });
-}
-var variantBorderColor = {
-  info: "border-blue-500",
-  success: "border-emerald-500",
-  warning: "border-amber-500",
-  error: "border-rose-500"
-};
-var variantIconColor = {
-  info: "text-blue-400",
-  success: "text-emerald-400",
-  warning: "text-amber-400",
-  error: "text-rose-400"
-};
-function InfoIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      "aria-hidden": "true",
-      width: "18",
-      height: "18",
-      viewBox: "0 0 18 18",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 8v5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "5.5", r: "0.875", fill: "currentColor" })
-      ]
-    }
-  );
+function getItemKey(item, index) {
+  if (item.key) return item.key;
+  if (item.href) return item.href;
+  return `dashboard-nav-item-${index}`;
 }
-function SuccessIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      "aria-hidden": "true",
-      width: "18",
-      height: "18",
-      viewBox: "0 0 18 18",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M5.5 9.5l2.5 2.5 4.5-5",
-            stroke: "currentColor",
-            strokeWidth: "1.75",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
-    }
+function getDesktopNavItemClass(item) {
+  return cn(
+    "flex items-center gap-3 rounded-lg px-4 py-2.5 text-sm transition-all duration-200",
+    item.active ? "bg-accent/20 text-accent" : "text-white/60 hover:bg-white/5 hover:text-white",
+    item.disabled && "pointer-events-none opacity-50"
   );
 }
-function WarningIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      "aria-hidden": "true",
-      width: "18",
-      height: "18",
-      viewBox: "0 0 18 18",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M7.634 2.896a1.6 1.6 0 0 1 2.732 0l5.866 10.167A1.6 1.6 0 0 1 14.866 15.5H3.134a1.6 1.6 0 0 1-1.366-2.437L7.634 2.896Z",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 7v4", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "12.5", r: "0.875", fill: "currentColor" })
-      ]
-    }
+function getMobileNavItemClass(item) {
+  return cn(
+    "flex flex-col items-center px-3 py-2 text-xs transition-colors",
+    item.active ? "text-accent" : "text-white/50",
+    item.disabled && "pointer-events-none opacity-50"
   );
 }
-function ErrorIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
+function renderDefaultNavItem(item, context) {
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    item.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: context.type === "mobile" ? "text-lg" : void 0, children: item.icon }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("min-w-0 truncate", context.type === "desktop" && item.badge && "flex-1"), children: item.label }),
+    context.type === "desktop" && item.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: item.badge }) : null
+  ] });
+  if (item.href) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: item.href,
+        target: item.target,
+        rel: item.rel,
+        "aria-current": item.active ? "page" : void 0,
+        className: context.className,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
     {
-      "aria-hidden": "true",
-      width: "18",
-      height: "18",
-      viewBox: "0 0 18 18",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M6.5 6.5l5 5M11.5 6.5l-5 5",
-            stroke: "currentColor",
-            strokeWidth: "1.75",
-            strokeLinecap: "round"
-          }
-        )
-      ]
+      type: "button",
+      onClick: item.onClick,
+      disabled: item.disabled,
+      "aria-current": item.active ? "page" : void 0,
+      className: context.className,
+      children: content
     }
   );
 }
-var variantIcon = {
-  info: InfoIcon,
-  success: SuccessIcon,
-  warning: WarningIcon,
-  error: ErrorIcon
-};
-function Alert({ variant = "info", title, children, onDismiss, className }) {
-  const Icon = variantIcon[variant];
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+function DashboardLayout({
+  children,
+  navbar,
+  sidebar,
+  brand,
+  user,
+  headerActions,
+  navItems,
+  renderNavItem,
+  navigationLabel = "Main navigation",
+  mobileNavigationLabel = "Mobile navigation",
+  shellClassName,
+  shellWidth = "xl",
+  className,
+  mainClassName,
+  maxWidth = "lg"
+}) {
+  const hasGeneratedHeader = !navbar && Boolean(brand || user || headerActions);
+  const hasGeneratedNavigation = !sidebar && Boolean(navItems?.length);
+  const hasGeneratedShell = hasGeneratedHeader || hasGeneratedNavigation;
+  const renderNav = renderNavItem ?? renderDefaultNavItem;
+  const generatedHeader = hasGeneratedHeader ? /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-40 glass border-b border-white/10", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      role: "alert",
       className: cn(
-        "flex items-start gap-3 rounded-xl bg-white/5 ring-1 ring-white/10",
-        "border-l-4 pl-4 pr-3 py-3",
-        variantBorderColor[variant],
-        className
+        "mx-auto flex h-16 items-center justify-between gap-4 px-4 sm:px-6 lg:px-8",
+        widthClass[shellWidth]
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mt-0.5 shrink-0", variantIconColor[variant]), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-white leading-snug mb-0.5", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-white/70 leading-relaxed", children })
-        ] }),
-        onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Dismiss",
-            onClick: onDismiss,
-            className: cn(
-              "shrink-0 flex items-center justify-center h-6 w-6 rounded-lg mt-0.5",
-              "text-white/40 transition-colors hover:bg-white/10 hover:text-white/80",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                "aria-hidden": "true",
-                width: "10",
-                height: "10",
-                viewBox: "0 0 10 10",
-                fill: "none",
-                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 1l8 8M9 1L1 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-function CopyIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      "aria-hidden": "true",
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M3.5 11H3a1.5 1.5 0 0 1-1.5-1.5V3A1.5 1.5 0 0 1 3 1.5h6.5A1.5 1.5 0 0 1 11 3v.5",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round"
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex items-center gap-3", children: brand }),
+        (user || headerActions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+          user,
+          headerActions
+        ] })
       ]
     }
-  );
-}
-function CheckIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
+  ) }) : null;
+  const generatedSidebar = hasGeneratedNavigation ? /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "hidden w-56 shrink-0 md:block", "aria-label": navigationLabel, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "glass sticky top-24 rounded-xl p-3", children: navItems.map((item, index) => {
+    const navContext = {
+      type: "desktop",
+      className: getDesktopNavItemClass(item)
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderNav(item, navContext) }, getItemKey(item, index));
+  }) }) }) : null;
+  const generatedMobileNavigation = hasGeneratedNavigation ? /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
     {
-      "aria-hidden": "true",
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M3 8.5l3.5 3.5 6.5-7",
-          stroke: "currentColor",
-          strokeWidth: "1.75",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
+      className: "glass pb-safe fixed bottom-0 left-0 right-0 z-40 border-t border-white/10 px-2 py-1 md:hidden",
+      "aria-label": mobileNavigationLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-around", children: navItems.map((item, index) => {
+        const navContext = {
+          type: "mobile",
+          className: getMobileNavItemClass(item)
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderNav(item, navContext) }, getItemKey(item, index));
+      }) })
     }
-  );
-}
-function EyeIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      "aria-hidden": "true",
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M1.5 8S3.5 3.5 8 3.5 14.5 8 14.5 8 12.5 12.5 8 12.5 1.5 8 1.5 8Z",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", strokeWidth: "1.5" })
-      ]
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("min-h-screen bg-surface relative overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-hidden": "true", className: "pointer-events-none fixed inset-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orb orb-purple w-[400px] h-[400px] -top-[150px] -left-[150px] opacity-15" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orb orb-blue w-[300px] h-[300px] top-[60%] -right-[100px] opacity-10" })
+    ] }),
+    generatedHeader ?? navbar,
+    hasGeneratedShell ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex gap-6 px-4 py-6 sm:px-6 lg:px-8", widthClass[shellWidth], shellClassName), children: [
+        generatedSidebar ?? sidebar,
+        /* @__PURE__ */ jsxRuntime.jsx("main", { className: cn("flex-1 min-w-0", hasGeneratedNavigation && "pb-20 md:pb-0", mainClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto", widthClass[maxWidth]), children }) })
+      ] }),
+      generatedMobileNavigation
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex", navbar && "pt-16", shellClassName), children: [
+      sidebar,
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: cn("flex-1 min-w-0 py-8 px-6", mainClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto", widthClass[maxWidth]), children }) })
+    ] })
+  ] });
+}
+function CopyIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M3.5 11H3a1.5 1.5 0 0 1-1.5-1.5V3A1.5 1.5 0 0 1 3 1.5h6.5A1.5 1.5 0 0 1 11 3v.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M3 8.5l3.5 3.5 6.5-7",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
-  );
+  ) });
+}
+function EyeIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M1.5 8S3.5 3.5 8 3.5 14.5 8 14.5 8 12.5 12.5 8 12.5 1.5 8 1.5 8Z",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "2", stroke: "currentColor", strokeWidth: "1.5" })
+  ] });
 }
 function EyeOffIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
     {
-      "aria-hidden": "true",
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M2 2l12 12M6.5 6.6A2 2 0 0 0 9.4 9.5M4.3 4.4C2.9 5.4 1.5 8 1.5 8S3.5 12.5 8 12.5c1.4 0 2.6-.4 3.7-1.1M6.7 3.6C7.1 3.5 7.5 3.5 8 3.5c4.5 0 6.5 4.5 6.5 4.5s-.5 1.2-1.5 2.3",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
+      d: "M2 2l12 12M6.5 6.6A2 2 0 0 0 9.4 9.5M4.3 4.4C2.9 5.4 1.5 8 1.5 8S3.5 12.5 8 12.5c1.4 0 2.6-.4 3.7-1.1M6.7 3.6C7.1 3.5 7.5 3.5 8 3.5c4.5 0 6.5 4.5 6.5 4.5s-.5 1.2-1.5 2.3",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
-  );
+  ) });
 }
 var iconButtonBase = cn(
   "flex items-center justify-center h-7 w-7 rounded-lg shrink-0",
   "text-white/40 transition-colors hover:bg-white/10 hover:text-white/80",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
 );
-function CopyField({ value, label, masked = false, className, id: externalId }) {
+function defaultMaskFormatter(rawValue) {
+  return "\u2022".repeat(Math.min(rawValue.length, 24));
+}
+function CopyField({
+  value,
+  label,
+  description,
+  masked = false,
+  emptyText = "\u2014",
+  rightActions,
+  copyOnClick = false,
+  maskFormatter = defaultMaskFormatter,
+  className,
+  id: externalId
+}) {
   const generatedId = React.useId();
   const fieldId = externalId || generatedId;
+  const labelId = label ? `${fieldId}-label` : void 0;
   const { copy, copied } = useClipboard();
   const [revealed, setRevealed] = React.useState(false);
-  const displayValue = masked && !revealed ? "\u2022".repeat(Math.min(value.length, 24)) : value;
+  const hasValue = value.trim().length > 0;
+  const displayValue = !hasValue ? emptyText : masked && !revealed ? maskFormatter(value) : value;
+  const handleCopy = () => {
+    if (!hasValue) return;
+    void copy(value);
+  };
   const field = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
         "flex items-center gap-1 w-full rounded-xl px-3 py-2.5",
         "bg-white/10 ring-1 ring-white/10",
+        copyOnClick && hasValue && "cursor-pointer hover:bg-white/15 focus-within:ring-primary/30",
+        copyOnClick && !hasValue && "cursor-not-allowed opacity-70",
         className
       ),
+      "aria-labelledby": labelId,
+      role: copyOnClick && hasValue ? "button" : void 0,
+      tabIndex: copyOnClick && hasValue ? 0 : void 0,
+      onClick: copyOnClick ? handleCopy : void 0,
+      onKeyDown: copyOnClick && hasValue ? (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          handleCopy();
+        }
+      } : void 0,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            id: fieldId,
-            className: "flex-1 min-w-0 truncate text-sm text-white select-all font-mono",
-            "aria-label": label,
-            children: displayValue
-          }
-        ),
-        masked && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("span", { id: fieldId, className: "flex-1 min-w-0 truncate text-sm text-white select-all font-mono", children: displayValue }),
+        rightActions,
+        masked && hasValue && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
             "aria-label": revealed ? "Hide value" : "Reveal value",
-            onClick: () => setRevealed((v) => !v),
+            onClick: (event) => {
+              event.stopPropagation();
+              setRevealed((currentValue) => !currentValue);
+            },
             className: iconButtonBase,
             children: revealed ? /* @__PURE__ */ jsxRuntime.jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {})
           }
@@ -3081,7 +4662,11 @@ function CopyField({ value, label, masked = false, className, id: externalId })
           {
             type: "button",
             "aria-label": copied ? "Copied!" : "Copy to clipboard",
-            onClick: () => copy(value),
+            onClick: (event) => {
+              event.stopPropagation();
+              handleCopy();
+            },
+            disabled: !hasValue,
             className: cn(iconButtonBase, copied && "text-emerald-400 hover:text-emerald-400"),
             children: copied ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, {})
           }
@@ -3091,8 +4676,9 @@ function CopyField({ value, label, masked = false, className, id: externalId })
   );
   if (!label) return field;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: fieldId, className: "block text-sm text-white/70 mb-1.5", children: label }),
-    field
+    /* @__PURE__ */ jsxRuntime.jsx("div", { id: labelId, className: "block text-sm text-white/70 mb-1.5", children: label }),
+    field,
+    description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5 text-xs text-white/50", children: description }) : null
   ] });
 }
 var ProgressButton = React.forwardRef(
@@ -3159,7 +4745,7 @@ var variantIconColor2 = {
   warning: "text-amber-400",
   info: "text-primary"
 };
-var positionClass = {
+var positionClass2 = {
   "top-right": "top-4 right-4 items-end",
   "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
   "bottom-right": "bottom-4 right-4 items-end",
@@ -3306,7 +4892,7 @@ function ToastProvider({ children, position = "top-right", maxToasts = 5 }) {
       "div",
       {
         "aria-label": "Notifications",
-        className: cn("fixed z-[9999] flex flex-col gap-3 pointer-events-none", positionClass[position]),
+        className: cn("fixed z-[9999] flex flex-col gap-3 pointer-events-none", positionClass2[position]),
         children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ToastCard, { toast: t, onDismiss: dismiss }) }, t.id))
       }
     ),
@@ -3436,7 +5022,7 @@ function MutationOverlay({
     }
   );
 }
-var sizeClass6 = {
+var sizeClass7 = {
   sm: "w-8 h-8",
   md: "w-10 h-10",
   lg: "w-12 h-12"
@@ -3454,503 +5040,345 @@ var badgeSizeClass = {
 var DefaultBellIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className,
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
-    ]
-  }
-);
-var NotificationBell = React.forwardRef(
-  function NotificationBell2({ icon, count, maxCount = 99, size = "md", ping, className, disabled, ...props }, ref) {
-    const displayCount = count && count > maxCount ? `${maxCount}+` : count;
-    const hasCount = count !== void 0 && count > 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        ref,
-        type: "button",
-        ...props,
-        disabled,
-        "aria-label": props["aria-label"] || `Notifications${hasCount ? ` (${count})` : ""}`,
-        className: cn(
-          "relative inline-flex items-center justify-center rounded-xl text-white/70 transition-colors hover:text-white hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent disabled:opacity-60 disabled:pointer-events-none",
-          sizeClass6[size],
-          className
-        ),
-        children: [
-          icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultBellIcon, { className: iconSizeClass[size] }),
-          hasCount && /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: cn(
-                "absolute top-0 right-0 flex items-center justify-center rounded-full bg-rose-500 text-white font-semibold leading-none",
-                badgeSizeClass[size]
-              ),
-              children: [
-                ping && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 rounded-full bg-rose-500 animate-ping opacity-75" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative", children: displayCount })
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-var sizeClass7 = {
-  xs: "text-sm font-semibold",
-  sm: "text-base font-semibold",
-  md: "text-lg font-bold",
-  lg: "text-xl font-bold",
-  xl: "text-2xl font-bold tracking-tight",
-  "2xl": "text-3xl font-bold tracking-tight sm:text-4xl"
-};
-var levelToSize = {
-  1: "2xl",
-  2: "xl",
-  3: "lg",
-  4: "md",
-  5: "sm",
-  6: "xs"
-};
-var colorClass = {
-  default: "text-white",
-  muted: "text-white/70",
-  gradient: "text-gradient"
-};
-var Heading = React.forwardRef(function Heading2({ level = 2, size, color = "default", className, ...props }, ref) {
-  const Tag = `h${level}`;
-  const effectiveSize = size ?? levelToSize[level];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tag,
-    {
-      ref,
-      ...props,
-      className: cn(sizeClass7[effectiveSize], colorClass[color], className)
-    }
-  );
-});
-var sizeMap2 = {
-  xs: "text-xs",
-  sm: "text-sm",
-  md: "text-base",
-  lg: "text-lg"
-};
-var colorMap = {
-  default: "text-white/90",
-  muted: "text-white/70",
-  dimmed: "text-white/50",
-  primary: "text-primary-light",
-  success: "text-emerald-400",
-  warning: "text-amber-400",
-  danger: "text-rose-400"
-};
-var weightMap = {
-  normal: "font-normal",
-  medium: "font-medium",
-  semibold: "font-semibold",
-  bold: "font-bold"
-};
-var Text = React.forwardRef(function Text2({ size = "md", color = "default", weight = "normal", inline = false, truncate = false, className, ...props }, ref) {
-  const Tag = inline ? "span" : "p";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tag,
-    {
-      ref,
-      ...props,
-      className: cn(
-        sizeMap2[size],
-        colorMap[color],
-        weightMap[weight],
-        truncate && "truncate",
-        className
-      )
-    }
-  );
-});
-var gapClass = {
-  0: "gap-0",
-  1: "gap-1",
-  2: "gap-2",
-  3: "gap-3",
-  4: "gap-4",
-  5: "gap-5",
-  6: "gap-6",
-  8: "gap-8",
-  10: "gap-10",
-  12: "gap-12"
-};
-var alignClass2 = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch",
-  baseline: "items-baseline"
-};
-var justifyClass = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around",
-  evenly: "justify-evenly"
-};
-var Stack = React.forwardRef(function Stack2({ children, direction = "vertical", gap = 4, align = "stretch", justify = "start", wrap = false, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      ...props,
-      className: cn(
-        "flex",
-        direction === "vertical" ? "flex-col" : "flex-row",
-        gapClass[gap],
-        alignClass2[align],
-        justifyClass[justify],
-        wrap && "flex-wrap",
-        className
-      ),
-      children
-    }
-  );
-});
-var ScrollArea = React.forwardRef(function ScrollArea2({ children, maxHeight, hideScrollbar = false, orientation = "vertical", className, style, ...props }, ref) {
-  const overflowClass = {
-    vertical: "overflow-y-auto overflow-x-hidden",
-    horizontal: "overflow-x-auto overflow-y-hidden",
-    both: "overflow-auto"
-  }[orientation];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      ...props,
-      tabIndex: 0,
-      className: cn(
-        overflowClass,
-        // Custom dark scrollbar styling
-        "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5",
-        "[&::-webkit-scrollbar-track]:bg-transparent",
-        "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-white/15 hover:[&::-webkit-scrollbar-thumb]:bg-white/25",
-        hideScrollbar && "no-scrollbar",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/30 focus-visible:ring-inset",
-        className
-      ),
-      style: {
-        maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
-        ...style
-      },
-      children
-    }
-  );
-});
-var defaultSeparator = /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    className: "w-3.5 h-3.5 text-white/30 flex-shrink-0",
-    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
-    strokeWidth: "2",
+    strokeWidth: 2,
     strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4l4 4-4 4" })
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
+    ]
   }
 );
-function Breadcrumbs({ items, separator = defaultSeparator, className }) {
-  if (items.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className: cn("flex items-center", className), children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-1.5 text-sm", children: items.map((item, index) => {
-    const isLast = index === items.length - 1;
-    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-1.5", children: [
-      index > 0 && separator,
-      isLast ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white font-medium", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsxRuntime.jsx(
-        "a",
-        {
-          href: item.href,
-          onClick: item.onClick,
-          className: "text-white/50 hover:text-white/80 transition-colors",
-          children: item.label
-        }
-      ) : item.onClick ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: item.onClick,
-          className: "text-white/50 hover:text-white/80 transition-colors",
-          children: item.label
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/50", children: item.label })
-    ] }, index);
-  }) }) });
-}
-function Popover({
-  content,
-  children,
-  placement = "bottom",
-  closeOnClickOutside = true,
-  closeOnEsc = true,
-  open: controlledOpen,
-  onOpenChange,
-  offset = 8,
-  className
-}) {
-  const popoverId = React.useId();
-  const anchorRef = React.useRef(null);
-  const popoverRef = React.useRef(null);
-  const [internalOpen, setInternalOpen] = React.useState(false);
-  const [pos, setPos] = React.useState(null);
-  const isControlled = controlledOpen !== void 0;
-  const isOpen = isControlled ? controlledOpen : internalOpen;
-  const setOpen = React.useCallback(
-    (value) => {
-      if (!isControlled) setInternalOpen(value);
-      onOpenChange?.(value);
-    },
-    [isControlled, onOpenChange]
-  );
-  const toggle = React.useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);
-  const close = React.useCallback(() => setOpen(false), [setOpen]);
-  const updatePosition = React.useCallback(() => {
-    const el = anchorRef.current;
-    if (!el) return;
-    const r = el.getBoundingClientRect();
-    let left;
-    let top;
-    let effPlacement = placement;
-    if (placement === "bottom" || placement === "top") {
-      left = r.left + r.width / 2;
-      if (placement === "bottom") {
-        top = r.bottom + offset;
-        if (top + 200 > window.innerHeight && r.top - offset > 200) {
-          effPlacement = "top";
-          top = r.top - offset;
-        }
-      } else {
-        top = r.top - offset;
-        if (top < 8) {
-          effPlacement = "bottom";
-          top = r.bottom + offset;
-        }
-      }
-    } else {
-      top = r.top + r.height / 2;
-      if (placement === "right") {
-        left = r.right + offset;
-      } else {
-        left = r.left - offset;
-      }
-    }
-    setPos({ left: Math.round(left), top: Math.round(top), placement: effPlacement });
-  }, [placement, offset]);
-  React.useEffect(() => {
-    if (!isOpen) return;
-    updatePosition();
-    window.addEventListener("scroll", updatePosition, true);
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      window.removeEventListener("scroll", updatePosition, true);
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [isOpen, updatePosition]);
-  React.useEffect(() => {
-    if (!isOpen || !closeOnClickOutside) return;
-    const handleClick = (e) => {
-      const target = e.target;
-      if (anchorRef.current?.contains(target) || popoverRef.current?.contains(target)) {
-        return;
-      }
-      close();
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [isOpen, closeOnClickOutside, close]);
-  React.useEffect(() => {
-    if (!isOpen || !closeOnEsc) return;
-    const handleKey = (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        close();
-        anchorRef.current?.focus();
+var NotificationBell = React.forwardRef(
+  function NotificationBell2({ icon, count, maxCount = 99, size = "md", ping, className, disabled, ...props }, ref) {
+    const displayCount = count && count > maxCount ? `${maxCount}+` : count;
+    const hasCount = count !== void 0 && count > 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        ...props,
+        disabled,
+        "aria-label": props["aria-label"] || `Notifications${hasCount ? ` (${count})` : ""}`,
+        className: cn(
+          "relative inline-flex items-center justify-center rounded-xl text-white/70 transition-colors hover:text-white hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent disabled:opacity-60 disabled:pointer-events-none",
+          sizeClass7[size],
+          className
+        ),
+        children: [
+          icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultBellIcon, { className: iconSizeClass[size] }),
+          hasCount && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn(
+                "absolute top-0 right-0 flex items-center justify-center rounded-full bg-rose-500 text-white font-semibold leading-none",
+                badgeSizeClass[size]
+              ),
+              children: [
+                ping && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 rounded-full bg-rose-500 animate-ping opacity-75" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative", children: displayCount })
+              ]
+            }
+          )
+        ]
       }
-    };
-    document.addEventListener("keydown", handleKey);
-    return () => document.removeEventListener("keydown", handleKey);
-  }, [isOpen, closeOnEsc, close]);
-  if (!React.isValidElement(children)) return children;
-  const child = React.cloneElement(children, {
-    ref: (node) => {
-      anchorRef.current = node;
-      const childProps = children.props;
-      const prevRef = childProps.ref;
-      if (typeof prevRef === "function") prevRef(node);
-      else if (prevRef && typeof prevRef === "object") prevRef.current = node;
-    },
-    onClick: (e) => {
-      const childProps = children.props;
-      if (typeof childProps.onClick === "function") childProps.onClick(e);
-      toggle();
-    },
-    "aria-expanded": isOpen,
-    "aria-haspopup": "dialog",
-    "aria-controls": isOpen ? popoverId : void 0
-  });
-  const getTransform = () => {
-    if (!pos) return "translate(-9999px, -9999px)";
-    switch (pos.placement) {
-      case "top":
-        return "translate(-50%, -100%)";
-      case "bottom":
-        return "translate(-50%, 0%)";
-      case "left":
-        return "translate(-100%, -50%)";
-      case "right":
-        return "translate(0%, -50%)";
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    child,
-    isOpen && typeof document !== "undefined" ? reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref: popoverRef,
-          id: popoverId,
-          role: "dialog",
-          className: cn(
-            "fixed z-[9999] rounded-xl shadow-xl ring-1 ring-white/10 bg-surface-50 backdrop-blur-md p-4",
-            className
-          ),
-          style: {
-            left: pos?.left ?? 0,
-            top: pos?.top ?? 0,
-            transform: getTransform()
-          },
-          children: content
-        }
-      ),
-      document.body
-    ) : null
-  ] });
-}
+    );
+  }
+);
 var sizeClass8 = {
-  left: { sm: "w-64", md: "w-80", lg: "w-96", full: "w-screen" },
-  right: { sm: "w-64", md: "w-80", lg: "w-96", full: "w-screen" },
-  bottom: { sm: "h-1/4", md: "h-1/3", lg: "h-1/2", full: "h-screen" }
+  xs: "text-sm font-semibold",
+  sm: "text-base font-semibold",
+  md: "text-lg font-bold",
+  lg: "text-xl font-bold",
+  xl: "text-2xl font-bold tracking-tight",
+  "2xl": "text-3xl font-bold tracking-tight sm:text-4xl"
+};
+var levelToSize = {
+  1: "2xl",
+  2: "xl",
+  3: "lg",
+  4: "md",
+  5: "sm",
+  6: "xs"
+};
+var colorClass = {
+  default: "text-white",
+  muted: "text-white/70",
+  gradient: "text-gradient"
+};
+var Heading = React.forwardRef(function Heading2({ level = 2, size, color = "default", className, ...props }, ref) {
+  const Tag = `h${level}`;
+  const effectiveSize = size ?? levelToSize[level];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tag,
+    {
+      ref,
+      ...props,
+      className: cn(sizeClass8[effectiveSize], colorClass[color], className)
+    }
+  );
+});
+var sizeMap2 = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+};
+var colorMap = {
+  default: "text-white/90",
+  muted: "text-white/70",
+  dimmed: "text-white/50",
+  primary: "text-primary-light",
+  success: "text-emerald-400",
+  warning: "text-amber-400",
+  danger: "text-rose-400"
 };
-var positionClass2 = {
-  left: "inset-y-0 left-0",
-  right: "inset-y-0 right-0",
-  bottom: "inset-x-0 bottom-0"
+var weightMap = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
 };
-var slideIn = {
-  left: "translate-x-0",
-  right: "translate-x-0",
-  bottom: "translate-y-0"
+var Text = React.forwardRef(function Text2({ size = "md", color = "default", weight = "normal", inline = false, truncate = false, className, ...props }, ref) {
+  const Tag = inline ? "span" : "p";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tag,
+    {
+      ref,
+      ...props,
+      className: cn(
+        sizeMap2[size],
+        colorMap[color],
+        weightMap[weight],
+        truncate && "truncate",
+        className
+      )
+    }
+  );
+});
+var gapClass = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  5: "gap-5",
+  6: "gap-6",
+  8: "gap-8",
+  10: "gap-10",
+  12: "gap-12"
 };
-var slideOut = {
-  left: "-translate-x-full",
-  right: "translate-x-full",
-  bottom: "translate-y-full"
+var alignClass2 = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
 };
-function Drawer({
-  isOpen,
-  onClose,
-  children,
-  side = "right",
-  size = "md",
-  ariaLabel,
-  closeOnBackdrop = true,
-  closeOnEsc = true,
+var justifyClass = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
+};
+var Stack = React.forwardRef(function Stack2({ children, direction = "vertical", gap = 4, align = "stretch", justify = "start", wrap = false, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      ...props,
+      className: cn(
+        "flex",
+        direction === "vertical" ? "flex-col" : "flex-row",
+        gapClass[gap],
+        alignClass2[align],
+        justifyClass[justify],
+        wrap && "flex-wrap",
+        className
+      ),
+      children
+    }
+  );
+});
+var ScrollArea = React.forwardRef(function ScrollArea2({ children, maxHeight, hideScrollbar = false, orientation = "vertical", className, style, ...props }, ref) {
+  const overflowClass = {
+    vertical: "overflow-y-auto overflow-x-hidden",
+    horizontal: "overflow-x-auto overflow-y-hidden",
+    both: "overflow-auto"
+  }[orientation];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      ...props,
+      tabIndex: 0,
+      className: cn(
+        overflowClass,
+        // Custom dark scrollbar styling
+        "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5",
+        "[&::-webkit-scrollbar-track]:bg-transparent",
+        "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-white/15 hover:[&::-webkit-scrollbar-thumb]:bg-white/25",
+        hideScrollbar && "no-scrollbar",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/30 focus-visible:ring-inset",
+        className
+      ),
+      style: {
+        maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+        ...style
+      },
+      children
+    }
+  );
+});
+var defaultSeparator = /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: "w-3.5 h-3.5 text-white/30 flex-shrink-0",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4l4 4-4 4" })
+  }
+);
+function DotsIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { "aria-hidden": "true", className: "h-4 w-4", viewBox: "0 0 16 16", fill: "currentColor", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "3", cy: "8", r: "1.25" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "1.25" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "13", cy: "8", r: "1.25" })
+  ] });
+}
+function renderItemContent(item) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [
+    item.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-white/45", children: item.icon }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
+  ] });
+}
+function getVisibleItems(items, maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1) {
+  if (!maxItems || items.length <= maxItems) {
+    return items.map((item, index) => ({ type: "item", item, originalIndex: index }));
+  }
+  const before = Math.max(1, itemsBeforeCollapse);
+  const after = Math.max(1, itemsAfterCollapse);
+  if (before + after >= items.length) {
+    return items.map((item, index) => ({ type: "item", item, originalIndex: index }));
+  }
+  const collapsedItems = items.slice(before, items.length - after);
+  const startItems = items.slice(0, before).map((item, index) => ({ type: "item", item, originalIndex: index }));
+  const endItems = items.slice(items.length - after).map((item, index) => ({
+    type: "item",
+    item,
+    originalIndex: items.length - after + index
+  }));
+  return [
+    ...startItems,
+    { type: "collapse", items: collapsedItems },
+    ...endItems
+  ];
+}
+function Breadcrumbs({
+  items,
+  separator = defaultSeparator,
+  maxItems,
+  itemsBeforeCollapse = 1,
+  itemsAfterCollapse = 1,
+  renderLink,
   className
 }) {
-  const panelRef = React.useRef(null);
-  const lastActiveRef = React.useRef(null);
-  React.useEffect(() => {
-    if (!isOpen) return;
-    lastActiveRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    const raf = requestAnimationFrame(() => {
-      const el = panelRef.current;
-      if (!el) return;
-      const focusables = getFocusableElements(el);
-      focusSafely(focusables[0] ?? el);
-    });
-    return () => {
-      cancelAnimationFrame(raf);
-      const lastActive = lastActiveRef.current;
-      lastActiveRef.current = null;
-      if (lastActive?.isConnected) focusSafely(lastActive);
-    };
-  }, [isOpen]);
-  useScrollLock(isOpen);
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50", role: "presentation", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity duration-200",
-        "aria-hidden": "true",
-        onClick: closeOnBackdrop ? onClose : void 0
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: panelRef,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": ariaLabel,
-        tabIndex: -1,
-        className: cn(
-          "fixed flex flex-col bg-surface-50 shadow-2xl ring-1 ring-white/10 transition-transform duration-300 ease-out focus:outline-none",
-          positionClass2[side],
-          sizeClass8[side][size],
-          isOpen ? slideIn[side] : slideOut[side],
-          className
-        ),
-        onKeyDownCapture: (e) => {
-          if (closeOnEsc && e.key === "Escape") {
-            e.preventDefault();
-            e.stopPropagation();
-            onClose();
-            return;
-          }
-          if (e.key !== "Tab") return;
-          const el = panelRef.current;
-          if (!el) return;
-          const focusables = getFocusableElements(el);
-          if (focusables.length === 0) {
-            e.preventDefault();
-            focusSafely(el);
-            return;
-          }
-          const active = document.activeElement;
-          const first = focusables[0];
-          const last = focusables[focusables.length - 1];
-          if (e.shiftKey) {
-            if (active === first) {
-              e.preventDefault();
-              focusSafely(last);
-            }
-          } else {
-            if (active === last) {
-              e.preventDefault();
-              focusSafely(first);
-            }
+  if (items.length === 0) return null;
+  const visibleItems = getVisibleItems(items, maxItems, itemsBeforeCollapse, itemsAfterCollapse);
+  const lastItemIndex = items.length - 1;
+  const renderLinkNode = (item, classNameValue) => {
+    const content = renderItemContent(item);
+    if (!item.href) {
+      return content;
+    }
+    if (renderLink) {
+      return renderLink({
+        href: item.href,
+        onClick: item.onClick,
+        className: classNameValue,
+        children: content,
+        item
+      });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, onClick: item.onClick, className: classNameValue, children: content });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className: cn("flex items-center", className), children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex min-w-0 items-center gap-1.5 text-sm", children: visibleItems.map((entry, index) => {
+    if (entry.type === "collapse") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+        index > 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "flex items-center", children: separator }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Popover,
+          {
+            placement: "bottom",
+            className: "min-w-[12rem] p-2",
+            content: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: entry.items.map((item2, hiddenIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: item2.href ? renderLink ? renderLink({
+              href: item2.href,
+              onClick: item2.onClick,
+              className: "flex w-full items-center rounded-lg px-3 py-2 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white",
+              children: renderItemContent(item2),
+              item: item2
+            }) : /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: item2.href,
+                onClick: item2.onClick,
+                className: "flex w-full items-center rounded-lg px-3 py-2 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white",
+                children: renderItemContent(item2)
+              }
+            ) : item2.onClick ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: item2.onClick,
+                className: "flex w-full items-center rounded-lg px-3 py-2 text-left text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white",
+                children: renderItemContent(item2)
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center rounded-lg px-3 py-2 text-sm text-white/55", children: renderItemContent(item2) }) }, `${hiddenIndex}-${String(item2.href ?? item2.label)}`)) }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Show hidden breadcrumbs",
+                className: "inline-flex h-8 w-8 items-center justify-center rounded-lg text-white/45 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+                children: /* @__PURE__ */ jsxRuntime.jsx(DotsIcon, {})
+              }
+            )
           }
-        },
-        children
-      }
-    )
-  ] });
+        ) })
+      ] }, `collapse-${index}`);
+    }
+    const isLast = entry.originalIndex === lastItemIndex;
+    const item = entry.item;
+    const interactiveClassName = "text-white/50 hover:text-white/80 transition-colors";
+    return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+      index > 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "flex items-center", children: separator }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("li", { className: "flex min-w-0 items-center", children: isLast ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-white font-medium", "aria-current": "page", children: [
+        item.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-white/55", children: item.icon }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
+      ] }) : item.href ? renderLinkNode(item, interactiveClassName) : item.onClick ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: item.onClick,
+          className: cn("min-w-0", interactiveClassName),
+          children: renderItemContent(item)
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/50", children: renderItemContent(item) }) })
+    ] }, `${entry.originalIndex}-${String(item.href ?? item.label)}`);
+  }) }) });
 }
 var defaultFilter = (opt, q) => opt.label.toLowerCase().includes(q.toLowerCase());
 var Combobox = React.forwardRef(function Combobox2({
@@ -4273,6 +5701,12 @@ function VisuallyHidden({ children, as: Tag = "span", style, ...props }) {
     }
   );
 }
+function didResetKeysChange(previous, next) {
+  if (!previous && !next) return false;
+  if (!previous || !next) return true;
+  if (previous.length !== next.length) return true;
+  return previous.some((value, index) => !Object.is(value, next[index]));
+}
 var ErrorBoundary = class extends React.Component {
   constructor() {
     super(...arguments);
@@ -4287,6 +5721,12 @@ var ErrorBoundary = class extends React.Component {
   componentDidCatch(error, errorInfo) {
     this.props.onError?.(error, errorInfo);
   }
+  componentDidUpdate(prevProps) {
+    if (!this.state.error) return;
+    if (!Object.is(prevProps.resetKey, this.props.resetKey) || didResetKeysChange(prevProps.resetKeys, this.props.resetKeys)) {
+      this.reset();
+    }
+  }
   render() {
     const { error } = this.state;
     if (!error) return this.props.children;
@@ -4297,19 +5737,40 @@ var ErrorBoundary = class extends React.Component {
     if (fallback !== void 0) {
       return fallback;
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: cn("glass rounded-xl p-6 text-center"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-white mb-2", children: "Something went wrong" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/60 mb-4", children: error.message }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: this.reset,
-          className: "inline-flex items-center justify-center gap-2 rounded-xl font-semibold leading-none px-3.5 py-2.5 text-sm bg-gradient-to-r from-violet-600 to-purple-600 text-white shadow-glow hover:shadow-glow-lg hover:scale-[1.02] transition-[transform,background-color,box-shadow,opacity] active:translate-y-[0.5px]",
-          children: "Try again"
-        }
-      )
-    ] });
+    const {
+      actionLabel = "Try again",
+      description,
+      fullScreen = false,
+      onAction,
+      title = "Something went wrong"
+    } = this.props;
+    const descriptionContent = typeof description === "function" ? description(error) : description ?? error.message;
+    const handleAction = () => {
+      if (onAction) {
+        onAction({ error, reset: this.reset });
+        return;
+      }
+      this.reset();
+    };
+    const content = /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "alert",
+        className: cn(
+          "glass rounded-xl p-6 text-center",
+          fullScreen && "w-full max-w-md rounded-2xl p-8 shadow-surface"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-white mb-2", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/60 mb-4", children: descriptionContent }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "primary", onClick: handleAction, children: actionLabel })
+        ]
+      }
+    );
+    if (fullScreen) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-screen bg-surface flex items-center justify-center p-6", children: content });
+    }
+    return content;
   }
 };
 function LoadingScreen({ message, size = "lg", className }) {
@@ -4344,6 +5805,8 @@ exports.ConfirmDialog = ConfirmDialog;
 exports.CooldownRing = CooldownRing;
 exports.CopyField = CopyField;
 exports.DashboardLayout = DashboardLayout;
+exports.DataTable = DataTable;
+exports.DateRangePicker = DateRangePicker;
 exports.Divider = Divider;
 exports.DotIndicator = DotIndicator;
 exports.Drawer = Drawer;
@@ -4397,6 +5860,7 @@ exports.Tabs = Tabs;
 exports.TagInput = TagInput;
 exports.Text = Text;
 exports.Textarea = Textarea;
+exports.Timeline = Timeline;
 exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;