@caqophony/ui 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,4605 @@
+'use client';
+import {
+  MarkdownRenderer,
+  cn
+} from "./chunk-K3SEIIA3.js";
+
+// src/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary dark:bg-primary text-primary-foreground dark:text-primary-foreground shadow hover:bg-primary/90 dark:hover:bg-primary/90",
+        destructive: "bg-intent-error dark:bg-intent-error text-intent-error-foreground dark:text-intent-error-foreground shadow-sm hover:bg-intent-error/90 dark:hover:bg-intent-error/90",
+        outline: "border border-border dark:border-border bg-background dark:bg-background shadow-sm hover:bg-muted dark:hover:bg-muted hover:text-foreground dark:hover:text-foreground",
+        secondary: "bg-muted dark:bg-muted text-muted-foreground dark:text-muted-foreground shadow-sm hover:bg-muted/80 dark:hover:bg-muted/80",
+        ghost: "hover:bg-muted dark:hover:bg-muted hover:text-foreground dark:hover:text-foreground",
+        link: "text-primary dark:text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading = false,
+    loadingText,
+    children,
+    disabled,
+    ...props
+  }, ref) => {
+    const Comp = asChild && !loading ? Slot : "button";
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        disabled: isDisabled,
+        "aria-busy": loading,
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: loadingText || children })
+        ] }) : children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/input.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Input = React2.forwardRef(
+  ({ className, type, error, errorMessageId, ...props }, ref) => {
+    return /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type,
+        "aria-invalid": error || void 0,
+        "aria-describedby": error && errorMessageId ? errorMessageId : void 0,
+        className: cn(
+          "flex h-11 w-full rounded-md border bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          error ? "border-intent-error focus-visible:ring-intent-error dark:border-intent-error" : "border-input focus-visible:ring-ring",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/card.tsx
+import * as React3 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Card = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "h3",
+  {
+    ref,
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// src/switch.tsx
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React4 from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Switch = React4.forwardRef(({ className, label, description, id, ...props }, ref) => {
+  const generatedId = React4.useId();
+  const switchId = id || generatedId;
+  const switchElement = /* @__PURE__ */ jsx4(
+    SwitchPrimitives.Root,
+    {
+      className: cn(
+        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:bg-primary dark:data-[state=checked]:bg-primary",
+        "data-[state=unchecked]:bg-muted dark:data-[state=unchecked]:bg-muted",
+        className
+      ),
+      id: switchId,
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx4(
+        SwitchPrimitives.Thumb,
+        {
+          className: cn(
+            "pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform",
+            "bg-background dark:bg-background",
+            "data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+          )
+        }
+      )
+    }
+  );
+  if (!label) {
+    return switchElement;
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+    switchElement,
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx4(
+        "label",
+        {
+          htmlFor: switchId,
+          className: "cursor-pointer text-sm font-medium text-foreground dark:text-foreground",
+          children: label
+        }
+      ),
+      description && /* @__PURE__ */ jsx4("span", { className: "text-xs text-muted-foreground dark:text-muted-foreground", children: description })
+    ] })
+  ] });
+});
+Switch.displayName = "Switch";
+
+// src/tooltip.tsx
+import * as React5 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx5(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/form-field.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function FormField({
+  label,
+  name,
+  error,
+  description,
+  required = false,
+  disabled = false,
+  children,
+  className
+}) {
+  const hasError = Boolean(error);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "aria-disabled": disabled || void 0,
+      className: cn(
+        "space-y-1.5",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "label",
+          {
+            htmlFor: name,
+            className: cn(
+              "block text-sm font-medium",
+              hasError ? "text-intent-error dark:text-intent-error" : "text-foreground dark:text-foreground"
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx6("span", { className: "text-intent-error ml-1", "aria-hidden": "true", children: "*" })
+            ]
+          }
+        ),
+        description && !hasError && /* @__PURE__ */ jsx6("p", { className: "text-xs text-muted-foreground dark:text-muted-foreground", children: description }),
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: cn(
+              "relative",
+              hasError && "[&>input]:border-intent-error [&>input]:focus-visible:ring-intent-error",
+              hasError && "[&>select]:border-intent-error [&>select]:focus-visible:ring-intent-error",
+              hasError && "[&>textarea]:border-intent-error [&>textarea]:focus-visible:ring-intent-error"
+            ),
+            children
+          }
+        ),
+        hasError && /* @__PURE__ */ jsxs3(
+          "p",
+          {
+            className: "text-intent-error dark:text-intent-error flex items-center gap-1 text-sm",
+            role: "alert",
+            "aria-live": "polite",
+            children: [
+              /* @__PURE__ */ jsx6(ErrorIcon, { className: "size-4 shrink-0" }),
+              /* @__PURE__ */ jsx6("span", { children: error })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ErrorIcon({ className }) {
+  return /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ jsx6(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        }
+      )
+    }
+  );
+}
+function FormFieldGroup({ children, className }) {
+  return /* @__PURE__ */ jsx6("div", { className: cn("grid gap-4", "grid-cols-1 sm:grid-cols-2", className), children });
+}
+function FormSection({
+  title,
+  description,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs3("fieldset", { className: cn("space-y-4", className), children: [
+    (title || description) && /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+      title && /* @__PURE__ */ jsx6("legend", { className: "text-base font-medium text-foreground dark:text-foreground", children: title }),
+      description && /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground dark:text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "space-y-4", children })
+  ] });
+}
+function FormError({ error, className }) {
+  if (!error) return null;
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: cn(
+        "border-intent-error/20 bg-intent-error/10 rounded-lg border p-4",
+        "dark:border-intent-error/20 dark:bg-intent-error/10",
+        className
+      ),
+      role: "alert",
+      children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ jsx6(ErrorIcon, { className: "text-intent-error dark:text-intent-error size-5 shrink-0" }),
+        /* @__PURE__ */ jsx6("p", { className: "text-intent-error dark:text-intent-error text-sm", children: error })
+      ] })
+    }
+  );
+}
+function FormSuccess({ message, className }) {
+  if (!message) return null;
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: cn(
+        "border-intent-success/20 bg-intent-success/10 rounded-lg border p-4",
+        "dark:border-intent-success/20 dark:bg-intent-success/10",
+        className
+      ),
+      role: "status",
+      children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ jsx6(SuccessIcon, { className: "text-intent-success dark:text-intent-success size-5 shrink-0" }),
+        /* @__PURE__ */ jsx6("p", { className: "text-intent-success dark:text-intent-success text-sm", children: message })
+      ] })
+    }
+  );
+}
+function SuccessIcon({ className }) {
+  return /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      children: /* @__PURE__ */ jsx6(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+        }
+      )
+    }
+  );
+}
+
+// src/global-error-content.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function GlobalErrorContent({
+  error,
+  reset,
+  appName,
+  supportEmail,
+  customActions
+}) {
+  const handleRetry = () => {
+    reset();
+  };
+  const handleGoHome = () => {
+    if (typeof window !== "undefined") {
+      window.location.href = "/";
+    }
+  };
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      style: {
+        display: "flex",
+        minHeight: "100vh",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1rem",
+        backgroundColor: "#f9fafb",
+        // gossamer-ignore
+        fontFamily: "system-ui, sans-serif"
+      },
+      children: /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          style: {
+            width: "100%",
+            maxWidth: "28rem",
+            textAlign: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsx7(
+              "div",
+              {
+                style: {
+                  width: "4rem",
+                  height: "4rem",
+                  margin: "0 auto 1.5rem",
+                  borderRadius: "50%",
+                  backgroundColor: "#fee2e2",
+                  // gossamer-ignore
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsxs4(
+                  "svg",
+                  {
+                    width: "32",
+                    height: "32",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "#dc2626",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx7("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+                      /* @__PURE__ */ jsx7("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+                      /* @__PURE__ */ jsx7("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              "h1",
+              {
+                style: {
+                  fontSize: "1.5rem",
+                  fontWeight: "bold",
+                  color: "#111827",
+                  // gossamer-ignore
+                  marginBottom: "0.5rem"
+                },
+                children: "Critical Application Error"
+              }
+            ),
+            /* @__PURE__ */ jsxs4(
+              "p",
+              {
+                style: {
+                  color: "#6b7280",
+                  // gossamer-ignore
+                  marginBottom: "1.5rem",
+                  lineHeight: 1.5
+                },
+                children: [
+                  appName ? `${appName} encountered a critical error that prevented the page from loading.` : "We encountered a critical error that prevented the page from loading.",
+                  " ",
+                  "Our team has been automatically notified."
+                ]
+              }
+            ),
+            error.digest && /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                style: {
+                  backgroundColor: "#f3f4f6",
+                  // gossamer-ignore
+                  padding: "0.75rem",
+                  borderRadius: "0.5rem",
+                  marginBottom: "1.5rem"
+                },
+                children: [
+                  /* @__PURE__ */ jsx7(
+                    "p",
+                    {
+                      style: {
+                        fontSize: "0.75rem",
+                        color: "#9ca3af",
+                        // gossamer-ignore
+                        marginBottom: "0.25rem"
+                      },
+                      children: "Error Reference"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "code",
+                    {
+                      style: {
+                        fontFamily: "monospace",
+                        fontSize: "0.875rem",
+                        color: "#374151"
+                        // gossamer-ignore
+                      },
+                      children: error.digest
+                    }
+                  )
+                ]
+              }
+            ),
+            customActions ?? /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "0.75rem"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs4(
+                    "button",
+                    {
+                      onClick: handleRetry,
+                      style: {
+                        width: "100%",
+                        padding: "0.75rem 1rem",
+                        backgroundColor: "#2563eb",
+                        // gossamer-ignore
+                        color: "white",
+                        border: "none",
+                        borderRadius: "0.5rem",
+                        fontSize: "0.875rem",
+                        fontWeight: 500,
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        gap: "0.5rem"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx7(
+                          "svg",
+                          {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            children: /* @__PURE__ */ jsx7("path", { d: "M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15" })
+                          }
+                        ),
+                        "Try Again"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs4(
+                    "button",
+                    {
+                      onClick: handleGoHome,
+                      style: {
+                        width: "100%",
+                        padding: "0.75rem 1rem",
+                        backgroundColor: "white",
+                        color: "#374151",
+                        // gossamer-ignore
+                        border: "1px solid #d1d5db",
+                        // gossamer-ignore
+                        borderRadius: "0.5rem",
+                        fontSize: "0.875rem",
+                        fontWeight: 500,
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        gap: "0.5rem"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs4(
+                          "svg",
+                          {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            children: [
+                              /* @__PURE__ */ jsx7("path", { d: "M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" }),
+                              /* @__PURE__ */ jsx7("polyline", { points: "9,22 9,12 15,12 15,22" })
+                            ]
+                          }
+                        ),
+                        "Go to Homepage"
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs4(
+              "p",
+              {
+                style: {
+                  marginTop: "1.5rem",
+                  fontSize: "0.75rem",
+                  color: "#9ca3af"
+                  // gossamer-ignore
+                },
+                children: [
+                  "If this problem persists, please",
+                  " ",
+                  supportEmail ? /* @__PURE__ */ jsx7(
+                    "a",
+                    {
+                      href: `mailto:${supportEmail}`,
+                      style: { color: "#2563eb", textDecoration: "underline" },
+                      children: "contact support"
+                    }
+                  ) : "contact support",
+                  "."
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/collapsible-sidebar.tsx
+import {
+  useState,
+  useEffect,
+  useCallback,
+  createContext,
+  useContext
+} from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var SidebarContext = createContext(null);
+function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a CollapsibleSidebar");
+  }
+  return context;
+}
+var COLLAPSED_WIDTH = 64;
+var EXPANDED_WIDTH = 256;
+var DefaultLink = ({
+  href,
+  className,
+  children
+}) => /* @__PURE__ */ jsx8("a", { href: String(href), className, children });
+function CollapsibleSidebar({
+  storageKey = "sidebar-collapsed",
+  defaultCollapsed = false,
+  header,
+  collapsedHeader,
+  items,
+  isActive,
+  linkComponent: LinkComponent = DefaultLink,
+  footer,
+  collapsedFooter,
+  className,
+  collapsedWidth = COLLAPSED_WIDTH,
+  expandedWidth = EXPANDED_WIDTH
+}) {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+    const stored = localStorage.getItem(storageKey);
+    if (stored !== null) {
+      setIsCollapsed(stored === "true");
+    }
+  }, [storageKey]);
+  const toggle = useCallback(() => {
+    setIsCollapsed((prev) => {
+      const newValue = !prev;
+      localStorage.setItem(storageKey, String(newValue));
+      return newValue;
+    });
+  }, [storageKey]);
+  if (!mounted) {
+    return /* @__PURE__ */ jsx8(
+      "nav",
+      {
+        className: cn(
+          "hidden min-h-screen flex-col border-r bg-card lg:flex",
+          className
+        ),
+        style: { width: defaultCollapsed ? collapsedWidth : expandedWidth }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx8(SidebarContext.Provider, { value: { isCollapsed, toggle }, children: /* @__PURE__ */ jsx8(TooltipProvider, { delayDuration: 100, children: /* @__PURE__ */ jsxs5(
+    "nav",
+    {
+      className: cn(
+        "relative hidden min-h-screen flex-col border-r bg-card transition-all duration-300 ease-in-out lg:flex",
+        className
+      ),
+      style: { width: isCollapsed ? collapsedWidth : expandedWidth },
+      children: [
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            onClick: toggle,
+            className: cn(
+              "absolute -right-3 top-6 z-10 flex size-6 items-center justify-center rounded-full border bg-card shadow-sm transition-colors hover:bg-muted"
+            ),
+            "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+            children: isCollapsed ? /* @__PURE__ */ jsx8(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsx8(ChevronLeft, { className: "size-4" })
+          }
+        ),
+        (header || collapsedHeader) && /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: cn(
+              "border-b p-4 transition-all duration-300",
+              isCollapsed ? "px-2" : "px-4"
+            ),
+            children: isCollapsed ? collapsedHeader || null : header
+          }
+        ),
+        /* @__PURE__ */ jsx8("div", { className: "flex-1 space-y-1 overflow-y-auto p-2", children: items.map((item) => {
+          const Icon = item.icon;
+          const active = isActive?.(item.href) ?? false;
+          const linkContent = /* @__PURE__ */ jsxs5(
+            LinkComponent,
+            {
+              href: item.href,
+              className: cn(
+                "flex items-center gap-3 rounded-lg px-3 py-2 transition-colors",
+                isCollapsed && "justify-center px-2",
+                active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ jsx8(
+                  Icon,
+                  {
+                    className: cn("size-5 shrink-0", isCollapsed && "size-5")
+                  }
+                ),
+                !isCollapsed && /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
+                  /* @__PURE__ */ jsx8("div", { className: "truncate text-sm font-medium", children: item.name }),
+                  item.description && /* @__PURE__ */ jsx8(
+                    "div",
+                    {
+                      className: cn(
+                        "truncate text-xs",
+                        active ? "text-primary-foreground/80" : "text-muted-foreground"
+                      ),
+                      children: item.description
+                    }
+                  )
+                ] })
+              ]
+            }
+          );
+          if (isCollapsed) {
+            return /* @__PURE__ */ jsxs5(Tooltip, { children: [
+              /* @__PURE__ */ jsx8(TooltipTrigger, { asChild: true, children: linkContent }),
+              /* @__PURE__ */ jsxs5(TooltipContent, { side: "right", className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx8("span", { className: "font-medium", children: item.name }),
+                item.description && /* @__PURE__ */ jsx8("span", { className: "text-xs text-muted-foreground", children: item.description })
+              ] })
+            ] }, item.href);
+          }
+          return /* @__PURE__ */ jsx8("div", { children: linkContent }, item.href);
+        }) }),
+        (footer || collapsedFooter) && /* @__PURE__ */ jsx8("div", { className: "mt-auto border-t p-2", children: isCollapsed ? collapsedFooter || null : footer })
+      ]
+    }
+  ) }) });
+}
+
+// src/accordion.tsx
+import { createContext as createContext2, useContext as useContext2, useState as useState2, useCallback as useCallback2, useId as useId2 } from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var AccordionContext = createContext2(null);
+var AccordionItemContext = createContext2(
+  null
+);
+function useAccordion() {
+  const context = useContext2(AccordionContext);
+  if (!context) {
+    throw new Error("Accordion components must be used within an Accordion");
+  }
+  return context;
+}
+function useAccordionItem() {
+  const context = useContext2(AccordionItemContext);
+  if (!context) {
+    throw new Error(
+      "AccordionTrigger/Content must be used within an AccordionItem"
+    );
+  }
+  return context;
+}
+function AccordionSingle({
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  collapsible = true,
+  children,
+  className
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState2(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const handleValueChange = useCallback2(
+    (itemValue) => {
+      const newValue = value === itemValue && collapsible ? "" : itemValue;
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [value, collapsible, isControlled, onValueChange]
+  );
+  return /* @__PURE__ */ jsx9(
+    AccordionContext.Provider,
+    {
+      value: {
+        type: "single",
+        value,
+        onValueChange: handleValueChange
+      },
+      children: /* @__PURE__ */ jsx9("div", { className: cn("space-y-2", className), "data-accordion-root": "", children })
+    }
+  );
+}
+function AccordionMultiple({
+  value: controlledValue,
+  defaultValue = [],
+  onValueChange,
+  children,
+  className
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState2(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const handleValueChange = useCallback2(
+    (itemValue) => {
+      const newValue = value.includes(itemValue) ? value.filter((v) => v !== itemValue) : [...value, itemValue];
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [value, isControlled, onValueChange]
+  );
+  return /* @__PURE__ */ jsx9(
+    AccordionContext.Provider,
+    {
+      value: {
+        type: "multiple",
+        value,
+        onValueChange: handleValueChange
+      },
+      children: /* @__PURE__ */ jsx9("div", { className: cn("space-y-2", className), "data-accordion-root": "", children })
+    }
+  );
+}
+function Accordion(props) {
+  if (props.type === "multiple") {
+    return /* @__PURE__ */ jsx9(AccordionMultiple, { ...props });
+  }
+  return /* @__PURE__ */ jsx9(AccordionSingle, { ...props });
+}
+function AccordionItem({
+  value,
+  children,
+  className,
+  disabled = false,
+  testId
+}) {
+  const { value: accordionValue, type } = useAccordion();
+  const uniqueId = useId2();
+  const triggerId = `accordion-trigger-${uniqueId}`;
+  const contentId = `accordion-content-${uniqueId}`;
+  const isOpen = type === "single" ? accordionValue === value : accordionValue.includes(value);
+  return /* @__PURE__ */ jsx9(
+    AccordionItemContext.Provider,
+    {
+      value: { value, isOpen, triggerId, contentId },
+      children: /* @__PURE__ */ jsx9(
+        "div",
+        {
+          className: cn(
+            "rounded-lg border border-border bg-card transition-colors dark:border-border dark:bg-card",
+            disabled && "pointer-events-none opacity-50",
+            className
+          ),
+          "data-state": isOpen ? "open" : "closed",
+          "data-disabled": disabled || void 0,
+          "data-testid": testId,
+          children
+        }
+      )
+    }
+  );
+}
+function AccordionTrigger({
+  children,
+  className,
+  icon,
+  rightContent,
+  testId
+}) {
+  const { onValueChange } = useAccordion();
+  const { value, isOpen, triggerId, contentId } = useAccordionItem();
+  return /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      id: triggerId,
+      type: "button",
+      onClick: () => onValueChange(value),
+      className: cn(
+        "flex w-full items-center justify-between gap-3 p-4 text-left font-medium",
+        "text-foreground transition-colors hover:bg-muted/50 dark:text-foreground dark:hover:bg-muted/50",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "rounded-lg",
+        className
+      ),
+      "aria-expanded": isOpen,
+      "aria-controls": contentId,
+      "data-state": isOpen ? "open" : "closed",
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-3", children: [
+          icon && /* @__PURE__ */ jsx9("span", { className: "shrink-0", children: icon }),
+          /* @__PURE__ */ jsx9("span", { children })
+        ] }),
+        /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
+          rightContent,
+          /* @__PURE__ */ jsx9(
+            ChevronDown,
+            {
+              className: cn(
+                "size-5 shrink-0 text-muted-foreground transition-transform duration-300 [transition-timing-function:cubic-bezier(0.32,0.72,0,1)]",
+                isOpen && "rotate-180"
+              ),
+              "aria-hidden": "true"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function AccordionContent({
+  children,
+  className,
+  testId
+}) {
+  const { isOpen, contentId, triggerId } = useAccordionItem();
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      id: contentId,
+      role: "region",
+      "aria-labelledby": triggerId,
+      "data-state": isOpen ? "open" : "closed",
+      "data-testid": testId,
+      className: cn(
+        // CSS Grid trick for smooth height animation
+        // Premium easing: cubic-bezier(0.32, 0.72, 0, 1) - Apple-style smoothness
+        "grid transition-all duration-300 [transition-timing-function:cubic-bezier(0.32,0.72,0,1)]",
+        isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+      ),
+      children: /* @__PURE__ */ jsx9("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx9("div", { className: cn("px-4 pb-4", className), children }) })
+    }
+  );
+}
+function SimpleAccordion({
+  title,
+  icon,
+  rightContent,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  children,
+  className,
+  triggerClassName,
+  contentClassName,
+  triggerTestId,
+  contentTestId
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState2(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+  const uniqueId = useId2();
+  const triggerId = `simple-accordion-trigger-${uniqueId}`;
+  const contentId = `simple-accordion-content-${uniqueId}`;
+  const toggle = useCallback2(() => {
+    const newValue = !isOpen;
+    if (!isControlled) {
+      setUncontrolledOpen(newValue);
+    }
+    onOpenChange?.(newValue);
+  }, [isOpen, isControlled, onOpenChange]);
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-border bg-card dark:border-border dark:bg-card",
+        className
+      ),
+      "data-state": isOpen ? "open" : "closed",
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            id: triggerId,
+            type: "button",
+            onClick: toggle,
+            className: cn(
+              "flex w-full items-center justify-between gap-3 p-4 text-left font-medium",
+              "text-foreground transition-colors hover:bg-muted/50 dark:text-foreground dark:hover:bg-muted/50",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "rounded-lg",
+              triggerClassName
+            ),
+            "aria-expanded": isOpen,
+            "aria-controls": contentId,
+            "data-state": isOpen ? "open" : "closed",
+            "data-testid": triggerTestId,
+            children: [
+              /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-3", children: [
+                icon && /* @__PURE__ */ jsx9("span", { className: "shrink-0", children: icon }),
+                /* @__PURE__ */ jsx9("span", { children: title })
+              ] }),
+              /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
+                rightContent,
+                /* @__PURE__ */ jsx9(
+                  ChevronDown,
+                  {
+                    className: cn(
+                      "size-5 shrink-0 text-muted-foreground transition-transform duration-300 [transition-timing-function:cubic-bezier(0.32,0.72,0,1)]",
+                      isOpen && "rotate-180"
+                    ),
+                    "aria-hidden": "true"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            id: contentId,
+            role: "region",
+            "aria-labelledby": triggerId,
+            "data-state": isOpen ? "open" : "closed",
+            "data-testid": contentTestId,
+            className: cn(
+              // Premium easing: cubic-bezier(0.32, 0.72, 0, 1) - Apple-style smoothness
+              "grid transition-all duration-300 [transition-timing-function:cubic-bezier(0.32,0.72,0,1)]",
+              isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+            ),
+            children: /* @__PURE__ */ jsx9("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx9("div", { className: cn("px-4 pb-4", contentClassName), children }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/confirm-dialog.tsx
+import * as React6 from "react";
+import { Loader2 as Loader22 } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function ConfirmDialog({
+  title,
+  message,
+  confirmLabel,
+  onConfirm,
+  onCancel,
+  isLoading = false,
+  confirmTestId,
+  cancelTestId,
+  dialogTestId,
+  cancelLabel = "Cancel",
+  confirmVariant = "default",
+  className
+}) {
+  React6.useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.key === "Escape" && !isLoading) {
+        onCancel();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onCancel, isLoading]);
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm dark:bg-background/80",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "confirm-dialog-title",
+      "aria-describedby": "confirm-dialog-description",
+      "data-testid": dialogTestId,
+      children: /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: cn(
+            "mx-4 w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg dark:border-border dark:bg-card",
+            "duration-200 animate-in fade-in-0 zoom-in-95",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx10(
+              "h3",
+              {
+                id: "confirm-dialog-title",
+                className: "text-lg font-semibold text-foreground dark:text-foreground",
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsx10(
+              "p",
+              {
+                id: "confirm-dialog-description",
+                className: "mt-2 text-muted-foreground dark:text-muted-foreground",
+                children: message
+              }
+            ),
+            /* @__PURE__ */ jsxs7("div", { className: "mt-6 flex justify-end gap-3", children: [
+              /* @__PURE__ */ jsx10(
+                Button,
+                {
+                  variant: "ghost",
+                  onClick: onCancel,
+                  disabled: isLoading,
+                  "data-testid": cancelTestId,
+                  children: cancelLabel
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                Button,
+                {
+                  variant: confirmVariant,
+                  onClick: onConfirm,
+                  disabled: isLoading,
+                  "data-testid": confirmTestId,
+                  children: isLoading ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+                    /* @__PURE__ */ jsx10(Loader22, { className: "mr-2 size-4 animate-spin" }),
+                    confirmLabel,
+                    "..."
+                  ] }) : confirmLabel
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/dicebear-avatar.tsx
+import * as React7 from "react";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var avatarVariants = cva2(
+  "relative inline-flex shrink-0 overflow-hidden rounded-full bg-muted dark:bg-muted",
+  {
+    variants: {
+      size: {
+        xs: "h-6 w-6",
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12",
+        xl: "h-16 w-16",
+        "2xl": "h-20 w-20"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var DICEBEAR_BASE_URL = "https://api.dicebear.com/9.x";
+function buildDiceBearUrl(seed, style = "adventurer-neutral") {
+  const encodedSeed = encodeURIComponent(seed);
+  return `${DICEBEAR_BASE_URL}/${style}/svg?seed=${encodedSeed}`;
+}
+var DiceBearAvatar = React7.forwardRef(
+  ({
+    seed,
+    avatarStyle = "adventurer-neutral",
+    size,
+    alt = "Avatar",
+    fallback,
+    className,
+    ...props
+  }, ref) => {
+    const [hasError, setHasError] = React7.useState(false);
+    const url = buildDiceBearUrl(seed, avatarStyle);
+    React7.useEffect(() => {
+      setHasError(false);
+    }, [seed, avatarStyle]);
+    return /* @__PURE__ */ jsx11(
+      "div",
+      {
+        ref,
+        className: cn(avatarVariants({ size }), className),
+        ...props,
+        children: hasError ? fallback ? /* @__PURE__ */ jsx11("div", { className: "flex h-full w-full items-center justify-center text-xs font-medium text-muted-foreground dark:text-muted-foreground", children: fallback }) : /* @__PURE__ */ jsx11("div", { className: "flex h-full w-full items-center justify-center bg-primary/10 text-xs font-medium text-primary dark:bg-primary/10 dark:text-primary", children: seed.charAt(0).toUpperCase() }) : /* @__PURE__ */ jsx11(
+          "img",
+          {
+            src: url,
+            alt,
+            className: "h-full w-full object-cover",
+            onError: () => setHasError(true)
+          }
+        )
+      }
+    );
+  }
+);
+DiceBearAvatar.displayName = "DiceBearAvatar";
+
+// src/intent-icon.tsx
+import { Check, AlertTriangle, X, Info } from "lucide-react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var intentConfig = {
+  success: {
+    outerBg: "bg-[rgba(33,196,93,0.10)] dark:bg-[rgba(33,196,93,0.10)]",
+    innerBg: "bg-[rgba(33,196,93,0.20)] dark:bg-[rgba(33,196,93,0.20)]",
+    iconColor: "text-[#21c45d] dark:text-[#21c45d]",
+    Icon: Check
+  },
+  warning: {
+    outerBg: "bg-[rgba(245,159,10,0.10)] dark:bg-[rgba(245,159,10,0.10)]",
+    innerBg: "bg-[rgba(245,159,10,0.20)] dark:bg-[rgba(245,159,10,0.20)]",
+    iconColor: "text-[#f59f0a] dark:text-[#f59f0a]",
+    Icon: AlertTriangle
+  },
+  error: {
+    outerBg: "bg-[rgba(239,67,67,0.10)] dark:bg-[rgba(239,67,67,0.10)]",
+    innerBg: "bg-[rgba(239,67,67,0.20)] dark:bg-[rgba(239,67,67,0.20)]",
+    iconColor: "text-[#ef4343] dark:text-[#ef4343]",
+    Icon: X
+  },
+  info: {
+    outerBg: "bg-[rgba(60,131,246,0.10)] dark:bg-[rgba(60,131,246,0.10)]",
+    innerBg: "bg-[rgba(60,131,246,0.20)] dark:bg-[rgba(60,131,246,0.20)]",
+    iconColor: "text-[#3c83f6] dark:text-[#3c83f6]",
+    Icon: Info
+  }
+};
+var sizeConfig = {
+  md: {
+    outer: "w-[80px] h-[80px] rounded-[40px]",
+    inner: "w-[48px] h-[48px] rounded-[24px]",
+    iconSize: 24
+  },
+  sm: {
+    outer: "w-[48px] h-[48px] rounded-[24px]",
+    inner: "w-[28px] h-[28px] rounded-[14px]",
+    iconSize: 14
+  }
+};
+function IntentIcon({
+  intent = "success",
+  size = "md"
+}) {
+  const { outerBg, innerBg, iconColor, Icon } = intentConfig[intent];
+  const { outer, inner, iconSize } = sizeConfig[size];
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      "data-testid": "intent-icon",
+      className: `${outer} ${outerBg} flex items-center justify-center`,
+      children: /* @__PURE__ */ jsx12("div", { className: `${inner} ${innerBg} flex items-center justify-center`, children: /* @__PURE__ */ jsx12(Icon, { className: iconColor, size: iconSize }) })
+    }
+  );
+}
+
+// src/section-heading.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var sizeConfig2 = {
+  display: {
+    className: "text-4xl font-bold leading-10",
+    tag: "p"
+  },
+  h1: {
+    className: "text-[28px] font-bold leading-[34px]",
+    tag: "h1"
+  },
+  h2: {
+    className: "text-2xl font-semibold leading-[30px]",
+    tag: "h2"
+  },
+  h3: {
+    className: "text-xl font-bold leading-[26px]",
+    tag: "h3"
+  }
+};
+function SectionHeading({
+  title,
+  description,
+  align = "center",
+  size = "h1"
+}) {
+  const { className: sizeClass, tag: Tag } = sizeConfig2[size];
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      "data-testid": "section-heading",
+      className: cn(
+        "flex max-w-[480px] flex-col gap-2",
+        align === "center" && "items-center text-center",
+        align === "left" && "items-start text-left"
+      ),
+      children: [
+        /* @__PURE__ */ jsx13(Tag, { className: cn("text-foreground dark:text-foreground", sizeClass), children: title }),
+        description && /* @__PURE__ */ jsx13("p", { className: "text-sm font-normal leading-[21px] text-muted-foreground dark:text-muted-foreground", children: description })
+      ]
+    }
+  );
+}
+
+// src/filter-chip.tsx
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function FilterChip({
+  label,
+  active = false,
+  count,
+  size = "md",
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs9(
+    "button",
+    {
+      type: "button",
+      "data-testid": "filter-chip",
+      "data-active": active ? "true" : "false",
+      onClick,
+      className: cn(
+        // Base
+        "inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap border font-medium transition-colors",
+        // Size
+        size === "md" && "h-8 rounded-md px-3 text-[13px]",
+        size === "sm" && "h-7 rounded-md px-2.5 text-xs",
+        // State — inactive
+        !active && "border-border bg-background text-muted-foreground dark:border-border dark:bg-background dark:text-muted-foreground",
+        // State — active
+        active && "border-foreground bg-foreground text-background dark:border-foreground dark:bg-foreground dark:text-background",
+        // Hover
+        !active && "hover:bg-muted dark:hover:bg-muted",
+        active && "hover:bg-foreground/90 dark:hover:bg-foreground/90"
+      ),
+      children: [
+        label,
+        count != null && /* @__PURE__ */ jsx14(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center justify-center rounded-full px-[5px] text-[11px] font-semibold",
+              "h-[18px] min-w-[18px]",
+              !active && "bg-muted text-muted-foreground dark:bg-muted dark:text-muted-foreground",
+              active && "bg-background/30 text-background dark:bg-background/30 dark:text-background"
+            ),
+            children: count
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/distribution-chip.tsx
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function DistributionChip({
+  count,
+  label,
+  dotClass,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs10(
+    "span",
+    {
+      "data-testid": testId,
+      className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1 text-sm font-medium text-foreground",
+      children: [
+        /* @__PURE__ */ jsx15("span", { className: `size-2 rounded-full ${dotClass}` }),
+        /* @__PURE__ */ jsx15("span", { className: "tabular-nums", children: count }),
+        /* @__PURE__ */ jsx15("span", { className: "text-muted-foreground", children: label })
+      ]
+    }
+  );
+}
+
+// src/skeleton-bar.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function SkeletonBar({
+  width = "full",
+  height = 14,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      "data-testid": "skeleton-bar",
+      className: cn(
+        "animate-pulse rounded-full bg-muted dark:bg-muted",
+        width === "full" ? "w-full" : "",
+        className
+      ),
+      style: {
+        height: `${height}px`,
+        ...width !== "full" ? { width: `${width}px` } : {}
+      }
+    }
+  );
+}
+
+// src/skeleton-card.tsx
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+function SkeletonCard({ className = "" }) {
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      "data-testid": "skeleton-card",
+      className: cn(
+        "flex w-full flex-col gap-2.5 rounded-xl border border-border bg-card p-5 dark:border-border dark:bg-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx17(SkeletonBar, { width: 80, height: 10 }),
+        /* @__PURE__ */ jsx17(SkeletonBar, { width: 60, height: 24 }),
+        /* @__PURE__ */ jsx17(SkeletonBar, { width: 100, height: 10 })
+      ]
+    }
+  );
+}
+
+// src/skeleton-row.tsx
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+function SkeletonRow({ className = "" }) {
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      "data-testid": "skeleton-row",
+      className: cn(
+        "flex w-full items-center gap-3.5 rounded-[10px] border border-border bg-card px-[18px] py-[14px] dark:border-border dark:bg-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx18("div", { className: "h-9 w-9 flex-shrink-0 animate-pulse rounded-full bg-muted dark:bg-muted" }),
+        /* @__PURE__ */ jsxs12("div", { className: "flex flex-1 flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx18(SkeletonBar, { width: 200, height: 12 }),
+          /* @__PURE__ */ jsx18(SkeletonBar, { width: 140, height: 10 })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/stacked-list.tsx
+import * as React8 from "react";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var StackedList = React8.forwardRef(
+  ({ className, divided = true, density = "default", ...props }, ref) => /* @__PURE__ */ jsx19(
+    "ul",
+    {
+      ref,
+      role: "list",
+      className: cn("w-full", divided && "divide-y divide-border", className),
+      "data-density": density,
+      ...props
+    }
+  )
+);
+StackedList.displayName = "StackedList";
+var StackedListItem = React8.forwardRef(
+  ({
+    className,
+    avatar,
+    title,
+    description,
+    meta,
+    action,
+    density = "default",
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs13(
+    "li",
+    {
+      ref,
+      className: cn(
+        "flex items-center gap-4",
+        density === "compact" ? "px-3 py-2" : "px-4 py-4",
+        className
+      ),
+      ...props,
+      children: [
+        avatar && /* @__PURE__ */ jsx19("div", { className: "flex-shrink-0", children: avatar }),
+        /* @__PURE__ */ jsxs13("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx19(
+            "p",
+            {
+              className: cn(
+                "truncate font-medium text-foreground",
+                density === "compact" ? "text-sm" : "text-base"
+              ),
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx19(
+            "p",
+            {
+              className: cn(
+                "truncate text-muted-foreground",
+                density === "compact" ? "text-xs" : "text-sm"
+              ),
+              children: description
+            }
+          )
+        ] }),
+        meta && /* @__PURE__ */ jsx19("span", { className: "flex-shrink-0 text-sm text-muted-foreground", children: meta }),
+        action && /* @__PURE__ */ jsx19("div", { className: "flex-shrink-0", children: action })
+      ]
+    }
+  )
+);
+StackedListItem.displayName = "StackedListItem";
+
+// src/grid-list.tsx
+import * as React9 from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var COLUMN_CLASSES = {
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+};
+var GAP_CLASSES = {
+  sm: "gap-3",
+  md: "gap-4",
+  lg: "gap-6"
+};
+var GridList = React9.forwardRef(
+  ({ className, columns = 3, gap = "md", ...props }, ref) => /* @__PURE__ */ jsx20(
+    "div",
+    {
+      ref,
+      className: cn(
+        "grid",
+        COLUMN_CLASSES[columns],
+        GAP_CLASSES[gap],
+        className
+      ),
+      ...props
+    }
+  )
+);
+GridList.displayName = "GridList";
+var GridListItem = React9.forwardRef(
+  ({ className, hoverable = false, ...props }, ref) => /* @__PURE__ */ jsx20(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg border bg-card p-4 text-card-foreground shadow-sm",
+        hoverable && "duration-fast cursor-pointer transition-shadow hover:shadow-md",
+        className
+      ),
+      ...props
+    }
+  )
+);
+GridListItem.displayName = "GridListItem";
+
+// src/pagination.tsx
+import * as React10 from "react";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+function getPageRange(current, total, siblings) {
+  const range = [];
+  const left = Math.max(2, current - siblings);
+  const right = Math.min(total - 1, current + siblings);
+  range.push(1);
+  if (left > 2) range.push("ellipsis");
+  for (let i = left; i <= right; i++) range.push(i);
+  if (right < total - 1) range.push("ellipsis");
+  if (total > 1) range.push(total);
+  return range;
+}
+var PaginationButton = React10.forwardRef(({ className, active, disabled, ...props }, ref) => /* @__PURE__ */ jsx21(
+  "button",
+  {
+    ref,
+    type: "button",
+    disabled,
+    className: cn(
+      "inline-flex h-9 min-w-9 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors",
+      active ? "bg-primary text-primary-foreground" : "bg-background text-foreground hover:bg-muted",
+      disabled && "opacity-disabled pointer-events-none",
+      "border border-input",
+      className
+    ),
+    ...props
+  }
+));
+PaginationButton.displayName = "PaginationButton";
+var Pagination = React10.forwardRef(
+  ({
+    className,
+    currentPage,
+    totalPages,
+    onPageChange,
+    variant = "numbered",
+    siblingCount = 1,
+    ...props
+  }, ref) => {
+    const handleChange = (page) => {
+      if (page >= 1 && page <= totalPages && onPageChange) {
+        onPageChange(page);
+      }
+    };
+    if (variant === "simple") {
+      return /* @__PURE__ */ jsxs14(
+        "nav",
+        {
+          ref,
+          "aria-label": "Pagination",
+          className: cn("flex items-center justify-between", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx21(
+              PaginationButton,
+              {
+                onClick: () => handleChange(currentPage - 1),
+                disabled: currentPage <= 1,
+                children: "Previous"
+              }
+            ),
+            /* @__PURE__ */ jsxs14("span", { className: "text-sm text-muted-foreground", children: [
+              "Page ",
+              currentPage,
+              " of ",
+              totalPages
+            ] }),
+            /* @__PURE__ */ jsx21(
+              PaginationButton,
+              {
+                onClick: () => handleChange(currentPage + 1),
+                disabled: currentPage >= totalPages,
+                children: "Next"
+              }
+            )
+          ]
+        }
+      );
+    }
+    const pages = getPageRange(currentPage, totalPages, siblingCount);
+    return /* @__PURE__ */ jsxs14(
+      "nav",
+      {
+        ref,
+        "aria-label": "Pagination",
+        className: cn(
+          "flex items-center gap-1",
+          variant === "centered" && "justify-center",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx21(
+            PaginationButton,
+            {
+              onClick: () => handleChange(currentPage - 1),
+              disabled: currentPage <= 1,
+              children: "Previous"
+            }
+          ),
+          pages.map(
+            (page, i) => page === "ellipsis" ? /* @__PURE__ */ jsx21(
+              "span",
+              {
+                className: "inline-flex h-9 min-w-9 items-center justify-center text-sm text-muted-foreground",
+                children: "..."
+              },
+              `ellipsis-${i}`
+            ) : /* @__PURE__ */ jsx21(
+              PaginationButton,
+              {
+                active: page === currentPage,
+                onClick: () => handleChange(page),
+                children: page
+              },
+              page
+            )
+          ),
+          /* @__PURE__ */ jsx21(
+            PaginationButton,
+            {
+              onClick: () => handleChange(currentPage + 1),
+              disabled: currentPage >= totalPages,
+              children: "Next"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Pagination.displayName = "Pagination";
+
+// src/stepper.tsx
+import * as React11 from "react";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var StepContext = React11.createContext({
+  index: 0,
+  activeStep: 0,
+  isLast: false,
+  variant: "horizontal",
+  size: "md"
+});
+var INDICATOR_SIZE = {
+  sm: "h-6 w-6 text-xs",
+  md: "h-8 w-8 text-sm",
+  lg: "h-10 w-10 text-base"
+};
+var LABEL_SIZE = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var StepperStep = React11.forwardRef(
+  ({
+    className,
+    label,
+    description,
+    icon,
+    error,
+    disabled,
+    completed,
+    href,
+    ...props
+  }, ref) => {
+    const { index, activeStep, isLast, variant, size } = React11.useContext(StepContext);
+    const status = error ? "error" : disabled ? "disabled" : index < activeStep || completed ? "complete" : index === activeStep ? "current" : "upcoming";
+    const isCurrent = index === activeStep && !error && !disabled;
+    const indicator = /* @__PURE__ */ jsx22(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center rounded-full font-medium",
+          INDICATOR_SIZE[size],
+          status === "complete" && "bg-primary text-primary-foreground",
+          status === "current" && "border-2 border-primary bg-background text-primary",
+          status === "upcoming" && "border-2 border-border bg-background text-muted-foreground dark:border-border dark:bg-background dark:text-muted-foreground",
+          status === "error" && "border-intent-error bg-intent-error/10 text-intent-error dark:border-intent-error dark:text-intent-error border-2",
+          status === "disabled" && "border-2 border-muted bg-muted text-muted-foreground opacity-50"
+        ),
+        children: icon ?? (status === "complete" ? "\u2713" : status === "error" ? "!" : index + 1)
+      }
+    );
+    if (variant === "vertical") {
+      return /* @__PURE__ */ jsxs15(
+        "div",
+        {
+          ref,
+          role: "listitem",
+          "aria-current": isCurrent ? "step" : void 0,
+          "aria-disabled": disabled || void 0,
+          className: cn("flex gap-3", disabled && "opacity-50", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxs15("div", { className: "flex flex-col items-center", children: [
+              indicator,
+              !isLast && /* @__PURE__ */ jsx22(
+                "div",
+                {
+                  className: cn(
+                    "mt-1 w-0.5 flex-1",
+                    status === "complete" ? "bg-primary" : "bg-muted"
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs15("div", { className: "pb-6", children: [
+              /* @__PURE__ */ jsx22(
+                "p",
+                {
+                  className: cn(
+                    "font-medium",
+                    LABEL_SIZE[size],
+                    status === "error" ? "text-intent-error dark:text-intent-error" : status === "upcoming" || status === "disabled" ? "text-muted-foreground" : "text-foreground"
+                  ),
+                  children: label
+                }
+              ),
+              description && /* @__PURE__ */ jsx22("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+            ] })
+          ]
+        }
+      );
+    }
+    const stepContent = /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
+      indicator,
+      /* @__PURE__ */ jsx22(
+        "span",
+        {
+          className: cn(
+            "whitespace-nowrap font-medium",
+            LABEL_SIZE[size],
+            status === "error" ? "text-intent-error dark:text-intent-error" : status === "upcoming" || status === "disabled" ? "text-muted-foreground dark:text-muted-foreground" : "text-foreground dark:text-foreground"
+          ),
+          children: label
+        }
+      )
+    ] });
+    return /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        ref,
+        role: "listitem",
+        "aria-current": isCurrent ? "step" : void 0,
+        "aria-disabled": disabled || void 0,
+        className: cn("flex items-center", className),
+        ...props,
+        children: [
+          href && !disabled ? /* @__PURE__ */ jsx22(
+            "a",
+            {
+              href,
+              className: "flex items-center gap-2 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "aria-label": label,
+              children: stepContent
+            }
+          ) : stepContent,
+          !isLast && /* @__PURE__ */ jsx22(
+            "div",
+            {
+              className: cn(
+                "mx-3 h-px min-w-[16px] flex-1",
+                index < activeStep ? "bg-primary" : "bg-border dark:bg-border"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StepperStep.displayName = "StepperStep";
+var Stepper = React11.forwardRef(
+  ({
+    className,
+    variant = "horizontal",
+    activeStep,
+    size = "md",
+    children,
+    ...props
+  }, ref) => {
+    const steps = React11.Children.toArray(children);
+    return /* @__PURE__ */ jsx22(
+      "div",
+      {
+        ref,
+        role: "list",
+        className: cn(
+          variant === "horizontal" ? "flex items-center" : "flex flex-col",
+          className
+        ),
+        ...props,
+        children: steps.map((child, i) => /* @__PURE__ */ jsx22(
+          StepContext.Provider,
+          {
+            value: {
+              index: i,
+              activeStep,
+              isLast: i === steps.length - 1,
+              variant,
+              size
+            },
+            children: child
+          },
+          i
+        ))
+      }
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+
+// src/command-palette.tsx
+import * as React12 from "react";
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+var SIZE_CLASSES = {
+  sm: "max-w-sm",
+  md: "max-w-lg",
+  lg: "max-w-2xl"
+};
+var CommandPalette = React12.forwardRef(
+  ({
+    className,
+    open,
+    onClose,
+    results = [],
+    placeholder = "Search commands...",
+    onSearch,
+    size = "md",
+    ...props
+  }, ref) => {
+    const [query, setQuery] = React12.useState("");
+    const [activeIndex, setActiveIndex] = React12.useState(0);
+    React12.useEffect(() => {
+      if (!open) return;
+      const handler = (e) => {
+        if (e.key === "Escape") onClose?.();
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setActiveIndex((i) => Math.min(i + 1, results.length - 1));
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setActiveIndex((i) => Math.max(i - 1, 0));
+        }
+        if (e.key === "Enter" && results[activeIndex]) {
+          results[activeIndex].onSelect?.();
+          onClose?.();
+        }
+      };
+      document.addEventListener("keydown", handler);
+      return () => document.removeEventListener("keydown", handler);
+    }, [open, onClose, results, activeIndex]);
+    React12.useEffect(() => {
+      setActiveIndex(0);
+    }, [query]);
+    if (!open) return null;
+    const grouped = results.reduce(
+      (acc, r) => {
+        const group = r.group || "Results";
+        if (!acc[group]) acc[group] = [];
+        acc[group].push(r);
+        return acc;
+      },
+      {}
+    );
+    return /* @__PURE__ */ jsxs16(Fragment3, { children: [
+      /* @__PURE__ */ jsx23(
+        "div",
+        {
+          className: "z-modal fixed inset-0 bg-foreground/60",
+          onClick: onClose
+        }
+      ),
+      /* @__PURE__ */ jsx23("div", { className: "z-modal fixed inset-0 flex items-start justify-center pt-[15vh]", children: /* @__PURE__ */ jsxs16(
+        "div",
+        {
+          ref,
+          className: cn(
+            "w-full overflow-hidden rounded-xl border border-border bg-card shadow-lg",
+            SIZE_CLASSES[size],
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxs16("div", { className: "flex items-center border-b border-border px-4", children: [
+              /* @__PURE__ */ jsx23("span", { className: "mr-2 text-muted-foreground", children: "\u2318" }),
+              /* @__PURE__ */ jsx23(
+                "input",
+                {
+                  type: "text",
+                  className: "h-12 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground",
+                  placeholder,
+                  value: query,
+                  onChange: (e) => {
+                    setQuery(e.target.value);
+                    onSearch?.(e.target.value);
+                  },
+                  autoFocus: true
+                }
+              ),
+              /* @__PURE__ */ jsx23("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-xs text-muted-foreground", children: "Esc" })
+            ] }),
+            /* @__PURE__ */ jsx23("div", { className: "max-h-80 overflow-y-auto p-2", children: Object.entries(grouped).length === 0 ? /* @__PURE__ */ jsx23("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No results found" }) : Object.entries(grouped).map(([group, items]) => /* @__PURE__ */ jsxs16("div", { children: [
+              /* @__PURE__ */ jsx23("p", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: group }),
+              items.map((item) => {
+                const idx = results.indexOf(item);
+                return /* @__PURE__ */ jsxs16(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn(
+                      "flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm",
+                      idx === activeIndex ? "bg-muted text-foreground" : "text-foreground hover:bg-muted/50"
+                    ),
+                    onClick: () => {
+                      item.onSelect?.();
+                      onClose?.();
+                    },
+                    onMouseEnter: () => setActiveIndex(idx),
+                    children: [
+                      item.icon && /* @__PURE__ */ jsx23("span", { className: "flex-shrink-0 text-muted-foreground", children: item.icon }),
+                      /* @__PURE__ */ jsx23("span", { className: "flex-1", children: item.label }),
+                      item.shortcut && /* @__PURE__ */ jsx23("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-xs text-muted-foreground", children: item.shortcut })
+                    ]
+                  },
+                  item.id
+                );
+              })
+            ] }, group)) })
+          ]
+        }
+      ) })
+    ] });
+  }
+);
+CommandPalette.displayName = "CommandPalette";
+
+// src/app-shell.tsx
+import * as React13 from "react";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+var AppShell = React13.forwardRef(
+  ({
+    className,
+    variant = "stacked",
+    sidebarPosition = "left",
+    sidebarCollapsed = false,
+    header,
+    sidebar,
+    detailPanel,
+    children,
+    ...props
+  }, ref) => {
+    if (variant === "stacked") {
+      return /* @__PURE__ */ jsxs17(
+        "div",
+        {
+          ref,
+          className: cn("flex min-h-screen flex-col bg-background", className),
+          ...props,
+          children: [
+            header,
+            /* @__PURE__ */ jsx24("main", { className: "flex-1", children })
+          ]
+        }
+      );
+    }
+    if (variant === "multi-column") {
+      return /* @__PURE__ */ jsxs17(
+        "div",
+        {
+          ref,
+          className: cn("flex min-h-screen bg-background", className),
+          ...props,
+          children: [
+            sidebar && /* @__PURE__ */ jsx24(
+              "aside",
+              {
+                className: cn(
+                  "flex-shrink-0 border-r border-border bg-card",
+                  sidebarCollapsed ? "w-16" : "w-60"
+                ),
+                children: sidebar
+              }
+            ),
+            /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-col", children: [
+              header,
+              /* @__PURE__ */ jsxs17("div", { className: "flex flex-1", children: [
+                /* @__PURE__ */ jsx24("main", { className: "flex-1 overflow-y-auto", children }),
+                detailPanel && /* @__PURE__ */ jsx24("aside", { className: "w-80 flex-shrink-0 border-l border-border bg-card", children: detailPanel })
+              ] })
+            ] })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs17(
+      "div",
+      {
+        ref,
+        className: cn("flex min-h-screen bg-background", className),
+        ...props,
+        children: [
+          sidebarPosition === "left" && sidebar && /* @__PURE__ */ jsx24(
+            "aside",
+            {
+              className: cn(
+                "flex-shrink-0 border-r border-border bg-card transition-all",
+                sidebarCollapsed ? "w-16" : "w-60"
+              ),
+              children: sidebar
+            }
+          ),
+          /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-col", children: [
+            header,
+            /* @__PURE__ */ jsx24("main", { className: "flex-1 overflow-y-auto", children })
+          ] }),
+          sidebarPosition === "right" && sidebar && /* @__PURE__ */ jsx24(
+            "aside",
+            {
+              className: cn(
+                "flex-shrink-0 border-l border-border bg-card transition-all",
+                sidebarCollapsed ? "w-16" : "w-60"
+              ),
+              children: sidebar
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AppShell.displayName = "AppShell";
+
+// src/popover.tsx
+import * as React14 from "react";
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+var SIDE_CLASSES = {
+  top: "bottom-full mb-2",
+  bottom: "top-full mt-2",
+  left: "right-full mr-2",
+  right: "left-full ml-2"
+};
+var ALIGN_CLASSES = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
+};
+var Popover = React14.forwardRef(
+  ({
+    className,
+    open,
+    onOpenChange,
+    trigger,
+    side = "bottom",
+    align = "start",
+    children,
+    ...props
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = React14.useState(false);
+    const isOpen = open ?? internalOpen;
+    const setOpen = onOpenChange ?? setInternalOpen;
+    React14.useEffect(() => {
+      if (!isOpen) return;
+      const handler = (e) => {
+        if (e.key === "Escape") setOpen(false);
+      };
+      document.addEventListener("keydown", handler);
+      return () => document.removeEventListener("keydown", handler);
+    }, [isOpen, setOpen]);
+    return /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        ref,
+        className: cn("relative inline-block", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx25("div", { onClick: () => setOpen(!isOpen), children: trigger }),
+          isOpen && /* @__PURE__ */ jsxs18(Fragment4, { children: [
+            /* @__PURE__ */ jsx25(
+              "div",
+              {
+                className: "z-popover fixed inset-0",
+                onClick: () => setOpen(false)
+              }
+            ),
+            /* @__PURE__ */ jsx25(
+              "div",
+              {
+                className: cn(
+                  "z-popover absolute w-72 rounded-lg border border-border bg-card p-4 shadow-lg",
+                  SIDE_CLASSES[side],
+                  (side === "top" || side === "bottom") && ALIGN_CLASSES[align]
+                ),
+                children
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Popover.displayName = "Popover";
+var HoverCard = React14.forwardRef(
+  ({
+    className,
+    trigger,
+    side = "bottom",
+    align = "start",
+    delay = 200,
+    children,
+    ...props
+  }, ref) => {
+    const [open, setOpen] = React14.useState(false);
+    const timeoutRef = React14.useRef();
+    const handleEnter = () => {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setOpen(true), delay);
+    };
+    const handleLeave = () => {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setOpen(false), 150);
+    };
+    React14.useEffect(() => {
+      return () => clearTimeout(timeoutRef.current);
+    }, []);
+    return /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        ref,
+        className: cn("relative inline-block", className),
+        onMouseEnter: handleEnter,
+        onMouseLeave: handleLeave,
+        ...props,
+        children: [
+          trigger,
+          open && /* @__PURE__ */ jsx25(
+            "div",
+            {
+              className: cn(
+                "z-popover absolute w-80 rounded-lg border border-border bg-card p-4 shadow-lg",
+                SIDE_CLASSES[side],
+                ALIGN_CLASSES[align]
+              ),
+              onMouseEnter: handleEnter,
+              onMouseLeave: handleLeave,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+HoverCard.displayName = "HoverCard";
+
+// src/calendar.tsx
+import * as React15 from "react";
+import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getStartDayOfWeek(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isDateInRange(date, start, end) {
+  const d = date.getTime();
+  return d >= start.getTime() && d <= end.getTime();
+}
+function formatMonth(year, month) {
+  return new Date(year, month, 1).toLocaleDateString("en-US", {
+    month: "long",
+    year: "numeric"
+  });
+}
+function formatDateForInput(date) {
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+var WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var SIZE_CONFIG = {
+  sm: { cell: "h-7 w-7 text-xs", gap: "gap-0.5", pad: "p-2", dot: "h-1 w-1" },
+  md: { cell: "h-9 w-9 text-sm", gap: "gap-1", pad: "p-3", dot: "h-1.5 w-1.5" },
+  lg: {
+    cell: "h-11 w-11 text-base",
+    gap: "gap-1",
+    pad: "p-4",
+    dot: "h-1.5 w-1.5"
+  }
+};
+var Calendar = React15.forwardRef(
+  ({
+    className,
+    value,
+    onChange,
+    selectionMode = "single",
+    rangeStart,
+    rangeEnd,
+    onRangeChange,
+    minDate: minDateProp,
+    maxDate: maxDateProp,
+    events,
+    today: todayProp,
+    size = "md",
+    ...props
+  }, ref) => {
+    const today = React15.useMemo(() => {
+      if (todayProp) return todayProp;
+      const now = Date.now();
+      const d = new Date(now);
+      return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    }, [todayProp]);
+    const initialDate = value ?? rangeStart ?? today;
+    const [viewYear, setViewYear] = React15.useState(initialDate.getFullYear());
+    const [viewMonth, setViewMonth] = React15.useState(initialDate.getMonth());
+    const [focusedDay, setFocusedDay] = React15.useState(null);
+    const daysInMonth = getDaysInMonth(viewYear, viewMonth);
+    const startDay = getStartDayOfWeek(viewYear, viewMonth);
+    const config = SIZE_CONFIG[size];
+    const prevMonth = () => {
+      if (viewMonth === 0) {
+        setViewYear((y) => y - 1);
+        setViewMonth(11);
+      } else {
+        setViewMonth((m) => m - 1);
+      }
+    };
+    const nextMonth = () => {
+      if (viewMonth === 11) {
+        setViewYear((y) => y + 1);
+        setViewMonth(0);
+      } else {
+        setViewMonth((m) => m + 1);
+      }
+    };
+    const isDisabled = (day) => {
+      const date = new Date(viewYear, viewMonth, day);
+      if (minDateProp && date < new Date(
+        minDateProp.getFullYear(),
+        minDateProp.getMonth(),
+        minDateProp.getDate()
+      )) {
+        return true;
+      }
+      if (maxDateProp && date > new Date(
+        maxDateProp.getFullYear(),
+        maxDateProp.getMonth(),
+        maxDateProp.getDate()
+      )) {
+        return true;
+      }
+      return false;
+    };
+    const handleDayClick = (day) => {
+      const date = new Date(viewYear, viewMonth, day);
+      if (selectionMode === "single") {
+        onChange?.(date);
+      } else {
+        if (!rangeStart || rangeStart && rangeEnd) {
+          onRangeChange?.(date, null);
+        } else {
+          const [start, end] = date >= rangeStart ? [rangeStart, date] : [date, rangeStart];
+          onRangeChange?.(start, end);
+        }
+      }
+    };
+    const hasEvent = (day) => {
+      if (!events?.length) return false;
+      const date = new Date(viewYear, viewMonth, day);
+      return events.some((e) => isSameDay(e.date, date));
+    };
+    const handleKeyDown = (e) => {
+      const current = focusedDay ?? (value?.getMonth() === viewMonth ? value.getDate() : 1);
+      switch (e.key) {
+        case "ArrowRight": {
+          e.preventDefault();
+          const next = current + 1;
+          if (next > daysInMonth) {
+            nextMonth();
+            setFocusedDay(1);
+          } else {
+            setFocusedDay(next);
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          e.preventDefault();
+          const prev = current - 1;
+          if (prev < 1) {
+            prevMonth();
+            const prevDays = getDaysInMonth(
+              viewMonth === 0 ? viewYear - 1 : viewYear,
+              viewMonth === 0 ? 11 : viewMonth - 1
+            );
+            setFocusedDay(prevDays);
+          } else {
+            setFocusedDay(prev);
+          }
+          break;
+        }
+        case "ArrowDown": {
+          e.preventDefault();
+          const next = current + 7;
+          if (next > daysInMonth) {
+            nextMonth();
+            setFocusedDay(next - daysInMonth);
+          } else {
+            setFocusedDay(next);
+          }
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const prev = current - 7;
+          if (prev < 1) {
+            const prevDays = getDaysInMonth(
+              viewMonth === 0 ? viewYear - 1 : viewYear,
+              viewMonth === 0 ? 11 : viewMonth - 1
+            );
+            prevMonth();
+            setFocusedDay(prevDays + prev);
+          } else {
+            setFocusedDay(prev);
+          }
+          break;
+        }
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          if (current >= 1 && current <= daysInMonth && !isDisabled(current)) {
+            handleDayClick(current);
+          }
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          setFocusedDay(1);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          setFocusedDay(daysInMonth);
+          break;
+        }
+      }
+    };
+    const cells = [];
+    for (let i = 0; i < startDay; i++) cells.push(null);
+    for (let d = 1; d <= daysInMonth; d++) cells.push(d);
+    return /* @__PURE__ */ jsxs19(
+      "div",
+      {
+        ref,
+        role: "grid",
+        "aria-label": formatMonth(viewYear, viewMonth),
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        className: cn(
+          "w-fit rounded-lg border border-border bg-card shadow-sm outline-none focus:ring-2 focus:ring-ring",
+          config.pad,
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs19("div", { className: "mb-2 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx26(
+              "button",
+              {
+                type: "button",
+                onClick: prevMonth,
+                tabIndex: -1,
+                className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-foreground hover:bg-muted",
+                "aria-label": "Previous month",
+                children: "\u2039"
+              }
+            ),
+            /* @__PURE__ */ jsx26(
+              "span",
+              {
+                className: "text-sm font-medium text-foreground",
+                "aria-live": "polite",
+                children: formatMonth(viewYear, viewMonth)
+              }
+            ),
+            /* @__PURE__ */ jsx26(
+              "button",
+              {
+                type: "button",
+                onClick: nextMonth,
+                tabIndex: -1,
+                className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-foreground hover:bg-muted",
+                "aria-label": "Next month",
+                children: "\u203A"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx26("div", { role: "row", className: cn("grid grid-cols-7", config.gap), children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx26(
+            "div",
+            {
+              role: "columnheader",
+              className: cn(
+                "flex items-center justify-center font-medium text-muted-foreground",
+                config.cell
+              ),
+              children: day
+            },
+            day
+          )) }),
+          /* @__PURE__ */ jsx26("div", { className: cn("grid grid-cols-7", config.gap), children: cells.map((day, i) => {
+            if (day === null) {
+              return /* @__PURE__ */ jsx26("div", { className: config.cell }, `empty-${i}`);
+            }
+            const date = new Date(viewYear, viewMonth, day);
+            const disabled = isDisabled(day);
+            const isFocused = focusedDay === day;
+            let isSelected = false;
+            let isRangeEndpoint = false;
+            let isInRange = false;
+            if (selectionMode === "single") {
+              isSelected = value ? isSameDay(date, value) : false;
+            } else {
+              if (rangeStart && isSameDay(date, rangeStart)) {
+                isRangeEndpoint = true;
+              }
+              if (rangeEnd && isSameDay(date, rangeEnd)) {
+                isRangeEndpoint = true;
+              }
+              if (rangeStart && rangeEnd) {
+                isInRange = isDateInRange(date, rangeStart, rangeEnd);
+              }
+            }
+            const isToday = isSameDay(date, today);
+            const eventDot = hasEvent(day);
+            return /* @__PURE__ */ jsxs19(
+              "button",
+              {
+                type: "button",
+                role: "gridcell",
+                "aria-selected": isSelected || isRangeEndpoint,
+                "aria-current": isToday ? "date" : void 0,
+                disabled,
+                tabIndex: -1,
+                onClick: () => handleDayClick(day),
+                className: cn(
+                  "relative inline-flex flex-col items-center justify-center rounded-md transition-colors",
+                  config.cell,
+                  disabled && "pointer-events-none opacity-50",
+                  isFocused && "ring-2 ring-ring",
+                  isSelected || isRangeEndpoint ? "bg-primary font-semibold text-primary-foreground" : isInRange ? "bg-primary/10 font-medium text-foreground" : isToday ? "bg-muted font-semibold text-foreground" : "text-foreground hover:bg-muted"
+                ),
+                children: [
+                  day,
+                  eventDot && /* @__PURE__ */ jsx26(
+                    "span",
+                    {
+                      className: cn(
+                        "bg-intent-info absolute bottom-0.5 rounded-full",
+                        config.dot
+                      )
+                    }
+                  )
+                ]
+              },
+              day
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+Calendar.displayName = "Calendar";
+var DatePicker = React15.forwardRef(
+  ({
+    className,
+    variant = "single",
+    value,
+    onChange,
+    rangeStart,
+    rangeEnd,
+    onRangeChange,
+    placeholder,
+    minDate: minDateProp,
+    maxDate: maxDateProp,
+    events,
+    open: controlledOpen,
+    onOpenChange,
+    calendarSize = "md",
+    disabled,
+    ...props
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = React15.useState(false);
+    const isOpen = controlledOpen ?? internalOpen;
+    const setOpen = onOpenChange ?? setInternalOpen;
+    const defaultPlaceholder = variant === "range" ? "Pick a date range" : "Pick a date";
+    const handleSingleSelect = (date) => {
+      onChange?.(date);
+      setOpen(false);
+    };
+    const handleRangeChange = (start, end) => {
+      onRangeChange?.(start, end);
+      if (start && end) setOpen(false);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        e.preventDefault();
+        setOpen(false);
+      }
+    };
+    let displayText = null;
+    if (variant === "single" && value) {
+      displayText = formatDateForInput(value);
+    } else if (variant === "range" && rangeStart) {
+      displayText = rangeEnd ? `${formatDateForInput(rangeStart)} \u2013 ${formatDateForInput(rangeEnd)}` : formatDateForInput(rangeStart);
+    }
+    return /* @__PURE__ */ jsxs19(
+      "div",
+      {
+        ref,
+        className: cn("relative inline-block", className),
+        onKeyDown: handleKeyDown,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs19(
+            "button",
+            {
+              type: "button",
+              disabled,
+              onClick: () => setOpen(!isOpen),
+              className: cn(
+                "inline-flex h-10 min-w-[200px] items-center gap-2 rounded-md border border-border bg-card px-3 text-sm transition-colors",
+                "hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring",
+                disabled && "pointer-events-none opacity-50",
+                displayText ? "text-foreground" : "text-muted-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ jsx26("span", { className: "text-muted-foreground", "aria-hidden": "true", children: "\u{1F4C5}" }),
+                /* @__PURE__ */ jsx26("span", { className: "flex-1 text-left", children: displayText ?? placeholder ?? defaultPlaceholder }),
+                /* @__PURE__ */ jsx26("span", { className: "text-muted-foreground", "aria-hidden": "true", children: "\u25BE" })
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsxs19(Fragment5, { children: [
+            /* @__PURE__ */ jsx26(
+              "div",
+              {
+                className: "z-popover fixed inset-0",
+                onClick: () => setOpen(false)
+              }
+            ),
+            /* @__PURE__ */ jsx26("div", { className: "z-popover absolute left-0 top-full mt-1", children: /* @__PURE__ */ jsx26(
+              Calendar,
+              {
+                selectionMode: variant,
+                value: variant === "single" ? value : void 0,
+                onChange: variant === "single" ? handleSingleSelect : void 0,
+                rangeStart: variant === "range" ? rangeStart : void 0,
+                rangeEnd: variant === "range" ? rangeEnd : void 0,
+                onRangeChange: variant === "range" ? handleRangeChange : void 0,
+                minDate: minDateProp,
+                maxDate: maxDateProp,
+                events,
+                size: calendarSize
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+// src/navbar.tsx
+import * as React16 from "react";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+var Navbar = React16.forwardRef(
+  ({
+    className,
+    variant = "simple",
+    transparent,
+    logo,
+    actions,
+    search,
+    secondaryNav,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs20(
+    "header",
+    {
+      ref,
+      className: cn(
+        "border-b border-border",
+        transparent ? "bg-transparent" : "bg-card",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs20("div", { className: "mx-auto flex h-14 max-w-content-xl items-center gap-4 px-4 sm:px-6", children: [
+          logo && /* @__PURE__ */ jsx27("div", { className: "flex-shrink-0", children: logo }),
+          /* @__PURE__ */ jsx27(
+            "nav",
+            {
+              className: cn(
+                "flex items-center gap-4",
+                variant === "centered" && "flex-1 justify-center"
+              ),
+              children
+            }
+          ),
+          variant === "withSearch" && search && /* @__PURE__ */ jsx27("div", { className: "flex-1 px-4", children: search }),
+          variant !== "centered" && variant !== "withSearch" && /* @__PURE__ */ jsx27("div", { className: "flex-1" }),
+          actions && /* @__PURE__ */ jsx27("div", { className: "flex items-center gap-2", children: actions })
+        ] }),
+        variant === "twoLevel" && secondaryNav && /* @__PURE__ */ jsx27("div", { className: "border-t border-border", children: /* @__PURE__ */ jsx27("div", { className: "mx-auto flex max-w-content-xl items-center gap-4 px-4 py-2 sm:px-6", children: secondaryNav }) })
+      ]
+    }
+  )
+);
+Navbar.displayName = "Navbar";
+var NavbarLink = React16.forwardRef(
+  ({ className, active, ...props }, ref) => /* @__PURE__ */ jsx27(
+    "a",
+    {
+      ref,
+      className: cn(
+        "text-sm font-medium transition-colors",
+        active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  )
+);
+NavbarLink.displayName = "NavbarLink";
+
+// src/card-variants.tsx
+import * as React17 from "react";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+var HorizontalCard = React17.forwardRef(
+  ({ className, media, hoverable, children, ...props }, ref) => /* @__PURE__ */ jsxs21(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex overflow-hidden rounded-lg border border-border bg-card shadow-sm",
+        hoverable && "cursor-pointer transition-shadow hover:shadow-md",
+        className
+      ),
+      ...props,
+      children: [
+        media && /* @__PURE__ */ jsx28("div", { className: "flex-shrink-0", children: media }),
+        /* @__PURE__ */ jsx28("div", { className: "flex-1 p-4", children })
+      ]
+    }
+  )
+);
+HorizontalCard.displayName = "HorizontalCard";
+var ImageCard = React17.forwardRef(
+  ({ className, imageSrc, imageAlt, hoverable, children, ...props }, ref) => /* @__PURE__ */ jsxs21(
+    "div",
+    {
+      ref,
+      className: cn(
+        "overflow-hidden rounded-lg border border-border bg-card shadow-sm",
+        hoverable && "cursor-pointer transition-shadow hover:shadow-md",
+        className
+      ),
+      ...props,
+      children: [
+        imageSrc && /* @__PURE__ */ jsx28("div", { className: "aspect-video w-full bg-muted", children: /* @__PURE__ */ jsx28(
+          "img",
+          {
+            src: imageSrc,
+            alt: imageAlt || "",
+            className: "h-full w-full object-cover"
+          }
+        ) }),
+        /* @__PURE__ */ jsx28("div", { className: "p-4", children })
+      ]
+    }
+  )
+);
+ImageCard.displayName = "ImageCard";
+var StatCardExtended = React17.forwardRef(({ className, label, value, trend, icon, ...props }, ref) => /* @__PURE__ */ jsxs21(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-lg border border-border bg-card p-6 shadow-sm",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx28("span", { className: "text-sm text-muted-foreground", children: label }),
+        icon && /* @__PURE__ */ jsx28("div", { className: "text-muted-foreground", children: icon })
+      ] }),
+      /* @__PURE__ */ jsx28("p", { className: "mt-2 text-3xl font-bold text-foreground", children: value }),
+      trend && /* @__PURE__ */ jsxs21(
+        "p",
+        {
+          className: cn(
+            "mt-1 text-sm font-medium",
+            trend.direction === "up" && "text-intent-success",
+            trend.direction === "down" && "text-intent-error",
+            trend.direction === "neutral" && "text-muted-foreground"
+          ),
+          children: [
+            trend.direction === "up" ? "\u2191" : trend.direction === "down" ? "\u2193" : "\u2192",
+            " ",
+            trend.text
+          ]
+        }
+      )
+    ]
+  }
+));
+StatCardExtended.displayName = "StatCardExtended";
+var ActionCard = React17.forwardRef(
+  ({ className, title, description, actions, children, ...props }, ref) => /* @__PURE__ */ jsxs21(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg border border-border bg-card shadow-sm",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs21("div", { className: "p-6", children: [
+          /* @__PURE__ */ jsx28("h3", { className: "font-semibold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx28("p", { className: "mt-1 text-sm text-muted-foreground", children: description }),
+          children
+        ] }),
+        actions && /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-2 border-t border-border px-6 py-4", children: actions })
+      ]
+    }
+  )
+);
+ActionCard.displayName = "ActionCard";
+
+// src/modal-dialog.tsx
+import * as React18 from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment6, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+var SIZE_CLASSES2 = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  fullscreen: "max-w-full mx-4 my-4 h-[calc(100vh-2rem)]"
+};
+var ModalDialog = React18.forwardRef(
+  ({ className, open, onClose, size = "md", children, ...props }, ref) => {
+    React18.useEffect(() => {
+      if (!open) return;
+      const handler = (e) => {
+        if (e.key === "Escape") onClose?.();
+      };
+      document.addEventListener("keydown", handler);
+      return () => document.removeEventListener("keydown", handler);
+    }, [open, onClose]);
+    if (!open) return null;
+    return createPortal(
+      /* @__PURE__ */ jsxs22(Fragment6, { children: [
+        /* @__PURE__ */ jsx29(
+          "div",
+          {
+            className: "z-overlay fixed inset-0 bg-foreground/60 transition-opacity",
+            onClick: onClose,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx29("div", { className: "z-modal fixed inset-0 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx29(
+          "div",
+          {
+            ref,
+            role: "dialog",
+            "aria-modal": "true",
+            className: cn(
+              "relative w-full rounded-lg border border-border bg-card shadow-lg",
+              "animate-in fade-in-0 zoom-in-95",
+              SIZE_CLASSES2[size],
+              className
+            ),
+            ...props,
+            children
+          }
+        ) })
+      ] }),
+      document.body
+    );
+  }
+);
+ModalDialog.displayName = "ModalDialog";
+var ModalHeader = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+  "div",
+  {
+    ref,
+    className: cn("border-b border-border px-6 py-4", className),
+    ...props
+  }
+));
+ModalHeader.displayName = "ModalHeader";
+var ModalBody = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29("div", { ref, className: cn("px-6 py-4", className), ...props }));
+ModalBody.displayName = "ModalBody";
+var ModalFooter = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex items-center justify-end gap-2 border-t border-border px-6 py-4",
+      className
+    ),
+    ...props
+  }
+));
+ModalFooter.displayName = "ModalFooter";
+
+// src/drawer.tsx
+import * as React19 from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+var SIZE_CLASSES3 = {
+  left: { sm: "w-64", md: "w-80", lg: "w-96" },
+  right: { sm: "w-64", md: "w-80", lg: "w-96" },
+  bottom: { sm: "h-1/3", md: "h-1/2", lg: "h-2/3" }
+};
+var POSITION_CLASSES = {
+  left: "inset-y-0 left-0",
+  right: "inset-y-0 right-0",
+  bottom: "inset-x-0 bottom-0"
+};
+var Drawer = React19.forwardRef(
+  ({
+    className,
+    open,
+    onClose,
+    side = "right",
+    size = "md",
+    children,
+    ...props
+  }, ref) => {
+    React19.useEffect(() => {
+      if (!open) return;
+      const handler = (e) => {
+        if (e.key === "Escape") onClose?.();
+      };
+      document.addEventListener("keydown", handler);
+      return () => document.removeEventListener("keydown", handler);
+    }, [open, onClose]);
+    if (!open) return null;
+    return createPortal2(
+      /* @__PURE__ */ jsxs23(Fragment7, { children: [
+        /* @__PURE__ */ jsx30(
+          "div",
+          {
+            className: "z-overlay fixed inset-0 bg-foreground/60 transition-opacity",
+            onClick: onClose,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx30(
+          "div",
+          {
+            ref,
+            role: "dialog",
+            "aria-modal": "true",
+            className: cn(
+              "z-modal duration-drawer fixed border-border bg-card shadow-lg transition-transform",
+              POSITION_CLASSES[side],
+              SIZE_CLASSES3[side][size],
+              side === "left" && "border-r",
+              side === "right" && "border-l",
+              side === "bottom" && "w-full border-t",
+              className
+            ),
+            ...props,
+            children
+          }
+        )
+      ] }),
+      document.body
+    );
+  }
+);
+Drawer.displayName = "Drawer";
+var DrawerHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+  "div",
+  {
+    ref,
+    className: cn("border-b border-border px-6 py-4", className),
+    ...props
+  }
+));
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerBody = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+  "div",
+  {
+    ref,
+    className: cn("flex-1 overflow-y-auto px-6 py-4", className),
+    ...props
+  }
+));
+DrawerBody.displayName = "DrawerBody";
+var DrawerFooter = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex items-center justify-end gap-2 border-t border-border px-6 py-4",
+      className
+    ),
+    ...props
+  }
+));
+DrawerFooter.displayName = "DrawerFooter";
+
+// src/form-layout.tsx
+import * as React20 from "react";
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+var FormLayout = React20.forwardRef(
+  ({ className, layout = "stacked", ...props }, ref) => /* @__PURE__ */ jsx31(
+    "form",
+    {
+      ref,
+      className: cn(
+        layout === "stacked" && "space-y-6",
+        layout === "inline" && "flex flex-wrap items-end gap-4",
+        layout === "two-column" && "grid grid-cols-1 gap-6 lg:grid-cols-2",
+        className
+      ),
+      ...props
+    }
+  )
+);
+FormLayout.displayName = "FormLayout";
+var FormLayoutSection = React20.forwardRef(({ className, title, description, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
+  "div",
+  {
+    ref,
+    className: cn("border-b border-border pb-6", className),
+    ...props,
+    children: [
+      (title || description) && /* @__PURE__ */ jsxs24("div", { className: "mb-4", children: [
+        title && /* @__PURE__ */ jsx31("h3", { className: "text-base font-semibold text-foreground", children: title }),
+        description && /* @__PURE__ */ jsx31("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+      ] }),
+      /* @__PURE__ */ jsx31("div", { className: "space-y-4", children })
+    ]
+  }
+));
+FormLayoutSection.displayName = "FormLayoutSection";
+
+// src/input-group.tsx
+import * as React21 from "react";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+var InputGroup = React21.forwardRef(
+  ({
+    className,
+    addon = "prefix",
+    addonContent,
+    suffixContent,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      ref,
+      className: cn("flex rounded-md shadow-sm", className),
+      ...props,
+      children: [
+        (addon === "prefix" || addon === "both") && addonContent && /* @__PURE__ */ jsx32("span", { className: "inline-flex items-center rounded-l-md border border-r-0 border-input bg-muted px-3 text-sm text-muted-foreground", children: addonContent }),
+        /* @__PURE__ */ jsx32(
+          "div",
+          {
+            className: cn(
+              "flex-1 [&>input]:w-full [&>input]:border [&>input]:border-input [&>input]:px-3 [&>input]:py-2 [&>input]:text-sm [&>input]:outline-none [&>input]:focus:ring-2 [&>input]:focus:ring-ring",
+              addon === "prefix" || addon === "both" ? "[&>input]:rounded-l-none [&>input]:rounded-r-md" : addon === "suffix" ? "[&>input]:rounded-l-md [&>input]:rounded-r-none" : "[&>input]:rounded-md"
+            ),
+            children
+          }
+        ),
+        (addon === "suffix" || addon === "both") && (suffixContent || addonContent) && /* @__PURE__ */ jsx32("span", { className: "inline-flex items-center rounded-r-md border border-l-0 border-input bg-muted px-3 text-sm text-muted-foreground", children: suffixContent || addonContent })
+      ]
+    }
+  )
+);
+InputGroup.displayName = "InputGroup";
+
+// src/radio-group.tsx
+import * as React22 from "react";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+var RadioGroup = React22.forwardRef(
+  ({
+    className,
+    options,
+    value,
+    onChange,
+    variant = "simple",
+    name,
+    label,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs26("fieldset", { ref, className: cn("space-y-2", className), ...props, children: [
+    label && /* @__PURE__ */ jsx33("legend", { className: "mb-2 text-sm font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsx33(
+      "div",
+      {
+        className: cn(
+          variant === "card" && "grid gap-3 sm:grid-cols-2",
+          variant === "stacked" && "space-y-2",
+          variant === "simple" && "space-y-2"
+        ),
+        children: options.map((option) => {
+          const isSelected = value === option.value;
+          if (variant === "card") {
+            return /* @__PURE__ */ jsxs26(
+              "label",
+              {
+                className: cn(
+                  "flex cursor-pointer items-start gap-3 rounded-lg border p-4 transition-colors",
+                  isSelected ? "border-primary bg-primary/5" : "border-border bg-card hover:bg-muted/50"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx33(
+                    "input",
+                    {
+                      type: "radio",
+                      name,
+                      value: option.value,
+                      checked: isSelected,
+                      onChange: () => onChange?.(option.value),
+                      className: "mt-0.5 h-4 w-4 accent-primary"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs26("div", { children: [
+                    /* @__PURE__ */ jsx33("span", { className: "text-sm font-medium text-foreground", children: option.label }),
+                    option.description && /* @__PURE__ */ jsx33("p", { className: "mt-0.5 text-xs text-muted-foreground", children: option.description })
+                  ] })
+                ]
+              },
+              option.value
+            );
+          }
+          return /* @__PURE__ */ jsxs26(
+            "label",
+            {
+              className: cn(
+                "flex cursor-pointer items-center gap-2",
+                variant === "stacked" && "rounded-lg border border-border p-3",
+                variant === "stacked" && isSelected && "border-primary bg-primary/5"
+              ),
+              children: [
+                /* @__PURE__ */ jsx33(
+                  "input",
+                  {
+                    type: "radio",
+                    name,
+                    value: option.value,
+                    checked: isSelected,
+                    onChange: () => onChange?.(option.value),
+                    className: "h-4 w-4 accent-primary"
+                  }
+                ),
+                /* @__PURE__ */ jsx33("span", { className: "text-sm text-foreground", children: option.label }),
+                option.description && variant === "stacked" && /* @__PURE__ */ jsx33("span", { className: "ml-auto text-xs text-muted-foreground", children: option.description })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    )
+  ] })
+);
+RadioGroup.displayName = "RadioGroup";
+
+// src/combobox.tsx
+import * as React23 from "react";
+import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+var Combobox = React23.forwardRef(
+  ({
+    className,
+    options,
+    value,
+    onChange,
+    placeholder = "Select...",
+    multi = false,
+    filterable = true,
+    ...props
+  }, ref) => {
+    const [open, setOpen] = React23.useState(false);
+    const [search, setSearch] = React23.useState("");
+    const selected = multi ? Array.isArray(value) ? value : [] : typeof value === "string" ? value : "";
+    const filtered = filterable ? options.filter(
+      (o) => o.label.toLowerCase().includes(search.toLowerCase())
+    ) : options;
+    const handleSelect = (optValue) => {
+      if (!onChange) return;
+      if (multi) {
+        const arr = Array.isArray(selected) ? selected : [];
+        onChange(
+          arr.includes(optValue) ? arr.filter((v) => v !== optValue) : [...arr, optValue]
+        );
+      } else {
+        onChange(optValue);
+        setOpen(false);
+        setSearch("");
+      }
+    };
+    const displayValue = multi ? null : options.find((o) => o.value === selected)?.label;
+    return /* @__PURE__ */ jsxs27("div", { ref, className: cn("relative", className), ...props, children: [
+      /* @__PURE__ */ jsxs27(
+        "div",
+        {
+          className: "flex min-h-9 cursor-pointer items-center gap-1 rounded-md border border-input bg-background px-3 py-1.5",
+          onClick: () => setOpen(!open),
+          children: [
+            multi && Array.isArray(selected) && selected.length > 0 ? /* @__PURE__ */ jsx34("div", { className: "flex flex-wrap gap-1", children: selected.map((v) => /* @__PURE__ */ jsxs27(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 rounded bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
+                children: [
+                  options.find((o) => o.value === v)?.label,
+                  /* @__PURE__ */ jsx34(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleSelect(v);
+                      },
+                      className: "text-primary/60 hover:text-primary",
+                      children: "\u2715"
+                    }
+                  )
+                ]
+              },
+              v
+            )) }) : /* @__PURE__ */ jsx34(
+              "span",
+              {
+                className: cn(
+                  "text-sm",
+                  displayValue ? "text-foreground" : "text-muted-foreground"
+                ),
+                children: displayValue || placeholder
+              }
+            ),
+            /* @__PURE__ */ jsx34("span", { className: "ml-auto text-muted-foreground", children: "\u25BE" })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsxs27("div", { className: "z-dropdown absolute mt-1 w-full rounded-md border border-border bg-card shadow-lg", children: [
+        filterable && /* @__PURE__ */ jsx34("div", { className: "border-b border-border p-2", children: /* @__PURE__ */ jsx34(
+          "input",
+          {
+            type: "text",
+            className: "w-full rounded border-0 bg-transparent px-2 py-1 text-sm text-foreground outline-none placeholder:text-muted-foreground",
+            placeholder: "Search...",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            autoFocus: true
+          }
+        ) }),
+        /* @__PURE__ */ jsx34("div", { className: "max-h-60 overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx34("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "No results" }) : filtered.map((option) => {
+          const isSelected = multi ? Array.isArray(selected) && selected.includes(option.value) : selected === option.value;
+          return /* @__PURE__ */ jsxs27(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "flex w-full items-center rounded-sm px-3 py-2 text-left text-sm transition-colors",
+                isSelected ? "bg-primary/10 font-medium text-primary" : "text-foreground hover:bg-muted"
+              ),
+              onClick: () => handleSelect(option.value),
+              children: [
+                multi && /* @__PURE__ */ jsx34("span", { className: "mr-2", children: isSelected ? "\u2611" : "\u2610" }),
+                option.label,
+                !multi && isSelected && /* @__PURE__ */ jsx34("span", { className: "ml-auto text-primary", children: "\u2713" })
+              ]
+            },
+            option.value
+          );
+        }) })
+      ] })
+    ] });
+  }
+);
+Combobox.displayName = "Combobox";
+
+// src/notification-banner.tsx
+import * as React24 from "react";
+import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+var INTENT_STYLES = {
+  success: {
+    subtle: "bg-intent-success/10 text-intent-success-foreground border-intent-success/20",
+    solid: "bg-intent-success text-primary-foreground",
+    accent: "border-l-4 border-l-intent-success bg-intent-success/5 text-intent-success-foreground"
+  },
+  warning: {
+    subtle: "bg-intent-warning/10 text-intent-warning-foreground border-intent-warning/20",
+    solid: "bg-intent-warning text-primary-foreground",
+    accent: "border-l-4 border-l-intent-warning bg-intent-warning/5 text-intent-warning-foreground"
+  },
+  error: {
+    subtle: "bg-intent-error/10 text-intent-error-foreground border-intent-error/20",
+    solid: "bg-intent-error text-primary-foreground",
+    accent: "border-l-4 border-l-intent-error bg-intent-error/5 text-intent-error-foreground"
+  },
+  info: {
+    subtle: "bg-intent-info/10 text-intent-info-foreground border-intent-info/20",
+    solid: "bg-intent-info text-primary-foreground",
+    accent: "border-l-4 border-l-intent-info bg-intent-info/5 text-intent-info-foreground"
+  }
+};
+var ICON_MAP = {
+  success: "\u2713",
+  warning: "\u26A0",
+  error: "\u2715",
+  info: "\u2139"
+};
+var NotificationBanner = React24.forwardRef(
+  ({
+    className,
+    intent = "info",
+    variant = "subtle",
+    title,
+    dismissible,
+    onDismiss,
+    action,
+    children,
+    ...props
+  }, ref) => {
+    const [dismissed, setDismissed] = React24.useState(false);
+    if (dismissed) return null;
+    const handleDismiss = () => {
+      setDismissed(true);
+      onDismiss?.();
+    };
+    return /* @__PURE__ */ jsxs28(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: cn(
+          "flex items-start gap-3 rounded-lg border p-4",
+          INTENT_STYLES[intent][variant],
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx35("span", { className: "flex-shrink-0 text-lg", "aria-hidden": "true", children: ICON_MAP[intent] }),
+          /* @__PURE__ */ jsxs28("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ jsx35("p", { className: "font-semibold", children: title }),
+            children && /* @__PURE__ */ jsx35("div", { className: cn(title && "mt-1", "text-sm"), children })
+          ] }),
+          action && /* @__PURE__ */ jsx35("div", { className: "flex-shrink-0", children: action }),
+          dismissible && /* @__PURE__ */ jsx35(
+            "button",
+            {
+              type: "button",
+              onClick: handleDismiss,
+              className: "flex-shrink-0 text-current opacity-60 transition-opacity hover:opacity-100",
+              "aria-label": "Dismiss",
+              children: "\u2715"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+NotificationBanner.displayName = "NotificationBanner";
+
+// src/notification-panel.tsx
+import * as React25 from "react";
+import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+var NotificationPanel = React25.forwardRef(({ className, unreadCount = 0, onMarkAllRead, children, ...props }, ref) => /* @__PURE__ */ jsxs29(
+  "div",
+  {
+    ref,
+    className: cn(
+      "w-80 rounded-lg border border-border bg-card shadow-lg",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+        /* @__PURE__ */ jsxs29("h3", { className: "text-sm font-semibold text-foreground", children: [
+          "Notifications",
+          unreadCount > 0 && /* @__PURE__ */ jsx36("span", { className: "ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs text-primary-foreground", children: unreadCount })
+        ] }),
+        onMarkAllRead && unreadCount > 0 && /* @__PURE__ */ jsx36(
+          "button",
+          {
+            type: "button",
+            onClick: onMarkAllRead,
+            className: "text-xs text-primary hover:underline",
+            children: "Mark all read"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx36("div", { className: "max-h-80 divide-y divide-border overflow-y-auto", children })
+    ]
+  }
+));
+NotificationPanel.displayName = "NotificationPanel";
+var NotificationPanelItem = React25.forwardRef(({ className, title, description, time, unread, icon, ...props }, ref) => /* @__PURE__ */ jsxs29(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex gap-3 px-4 py-3 transition-colors hover:bg-muted/50",
+      unread && "bg-primary/5",
+      className
+    ),
+    ...props,
+    children: [
+      icon && /* @__PURE__ */ jsx36("div", { className: "flex-shrink-0 pt-0.5", children: icon }),
+      /* @__PURE__ */ jsxs29("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx36(
+          "p",
+          {
+            className: cn(
+              "text-sm",
+              unread ? "font-semibold text-foreground" : "text-foreground"
+            ),
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsx36("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }),
+        time && /* @__PURE__ */ jsx36("p", { className: "mt-1 text-xs text-muted-foreground", children: time })
+      ] }),
+      unread && /* @__PURE__ */ jsx36("div", { className: "flex-shrink-0 pt-1.5", children: /* @__PURE__ */ jsx36("div", { className: "h-2 w-2 rounded-full bg-primary" }) })
+    ]
+  }
+));
+NotificationPanelItem.displayName = "NotificationPanelItem";
+
+// src/skeleton-patterns.tsx
+import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
+function SkeletonBar2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx37(
+    "div",
+    {
+      className: cn("animate-pulse rounded-md bg-muted", className),
+      ...props
+    }
+  );
+}
+function SkeletonTable({
+  className,
+  rows = 5,
+  columns = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs30(
+    "div",
+    {
+      className: cn(
+        "w-full overflow-hidden rounded-lg border border-border",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx37("div", { className: "flex gap-4 border-b border-border bg-muted/50 px-4 py-3", children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 flex-1" }, `h-${i}`)) }),
+        Array.from({ length: rows }).map((_, row) => /* @__PURE__ */ jsx37(
+          "div",
+          {
+            className: cn(
+              "flex gap-4 px-4 py-3",
+              row < rows - 1 && "border-b border-border"
+            ),
+            children: Array.from({ length: columns }).map((_2, col) => /* @__PURE__ */ jsx37(
+              SkeletonBar2,
+              {
+                className: cn("h-4 flex-1", col === 0 && "max-w-[140px]")
+              },
+              `c-${row}-${col}`
+            ))
+          },
+          `r-${row}`
+        ))
+      ]
+    }
+  );
+}
+SkeletonTable.displayName = "SkeletonTable";
+function SkeletonCardGrid({
+  className,
+  cards = 6,
+  columns = 3,
+  ...props
+}) {
+  const colClass = columns === 2 ? "grid-cols-1 sm:grid-cols-2" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
+  return /* @__PURE__ */ jsx37("div", { className: cn("grid gap-4", colClass, className), ...props, children: Array.from({ length: cards }).map((_, i) => /* @__PURE__ */ jsxs30(
+    "div",
+    {
+      className: "space-y-3 rounded-lg border border-border p-4",
+      children: [
+        /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-3/4" }),
+        /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-3 w-full" }),
+        /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-3 w-5/6" }),
+        /* @__PURE__ */ jsxs30("div", { className: "flex gap-2 pt-2", children: [
+          /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-6 w-6 rounded-full" }),
+          /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-20" })
+        ] })
+      ]
+    },
+    `card-${i}`
+  )) });
+}
+SkeletonCardGrid.displayName = "SkeletonCardGrid";
+function SkeletonDetail({ className, ...props }) {
+  return /* @__PURE__ */ jsxs30("div", { className: cn("space-y-6", className), ...props, children: [
+    /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-8 w-1/3" }),
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-2/3" })
+    ] }),
+    /* @__PURE__ */ jsx37("div", { className: "space-y-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-24" }),
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-40" })
+    ] }, `dl-${i}`)) }),
+    /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-3/4" })
+    ] })
+  ] });
+}
+SkeletonDetail.displayName = "SkeletonDetail";
+
+// src/toggle.tsx
+import * as React26 from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var SIZE_CLASSES4 = {
+  sm: "h-8 px-2 text-xs",
+  md: "h-9 px-3 text-sm",
+  lg: "h-10 px-4 text-base"
+};
+var Toggle = React26.forwardRef(
+  ({ className, pressed, variant = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx38(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-pressed": pressed,
+      "data-state": pressed ? "on" : "off",
+      className: cn(
+        "inline-flex items-center justify-center rounded-md font-medium transition-colors",
+        SIZE_CLASSES4[size],
+        variant === "outline" && "border border-input",
+        pressed ? "bg-muted text-foreground" : "bg-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Toggle.displayName = "Toggle";
+var ToggleGroup = React26.forwardRef(
+  ({
+    className,
+    type = "single",
+    value,
+    onValueChange,
+    variant = "default",
+    size = "md",
+    children,
+    ...props
+  }, ref) => {
+    const isPressed = (itemValue) => {
+      if (!value) return false;
+      if (type === "single") return value === itemValue;
+      return Array.isArray(value) && value.includes(itemValue);
+    };
+    const handleToggle = (itemValue) => {
+      if (!onValueChange) return;
+      if (type === "single") {
+        onValueChange(value === itemValue ? "" : itemValue);
+      } else {
+        const arr = Array.isArray(value) ? value : [];
+        onValueChange(
+          arr.includes(itemValue) ? arr.filter((v) => v !== itemValue) : [...arr, itemValue]
+        );
+      }
+    };
+    return /* @__PURE__ */ jsx38(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn("inline-flex items-center gap-1", className),
+        ...props,
+        children: React26.Children.map(children, (child) => {
+          if (!React26.isValidElement(child)) return child;
+          const childProps = child.props;
+          const itemValue = childProps.value ?? "";
+          return React26.cloneElement(child, {
+            pressed: isPressed(itemValue),
+            variant,
+            size,
+            onClick: (e) => {
+              childProps.onClick?.(e);
+              handleToggle(itemValue);
+            }
+          });
+        })
+      }
+    );
+  }
+);
+ToggleGroup.displayName = "ToggleGroup";
+
+// src/avatar-group.tsx
+import * as React27 from "react";
+import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+var SIZE_MAP = {
+  xs: { avatar: "h-6 w-6", ring: "ring-1", text: "text-[10px]" },
+  sm: { avatar: "h-8 w-8", ring: "ring-2", text: "text-xs" },
+  md: { avatar: "h-10 w-10", ring: "ring-2", text: "text-sm" },
+  lg: { avatar: "h-12 w-12", ring: "ring-2", text: "text-base" }
+};
+var OVERLAP_MAP = {
+  xs: "-ml-2",
+  sm: "-ml-2",
+  md: "-ml-3",
+  lg: "-ml-3"
+};
+var AvatarGroup = React27.forwardRef(
+  ({ className, max = 5, size = "md", children, ...props }, ref) => {
+    const items = React27.Children.toArray(children);
+    const visible = items.slice(0, max);
+    const overflow = items.length - max;
+    const sizeConfig3 = SIZE_MAP[size];
+    return /* @__PURE__ */ jsxs31("div", { ref, className: cn("flex items-center", className), ...props, children: [
+      visible.map((child, i) => /* @__PURE__ */ jsx39(
+        "div",
+        {
+          className: cn(
+            "relative inline-block rounded-full ring ring-background",
+            sizeConfig3.ring,
+            i > 0 && OVERLAP_MAP[size]
+          ),
+          children: child
+        },
+        i
+      )),
+      overflow > 0 && /* @__PURE__ */ jsx39(
+        "div",
+        {
+          className: cn(
+            "relative inline-flex items-center justify-center rounded-full bg-muted ring ring-background",
+            sizeConfig3.avatar,
+            sizeConfig3.ring,
+            OVERLAP_MAP[size]
+          ),
+          children: /* @__PURE__ */ jsxs31(
+            "span",
+            {
+              className: cn(
+                "font-medium text-muted-foreground",
+                sizeConfig3.text
+              ),
+              children: [
+                "+",
+                overflow
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+var AvatarGroupItem = React27.forwardRef(({ className, fallback, size = "md", alt, src, ...props }, ref) => {
+  const sizeConfig3 = SIZE_MAP[size];
+  if (!src && fallback) {
+    return /* @__PURE__ */ jsx39(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center rounded-full bg-primary text-primary-foreground",
+          sizeConfig3.avatar,
+          sizeConfig3.text,
+          "font-medium",
+          className
+        ),
+        children: fallback
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx39(
+    "img",
+    {
+      ref,
+      src,
+      alt,
+      className: cn("rounded-full object-cover", sizeConfig3.avatar, className),
+      ...props
+    }
+  );
+});
+AvatarGroupItem.displayName = "AvatarGroupItem";
+
+// src/tab-bar.tsx
+import * as React28 from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var TabBar = React28.forwardRef(
+  ({ className, variant = "underline", children, ...props }, ref) => /* @__PURE__ */ jsx40(
+    "div",
+    {
+      ref,
+      role: "tablist",
+      className: cn(
+        "flex",
+        variant === "underline" && "gap-4 border-b border-border",
+        variant === "pills" && "gap-1 rounded-lg bg-muted p-1",
+        variant === "enclosed" && "border-b border-border",
+        className
+      ),
+      "data-variant": variant,
+      ...props,
+      children: React28.Children.map(children, (child) => {
+        if (!React28.isValidElement(child)) return child;
+        return React28.cloneElement(
+          child,
+          { _variant: variant }
+        );
+      })
+    }
+  )
+);
+TabBar.displayName = "TabBar";
+var TabBarItem = React28.forwardRef(
+  ({ className, active, disabled, _variant: variant = "underline", ...props }, ref) => /* @__PURE__ */ jsx40(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "tab",
+      "aria-selected": active,
+      "aria-disabled": disabled || void 0,
+      disabled,
+      className: cn(
+        "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors",
+        disabled && "pointer-events-none opacity-50",
+        // Underline
+        variant === "underline" && [
+          "border-b-2 px-1 pb-3",
+          active ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+        ],
+        // Pills
+        variant === "pills" && [
+          "rounded-md px-3 py-1.5",
+          active ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+        ],
+        // Enclosed
+        variant === "enclosed" && [
+          "-mb-px rounded-t-md border border-b-0 px-4 py-2",
+          active ? "border-border bg-background text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+        ],
+        className
+      ),
+      ...props
+    }
+  )
+);
+TabBarItem.displayName = "TabBarItem";
+
+// src/sticky-action-bar.tsx
+import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+function StickyActionBar({
+  context,
+  actions,
+  topClassName = "top-16",
+  className,
+  testId = "sticky-action-bar"
+}) {
+  return /* @__PURE__ */ jsx41(
+    "div",
+    {
+      "data-testid": testId,
+      className: cn(
+        // z-30: above page content, below the app header (z-40) and below any
+        // Drawer/modal overlay (z-overlay 60 / z-modal 70).
+        "sticky z-30 -mx-4 mb-6 border-b border-border bg-background/85 px-4 py-3 backdrop-blur-sm sm:-mx-6 sm:px-6",
+        topClassName,
+        className
+      ),
+      children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+        context != null ? /* @__PURE__ */ jsx41("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5", children: context }) : /* @__PURE__ */ jsx41("span", {}),
+        /* @__PURE__ */ jsx41("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+      ] })
+    }
+  );
+}
+
+// src/button-group.tsx
+import * as React29 from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var SIZE_CLASSES5 = {
+  sm: "h-8 px-3 text-xs",
+  md: "h-9 px-4 text-sm",
+  lg: "h-10 px-5 text-base"
+};
+var ButtonGroup = React29.forwardRef(
+  ({ className, variant = "default", size = "md", children, ...props }, ref) => /* @__PURE__ */ jsx42(
+    "div",
+    {
+      ref,
+      role: "group",
+      className: cn(
+        "inline-flex",
+        variant === "segmented" && "rounded-md border border-input bg-muted p-0.5",
+        className
+      ),
+      "data-variant": variant,
+      "data-size": size,
+      ...props,
+      children: React29.Children.map(children, (child) => {
+        if (!React29.isValidElement(child)) return child;
+        return React29.cloneElement(
+          child,
+          { _variant: variant, _size: size }
+        );
+      })
+    }
+  )
+);
+ButtonGroup.displayName = "ButtonGroup";
+var ButtonGroupItem = React29.forwardRef(
+  ({
+    className,
+    active,
+    _variant: variant = "default",
+    _size: size = "md",
+    ...props
+  }, ref) => /* @__PURE__ */ jsx42(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn(
+        "inline-flex items-center justify-center font-medium transition-colors",
+        SIZE_CLASSES5[size],
+        // Default: connected bordered buttons
+        variant === "default" && [
+          "border border-input bg-background text-foreground hover:bg-muted",
+          "-ml-px first:ml-0 first:rounded-l-md last:rounded-r-md",
+          active && "bg-muted font-semibold"
+        ],
+        // Outlined: like default but no fill
+        variant === "outlined" && [
+          "border border-input bg-transparent text-foreground hover:bg-muted",
+          "-ml-px first:ml-0 first:rounded-l-md last:rounded-r-md",
+          active && "bg-muted font-semibold"
+        ],
+        // Segmented: pill-style inside a container
+        variant === "segmented" && [
+          "rounded-sm text-muted-foreground",
+          active && "bg-background font-semibold text-foreground shadow-sm"
+        ],
+        className
+      ),
+      "aria-pressed": active,
+      ...props
+    }
+  )
+);
+ButtonGroupItem.displayName = "ButtonGroupItem";
+
+// src/data-table.tsx
+import * as React30 from "react";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+var DataTable = React30.forwardRef(
+  ({
+    className,
+    density = "default",
+    striped = false,
+    bordered = false,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx43("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx43(
+    "table",
+    {
+      ref,
+      className: cn(
+        "w-full caption-bottom text-sm",
+        bordered && "border border-border",
+        className
+      ),
+      "data-density": density,
+      "data-striped": striped,
+      ...props
+    }
+  ) })
+);
+DataTable.displayName = "DataTable";
+var TableHeader = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+  "thead",
+  {
+    ref,
+    className: cn("border-b border-border bg-muted/50", className),
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableRow = React30.forwardRef(
+  ({ className, selected, ...props }, ref) => /* @__PURE__ */ jsx43(
+    "tr",
+    {
+      ref,
+      className: cn(
+        "border-b border-border transition-colors",
+        "hover:bg-muted/50",
+        selected && "bg-primary/5",
+        // Striped rows via parent data attribute
+        '[table[data-striped="true"]_&:nth-child(even)]:bg-muted/30',
+        className
+      ),
+      "data-selected": selected,
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var DENSITY_CELL = {
+  compact: "px-3 py-1",
+  default: "px-4 py-2",
+  relaxed: "px-4 py-3"
+};
+var TableCell = React30.forwardRef(
+  ({ className, header, sortDirection, onSort, children, ...props }, ref) => {
+    const Tag = header ? "th" : "td";
+    const sortIndicator = sortDirection === "asc" ? " \u2191" : sortDirection === "desc" ? " \u2193" : "";
+    return /* @__PURE__ */ jsxs33(
+      Tag,
+      {
+        ref,
+        className: cn(
+          DENSITY_CELL.default,
+          "text-left align-middle",
+          header ? "font-medium text-muted-foreground" : "text-foreground",
+          onSort && "cursor-pointer select-none hover:text-foreground",
+          className
+        ),
+        onClick: onSort,
+        ...props,
+        children: [
+          children,
+          header && sortIndicator && /* @__PURE__ */ jsx43("span", { className: "ml-1 text-primary", children: sortIndicator })
+        ]
+      }
+    );
+  }
+);
+TableCell.displayName = "TableCell";
+var TableCaption = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+// src/stat-group.tsx
+import * as React31 from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var COL_CLASSES = {
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+var StatGroup = React31.forwardRef(
+  ({ className, columns = 3, variant = "card", children, ...props }, ref) => /* @__PURE__ */ jsx44(
+    "div",
+    {
+      ref,
+      className: cn(
+        "grid gap-4",
+        COL_CLASSES[columns],
+        variant === "inline" && "divide-y divide-border sm:divide-x sm:divide-y-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+StatGroup.displayName = "StatGroup";
+
+// src/description-list.tsx
+import * as React32 from "react";
+import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
+var DescriptionList = React32.forwardRef(({ className, layout = "stacked", ...props }, ref) => /* @__PURE__ */ jsx45(
+  "dl",
+  {
+    ref,
+    className: cn(
+      layout === "grid" && "grid grid-cols-1 gap-4 sm:grid-cols-2",
+      layout === "side-by-side" && "divide-y divide-border",
+      layout === "stacked" && "space-y-4",
+      className
+    ),
+    ...props
+  }
+));
+DescriptionList.displayName = "DescriptionList";
+var DescriptionItem = React32.forwardRef(
+  ({ className, label, value, layout = "stacked", ...props }, ref) => /* @__PURE__ */ jsxs34(
+    "div",
+    {
+      ref,
+      className: cn(
+        layout === "side-by-side" && "flex justify-between py-3 sm:gap-4",
+        layout === "stacked" && "",
+        layout === "grid" && "",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx45(
+          "dt",
+          {
+            className: cn(
+              "text-sm font-medium text-muted-foreground",
+              layout === "side-by-side" && "flex-shrink-0"
+            ),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx45(
+          "dd",
+          {
+            className: cn(
+              "text-sm text-foreground",
+              layout === "stacked" && "mt-1",
+              layout === "side-by-side" && "text-right"
+            ),
+            children: value
+          }
+        )
+      ]
+    }
+  )
+);
+DescriptionItem.displayName = "DescriptionItem";
+
+// src/activity-feed.tsx
+import * as React33 from "react";
+import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
+var ActivityFeed = React33.forwardRef(
+  ({ className, variant = "simple", ...props }, ref) => /* @__PURE__ */ jsx46(
+    "div",
+    {
+      ref,
+      className: cn("relative", className),
+      "data-variant": variant,
+      ...props
+    }
+  )
+);
+ActivityFeed.displayName = "ActivityFeed";
+var ActivityFeedItem = React33.forwardRef(
+  ({ className, avatar, eventDescription, timestamp, isLast, ...props }, ref) => /* @__PURE__ */ jsxs35(
+    "div",
+    {
+      ref,
+      className: cn("relative flex gap-3 pb-6", className),
+      ...props,
+      children: [
+        !isLast && /* @__PURE__ */ jsx46("div", { className: "absolute left-5 top-10 -ml-px h-full w-0.5 bg-muted" }),
+        /* @__PURE__ */ jsx46("div", { className: "relative flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted", children: avatar }),
+        /* @__PURE__ */ jsxs35("div", { className: "min-w-0 flex-1 pt-1", children: [
+          /* @__PURE__ */ jsx46("div", { className: "text-sm text-foreground", children: eventDescription }),
+          timestamp && /* @__PURE__ */ jsx46("p", { className: "mt-0.5 text-xs text-muted-foreground", children: timestamp })
+        ] })
+      ]
+    }
+  )
+);
+ActivityFeedItem.displayName = "ActivityFeedItem";
+
+// src/alert.tsx
+import * as React34 from "react";
+import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
+var SUBTLE_STYLES = {
+  success: "bg-intent-success/10 text-intent-success-foreground border-intent-success/20",
+  warning: "bg-intent-warning/10 text-intent-warning-foreground border-intent-warning/20",
+  error: "bg-intent-error/10 text-intent-error-foreground border-intent-error/20",
+  info: "bg-intent-info/10 text-intent-info-foreground border-intent-info/20"
+};
+var SOLID_STYLES = {
+  success: "bg-intent-success text-primary-foreground",
+  warning: "bg-intent-warning text-primary-foreground",
+  error: "bg-intent-error text-primary-foreground",
+  info: "bg-intent-info text-primary-foreground"
+};
+var OUTLINE_STYLES = {
+  success: "border-intent-success-border text-intent-success-foreground bg-background",
+  warning: "border-intent-warning-border text-intent-warning-foreground bg-background",
+  error: "border-intent-error-border text-intent-error-foreground bg-background",
+  info: "border-intent-info-border text-intent-info-foreground bg-background"
+};
+var ICON_MAP2 = {
+  success: "\u2713",
+  warning: "\u26A0",
+  error: "\u2715",
+  info: "\u2139"
+};
+var Alert = React34.forwardRef(
+  ({
+    className,
+    intent = "info",
+    variant = "subtle",
+    title,
+    dismissible,
+    onDismiss,
+    children,
+    ...props
+  }, ref) => {
+    const styles = variant === "solid" ? SOLID_STYLES[intent] : variant === "outline" ? OUTLINE_STYLES[intent] : SUBTLE_STYLES[intent];
+    return /* @__PURE__ */ jsxs36(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn("flex gap-3 rounded-lg border p-4", styles, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx47("span", { className: "flex-shrink-0 text-lg", "aria-hidden": "true", children: ICON_MAP2[intent] }),
+          /* @__PURE__ */ jsxs36("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ jsx47("p", { className: "font-semibold", children: title }),
+            children && /* @__PURE__ */ jsx47("div", { className: cn(title && "mt-1", "text-sm"), children })
+          ] }),
+          dismissible && /* @__PURE__ */ jsx47(
+            "button",
+            {
+              type: "button",
+              onClick: onDismiss,
+              className: "opacity-hover flex-shrink-0 hover:opacity-100",
+              "aria-label": "Dismiss",
+              children: "\u2715"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+// src/empty-state.tsx
+import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  size = "default",
+  testId = "empty-state",
+  className
+}) {
+  const compact = size === "compact";
+  return /* @__PURE__ */ jsxs37(
+    "div",
+    {
+      "data-testid": testId,
+      className: cn(
+        "flex flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card/50 text-center",
+        compact ? "px-4 py-8" : "px-6 py-16",
+        className
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsx48(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "flex items-center justify-center rounded-full bg-primary/10 text-primary",
+              compact ? "mb-3 size-12" : "mb-5 size-16"
+            ),
+            children: /* @__PURE__ */ jsx48(Icon, { className: compact ? "size-6" : "size-8" })
+          }
+        ),
+        /* @__PURE__ */ jsx48(
+          "h2",
+          {
+            className: cn(
+              "font-semibold text-foreground",
+              compact ? "text-base" : "text-lg"
+            ),
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsx48(
+          "p",
+          {
+            className: cn(
+              "mt-1.5 max-w-md text-muted-foreground",
+              compact ? "text-xs" : "text-sm"
+            ),
+            children: description
+          }
+        ),
+        action && /* @__PURE__ */ jsx48("div", { className: compact ? "mt-4" : "mt-6", children: action })
+      ]
+    }
+  );
+}
+
+// src/action-panel.tsx
+import * as React35 from "react";
+import { Fragment as Fragment8, jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
+var BORDER_INTENT = {
+  default: "border-l-primary",
+  warning: "border-l-intent-warning",
+  destructive: "border-l-intent-error"
+};
+var ActionPanel = React35.forwardRef(
+  ({
+    className,
+    title,
+    description,
+    action,
+    variant = "simple",
+    intent = "default",
+    ...props
+  }, ref) => /* @__PURE__ */ jsx49(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg border border-border bg-card p-6",
+        variant === "withBorder" && `border-l-4 ${BORDER_INTENT[intent]}`,
+        variant === "split" ? "flex items-center justify-between gap-4" : "",
+        className
+      ),
+      ...props,
+      children: variant === "split" ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
+        /* @__PURE__ */ jsxs38("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx49("h3", { className: "font-semibold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx49("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+        ] }),
+        action && /* @__PURE__ */ jsx49("div", { className: "flex-shrink-0", children: action })
+      ] }) : /* @__PURE__ */ jsxs38(Fragment8, { children: [
+        /* @__PURE__ */ jsx49("h3", { className: "font-semibold text-foreground", children: title }),
+        description && /* @__PURE__ */ jsx49("p", { className: "mt-1 text-sm text-muted-foreground", children: description }),
+        action && /* @__PURE__ */ jsx49("div", { className: "mt-4", children: action })
+      ] })
+    }
+  )
+);
+ActionPanel.displayName = "ActionPanel";
+
+// src/divider.tsx
+import * as React36 from "react";
+import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
+var VARIANT_CLASSES = {
+  solid: "border-solid",
+  dashed: "border-dashed",
+  dotted: "border-dotted"
+};
+var Divider = React36.forwardRef(
+  ({
+    className,
+    label,
+    labelPosition = "center",
+    variant = "solid",
+    orientation = "horizontal",
+    ...props
+  }, ref) => {
+    if (orientation === "vertical") {
+      return /* @__PURE__ */ jsx50(
+        "div",
+        {
+          ref,
+          className: cn(
+            "border-l border-border",
+            VARIANT_CLASSES[variant],
+            "self-stretch",
+            className
+          ),
+          role: "separator",
+          "aria-orientation": "vertical",
+          ...props
+        }
+      );
+    }
+    if (!label) {
+      return /* @__PURE__ */ jsx50(
+        "div",
+        {
+          ref,
+          className: cn(
+            "border-t border-border",
+            VARIANT_CLASSES[variant],
+            className
+          ),
+          role: "separator",
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs39(
+      "div",
+      {
+        ref,
+        className: cn("flex items-center", className),
+        role: "separator",
+        ...props,
+        children: [
+          labelPosition !== "left" && /* @__PURE__ */ jsx50(
+            "div",
+            {
+              className: cn(
+                "flex-1 border-t border-border",
+                VARIANT_CLASSES[variant]
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx50(
+            "span",
+            {
+              className: cn(
+                "text-sm text-muted-foreground",
+                labelPosition === "left" ? "pr-3" : "px-3"
+              ),
+              children: label
+            }
+          ),
+          labelPosition !== "right" && /* @__PURE__ */ jsx50(
+            "div",
+            {
+              className: cn(
+                "flex-1 border-t border-border",
+                VARIANT_CLASSES[variant]
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+
+// src/container.tsx
+import * as React37 from "react";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var SIZE_CLASSES6 = {
+  sm: "max-w-content-sm",
+  md: "max-w-content-md",
+  lg: "max-w-content-lg",
+  xl: "max-w-content-xl",
+  full: "max-w-full"
+};
+var Container = React37.forwardRef(
+  ({ className, size = "xl", padded = true, ...props }, ref) => /* @__PURE__ */ jsx51(
+    "div",
+    {
+      ref,
+      className: cn(
+        "mx-auto w-full",
+        SIZE_CLASSES6[size],
+        padded && "px-4 sm:px-6 lg:px-8",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Container.displayName = "Container";
+
+// src/page-content.tsx
+import * as React38 from "react";
+import { jsx as jsx52 } from "react/jsx-runtime";
+var GAP_CLASSES2 = {
+  sm: "space-y-4",
+  md: "space-y-6",
+  lg: "space-y-8",
+  none: ""
+};
+var PageContent = React38.forwardRef(
+  ({ className, gap = "md", padded = true, children, ...props }, ref) => /* @__PURE__ */ jsx52(
+    "div",
+    {
+      ref,
+      className: cn(GAP_CLASSES2[gap], padded && "p-4 sm:p-6", className),
+      ...props,
+      children
+    }
+  )
+);
+PageContent.displayName = "PageContent";
+
+// src/media-object.tsx
+import * as React39 from "react";
+import { jsx as jsx53, jsxs as jsxs40 } from "react/jsx-runtime";
+var MEDIA_SIZE = {
+  sm: "h-8 w-8",
+  md: "h-10 w-10",
+  lg: "h-12 w-12"
+};
+var MediaObject = React39.forwardRef(
+  ({
+    className,
+    media,
+    title,
+    description,
+    action,
+    align = "top",
+    mediaSize = "md",
+    stacked = false,
+    ...props
+  }, ref) => {
+    if (stacked) {
+      return /* @__PURE__ */ jsxs40(
+        "div",
+        {
+          ref,
+          className: cn(
+            "flex flex-col items-center gap-3 text-center",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx53("div", { className: cn("flex-shrink-0", MEDIA_SIZE[mediaSize]), children: media }),
+            /* @__PURE__ */ jsxs40("div", { className: "min-w-0", children: [
+              title && /* @__PURE__ */ jsx53("p", { className: "font-medium text-foreground", children: title }),
+              description && /* @__PURE__ */ jsx53("p", { className: "text-sm text-muted-foreground", children: description })
+            ] }),
+            action && /* @__PURE__ */ jsx53("div", { children: action })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs40(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex gap-3",
+          align === "center" ? "items-center" : "items-start",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx53("div", { className: cn("flex-shrink-0", MEDIA_SIZE[mediaSize]), children: media }),
+          /* @__PURE__ */ jsxs40("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ jsx53("p", { className: "font-medium text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx53("p", { className: "text-sm text-muted-foreground", children: description })
+          ] }),
+          action && /* @__PURE__ */ jsx53("div", { className: "flex-shrink-0", children: action })
+        ]
+      }
+    );
+  }
+);
+MediaObject.displayName = "MediaObject";
+
+// src/hooks/use-debounce.ts
+import { useEffect as useEffect8, useState as useState9 } from "react";
+function useDebounce(value, ms) {
+  const [debounced, setDebounced] = useState9(value);
+  useEffect8(() => {
+    const handle = setTimeout(() => setDebounced(value), ms);
+    return () => clearTimeout(handle);
+  }, [value, ms]);
+  return debounced;
+}
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  ActionCard,
+  ActionPanel,
+  ActivityFeed,
+  ActivityFeedItem,
+  Alert,
+  AppShell,
+  AvatarGroup,
+  AvatarGroupItem,
+  Button,
+  ButtonGroup,
+  ButtonGroupItem,
+  Calendar,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CollapsibleSidebar,
+  Combobox,
+  CommandPalette,
+  ConfirmDialog,
+  Container,
+  DataTable,
+  DatePicker,
+  DescriptionItem,
+  DescriptionList,
+  DiceBearAvatar,
+  DistributionChip,
+  Divider,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  EmptyState,
+  FilterChip,
+  FormError,
+  FormField,
+  FormFieldGroup,
+  FormLayout,
+  FormLayoutSection,
+  FormSection,
+  FormSuccess,
+  GlobalErrorContent,
+  GridList,
+  GridListItem,
+  HorizontalCard,
+  HoverCard,
+  ImageCard,
+  Input,
+  InputGroup,
+  IntentIcon,
+  MarkdownRenderer,
+  MediaObject,
+  ModalBody,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Navbar,
+  NavbarLink,
+  NotificationBanner,
+  NotificationPanel,
+  NotificationPanelItem,
+  PageContent,
+  Pagination,
+  PaginationButton,
+  Popover,
+  RadioGroup,
+  SectionHeading,
+  SimpleAccordion,
+  SkeletonBar,
+  SkeletonCard,
+  SkeletonCardGrid,
+  SkeletonDetail,
+  SkeletonRow,
+  SkeletonTable,
+  StackedList,
+  StackedListItem,
+  StatCardExtended,
+  StatGroup,
+  Stepper,
+  StepperStep,
+  StickyActionBar,
+  Switch,
+  TabBar,
+  TabBarItem,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHeader,
+  TableRow,
+  Toggle,
+  ToggleGroup,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  avatarVariants,
+  buildDiceBearUrl,
+  buttonVariants,
+  cn,
+  getPageRange,
+  useDebounce,
+  useSidebar
+};