@juv/codego-react-ui 1.0.7 → 1.0.8

package/dist/index.js

@@ -1651,6 +1651,32 @@ function ComposableWidget({
     ] })
   ] });
 }
+function MetricRow({ items, divided = true, className }) {
+  return /* @__PURE__ */ jsx13(Card, { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsx13(CardContent, { className: "p-0", children: /* @__PURE__ */ jsx13("div", { className: cn("grid", `grid-cols-${Math.min(items.length, 4)}`), children: items.map((item, i) => /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-1 px-5 py-4",
+        divided && i > 0 && "border-l border-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsx13("span", { className: "text-xs font-medium text-muted-foreground", children: item.label }),
+        /* @__PURE__ */ jsx13("span", { className: cn("text-xl font-bold tabular-nums", item.color && semanticText[item.color]), children: item.value }),
+        item.trendValue && /* @__PURE__ */ jsxs12("span", { className: cn(
+          "text-xs font-medium",
+          item.trend === "up" && "text-success",
+          item.trend === "down" && "text-danger",
+          item.trend === "neutral" && "text-muted-foreground"
+        ), children: [
+          item.trend === "up" && "\u2191 ",
+          item.trend === "down" && "\u2193 ",
+          item.trendValue
+        ] })
+      ]
+    },
+    i
+  )) }) }) });
+}
 
 // src/components/ui/data-grid.tsx
 import * as React12 from "react";
@@ -2672,6 +2698,42 @@ function Dropdown({
     )
   ] });
 }
+function DropdownItem({
+  children,
+  onClick,
+  icon,
+  disabled = false,
+  variant = "default",
+  className
+}) {
+  return /* @__PURE__ */ jsxs18(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: cn(
+        "flex w-full items-center gap-2.5 px-3.5 py-2 text-left text-sm rounded-lg mx-1 transition-colors duration-100",
+        "w-[calc(100%-0.5rem)]",
+        variant === "danger" ? "text-red-400 hover:bg-red-500/15 hover:text-red-300" : "hover:bg-white/8 hover:text-accent-foreground",
+        disabled && "opacity-40 cursor-not-allowed pointer-events-none",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx19("span", { className: "shrink-0 opacity-70", children: icon }),
+        children
+      ]
+    }
+  );
+}
+function DropdownSeparator({ className }) {
+  return /* @__PURE__ */ jsx19("div", { className: cn("my-1.5 h-px bg-white/8", className) });
+}
+function DropdownLabel({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx19("p", { className: cn("px-3.5 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground/60", className), children });
+}
 
 // src/components/ui/file-upload.tsx
 import * as React17 from "react";
@@ -3111,6 +3173,13 @@ var justifyMap = {
   around: "justify-around",
   evenly: "justify-evenly"
 };
+var selfMap = {
+  start: "self-start",
+  center: "self-center",
+  end: "self-end",
+  stretch: "self-stretch",
+  baseline: "self-baseline"
+};
 function FlexLayout({
   direction = "row",
   wrap = "nowrap",
@@ -3131,6 +3200,29 @@ function FlexLayout({
     className
   ), children });
 }
+function FlexItem({
+  grow,
+  shrink,
+  basis,
+  order,
+  alignSelf,
+  children,
+  className
+}) {
+  const style = {};
+  if (grow !== void 0) style.flexGrow = grow === true ? 1 : grow === false ? 0 : grow;
+  if (shrink !== void 0) style.flexShrink = shrink === true ? 1 : shrink === false ? 0 : shrink;
+  if (basis) style.flexBasis = basis;
+  if (order !== void 0) style.order = order;
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      className: cn(alignSelf && selfMap[alignSelf], className),
+      style,
+      children
+    }
+  );
+}
 
 // src/components/ui/grid-layout.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
@@ -3206,6 +3298,17 @@ var justifyMap2 = {
   end: "justify-items-end",
   stretch: "justify-items-stretch"
 };
+var spanMap = {
+  1: "col-span-1",
+  2: "col-span-2",
+  3: "col-span-3",
+  4: "col-span-4",
+  5: "col-span-5",
+  6: "col-span-6",
+  12: "col-span-12",
+  full: "col-span-full"
+};
+var rowSpanMap = { 1: "row-span-1", 2: "row-span-2", 3: "row-span-3" };
 function GridLayout({
   cols = 3,
   smCols,
@@ -3233,6 +3336,13 @@ function GridLayout({
     className
   ), children });
 }
+function GridItem({ span, rowSpan, children, className }) {
+  return /* @__PURE__ */ jsx22("div", { className: cn(
+    span && spanMap[String(span)],
+    rowSpan && rowSpanMap[rowSpan],
+    className
+  ), children });
+}
 
 // src/components/ui/input.tsx
 import * as React18 from "react";
@@ -4953,113 +5063,400 @@ function OtpInput({
   ] }, i)) });
 }
 
-// src/components/ui/popover.tsx
+// src/components/ui/panel.tsx
+import * as React30 from "react";
+import { PanelLeftClose, PanelLeftOpen, Sun as Sun2, Moon } from "lucide-react";
+
+// src/components/ui/tooltip.tsx
 import * as React28 from "react";
