@memelabui/ui 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -1,9 +1,13 @@
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
 // src/utils/cn.ts
 function toClassName(out, value) {
   if (!value) return;
@@ -59,16 +63,16 @@ function focusSafely(el) {
   }
 }
 function useClipboard(timeout = 2e3) {
-  const [copied, setCopied] = react.useState(false);
-  const timerRef = react.useRef(null);
-  react.useEffect(() => {
+  const [copied, setCopied] = React.useState(false);
+  const timerRef = React.useRef(null);
+  React.useEffect(() => {
     return () => {
       if (timerRef.current !== null) {
         clearTimeout(timerRef.current);
       }
     };
   }, []);
-  const copy = react.useCallback(
+  const copy = React.useCallback(
     async (text) => {
       try {
         await navigator.clipboard.writeText(text);
@@ -89,18 +93,18 @@ function useClipboard(timeout = 2e3) {
   return { copy, copied };
 }
 function useDisclosure(defaultOpen = false) {
-  const [isOpen, setIsOpen] = react.useState(defaultOpen);
-  const open = react.useCallback(() => setIsOpen(true), []);
-  const close = react.useCallback(() => setIsOpen(false), []);
-  const toggle = react.useCallback(() => setIsOpen((prev) => !prev), []);
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+  const open = React.useCallback(() => setIsOpen(true), []);
+  const close = React.useCallback(() => setIsOpen(false), []);
+  const toggle = React.useCallback(() => setIsOpen((prev) => !prev), []);
   return { isOpen, open, close, toggle };
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = react.useState(() => {
+  const [matches, setMatches] = React.useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   });
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (typeof window === "undefined") return;
     const mediaQueryList = window.matchMedia(query);
     setMatches(mediaQueryList.matches);
@@ -115,8 +119,8 @@ function useMediaQuery(query) {
   return matches;
 }
 function useDebounce(value, delayMs = 300) {
-  const [debouncedValue, setDebouncedValue] = react.useState(value);
-  react.useEffect(() => {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+  React.useEffect(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delayMs);
@@ -146,8 +150,56 @@ var colors = {
   warning: "#f59e0b",
   danger: "#f43f5e"
 };
-var base = "inline-flex items-center justify-center gap-2 rounded-xl font-semibold leading-none transition-[transform,background-color,box-shadow,opacity] select-none [-webkit-tap-highlight-color:transparent] active:translate-y-[0.5px] disabled:opacity-60 disabled:pointer-events-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
 var sizeClass = {
+  sm: "w-8 h-8 text-xs",
+  md: "w-10 h-10 text-sm",
+  lg: "w-12 h-12 text-base",
+  xl: "w-16 h-16 text-lg"
+};
+function getInitials(name) {
+  if (!name) return "";
+  const parts = name.trim().split(/\s+/);
+  const first = parts[0]?.[0] ?? "";
+  const second = parts[1]?.[0] ?? "";
+  return (first + second).toUpperCase();
+}
+var Avatar = React.forwardRef(function Avatar2({ src, alt, name, size = "md", className }, ref) {
+  const [imgError, setImgError] = React.useState(false);
+  const showFallback = !src || imgError;
+  const initials = getInitials(name);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden ring-1 ring-white/10",
+        sizeClass[size],
+        className
+      ),
+      children: [
+        !showFallback && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src,
+            alt: alt ?? name ?? "",
+            onError: () => setImgError(true),
+            className: "w-full h-full object-cover"
+          }
+        ),
+        showFallback && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-label": name,
+            className: "w-full h-full inline-flex items-center justify-center bg-gradient-to-br from-primary to-accent font-semibold text-white leading-none select-none",
+            children: initials
+          }
+        )
+      ]
+    }
+  );
+});
+var base = "inline-flex items-center justify-center gap-2 rounded-xl font-semibold leading-none transition-[transform,background-color,box-shadow,opacity] select-none [-webkit-tap-highlight-color:transparent] active:translate-y-[0.5px] disabled:opacity-60 disabled:pointer-events-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
+var sizeClass2 = {
   sm: "px-3 py-2 text-sm",
   md: "px-3.5 py-2.5 text-sm",
   lg: "px-4 py-3 text-base"
@@ -160,7 +212,7 @@ var variantClass = {
   secondary: "text-white bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:ring-white/20 backdrop-blur-sm",
   ghost: "text-white/70 hover:text-white hover:bg-white/5"
 };
-var Button = react.forwardRef(function Button2({ variant = "secondary", size = "md", leftIcon, rightIcon, loading, className, disabled, children, type, ...props }, ref) {
+var Button = React.forwardRef(function Button2({ variant = "secondary", size = "md", leftIcon, rightIcon, loading, className, disabled, children, type, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -169,7 +221,7 @@ var Button = react.forwardRef(function Button2({ variant = "secondary", size = "
       ...props,
       disabled: disabled || loading,
       ...loading ? { "aria-busy": true } : {},
-      className: cn(base, sizeClass[size], variantClass[variant], className),
+      className: cn(base, sizeClass2[size], variantClass[variant], className),
       children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
         children
@@ -182,7 +234,7 @@ var Button = react.forwardRef(function Button2({ variant = "secondary", size = "
   );
 });
 var base2 = "inline-flex items-center justify-center rounded-xl font-semibold leading-none transition-[transform,background-color,box-shadow,opacity] select-none [-webkit-tap-highlight-color:transparent] active:translate-y-[0.5px] disabled:opacity-60 disabled:pointer-events-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
-var sizeClass2 = {
+var sizeClass3 = {
   sm: "p-1.5 w-7 h-7",
   md: "p-2 w-9 h-9",
   lg: "p-2.5 w-11 h-11"
@@ -195,7 +247,7 @@ var variantClass2 = {
   secondary: "text-white bg-white/10 shadow-sm ring-1 ring-white/10",
   ghost: "text-white hover:bg-white/10"
 };
-var IconButton = react.forwardRef(function IconButton2({ icon, variant = "ghost", size = "md", className, disabled, type, ...props }, ref) {
+var IconButton = React.forwardRef(function IconButton2({ icon, variant = "ghost", size = "md", className, disabled, type, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -203,14 +255,14 @@ var IconButton = react.forwardRef(function IconButton2({ icon, variant = "ghost"
       type: type === "submit" ? "submit" : type === "reset" ? "reset" : "button",
       ...props,
       disabled,
-      className: cn(base2, sizeClass2[size], variantClass2[variant], className),
+      className: cn(base2, sizeClass3[size], variantClass2[variant], className),
       children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: icon })
     }
   );
 });
 var inputBase = "w-full rounded-xl px-3 py-2.5 text-sm bg-white/10 text-white shadow-sm outline-none placeholder-white/30 focus-visible:ring-2 focus-visible:ring-primary/40 transition-shadow";
-var Input = react.forwardRef(function Input2({ hasError, label, error, helperText, className, id: externalId, ...props }, ref) {
-  const generatedId = react.useId();
+var Input = React.forwardRef(function Input2({ hasError, label, error, helperText, className, id: externalId, ...props }, ref) {
+  const generatedId = React.useId();
   const inputId = externalId || generatedId;
   const showError = hasError || !!error;
   const errorId = error ? `${inputId}-error` : void 0;
@@ -235,8 +287,8 @@ var Input = react.forwardRef(function Input2({ hasError, label, error, helperTex
   ] });
 });
 var inputBase2 = "w-full rounded-xl pl-10 pr-3 py-2.5 text-sm bg-white/10 text-white shadow-sm outline-none placeholder-white/30 focus-visible:ring-2 focus-visible:ring-primary/40 transition-shadow";
-var SearchInput = react.forwardRef(function SearchInput2({ label, onClear, className, id: externalId, placeholder = "Search...", value, ...props }, ref) {
-  const generatedId = react.useId();
+var SearchInput = React.forwardRef(function SearchInput2({ label, onClear, className, id: externalId, placeholder = "Search...", value, ...props }, ref) {
+  const generatedId = React.useId();
   const inputId = externalId || generatedId;
   const hasValue = value !== void 0 && value !== "";
   const wrapper = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -307,8 +359,8 @@ var SearchInput = react.forwardRef(function SearchInput2({ label, onClear, class
   ] });
 });
 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();
+var Select = React.forwardRef(function Select2({ hasError, label, error, helperText, className, id: externalId, children, ...props }, ref) {
+  const generatedId = React.useId();
   const selectId = externalId || generatedId;
   const showError = hasError || !!error;
   const errorId = error ? `${selectId}-error` : void 0;
@@ -334,8 +386,8 @@ var Select = react.forwardRef(function Select2({ hasError, label, error, helperT
   ] });
 });
 var textareaBase = "w-full rounded-xl px-3 py-2.5 text-sm bg-white/10 text-white shadow-sm outline-none placeholder-white/30 focus-visible:ring-2 focus-visible:ring-primary/40 transition-shadow resize-y";
-var Textarea = react.forwardRef(function Textarea2({ hasError, label, error, helperText, className, id: externalId, ...props }, ref) {
-  const generatedId = react.useId();
+var Textarea = React.forwardRef(function Textarea2({ hasError, label, error, helperText, className, id: externalId, ...props }, ref) {
+  const generatedId = React.useId();
   const textareaId = externalId || generatedId;
   const showError = hasError || !!error;
   const errorId = error ? `${textareaId}-error` : void 0;
@@ -359,8 +411,128 @@ var Textarea = react.forwardRef(function Textarea2({ hasError, label, error, hel
     helperText && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: "text-white/40 text-xs mt-1", children: helperText })
   ] });
 });
+function TagInput({
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+  label,
+  error,
+  maxTags,
+  className,
+  id: externalId
+}) {
+  const generatedId = React.useId();
+  const inputId = externalId ?? generatedId;
+  const errorId = error ? `${inputId}-error` : void 0;
+  const inputRef = React.useRef(null);
+  const atMax = maxTags !== void 0 && value.length >= maxTags;
+  function addTag(raw) {
+    const tag = raw.trim();
+    if (!tag || value.includes(tag) || atMax) return;
+    onChange([...value, tag]);
+  }
+  function removeTag(index) {
+    onChange(value.filter((_, i) => i !== index));
+  }
+  function handleKeyDown(e) {
+    const input = inputRef.current;
+    if (!input) return;
+    if (e.key === "Enter" || e.key === "," || e.key === "Tab") {
+      if (input.value) {
+        e.preventDefault();
+        addTag(input.value);
+        input.value = "";
+      }
+      return;
+    }
+    if (e.key === "Backspace" && !input.value && value.length > 0) {
+      removeTag(value.length - 1);
+    }
+  }
+  function handlePaste(e) {
+    const pasted = e.clipboardData.getData("text");
+    if (!pasted.includes(",")) return;
+    e.preventDefault();
+    const parts = pasted.split(",");
+    const next = [...value];
+    for (const part of parts) {
+      const tag = part.trim();
+      if (tag && !next.includes(tag)) {
+        if (maxTags !== void 0 && next.length >= maxTags) break;
+        next.push(tag);
+      }
+    }
+    onChange(next);
+    if (inputRef.current) inputRef.current.value = "";
+  }
+  const wrapper = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center gap-1.5 min-h-[42px] w-full rounded-xl px-3 py-2 bg-white/10 ring-1 ring-white/10 transition-shadow focus-within:ring-2 focus-within:ring-primary/40",
+        error && "ring-2 ring-rose-500/40 focus-within:ring-rose-500/40",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      ),
+      onClick: () => inputRef.current?.focus(),
+      children: [
+        value.map((tag, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: "inline-flex items-center gap-1 bg-white/10 text-white/90 rounded-full text-xs px-2.5 py-1 ring-1 ring-white/10",
+            children: [
+              tag,
+              !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Remove ${tag}`,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    removeTag(i);
+                  },
+                  className: "text-white/50 hover:text-white/90 transition-colors leading-none",
+                  children: "\u2715"
+                }
+              )
+            ]
+          },
+          `${tag}-${i}`
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            id: inputId,
+            type: "text",
+            disabled: disabled || atMax,
+            placeholder: value.length === 0 ? placeholder : void 0,
+            "aria-invalid": !!error || void 0,
+            "aria-describedby": errorId,
+            onKeyDown: handleKeyDown,
+            onPaste: handlePaste,
+            onBlur: (e) => {
+              if (e.target.value) {
+                addTag(e.target.value);
+                e.target.value = "";
+              }
+            },
+            className: "flex-1 min-w-[120px] bg-transparent text-sm text-white outline-none placeholder-white/30 disabled:cursor-not-allowed"
+          }
+        )
+      ]
+    }
+  );
+  if (!label && !error) return wrapper;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "block text-sm text-white/70 mb-1.5", children: label }),
+    wrapper,
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: "text-rose-400 text-xs mt-1", children: error })
+  ] });
+}
 var base3 = "inline-flex items-center justify-center rounded-full font-semibold ring-1 ring-white/10";
-var sizeClass3 = {
+var sizeClass4 = {
   sm: "text-xs px-2.5 py-1",
   md: "text-sm px-3 py-1.5"
 };
@@ -374,8 +546,8 @@ var variantClass3 = {
   dangerSolid: "bg-rose-600 text-white ring-0",
   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, sizeClass3[size], variantClass3[variant], className), children });
+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 });
 });
 var Pill = Badge;
 var trackSize = {
@@ -386,8 +558,8 @@ var thumbSize = {
   sm: { base: "w-4 h-4", translate: "translate-x-4" },
   md: { base: "w-5 h-5", translate: "translate-x-5" }
 };
-var Toggle = react.forwardRef(function Toggle2({ checked, onChange, disabled, label, size = "md", id: externalId, "aria-label": ariaLabel }, ref) {
-  const generatedId = react.useId();
+var Toggle = React.forwardRef(function Toggle2({ checked, onChange, disabled, busy, label, size = "md", id: externalId, "aria-label": ariaLabel }, ref) {
+  const generatedId = React.useId();
   const toggleId = externalId || generatedId;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -399,7 +571,8 @@ var Toggle = react.forwardRef(function Toggle2({ checked, onChange, disabled, la
         role: "switch",
         "aria-checked": checked,
         "aria-label": ariaLabel || label,
-        disabled,
+        disabled: disabled || busy,
+        "aria-busy": busy || void 0,
         onClick: () => onChange(!checked),
         className: cn(
           "relative rounded-full transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-surface",
@@ -411,9 +584,18 @@ var Toggle = react.forwardRef(function Toggle2({ checked, onChange, disabled, la
           "span",
           {
             className: cn(
-              "absolute top-0.5 left-0.5 rounded-full bg-white transition-transform duration-200",
+              "absolute top-0.5 left-0.5 rounded-full bg-white transition-transform duration-200 flex items-center justify-center",
               thumbSize[size].base,
               checked ? thumbSize[size].translate : "translate-x-0"
+            ),
+            children: busy && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "border-2 border-primary/30 border-t-primary rounded-full animate-spin",
+                  size === "sm" ? "w-2.5 h-2.5" : "w-3 h-3"
+                )
+              }
             )
           }
         )
@@ -422,12 +604,180 @@ var Toggle = react.forwardRef(function Toggle2({ checked, onChange, disabled, la
     label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: toggleId, className: "text-sm text-white/60 cursor-pointer", children: label })
   ] });
 });
-var Checkbox = react.forwardRef(function Checkbox2({ label, error, indeterminate, className, id: externalId, disabled, checked, onChange, ...props }, ref) {
-  const generatedId = react.useId();
+var Slider = React.forwardRef(function Slider2({
+  label,
+  showValue = false,
+  formatValue,
+  onChange,
+  disabled,
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  defaultValue,
+  className,
+  id: externalId,
+  ...props
+}, ref) {
+  const generatedId = React.useId();
+  const sliderId = externalId || generatedId;
+  const numericValue = React.useMemo(() => {
+    const raw = value !== void 0 ? value : defaultValue;
+    return raw !== void 0 ? Number(raw) : Number(min);
+  }, [value, defaultValue, min]);
+  const percentage = React.useMemo(() => {
+    const numMin = Number(min);
+    const numMax = Number(max);
+    if (numMax === numMin) return 0;
+    return Math.max(0, Math.min(100, (numericValue - numMin) / (numMax - numMin) * 100));
+  }, [numericValue, min, max]);
+  const trackGradient = `linear-gradient(to right, var(--ml-primary, #8b5cf6) ${percentage}%, rgba(255,255,255,0.1) ${percentage}%)`;
+  const displayValue = formatValue ? formatValue(numericValue) : String(numericValue);
+  const handleChange = (e) => {
+    onChange?.(Number(e.target.value));
+  };
+  const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ...props,
+      ref,
+      id: sliderId,
+      type: "range",
+      min,
+      max,
+      step,
+      value,
+      defaultValue: value === void 0 ? defaultValue ?? Number(min) : void 0,
+      disabled,
+      onChange: handleChange,
+      style: { background: trackGradient },
+      className: cn(
+        // Layout + reset
+        "w-full h-2 appearance-none rounded-full outline-none cursor-pointer",
+        // bg is set via inline style (trackGradient); keep transparent fallback for SSR
+        "bg-white/10",
+        // Webkit thumb
+        "[&::-webkit-slider-thumb]:appearance-none",
+        "[&::-webkit-slider-thumb]:w-4",
+        "[&::-webkit-slider-thumb]:h-4",
+        "[&::-webkit-slider-thumb]:rounded-full",
+        "[&::-webkit-slider-thumb]:bg-white",
+        "[&::-webkit-slider-thumb]:border-2",
+        "[&::-webkit-slider-thumb]:border-[var(--ml-primary,#8b5cf6)]",
+        "[&::-webkit-slider-thumb]:transition-shadow",
+        "[&::-webkit-slider-thumb]:duration-150",
+        // Moz thumb
+        "[&::-moz-range-thumb]:w-4",
+        "[&::-moz-range-thumb]:h-4",
+        "[&::-moz-range-thumb]:rounded-full",
+        "[&::-moz-range-thumb]:bg-white",
+        "[&::-moz-range-thumb]:border-2",
+        "[&::-moz-range-thumb]:border-[var(--ml-primary,#8b5cf6)]",
+        "[&::-moz-range-thumb]:transition-shadow",
+        "[&::-moz-range-thumb]:duration-150",
+        // Moz track — transparent so the gradient on the element shows through
+        "[&::-moz-range-track]:bg-transparent",
+        "[&::-moz-range-track]:rounded-full",
+        // Focus ring on thumb
+        "focus-visible:outline-none",
+        "focus-visible:[&::-webkit-slider-thumb]:ring-2",
+        "focus-visible:[&::-webkit-slider-thumb]:ring-primary/40",
+        "focus-visible:[&::-webkit-slider-thumb]:ring-offset-2",
+        "focus-visible:[&::-webkit-slider-thumb]:ring-offset-surface",
+        "focus-visible:[&::-moz-range-thumb]:ring-2",
+        "focus-visible:[&::-moz-range-thumb]:ring-primary/40",
+        // Disabled
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      )
+    }
+  );
+  if (!label && !showValue) return inputEl;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: sliderId, className: "text-sm text-white/70", children: label }),
+      showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-white/90 tabular-nums ml-auto", children: displayValue })
+    ] }),
+    inputEl
+  ] });
+});
+var ColorInput = React.forwardRef(function ColorInput2({ value, onChange, label, disabled, className, id: idProp }, ref) {
+  const autoId = React.useId();
+  const id = idProp ?? autoId;
+  const nativePickerRef = React.useRef(null);
+  function handleSwatchClick() {
+    if (!disabled) {
+      nativePickerRef.current?.click();
+    }
+  }
+  function handleTextChange(e) {
+    onChange(e.target.value);
+  }
+  function handleNativeChange(e) {
+    onChange(e.target.value);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "block text-sm text-white/70", children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 bg-white/10 rounded-xl ring-1 ring-white/10 px-3 py-2 transition-shadow",
+          "focus-within:ring-2 focus-within:ring-primary/40",
+          disabled && "opacity-60 pointer-events-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "color",
+              ref: nativePickerRef,
+              value,
+              onChange: handleNativeChange,
+              disabled,
+              "aria-hidden": "true",
+              tabIndex: -1,
+              className: "sr-only"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleSwatchClick,
+              disabled,
+              "aria-label": "Open color picker",
+              className: cn(
+                "w-8 h-8 rounded-lg border border-white/20 flex-shrink-0 transition-transform hover:scale-105 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+              ),
+              style: { backgroundColor: value }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              id,
+              type: "text",
+              value,
+              onChange: handleTextChange,
+              disabled,
+              spellCheck: false,
+              className: "flex-1 min-w-0 bg-transparent text-sm text-white placeholder:text-white/30 outline-none font-mono",
+              placeholder: "#000000"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+var Checkbox = React.forwardRef(function Checkbox2({ label, error, indeterminate, className, id: externalId, disabled, checked, onChange, ...props }, ref) {
+  const generatedId = React.useId();
   const inputId = externalId || generatedId;
   const errorId = error ? `${inputId}-error` : void 0;
-  const internalRef = react.useRef(null);
-  react.useEffect(() => {
+  const internalRef = React.useRef(null);
+  React.useEffect(() => {
     const el = internalRef.current;
     if (el) {
       el.indeterminate = indeterminate ?? false;
@@ -514,9 +864,9 @@ var Checkbox = react.forwardRef(function Checkbox2({ label, error, indeterminate
     error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: "text-rose-400 text-xs ml-7", children: error })
   ] });
 });
-var RadioGroupContext = react.createContext(null);
+var RadioGroupContext = React.createContext(null);
 function useRadioGroup() {
-  const ctx = react.useContext(RadioGroupContext);
+  const ctx = React.useContext(RadioGroupContext);
   if (!ctx) {
     throw new Error("RadioItem must be used inside a RadioGroup");
   }
@@ -534,13 +884,13 @@ function RadioGroup({
   children,
   className
 }) {
-  const groupId = react.useId();
-  const generatedName = react.useId();
+  const groupId = React.useId();
+  const generatedName = React.useId();
   const name = externalName ?? generatedName;
-  const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
   const isControlled = controlledValue !== void 0;
   const currentValue = isControlled ? controlledValue : uncontrolledValue;
-  const handleChange = react.useCallback(
+  const handleChange = React.useCallback(
     (val) => {
       if (!isControlled) setUncontrolledValue(val);
       onValueChange?.(val);
@@ -549,7 +899,7 @@ function RadioGroup({
   );
   const labelId = label ? `${groupId}-label` : void 0;
   const errorId = error ? `${groupId}-error` : void 0;
-  const ctxValue = react.useMemo(
+  const ctxValue = React.useMemo(
     () => ({ value: currentValue, onChange: handleChange, name, disabled, groupId }),
     [currentValue, handleChange, name, disabled, groupId]
   );
@@ -580,8 +930,8 @@ function RadioGroup({
 }
 function RadioItem({ value, disabled: itemDisabled, children, className }) {
   const { value: groupValue, onChange, name, disabled: groupDisabled, groupId } = useRadioGroup();
-  const inputId = react.useId();
-  const inputRef = react.useRef(null);
+  const inputId = React.useId();
+  const inputRef = React.useRef(null);
   const isDisabled = groupDisabled || itemDisabled;
   const isSelected = groupValue === value;
   const handleKeyDown = (e) => {
@@ -647,7 +997,7 @@ function RadioItem({ value, disabled: itemDisabled, children, className }) {
     }
   );
 }
-var sizeClass4 = {
+var sizeClass5 = {
   sm: "h-3 w-3 border",
   md: "h-4 w-4 border-2",
   lg: "h-6 w-6 border-2"
@@ -656,7 +1006,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", sizeClass4[size], className),
+      className: cn("inline-block rounded-full border-white/15 border-t-primary animate-spin", sizeClass5[size], className),
       role: label ? "status" : void 0,
       "aria-hidden": label ? void 0 : "true",
       "aria-label": label || void 0
@@ -672,9 +1022,9 @@ function Skeleton({ className, circle }) {
     }
   );
 }
-var TabsContext = react.createContext(null);
+var TabsContext = React.createContext(null);
 function useTabsContext() {
-  const ctx = react.useContext(TabsContext);
+  const ctx = React.useContext(TabsContext);
   if (!ctx) throw new Error("Tabs sub-components must be used inside <Tabs>");
   return ctx;
 }
@@ -686,18 +1036,18 @@ function Tabs({
   children,
   className
 }) {
-  const baseId = react.useId();
+  const baseId = React.useId();
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = react.useState(defaultValue);
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
   const activeValue = isControlled ? value ?? "" : internalValue;
-  const setActiveValue = react.useCallback(
+  const setActiveValue = React.useCallback(
     (next) => {
       if (!isControlled) setInternalValue(next);
       onValueChange?.(next);
     },
     [isControlled, onValueChange]
   );
-  const ctxValue = react.useMemo(
+  const ctxValue = React.useMemo(
     () => ({ activeValue, setActiveValue, variant, baseId }),
     [activeValue, setActiveValue, variant, baseId]
   );
@@ -705,7 +1055,7 @@ function Tabs({
 }
 function TabList({ children, className }) {
   const { variant } = useTabsContext();
-  const listRef = react.useRef(null);
+  const listRef = React.useRef(null);
   const handleKeyDown = (e) => {
     const list = listRef.current;
     if (!list) return;
@@ -810,7 +1160,7 @@ function TabPanel({ value, children, className }) {
     }
   );
 }
-var Card = react.forwardRef(function Card2({ hoverable, variant = "surface", className, ...props }, ref) {
+var Card = React.forwardRef(function Card2({ hoverable, variant = "surface", className, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -850,9 +1200,9 @@ function Modal({
   contentClassName,
   zIndexClassName = "z-50"
 }) {
-  const dialogRef = react.useRef(null);
-  const lastActiveElementRef = react.useRef(null);
-  react.useEffect(() => {
+  const dialogRef = React.useRef(null);
+  const lastActiveElementRef = React.useRef(null);
+  React.useEffect(() => {
     if (!isOpen) return;
     lastActiveElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     const raf = window.requestAnimationFrame(() => {
@@ -868,7 +1218,7 @@ function Modal({
       if (lastActive?.isConnected) focusSafely(lastActive);
     };
   }, [isOpen]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!isOpen) return;
     lockScroll();
     return () => unlockScroll();
@@ -961,7 +1311,7 @@ function ConfirmDialog({
   variant = "danger",
   isLoading = false
 }) {
-  const titleId = react.useId();
+  const titleId = React.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Modal,
     {
@@ -1006,22 +1356,22 @@ function ConfirmDialog({
   );
 }
 function Tooltip({ content, delayMs = 500, placement = "top", className, children }) {
-  const tooltipId = react.useId();
-  const openTimerRef = react.useRef(null);
-  const anchorRef = react.useRef(null);
-  const [open, setOpen] = react.useState(false);
-  const [pos, setPos] = react.useState(null);
-  react.useMemo(() => {
+  const tooltipId = React.useId();
+  const openTimerRef = React.useRef(null);
+  const anchorRef = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  const [pos, setPos] = React.useState(null);
+  React.useMemo(() => {
     if (typeof content === "string") return content.trim();
     return "";
   }, [content]);
-  const clearTimer = react.useCallback(() => {
+  const clearTimer = React.useCallback(() => {
     if (openTimerRef.current !== null) {
       window.clearTimeout(openTimerRef.current);
       openTimerRef.current = null;
     }
   }, []);
-  const updatePosition = react.useCallback(() => {
+  const updatePosition = React.useCallback(() => {
     const el = anchorRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1037,17 +1387,17 @@ function Tooltip({ content, delayMs = 500, placement = "top", className, childre
       placement: effPlacement
     });
   }, [placement]);
-  const scheduleOpen = react.useCallback(() => {
+  const scheduleOpen = React.useCallback(() => {
     clearTimer();
     openTimerRef.current = window.setTimeout(() => {
       setOpen(true);
     }, Math.max(0, delayMs));
   }, [clearTimer, delayMs]);
-  const close = react.useCallback(() => {
+  const close = React.useCallback(() => {
     clearTimer();
     setOpen(false);
   }, [clearTimer]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) return;
     updatePosition();
     const onScroll = () => updatePosition();
@@ -1059,11 +1409,11 @@ function Tooltip({ content, delayMs = 500, placement = "top", className, childre
       window.removeEventListener("resize", onResize);
     };
   }, [open, updatePosition]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     return () => clearTimer();
   }, [clearTimer]);
-  if (!react.isValidElement(children)) return children;
-  const child = react.cloneElement(children, {
+  if (!React.isValidElement(children)) return children;
+  const child = React.cloneElement(children, {
     ref: (node) => {
       anchorRef.current = node;
       const childProps = children.props;
@@ -1128,8 +1478,8 @@ function EmptyState({ icon: Icon, title, description, actionLabel, onAction, chi
   ] });
 }
 function CollapsibleSection({ title, defaultOpen = true, children, right, className }) {
-  const [isOpen, setIsOpen] = react.useState(defaultOpen);
-  const contentId = react.useId();
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+  const contentId = React.useId();
   const titleId = `${contentId}-title`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-xl ring-1 ring-white/10 bg-white/5 overflow-hidden", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1176,21 +1526,21 @@ function CollapsibleSection({ title, defaultOpen = true, children, right, classN
     )
   ] });
 }
-var DropdownContext = react.createContext(null);
+var DropdownContext = React.createContext(null);
 function useDropdownContext(component) {
-  const ctx = react.useContext(DropdownContext);
+  const ctx = React.useContext(DropdownContext);
   if (!ctx) {
     throw new Error(`<${component}> must be rendered inside <Dropdown>`);
   }
   return ctx;
 }
 function Dropdown({ children, className }) {
-  const [open, setOpen] = react.useState(false);
-  const triggerId = react.useId();
-  const menuId = react.useId();
-  const triggerRef = react.useRef(null);
-  const toggleOpen = react.useCallback(() => setOpen((prev) => !prev), []);
-  const ctxValue = react.useMemo(
+  const [open, setOpen] = React.useState(false);
+  const triggerId = React.useId();
+  const menuId = React.useId();
+  const triggerRef = React.useRef(null);
+  const toggleOpen = React.useCallback(() => setOpen((prev) => !prev), []);
+  const ctxValue = React.useMemo(
     () => ({ open, setOpen, toggleOpen, triggerId, menuId, triggerRef }),
     [open, setOpen, toggleOpen, triggerId, menuId, triggerRef]
   );
@@ -1198,8 +1548,8 @@ function Dropdown({ children, className }) {
 }
 function DropdownTrigger({ children, className }) {
   const { open, toggleOpen, triggerId, menuId, triggerRef } = useDropdownContext("DropdownTrigger");
-  if (!react.isValidElement(children)) return children;
-  return react.cloneElement(children, {
+  if (!React.isValidElement(children)) return children;
+  return React.cloneElement(children, {
     id: triggerId,
     "aria-haspopup": "menu",
     "aria-expanded": open,
@@ -1221,10 +1571,10 @@ function DropdownTrigger({ children, className }) {
 }
 function DropdownMenu({ children, className, align = "left" }) {
   const { open, setOpen, menuId, triggerId, triggerRef } = useDropdownContext("DropdownMenu");
-  const menuRef = react.useRef(null);
-  const [pos, setPos] = react.useState(null);
-  const [visible, setVisible] = react.useState(false);
-  const updatePosition = react.useCallback(() => {
+  const menuRef = React.useRef(null);
+  const [pos, setPos] = React.useState(null);
+  const [visible, setVisible] = React.useState(false);
+  const updatePosition = React.useCallback(() => {
     const trigger = triggerRef.current;
     if (!trigger) return;
     const rect = trigger.getBoundingClientRect();
@@ -1234,7 +1584,7 @@ function DropdownMenu({ children, className, align = "left" }) {
       left: Math.round(left)
     });
   }, [align, triggerRef]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) {
       setVisible(false);
       return;
@@ -1249,7 +1599,7 @@ function DropdownMenu({ children, className, align = "left" }) {
     });
     return () => window.cancelAnimationFrame(raf);
   }, [open, updatePosition]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) return;
     function handlePointerDown(e) {
       const target = e.target;
@@ -1260,7 +1610,7 @@ function DropdownMenu({ children, className, align = "left" }) {
     document.addEventListener("pointerdown", handlePointerDown, true);
     return () => document.removeEventListener("pointerdown", handlePointerDown, true);
   }, [open, setOpen, triggerRef]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) return;
     const onScroll = () => updatePosition();
     const onResize = () => updatePosition();
@@ -1336,7 +1686,7 @@ function DropdownMenu({ children, className, align = "left" }) {
 }
 function DropdownItem({ onSelect, disabled = false, children, className }) {
   const { setOpen, triggerRef } = useDropdownContext("DropdownItem");
-  const handleSelect = react.useCallback(() => {
+  const handleSelect = React.useCallback(() => {
     if (disabled) return;
     setOpen(false);
     focusSafely(triggerRef.current);
@@ -1389,10 +1739,10 @@ function DropZone({
   className,
   "aria-label": ariaLabel = "File drop zone"
 }) {
-  const [isDragging, setIsDragging] = react.useState(false);
-  const inputRef = react.useRef(null);
-  const dragCounterRef = react.useRef(0);
-  const processFiles = react.useCallback(
+  const [isDragging, setIsDragging] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const dragCounterRef = React.useRef(0);
+  const processFiles = React.useCallback(
     (fileList) => {
       if (!fileList || disabled) return;
       let files = Array.from(fileList);
@@ -1409,7 +1759,7 @@ function DropZone({
     },
     [accept, disabled, maxFiles, maxSize, onFilesDropped]
   );
-  const handleDragEnter = react.useCallback(
+  const handleDragEnter = React.useCallback(
     (e) => {
       e.preventDefault();
       dragCounterRef.current++;
@@ -1417,18 +1767,18 @@ function DropZone({
     },
     [disabled]
   );
-  const handleDragOver = react.useCallback(
+  const handleDragOver = React.useCallback(
     (e) => {
       e.preventDefault();
     },
     []
   );
-  const handleDragLeave = react.useCallback((e) => {
+  const handleDragLeave = React.useCallback((e) => {
     e.preventDefault();
     dragCounterRef.current--;
     if (dragCounterRef.current === 0) setIsDragging(false);
   }, []);
-  const handleDrop = react.useCallback(
+  const handleDrop = React.useCallback(
     (e) => {
       e.preventDefault();
       dragCounterRef.current = 0;
@@ -1438,10 +1788,10 @@ function DropZone({
     },
     [disabled, processFiles]
   );
-  const handleClick = react.useCallback(() => {
+  const handleClick = React.useCallback(() => {
     if (!disabled) inputRef.current?.click();
   }, [disabled]);
-  const handleKeyDown = react.useCallback(
+  const handleKeyDown = React.useCallback(
     (e) => {
       if (disabled) return;
       if (e.key === "Enter" || e.key === " ") {
@@ -1451,7 +1801,7 @@ function DropZone({
     },
     [disabled]
   );
-  const handleInputChange = react.useCallback(() => {
+  const handleInputChange = React.useCallback(() => {
     processFiles(inputRef.current?.files ?? null);
     if (inputRef.current) inputRef.current.value = "";
   }, [processFiles]);
@@ -1519,97 +1869,798 @@ function DropZone({
     }
   );
 }
-var maxWidthClass = {
-  sm: "max-w-2xl",
-  md: "max-w-4xl",
-  lg: "max-w-5xl",
-  xl: "max-w-7xl",
-  "2xl": "max-w-[92rem]",
-  full: "max-w-full"
-};
-function defaultBackground() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-32 -left-32 h-[600px] w-[600px] rounded-full bg-violet-600/20 blur-[140px]" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-20 -right-32 h-[500px] w-[500px] rounded-full bg-purple-500/[0.12] blur-[120px]" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-1/2 h-[400px] w-[500px] -translate-x-1/2 rounded-full bg-accent/[0.10] blur-[120px]" })
+function FormField({ label, error, helperText, children, className, id: idProp }) {
+  const autoId = React.useId();
+  const id = idProp ?? autoId;
+  const descIds = [];
+  const errorId = error ? `${id}-error` : void 0;
+  const helperId = helperText ? `${id}-helper` : void 0;
+  if (errorId) descIds.push(errorId);
+  if (helperId) descIds.push(helperId);
+  const describedBy = descIds.length > 0 ? descIds.join(" ") : void 0;
+  const child = React.cloneElement(children, {
+    id,
+    ...describedBy ? { "aria-describedby": describedBy } : {},
+    ...error ? { "aria-invalid": true } : {}
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col", className), children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "block text-sm text-white/70 mb-1.5", children: label }) : null,
+    child,
+    error ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: "text-rose-400 text-xs mt-1", role: "alert", children: error }) : null,
+    helperText && !error ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: "text-white/40 text-xs mt-1", children: helperText }) : null
   ] });
 }
-function PageShell({
-  header,
-  background,
-  variant = "plain",
-  className,
-  mainClassName,
-  containerClassName,
-  maxWidth = "xl",
-  children
-}) {
-  const showDefaultBackground = variant !== "minimal" && !background;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden flex-1 min-h-full flex flex-col", className), children: [
-    background,
-    showDefaultBackground ? defaultBackground() : null,
-    header,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "main",
+function Divider({ orientation = "horizontal", label, className }) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        className: cn(
-          "relative py-8 flex-1 w-full mx-auto px-4 sm:px-6 lg:px-8",
-          maxWidthClass[maxWidth],
-          containerClassName,
-          mainClassName
-        ),
-        children
+        role: "separator",
+        "aria-orientation": "vertical",
+        className: cn("border-l border-white/10 h-full mx-3 self-stretch", className)
       }
-    )
-  ] });
+    );
+  }
+  if (label) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "horizontal",
+        className: cn("flex items-center gap-3 my-3 w-full", className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 border-t border-white/10" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white/40 leading-none select-none", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 border-t border-white/10" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      className: cn("border-t border-white/10 w-full my-3", className)
+    }
+  );
 }
-function Navbar({ logo, children, className, glass = true }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: cn("fixed top-0 w-full z-50", glass && "glass", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto px-6 h-16 flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: logo ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 rounded-xl animated-gradient" }) }),
-    children && /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main navigation", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children }) })
-  ] }) });
+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",
+    {
+      ref,
+      className: cn(
+        "px-4 py-3 text-left text-xs font-semibold text-white/50 uppercase tracking-wider",
+        className
+      ),
+      children
+    }
+  )
+);
+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 Sidebar({ children, collapsed = false, onToggle, className }) {
+function StatCard({ value, label, icon, trend, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "aside",
+    "div",
     {
       className: cn(
-        "glass h-full flex flex-col transition-[width] duration-200 overflow-hidden",
-        collapsed ? "w-16" : "w-64",
+        "bg-white/5 ring-1 ring-white/10 rounded-xl p-4 flex items-start gap-3",
         className
       ),
       children: [
-        onToggle && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onToggle,
-            className: "flex items-center justify-center w-full h-12 text-white/40 hover:text-white hover:bg-white/5 transition-colors",
-            "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                className: cn("h-5 w-5 transition-transform duration-200", collapsed && "rotate-180"),
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                strokeWidth: 2,
-                children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 overflow-y-auto py-2", 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 }) })
+        ] })
       ]
     }
   );
 }
-var maxWidthClass2 = {
-  sm: "max-w-2xl",
-  md: "max-w-4xl",
-  lg: "max-w-5xl",
-  xl: "max-w-7xl",
-  "2xl": "max-w-[92rem]",
+function getPageRange(page, totalPages, siblingCount) {
+  if (totalPages <= 1) return [1];
+  const siblingStart = Math.max(2, page - siblingCount);
+  const siblingEnd = Math.min(totalPages - 1, page + siblingCount);
+  const showLeftEllipsis = siblingStart > 2;
+  const showRightEllipsis = siblingEnd < totalPages - 1;
+  const items = [1];
+  if (showLeftEllipsis) {
+    items.push("...");
+  } else {
+    for (let i = 2; i < siblingStart; i++) {
+      items.push(i);
+    }
+  }
+  for (let i = siblingStart; i <= siblingEnd; i++) {
+    items.push(i);
+  }
+  if (showRightEllipsis) {
+    items.push("...");
+  } else {
+    for (let i = siblingEnd + 1; i < totalPages; i++) {
+      items.push(i);
+    }
+  }
+  if (totalPages > 1) {
+    items.push(totalPages);
+  }
+  return items;
+}
+var buttonBase = "inline-flex items-center justify-center rounded-lg px-3 py-2 text-sm font-medium transition-[background-color,opacity] select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40";
+var pageButton = cn(buttonBase, "bg-white/5 ring-1 ring-white/10 text-white/80 hover:bg-white/10 hover:text-white");
+var activeButton = cn(buttonBase, "bg-primary text-white ring-1 ring-primary/20");
+var navButton = cn(buttonBase, "bg-white/5 ring-1 ring-white/10 text-white/80 hover:bg-white/10 hover:text-white");
+var ChevronLeft = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" })
+  }
+);
+var ChevronRight = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" })
+  }
+);
+function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  className
+}) {
+  if (totalPages <= 1) return null;
+  const items = getPageRange(page, totalPages, siblingCount);
+  const isPrevDisabled = page <= 1;
+  const isNextDisabled = page >= totalPages;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      role: "navigation",
+      "aria-label": "Pagination",
+      className: cn("flex items-center gap-1", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onPageChange(page - 1),
+            disabled: isPrevDisabled,
+            "aria-label": "Previous page",
+            className: cn(navButton, isPrevDisabled && "opacity-40 cursor-not-allowed pointer-events-none"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, {})
+          }
+        ),
+        items.map(
+          (item, index) => item === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "inline-flex items-center justify-center px-3 py-2 text-sm text-white/40 select-none",
+              "aria-hidden": "true",
+              children: "\u2026"
+            },
+            `ellipsis-${index}`
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onPageChange(item),
+              "aria-label": `Page ${item}`,
+              "aria-current": item === page ? "page" : void 0,
+              className: item === page ? activeButton : pageButton,
+              children: item
+            },
+            item
+          )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onPageChange(page + 1),
+            disabled: isNextDisabled,
+            "aria-label": "Next page",
+            className: cn(navButton, isNextDisabled && "opacity-40 cursor-not-allowed pointer-events-none"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {})
+          }
+        )
+      ]
+    }
+  );
+}
+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;
+    const isActive = index === activeStep;
+    return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex flex-col items-center",
+          "aria-current": isActive ? "step" : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold",
+                  isCompleted && "bg-emerald-600 text-white",
+                  isActive && "bg-primary text-white ring-2 ring-primary/40",
+                  !isCompleted && !isActive && "bg-white/10 text-white/40"
+                ),
+                children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor",
+                    className: "w-4 h-4",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z",
+                        clipRule: "evenodd"
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: index + 1 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "text-xs mt-2 text-center max-w-[6rem]",
+                  isActive ? "text-white/80" : "text-white/50"
+                ),
+                children: step.label
+              }
+            ),
+            step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs mt-0.5 text-center text-white/30 max-w-[6rem]", children: step.description })
+          ]
+        }
+      ),
+      index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "h-0.5 flex-1 mx-2 mt-4 self-start",
+            isCompleted ? "bg-emerald-600" : "bg-white/10"
+          ),
+          "aria-hidden": "true"
+        }
+      )
+    ] }, index);
+  }) });
+}
+var sizeClasses = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3"
+};
+var variantClasses = {
+  primary: "bg-primary",
+  success: "bg-emerald-500",
+  warning: "bg-amber-500",
+  danger: "bg-rose-500"
+};
+function ProgressBar({
+  value,
+  max = 100,
+  variant = "primary",
+  label,
+  showValue = false,
+  size = "md",
+  className
+}) {
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white/60", children: label }),
+      showValue && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-white/60 ml-auto", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("w-full rounded-full bg-white/10", sizeClasses[size]),
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-label": label,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "rounded-full transition-[width] duration-300 ease-out",
+              sizeClasses[size],
+              variantClasses[variant]
+            ),
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+var sizeMap = {
+  sm: "w-8 h-8 text-xs",
+  md: "w-12 h-12 text-sm",
+  lg: "w-16 h-16 text-base"
+};
+var strokeWidthMap = {
+  sm: 3,
+  md: 3.5,
+  lg: 4
+};
+var RADIUS = 15.9155;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+function CooldownRing({
+  duration,
+  remaining,
+  size = "md",
+  className
+}) {
+  const fraction = duration > 0 ? Math.max(0, Math.min(1, remaining / duration)) : 0;
+  const offset = CIRCUMFERENCE * (1 - fraction);
+  const color = fraction > 0.5 ? "text-primary" : fraction > 0.25 ? "text-amber-500" : "text-rose-500";
+  const pulse = remaining <= 10 && remaining > 0;
+  const strokeWidth = strokeWidthMap[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-flex items-center justify-center", sizeMap[size], className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        viewBox: "0 0 36 36",
+        className: cn("w-full h-full -rotate-90", color, pulse && "animate-pulse"),
+        "aria-label": `Cooldown: ${remaining} seconds remaining`,
+        role: "img",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: "18",
+              cy: "18",
+              r: RADIUS,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth,
+              className: "text-white/10"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: "18",
+              cy: "18",
+              r: RADIUS,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth,
+              strokeDasharray: `${CIRCUMFERENCE} ${CIRCUMFERENCE}`,
+              strokeDashoffset: offset,
+              strokeLinecap: "round",
+              style: { transition: "stroke-dashoffset 0.6s ease" }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "absolute font-semibold tabular-nums text-white select-none",
+        style: { lineHeight: 1 },
+        children: Math.max(0, Math.ceil(remaining))
+      }
+    )
+  ] });
+}
+function StageProgress({ stages, activeStage, className }) {
+  const clampedActive = Math.max(0, Math.min(activeStage, stages.length - 1));
+  const fillPercent = stages.length <= 1 ? 100 : clampedActive / (stages.length - 1) * 100;
+  const isComplete = clampedActive >= stages.length - 1;
+  const isAnimating = !isComplete;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between", children: stages.map((stage, index) => {
+      const isCompleted = index < clampedActive;
+      const isActive = index === clampedActive;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-1.5 text-xs font-medium transition-colors duration-300",
+            isCompleted && "text-emerald-400",
+            isActive && "text-white",
+            !isCompleted && !isActive && "text-white/40"
+          ),
+          children: [
+            isCompleted ? (
+              // Completed: emerald check circle
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full bg-emerald-400/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  className: "h-2.5 w-2.5 text-emerald-400",
+                  viewBox: "0 0 10 10",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M2 5.5L4 7.5L8 3",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              ) })
+            ) : isActive ? (
+              // Active: primary dot with ring
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full ring-2 ring-[var(--ml-primary)] ring-offset-1 ring-offset-black/50", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--ml-primary)]" }) })
+            ) : (
+              // Upcoming: hollow dim dot
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-3.5 w-3.5 rounded-full border border-white/20 bg-transparent" })
+            ),
+            stage
+          ]
+        },
+        stage
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "relative mt-3 h-1.5 w-full overflow-hidden rounded-full bg-white/10",
+        role: "progressbar",
+        "aria-valuenow": clampedActive,
+        "aria-valuemin": 0,
+        "aria-valuemax": stages.length - 1,
+        "aria-label": `Stage ${clampedActive + 1} of ${stages.length}: ${stages[clampedActive]}`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "h-full rounded-full bg-gradient-to-r from-[var(--ml-accent)] to-[var(--ml-primary)] transition-[width] duration-500 ease-in-out",
+            style: { width: `${fillPercent}%` },
+            children: isAnimating && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "pointer-events-none absolute inset-0 -translate-x-full animate-[ml-shimmer_2s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-white/30 to-transparent",
+                "aria-hidden": "true"
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+function getUrgencyClasses(remaining, max) {
+  const ratio = max > 0 ? remaining / max : 0;
+  if (ratio > 0.5) {
+    return {
+      filled: "bg-emerald-400",
+      empty: "bg-emerald-400/30",
+      label: "text-emerald-400"
+    };
+  }
+  if (ratio > 0.25) {
+    return {
+      filled: "bg-amber-400",
+      empty: "bg-amber-400/30",
+      label: "text-amber-400"
+    };
+  }
+  return {
+    filled: "bg-rose-400",
+    empty: "bg-rose-400/30",
+    label: "text-rose-400"
+  };
+}
+function DotIndicator({
+  remaining,
+  max,
+  showLabel = false,
+  labelFormat,
+  className
+}) {
+  const clampedRemaining = Math.max(0, Math.min(remaining, max));
+  const used = max - clampedRemaining;
+  const urgency = getUrgencyClasses(clampedRemaining, max);
+  const defaultLabel = `${clampedRemaining}/${max}`;
+  const label = labelFormat ? labelFormat(clampedRemaining, max) : defaultLabel;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "flex items-center gap-1",
+        role: "meter",
+        "aria-valuenow": clampedRemaining,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-label": label,
+        children: Array.from({ length: max }, (_, index) => {
+          const isFilled = index < used;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "h-2 w-2 rounded-full transition-colors duration-300",
+                isFilled ? urgency.filled : urgency.empty
+              ),
+              "aria-hidden": "true"
+            },
+            index
+          );
+        })
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium tabular-nums", urgency.label), children: label })
+  ] });
+}
+function ActiveFilterPills({
+  filters,
+  onRemove,
+  onClearAll,
+  clearAllLabel = "Clear all",
+  className
+}) {
+  if (filters.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center gap-1.5", className), children: [
+    filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: "inline-flex items-center gap-1 rounded-full bg-white/10 px-2.5 py-1 text-xs text-white/80 ring-1 ring-white/10",
+        children: [
+          filter.label,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemove(filter.key),
+              className: "ml-0.5 text-white/50 transition-colors duration-150 hover:text-white focus:outline-none focus-visible:text-white",
+              "aria-label": `Remove filter: ${filter.label}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  className: "h-3 w-3",
+                  viewBox: "0 0 12 12",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M9 3L3 9M3 3L9 9",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      },
+      filter.key
+    )),
+    filters.length > 1 && onClearAll && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClearAll,
+        className: "text-xs text-white/40 underline-offset-2 transition-colors duration-150 hover:text-white/70 focus:outline-none focus-visible:text-white/70",
+        children: clearAllLabel
+      }
+    )
+  ] });
+}
+function SectionCard({
+  title,
+  description,
+  right,
+  overlay,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative bg-white/5 ring-1 ring-white/10 rounded-xl overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3 px-5 py-4 border-b border-white/[0.06]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-white", children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-white/40 mt-0.5", children: description })
+          ] }),
+          right && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: right })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4", children }),
+        overlay
+      ]
+    }
+  );
+}
+var maxWidthClass = {
+  sm: "max-w-2xl",
+  md: "max-w-4xl",
+  lg: "max-w-5xl",
+  xl: "max-w-7xl",
+  "2xl": "max-w-[92rem]",
+  full: "max-w-full"
+};
+function defaultBackground() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-32 -left-32 h-[600px] w-[600px] rounded-full bg-violet-600/20 blur-[140px]" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-20 -right-32 h-[500px] w-[500px] rounded-full bg-purple-500/[0.12] blur-[120px]" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-1/2 h-[400px] w-[500px] -translate-x-1/2 rounded-full bg-accent/[0.10] blur-[120px]" })
+  ] });
+}
+function PageShell({
+  header,
+  background,
+  variant = "plain",
+  className,
+  mainClassName,
+  containerClassName,
+  maxWidth = "xl",
+  children
+}) {
+  const showDefaultBackground = variant !== "minimal" && !background;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden flex-1 min-h-full flex flex-col", className), children: [
+    background,
+    showDefaultBackground ? defaultBackground() : null,
+    header,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "main",
+      {
+        className: cn(
+          "relative py-8 flex-1 w-full mx-auto px-4 sm:px-6 lg:px-8",
+          maxWidthClass[maxWidth],
+          containerClassName,
+          mainClassName
+        ),
+        children
+      }
+    )
+  ] });
+}
+function Navbar({ logo, children, className, glass = true }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: cn("fixed top-0 w-full z-50", glass && "glass", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto px-6 h-16 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: logo ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 rounded-xl animated-gradient" }) }),
+    children && /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main navigation", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children }) })
+  ] }) });
+}
+function Sidebar({ children, collapsed = false, onToggle, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "aside",
+    {
+      className: cn(
+        "glass h-full flex flex-col transition-[width] duration-200 overflow-hidden",
+        collapsed ? "w-16" : "w-64",
+        className
+      ),
+      children: [
+        onToggle && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onToggle,
+            className: "flex items-center justify-center w-full h-12 text-white/40 hover:text-white hover:bg-white/5 transition-colors",
+            "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: cn("h-5 w-5 transition-transform duration-200", collapsed && "rotate-180"),
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 overflow-y-auto py-2", children })
+      ]
+    }
+  );
+}
+var maxWidthClass2 = {
+  sm: "max-w-2xl",
+  md: "max-w-4xl",
+  lg: "max-w-5xl",
+  xl: "max-w-7xl",
+  "2xl": "max-w-[92rem]",
   full: "max-w-full"
 };
 function DashboardLayout({ children, navbar, sidebar, className, mainClassName, maxWidth = "lg" }) {
@@ -1625,7 +2676,320 @@ function DashboardLayout({ children, navbar, sidebar, className, mainClassName,
     ] })
   ] });
 }
-var ProgressButton = react.forwardRef(
+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",
+    {
+      "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"
+          }
+        )
+      ]
+    }
+  );
+}
+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(
+        "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: [
+        /* @__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"
+          }
+        )
+      ]
+    }
+  );
+}
+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",
+    {
+      "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"
+        }
+      )
+    }
+  );
+}
+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 }) {
+  const generatedId = React.useId();
+  const fieldId = externalId || generatedId;
+  const { copy, copied } = useClipboard();
+  const [revealed, setRevealed] = React.useState(false);
+  const displayValue = masked && !revealed ? "\u2022".repeat(Math.min(value.length, 24)) : 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",
+        className
+      ),
+      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(
+          "button",
+          {
+            type: "button",
+            "aria-label": revealed ? "Hide value" : "Reveal value",
+            onClick: () => setRevealed((v) => !v),
+            className: iconButtonBase,
+            children: revealed ? /* @__PURE__ */ jsxRuntime.jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": copied ? "Copied!" : "Copy to clipboard",
+            onClick: () => copy(value),
+            className: cn(iconButtonBase, copied && "text-emerald-400 hover:text-emerald-400"),
+            children: copied ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, {})
+          }
+        )
+      ]
+    }
+  );
+  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
+  ] });
+}
+var ProgressButton = React.forwardRef(
   function ProgressButton2({ isLoading, loadingText, children, disabled, className, ...props }, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Button,
@@ -1664,7 +3028,7 @@ function reducer(state, action) {
       return state;
   }
 }
-var ToastContext = react.createContext(null);
+var ToastContext = React.createContext(null);
 var variantBarColor = {
   success: "bg-emerald-500",
   error: "bg-rose-500",
@@ -1683,7 +3047,7 @@ var variantIconLabel = {
   warning: "\u26A0",
   info: "i"
 };
-var variantIconColor = {
+var variantIconColor2 = {
   success: "text-emerald-400",
   error: "text-rose-400",
   warning: "text-amber-400",
@@ -1697,13 +3061,13 @@ var positionClass = {
 };
 function ToastCard({ toast, onDismiss }) {
   const duration = toast.duration ?? 5e3;
-  const [visible, setVisible] = react.useState(false);
-  const [exiting, setExiting] = react.useState(false);
-  const [started, setStarted] = react.useState(false);
-  const dismissedRef = react.useRef(false);
-  const timerRef = react.useRef(null);
-  const exitTimerRef = react.useRef(null);
-  react.useEffect(() => {
+  const [visible, setVisible] = React.useState(false);
+  const [exiting, setExiting] = React.useState(false);
+  const [started, setStarted] = React.useState(false);
+  const dismissedRef = React.useRef(false);
+  const timerRef = React.useRef(null);
+  const exitTimerRef = React.useRef(null);
+  React.useEffect(() => {
     let innerFrame;
     const frame = requestAnimationFrame(() => {
       setVisible(true);
@@ -1714,19 +3078,19 @@ function ToastCard({ toast, onDismiss }) {
       cancelAnimationFrame(innerFrame);
     };
   }, []);
-  react.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       if (exitTimerRef.current !== null) clearTimeout(exitTimerRef.current);
     };
   }, []);
-  const triggerDismiss = react.useCallback(() => {
+  const triggerDismiss = React.useCallback(() => {
     if (dismissedRef.current) return;
     dismissedRef.current = true;
     if (timerRef.current !== null) clearTimeout(timerRef.current);
     setExiting(true);
     exitTimerRef.current = setTimeout(() => onDismiss(toast.id), 280);
   }, [onDismiss, toast.id]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (duration <= 0) return;
     timerRef.current = setTimeout(triggerDismiss, duration);
     return () => {
@@ -1759,7 +3123,7 @@ function ToastCard({ toast, onDismiss }) {
               "aria-hidden": "true",
               className: cn(
                 "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[11px] font-bold ring-1",
-                variantIconColor[toast.variant],
+                variantIconColor2[toast.variant],
                 "ring-current/30"
               ),
               children: variantIconLabel[toast.variant]
@@ -1805,11 +3169,11 @@ function ToastCard({ toast, onDismiss }) {
   );
 }
 function ToastProvider({ children, position = "top-right", maxToasts = 5 }) {
-  const [toasts, dispatch] = react.useReducer(reducer, []);
-  const counterRef = react.useRef(0);
-  const maxToastsRef = react.useRef(maxToasts);
+  const [toasts, dispatch] = React.useReducer(reducer, []);
+  const counterRef = React.useRef(0);
+  const maxToastsRef = React.useRef(maxToasts);
   maxToastsRef.current = maxToasts;
-  const toast = react.useCallback(
+  const toast = React.useCallback(
     (options) => {
       const id = `toast-${++counterRef.current}`;
       const newToast = {
@@ -1824,13 +3188,13 @@ function ToastProvider({ children, position = "top-right", maxToasts = 5 }) {
     },
     []
   );
-  const dismiss = react.useCallback((id) => {
+  const dismiss = React.useCallback((id) => {
     dispatch({ type: "REMOVE", id });
   }, []);
-  const dismissAll = react.useCallback(() => {
+  const dismissAll = React.useCallback(() => {
     dispatch({ type: "REMOVE_ALL" });
   }, []);
-  const value = react.useMemo(() => ({ toast, dismiss, dismissAll }), [toast, dismiss, dismissAll]);
+  const value = React.useMemo(() => ({ toast, dismiss, dismissAll }), [toast, dismiss, dismissAll]);
   const container = typeof document !== "undefined" ? reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -1848,20 +3212,140 @@ function ToastProvider({ children, position = "top-right", maxToasts = 5 }) {
   ] });
 }
 function useToast() {
-  const ctx = react.useContext(ToastContext);
+  const ctx = React.useContext(ToastContext);
   if (!ctx) {
     throw new Error("useToast must be used inside <ToastProvider>");
   }
   return ctx;
 }
+function SavingIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: "h-5 w-5 animate-spin text-white/70",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+          }
+        )
+      ]
+    }
+  );
+}
+function SavedIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: "h-5 w-5 text-green-400",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: 0.4 }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12l2 2 4-4" })
+      ]
+    }
+  );
+}
+function ErrorIcon2() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: "h-5 w-5 text-red-400",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: 0.4 }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 9l-6 6M9 9l6 6" })
+      ]
+    }
+  );
+}
+var statusConfig = {
+  saving: {
+    icon: SavingIcon,
+    defaultText: "Saving...",
+    textClass: "text-white/70"
+  },
+  saved: {
+    icon: SavedIcon,
+    defaultText: "Saved",
+    textClass: "text-green-400"
+  },
+  error: {
+    icon: ErrorIcon2,
+    defaultText: "Error",
+    textClass: "text-red-400"
+  }
+};
+function MutationOverlay({
+  status,
+  savingText,
+  savedText,
+  errorText,
+  className
+}) {
+  if (status === "idle") return null;
+  const config = statusConfig[status];
+  const Icon = config.icon;
+  const text = status === "saving" ? savingText ?? config.defaultText : status === "saved" ? savedText ?? config.defaultText : errorText ?? config.defaultText;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0 z-10 flex items-center justify-center",
+        "bg-surface-50/80 backdrop-blur-sm",
+        "transition-opacity duration-200",
+        className
+      ),
+      role: "status",
+      "aria-live": "polite",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", config.textClass), children: text })
+      ] })
+    }
+  );
+}
 
+exports.ActiveFilterPills = ActiveFilterPills;
+exports.Alert = Alert;
+exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.CollapsibleSection = CollapsibleSection;
+exports.ColorInput = ColorInput;
 exports.ConfirmDialog = ConfirmDialog;
+exports.CooldownRing = CooldownRing;
+exports.CopyField = CopyField;
 exports.DashboardLayout = DashboardLayout;
+exports.Divider = Divider;
+exports.DotIndicator = DotIndicator;
 exports.DropZone = DropZone;
 exports.Dropdown = Dropdown;
 exports.DropdownItem = DropdownItem;
@@ -1869,24 +3353,40 @@ exports.DropdownMenu = DropdownMenu;
 exports.DropdownSeparator = DropdownSeparator;
 exports.DropdownTrigger = DropdownTrigger;
 exports.EmptyState = EmptyState;
+exports.FormField = FormField;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Modal = Modal;
+exports.MutationOverlay = MutationOverlay;
 exports.Navbar = Navbar;
 exports.PageShell = PageShell;
+exports.Pagination = Pagination;
 exports.Pill = Pill;
+exports.ProgressBar = ProgressBar;
 exports.ProgressButton = ProgressButton;
 exports.RadioGroup = RadioGroup;
 exports.RadioItem = RadioItem;
 exports.SearchInput = SearchInput;
+exports.SectionCard = SectionCard;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
 exports.Skeleton = Skeleton;
+exports.Slider = Slider;
 exports.Spinner = Spinner;
+exports.StageProgress = StageProgress;
+exports.StatCard = StatCard;
+exports.Stepper = Stepper;
 exports.Tab = Tab;
 exports.TabList = TabList;
 exports.TabPanel = TabPanel;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
 exports.Tabs = Tabs;
+exports.TagInput = TagInput;
 exports.Textarea = Textarea;
 exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;