-import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
-var PLACEMENT_CLASSES = {
-  "top": "bottom-full left-1/2 -translate-x-1/2 mb-2",
-  "bottom": "top-full left-1/2 -translate-x-1/2 mt-2",
-  "left": "right-full top-1/2 -translate-y-1/2 mr-2",
-  "right": "left-full top-1/2 -translate-y-1/2 ml-2",
-  "top-start": "bottom-full left-0 mb-2",
-  "top-end": "bottom-full right-0 mb-2",
-  "bottom-start": "top-full left-0 mt-2",
-  "bottom-end": "top-full right-0 mt-2"
-};
-function Popover({
-  trigger,
+import * as ReactDOM from "react-dom";
+import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
+function Tooltip({
   content,
-  placement = "bottom-start",
-  triggerOn = "click",
-  open: controlled,
-  onOpenChange,
-  className
+  children,
+  side = "right",
+  className,
+  enabled = true
 }) {
-  const [internal, setInternal] = React28.useState(false);
+  const [visible, setVisible] = React28.useState(false);
+  const [coords, setCoords] = React28.useState({ top: 0, left: 0 });
   const ref = React28.useRef(null);
-  const open = controlled ?? internal;
-  function setOpen(v) {
-    if (controlled === void 0) setInternal(v);
-    onOpenChange?.(v);
+  if (!enabled) return /* @__PURE__ */ jsx33(Fragment7, { children });
+  function calcCoords() {
+    const r = ref.current?.getBoundingClientRect();
+    if (!r) return;
+    const GAP = 8;
+    switch (side) {
+      case "right":
+        setCoords({ top: r.top + r.height / 2, left: r.right + GAP });
+        break;
+      case "left":
+        setCoords({ top: r.top + r.height / 2, left: r.left - GAP });
+        break;
+      case "top":
+        setCoords({ top: r.top - GAP, left: r.left + r.width / 2 });
+        break;
+      case "bottom":
+        setCoords({ top: r.bottom + GAP, left: r.left + r.width / 2 });
+        break;
+    }
   }
-  React28.useEffect(() => {
-    if (triggerOn !== "click") return;
-    function handler(e) {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+  const transformClass = {
+    right: "-translate-y-1/2",
+    left: "-translate-y-1/2 -translate-x-full",
+    top: "-translate-x-1/2 -translate-y-full",
+    bottom: "-translate-x-1/2"
+  }[side];
+  return /* @__PURE__ */ jsxs29(
+    "div",
+    {
+      ref,
+      className: "relative inline-flex",
+      onMouseEnter: () => {
+        calcCoords();
+        setVisible(true);
+      },
+      onMouseLeave: () => setVisible(false),
+      onFocus: () => {
+        calcCoords();
+        setVisible(true);
+      },
+      onBlur: () => setVisible(false),
+      children: [
+        children,
+        visible && ReactDOM.createPortal(
+          /* @__PURE__ */ jsx33(
+            "div",
+            {
+              role: "tooltip",
+              style: { top: coords.top, left: coords.left },
+              className: cn(
+                "fixed z-[9999] whitespace-nowrap rounded-md bg-foreground px-2.5 py-1 text-xs font-medium text-background shadow-lg pointer-events-none",
+                transformClass,
+                className
+              ),
+              children: content
+            }
+          ),
+          document.body
+        )
+      ]
     }
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [triggerOn]);
-  const hoverProps = triggerOn === "hover" ? { onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false) } : {};
-  return /* @__PURE__ */ jsxs29("div", { ref, className: "relative inline-block", ...hoverProps, children: [
-    /* @__PURE__ */ jsx33("div", { onClick: () => triggerOn === "click" && setOpen(!open), children: trigger }),
-    open && /* @__PURE__ */ jsx33("div", { className: cn(
-      "absolute z-50 min-w-max rounded-xl border border-border glass shadow-2xl",
-      PLACEMENT_CLASSES[placement],
-      className
-    ), children: content })
-  ] });
+  );
 }
 
-// src/components/ui/progress.tsx
-import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
-var BAR_COLOR = {
-  default: "bg-primary",
-  success: "bg-success",
-  error: "bg-danger",
-  warning: "bg-warning",
-  info: "bg-info"
+// src/components/theme-provider.tsx
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect18, useState as useState23 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var defaultColors = {
+  primary: "#8b5cf6",
+  primaryHover: "#7c3aed",
+  secondary: "#171717",
+  secondaryHover: "#262626",
+  info: "#3b82f6",
+  infoHover: "#2563eb",
+  warning: "#f59e0b",
+  warningHover: "#d97706",
+  danger: "#ef4444",
+  dangerHover: "#dc2626"
 };
-var STROKE_COLOR = {
-  default: "stroke-primary",
-  success: "stroke-success",
-  error: "stroke-danger",
-  warning: "stroke-warning",
-  info: "stroke-info"
+var initialState = {
+  theme: "system",
+  colors: defaultColors,
+  fontSize: "16px",
+  fontFamily: '"Space Grotesk", "Inter", sans-serif',
+  setTheme: () => null,
+  setColors: () => null,
+  setFontSize: () => null,
+  setFontFamily: () => null,
+  resetSettings: () => null
 };
-var HEIGHT = {
-  xs: "h-1",
-  sm: "h-1.5",
-  md: "h-2.5",
-  lg: "h-4"
+var ThemeProviderContext = createContext2(initialState);
+var COLOR_PALETTE = [
+  { base: "#6366f1", hover: "#4f46e5" },
+  // Indigo
+  { base: "#8b5cf6", hover: "#7c3aed" },
+  // Violet
+  { base: "#3b82f6", hover: "#2563eb" },
+  // Blue
+  { base: "#10b981", hover: "#059669" },
+  // Emerald
+  { base: "#22c55e", hover: "#16a34a" },
+  // Green
+  { base: "#eab308", hover: "#ca8a04" },
+  // Yellow
+  { base: "#f59e0b", hover: "#d97706" },
+  // Amber
+  { base: "#f97316", hover: "#ea580c" },
+  // Orange
+  { base: "#ef4444", hover: "#dc2626" },
+  // Red
+  { base: "#ec4899", hover: "#db2777" }
+  // Pink
+];
+var useTheme = () => {
+  const context = useContext2(ThemeProviderContext);
+  if (context === void 0)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
 };
-function Progress({
-  value = 0,
-  max = 100,
-  variant = "default",
-  size = "md",
-  label,
-  showValue = false,
-  animated = false,
-  striped = false,
-  indeterminate = false,
+
+// src/components/ui/panel.tsx
+import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+var PanelCollapsedContext = React30.createContext(false);
+function PanelThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  return /* @__PURE__ */ jsxs30(
+    "button",
+    {
+      type: "button",
+      onClick: () => setTheme(theme === "light" ? "dark" : "light"),
+      className: "text-muted-foreground hover:text-foreground transition-colors",
+      "aria-label": "Toggle theme",
+      children: [
+        /* @__PURE__ */ jsx35(Sun2, { className: "h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
+        /* @__PURE__ */ jsx35(Moon, { className: "absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" })
+      ]
+    }
+  );
+}
+function Panel({
+  sidebar,
+  sidebarHeader,
+  sidebarFooter,
+  sidebarWidth = "w-56",
+  topbar,
+  topbarTrailing,
+  defaultCollapsed = false,
+  collapsible = false,
+  showThemeToggle = false,
+  defaultPage,
+  height = "h-[520px]",
+  children,
   className
 }) {
-  const pct2 = indeterminate ? 100 : Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs30("div", { className: cn("w-full space-y-1.5", className), children: [
-    (label || showValue) && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
-      label && /* @__PURE__ */ jsx34("span", { children: label }),
-      showValue && !indeterminate && /* @__PURE__ */ jsxs30("span", { children: [
-        Math.round(pct2),
-        "%"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx34("div", { className: cn("w-full overflow-hidden rounded-full bg-muted", HEIGHT[size]), children: /* @__PURE__ */ jsx34(
-      "div",
-      {
-        className: cn(
-          "h-full rounded-full transition-all duration-500",
-          BAR_COLOR[variant],
-          striped && "bg-[repeating-linear-gradient(45deg,transparent,transparent_6px,rgba(255,255,255,0.15)_6px,rgba(255,255,255,0.15)_12px)]",
-          animated && !indeterminate && "transition-none animate-pulse",
-          indeterminate && "animate-[indeterminate_1.5s_ease-in-out_infinite]"
-        ),
-        style: { width: indeterminate ? "40%" : `${pct2}%` }
-      }
-    ) })
-  ] });
-}
-function CircularProgress({
+  const [collapsed, setCollapsed] = React30.useState(defaultCollapsed);
+  return /* @__PURE__ */ jsx35(PanelCollapsedContext.Provider, { value: collapsed, children: /* @__PURE__ */ jsxs30(
+    "div",
+    {
+      className: cn(
+        "relative flex overflow-hidden rounded-xl border border-border bg-background shadow-lg",
+        height,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs30("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
+          /* @__PURE__ */ jsx35("div", { className: "absolute -top-[40%] -left-[20%] h-[80%] w-[60%] rounded-full bg-primary/10 blur-[120px]" }),
+          /* @__PURE__ */ jsx35("div", { className: "absolute -bottom-[40%] -right-[20%] h-[80%] w-[60%] rounded-full bg-info/10 blur-[120px]" })
+        ] }),
+        sidebar && /* @__PURE__ */ jsxs30(
+          "aside",
+          {
+            className: cn(
+              "relative z-10 flex flex-col shrink-0 border-r border-border transition-all duration-200",
+              collapsed ? "w-14" : sidebarWidth
+            ),
+            children: [
+              sidebarHeader && /* @__PURE__ */ jsx35(
+                "div",
+                {
+                  className: cn(
+                    "shrink-0 border-b border-border",
+                    collapsed ? "flex items-center justify-center py-3" : "px-4 py-3 text-sm font-semibold"
+                  ),
+                  children: sidebarHeader
+                }
+              ),
+              /* @__PURE__ */ jsx35("div", { className: "flex-1 overflow-y-auto py-2", children: sidebar }),
+              sidebarFooter && /* @__PURE__ */ jsx35(
+                "div",
+                {
+                  className: cn(
+                    "shrink-0 border-t border-border",
+                    collapsed ? "flex items-center justify-center py-3" : "px-4 py-3"
+                  ),
+                  children: !collapsed && sidebarFooter
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs30("div", { className: "relative z-10 flex flex-1 min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsxs30("header", { className: "flex h-14 shrink-0 items-center justify-between border-b glass px-4 gap-2", children: [
+            /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
+              collapsible && sidebar && /* @__PURE__ */ jsx35(
+                Tooltip,
+                {
+                  content: collapsed ? "Expand sidebar" : "Collapse sidebar",
+                  side: "bottom",
+                  children: /* @__PURE__ */ jsx35(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setCollapsed((c) => !c),
+                      className: "text-muted-foreground hover:text-foreground transition-colors",
+                      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                      children: collapsed ? /* @__PURE__ */ jsx35(PanelLeftOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx35(PanelLeftClose, { className: "h-5 w-5" })
+                    }
+                  )
+                }
+              ),
+              topbar && /* @__PURE__ */ jsx35("div", { className: "flex items-center gap-2", children: topbar })
+            ] }),
+            /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
+              topbarTrailing,
+              showThemeToggle && /* @__PURE__ */ jsx35(PanelThemeToggle, {})
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx35("main", { className: "flex-1 overflow-y-auto p-4", children })
+        ] })
+      ]
+    }
+  ) });
+}
+function PanelSidebarItem({
+  icon: Icon,
+  label,
+  active,
+  onClick
+}) {
+  const collapsed = React30.useContext(PanelCollapsedContext);
+  return /* @__PURE__ */ jsx35(Tooltip, { content: label, side: "right", enabled: collapsed, children: /* @__PURE__ */ jsxs30(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex w-full items-center rounded-md text-sm font-medium transition-colors",
+        collapsed ? "justify-center h-9 w-9 mx-auto px-0" : "gap-2 px-3 py-2",
+        active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-primary/20 hover:text-primary cursor-pointer"
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsx35(Icon, { className: "h-4 w-4 shrink-0" }),
+        !collapsed && /* @__PURE__ */ jsx35("span", { className: "truncate", children: label })
+      ]
+    }
+  ) });
+}
+function PanelSidebarGroup({
+  title,
+  children
+}) {
+  const collapsed = React30.useContext(PanelCollapsedContext);
+  return /* @__PURE__ */ jsxs30("div", { className: "px-2 py-1", children: [
+    title && !collapsed && /* @__PURE__ */ jsx35("p", { className: "mb-1 px-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
+    title && collapsed && /* @__PURE__ */ jsx35("div", { className: "mx-1 mb-1 h-px bg-border" }),
+    /* @__PURE__ */ jsx35("main", { className: "space-y-0.5", children })
+  ] });
+}
+
+// src/components/ui/popover.tsx
+import * as React31 from "react";
+import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+var PLACEMENT_CLASSES = {
+  "top": "bottom-full left-1/2 -translate-x-1/2 mb-2",
+  "bottom": "top-full left-1/2 -translate-x-1/2 mt-2",
+  "left": "right-full top-1/2 -translate-y-1/2 mr-2",
+  "right": "left-full top-1/2 -translate-y-1/2 ml-2",
+  "top-start": "bottom-full left-0 mb-2",
+  "top-end": "bottom-full right-0 mb-2",
+  "bottom-start": "top-full left-0 mt-2",
+  "bottom-end": "top-full right-0 mt-2"
+};
+function Popover({
+  trigger,
+  content,
+  placement = "bottom-start",
+  triggerOn = "click",
+  open: controlled,
+  onOpenChange,
+  className
+}) {
+  const [internal, setInternal] = React31.useState(false);
+  const ref = React31.useRef(null);
+  const open = controlled ?? internal;
+  function setOpen(v) {
+    if (controlled === void 0) setInternal(v);
+    onOpenChange?.(v);
+  }
+  React31.useEffect(() => {
+    if (triggerOn !== "click") return;
+    function handler(e) {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    }
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [triggerOn]);
+  const hoverProps = triggerOn === "hover" ? { onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false) } : {};
+  return /* @__PURE__ */ jsxs31("div", { ref, className: "relative inline-block", ...hoverProps, children: [
+    /* @__PURE__ */ jsx36("div", { onClick: () => triggerOn === "click" && setOpen(!open), children: trigger }),
+    open && /* @__PURE__ */ jsx36("div", { className: cn(
+      "absolute z-50 min-w-max rounded-xl border border-border glass shadow-2xl",
+      PLACEMENT_CLASSES[placement],
+      className
+    ), children: content })
+  ] });
+}
+
+// src/components/ui/progress.tsx
+import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
+var BAR_COLOR = {
+  default: "bg-primary",
+  success: "bg-success",
+  error: "bg-danger",
+  warning: "bg-warning",
+  info: "bg-info"
+};
+var STROKE_COLOR = {
+  default: "stroke-primary",
+  success: "stroke-success",
+  error: "stroke-danger",
+  warning: "stroke-warning",
+  info: "stroke-info"
+};
+var HEIGHT = {
+  xs: "h-1",
+  sm: "h-1.5",
+  md: "h-2.5",
+  lg: "h-4"
+};
+function Progress({
+  value = 0,
+  max = 100,
+  variant = "default",
+  size = "md",
+  label,
+  showValue = false,
+  animated = false,
+  striped = false,
+  indeterminate = false,
+  className
+}) {
+  const pct2 = indeterminate ? 100 : Math.min(100, Math.max(0, value / max * 100));
+  return /* @__PURE__ */ jsxs32("div", { className: cn("w-full space-y-1.5", className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      label && /* @__PURE__ */ jsx37("span", { children: label }),
+      showValue && !indeterminate && /* @__PURE__ */ jsxs32("span", { children: [
+        Math.round(pct2),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx37("div", { className: cn("w-full overflow-hidden rounded-full bg-muted", HEIGHT[size]), children: /* @__PURE__ */ jsx37(
+      "div",
+      {
+        className: cn(
+          "h-full rounded-full transition-all duration-500",
+          BAR_COLOR[variant],
+          striped && "bg-[repeating-linear-gradient(45deg,transparent,transparent_6px,rgba(255,255,255,0.15)_6px,rgba(255,255,255,0.15)_12px)]",
+          animated && !indeterminate && "transition-none animate-pulse",
+          indeterminate && "animate-[indeterminate_1.5s_ease-in-out_infinite]"
+        ),
+        style: { width: indeterminate ? "40%" : `${pct2}%` }
+      }
+    ) })
+  ] });
+}
+function CircularProgress({
   value = 0,
   max = 100,
   variant = "default",
@@ -5074,10 +5471,10 @@ function CircularProgress({
   const circ = 2 * Math.PI * r;
   const pct2 = indeterminate ? 0.75 : Math.min(1, Math.max(0, value / max));
   const dash = pct2 * circ;
-  return /* @__PURE__ */ jsxs30("div", { className: cn("inline-flex flex-col items-center gap-1", className), children: [
-    /* @__PURE__ */ jsxs30("div", { className: "relative", style: { width: size, height: size }, children: [
-      /* @__PURE__ */ jsxs30("svg", { width: size, height: size, className: cn(indeterminate && "animate-spin"), children: [
-        /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs32("div", { className: cn("inline-flex flex-col items-center gap-1", className), children: [
+    /* @__PURE__ */ jsxs32("div", { className: "relative", style: { width: size, height: size }, children: [
+      /* @__PURE__ */ jsxs32("svg", { width: size, height: size, className: cn(indeterminate && "animate-spin"), children: [
+        /* @__PURE__ */ jsx37(
           "circle",
           {
             cx: size / 2,
@@ -5088,7 +5485,7 @@ function CircularProgress({
             className: "stroke-muted"
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx37(
           "circle",
           {
             cx: size / 2,
@@ -5103,18 +5500,55 @@ function CircularProgress({
           }
         )
       ] }),
-      showValue && !indeterminate && /* @__PURE__ */ jsxs30("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-semibold", children: [
+      showValue && !indeterminate && /* @__PURE__ */ jsxs32("span", { className: "absolute inset-0 flex items-center justify-center text-xs font-semibold", children: [
         Math.round(pct2 * 100),
         "%"
       ] })
     ] }),
-    label && /* @__PURE__ */ jsx34("span", { className: "text-xs text-muted-foreground", children: label })
+    label && /* @__PURE__ */ jsx37("span", { className: "text-xs text-muted-foreground", children: label })
+  ] });
+}
+
+// src/components/ui/props-table.tsx
+import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+function PropsTable({ rows }) {
+  return /* @__PURE__ */ jsxs33("div", { className: "w-full space-y-3", children: [
+    /* @__PURE__ */ jsxs33("div", { children: [
+      /* @__PURE__ */ jsx38("h2", { className: "text-2xl font-bold tracking-tight text-gradient", children: "Props" }),
+      /* @__PURE__ */ jsx38("p", { className: "text-muted-foreground", children: "All available props for this component." })
+    ] }),
+    /* @__PURE__ */ jsx38("div", { className: "rounded-xl border border-border overflow-hidden bg-card/50 backdrop-blur-sm shadow-sm", children: /* @__PURE__ */ jsx38("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ jsxs33("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx38("thead", { children: /* @__PURE__ */ jsx38("tr", { className: "border-b border-border bg-muted/40", children: ["Prop", "Type", "Default", "Description"].map((h) => /* @__PURE__ */ jsx38("th", { className: "h-11 px-4 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground whitespace-nowrap", children: h }, h)) }) }),
+      /* @__PURE__ */ jsx38("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsxs33(
+        "tr",
+        {
+          className: cn(
+            "border-b border-border/60 last:border-0 transition-colors hover:bg-muted/20",
+            i % 2 !== 0 && "bg-muted/5"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs33("td", { className: "px-4 py-3 align-top whitespace-nowrap", children: [
+              /* @__PURE__ */ jsx38("code", { className: "font-mono text-xs font-semibold text-primary", children: row.prop }),
+              row.required && /* @__PURE__ */ jsx38("span", { className: "ml-1 text-[10px] font-bold text-danger", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsx38("td", { className: "px-4 py-3 align-top", children: /* @__PURE__ */ jsx38("code", { className: "font-mono text-xs text-info/90 whitespace-pre-wrap", children: row.type }) }),
+            /* @__PURE__ */ jsx38("td", { className: "px-4 py-3 align-top whitespace-nowrap", children: row.default ? /* @__PURE__ */ jsx38("code", { className: "font-mono text-xs text-muted-foreground", children: row.default }) : /* @__PURE__ */ jsx38("span", { className: "text-muted-foreground/40 text-xs", children: "\u2014" }) }),
+            /* @__PURE__ */ jsx38("td", { className: "px-4 py-3 align-top text-xs text-muted-foreground leading-relaxed", children: row.description })
+          ]
+        },
+        row.prop
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ jsxs33("p", { className: "text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx38("span", { className: "text-danger font-bold", children: "*" }),
+      " Required prop"
+    ] })
   ] });
 }
 
 // src/components/ui/radio-group.tsx
-import * as React29 from "react";
-import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
+import * as React32 from "react";
+import { jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
 var SIZE_RADIO = {
   sm: "h-3.5 w-3.5",
   md: "h-4 w-4",
@@ -5136,14 +5570,14 @@ function RadioGroup({
   name,
   className
 }) {
-  const [internal, setInternal] = React29.useState(defaultValue ?? "");
+  const [internal, setInternal] = React32.useState(defaultValue ?? "");
   const active = controlledValue ?? internal;
   function select(val) {
     if (!controlledValue) setInternal(val);
     onChange?.(val);
   }
   if (variant === "card") {
-    return /* @__PURE__ */ jsx35("div", { className: cn("grid gap-3", orientation === "horizontal" ? "grid-flow-col auto-cols-fr" : "grid-cols-1", className), children: options.map((opt) => /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsx39("div", { className: cn("grid gap-3", orientation === "horizontal" ? "grid-flow-col auto-cols-fr" : "grid-cols-1", className), children: options.map((opt) => /* @__PURE__ */ jsxs34(
       "label",
       {
         className: cn(
@@ -5152,428 +5586,163 @@ function RadioGroup({
           active === opt.value ? "border-primary bg-primary/5 ring-1 ring-primary" : "border-border hover:border-primary/40 hover:bg-accent/30"
         ),
         children: [
-          /* @__PURE__ */ jsx35(
-            "input",
-            {
-              type: "radio",
-              name,
-              value: opt.value,
-              checked: active === opt.value,
-              disabled: opt.disabled,
-              onChange: () => select(opt.value),
-              className: "sr-only"
-            }
-          ),
-          /* @__PURE__ */ jsxs31("div", { className: "flex w-full gap-3", children: [
-            opt.icon && /* @__PURE__ */ jsx35("span", { className: "shrink-0 mt-0.5 text-muted-foreground", children: opt.icon }),
-            /* @__PURE__ */ jsxs31("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx35("p", { className: cn("font-medium", SIZE_TEXT[size], active === opt.value && "text-primary"), children: opt.label }),
-              opt.description && /* @__PURE__ */ jsx35("p", { className: "text-xs text-muted-foreground mt-0.5", children: opt.description })
-            ] }),
-            /* @__PURE__ */ jsx35("span", { className: cn(
-              "shrink-0 mt-0.5 rounded-full border-2 flex items-center justify-center transition-colors",
-              SIZE_RADIO[size],
-              active === opt.value ? "border-primary" : "border-muted-foreground/40"
-            ), children: active === opt.value && /* @__PURE__ */ jsx35("span", { className: cn("rounded-full bg-primary", size === "sm" ? "h-1.5 w-1.5" : size === "lg" ? "h-2.5 w-2.5" : "h-2 w-2") }) })
-          ] })
-        ]
-      },
-      opt.value
-    )) });
-  }
-  if (variant === "button") {
-    return /* @__PURE__ */ jsx35("div", { className: cn("flex flex-wrap gap-2", className), children: options.map((opt) => /* @__PURE__ */ jsxs31(
-      "label",
-      {
-        className: cn(
-          "inline-flex items-center gap-2 cursor-pointer rounded-lg border px-3 py-2 font-medium transition-all",
-          SIZE_TEXT[size],
-          opt.disabled && "opacity-40 cursor-not-allowed pointer-events-none",
-          active === opt.value ? "border-primary bg-primary text-primary-foreground" : "border-border hover:border-primary/40 hover:bg-accent/30 text-muted-foreground"
-        ),
-        children: [
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx39(
             "input",
-            {
-              type: "radio",
-              name,
-              value: opt.value,
-              checked: active === opt.value,
-              disabled: opt.disabled,
-              onChange: () => select(opt.value),
-              className: "sr-only"
-            }
-          ),
-          opt.icon && /* @__PURE__ */ jsx35("span", { className: "shrink-0", children: opt.icon }),
-          opt.label
-        ]
-      },
-      opt.value
-    )) });
-  }
-  return /* @__PURE__ */ jsx35("div", { className: cn("flex gap-3", orientation === "horizontal" ? "flex-row flex-wrap" : "flex-col", className), children: options.map((opt) => /* @__PURE__ */ jsxs31(
-    "label",
-    {
-      className: cn(
-        "flex items-start gap-3 cursor-pointer",
-        opt.disabled && "opacity-40 cursor-not-allowed pointer-events-none"
-      ),
-      children: [
-        /* @__PURE__ */ jsx35("span", { className: cn(
-          "mt-0.5 shrink-0 rounded-full border-2 flex items-center justify-center transition-colors",
-          SIZE_RADIO[size],
-          active === opt.value ? "border-primary" : "border-muted-foreground/40"
-        ), children: active === opt.value && /* @__PURE__ */ jsx35("span", { className: cn("rounded-full bg-primary", size === "sm" ? "h-1.5 w-1.5" : size === "lg" ? "h-2.5 w-2.5" : "h-2 w-2") }) }),
-        /* @__PURE__ */ jsx35(
-          "input",
-          {
-            type: "radio",
-            name,
-            value: opt.value,
-            checked: active === opt.value,
-            disabled: opt.disabled,
-            onChange: () => select(opt.value),
-            className: "sr-only"
-          }
-        ),
-        /* @__PURE__ */ jsxs31("div", { children: [
-          /* @__PURE__ */ jsx35("p", { className: cn("font-medium leading-tight", SIZE_TEXT[size]), children: opt.label }),
-          opt.description && /* @__PURE__ */ jsx35("p", { className: "text-xs text-muted-foreground mt-0.5", children: opt.description })
-        ] })
-      ]
-    },
-    opt.value
-  )) });
-}
-
-// src/components/ui/repeater.tsx
-import { Plus as Plus4, Trash2 as Trash22, GripVertical as GripVertical4 } from "lucide-react";
-import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
-function Repeater({
-  items,
-  onAdd,
-  onRemove,
-  renderItem,
-  addButtonText = "Add Item",
-  className
-}) {
-  return /* @__PURE__ */ jsxs32("div", { className: cn("space-y-3", className), children: [
-    items.map((item, index) => /* @__PURE__ */ jsxs32(
-      "div",
-      {
-        className: "group relative flex items-start gap-3 rounded-xl border border-border bg-card/50 backdrop-blur-sm p-4 shadow-sm transition-all duration-200 hover:border-primary/30 hover:shadow-md hover:shadow-primary/5",
-        style: { animation: "fadeSlideIn 0.2s ease-out" },
-        children: [
-          /* @__PURE__ */ jsx36("div", { className: "mt-1 cursor-grab text-muted-foreground/30 group-hover:text-muted-foreground/60 transition-colors shrink-0", children: /* @__PURE__ */ jsx36(GripVertical4, { className: "h-4 w-4" }) }),
-          /* @__PURE__ */ jsx36("div", { className: "mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-[10px] font-semibold text-primary", children: index + 1 }),
-          /* @__PURE__ */ jsx36("div", { className: "flex-1 min-w-0", children: renderItem(item, index) }),
-          /* @__PURE__ */ jsxs32(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "sm",
-              className: "mt-0.5 h-7 w-7 shrink-0 opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-danger hover:bg-danger/10 transition-all duration-150 p-0",
-              onClick: () => onRemove(index),
-              children: [
-                /* @__PURE__ */ jsx36(Trash22, { className: "h-3.5 w-3.5" }),
-                /* @__PURE__ */ jsx36("span", { className: "sr-only", children: "Remove item" })
-              ]
-            }
-          )
-        ]
-      },
-      index
-    )),
-    /* @__PURE__ */ jsxs32(
-      "button",
-      {
-        type: "button",
-        onClick: onAdd,
-        className: "group flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border py-3 text-sm font-medium text-muted-foreground transition-all duration-200 hover:border-primary/50 hover:bg-primary/5 hover:text-primary",
-        children: [
-          /* @__PURE__ */ jsx36("span", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-muted group-hover:bg-primary/10 transition-colors", children: /* @__PURE__ */ jsx36(Plus4, { className: "h-3 w-3" }) }),
-          addButtonText
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx36("style", { children: `
-        @keyframes fadeSlideIn {
-          from { opacity: 0; transform: translateY(-6px); }
-          to   { opacity: 1; transform: translateY(0); }
-        }
-      ` })
-  ] });
-}
-
-// src/components/ui/panel.tsx
-import * as React32 from "react";
-import { PanelLeftClose, PanelLeftOpen, Sun as Sun2, Moon } from "lucide-react";
-
-// src/components/ui/tooltip.tsx
-import * as React30 from "react";
-import * as ReactDOM from "react-dom";
-import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
-function Tooltip({
-  content,
-  children,
-  side = "right",
-  className,
-  enabled = true
-}) {
-  const [visible, setVisible] = React30.useState(false);
-  const [coords, setCoords] = React30.useState({ top: 0, left: 0 });
-  const ref = React30.useRef(null);
-  if (!enabled) return /* @__PURE__ */ jsx37(Fragment7, { children });
-  function calcCoords() {
-    const r = ref.current?.getBoundingClientRect();
-    if (!r) return;
-    const GAP = 8;
-    switch (side) {
-      case "right":
-        setCoords({ top: r.top + r.height / 2, left: r.right + GAP });
-        break;
-      case "left":
-        setCoords({ top: r.top + r.height / 2, left: r.left - GAP });
-        break;
-      case "top":
-        setCoords({ top: r.top - GAP, left: r.left + r.width / 2 });
-        break;
-      case "bottom":
-        setCoords({ top: r.bottom + GAP, left: r.left + r.width / 2 });
-        break;
-    }
-  }
-  const transformClass = {
-    right: "-translate-y-1/2",
-    left: "-translate-y-1/2 -translate-x-full",
-    top: "-translate-x-1/2 -translate-y-full",
-    bottom: "-translate-x-1/2"
-  }[side];
-  return /* @__PURE__ */ jsxs33(
-    "div",
-    {
-      ref,
-      className: "relative inline-flex",
-      onMouseEnter: () => {
-        calcCoords();
-        setVisible(true);
-      },
-      onMouseLeave: () => setVisible(false),
-      onFocus: () => {
-        calcCoords();
-        setVisible(true);
-      },
-      onBlur: () => setVisible(false),
-      children: [
-        children,
-        visible && ReactDOM.createPortal(
-          /* @__PURE__ */ jsx37(
-            "div",
-            {
-              role: "tooltip",
-              style: { top: coords.top, left: coords.left },
-              className: cn(
-                "fixed z-[9999] whitespace-nowrap rounded-md bg-foreground px-2.5 py-1 text-xs font-medium text-background shadow-lg pointer-events-none",
-                transformClass,
-                className
-              ),
-              children: content
-            }
-          ),
-          document.body
-        )
-      ]
-    }
-  );
-}
-
-// src/components/theme-provider.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect19, useState as useState25 } from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
-var defaultColors = {
-  primary: "#8b5cf6",
-  primaryHover: "#7c3aed",
-  secondary: "#171717",
-  secondaryHover: "#262626",
-  info: "#3b82f6",
-  infoHover: "#2563eb",
-  warning: "#f59e0b",
-  warningHover: "#d97706",
-  danger: "#ef4444",
-  dangerHover: "#dc2626"
-};
-var initialState = {
-  theme: "system",
-  colors: defaultColors,
-  fontSize: "16px",
-  fontFamily: '"Space Grotesk", "Inter", sans-serif',
-  setTheme: () => null,
-  setColors: () => null,
-  setFontSize: () => null,
-  setFontFamily: () => null,
-  resetSettings: () => null
-};
-var ThemeProviderContext = createContext2(initialState);
-var useTheme = () => {
-  const context = useContext2(ThemeProviderContext);
-  if (context === void 0)
-    throw new Error("useTheme must be used within a ThemeProvider");
-  return context;
-};
-
-// src/components/ui/panel.tsx
-import { jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
-var PanelCollapsedContext = React32.createContext(false);
-function PanelThemeToggle() {
-  const { theme, setTheme } = useTheme();
-  return /* @__PURE__ */ jsxs34(
-    "button",
-    {
-      type: "button",
-      onClick: () => setTheme(theme === "light" ? "dark" : "light"),
-      className: "text-muted-foreground hover:text-foreground transition-colors",
-      "aria-label": "Toggle theme",
-      children: [
-        /* @__PURE__ */ jsx39(Sun2, { className: "h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
-        /* @__PURE__ */ jsx39(Moon, { className: "absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" })
-      ]
-    }
-  );
-}
-function Panel({
-  sidebar,
-  sidebarHeader,
-  sidebarFooter,
-  sidebarWidth = "w-56",
-  topbar,
-  topbarTrailing,
-  defaultCollapsed = false,
-  collapsible = false,
-  showThemeToggle = false,
-  defaultPage,
-  height = "h-[520px]",
-  children,
-  className
-}) {
-  const [collapsed, setCollapsed] = React32.useState(defaultCollapsed);
-  return /* @__PURE__ */ jsx39(PanelCollapsedContext.Provider, { value: collapsed, children: /* @__PURE__ */ jsxs34(
-    "div",
-    {
-      className: cn(
-        "relative flex overflow-hidden rounded-xl border border-border bg-background shadow-lg",
-        height,
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs34("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
-          /* @__PURE__ */ jsx39("div", { className: "absolute -top-[40%] -left-[20%] h-[80%] w-[60%] rounded-full bg-primary/10 blur-[120px]" }),
-          /* @__PURE__ */ jsx39("div", { className: "absolute -bottom-[40%] -right-[20%] h-[80%] w-[60%] rounded-full bg-info/10 blur-[120px]" })
-        ] }),
-        sidebar && /* @__PURE__ */ jsxs34(
-          "aside",
-          {
-            className: cn(
-              "relative z-10 flex flex-col shrink-0 border-r border-border transition-all duration-200",
-              collapsed ? "w-14" : sidebarWidth
-            ),
-            children: [
-              sidebarHeader && /* @__PURE__ */ jsx39(
-                "div",
-                {
-                  className: cn(
-                    "shrink-0 border-b border-border",
-                    collapsed ? "flex items-center justify-center py-3" : "px-4 py-3 text-sm font-semibold"
-                  ),
-                  children: sidebarHeader
-                }
-              ),
-              /* @__PURE__ */ jsx39("div", { className: "flex-1 overflow-y-auto py-2", children: sidebar }),
-              sidebarFooter && /* @__PURE__ */ jsx39(
-                "div",
-                {
-                  className: cn(
-                    "shrink-0 border-t border-border",
-                    collapsed ? "flex items-center justify-center py-3" : "px-4 py-3"
-                  ),
-                  children: !collapsed && sidebarFooter
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs34("div", { className: "relative z-10 flex flex-1 min-w-0 flex-col", children: [
-          /* @__PURE__ */ jsxs34("header", { className: "flex h-14 shrink-0 items-center justify-between border-b glass px-4 gap-2", children: [
-            /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
-              collapsible && sidebar && /* @__PURE__ */ jsx39(
-                Tooltip,
-                {
-                  content: collapsed ? "Expand sidebar" : "Collapse sidebar",
-                  side: "bottom",
-                  children: /* @__PURE__ */ jsx39(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setCollapsed((c) => !c),
-                      className: "text-muted-foreground hover:text-foreground transition-colors",
-                      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-                      children: collapsed ? /* @__PURE__ */ jsx39(PanelLeftOpen, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx39(PanelLeftClose, { className: "h-5 w-5" })
-                    }
-                  )
-                }
-              ),
-              topbar && /* @__PURE__ */ jsx39("div", { className: "flex items-center gap-2", children: topbar })
-            ] }),
-            /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
-              topbarTrailing,
-              showThemeToggle && /* @__PURE__ */ jsx39(PanelThemeToggle, {})
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx39("main", { className: "flex-1 overflow-y-auto p-4", children })
-        ] })
-      ]
-    }
-  ) });
-}
-function PanelSidebarItem({
-  icon: Icon,
-  label,
-  active,
-  onClick
-}) {
-  const collapsed = React32.useContext(PanelCollapsedContext);
-  return /* @__PURE__ */ jsx39(Tooltip, { content: label, side: "right", enabled: collapsed, children: /* @__PURE__ */ jsxs34(
-    "button",
+            {
+              type: "radio",
+              name,
+              value: opt.value,
+              checked: active === opt.value,
+              disabled: opt.disabled,
+              onChange: () => select(opt.value),
+              className: "sr-only"
+            }
+          ),
+          /* @__PURE__ */ jsxs34("div", { className: "flex w-full gap-3", children: [
+            opt.icon && /* @__PURE__ */ jsx39("span", { className: "shrink-0 mt-0.5 text-muted-foreground", children: opt.icon }),
+            /* @__PURE__ */ jsxs34("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx39("p", { className: cn("font-medium", SIZE_TEXT[size], active === opt.value && "text-primary"), children: opt.label }),
+              opt.description && /* @__PURE__ */ jsx39("p", { className: "text-xs text-muted-foreground mt-0.5", children: opt.description })
+            ] }),
+            /* @__PURE__ */ jsx39("span", { className: cn(
+              "shrink-0 mt-0.5 rounded-full border-2 flex items-center justify-center transition-colors",
+              SIZE_RADIO[size],
+              active === opt.value ? "border-primary" : "border-muted-foreground/40"
+            ), children: active === opt.value && /* @__PURE__ */ jsx39("span", { className: cn("rounded-full bg-primary", size === "sm" ? "h-1.5 w-1.5" : size === "lg" ? "h-2.5 w-2.5" : "h-2 w-2") }) })
+          ] })
+        ]
+      },
+      opt.value
+    )) });
+  }
+  if (variant === "button") {
+    return /* @__PURE__ */ jsx39("div", { className: cn("flex flex-wrap gap-2", className), children: options.map((opt) => /* @__PURE__ */ jsxs34(
+      "label",
+      {
+        className: cn(
+          "inline-flex items-center gap-2 cursor-pointer rounded-lg border px-3 py-2 font-medium transition-all",
+          SIZE_TEXT[size],
+          opt.disabled && "opacity-40 cursor-not-allowed pointer-events-none",
+          active === opt.value ? "border-primary bg-primary text-primary-foreground" : "border-border hover:border-primary/40 hover:bg-accent/30 text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsx39(
+            "input",
+            {
+              type: "radio",
+              name,
+              value: opt.value,
+              checked: active === opt.value,
+              disabled: opt.disabled,
+              onChange: () => select(opt.value),
+              className: "sr-only"
+            }
+          ),
+          opt.icon && /* @__PURE__ */ jsx39("span", { className: "shrink-0", children: opt.icon }),
+          opt.label
+        ]
+      },
+      opt.value
+    )) });
+  }
+  return /* @__PURE__ */ jsx39("div", { className: cn("flex gap-3", orientation === "horizontal" ? "flex-row flex-wrap" : "flex-col", className), children: options.map((opt) => /* @__PURE__ */ jsxs34(
+    "label",
     {
-      type: "button",
-      onClick,
       className: cn(
-        "flex w-full items-center rounded-md text-sm font-medium transition-colors",
-        collapsed ? "justify-center h-9 w-9 mx-auto px-0" : "gap-2 px-3 py-2",
-        active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-primary/20 hover:text-primary cursor-pointer"
+        "flex items-start gap-3 cursor-pointer",
+        opt.disabled && "opacity-40 cursor-not-allowed pointer-events-none"
       ),
       children: [
-        Icon && /* @__PURE__ */ jsx39(Icon, { className: "h-4 w-4 shrink-0" }),
-        !collapsed && /* @__PURE__ */ jsx39("span", { className: "truncate", children: label })
+        /* @__PURE__ */ jsx39("span", { className: cn(
+          "mt-0.5 shrink-0 rounded-full border-2 flex items-center justify-center transition-colors",
+          SIZE_RADIO[size],
+          active === opt.value ? "border-primary" : "border-muted-foreground/40"
+        ), children: active === opt.value && /* @__PURE__ */ jsx39("span", { className: cn("rounded-full bg-primary", size === "sm" ? "h-1.5 w-1.5" : size === "lg" ? "h-2.5 w-2.5" : "h-2 w-2") }) }),
+        /* @__PURE__ */ jsx39(
+          "input",
+          {
+            type: "radio",
+            name,
+            value: opt.value,
+            checked: active === opt.value,
+            disabled: opt.disabled,
+            onChange: () => select(opt.value),
+            className: "sr-only"
+          }
+        ),
+        /* @__PURE__ */ jsxs34("div", { children: [
+          /* @__PURE__ */ jsx39("p", { className: cn("font-medium leading-tight", SIZE_TEXT[size]), children: opt.label }),
+          opt.description && /* @__PURE__ */ jsx39("p", { className: "text-xs text-muted-foreground mt-0.5", children: opt.description })
+        ] })
       ]
-    }
-  ) });
+    },
+    opt.value
+  )) });
 }
-function PanelSidebarGroup({
-  title,
-  children
+
+// src/components/ui/repeater.tsx
+import { Plus as Plus4, Trash2 as Trash22, GripVertical as GripVertical4 } from "lucide-react";
+import { jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
+function Repeater({
+  items,
+  onAdd,
+  onRemove,
+  renderItem,
+  addButtonText = "Add Item",
+  className
 }) {
-  const collapsed = React32.useContext(PanelCollapsedContext);
-  return /* @__PURE__ */ jsxs34("div", { className: "px-2 py-1", children: [
-    title && !collapsed && /* @__PURE__ */ jsx39("p", { className: "mb-1 px-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
-    title && collapsed && /* @__PURE__ */ jsx39("div", { className: "mx-1 mb-1 h-px bg-border" }),
-    /* @__PURE__ */ jsx39("main", { className: "space-y-0.5", children })
+  return /* @__PURE__ */ jsxs35("div", { className: cn("space-y-3", className), children: [
+    items.map((item, index) => /* @__PURE__ */ jsxs35(
+      "div",
+      {
+        className: "group relative flex items-start gap-3 rounded-xl border border-border bg-card/50 backdrop-blur-sm p-4 shadow-sm transition-all duration-200 hover:border-primary/30 hover:shadow-md hover:shadow-primary/5",
+        style: { animation: "fadeSlideIn 0.2s ease-out" },
+        children: [
+          /* @__PURE__ */ jsx40("div", { className: "mt-1 cursor-grab text-muted-foreground/30 group-hover:text-muted-foreground/60 transition-colors shrink-0", children: /* @__PURE__ */ jsx40(GripVertical4, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsx40("div", { className: "mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-[10px] font-semibold text-primary", children: index + 1 }),
+          /* @__PURE__ */ jsx40("div", { className: "flex-1 min-w-0", children: renderItem(item, index) }),
+          /* @__PURE__ */ jsxs35(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "mt-0.5 h-7 w-7 shrink-0 opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-danger hover:bg-danger/10 transition-all duration-150 p-0",
+              onClick: () => onRemove(index),
+              children: [
+                /* @__PURE__ */ jsx40(Trash22, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ jsx40("span", { className: "sr-only", children: "Remove item" })
+              ]
+            }
+          )
+        ]
+      },
+      index
+    )),
+    /* @__PURE__ */ jsxs35(
+      "button",
+      {
+        type: "button",
+        onClick: onAdd,
+        className: "group flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border py-3 text-sm font-medium text-muted-foreground transition-all duration-200 hover:border-primary/50 hover:bg-primary/5 hover:text-primary",
+        children: [
+          /* @__PURE__ */ jsx40("span", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-muted group-hover:bg-primary/10 transition-colors", children: /* @__PURE__ */ jsx40(Plus4, { className: "h-3 w-3" }) }),
+          addButtonText
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx40("style", { children: `
+        @keyframes fadeSlideIn {
+          from { opacity: 0; transform: translateY(-6px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+      ` })
   ] });
 }
 
 // src/components/ui/resizable-panels.tsx
 import * as React33 from "react";
-import { jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 function ResizablePanels({
   children,
   orientation = "horizontal",
@@ -5610,7 +5779,7 @@ function ResizablePanels({
       document.removeEventListener("mouseup", onUp);
     };
   }, [dragging, isHorizontal, minSize, maxSize]);
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       ref: containerRef,
@@ -5621,7 +5790,7 @@ function ResizablePanels({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41(
           "div",
           {
             className: "overflow-auto",
@@ -5629,7 +5798,7 @@ function ResizablePanels({
             children: children[0]
           }
         ),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41(
           "div",
           {
             onMouseDown,
@@ -5639,13 +5808,13 @@ function ResizablePanels({
               dragging && (isHorizontal ? "w-1.5 bg-primary/60" : "h-1.5 bg-primary/60"),
               handleClassName
             ),
-            children: /* @__PURE__ */ jsx40("div", { className: cn(
+            children: /* @__PURE__ */ jsx41("div", { className: cn(
               "rounded-full bg-muted-foreground/40",
               isHorizontal ? "h-8 w-0.5" : "w-8 h-0.5"
             ) })
           }
         ),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41(
           "div",
           {
             className: "flex-1 overflow-auto",
@@ -5661,24 +5830,24 @@ function ResizablePanels({
 // src/components/ui/rich-text-editor.tsx
 import * as React34 from "react";
 import { Bold, Italic, Underline, List, ListOrdered, Link, Heading2, Heading3, Quote, Code, Undo, Redo } from "lucide-react";
-import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
 var TOOLBAR = [
-  { icon: /* @__PURE__ */ jsx41(Undo, { className: "h-3.5 w-3.5" }), command: "undo", title: "Undo" },
-  { icon: /* @__PURE__ */ jsx41(Redo, { className: "h-3.5 w-3.5" }), command: "redo", title: "Redo" },
+  { icon: /* @__PURE__ */ jsx42(Undo, { className: "h-3.5 w-3.5" }), command: "undo", title: "Undo" },
+  { icon: /* @__PURE__ */ jsx42(Redo, { className: "h-3.5 w-3.5" }), command: "redo", title: "Redo" },
   "divider",
-  { icon: /* @__PURE__ */ jsx41(Heading2, { className: "h-3.5 w-3.5" }), command: "formatBlock", value: "h2", title: "Heading 2" },
-  { icon: /* @__PURE__ */ jsx41(Heading3, { className: "h-3.5 w-3.5" }), command: "formatBlock", value: "h3", title: "Heading 3" },
+  { icon: /* @__PURE__ */ jsx42(Heading2, { className: "h-3.5 w-3.5" }), command: "formatBlock", value: "h2", title: "Heading 2" },
+  { icon: /* @__PURE__ */ jsx42(Heading3, { className: "h-3.5 w-3.5" }), command: "formatBlock", value: "h3", title: "Heading 3" },
   "divider",
-  { icon: /* @__PURE__ */ jsx41(Bold, { className: "h-3.5 w-3.5" }), command: "bold", title: "Bold" },
-  { icon: /* @__PURE__ */ jsx41(Italic, { className: "h-3.5 w-3.5" }), command: "italic", title: "Italic" },
-  { icon: /* @__PURE__ */ jsx41(Underline, { className: "h-3.5 w-3.5" }), command: "underline", title: "Underline" },
-  { icon: /* @__PURE__ */ jsx41(Code, { className: "h-3.5 w-3.5" }), command: "formatBlock", value: "pre", title: "Code block" },
+  { icon: /* @__PURE__ */ jsx42(Bold, { className: "h-3.5 w-3.5" }), command: "bold", title: "Bold" },
+  { icon: /* @__PURE__ */ jsx42(Italic, { className: "h-3.5 w-3.5" }), command: "italic", title: "Italic" },
+  { icon: /* @__PURE__ */ jsx42(Underline, { className: "h-3.5 w-3.5" }), command: "underline", title: "Underline" },
+  { icon: /* @__PURE__ */ jsx42(Code, { className: "h-3.5 w-3.5" }), command: "formatBlock", value: "pre", title: "Code block" },
   "divider",
-  { icon: /* @__PURE__ */ jsx41(List, { className: "h-3.5 w-3.5" }), command: "insertUnorderedList", title: "Bullet list" },
-  { icon: /* @__PURE__ */ jsx41(ListOrdered, { className: "h-3.5 w-3.5" }), command: "insertOrderedList", title: "Numbered list" },
-  { icon: /* @__PURE__ */ jsx41(Quote, { className: "h-3.5 w-3.5" }), command: "formatBlock", value: "blockquote", title: "Quote" },
+  { icon: /* @__PURE__ */ jsx42(List, { className: "h-3.5 w-3.5" }), command: "insertUnorderedList", title: "Bullet list" },
+  { icon: /* @__PURE__ */ jsx42(ListOrdered, { className: "h-3.5 w-3.5" }), command: "insertOrderedList", title: "Numbered list" },
+  { icon: /* @__PURE__ */ jsx42(Quote, { className: "h-3.5 w-3.5" }), command: "formatBlock", value: "blockquote", title: "Quote" },
   "divider",
-  { icon: /* @__PURE__ */ jsx41(Link, { className: "h-3.5 w-3.5" }), command: "createLink", title: "Insert link" }
+  { icon: /* @__PURE__ */ jsx42(Link, { className: "h-3.5 w-3.5" }), command: "createLink", title: "Insert link" }
 ];
 function RichTextEditor({
   value: controlled,
@@ -5727,14 +5896,14 @@ function RichTextEditor({
       return false;
     }
   }
-  return /* @__PURE__ */ jsxs36("div", { className: cn(
+  return /* @__PURE__ */ jsxs37("div", { className: cn(
     "rounded-xl border border-border overflow-hidden transition-colors",
     focused && "ring-2 ring-ring border-primary",
     disabled && "opacity-50 pointer-events-none",
     className
   ), children: [
-    /* @__PURE__ */ jsx41("div", { className: "flex flex-wrap items-center gap-0.5 border-b border-border bg-muted/30 px-2 py-1.5", children: TOOLBAR.map(
-      (item, i) => item === "divider" ? /* @__PURE__ */ jsx41("span", { className: "mx-1 h-4 w-px bg-border" }, i) : /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx42("div", { className: "flex flex-wrap items-center gap-0.5 border-b border-border bg-muted/30 px-2 py-1.5", children: TOOLBAR.map(
+      (item, i) => item === "divider" ? /* @__PURE__ */ jsx42("span", { className: "mx-1 h-4 w-px bg-border" }, i) : /* @__PURE__ */ jsx42(
         "button",
         {
           type: "button",
@@ -5752,9 +5921,9 @@ function RichTextEditor({
         i
       )
     ) }),
-    /* @__PURE__ */ jsxs36("div", { className: "relative", children: [
-      isEmpty && !focused && /* @__PURE__ */ jsx41("p", { className: "absolute top-3 left-4 text-sm text-muted-foreground pointer-events-none select-none", children: placeholder }),
-      /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsxs37("div", { className: "relative", children: [
+      isEmpty && !focused && /* @__PURE__ */ jsx42("p", { className: "absolute top-3 left-4 text-sm text-muted-foreground pointer-events-none select-none", children: placeholder }),
+      /* @__PURE__ */ jsx42(
         "div",
         {
           ref: editorRef,
@@ -5781,7 +5950,7 @@ function RichTextEditor({
 }
 
 // src/components/ui/scroll-area.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function ScrollArea({
   maxHeight,
   maxWidth,
@@ -5796,7 +5965,7 @@ function ScrollArea({
     horizontal: "overflow-x-auto overflow-y-hidden",
     both: "overflow-auto"
   }[orientation];
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       className: cn(
@@ -5818,7 +5987,7 @@ function ScrollArea({
 // src/components/ui/section.tsx
 import * as React35 from "react";
 import { ChevronDown as ChevronDown6 } from "lucide-react";
-import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
 var variantWrap = {
   default: "",
   card: "rounded-xl glass shadow-lg overflow-hidden",
@@ -5851,8 +6020,8 @@ function SectionBlock({
   contentClassName
 }) {
   const [open, setOpen] = React35.useState(defaultOpen);
-  return /* @__PURE__ */ jsxs37("div", { className: cn(variantWrap[variant], className), children: [
-    (title || description || action) && /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38("div", { className: cn(variantWrap[variant], className), children: [
+    (title || description || action) && /* @__PURE__ */ jsxs38(
       "div",
       {
         className: cn(
@@ -5863,16 +6032,16 @@ function SectionBlock({
         ),
         onClick: collapsible ? () => setOpen((o) => !o) : void 0,
         children: [
-          /* @__PURE__ */ jsxs37("div", { className: "flex items-start gap-3 min-w-0", children: [
-            icon && /* @__PURE__ */ jsx43("span", { className: "mt-0.5 shrink-0 text-primary", children: icon }),
-            /* @__PURE__ */ jsxs37("div", { className: "min-w-0", children: [
-              title && /* @__PURE__ */ jsx43("h3", { className: "text-base font-semibold leading-tight", children: title }),
-              description && /* @__PURE__ */ jsx43("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description })
+          /* @__PURE__ */ jsxs38("div", { className: "flex items-start gap-3 min-w-0", children: [
+            icon && /* @__PURE__ */ jsx44("span", { className: "mt-0.5 shrink-0 text-primary", children: icon }),
+            /* @__PURE__ */ jsxs38("div", { className: "min-w-0", children: [
+              title && /* @__PURE__ */ jsx44("h3", { className: "text-base font-semibold leading-tight", children: title }),
+              description && /* @__PURE__ */ jsx44("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs37("div", { className: "flex shrink-0 items-center gap-2", children: [
-            action && /* @__PURE__ */ jsx43("div", { onClick: (e) => e.stopPropagation(), children: action }),
-            collapsible && /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsxs38("div", { className: "flex shrink-0 items-center gap-2", children: [
+            action && /* @__PURE__ */ jsx44("div", { onClick: (e) => e.stopPropagation(), children: action }),
+            collapsible && /* @__PURE__ */ jsx44(
               ChevronDown6,
               {
                 className: cn(
@@ -5885,17 +6054,286 @@ function SectionBlock({
         ]
       }
     ),
-    (!collapsible || open) && /* @__PURE__ */ jsx43("div", { className: cn(variantBody[variant], contentClassName), children })
+    (!collapsible || open) && /* @__PURE__ */ jsx44("div", { className: cn(variantBody[variant], contentClassName), children })
+  ] });
+}
+
+// src/components/ui/settings.tsx
+import { RotateCcw as RotateCcw2 } from "lucide-react";
+
+// src/components/ui/tabs.tsx
+import * as React36 from "react";
+import { jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
+var sizeMap = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-4 py-2 text-sm",
+  lg: "px-5 py-2.5 text-base"
+};
+var variantTrack = {
+  line: "border-b border-border gap-0",
+  pill: "bg-muted/50 rounded-xl p-1 gap-1",
+  boxed: "border border-border rounded-xl p-1 gap-1",
+  lifted: "gap-0"
+};
+function tabClass(variant, size, active, disabled) {
+  const base = cn(
+    "inline-flex items-center gap-2 font-medium transition-all duration-150 select-none whitespace-nowrap",
+    sizeMap[size],
+    disabled && "opacity-40 cursor-not-allowed pointer-events-none"
+  );
+  if (variant === "line") return cn(
+    base,
+    "rounded-none border-b-2 -mb-px",
+    active ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground hover:border-border"
+  );
+  if (variant === "pill") return cn(
+    base,
+    "rounded-lg",
+    active ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-background/60"
+  );
+  if (variant === "boxed") return cn(
+    base,
+    "rounded-lg",
+    active ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+  );
+  if (variant === "lifted") return cn(
+    base,
+    "rounded-t-lg border border-b-0",
+    active ? "border-border bg-background text-foreground -mb-px" : "border-transparent text-muted-foreground hover:text-foreground"
+  );
+  return base;
+}
+function Tabs({
+  items,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  variant = "line",
+  size = "md",
+  fullWidth = false,
+  className
+}) {
+  const [internal, setInternal] = React36.useState(defaultValue ?? items[0]?.value ?? "");
+  const active = controlledValue ?? internal;
+  const select = (v) => {
+    if (!controlledValue) setInternal(v);
+    onChange?.(v);
+  };
+  const activeItem = items.find((i) => i.value === active);
+  return /* @__PURE__ */ jsxs39("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx45("div", { className: cn("flex", fullWidth && "w-full", variantTrack[variant]), children: items.map((item) => /* @__PURE__ */ jsxs39(
+      "button",
+      {
+        type: "button",
+        disabled: item.disabled,
+        onClick: () => select(item.value),
+        className: cn(
+          tabClass(variant, size, active === item.value, !!item.disabled),
+          fullWidth && "flex-1 justify-center"
+        ),
+        children: [
+          item.icon && /* @__PURE__ */ jsx45("span", { className: "shrink-0", children: item.icon }),
+          item.label,
+          item.badge && /* @__PURE__ */ jsx45("span", { className: "shrink-0", children: item.badge })
+        ]
+      },
+      item.value
+    )) }),
+    activeItem?.content && /* @__PURE__ */ jsx45("div", { className: "mt-4", children: activeItem.content })
+  ] });
+}
+
+// src/components/ui/settings.tsx
+import { jsx as jsx46, jsxs as jsxs40 } from "react/jsx-runtime";
+var FONT_SIZES = [
+  { value: "14px", label: "Small (14px)" },
+  { value: "16px", label: "Medium (16px)" },
+  { value: "18px", label: "Large (18px)" },
+  { value: "20px", label: "Extra Large (20px)" }
+];
+var FONT_FAMILIES = [
+  { value: '"Space Grotesk", "Inter", sans-serif', label: "Space Grotesk" },
+  { value: '"Inter", sans-serif', label: "Inter" },
+  { value: '"JetBrains Mono", monospace', label: "JetBrains Mono" },
+  { value: "system-ui, sans-serif", label: "System UI" }
+];
+var THEME_OPTIONS = [
+  { value: "light", label: "Light" },
+  { value: "dark", label: "Dark" },
+  { value: "system", label: "System" }
+];
+var COLOR_PAIRS = [
+  { base: "primary", hover: "primaryHover", label: "Primary" },
+  { base: "secondary", hover: "secondaryHover", label: "Secondary" },
+  { base: "info", hover: "infoHover", label: "Info" },
+  { base: "warning", hover: "warningHover", label: "Warning" },
+  { base: "danger", hover: "dangerHover", label: "Danger" }
+];
+function SettingRow({ label, description, children }) {
+  return /* @__PURE__ */ jsxs40("div", { className: "flex items-start justify-between gap-4 py-3 border-b border-border/60 last:border-0", children: [
+    /* @__PURE__ */ jsxs40("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx46("p", { className: "text-sm font-medium", children: label }),
+      description && /* @__PURE__ */ jsx46("p", { className: "text-xs text-muted-foreground mt-0.5", children: description })
+    ] }),
+    /* @__PURE__ */ jsx46("div", { className: "shrink-0", children })
+  ] });
+}
+function SectionHeading({ children }) {
+  return /* @__PURE__ */ jsx46("p", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-3 mt-1", children });
+}
+function AppearancePanel({ onThemeChange }) {
+  const { theme, setTheme } = useTheme();
+  const handleTheme = (v) => {
+    const t = v;
+    setTheme(t);
+    onThemeChange?.(t);
+  };
+  return /* @__PURE__ */ jsxs40("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx46(SectionHeading, { children: "Display" }),
+    /* @__PURE__ */ jsx46(SettingRow, { label: "Theme", description: "Choose between light, dark, or follow system preference.", children: /* @__PURE__ */ jsx46(
+      Select,
+      {
+        options: THEME_OPTIONS,
+        value: theme,
+        onChange: handleTheme,
+        className: "w-32"
+      }
+    ) })
+  ] });
+}
+function ColorsPanel({ onColorsChange }) {
+  const { colors, setColors } = useTheme();
+  const handleColor = (key, value) => {
+    setColors({ [key]: value });
+    onColorsChange?.({ [key]: value });
+  };
+  return /* @__PURE__ */ jsxs40("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs40("div", { children: [
+      /* @__PURE__ */ jsx46(SectionHeading, { children: "Quick Palette" }),
+      /* @__PURE__ */ jsx46("div", { className: "grid grid-cols-10 gap-1.5", children: COLOR_PALETTE.map((c) => /* @__PURE__ */ jsx46(
+        "button",
+        {
+          type: "button",
+          title: c.base,
+          onClick: () => {
+            setColors({ primary: c.base, primaryHover: c.hover });
+            onColorsChange?.({ primary: c.base, primaryHover: c.hover });
+          },
+          className: cn(
+            "h-7 w-full rounded-md border border-white/10 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-ring",
+            colors.primary === c.base && "ring-2 ring-ring ring-offset-1"
+          ),
+          style: { backgroundColor: c.base }
+        },
+        c.base
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs40("div", { children: [
+      /* @__PURE__ */ jsx46(SectionHeading, { children: "Custom Colors" }),
+      /* @__PURE__ */ jsx46("div", { className: "space-y-0", children: COLOR_PAIRS.map((pair) => /* @__PURE__ */ jsxs40("div", { className: "py-3 border-b border-border/60 last:border-0", children: [
+        /* @__PURE__ */ jsx46("p", { className: "text-xs font-semibold mb-2", children: pair.label }),
+        /* @__PURE__ */ jsx46("div", { className: "grid grid-cols-2 gap-3", children: ["base", "hover"].map((variant) => {
+          const key = variant === "base" ? pair.base : pair.hover;
+          return /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx46(
+              Input,
+              {
+                type: "color",
+                value: colors[key],
+                onChange: (e) => handleColor(key, e.target.value),
+                className: "h-7 w-12 cursor-pointer p-0.5 rounded"
+              }
+            ),
+            /* @__PURE__ */ jsxs40("div", { children: [
+              /* @__PURE__ */ jsx46("p", { className: "text-[10px] text-muted-foreground capitalize", children: variant }),
+              /* @__PURE__ */ jsx46("p", { className: "text-xs font-mono", children: colors[key] })
+            ] })
+          ] }, variant);
+        }) })
+      ] }, pair.base)) })
+    ] })
+  ] });
+}
+function TypographyPanel({
+  onFontSizeChange,
+  onFontFamilyChange
+}) {
+  const { fontSize, setFontSize, fontFamily, setFontFamily } = useTheme();
+  const handleSize = (v) => {
+    setFontSize(v);
+    onFontSizeChange?.(v);
+  };
+  const handleFamily = (v) => {
+    setFontFamily(v);
+    onFontFamilyChange?.(v);
+  };
+  return /* @__PURE__ */ jsxs40("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx46(SectionHeading, { children: "Font" }),
+    /* @__PURE__ */ jsx46(SettingRow, { label: "Font Size", description: "Base font size applied across the UI.", children: /* @__PURE__ */ jsx46(Select, { options: FONT_SIZES, value: fontSize, onChange: handleSize, className: "w-44" }) }),
+    /* @__PURE__ */ jsx46(SettingRow, { label: "Font Family", description: "Primary typeface used for all text.", children: /* @__PURE__ */ jsx46(Select, { options: FONT_FAMILIES, value: fontFamily, onChange: handleFamily, className: "w-44" }) }),
+    /* @__PURE__ */ jsxs40("div", { className: "pt-4", children: [
+      /* @__PURE__ */ jsx46(SectionHeading, { children: "Preview" }),
+      /* @__PURE__ */ jsxs40(
+        "div",
+        {
+          className: "rounded-lg border border-border bg-muted/30 p-4 space-y-1",
+          style: { fontFamily, fontSize },
+          children: [
+            /* @__PURE__ */ jsx46("p", { className: "font-bold text-foreground", children: "The quick brown fox" }),
+            /* @__PURE__ */ jsx46("p", { className: "text-muted-foreground", children: "jumps over the lazy dog. 0123456789" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function Settings({
+  defaultTab = "appearance",
+  onThemeChange,
+  onColorsChange,
+  onFontSizeChange,
+  onFontFamilyChange,
+  onReset,
+  className
+}) {
+  const { resetSettings } = useTheme();
+  const handleReset = () => {
+    resetSettings();
+    onReset?.();
+  };
+  const tabs = [
+    {
+      value: "appearance",
+      label: "Appearance",
+      content: /* @__PURE__ */ jsx46(AppearancePanel, { onThemeChange })
+    },
+    {
+      value: "colors",
+      label: "Colors",
+      content: /* @__PURE__ */ jsx46(ColorsPanel, { onColorsChange })
+    },
+    {
+      value: "typography",
+      label: "Typography",
+      content: /* @__PURE__ */ jsx46(TypographyPanel, { onFontSizeChange, onFontFamilyChange })
+    }
+  ];
+  return /* @__PURE__ */ jsxs40("div", { className: cn("flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsx46(Tabs, { items: tabs, defaultValue: defaultTab, variant: "pill" }),
+    /* @__PURE__ */ jsx46("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxs40(Button, { variant: "outline", size: "sm", onClick: handleReset, children: [
+      /* @__PURE__ */ jsx46(RotateCcw2, { className: "h-3.5 w-3.5 mr-1.5" }),
+      "Reset to Defaults"
+    ] }) })
   ] });
 }
 
 // src/components/ui/skeleton.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function Skeleton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx47(
     "div",
     {
       className: cn("animate-pulse rounded-md bg-white/5 backdrop-blur-sm", className),
@@ -5905,8 +6343,8 @@ function Skeleton({
 }
 
 // src/components/ui/slider.tsx
-import * as React36 from "react";
-import { jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
+import * as React37 from "react";
+import { jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
 function pct(val, min, max) {
   return (val - min) / (max - min) * 100;
 }
@@ -5925,8 +6363,8 @@ function Slider({
   showValue = false,
   className
 }) {
-  const [internal, setInternal] = React36.useState(defaultValue);
-  const [hovering, setHovering] = React36.useState(false);
+  const [internal, setInternal] = React37.useState(defaultValue);
+  const [hovering, setHovering] = React37.useState(false);
   const val = controlled ?? internal;
   function handleChange(e) {
     const v = Number(e.target.value);
@@ -5934,20 +6372,20 @@ function Slider({
     onChange?.(v);
   }
   const p = pct(val, min, max);
-  return /* @__PURE__ */ jsxs38("div", { className: cn("w-full space-y-2", className), children: [
-    (label || showValue) && /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-between text-sm", children: [
-      label && /* @__PURE__ */ jsx45("span", { className: "font-medium", children: label }),
-      showValue && /* @__PURE__ */ jsx45("span", { className: "text-muted-foreground tabular-nums", children: val })
+  return /* @__PURE__ */ jsxs41("div", { className: cn("w-full space-y-2", className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between text-sm", children: [
+      label && /* @__PURE__ */ jsx48("span", { className: "font-medium", children: label }),
+      showValue && /* @__PURE__ */ jsx48("span", { className: "text-muted-foreground tabular-nums", children: val })
     ] }),
-    /* @__PURE__ */ jsxs38(
+    /* @__PURE__ */ jsxs41(
       "div",
       {
         className: "relative flex items-center h-5",
         onMouseEnter: () => setHovering(true),
         onMouseLeave: () => setHovering(false),
         children: [
-          /* @__PURE__ */ jsx45("div", { className: "absolute w-full h-1.5 rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ jsx45("div", { className: "h-full rounded-full bg-primary", style: { width: `${p}%` } }) }),
-          showTooltip && hovering && !disabled && /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx48("div", { className: "absolute w-full h-1.5 rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ jsx48("div", { className: "h-full rounded-full bg-primary", style: { width: `${p}%` } }) }),
+          showTooltip && hovering && !disabled && /* @__PURE__ */ jsx48(
             "div",
             {
               className: "absolute -top-8 -translate-x-1/2 bg-foreground text-background text-xs font-medium px-2 py-0.5 rounded-md pointer-events-none",
@@ -5955,7 +6393,7 @@ function Slider({
               children: val
             }
           ),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx48(
             "input",
             {
               type: "range",
@@ -5971,7 +6409,7 @@ function Slider({
               )
             }
           ),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx48(
             "div",
             {
               className: cn(
@@ -5984,9 +6422,9 @@ function Slider({
         ]
       }
     ),
-    (showMarks || marks) && /* @__PURE__ */ jsx45("div", { className: "relative w-full flex justify-between px-0", children: (marks ?? [{ value: min }, { value: max }]).map((m) => /* @__PURE__ */ jsxs38("div", { className: "flex flex-col items-center gap-0.5", style: { position: "absolute", left: `${pct(m.value, min, max)}%`, transform: "translateX(-50%)" }, children: [
-      /* @__PURE__ */ jsx45("span", { className: "h-1 w-0.5 bg-border" }),
-      m.label && /* @__PURE__ */ jsx45("span", { className: "text-[10px] text-muted-foreground", children: m.label })
+    (showMarks || marks) && /* @__PURE__ */ jsx48("div", { className: "relative w-full flex justify-between px-0", children: (marks ?? [{ value: min }, { value: max }]).map((m) => /* @__PURE__ */ jsxs41("div", { className: "flex flex-col items-center gap-0.5", style: { position: "absolute", left: `${pct(m.value, min, max)}%`, transform: "translateX(-50%)" }, children: [
+      /* @__PURE__ */ jsx48("span", { className: "h-1 w-0.5 bg-border" }),
+      m.label && /* @__PURE__ */ jsx48("span", { className: "text-[10px] text-muted-foreground", children: m.label })
     ] }, m.value)) })
   ] });
 }
@@ -6003,8 +6441,8 @@ function RangeSlider({
   showValue = false,
   className
 }) {
-  const [internal, setInternal] = React36.useState(defaultValue);
-  const [active, setActive] = React36.useState(null);
+  const [internal, setInternal] = React37.useState(defaultValue);
+  const [active, setActive] = React37.useState(null);
   const val = controlled ?? internal;
   function handleChange(idx, e) {
     const v = Number(e.target.value);
@@ -6014,21 +6452,21 @@ function RangeSlider({
   }
   const p0 = pct(val[0], min, max);
   const p1 = pct(val[1], min, max);
-  return /* @__PURE__ */ jsxs38("div", { className: cn("w-full space-y-2", className), children: [
-    (label || showValue) && /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-between text-sm", children: [
-      label && /* @__PURE__ */ jsx45("span", { className: "font-medium", children: label }),
-      showValue && /* @__PURE__ */ jsxs38("span", { className: "text-muted-foreground tabular-nums", children: [
+  return /* @__PURE__ */ jsxs41("div", { className: cn("w-full space-y-2", className), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between text-sm", children: [
+      label && /* @__PURE__ */ jsx48("span", { className: "font-medium", children: label }),
+      showValue && /* @__PURE__ */ jsxs41("span", { className: "text-muted-foreground tabular-nums", children: [
         val[0],
         " \u2013 ",
         val[1]
       ] })
     ] }),
-    /* @__PURE__ */ jsxs38("div", { className: "relative flex items-center h-5", children: [
-      /* @__PURE__ */ jsx45("div", { className: "absolute w-full h-1.5 rounded-full bg-muted", children: /* @__PURE__ */ jsx45("div", { className: "absolute h-full rounded-full bg-primary", style: { left: `${p0}%`, width: `${p1 - p0}%` } }) }),
+    /* @__PURE__ */ jsxs41("div", { className: "relative flex items-center h-5", children: [
+      /* @__PURE__ */ jsx48("div", { className: "absolute w-full h-1.5 rounded-full bg-muted", children: /* @__PURE__ */ jsx48("div", { className: "absolute h-full rounded-full bg-primary", style: { left: `${p0}%`, width: `${p1 - p0}%` } }) }),
       [0, 1].map((idx) => {
         const p = idx === 0 ? p0 : p1;
-        return /* @__PURE__ */ jsxs38(React36.Fragment, { children: [
-          showTooltip && active === idx && !disabled && /* @__PURE__ */ jsx45(
+        return /* @__PURE__ */ jsxs41(React37.Fragment, { children: [
+          showTooltip && active === idx && !disabled && /* @__PURE__ */ jsx48(
             "div",
             {
               className: "absolute -top-8 -translate-x-1/2 bg-foreground text-background text-xs font-medium px-2 py-0.5 rounded-md pointer-events-none z-10",
@@ -6036,7 +6474,7 @@ function RangeSlider({
               children: val[idx]
             }
           ),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx48(
             "input",
             {
               type: "range",
@@ -6052,7 +6490,7 @@ function RangeSlider({
               style: { zIndex: idx === 1 ? 2 : 1 }
             }
           ),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx48(
             "div",
             {
               className: "absolute h-4 w-4 rounded-full border-2 border-primary bg-background shadow-md pointer-events-none",
@@ -6067,7 +6505,7 @@ function RangeSlider({
 
 // src/components/ui/stat-card.tsx
 import { TrendingUp, TrendingDown, Minus } from "lucide-react";
-import { jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs42 } from "react/jsx-runtime";
 function Sparkline2({ data, trend }) {
   if (data.length < 2) return null;
   const min = Math.min(...data);
@@ -6081,7 +6519,7 @@ function Sparkline2({ data, trend }) {
     return `${x},${y}`;
   }).join(" ");
   const color = trend === "up" ? "stroke-success" : trend === "down" ? "stroke-danger" : "stroke-primary";
-  return /* @__PURE__ */ jsx46("svg", { width: w, height: h, className: "overflow-visible", children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx49("svg", { width: w, height: h, className: "overflow-visible", children: /* @__PURE__ */ jsx49(
     "polyline",
     {
       points: pts,
@@ -6109,38 +6547,38 @@ function StatCard({
   const TrendIcon = autoTrend === "up" ? TrendingUp : autoTrend === "down" ? TrendingDown : Minus;
   const trendColor = autoTrend === "up" ? "text-success" : autoTrend === "down" ? "text-danger" : "text-muted-foreground";
   if (loading) {
-    return /* @__PURE__ */ jsxs39("div", { className: cn("rounded-xl glass p-5 space-y-3 animate-pulse", className), children: [
-      /* @__PURE__ */ jsx46("div", { className: "h-3 w-24 rounded bg-muted" }),
-      /* @__PURE__ */ jsx46("div", { className: "h-7 w-32 rounded bg-muted" }),
-      /* @__PURE__ */ jsx46("div", { className: "h-3 w-16 rounded bg-muted" })
+    return /* @__PURE__ */ jsxs42("div", { className: cn("rounded-xl glass p-5 space-y-3 animate-pulse", className), children: [
+      /* @__PURE__ */ jsx49("div", { className: "h-3 w-24 rounded bg-muted" }),
+      /* @__PURE__ */ jsx49("div", { className: "h-7 w-32 rounded bg-muted" }),
+      /* @__PURE__ */ jsx49("div", { className: "h-3 w-16 rounded bg-muted" })
     ] });
   }
-  return /* @__PURE__ */ jsxs39("div", { className: cn("rounded-xl glass p-5 space-y-3", className), children: [
-    /* @__PURE__ */ jsxs39("div", { className: "flex items-start justify-between gap-2", children: [
-      /* @__PURE__ */ jsx46("p", { className: "text-sm text-muted-foreground font-medium", children: title }),
-      icon && /* @__PURE__ */ jsx46("span", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary shrink-0", children: icon })
+  return /* @__PURE__ */ jsxs42("div", { className: cn("rounded-xl glass p-5 space-y-3", className), children: [
+    /* @__PURE__ */ jsxs42("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsx49("p", { className: "text-sm text-muted-foreground font-medium", children: title }),
+      icon && /* @__PURE__ */ jsx49("span", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary shrink-0", children: icon })
     ] }),
-    /* @__PURE__ */ jsxs39("div", { className: "flex items-end justify-between gap-2", children: [
-      /* @__PURE__ */ jsx46("p", { className: "text-3xl font-bold tracking-tight", children: value }),
-      sparkline && /* @__PURE__ */ jsx46(Sparkline2, { data: sparkline, trend: autoTrend })
+    /* @__PURE__ */ jsxs42("div", { className: "flex items-end justify-between gap-2", children: [
+      /* @__PURE__ */ jsx49("p", { className: "text-3xl font-bold tracking-tight", children: value }),
+      sparkline && /* @__PURE__ */ jsx49(Sparkline2, { data: sparkline, trend: autoTrend })
     ] }),
-    /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-1.5", children: [
-      change !== void 0 && /* @__PURE__ */ jsxs39("span", { className: cn("flex items-center gap-0.5 text-xs font-semibold", trendColor), children: [
-        /* @__PURE__ */ jsx46(TrendIcon, { className: "h-3.5 w-3.5" }),
+    /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-1.5", children: [
+      change !== void 0 && /* @__PURE__ */ jsxs42("span", { className: cn("flex items-center gap-0.5 text-xs font-semibold", trendColor), children: [
+        /* @__PURE__ */ jsx49(TrendIcon, { className: "h-3.5 w-3.5" }),
         change > 0 ? "+" : "",
         change,
         "%"
       ] }),
-      changeLabel && /* @__PURE__ */ jsx46("span", { className: "text-xs text-muted-foreground", children: changeLabel }),
-      description && !changeLabel && /* @__PURE__ */ jsx46("span", { className: "text-xs text-muted-foreground", children: description })
+      changeLabel && /* @__PURE__ */ jsx49("span", { className: "text-xs text-muted-foreground", children: changeLabel }),
+      description && !changeLabel && /* @__PURE__ */ jsx49("span", { className: "text-xs text-muted-foreground", children: description })
     ] })
   ] });
 }
 
 // src/components/ui/stepper.tsx
-import * as React37 from "react";
+import * as React38 from "react";
 import { Check as Check6, X as X10 } from "lucide-react";
-import { jsx as jsx47, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs43 } from "react/jsx-runtime";
 function getStatus(idx, current) {
   if (idx < current) return "complete";
   if (idx === current) return "current";
@@ -6161,7 +6599,7 @@ function Stepper({
   clickable = false,
   className
 }) {
-  const [internal, setInternal] = React37.useState(defaultCurrent);
+  const [internal, setInternal] = React38.useState(defaultCurrent);
   const current = controlled ?? internal;
   function go(idx) {
     if (!clickable) return;
@@ -6169,20 +6607,20 @@ function Stepper({
     onChange?.(idx);
   }
   const isHorizontal = orientation === "horizontal";
-  return /* @__PURE__ */ jsxs40("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsx47("div", { className: cn(
+  return /* @__PURE__ */ jsxs43("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx50("div", { className: cn(
       "flex",
       isHorizontal ? "flex-row items-start" : "flex-col gap-0"
     ), children: steps.map((step, i) => {
       const status = getStatus(i, current);
       const isLast = i === steps.length - 1;
-      return /* @__PURE__ */ jsx47(React37.Fragment, { children: /* @__PURE__ */ jsxs40("div", { className: cn(
+      return /* @__PURE__ */ jsx50(React38.Fragment, { children: /* @__PURE__ */ jsxs43("div", { className: cn(
         "flex",
         isHorizontal ? "flex-col items-center flex-1" : "flex-row gap-4"
       ), children: [
-        /* @__PURE__ */ jsxs40("div", { className: cn("flex items-center", isHorizontal ? "w-full" : "flex-col"), children: [
-          isHorizontal && i > 0 && /* @__PURE__ */ jsx47("div", { className: cn("flex-1 h-0.5 transition-colors", i <= current ? "bg-primary" : "bg-border") }),
-          /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsxs43("div", { className: cn("flex items-center", isHorizontal ? "w-full" : "flex-col"), children: [
+          isHorizontal && i > 0 && /* @__PURE__ */ jsx50("div", { className: cn("flex-1 h-0.5 transition-colors", i <= current ? "bg-primary" : "bg-border") }),
+          /* @__PURE__ */ jsx50(
             "button",
             {
               type: "button",
@@ -6194,35 +6632,35 @@ function Stepper({
                 clickable && "cursor-pointer hover:scale-110",
                 !clickable && "cursor-default"
               ),
-              children: status === "complete" ? /* @__PURE__ */ jsx47(Check6, { className: "h-4 w-4" }) : status === "error" ? /* @__PURE__ */ jsx47(X10, { className: "h-4 w-4" }) : step.icon ?? /* @__PURE__ */ jsx47("span", { children: i + 1 })
+              children: status === "complete" ? /* @__PURE__ */ jsx50(Check6, { className: "h-4 w-4" }) : status === "error" ? /* @__PURE__ */ jsx50(X10, { className: "h-4 w-4" }) : step.icon ?? /* @__PURE__ */ jsx50("span", { children: i + 1 })
             }
           ),
-          isHorizontal && !isLast && /* @__PURE__ */ jsx47("div", { className: cn("flex-1 h-0.5 transition-colors", i < current ? "bg-primary" : "bg-border") }),
-          !isHorizontal && !isLast && /* @__PURE__ */ jsx47("div", { className: cn("w-0.5 flex-1 min-h-8 transition-colors mt-1", i < current ? "bg-primary" : "bg-border") })
+          isHorizontal && !isLast && /* @__PURE__ */ jsx50("div", { className: cn("flex-1 h-0.5 transition-colors", i < current ? "bg-primary" : "bg-border") }),
+          !isHorizontal && !isLast && /* @__PURE__ */ jsx50("div", { className: cn("w-0.5 flex-1 min-h-8 transition-colors mt-1", i < current ? "bg-primary" : "bg-border") })
         ] }),
-        /* @__PURE__ */ jsxs40("div", { className: cn(
+        /* @__PURE__ */ jsxs43("div", { className: cn(
           isHorizontal ? "mt-2 text-center px-1" : "pb-6 min-w-0"
         ), children: [
-          /* @__PURE__ */ jsxs40("p", { className: cn(
+          /* @__PURE__ */ jsxs43("p", { className: cn(
             "text-sm font-medium leading-tight",
             status === "current" ? "text-primary" : status === "complete" ? "text-foreground" : "text-muted-foreground"
           ), children: [
             step.label,
-            step.optional && /* @__PURE__ */ jsx47("span", { className: "ml-1 text-xs text-muted-foreground", children: "(optional)" })
+            step.optional && /* @__PURE__ */ jsx50("span", { className: "ml-1 text-xs text-muted-foreground", children: "(optional)" })
           ] }),
-          step.description && /* @__PURE__ */ jsx47("p", { className: "text-xs text-muted-foreground mt-0.5", children: step.description }),
-          !isHorizontal && step.content && i === current && /* @__PURE__ */ jsx47("div", { className: "mt-3", children: step.content })
+          step.description && /* @__PURE__ */ jsx50("p", { className: "text-xs text-muted-foreground mt-0.5", children: step.description }),
+          !isHorizontal && step.content && i === current && /* @__PURE__ */ jsx50("div", { className: "mt-3", children: step.content })
         ] })
       ] }) }, i);
     }) }),
-    isHorizontal && steps[current]?.content && /* @__PURE__ */ jsx47("div", { className: "mt-6", children: steps[current].content })
+    isHorizontal && steps[current]?.content && /* @__PURE__ */ jsx50("div", { className: "mt-6", children: steps[current].content })
   ] });
 }
 
 // src/components/ui/table.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import { ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight8, Search as Search5, Trash2 as Trash23, ChevronsUpDown as ChevronsUpDown2, ChevronUp as ChevronUp2, ChevronDown as ChevronDown7, X as X11 } from "lucide-react";
-import { Fragment as Fragment10, jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx51, jsxs as jsxs44 } from "react/jsx-runtime";
 var BADGE_COLORS = {
   active: "bg-success/10 text-success border-success/20",
   inactive: "bg-muted text-muted-foreground border-border",
@@ -6245,11 +6683,11 @@ function Table({
   idKey = "id",
   className
 }) {
-  const [search, setSearch] = React38.useState("");
-  const [currentPage, setCurrentPage] = React38.useState(1);
-  const [selectedIds, setSelectedIds] = React38.useState([]);
-  const [sortKey, setSortKey] = React38.useState(null);
-  const [sortDir, setSortDir] = React38.useState(null);
+  const [search, setSearch] = React39.useState("");
+  const [currentPage, setCurrentPage] = React39.useState(1);
+  const [selectedIds, setSelectedIds] = React39.useState([]);
+  const [sortKey, setSortKey] = React39.useState(null);
+  const [sortDir, setSortDir] = React39.useState(null);
   const handleSort = (key) => {
     if (sortKey !== key) {
       setSortKey(key);
@@ -6263,7 +6701,7 @@ function Table({
     setSortKey(null);
     setSortDir(null);
   };
-  const filteredData = React38.useMemo(() => {
+  const filteredData = React39.useMemo(() => {
     let d = search ? data.filter(
       (item) => Object.values(item).some(
         (val) => val && typeof val === "string" && val.toLowerCase().includes(search.toLowerCase())
@@ -6281,18 +6719,18 @@ function Table({
   }, [data, search, sortKey, sortDir]);
   const totalPages = Math.max(1, Math.ceil(filteredData.length / itemsPerPage));
   const safePage = Math.min(currentPage, totalPages);
-  const paginatedData = React38.useMemo(() => {
+  const paginatedData = React39.useMemo(() => {
     if (!pagination) return filteredData;
     const start = (safePage - 1) * itemsPerPage;
     return filteredData.slice(start, start + itemsPerPage);
   }, [filteredData, pagination, safePage, itemsPerPage]);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     setCurrentPage(1);
   }, [search]);
   const handleSelectAll = (checked) => setSelectedIds(checked ? paginatedData.map((item) => String(item[idKey])) : []);
   const handleSelect = (id, checked) => setSelectedIds((prev) => checked ? [...prev, id] : prev.filter((i) => i !== id));
   const allSelected = paginatedData.length > 0 && selectedIds.length === paginatedData.length;
-  const pagePills = React38.useMemo(() => {
+  const pagePills = React39.useMemo(() => {
     if (totalPages <= 5) return Array.from({ length: totalPages }, (_, i) => i + 1);
     if (safePage <= 3) return [1, 2, 3, 4, 5];
     if (safePage >= totalPages - 2) return [totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
@@ -6300,14 +6738,14 @@ function Table({
   }, [totalPages, safePage]);
   const SortIcon = ({ col }) => {
     if (!col.sortable) return null;
-    if (sortKey !== String(col.key)) return /* @__PURE__ */ jsx48(ChevronsUpDown2, { className: "ml-1.5 h-3.5 w-3.5 opacity-40" });
-    return sortDir === "asc" ? /* @__PURE__ */ jsx48(ChevronUp2, { className: "ml-1.5 h-3.5 w-3.5 text-primary" }) : /* @__PURE__ */ jsx48(ChevronDown7, { className: "ml-1.5 h-3.5 w-3.5 text-primary" });
+    if (sortKey !== String(col.key)) return /* @__PURE__ */ jsx51(ChevronsUpDown2, { className: "ml-1.5 h-3.5 w-3.5 opacity-40" });
+    return sortDir === "asc" ? /* @__PURE__ */ jsx51(ChevronUp2, { className: "ml-1.5 h-3.5 w-3.5 text-primary" }) : /* @__PURE__ */ jsx51(ChevronDown7, { className: "ml-1.5 h-3.5 w-3.5 text-primary" });
   };
-  return /* @__PURE__ */ jsxs41("div", { className: cn("w-full space-y-3", className), children: [
-    /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [
-      searchable && /* @__PURE__ */ jsxs41("div", { className: "relative w-72", children: [
-        /* @__PURE__ */ jsx48(Search5, { className: "absolute text-primary left-3 top-1/2 -translate-y-1/2 h-4 w-4 z-10" }),
-        /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs44("div", { className: cn("w-full space-y-3", className), children: [
+    /* @__PURE__ */ jsxs44("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [
+      searchable && /* @__PURE__ */ jsxs44("div", { className: "relative w-72", children: [
+        /* @__PURE__ */ jsx51(Search5, { className: "absolute text-primary left-3 top-1/2 -translate-y-1/2 h-4 w-4 z-10" }),
+        /* @__PURE__ */ jsx51(
           "input",
           {
             placeholder: searchPlaceholder,
@@ -6316,17 +6754,17 @@ function Table({
             className: "h-9 w-full rounded-xl border border-border bg-background/50 backdrop-blur-sm pl-9 pr-8 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 transition-colors hover:bg-background/80"
           }
         ),
-        search && /* @__PURE__ */ jsx48(
+        search && /* @__PURE__ */ jsx51(
           "button",
           {
             onClick: () => setSearch(""),
             className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
-            children: /* @__PURE__ */ jsx48(X11, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ jsx51(X11, { className: "h-3.5 w-3.5" })
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2 ml-auto", children: [
-        selectable && onBulkDelete && selectedIds.length > 0 && /* @__PURE__ */ jsxs41(
+      /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-2 ml-auto", children: [
+        selectable && onBulkDelete && selectedIds.length > 0 && /* @__PURE__ */ jsxs44(
           "button",
           {
             onClick: () => {
@@ -6335,14 +6773,14 @@ function Table({
             },
             className: "inline-flex items-center gap-1.5 rounded-lg bg-danger/10 border border-danger/20 px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors",
             children: [
-              /* @__PURE__ */ jsx48(Trash23, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsx51(Trash23, { className: "h-3.5 w-3.5" }),
               "Delete ",
               selectedIds.length,
               " selected"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs41("span", { className: "text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs44("span", { className: "text-xs text-muted-foreground", children: [
           filteredData.length,
           " ",
           filteredData.length === 1 ? "row" : "rows",
@@ -6350,16 +6788,16 @@ function Table({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx48("div", { className: "rounded-xl border border-border overflow-hidden bg-card/50 backdrop-blur-sm shadow-sm", children: /* @__PURE__ */ jsx48("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ jsxs41("table", { className: "w-full caption-bottom text-sm", children: [
-      /* @__PURE__ */ jsx48("thead", { children: /* @__PURE__ */ jsxs41("tr", { className: "border-b border-border bg-muted/40", children: [
-        selectable && /* @__PURE__ */ jsx48("th", { className: "h-11 w-[46px] px-4 text-left align-middle", children: /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx51("div", { className: "rounded-xl border border-border overflow-hidden bg-card/50 backdrop-blur-sm shadow-sm", children: /* @__PURE__ */ jsx51("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ jsxs44("table", { className: "w-full caption-bottom text-sm", children: [
+      /* @__PURE__ */ jsx51("thead", { children: /* @__PURE__ */ jsxs44("tr", { className: "border-b border-border bg-muted/40", children: [
+        selectable && /* @__PURE__ */ jsx51("th", { className: "h-11 w-[46px] px-4 text-left align-middle", children: /* @__PURE__ */ jsx51(
           Checkbox,
           {
             checked: allSelected,
             onChange: (e) => handleSelectAll(e.target.checked)
           }
         ) }),
-        columns.map((col) => /* @__PURE__ */ jsx48(
+        columns.map((col) => /* @__PURE__ */ jsx51(
           "th",
           {
             onClick: () => col.sortable && handleSort(String(col.key)),
@@ -6367,29 +6805,29 @@ function Table({
               "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-wider text-muted-foreground select-none whitespace-nowrap",
               col.sortable && "cursor-pointer hover:text-foreground transition-colors"
             ),
-            children: /* @__PURE__ */ jsxs41("span", { className: "inline-flex items-center", children: [
+            children: /* @__PURE__ */ jsxs44("span", { className: "inline-flex items-center", children: [
               col.title,
-              /* @__PURE__ */ jsx48(SortIcon, { col })
+              /* @__PURE__ */ jsx51(SortIcon, { col })
             ] })
           },
           String(col.key)
         ))
       ] }) }),
-      /* @__PURE__ */ jsx48("tbody", { children: paginatedData.length === 0 ? /* @__PURE__ */ jsx48("tr", { children: /* @__PURE__ */ jsx48(
+      /* @__PURE__ */ jsx51("tbody", { children: paginatedData.length === 0 ? /* @__PURE__ */ jsx51("tr", { children: /* @__PURE__ */ jsx51(
         "td",
         {
           colSpan: columns.length + (selectable ? 1 : 0),
           className: "h-32 text-center align-middle",
-          children: /* @__PURE__ */ jsxs41("div", { className: "flex flex-col items-center gap-1 text-muted-foreground", children: [
-            /* @__PURE__ */ jsx48(Search5, { className: "h-8 w-8 opacity-20" }),
-            /* @__PURE__ */ jsx48("span", { className: "text-sm", children: "No results found" }),
-            search && /* @__PURE__ */ jsx48("button", { onClick: () => setSearch(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
+          children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-col items-center gap-1 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx51(Search5, { className: "h-8 w-8 opacity-20" }),
+            /* @__PURE__ */ jsx51("span", { className: "text-sm", children: "No results found" }),
+            search && /* @__PURE__ */ jsx51("button", { onClick: () => setSearch(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
           ] })
         }
       ) }) : paginatedData.map((item, i) => {
         const id = String(item[idKey] || i);
         const isSelected = selectedIds.includes(id);
-        return /* @__PURE__ */ jsxs41(
+        return /* @__PURE__ */ jsxs44(
           "tr",
           {
             className: cn(
@@ -6397,38 +6835,38 @@ function Table({
               isSelected ? "bg-primary/5 hover:bg-primary/8" : "hover:bg-muted/30"
             ),
             children: [
-              selectable && /* @__PURE__ */ jsx48("td", { className: "px-4 py-3 align-middle", children: /* @__PURE__ */ jsx48(
+              selectable && /* @__PURE__ */ jsx51("td", { className: "px-4 py-3 align-middle", children: /* @__PURE__ */ jsx51(
                 Checkbox,
                 {
                   checked: isSelected,
                   onChange: (e) => handleSelect(id, e.target.checked)
                 }
               ) }),
-              columns.map((col) => /* @__PURE__ */ jsx48("td", { className: "px-4 py-3 align-middle", children: col.render ? col.render(item) : col.type === "image" ? /* @__PURE__ */ jsx48(
+              columns.map((col) => /* @__PURE__ */ jsx51("td", { className: "px-4 py-3 align-middle", children: col.render ? col.render(item) : col.type === "image" ? /* @__PURE__ */ jsx51(
                 "img",
                 {
                   src: item[col.key],
                   alt: item[col.key],
                   className: "h-9 w-9 rounded-lg object-cover ring-1 ring-border"
                 }
-              ) : col.type === "badge" ? /* @__PURE__ */ jsxs41("span", { className: cn(
+              ) : col.type === "badge" ? /* @__PURE__ */ jsxs44("span", { className: cn(
                 "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium",
                 badgeClass(String(item[col.key]))
               ), children: [
-                /* @__PURE__ */ jsx48("span", { className: cn(
+                /* @__PURE__ */ jsx51("span", { className: cn(
                   "mr-1.5 h-1.5 w-1.5 rounded-full",
                   badgeClass(String(item[col.key])).includes("success") ? "bg-success" : badgeClass(String(item[col.key])).includes("warning") ? "bg-warning" : badgeClass(String(item[col.key])).includes("danger") ? "bg-danger" : badgeClass(String(item[col.key])).includes("info") ? "bg-info" : "bg-primary"
                 ) }),
                 item[col.key]
-              ] }) : col.type === "stack" ? /* @__PURE__ */ jsx48(AvatarStack, { images: Array.isArray(item[col.key]) ? item[col.key] : [], ...col.stackProps ?? {} }) : col.type === "icon" ? /* @__PURE__ */ jsx48("span", { className: "flex items-center", children: item[col.key] }) : col.type === "select" ? /* @__PURE__ */ jsx48(
+              ] }) : col.type === "stack" ? /* @__PURE__ */ jsx51(AvatarStack, { images: Array.isArray(item[col.key]) ? item[col.key] : [], ...col.stackProps ?? {} }) : col.type === "icon" ? /* @__PURE__ */ jsx51("span", { className: "flex items-center", children: item[col.key] }) : col.type === "select" ? /* @__PURE__ */ jsx51(
                 "select",
                 {
                   value: item[col.key],
                   onChange: (e) => col.onChange?.(item, e.target.value),
                   className: "h-8 rounded-lg border border-border bg-background/50 px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors",
-                  children: (col.selectOptions ?? []).map((opt) => /* @__PURE__ */ jsx48("option", { value: opt, children: opt }, opt))
+                  children: (col.selectOptions ?? []).map((opt) => /* @__PURE__ */ jsx51("option", { value: opt, children: opt }, opt))
                 }
-              ) : col.type === "toggle" ? /* @__PURE__ */ jsx48(
+              ) : col.type === "toggle" ? /* @__PURE__ */ jsx51(
                 "button",
                 {
                   role: "switch",
@@ -6438,13 +6876,13 @@ function Table({
                     "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                     item[col.key] ? "bg-primary" : "bg-muted"
                   ),
-                  children: /* @__PURE__ */ jsx48("span", { className: cn(
+                  children: /* @__PURE__ */ jsx51("span", { className: cn(
                     "pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
                     item[col.key] ? "translate-x-4" : "translate-x-0"
                   ) })
                 }
-              ) : col.type === "color" ? /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx48(
+              ) : col.type === "color" ? /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx51(
                   "input",
                   {
                     type: "color",
@@ -6453,22 +6891,22 @@ function Table({
                     className: "h-7 w-7 cursor-pointer rounded border border-border bg-transparent p-0.5"
                   }
                 ),
-                /* @__PURE__ */ jsx48("span", { className: "text-xs text-muted-foreground font-mono", children: item[col.key] })
-              ] }) : col.type === "checkbox" ? /* @__PURE__ */ jsx48(
+                /* @__PURE__ */ jsx51("span", { className: "text-xs text-muted-foreground font-mono", children: item[col.key] })
+              ] }) : col.type === "checkbox" ? /* @__PURE__ */ jsx51(
                 Checkbox,
                 {
                   checked: !!item[col.key],
                   onChange: (e) => col.onChange?.(item, e.target.checked)
                 }
-              ) : /* @__PURE__ */ jsx48("span", { className: "text-foreground/90", children: item[col.key] }) }, String(col.key)))
+              ) : /* @__PURE__ */ jsx51("span", { className: "text-foreground/90", children: item[col.key] }) }, String(col.key)))
             ]
           },
           id
         );
       }) })
     ] }) }) }),
-    pagination && totalPages > 1 && /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
-      /* @__PURE__ */ jsxs41("span", { className: "text-xs text-muted-foreground", children: [
+    pagination && totalPages > 1 && /* @__PURE__ */ jsxs44("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsxs44("span", { className: "text-xs text-muted-foreground", children: [
         "Showing ",
         (safePage - 1) * itemsPerPage + 1,
         "\u2013",
@@ -6476,21 +6914,21 @@ function Table({
         " of ",
         filteredData.length
       ] }),
-      /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx48(
+      /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx51(
           "button",
           {
             onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
             disabled: safePage === 1,
             className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:pointer-events-none",
-            children: /* @__PURE__ */ jsx48(ChevronLeft5, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx51(ChevronLeft5, { className: "h-4 w-4" })
           }
         ),
-        pagePills[0] > 1 && /* @__PURE__ */ jsxs41(Fragment10, { children: [
-          /* @__PURE__ */ jsx48("button", { onClick: () => setCurrentPage(1), className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border text-xs text-muted-foreground hover:bg-muted transition-colors", children: "1" }),
-          pagePills[0] > 2 && /* @__PURE__ */ jsx48("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" })
+        pagePills[0] > 1 && /* @__PURE__ */ jsxs44(Fragment10, { children: [
+          /* @__PURE__ */ jsx51("button", { onClick: () => setCurrentPage(1), className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border text-xs text-muted-foreground hover:bg-muted transition-colors", children: "1" }),
+          pagePills[0] > 2 && /* @__PURE__ */ jsx51("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" })
         ] }),
-        pagePills.map((p) => /* @__PURE__ */ jsx48(
+        pagePills.map((p) => /* @__PURE__ */ jsx51(
           "button",
           {
             onClick: () => setCurrentPage(p),
@@ -6502,17 +6940,17 @@ function Table({
           },
           p
         )),
-        pagePills[pagePills.length - 1] < totalPages && /* @__PURE__ */ jsxs41(Fragment10, { children: [
-          pagePills[pagePills.length - 1] < totalPages - 1 && /* @__PURE__ */ jsx48("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" }),
-          /* @__PURE__ */ jsx48("button", { onClick: () => setCurrentPage(totalPages), className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border text-xs text-muted-foreground hover:bg-muted transition-colors", children: totalPages })
+        pagePills[pagePills.length - 1] < totalPages && /* @__PURE__ */ jsxs44(Fragment10, { children: [
+          pagePills[pagePills.length - 1] < totalPages - 1 && /* @__PURE__ */ jsx51("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" }),
+          /* @__PURE__ */ jsx51("button", { onClick: () => setCurrentPage(totalPages), className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border text-xs text-muted-foreground hover:bg-muted transition-colors", children: totalPages })
         ] }),
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx51(
           "button",
           {
             onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
             disabled: safePage === totalPages,
             className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:pointer-events-none",
-            children: /* @__PURE__ */ jsx48(ChevronRight8, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx51(ChevronRight8, { className: "h-4 w-4" })
           }
         )
       ] })
@@ -6520,91 +6958,9 @@ function Table({
   ] });
 }
 
-// src/components/ui/tabs.tsx
-import * as React39 from "react";
-import { jsx as jsx49, jsxs as jsxs42 } from "react/jsx-runtime";
-var sizeMap = {
-  sm: "px-3 py-1.5 text-xs",
-  md: "px-4 py-2 text-sm",
-  lg: "px-5 py-2.5 text-base"
-};
-var variantTrack = {
-  line: "border-b border-border gap-0",
-  pill: "bg-muted/50 rounded-xl p-1 gap-1",
-  boxed: "border border-border rounded-xl p-1 gap-1",
-  lifted: "gap-0"
-};
-function tabClass(variant, size, active, disabled) {
-  const base = cn(
-    "inline-flex items-center gap-2 font-medium transition-all duration-150 select-none whitespace-nowrap",
-    sizeMap[size],
-    disabled && "opacity-40 cursor-not-allowed pointer-events-none"
-  );
-  if (variant === "line") return cn(
-    base,
-    "rounded-none border-b-2 -mb-px",
-    active ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground hover:border-border"
-  );
-  if (variant === "pill") return cn(
-    base,
-    "rounded-lg",
-    active ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-background/60"
-  );
-  if (variant === "boxed") return cn(
-    base,
-    "rounded-lg",
-    active ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
-  );
-  if (variant === "lifted") return cn(
-    base,
-    "rounded-t-lg border border-b-0",
-    active ? "border-border bg-background text-foreground -mb-px" : "border-transparent text-muted-foreground hover:text-foreground"
-  );
-  return base;
-}
-function Tabs({
-  items,
-  value: controlledValue,
-  defaultValue,
-  onChange,
-  variant = "line",
-  size = "md",
-  fullWidth = false,
-  className
-}) {
-  const [internal, setInternal] = React39.useState(defaultValue ?? items[0]?.value ?? "");
-  const active = controlledValue ?? internal;
-  const select = (v) => {
-    if (!controlledValue) setInternal(v);
-    onChange?.(v);
-  };
-  const activeItem = items.find((i) => i.value === active);
-  return /* @__PURE__ */ jsxs42("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsx49("div", { className: cn("flex", fullWidth && "w-full", variantTrack[variant]), children: items.map((item) => /* @__PURE__ */ jsxs42(
-      "button",
-      {
-        type: "button",
-        disabled: item.disabled,
-        onClick: () => select(item.value),
-        className: cn(
-          tabClass(variant, size, active === item.value, !!item.disabled),
-          fullWidth && "flex-1 justify-center"
-        ),
-        children: [
-          item.icon && /* @__PURE__ */ jsx49("span", { className: "shrink-0", children: item.icon }),
-          item.label,
-          item.badge && /* @__PURE__ */ jsx49("span", { className: "shrink-0", children: item.badge })
-        ]
-      },
-      item.value
-    )) }),
-    activeItem?.content && /* @__PURE__ */ jsx49("div", { className: "mt-4", children: activeItem.content })
-  ] });
-}
-
 // src/components/ui/tag-input.tsx
 import * as React40 from "react";
-import { jsx as jsx50, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs45 } from "react/jsx-runtime";
 function TagInput({
   value: controlled,
   defaultValue = [],
@@ -6642,7 +6998,7 @@ function TagInput({
       removeTag(tags.length - 1);
     }
   }
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       className: cn(
@@ -6653,8 +7009,8 @@ function TagInput({
       ),
       onClick: () => inputRef.current?.focus(),
       children: [
-        tags.map((tag, i) => /* @__PURE__ */ jsx50(Badge, { variant: "default", size: "sm", removable: true, onRemove: () => removeTag(i), children: tag }, i)),
-        /* @__PURE__ */ jsx50(
+        tags.map((tag, i) => /* @__PURE__ */ jsx52(Badge, { variant: "default", size: "sm", removable: true, onRemove: () => removeTag(i), children: tag }, i)),
+        /* @__PURE__ */ jsx52(
           "input",
           {
             ref: inputRef,
@@ -6674,7 +7030,7 @@ function TagInput({
 
 // src/components/ui/timeline.tsx
 import { CheckCircle as CheckCircle3, XCircle as XCircle2, AlertTriangle as AlertTriangle3, Info as Info2, Circle } from "lucide-react";
-import { jsx as jsx51, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
 var DOT_COLOR = {
   default: "bg-primary border-primary/30",
   success: "bg-success border-success/30",
@@ -6690,32 +7046,32 @@ var ICON_COLOR = {
   info: "text-info"
 };
 var DEFAULT_ICON = {
-  default: /* @__PURE__ */ jsx51(Circle, { className: "h-3 w-3" }),
-  success: /* @__PURE__ */ jsx51(CheckCircle3, { className: "h-3.5 w-3.5" }),
-  error: /* @__PURE__ */ jsx51(XCircle2, { className: "h-3.5 w-3.5" }),
-  warning: /* @__PURE__ */ jsx51(AlertTriangle3, { className: "h-3.5 w-3.5" }),
-  info: /* @__PURE__ */ jsx51(Info2, { className: "h-3.5 w-3.5" })
+  default: /* @__PURE__ */ jsx53(Circle, { className: "h-3 w-3" }),
+  success: /* @__PURE__ */ jsx53(CheckCircle3, { className: "h-3.5 w-3.5" }),
+  error: /* @__PURE__ */ jsx53(XCircle2, { className: "h-3.5 w-3.5" }),
+  warning: /* @__PURE__ */ jsx53(AlertTriangle3, { className: "h-3.5 w-3.5" }),
+  info: /* @__PURE__ */ jsx53(Info2, { className: "h-3.5 w-3.5" })
 };
 function Timeline({ items, align = "left", className }) {
-  return /* @__PURE__ */ jsx51("div", { className: cn("relative", className), children: items.map((item, i) => {
+  return /* @__PURE__ */ jsx53("div", { className: cn("relative", className), children: items.map((item, i) => {
     const variant = item.variant ?? "default";
     const isLast = i === items.length - 1;
     const isRight = align === "alternate" && i % 2 === 1;
-    return /* @__PURE__ */ jsxs44("div", { className: cn("relative flex gap-4", align === "alternate" && "justify-center", isRight && "flex-row-reverse"), children: [
-      /* @__PURE__ */ jsxs44("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ jsx51("div", { className: cn(
+    return /* @__PURE__ */ jsxs46("div", { className: cn("relative flex gap-4", align === "alternate" && "justify-center", isRight && "flex-row-reverse"), children: [
+      /* @__PURE__ */ jsxs46("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx53("div", { className: cn(
           "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 z-10",
           item.icon ? "bg-background border-border" : DOT_COLOR[variant]
-        ), children: /* @__PURE__ */ jsx51("span", { className: cn("shrink-0", item.icon ? ICON_COLOR[variant] : "text-white"), children: item.icon ?? DEFAULT_ICON[variant] }) }),
-        !isLast && /* @__PURE__ */ jsx51("div", { className: "w-0.5 flex-1 bg-border mt-1 mb-1 min-h-4" })
+        ), children: /* @__PURE__ */ jsx53("span", { className: cn("shrink-0", item.icon ? ICON_COLOR[variant] : "text-white"), children: item.icon ?? DEFAULT_ICON[variant] }) }),
+        !isLast && /* @__PURE__ */ jsx53("div", { className: "w-0.5 flex-1 bg-border mt-1 mb-1 min-h-4" })
       ] }),
-      /* @__PURE__ */ jsxs44("div", { className: cn("flex-1 pb-6 min-w-0", isRight && "text-right"), children: [
-        /* @__PURE__ */ jsxs44("div", { className: cn("flex items-start justify-between gap-2", isRight && "flex-row-reverse"), children: [
-          /* @__PURE__ */ jsx51("p", { className: "text-sm font-semibold leading-tight", children: item.title }),
-          item.time && /* @__PURE__ */ jsx51("span", { className: "shrink-0 text-xs text-muted-foreground whitespace-nowrap", children: item.time })
+      /* @__PURE__ */ jsxs46("div", { className: cn("flex-1 pb-6 min-w-0", isRight && "text-right"), children: [
+        /* @__PURE__ */ jsxs46("div", { className: cn("flex items-start justify-between gap-2", isRight && "flex-row-reverse"), children: [
+          /* @__PURE__ */ jsx53("p", { className: "text-sm font-semibold leading-tight", children: item.title }),
+          item.time && /* @__PURE__ */ jsx53("span", { className: "shrink-0 text-xs text-muted-foreground whitespace-nowrap", children: item.time })
         ] }),
-        item.description && /* @__PURE__ */ jsx51("p", { className: "mt-0.5 text-xs text-muted-foreground leading-snug", children: item.description }),
-        item.content && /* @__PURE__ */ jsx51("div", { className: "mt-2", children: item.content })
+        item.description && /* @__PURE__ */ jsx53("p", { className: "mt-0.5 text-xs text-muted-foreground leading-snug", children: item.description }),
+        item.content && /* @__PURE__ */ jsx53("div", { className: "mt-2", children: item.content })
       ] })
     ] }, item.id ?? i);
   }) });
@@ -6723,7 +7079,7 @@ function Timeline({ items, align = "left", className }) {
 
 // src/components/ui/toggle-switch.tsx
 import * as React41 from "react";
-import { jsx as jsx52, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs47 } from "react/jsx-runtime";
 var ToggleSwitch = React41.forwardRef(
   ({
     className,
@@ -6754,13 +7110,13 @@ var ToggleSwitch = React41.forwardRef(
       if (!isControlled) setInternalChecked(e.target.checked);
       onChange?.(e);
     };
-    const toggle = /* @__PURE__ */ jsxs45(
+    const toggle = /* @__PURE__ */ jsxs47(
       "label",
       {
         htmlFor: toggleId,
         className: cn("relative inline-flex items-center cursor-pointer", disabled && "opacity-50 cursor-not-allowed"),
         children: [
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx54(
             "input",
             {
               type: "checkbox",
@@ -6773,7 +7129,7 @@ var ToggleSwitch = React41.forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx54(
             "div",
             {
               className: cn(
@@ -6786,7 +7142,7 @@ var ToggleSwitch = React41.forwardRef(
                 height: trackH,
                 ...stateColor ? { backgroundColor: stateColor } : {}
               },
-              children: /* @__PURE__ */ jsx52(
+              children: /* @__PURE__ */ jsx54(
                 "span",
                 {
                   className: `absolute top-[1px] ${isOn ? "bg-slate-50/40" : "bg-primary"} rounded-full border border-slate-300/50 shadow transition-transform duration-200`,
@@ -6804,9 +7160,9 @@ var ToggleSwitch = React41.forwardRef(
       }
     );
     if (inline && label) {
-      return /* @__PURE__ */ jsxs45("div", { className: "inline-flex items-center gap-2 select-none", children: [
+      return /* @__PURE__ */ jsxs47("div", { className: "inline-flex items-center gap-2 select-none", children: [
         toggle,
-        /* @__PURE__ */ jsx52("label", { htmlFor: toggleId, className: cn("text-sm cursor-pointer", disabled && "opacity-50 cursor-not-allowed"), children: label })
+        /* @__PURE__ */ jsx54("label", { htmlFor: toggleId, className: cn("text-sm cursor-pointer", disabled && "opacity-50 cursor-not-allowed"), children: label })
       ] });
     }
     return toggle;
@@ -6817,14 +7173,14 @@ ToggleSwitch.displayName = "ToggleSwitch";
 // src/components/ui/tree-view.tsx
 import * as React42 from "react";
 import { ChevronRight as ChevronRight9, Folder, FolderOpen, File } from "lucide-react";
-import { jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs48 } from "react/jsx-runtime";
 function TreeNodeItem({ node, depth, selected, expanded, onToggleExpand, onSelect, multiple }) {
   const hasChildren = !!node.children?.length;
   const isExpanded = expanded.includes(node.id);
   const isSelected = selected.includes(node.id);
-  const defaultIcon = hasChildren ? isExpanded ? /* @__PURE__ */ jsx53(FolderOpen, { className: "h-4 w-4 text-warning" }) : /* @__PURE__ */ jsx53(Folder, { className: "h-4 w-4 text-warning" }) : /* @__PURE__ */ jsx53(File, { className: "h-4 w-4 text-muted-foreground" });
-  return /* @__PURE__ */ jsxs46("div", { children: [
-    /* @__PURE__ */ jsxs46(
+  const defaultIcon = hasChildren ? isExpanded ? /* @__PURE__ */ jsx55(FolderOpen, { className: "h-4 w-4 text-warning" }) : /* @__PURE__ */ jsx55(Folder, { className: "h-4 w-4 text-warning" }) : /* @__PURE__ */ jsx55(File, { className: "h-4 w-4 text-muted-foreground" });
+  return /* @__PURE__ */ jsxs48("div", { children: [
+    /* @__PURE__ */ jsxs48(
       "div",
       {
         className: cn(
@@ -6838,13 +7194,13 @@ function TreeNodeItem({ node, depth, selected, expanded, onToggleExpand, onSelec
           onSelect(node.id);
         },
         children: [
-          hasChildren ? /* @__PURE__ */ jsx53(ChevronRight9, { className: cn("h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform", isExpanded && "rotate-90") }) : /* @__PURE__ */ jsx53("span", { className: "w-3.5 shrink-0" }),
-          /* @__PURE__ */ jsx53("span", { className: "shrink-0", children: node.icon ?? defaultIcon }),
-          /* @__PURE__ */ jsx53("span", { className: "truncate", children: node.label })
+          hasChildren ? /* @__PURE__ */ jsx55(ChevronRight9, { className: cn("h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform", isExpanded && "rotate-90") }) : /* @__PURE__ */ jsx55("span", { className: "w-3.5 shrink-0" }),
+          /* @__PURE__ */ jsx55("span", { className: "shrink-0", children: node.icon ?? defaultIcon }),
+          /* @__PURE__ */ jsx55("span", { className: "truncate", children: node.label })
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ jsx53("div", { children: node.children.map((child) => /* @__PURE__ */ jsx53(
+    hasChildren && isExpanded && /* @__PURE__ */ jsx55("div", { children: node.children.map((child) => /* @__PURE__ */ jsx55(
       TreeNodeItem,
       {
         node: child,
@@ -6885,7 +7241,7 @@ function TreeView({
   function toggleExpand(id) {
     setExpanded((prev) => prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]);
   }
-  return /* @__PURE__ */ jsx53("div", { className: cn("w-full", className), children: nodes.map((node) => /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx55("div", { className: cn("w-full", className), children: nodes.map((node) => /* @__PURE__ */ jsx55(
     TreeNodeItem,
     {
       node,
@@ -6902,7 +7258,7 @@ function TreeView({
 
 // src/components/ui/widget.tsx
 import * as React43 from "react";
-import { jsx as jsx54, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs49 } from "react/jsx-runtime";
 var iconColorMap = {
   primary: "bg-primary/10 text-primary",
   info: "bg-info/10 text-info",
@@ -6974,7 +7330,7 @@ function Widget({
   const counted = useCountUp(isNumeric ? value : 0, animate && isNumeric);
   const displayValue = animate && isNumeric ? counted : value;
   const s = sizeMap2[size];
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx56(
     Card,
     {
       className: cn(
@@ -6985,27 +7341,27 @@ function Widget({
       ),
       onClick,
       ...props,
-      children: /* @__PURE__ */ jsxs47(CardContent, { className: s.card, children: [
-        /* @__PURE__ */ jsxs47("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs47("div", { className: "min-w-0 flex-1 space-y-1", children: [
-            /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx54("p", { className: "text-sm font-medium text-muted-foreground truncate", children: title }),
-              badge && /* @__PURE__ */ jsx54("span", { className: "shrink-0", children: badge })
+      children: /* @__PURE__ */ jsxs49(CardContent, { className: s.card, children: [
+        /* @__PURE__ */ jsxs49("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs49("div", { className: "min-w-0 flex-1 space-y-1", children: [
+            /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx56("p", { className: "text-sm font-medium text-muted-foreground truncate", children: title }),
+              badge && /* @__PURE__ */ jsx56("span", { className: "shrink-0", children: badge })
             ] }),
-            loading ? /* @__PURE__ */ jsx54("div", { className: "h-8 w-24 animate-pulse rounded-md bg-muted" }) : /* @__PURE__ */ jsx54("div", { className: cn("font-bold tabular-nums", s.value), children: displayValue }),
-            description && /* @__PURE__ */ jsx54("p", { className: "text-xs text-muted-foreground", children: description })
+            loading ? /* @__PURE__ */ jsx56("div", { className: "h-8 w-24 animate-pulse rounded-md bg-muted" }) : /* @__PURE__ */ jsx56("div", { className: cn("font-bold tabular-nums", s.value), children: displayValue }),
+            description && /* @__PURE__ */ jsx56("p", { className: "text-xs text-muted-foreground", children: description })
           ] }),
-          icon && /* @__PURE__ */ jsxs47("div", { className: cn(
+          icon && /* @__PURE__ */ jsxs49("div", { className: cn(
             "relative flex shrink-0 items-center justify-center rounded-full",
             s.icon,
             iconColorMap[iconColor]
           ), children: [
-            pulse && /* @__PURE__ */ jsx54("span", { className: "absolute inset-0 rounded-full animate-ping opacity-30 bg-current" }),
-            /* @__PURE__ */ jsx54("span", { className: s.iconSize, children: icon })
+            pulse && /* @__PURE__ */ jsx56("span", { className: "absolute inset-0 rounded-full animate-ping opacity-30 bg-current" }),
+            /* @__PURE__ */ jsx56("span", { className: s.iconSize, children: icon })
           ] })
         ] }),
-        trendValue && !loading && /* @__PURE__ */ jsxs47("div", { className: "mt-3 flex items-center gap-1.5 text-sm", children: [
-          /* @__PURE__ */ jsxs47("span", { className: cn(
+        trendValue && !loading && /* @__PURE__ */ jsxs49("div", { className: "mt-3 flex items-center gap-1.5 text-sm", children: [
+          /* @__PURE__ */ jsxs49("span", { className: cn(
             "font-medium",
             trend === "up" && "text-success",
             trend === "down" && "text-danger",
@@ -7015,21 +7371,21 @@ function Widget({
             trend === "down" && "\u2193 ",
             trendValue
           ] }),
-          previousValue !== void 0 && /* @__PURE__ */ jsxs47("span", { className: "text-muted-foreground", children: [
+          previousValue !== void 0 && /* @__PURE__ */ jsxs49("span", { className: "text-muted-foreground", children: [
             "vs ",
             previousValue
           ] }),
-          /* @__PURE__ */ jsx54("span", { className: "text-muted-foreground", children: trendLabel })
+          /* @__PURE__ */ jsx56("span", { className: "text-muted-foreground", children: trendLabel })
         ] }),
-        progress !== void 0 && /* @__PURE__ */ jsxs47("div", { className: "mt-4 space-y-1", children: [
-          /* @__PURE__ */ jsxs47("div", { className: "flex justify-between text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx54("span", { children: "Progress" }),
-            /* @__PURE__ */ jsxs47("span", { children: [
+        progress !== void 0 && /* @__PURE__ */ jsxs49("div", { className: "mt-4 space-y-1", children: [
+          /* @__PURE__ */ jsxs49("div", { className: "flex justify-between text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx56("span", { children: "Progress" }),
+            /* @__PURE__ */ jsxs49("span", { children: [
               Math.min(100, Math.max(0, progress)),
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ jsx54("div", { className: "h-1.5 w-full rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ jsx54(
+          /* @__PURE__ */ jsx56("div", { className: "h-1.5 w-full rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ jsx56(
             "div",
             {
               className: cn("h-full rounded-full transition-all duration-700", progressColorMap[progressColor]),
@@ -7037,10 +7393,461 @@ function Widget({
             }
           ) })
         ] }),
-        footer && /* @__PURE__ */ jsx54("div", { className: "mt-4 border-t pt-3 text-sm text-muted-foreground", children: footer })
+        footer && /* @__PURE__ */ jsx56("div", { className: "mt-4 border-t pt-3 text-sm text-muted-foreground", children: footer })
+      ] })
+    }
+  );
+}
+
+// src/components/ui/wizard.tsx
+import * as React44 from "react";
+import { Check as Check7, X as X12, ChevronLeft as ChevronLeft6, ChevronRight as ChevronRight10, AlertCircle } from "lucide-react";
+import { Fragment as Fragment12, jsx as jsx57, jsxs as jsxs50 } from "react/jsx-runtime";
+var SIZE_MAP = {
+  sm: "max-w-sm",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-full"
+};
+function stepStatus(idx, current) {
+  if (idx < current) return "complete";
+  if (idx === current) return "current";
+  return "upcoming";
+}
+function HeaderDefault({
+  steps,
+  current,
+  clickable,
+  onGo
+}) {
+  return /* @__PURE__ */ jsx57("div", { className: "flex items-start w-full", children: steps.map((step, i) => {
+    const status = stepStatus(i, current);
+    const isLast = i === steps.length - 1;
+    return /* @__PURE__ */ jsx57(React44.Fragment, { children: /* @__PURE__ */ jsxs50("div", { className: "flex flex-col items-center flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxs50("div", { className: "flex items-center w-full", children: [
+        i > 0 && /* @__PURE__ */ jsx57("div", { className: cn("flex-1 h-0.5 transition-colors", i <= current ? "bg-primary" : "bg-border") }),
+        /* @__PURE__ */ jsx57(
+          "button",
+          {
+            type: "button",
+            disabled: !clickable || status === "upcoming",
+            onClick: () => clickable && status !== "upcoming" && onGo(i),
+            className: cn(
+              "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-xs font-semibold transition-all",
+              status === "complete" && "bg-primary border-primary text-primary-foreground",
+              status === "current" && "bg-background border-primary text-primary ring-4 ring-primary/20",
+              status === "upcoming" && "bg-background border-border text-muted-foreground",
+              clickable && status !== "upcoming" && "cursor-pointer hover:scale-110"
+            ),
+            children: status === "complete" ? /* @__PURE__ */ jsx57(Check7, { className: "h-3.5 w-3.5" }) : step.icon ?? /* @__PURE__ */ jsx57("span", { children: i + 1 })
+          }
+        ),
+        !isLast && /* @__PURE__ */ jsx57("div", { className: cn("flex-1 h-0.5 transition-colors", i < current ? "bg-primary" : "bg-border") })
+      ] }),
+      /* @__PURE__ */ jsxs50("div", { className: "mt-2 text-center px-1 max-w-[80px]", children: [
+        /* @__PURE__ */ jsx57("p", { className: cn(
+          "text-xs font-medium leading-tight truncate",
+          status === "current" ? "text-primary" : status === "complete" ? "text-foreground" : "text-muted-foreground"
+        ), children: step.title }),
+        step.optional && /* @__PURE__ */ jsx57("span", { className: "text-[10px] text-muted-foreground", children: "(optional)" })
+      ] })
+    ] }) }, i);
+  }) });
+}
+function HeaderDots({ steps, current, clickable, onGo }) {
+  return /* @__PURE__ */ jsxs50("div", { className: "flex flex-col items-center gap-3 w-full", children: [
+    /* @__PURE__ */ jsx57("div", { className: "flex items-center gap-2", children: steps.map((_, i) => /* @__PURE__ */ jsx57(
+      "button",
+      {
+        type: "button",
+        disabled: !clickable || i > current,
+        onClick: () => clickable && i <= current && onGo(i),
+        className: cn(
+          "rounded-full transition-all duration-200",
+          i === current ? "w-6 h-2.5 bg-primary" : i < current ? "w-2.5 h-2.5 bg-primary/60 hover:bg-primary cursor-pointer" : "w-2.5 h-2.5 bg-border"
+        )
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsxs50("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx57("p", { className: "text-sm font-semibold", children: steps[current]?.title }),
+      steps[current]?.description && /* @__PURE__ */ jsx57("p", { className: "text-xs text-muted-foreground mt-0.5", children: steps[current].description })
+    ] })
+  ] });
+}
+function HeaderMinimal({ steps, current }) {
+  return /* @__PURE__ */ jsxs50("div", { className: "flex items-center justify-between w-full", children: [
+    /* @__PURE__ */ jsxs50("div", { children: [
+      /* @__PURE__ */ jsx57("p", { className: "text-base font-semibold", children: steps[current]?.title }),
+      steps[current]?.description && /* @__PURE__ */ jsx57("p", { className: "text-xs text-muted-foreground mt-0.5", children: steps[current].description })
+    ] }),
+    /* @__PURE__ */ jsxs50("span", { className: "text-xs font-medium text-muted-foreground shrink-0 ml-4", children: [
+      "Step ",
+      current + 1,
+      " of ",
+      steps.length
+    ] })
+  ] });
+}
+function HeaderCards({ steps, current, clickable, onGo }) {
+  return /* @__PURE__ */ jsx57("div", { className: "flex gap-2 flex-wrap", children: steps.map((step, i) => {
+    const status = stepStatus(i, current);
+    return /* @__PURE__ */ jsxs50(
+      "button",
+      {
+        type: "button",
+        disabled: !clickable || status === "upcoming",
+        onClick: () => clickable && status !== "upcoming" && onGo(i),
+        className: cn(
+          "flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium border transition-all",
+          status === "complete" && "bg-primary/10 border-primary/30 text-primary cursor-pointer",
+          status === "current" && "bg-primary border-primary text-primary-foreground shadow-sm",
+          status === "upcoming" && "bg-muted/40 border-border text-muted-foreground",
+          clickable && status !== "upcoming" && "hover:scale-105"
+        ),
+        children: [
+          status === "complete" ? /* @__PURE__ */ jsx57(Check7, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx57("span", { children: i + 1 }),
+          step.title,
+          step.optional && /* @__PURE__ */ jsx57("span", { className: "opacity-60", children: "(opt)" })
+        ]
+      },
+      i
+    );
+  }) });
+}
+function SidebarNav({ steps, current, clickable, onGo }) {
+  return /* @__PURE__ */ jsx57("nav", { className: "flex flex-col gap-0.5 w-48 shrink-0 border-r border-border pr-4 py-1", children: steps.map((step, i) => {
+    const status = stepStatus(i, current);
+    return /* @__PURE__ */ jsxs50(
+      "button",
+      {
+        type: "button",
+        disabled: !clickable || status === "upcoming",
+        onClick: () => clickable && status !== "upcoming" && onGo(i),
+        className: cn(
+          "flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-sm text-left transition-colors w-full",
+          status === "current" && "bg-primary text-primary-foreground",
+          status === "complete" && "text-foreground hover:bg-muted/60 cursor-pointer",
+          status === "upcoming" && "text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsx57("span", { className: cn(
+            "flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10px] font-bold border",
+            status === "complete" && "bg-primary/20 border-primary/40 text-primary",
+            status === "current" && "bg-primary-foreground/20 border-primary-foreground/40 text-primary-foreground",
+            status === "upcoming" && "bg-muted border-border text-muted-foreground"
+          ), children: status === "complete" ? /* @__PURE__ */ jsx57(Check7, { className: "h-3 w-3" }) : i + 1 }),
+          /* @__PURE__ */ jsxs50("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx57("span", { className: "block truncate font-medium", children: step.title }),
+            step.optional && /* @__PURE__ */ jsx57("span", { className: "text-[10px] opacity-60", children: "Optional" })
+          ] })
+        ]
+      },
+      i
+    );
+  }) });
+}
+function ProgressBar({ current, total }) {
+  const pct2 = Math.round(current / (total - 1) * 100);
+  return /* @__PURE__ */ jsx57("div", { className: "w-full h-1 bg-border rounded-full overflow-hidden", children: /* @__PURE__ */ jsx57(
+    "div",
+    {
+      className: "h-full bg-primary transition-all duration-300 rounded-full",
+      style: { width: `${pct2}%` }
+    }
+  ) });
+}
+function DefaultActions({
+  step,
+  total,
+  onBack,
+  onNext,
+  onClose,
+  isLast,
+  isFirst,
+  backLabel,
+  nextLabel,
+  finishLabel,
+  cancelLabel,
+  showCancel,
+  showBackOnFirst,
+  loading
+}) {
+  const showBack = !isFirst || showBackOnFirst;
+  return /* @__PURE__ */ jsxs50("div", { className: "flex items-center justify-between gap-2 w-full", children: [
+    /* @__PURE__ */ jsx57("div", { className: "flex items-center gap-2", children: showCancel && onClose && /* @__PURE__ */ jsx57(
+      "button",
+      {
+        type: "button",
+        onClick: onClose,
+        className: "inline-flex items-center justify-center rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent transition-colors",
+        children: cancelLabel ?? "Cancel"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs50("div", { className: "flex items-center gap-2", children: [
+      showBack && /* @__PURE__ */ jsxs50(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          disabled: isFirst,
+          className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent transition-colors disabled:opacity-40 disabled:pointer-events-none",
+          children: [
+            /* @__PURE__ */ jsx57(ChevronLeft6, { className: "h-4 w-4" }),
+            backLabel ?? "Back"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx57(
+        "button",
+        {
+          type: "button",
+          onClick: onNext,
+          disabled: loading,
+          className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary-hover transition-colors disabled:opacity-60 disabled:pointer-events-none",
+          children: loading ? /* @__PURE__ */ jsxs50("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxs50("svg", { className: "animate-spin h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", children: [
+              /* @__PURE__ */ jsx57("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ jsx57("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v8z" })
+            ] }),
+            "Processing..."
+          ] }) : isLast ? /* @__PURE__ */ jsxs50(Fragment12, { children: [
+            /* @__PURE__ */ jsx57(Check7, { className: "h-4 w-4" }),
+            finishLabel ?? "Finish"
+          ] }) : /* @__PURE__ */ jsxs50(Fragment12, { children: [
+            nextLabel ?? "Next",
+            /* @__PURE__ */ jsx57(ChevronRight10, { className: "h-4 w-4" })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+function WizardPanel({
+  steps,
+  current,
+  onGo,
+  variant,
+  size,
+  title,
+  description,
+  hideHeader,
+  footer,
+  renderActions,
+  backLabel,
+  nextLabel,
+  finishLabel,
+  cancelLabel,
+  showCancel,
+  showBackOnFirst,
+  loading,
+  clickableSteps,
+  onBack,
+  onNext,
+  onClose,
+  className,
+  contentClassName
+}) {
+  const isFirst = current === 0;
+  const isLast = current === steps.length - 1;
+  const isSidebar = variant === "sidebar";
+  const [validationError, setValidationError] = React44.useState(null);
+  const handleNext = () => {
+    const validate = steps[current]?.validate;
+    if (validate) {
+      const result = validate();
+      if (result === false) {
+        setValidationError("Please complete this step before continuing.");
+        return;
+      }
+      if (typeof result === "string") {
+        setValidationError(result);
+        return;
+      }
+    }
+    setValidationError(null);
+    onNext();
+  };
+  const actionProps = {
+    step: current,
+    total: steps.length,
+    onBack,
+    onNext: handleNext,
+    onClose,
+    isFirst,
+    isLast,
+    loading
+  };
+  return /* @__PURE__ */ jsxs50("div", { className: cn(
+    "flex flex-col w-full",
+    size && !isSidebar && SIZE_MAP[size ?? "md"],
+    className
+  ), children: [
+    !hideHeader && /* @__PURE__ */ jsxs50("div", { className: cn(
+      "shrink-0 px-6 pt-5 pb-4",
+      variant !== "sidebar" && "border-b border-border"
+    ), children: [
+      (title || description) && /* @__PURE__ */ jsxs50("div", { className: "mb-4", children: [
+        title && /* @__PURE__ */ jsx57("h2", { className: "text-lg font-semibold", children: title }),
+        description && /* @__PURE__ */ jsx57("p", { className: "text-sm text-muted-foreground mt-0.5", children: description })
+      ] }),
+      variant === "default" && /* @__PURE__ */ jsx57(HeaderDefault, { steps, current, clickable: !!clickableSteps, onGo }),
+      variant === "dots" && /* @__PURE__ */ jsx57(HeaderDots, { steps, current, clickable: !!clickableSteps, onGo }),
+      variant === "minimal" && /* @__PURE__ */ jsx57(HeaderMinimal, { steps, current }),
+      variant === "cards" && /* @__PURE__ */ jsx57(HeaderCards, { steps, current, clickable: !!clickableSteps, onGo }),
+      (variant === "default" || variant === "minimal") && /* @__PURE__ */ jsx57("div", { className: "mt-3", children: /* @__PURE__ */ jsx57(ProgressBar, { current, total: steps.length }) })
+    ] }),
+    /* @__PURE__ */ jsxs50("div", { className: cn("flex flex-1 min-h-0", isSidebar && "gap-6 px-6 py-5"), children: [
+      isSidebar && /* @__PURE__ */ jsx57(SidebarNav, { steps, current, clickable: !!clickableSteps, onGo }),
+      /* @__PURE__ */ jsxs50("div", { className: cn(
+        "flex-1 min-w-0",
+        !isSidebar && "px-6 py-5",
+        contentClassName
+      ), children: [
+        validationError && /* @__PURE__ */ jsxs50("div", { className: "flex items-center gap-2 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger mb-4", children: [
+          /* @__PURE__ */ jsx57(AlertCircle, { className: "h-4 w-4 shrink-0" }),
+          validationError
+        ] }),
+        steps[current]?.content
       ] })
+    ] }),
+    /* @__PURE__ */ jsx57("div", { className: "shrink-0 border-t border-border px-6 py-4", children: footer ?? (renderActions ? renderActions(actionProps) : /* @__PURE__ */ jsx57(
+      DefaultActions,
+      {
+        ...actionProps,
+        backLabel,
+        nextLabel,
+        finishLabel,
+        cancelLabel,
+        showCancel,
+        showBackOnFirst,
+        loading
+      }
+    )) })
+  ] });
+}
+function Wizard({
+  steps,
+  step: controlledStep,
+  defaultStep = 0,
+  onStepChange,
+  onFinish,
+  onClose,
+  layout = "inline",
+  variant = "default",
+  size = "md",
+  isOpen = false,
+  showClose = true,
+  unchange = false,
+  title,
+  description,
+  hideHeader = false,
+  footer,
+  renderActions,
+  backLabel,
+  nextLabel,
+  finishLabel,
+  cancelLabel,
+  showCancel = false,
+  showBackOnFirst = false,
+  loading = false,
+  clickableSteps = false,
+  className,
+  contentClassName
+}) {
+  const [internalStep, setInternalStep] = React44.useState(defaultStep);
+  const current = controlledStep ?? internalStep;
+  const go = (idx) => {
+    const clamped = Math.max(0, Math.min(steps.length - 1, idx));
+    if (controlledStep === void 0) setInternalStep(clamped);
+    onStepChange?.(clamped);
+  };
+  const handleBack = () => go(current - 1);
+  const handleNext = () => {
+    if (current === steps.length - 1) {
+      onFinish?.();
+      return;
+    }
+    go(current + 1);
+  };
+  React44.useEffect(() => {
+    if (layout !== "modal" || !isOpen || unchange) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose?.();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [layout, isOpen, unchange, onClose]);
+  const panel = /* @__PURE__ */ jsx57(
+    WizardPanel,
+    {
+      steps,
+      current,
+      onGo: go,
+      onBack: handleBack,
+      onNext: handleNext,
+      onClose,
+      variant,
+      size,
+      title,
+      description,
+      hideHeader,
+      footer,
+      renderActions,
+      backLabel,
+      nextLabel,
+      finishLabel,
+      cancelLabel,
+      showCancel,
+      showBackOnFirst,
+      loading,
+      clickableSteps,
+      contentClassName
     }
   );
+  if (layout === "modal") {
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsxs50("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+      /* @__PURE__ */ jsx57(
+        "div",
+        {
+          className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
+          onClick: () => !unchange && onClose?.()
+        }
+      ),
+      /* @__PURE__ */ jsxs50("div", { className: cn(
+        "relative z-10 w-full rounded-2xl border border-border bg-background/90 backdrop-blur-xl shadow-2xl overflow-hidden",
+        SIZE_MAP[size],
+        className
+      ), children: [
+        showClose && onClose && /* @__PURE__ */ jsxs50(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "absolute right-4 top-4 z-10 rounded-sm opacity-60 hover:opacity-100 transition-opacity",
+            children: [
+              /* @__PURE__ */ jsx57(X12, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx57("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        ),
+        panel
+      ] })
+    ] });
+  }
+  if (layout === "page") {
+    return /* @__PURE__ */ jsx57("div", { className: cn("w-full min-h-screen flex items-start justify-center p-6 bg-background", className), children: /* @__PURE__ */ jsx57("div", { className: cn(
+      "w-full rounded-2xl border border-border bg-card shadow-lg overflow-hidden",
+      SIZE_MAP[size]
+    ), children: panel }) });
+  }
+  return /* @__PURE__ */ jsx57("div", { className: cn(
+    "w-full rounded-xl border border-border bg-card shadow-sm overflow-hidden",
+    SIZE_MAP[size],
+    className
+  ), children: panel });
 }
 export {
   Accordion,
@@ -7068,14 +7875,20 @@ export {
   DateRangePicker,
   Drawer,
   Dropdown,
+  DropdownItem,
+  DropdownLabel,
+  DropdownSeparator,
   FileUpload,
+  FlexItem,
   FlexLayout,
+  GridItem,
   GridLayout,
   GroupNavigation,
   Input,
   KanbanBoard,
   Label,
   LeftSidebar,
+  MetricRow,
   Modal,
   ModalConfirmation,
   ModalUnchange,
@@ -7090,6 +7903,7 @@ export {
   PanelSidebarItem,
   Popover,
   Progress,
+  PropsTable,
   RadioGroup,
   RangeSlider,
   Repeater,
@@ -7099,6 +7913,7 @@ export {
   ScrollArea,
   SectionBlock,
   Select,
+  Settings,
   Skeleton,
   Slider,
   StatCard,
@@ -7116,5 +7931,6 @@ export {
   Topbar,
   TreeView,
   Widget,
+  Wizard,
   useToast
 };