@blinkdotnew/ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,3763 @@
+import React14, { createContext, useState, useId, useContext, useEffect, useRef, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { ChevronDown, ChevronUp, Check, Circle, X, ChevronRight, ChevronLeft, EyeOff, Eye, Search, Upload, Calendar, Plus, ArrowUp, ArrowDown, ArrowUpDown, TrendingUp, TrendingDown, ArrowRight, Loader2, LayoutDashboard, FolderOpen, Users, Settings, BarChart2, CreditCard, HelpCircle, Bell, Pencil, User, LogOut, Send, Info, XCircle, AlertTriangle, CheckCircle2, FileText, Archive, Film, FileCode, Image, File, MoreHorizontal, Download, Trash2 } from 'lucide-react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { Controller, useFormContext, useForm } from 'react-hook-form';
+export { FormProvider as Form } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { useReactTable, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { Toaster as Toaster$1 } from 'sonner';
+export { toast } from 'sonner';
+import { useSensors, useSensor, PointerSensor, DndContext, DragOverlay } from '@dnd-kit/core';
+import { useSortable, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ResponsiveContainer, AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Legend, Area, BarChart as BarChart$1, Bar, LineChart as LineChart$1, Line } from 'recharts';
+
+// src/provider/blink-ui-provider.tsx
+var BlinkUIContext = createContext(null);
+function useBlinkUI() {
+  const ctx = useContext(BlinkUIContext);
+  if (!ctx)
+    throw new Error("useBlinkUI must be used within <BlinkUIProvider>");
+  return ctx;
+}
+function BlinkUIProvider({
+  children,
+  theme: initialTheme = "linear",
+  darkMode: initialDarkMode = "system"
+}) {
+  const [theme, setTheme] = useState(initialTheme);
+  const [darkMode, setDarkMode] = useState(initialDarkMode);
+  const [resolvedDark, setResolvedDark] = useState(false);
+  useEffect(() => {
+    const update = () => {
+      const isDark = darkMode === "dark" || darkMode === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+      setResolvedDark(isDark);
+    };
+    update();
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, [darkMode]);
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove("theme-linear", "theme-glass", "theme-midnight", "theme-minimal");
+    root.classList.remove("dark", "light");
+    root.classList.add(`theme-${theme}`);
+    root.classList.add(resolvedDark ? "dark" : "light");
+  }, [theme, resolvedDark]);
+  return /* @__PURE__ */ jsx(BlinkUIContext.Provider, { value: { theme, darkMode, resolvedDark, setTheme, setDarkMode }, children });
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:bg-[hsl(var(--primary)/0.9)]",
+        secondary: "bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))] hover:bg-[hsl(var(--secondary)/0.8)]",
+        outline: "border border-[hsl(var(--border))] bg-transparent hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]",
+        ghost: "hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]",
+        destructive: "bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] hover:bg-[hsl(var(--destructive)/0.9)]",
+        link: "text-[hsl(var(--primary))] underline-offset-4 hover:underline"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        default: "h-9 px-4 py-2",
+        lg: "h-11 px-6 text-base",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: { variant: "default", size: "default" }
+  }
+);
+var Button = React14.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size }), className), ref, ...props });
+  }
+);
+Button.displayName = "Button";
+var Input = React14.forwardRef(
+  ({ className, type, ...props }, ref) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      className: cn(
+        "flex h-9 w-full rounded-[var(--radius)] border border-[hsl(var(--input))] bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
+        "placeholder:text-[hsl(var(--muted-foreground))]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+Input.displayName = "Input";
+var Textarea = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: cn(
+        "flex min-h-[80px] w-full rounded-[var(--radius)] border border-[hsl(var(--input))] bg-transparent px-3 py-2 text-sm shadow-sm",
+        "placeholder:text-[hsl(var(--muted-foreground))]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "resize-none",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between rounded-[var(--radius)] border border-[hsl(var(--input))] bg-transparent px-3 py-2 text-sm shadow-sm",
+      "placeholder:text-[hsl(var(--muted-foreground))]",
+      "focus:outline-none focus:ring-2 focus:ring-[hsl(var(--ring))]",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "[&>span]:truncate",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50 shrink-0" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React14.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] shadow-md",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-xs font-semibold text-[hsl(var(--muted-foreground))]", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none",
+      "focus:bg-[hsl(var(--accent))] focus:text-[hsl(var(--accent-foreground))]",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-[hsl(var(--muted))]", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var Checkbox = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-[hsl(var(--primary))] shadow",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-[hsl(var(--primary))] data-[state=checked]:text-[hsl(var(--primary-foreground))]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) })
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+var RadioGroup = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ref, ...props }));
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+var RadioGroupItem = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  RadioGroupPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "aspect-square h-4 w-4 rounded-full border border-[hsl(var(--primary))] text-[hsl(var(--primary))] shadow",
+      "focus:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current" }) })
+  }
+));
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+var Switch = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2 focus-visible:ring-offset-[hsl(var(--background))]",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=unchecked]:bg-[hsl(var(--input))]",
+      "data-[state=checked]:bg-[hsl(var(--primary))]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitive.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform",
+          "data-[state=unchecked]:translate-x-0",
+          "data-[state=checked]:translate-x-4"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitive.Root.displayName;
+var Slider = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-[hsl(var(--secondary))]", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-[hsl(var(--primary))]" }) }),
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-[hsl(var(--primary)/0.5)] bg-[hsl(var(--background))] shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4",
+        "bg-[hsl(var(--background))] p-6 shadow-lg duration-200 rounded-[var(--radius)]",
+        "border border-[hsl(var(--border))]",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-[hsl(var(--background))] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--ring))] focus:ring-offset-2 disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-[hsl(var(--muted-foreground))]", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+var Sheet = DialogPrimitive.Root;
+var SheetTrigger = DialogPrimitive.Trigger;
+var SheetClose = DialogPrimitive.Close;
+var SheetPortal = DialogPrimitive.Portal;
+var SheetOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+      className
+    ),
+    ...props
+  }
+));
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var sheetVariants = cva(
+  "fixed z-50 gap-4 bg-[hsl(var(--background))] p-6 shadow-lg transition ease-in-out border-[hsl(var(--border))]",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: { side: "right" }
+  }
+);
+var SheetContent = React14.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+  /* @__PURE__ */ jsx(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs(DialogPrimitive.Content, { ref, className: cn(sheetVariants({ side }), className), ...props, children: [
+    /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--ring))]", children: [
+      /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+    ] }),
+    children
+  ] })
+] }));
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
+var SheetTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+var SheetDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-[hsl(var(--muted-foreground))]", className), ...props }));
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = React14.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-4 text-[hsl(var(--popover-foreground))] shadow-md outline-none",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]: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=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React14.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-[var(--radius)] bg-[hsl(var(--primary))] px-3 py-1.5 text-xs text-[hsl(var(--primary-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=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var contentStyle = cn(
+  "z-50 min-w-[8rem] overflow-hidden rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1 text-[hsl(var(--popover-foreground))] shadow-md",
+  "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+);
+var itemStyle = cn(
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
+  "focus:bg-[hsl(var(--accent))] focus:text-[hsl(var(--accent-foreground))]",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+);
+var DropdownMenuContent = React14.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, { ref, sideOffset, className: cn(contentStyle, className), ...props }) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React14.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { ref, className: cn(itemStyle, inset && "pl-8", className), ...props }));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React14.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, { ref, className: cn(itemStyle, "pl-8", className), checked, ...props, children: [
+  /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+  children
+] }));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, { ref, className: cn(itemStyle, "pl-8", className), ...props, children: [
+  /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+  children
+] }));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React14.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, { ref, className: cn("px-2 py-1.5 text-xs font-semibold text-[hsl(var(--muted-foreground))]", inset && "pl-8", className), ...props }));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-[hsl(var(--muted))]", className), ...props }));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuSubTrigger = React14.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, { ref, className: cn(itemStyle, inset && "pl-8", "data-[state=open]:bg-[hsl(var(--accent))]", className), ...props, children: [
+  children,
+  /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+] }));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, { ref, className: cn(contentStyle, className), ...props }));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+var ContextMenu = ContextMenuPrimitive.Root;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuPortal = ContextMenuPrimitive.Portal;
+var ContextMenuSub = ContextMenuPrimitive.Sub;
+var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+var contentStyle2 = "z-50 min-w-[8rem] overflow-hidden rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-80";
+var itemStyle2 = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[hsl(var(--accent))] focus:text-[hsl(var(--accent-foreground))] data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var ContextMenuContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, { ref, className: cn(contentStyle2, className), ...props }) }));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+var ContextMenuItem = React14.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, { ref, className: cn(itemStyle2, inset && "pl-8", className), ...props }));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+var ContextMenuCheckboxItem = React14.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, { ref, className: cn(itemStyle2, "pl-8", className), checked, ...props, children: [
+  /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+  children
+] }));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+var ContextMenuRadioItem = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, { ref, className: cn(itemStyle2, "pl-8", className), ...props, children: [
+  /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+  children
+] }));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+var ContextMenuLabel = React14.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, { ref, className: cn("px-2 py-1.5 text-xs font-semibold text-[hsl(var(--muted-foreground))]", inset && "pl-8", className), ...props }));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+var ContextMenuSeparator = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-[hsl(var(--muted))]", className), ...props }));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+var ContextMenuSubTrigger = React14.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, { ref, className: cn(itemStyle2, inset && "pl-8", className), ...props, children: [
+  children,
+  /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+] }));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+var ContextMenuSubContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, { ref, className: cn(contentStyle2, className), ...props }));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+var ContextMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
+var Card = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] shadow-sm", className),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("font-semibold leading-none tracking-tight", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm text-[hsl(var(--muted-foreground))]", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-[hsl(var(--ring))] focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:bg-[hsl(var(--primary)/0.8)]",
+        secondary: "border-transparent bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))] hover:bg-[hsl(var(--secondary)/0.8)]",
+        destructive: "border-transparent bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] hover:bg-[hsl(var(--destructive)/0.8)]",
+        outline: "text-[hsl(var(--foreground))]"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+var Avatar = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, { ref, className: cn("aspect-square h-full w-full object-cover", className), ...props }));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn("flex h-full w-full items-center justify-center rounded-full bg-[hsl(var(--muted))] text-sm font-medium text-[hsl(var(--muted-foreground))]", className),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+var Separator4 = React14.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+  SeparatorPrimitive.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-[hsl(var(--border))]",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    ),
+    ...props
+  }
+));
+Separator4.displayName = SeparatorPrimitive.Root.displayName;
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("animate-pulse rounded-[var(--radius)] bg-[hsl(var(--muted))]", className),
+      ...props
+    }
+  );
+}
+var Progress = React14.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
+  ProgressPrimitive.Root,
+  {
+    ref,
+    className: cn("relative h-2 w-full overflow-hidden rounded-full bg-[hsl(var(--secondary))]", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      ProgressPrimitive.Indicator,
+      {
+        className: "h-full w-full flex-1 bg-[hsl(var(--primary))] transition-all",
+        style: { transform: `translateX(-${100 - (value ?? 0)}%)` }
+      }
+    )
+  }
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+var Tabs = TabsPrimitive.Root;
+var TabsList = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-[hsl(var(--muted))] p-1 text-[hsl(var(--muted-foreground))]",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-[hsl(var(--background))] transition-all",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "data-[state=active]:bg-[hsl(var(--background))] data-[state=active]:text-[hsl(var(--foreground))] data-[state=active]:shadow",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-[hsl(var(--background))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+var dirMap = {
+  row: "flex-row",
+  col: "flex-col",
+  "row-reverse": "flex-row-reverse",
+  "col-reverse": "flex-col-reverse"
+};
+var alignMap = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
+};
+var justifyMap = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
+};
+var Stack = React14.forwardRef(
+  ({ className, gap, direction = "col", align, justify, wrap, style, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex",
+        dirMap[direction],
+        align && alignMap[align],
+        justify && justifyMap[justify],
+        wrap && "flex-wrap",
+        className
+      ),
+      style: { ...gap !== void 0 ? { gap: `${gap * 4}px` } : {}, ...style },
+      ...props
+    }
+  )
+);
+Stack.displayName = "Stack";
+var HStack = React14.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(Stack, { ref, direction: "row", ...props })
+);
+HStack.displayName = "HStack";
+var VStack = React14.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(Stack, { ref, direction: "col", ...props })
+);
+VStack.displayName = "VStack";
+var sizeMap = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  full: "max-w-full"
+};
+var Container = React14.forwardRef(
+  ({ className, size = "lg", noPadding = false, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "mx-auto w-full",
+        sizeMap[size],
+        !noPadding && "px-4 sm:px-6 lg:px-8",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Container.displayName = "Container";
+var Page = React14.forwardRef(
+  ({ className, maxWidth, style, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col min-h-full w-full", className),
+      style: { maxWidth, ...style },
+      ...props
+    }
+  )
+);
+Page.displayName = "Page";
+var PageHeader = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex items-start justify-between gap-4 px-6 py-4 border-b border-[hsl(var(--border))]", className),
+      ...props
+    }
+  )
+);
+PageHeader.displayName = "PageHeader";
+var PageTitle = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h1",
+    {
+      ref,
+      className: cn("text-2xl font-semibold tracking-tight text-[hsl(var(--foreground))]", className),
+      ...props
+    }
+  )
+);
+PageTitle.displayName = "PageTitle";
+var PageDescription = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-[hsl(var(--muted-foreground))] mt-1", className), ...props })
+);
+PageDescription.displayName = "PageDescription";
+var PageActions = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2 shrink-0", className), ...props })
+);
+PageActions.displayName = "PageActions";
+var PageBody = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 p-6", className), ...props })
+);
+PageBody.displayName = "PageBody";
+var SidebarCtx = React14.createContext({ collapsed: false });
+var useSidebarCtx = () => React14.useContext(SidebarCtx);
+var makeSlot = (name, cls) => {
+  const C = React14.forwardRef(
+    ({ className, ...p }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn(cls, className), ...p })
+  );
+  C.displayName = name;
+  return C;
+};
+var Sidebar = React14.forwardRef(
+  ({ className, collapsed = false, onCollapse, width = "240px", style, children, ...props }, ref) => /* @__PURE__ */ jsx(SidebarCtx.Provider, { value: { collapsed }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col h-full bg-[hsl(var(--card))] border-r border-[hsl(var(--border))] transition-all duration-200 overflow-hidden", className),
+      style: { width: collapsed ? "48px" : width, ...style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden", children }),
+        onCollapse && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onCollapse,
+            className: "flex items-center justify-center h-10 w-full border-t border-[hsl(var(--border))] hover:bg-[hsl(var(--accent))] text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors shrink-0",
+            children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  ) })
+);
+Sidebar.displayName = "Sidebar";
+var SidebarHeader = makeSlot("SidebarHeader", "px-3 py-4 border-b border-[hsl(var(--border))] shrink-0");
+var SidebarContent = makeSlot("SidebarContent", "flex-1 overflow-y-auto py-2");
+var SidebarFooter = makeSlot("SidebarFooter", "px-3 py-3 border-t border-[hsl(var(--border))] shrink-0");
+var SidebarGroup = makeSlot("SidebarGroup", "mb-2");
+var SidebarSeparator = makeSlot("SidebarSeparator", "h-px bg-[hsl(var(--border))] mx-3 my-2");
+var SidebarGroupLabel = React14.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { collapsed } = useSidebarCtx();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("px-3 py-1 text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wider", collapsed && "sr-only", className),
+        ...props
+      }
+    );
+  }
+);
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+var SidebarItem = React14.forwardRef(
+  ({ className, icon, label, active, href, badge, onClick, ...props }, ref) => {
+    const { collapsed } = useSidebarCtx();
+    const cls = cn(
+      "flex items-center gap-2.5 px-3 py-2 rounded-md cursor-pointer transition-colors mx-1 text-sm",
+      active ? "bg-[hsl(var(--accent))] text-[hsl(var(--foreground))] font-medium" : "text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))]",
+      collapsed && "justify-center px-0 mx-2",
+      className
+    );
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 flex items-center justify-center w-4 h-4", children: icon }),
+      !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 truncate", children: label }),
+      !collapsed && badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-[hsl(var(--primary))] bg-opacity-10 text-[hsl(var(--primary))] shrink-0 font-medium", children: badge })
+    ] });
+    if (href)
+      return /* @__PURE__ */ jsx("a", { href, className: cls, onClick, children: inner });
+    return /* @__PURE__ */ jsx("div", { ref, role: "button", tabIndex: 0, className: cls, onClick, ...props, children: inner });
+  }
+);
+SidebarItem.displayName = "SidebarItem";
+var Navbar = React14.forwardRef(
+  ({ className, sticky = false, border = true, ...props }, ref) => /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref,
+      className: cn(
+        "z-40 w-full h-14 flex items-center bg-[hsl(var(--background))]",
+        sticky && "sticky top-0",
+        border && "border-b border-[hsl(var(--border))]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Navbar.displayName = "Navbar";
+var NavbarBrand = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2 px-4 shrink-0", className), ...props })
+);
+NavbarBrand.displayName = "NavbarBrand";
+var alignMap2 = {
+  start: "justify-start",
+  center: "justify-center flex-1",
+  end: "justify-end ml-auto"
+};
+var NavbarContent = React14.forwardRef(
+  ({ className, align = "start", ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center gap-1 px-2", alignMap2[align], className),
+      ...props
+    }
+  )
+);
+NavbarContent.displayName = "NavbarContent";
+var NavbarItem = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props })
+);
+NavbarItem.displayName = "NavbarItem";
+var AppShellCtx = React14.createContext({
+  collapsed: false,
+  setCollapsed: () => {
+  }
+});
+var useAppShell = () => React14.useContext(AppShellCtx);
+var AppShell = React14.forwardRef(
+  ({ className, defaultCollapsed = false, children, ...props }, ref) => {
+    const [collapsed, setCollapsed] = React14.useState(defaultCollapsed);
+    return /* @__PURE__ */ jsx(AppShellCtx.Provider, { value: { collapsed, setCollapsed }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex h-screen w-full overflow-hidden bg-[hsl(var(--background))]", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+AppShell.displayName = "AppShell";
+var AppShellSidebar = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("shrink-0 h-full", className), ...props })
+);
+AppShellSidebar.displayName = "AppShellSidebar";
+var AppShellMain = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 min-w-0 flex flex-col overflow-auto", className), ...props })
+);
+AppShellMain.displayName = "AppShellMain";
+var SplitPage = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex h-full w-full overflow-hidden", className), ...props })
+);
+SplitPage.displayName = "SplitPage";
+var SplitPageList = React14.forwardRef(
+  ({ className, width = "320px", style, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("shrink-0 h-full overflow-auto border-r border-[hsl(var(--border))]", className),
+      style: { width, ...style },
+      ...props
+    }
+  )
+);
+SplitPageList.displayName = "SplitPageList";
+var SplitPageDetail = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 min-w-0 h-full overflow-auto", className), ...props })
+);
+SplitPageDetail.displayName = "SplitPageDetail";
+var ResizeBox = React14.forwardRef(
+  ({ className, resize = "both", minWidth = 100, minHeight = 100, style, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("overflow-auto relative", className),
+      style: { resize, minWidth, minHeight, ...style },
+      ...props
+    }
+  )
+);
+ResizeBox.displayName = "ResizeBox";
+var HandleIcon = () => /* @__PURE__ */ jsxs("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsx("path", { d: "M8 2L2 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 5L5 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 8L8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var ResizeHandle = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "absolute bottom-0 right-0 w-5 h-5 flex items-center justify-center",
+        "cursor-se-resize text-[hsl(var(--muted-foreground))] opacity-50 hover:opacity-100 transition-opacity",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(HandleIcon, {})
+    }
+  )
+);
+ResizeHandle.displayName = "ResizeHandle";
+function Field({ label, description, error, required, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    label && /* @__PURE__ */ jsx(FieldLabel, { required, children: label }),
+    children,
+    description && !error && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+    error && /* @__PURE__ */ jsx(FieldError, { children: error })
+  ] });
+}
+var FieldLabel = React14.forwardRef(
+  ({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ref,
+      className: cn("text-sm font-medium leading-none text-[hsl(var(--foreground))]", className),
+      ...props,
+      children: [
+        children,
+        required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", children: "*" })
+      ]
+    }
+  )
+);
+FieldLabel.displayName = "FieldLabel";
+var FieldDescription = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn("text-xs text-[hsl(var(--muted-foreground))]", className),
+      ...props
+    }
+  )
+);
+FieldDescription.displayName = "FieldDescription";
+var FieldError = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn("text-xs text-[hsl(var(--destructive))]", className),
+      ...props
+    }
+  )
+);
+FieldError.displayName = "FieldError";
+function getStrength(value) {
+  const has = (re) => re.test(value);
+  const score = [value.length >= 8, has(/[A-Z]/), has(/[0-9]/), has(/[^A-Za-z0-9]/)].filter(Boolean).length;
+  if (score <= 1)
+    return { level: "weak", width: "w-1/3", color: "bg-[hsl(var(--destructive))]" };
+  if (score <= 3)
+    return { level: "medium", width: "w-2/3", color: "bg-yellow-500" };
+  return { level: "strong", width: "w-full", color: "bg-green-500" };
+}
+var PasswordInput = React14.forwardRef(
+  ({ className, strength, ...props }, ref) => {
+    const [show, setShow] = useState(false);
+    const value = String(props.value ?? "");
+    const str = getStrength(value);
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref,
+            type: show ? "text" : "password",
+            className: cn("pr-9", className),
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShow((s) => !s),
+            className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors",
+            tabIndex: -1,
+            children: show ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      strength && value.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-1 w-full rounded-full bg-[hsl(var(--muted))]", children: /* @__PURE__ */ jsx("div", { className: cn("h-full rounded-full transition-all", str.width, str.color) }) }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] capitalize", children: str.level })
+      ] })
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+var SearchInput = React14.forwardRef(
+  ({ className, shortcut, onClear, onChange, value: valueProp, defaultValue, ...props }, ref) => {
+    const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+    const isControlled = valueProp !== void 0;
+    const value = isControlled ? String(valueProp) : String(internalValue);
+    function handleChange(e) {
+      if (!isControlled)
+        setInternalValue(e.target.value);
+      onChange?.(e.target.value);
+    }
+    function handleClear() {
+      if (!isControlled)
+        setInternalValue("");
+      onChange?.("");
+      onClear?.();
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+      /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 h-4 w-4 text-[hsl(var(--muted-foreground))]" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          value,
+          onChange: handleChange,
+          className: cn(
+            "flex h-9 w-full rounded-[var(--radius)] border border-[hsl(var(--input))] bg-transparent pl-8 pr-8 text-sm shadow-sm transition-colors",
+            "placeholder:text-[hsl(var(--muted-foreground))]",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute right-2.5 flex items-center", children: value ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          className: "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      ) : shortcut ? /* @__PURE__ */ jsx("kbd", { className: "pointer-events-none rounded border border-[hsl(var(--border))] px-1.5 py-0.5 text-[10px] text-[hsl(var(--muted-foreground))]", children: shortcut }) : null })
+    ] });
+  }
+);
+SearchInput.displayName = "SearchInput";
+function formatBytes(bytes) {
+  if (bytes < 1024)
+    return `${bytes} B`;
+  if (bytes < 1024 * 1024)
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+function filterBySize(files, maxSize) {
+  return maxSize ? files.filter((f) => f.size <= maxSize) : files;
+}
+function FileUpload({ accept, multiple, maxSize, onFiles, className, disabled }) {
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  function handleFiles(raw) {
+    if (!raw)
+      return;
+    const files = filterBySize(Array.from(raw), maxSize);
+    onFiles?.(files);
+  }
+  function handleDrop(e) {
+    e.preventDefault();
+    setDragging(false);
+    if (!disabled)
+      handleFiles(e.dataTransfer.files);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onClick: () => !disabled && inputRef.current?.click(),
+      onKeyDown: (e) => e.key === "Enter" && !disabled && inputRef.current?.click(),
+      onDragOver: (e) => {
+        e.preventDefault();
+        if (!disabled)
+          setDragging(true);
+      },
+      onDragLeave: () => setDragging(false),
+      onDrop: handleDrop,
+      className: cn(
+        "flex flex-col items-center justify-center gap-2 rounded-[var(--radius)] border-2 border-dashed border-[hsl(var(--border))] p-8 text-center transition-colors cursor-pointer",
+        dragging && "border-[hsl(var(--primary))] bg-[hsl(var(--accent))]",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Upload, { className: "h-8 w-8 text-[hsl(var(--muted-foreground))]" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Drag files here or click to upload" }),
+          maxSize && /* @__PURE__ */ jsxs("p", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: [
+            "Max size: ",
+            formatBytes(maxSize)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            className: "hidden",
+            onChange: (e) => handleFiles(e.target.files),
+            disabled
+          }
+        )
+      ]
+    }
+  );
+}
+function FileUploadPreview({ files, onRemove, className }) {
+  if (!files.length)
+    return null;
+  return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-col gap-1", className), children: files.map((file, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between rounded-[var(--radius)] border border-[hsl(var(--border))] px-3 py-2 text-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-[hsl(var(--foreground))]", children: file.name }),
+    /* @__PURE__ */ jsxs("div", { className: "ml-2 flex shrink-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: formatBytes(file.size) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onRemove(i),
+          className: "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--destructive))] transition-colors",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] }, i)) });
+}
+var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfWeek(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+function CalendarGrid({ year, month, selected, onSelect }) {
+  const today = /* @__PURE__ */ new Date();
+  const daysInMonth = getDaysInMonth(year, month);
+  const firstDay = getFirstDayOfWeek(year, month);
+  const cells = Array.from({ length: firstDay + daysInMonth }, (_, i) => i < firstDay ? null : i - firstDay + 1);
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-7 gap-0.5", children: [
+    DAYS.map((d) => /* @__PURE__ */ jsx("div", { className: "py-1 text-center text-xs font-medium text-[hsl(var(--muted-foreground))]", children: d }, d)),
+    cells.map((day, i) => {
+      if (!day)
+        return /* @__PURE__ */ jsx("div", {}, i);
+      const date = new Date(year, month, day);
+      const isToday = isSameDay(date, today);
+      const isSelected = selected && isSameDay(date, selected);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect(date),
+          className: cn(
+            "flex h-8 w-8 items-center justify-center rounded-[var(--radius)] text-sm transition-colors",
+            isSelected && "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]",
+            !isSelected && isToday && "border border-[hsl(var(--primary))] text-[hsl(var(--primary))]",
+            !isSelected && !isToday && "hover:bg-[hsl(var(--accent))]"
+          ),
+          children: day
+        },
+        i
+      );
+    })
+  ] });
+}
+function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, className }) {
+  const [open, setOpen] = useState(false);
+  const now = value ?? /* @__PURE__ */ new Date();
+  const [view, setView] = useState({ year: now.getFullYear(), month: now.getMonth() });
+  function navigate(delta) {
+    setView((v) => {
+      const date = new Date(v.year, v.month + delta);
+      return { year: date.getFullYear(), month: date.getMonth() };
+    });
+  }
+  function handleSelect(date) {
+    onChange?.(date);
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        disabled,
+        className: cn("w-full justify-start font-normal", !value && "text-[hsl(var(--muted-foreground))]", className),
+        children: [
+          /* @__PURE__ */ jsx(Calendar, { className: "mr-2 h-4 w-4 shrink-0" }),
+          value ? value.toLocaleDateString() : placeholder
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-auto p-3", align: "start", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => navigate(-1), className: "rounded p-1 hover:bg-[hsl(var(--accent))]", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium", children: [
+          MONTHS[view.month],
+          " ",
+          view.year
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => navigate(1), className: "rounded p-1 hover:bg-[hsl(var(--accent))]", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) })
+      ] }),
+      /* @__PURE__ */ jsx(CalendarGrid, { year: view.year, month: view.month, selected: value, onSelect: handleSelect })
+    ] })
+  ] });
+}
+function FormField(props) {
+  return /* @__PURE__ */ jsx(Controller, { ...props });
+}
+function FormItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+}
+var FormLabel = React14.forwardRef(
+  ({ className, error, ...props }, ref) => /* @__PURE__ */ jsx(
+    "label",
+    {
+      ref,
+      className: cn(
+        "text-sm font-medium leading-none",
+        error ? "text-[hsl(var(--destructive))]" : "text-[hsl(var(--foreground))]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+FormLabel.displayName = "FormLabel";
+var FormControl = React14.forwardRef(
+  ({ ...props }, ref) => {
+    const id = useId();
+    return /* @__PURE__ */ jsx("div", { ref, id, ...props });
+  }
+);
+FormControl.displayName = "FormControl";
+function FormDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-[hsl(var(--muted-foreground))]", className), ...props });
+}
+function FormMessage({ className, children, name }) {
+  const { formState } = useFormContext();
+  const error = name ? formState.errors[name] : void 0;
+  const message = error?.message ? String(error.message) : children;
+  if (!message)
+    return null;
+  return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-[hsl(var(--destructive))]", className), children: message });
+}
+var StepFormContext = createContext(null);
+function useStepForm() {
+  const ctx = useContext(StepFormContext);
+  if (!ctx)
+    throw new Error("useStepForm must be used within StepForm");
+  return ctx;
+}
+function StepForm({ steps, onSubmit, children, className }) {
+  const [currentStep, setCurrentStep] = useState(0);
+  const totalSteps = steps.length;
+  const ctx = {
+    currentStep,
+    totalSteps,
+    steps,
+    next: () => setCurrentStep((s) => Math.min(s + 1, totalSteps - 1)),
+    prev: () => setCurrentStep((s) => Math.max(s - 1, 0)),
+    isFirst: currentStep === 0,
+    isLast: currentStep === totalSteps - 1
+  };
+  const childArray = React14.Children.toArray(children);
+  const currentChild = childArray[currentStep];
+  return /* @__PURE__ */ jsx(StepFormContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6", className), children: [
+    /* @__PURE__ */ jsx(StepIndicator, { steps, currentStep }),
+    /* @__PURE__ */ jsx("div", { children: currentChild }),
+    /* @__PURE__ */ jsx(StepFormNavigation, { onSubmit })
+  ] }) });
+}
+function StepIndicator({ steps, currentStep }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: steps.map((label, i) => /* @__PURE__ */ jsxs(React14.Fragment, { children: [
+    i > 0 && /* @__PURE__ */ jsx("div", { className: cn("h-px flex-1 bg-[hsl(var(--border))]", i <= currentStep && "bg-[hsl(var(--primary))]") }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx("div", { className: cn(
+        "flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium border transition-colors",
+        i < currentStep && "bg-[hsl(var(--primary))] border-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]",
+        i === currentStep && "border-[hsl(var(--primary))] text-[hsl(var(--primary))]",
+        i > currentStep && "border-[hsl(var(--border))] text-[hsl(var(--muted-foreground))]"
+      ), children: i + 1 }),
+      /* @__PURE__ */ jsx("span", { className: "hidden text-[10px] text-[hsl(var(--muted-foreground))] sm:block", children: label })
+    ] })
+  ] }, i)) });
+}
+function StepFormStep({ title, description, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-[hsl(var(--foreground))]", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: description })
+    ] }),
+    children
+  ] });
+}
+function StepFormNavigation({ onSubmit, submitLabel = "Submit" }) {
+  const { prev, next, isFirst, isLast } = useStepForm();
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: prev, disabled: isFirst, children: "Previous" }),
+    isLast ? /* @__PURE__ */ jsx(Button, { type: "button", onClick: onSubmit, children: submitLabel }) : /* @__PURE__ */ jsx(Button, { type: "button", onClick: next, children: "Next" })
+  ] });
+}
+function ArrayField({
+  value,
+  onChange,
+  renderItem,
+  addLabel = "Add item",
+  maxItems,
+  defaultItem,
+  className
+}) {
+  function add() {
+    if (maxItems && value.length >= maxItems)
+      return;
+    onChange([...value, defaultItem]);
+  }
+  function remove(index) {
+    onChange(value.filter((_, i) => i !== index));
+  }
+  const atMax = maxItems !== void 0 && value.length >= maxItems;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    value.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: renderItem(item, i, () => remove(i)) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => remove(i),
+          className: "mt-2 shrink-0 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--destructive))] transition-colors",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }, i)),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: add, disabled: atMax, children: [
+        /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+        addLabel
+      ] }),
+      maxItems && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: [
+        value.length,
+        "/",
+        maxItems
+      ] })
+    ] })
+  ] });
+}
+function ObjectField({
+  title,
+  description,
+  collapsible = false,
+  defaultOpen = true,
+  children,
+  className
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-[var(--radius)] border border-[hsl(var(--border))] overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between px-4 py-3 bg-[hsl(var(--muted)/0.4)]",
+          collapsible && "cursor-pointer hover:bg-[hsl(var(--accent))] transition-colors"
+        ),
+        onClick: () => collapsible && setOpen((o) => !o),
+        role: collapsible ? "button" : void 0,
+        tabIndex: collapsible ? 0 : void 0,
+        onKeyDown: (e) => collapsible && e.key === "Enter" && setOpen((o) => !o),
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-[hsl(var(--foreground))]", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: description })
+          ] }),
+          collapsible && (open ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-[hsl(var(--muted-foreground))]" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-[hsl(var(--muted-foreground))]" }))
+        ]
+      }
+    ),
+    (!collapsible || open) && /* @__PURE__ */ jsx("div", { className: "p-4 flex flex-col gap-4", children })
+  ] });
+}
+function toLabel(key) {
+  return key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
+}
+function getInputType(field) {
+  if (field instanceof z.ZodEmail)
+    return "email";
+  if (field instanceof z.ZodURL)
+    return "url";
+  return "text";
+}
+function unwrapOptional(field) {
+  if (field instanceof z.ZodOptional || field instanceof z.ZodNullable) {
+    return unwrapOptional(field.unwrap());
+  }
+  return field;
+}
+function FieldRenderer({ name, field, register, setValue, watch, error }) {
+  const inner = unwrapOptional(field);
+  const label = toLabel(name);
+  const isOptional = field instanceof z.ZodOptional;
+  if (inner instanceof z.ZodBoolean) {
+    const checked = Boolean(watch(name));
+    return /* @__PURE__ */ jsx(Field, { label, error, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: name,
+          checked,
+          onCheckedChange: (v) => setValue(name, v)
+        }
+      ),
+      /* @__PURE__ */ jsx("label", { htmlFor: name, className: "text-sm text-[hsl(var(--foreground))]", children: label })
+    ] }) });
+  }
+  if (inner instanceof z.ZodEnum) {
+    const options = inner.options ?? [];
+    const value = watch(name);
+    return /* @__PURE__ */ jsx(Field, { label, required: !isOptional, error, children: /* @__PURE__ */ jsxs(Select, { value, onValueChange: (v) => setValue(name, v), children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: `Select ${label.toLowerCase()}` }) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt, children: opt }, opt)) })
+    ] }) });
+  }
+  if (inner instanceof z.ZodDate) {
+    const value = watch(name);
+    return /* @__PURE__ */ jsx(Field, { label, required: !isOptional, error, children: /* @__PURE__ */ jsx(DatePicker, { value, onChange: (d) => setValue(name, d), placeholder: `Select ${label.toLowerCase()}` }) });
+  }
+  if (inner instanceof z.ZodNumber) {
+    return /* @__PURE__ */ jsx(Field, { label, required: !isOptional, error, children: /* @__PURE__ */ jsx(Input, { type: "number", ...register(name, { valueAsNumber: true }) }) });
+  }
+  const inputType = getInputType(inner);
+  return /* @__PURE__ */ jsx(Field, { label, required: !isOptional, error, children: /* @__PURE__ */ jsx(Input, { type: inputType, ...register(name) }) });
+}
+function AutoForm({ schema, onSubmit, defaultValues, submitLabel = "Submit" }) {
+  const { register, handleSubmit, setValue, watch, formState } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues
+  });
+  const shape = schema.shape;
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit((d) => onSubmit(d)), className: "flex flex-col gap-4", children: [
+    Object.entries(shape).map(([name, field]) => /* @__PURE__ */ jsx(
+      FieldRenderer,
+      {
+        name,
+        field,
+        register,
+        setValue,
+        watch,
+        error: formState.errors[name]?.message
+      },
+      name
+    )),
+    /* @__PURE__ */ jsx(Button, { type: "submit", children: submitLabel })
+  ] });
+}
+function DataTableColumnHeader({ column, title }) {
+  if (!column.getCanSort())
+    return /* @__PURE__ */ jsx("span", { children: title });
+  const sorted = column.getIsSorted();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => column.toggleSorting(sorted === "asc"),
+      className: "flex items-center gap-1 hover:text-[hsl(var(--foreground))]",
+      children: [
+        title,
+        sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" }) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3 opacity-50" })
+      ]
+    }
+  );
+}
+function DataTablePagination({ table }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-3", children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: [
+      "Page ",
+      table.getState().pagination.pageIndex + 1,
+      " of ",
+      table.getPageCount()
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: String(table.getState().pagination.pageSize),
+          onValueChange: (v) => table.setPageSize(Number(v)),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: [10, 20, 50].map((n) => /* @__PURE__ */ jsx(SelectItem, { value: String(n), children: n }, n)) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) })
+    ] })
+  ] });
+}
+function DataTableToolbar({ table, searchColumn }) {
+  if (!searchColumn)
+    return null;
+  return /* @__PURE__ */ jsx("div", { className: "py-3", children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      placeholder: "Search...",
+      value: table.getColumn(searchColumn)?.getFilterValue() ?? "",
+      onChange: (e) => table.getColumn(searchColumn)?.setFilterValue(e.target.value),
+      className: "max-w-sm h-8"
+    }
+  ) });
+}
+function DataTable({ columns, data, pageSize = 10, searchable, searchColumn, loading }) {
+  const [sorting, setSorting] = React14.useState([]);
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onSortingChange: setSorting,
+    initialState: { pagination: { pageSize } },
+    state: { sorting }
+  });
+  if (loading)
+    return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }, i)) });
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    searchable && /* @__PURE__ */ jsx(DataTableToolbar, { table, searchColumn }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-[var(--radius)] border border-[hsl(var(--border))] overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx("thead", { className: "bg-[hsl(var(--muted)/0.4)]", children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx("tr", { children: hg.headers.map((h) => /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium text-[hsl(var(--muted-foreground))]", children: h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext()) }, h.id)) }, hg.id)) }),
+      /* @__PURE__ */ jsxs("tbody", { children: [
+        table.getRowModel().rows.map((row, i) => /* @__PURE__ */ jsx("tr", { className: cn("border-t border-[hsl(var(--border))] hover:bg-[hsl(var(--muted)/0.3)] transition-colors", i % 2 === 0 ? "" : "bg-[hsl(var(--muted)/0.1)]"), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)),
+        table.getRowModel().rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-[hsl(var(--muted-foreground))]", children: "No results." }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(DataTablePagination, { table })
+  ] });
+}
+function EditableCell({ value: initial, onSave }) {
+  const [editing, setEditing] = React14.useState(false);
+  const [val, setVal] = React14.useState(String(initial ?? ""));
+  const commit = () => {
+    onSave(val);
+    setEditing(false);
+  };
+  if (editing) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        autoFocus: true,
+        className: "w-full bg-transparent outline outline-1 outline-[hsl(var(--ring))] rounded px-1 text-sm",
+        value: val,
+        onChange: (e) => setVal(e.target.value),
+        onBlur: commit,
+        onKeyDown: (e) => {
+          if (e.key === "Enter")
+            commit();
+          if (e.key === "Escape")
+            setEditing(false);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { className: "cursor-pointer w-full block", onDoubleClick: () => setEditing(true), children: String(initial ?? "") });
+}
+var selectionCol = () => ({
+  id: "_select",
+  header: ({ table }) => /* @__PURE__ */ jsx(Checkbox, { checked: table.getIsAllRowsSelected(), onCheckedChange: (v) => table.toggleAllRowsSelected(!!v) }),
+  cell: ({ row }) => /* @__PURE__ */ jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (v) => row.toggleSelected(!!v) }),
+  size: 40,
+  enableResizing: false
+});
+function DataGrid({ columns, data: initialData, onDataChange, editable, className }) {
+  const [data, setData] = React14.useState(initialData);
+  const [rowSelection, setRowSelection] = React14.useState({});
+  const columnResizeMode = "onChange";
+  const editableColumns = React14.useMemo(() => {
+    if (!editable)
+      return columns;
+    return columns.map((col) => ({
+      ...col,
+      cell: (info) => /* @__PURE__ */ jsx(
+        EditableCell,
+        {
+          value: info.getValue(),
+          onSave: (v) => {
+            const updated = data.map(
+              (row, i) => i === info.row.index ? { ...row, [info.column.id]: v } : row
+            );
+            setData(updated);
+            onDataChange?.(updated);
+          }
+        }
+      )
+    }));
+  }, [columns, data, editable, onDataChange]);
+  const allColumns = React14.useMemo(() => [selectionCol(), ...editableColumns], [editableColumns]);
+  const table = useReactTable({
+    data,
+    columns: allColumns,
+    columnResizeMode,
+    getCoreRowModel: getCoreRowModel(),
+    onRowSelectionChange: setRowSelection,
+    state: { rowSelection },
+    enableColumnResizing: true
+  });
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-auto rounded-[var(--radius)] border border-[hsl(var(--border))]", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", style: { width: table.getCenterTotalSize() }, children: [
+    /* @__PURE__ */ jsx("thead", { className: "bg-[hsl(var(--muted)/0.4)]", children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx("tr", { children: hg.headers.map((h) => /* @__PURE__ */ jsxs("th", { style: { width: h.getSize() }, className: "relative px-3 py-2 text-left font-medium text-[hsl(var(--muted-foreground))] border-r border-[hsl(var(--border))] last:border-r-0", children: [
+      h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext()),
+      h.column.getCanResize() && /* @__PURE__ */ jsx("div", { onMouseDown: h.getResizeHandler(), className: "absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-[hsl(var(--primary)/0.4)]" })
+    ] }, h.id)) }, hg.id)) }),
+    /* @__PURE__ */ jsx("tbody", { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx("tr", { className: cn("border-t border-[hsl(var(--border))] hover:bg-[hsl(var(--muted)/0.3)] transition-colors", row.getIsSelected() && "bg-[hsl(var(--primary)/0.06)]"), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { style: { width: cell.column.getSize() }, className: "px-3 py-2 border-r border-[hsl(var(--border))] last:border-r-0", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })
+  ] }) });
+}
+var EmptyStateIcon = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex h-12 w-12 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]", className), ...props })
+);
+EmptyStateIcon.displayName = "EmptyStateIcon";
+function EmptyState({ icon, title, description, action, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-3 py-12 text-center", className), children: [
+    icon && /* @__PURE__ */ jsx(EmptyStateIcon, { children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[hsl(var(--foreground))]", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: description })
+    ] }),
+    action && /* @__PURE__ */ jsx(Button, { onClick: action.onClick, className: "mt-1", children: action.label })
+  ] });
+}
+var PropertyList = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("dl", { ref, className: cn("divide-y divide-[hsl(var(--border))]", className), ...props })
+);
+PropertyList.displayName = "PropertyList";
+function PropertyItem({ label, value, orientation = "horizontal", className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("py-3", orientation === "horizontal" ? "flex gap-4" : "space-y-1", className), children: [
+    /* @__PURE__ */ jsx("dt", { className: cn("text-sm font-medium text-[hsl(var(--muted-foreground))] shrink-0", orientation === "horizontal" && "w-[40%]"), children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "text-sm text-[hsl(var(--foreground))] min-w-0", children: value })
+  ] });
+}
+var dotColors = {
+  default: "bg-[hsl(var(--primary))]",
+  success: "bg-green-500",
+  error: "bg-red-500",
+  warning: "bg-yellow-500"
+};
+var TimelineContent = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("pb-1", className), ...props })
+);
+TimelineContent.displayName = "TimelineContent";
+function TimelineConnector({ className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("absolute left-[7px] top-5 bottom-0 w-0.5 bg-[hsl(var(--border))]", className) });
+}
+function TimelineItem({ icon, title, description, timestamp, variant = "default", isLast, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex gap-4", !isLast && "pb-6", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex-none", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("h-4 w-4 rounded-full border-2 border-[hsl(var(--background))] flex items-center justify-center mt-0.5", dotColors[variant]), children: icon && /* @__PURE__ */ jsx("span", { className: "text-white text-[8px]", children: icon }) }),
+      !isLast && /* @__PURE__ */ jsx(TimelineConnector, {})
+    ] }),
+    /* @__PURE__ */ jsxs(TimelineContent, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: title }),
+        timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))] shrink-0", children: timestamp })
+      ] }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))] mt-0.5", children: description })
+    ] })
+  ] });
+}
+function Timeline({ children, className }) {
+  const items = React14.Children.toArray(children);
+  return /* @__PURE__ */ jsx("div", { className: cn("", className), children: items.map(
+    (child, i) => React14.isValidElement(child) ? React14.cloneElement(child, { isLast: i === items.length - 1 }) : child
+  ) });
+}
+function Stat({ label, value, trend, trendLabel, icon, description, className }) {
+  const isPositive = trend !== void 0 && trend >= 0;
+  return /* @__PURE__ */ jsx(Card, { className: cn("", className), children: /* @__PURE__ */ jsxs(CardContent, { className: "p-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))] truncate", children: label }),
+        /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-[hsl(var(--foreground))]", children: value })
+      ] }),
+      icon && /* @__PURE__ */ jsx("div", { className: "text-[hsl(var(--muted-foreground))] shrink-0 ml-2", children: icon })
+    ] }),
+    (trend !== void 0 || description) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-1", children: [
+      trend !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-0.5 text-xs font-medium", isPositive ? "text-green-600" : "text-red-600"), children: [
+        isPositive ? /* @__PURE__ */ jsx(TrendingUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(TrendingDown, { className: "h-3 w-3" }),
+        Math.abs(trend),
+        "%"
+      ] }),
+      trendLabel && /* @__PURE__ */ jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: trendLabel }),
+      description && !trendLabel && /* @__PURE__ */ jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: description })
+    ] })
+  ] }) });
+}
+function StatGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-4", className), style: { gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 200px), 1fr))" }, ...props });
+}
+var sizeMap2 = {
+  sm: { avatar: "h-7 w-7", name: "text-sm", subtitle: "text-xs" },
+  md: { avatar: "h-9 w-9", name: "text-sm font-medium", subtitle: "text-xs" },
+  lg: { avatar: "h-12 w-12", name: "text-base font-medium", subtitle: "text-sm" }
+};
+function Persona({ name, subtitle, src, size = "md", badge, className }) {
+  const s = sizeMap2[size];
+  const initials = name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2.5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+      /* @__PURE__ */ jsxs(Avatar, { className: s.avatar, children: [
+        src && /* @__PURE__ */ jsx(AvatarImage, { src, alt: name }),
+        /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: initials })
+      ] }),
+      badge && /* @__PURE__ */ jsx("div", { className: "absolute -bottom-0.5 -right-0.5", children: badge })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: cn("truncate text-[hsl(var(--foreground))]", s.name), children: name }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: cn("truncate text-[hsl(var(--muted-foreground))]", s.subtitle), children: subtitle })
+    ] })
+  ] });
+}
+var colorMap = {
+  default: "bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]",
+  primary: "bg-[hsl(var(--primary)/0.12)] text-[hsl(var(--primary))]",
+  success: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+  warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+  error: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+  purple: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
+};
+var sizeMap3 = {
+  sm: "h-7 w-7 [&>*]:h-3.5 [&>*]:w-3.5",
+  md: "h-10 w-10 [&>*]:h-5 [&>*]:w-5",
+  lg: "h-14 w-14 [&>*]:h-7 [&>*]:w-7"
+};
+function IconBadge({ icon, color = "default", size = "md", className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center justify-center rounded-full shrink-0", colorMap[color], sizeMap3[size], className), children: icon });
+}
+function StructuredListSection({ title, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("", className), children: [
+    title && /* @__PURE__ */ jsx("p", { className: "px-4 pb-1 pt-4 text-xs font-semibold uppercase tracking-wider text-[hsl(var(--muted-foreground))]", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-[var(--radius)] border border-[hsl(var(--border))] overflow-hidden divide-y divide-[hsl(var(--border))]", children })
+  ] });
+}
+function StructuredListItem({ left, title, description, right, onClick, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick,
+      className: cn("flex items-center gap-3 px-4 py-3 bg-[hsl(var(--card))]", onClick && "cursor-pointer hover:bg-[hsl(var(--muted)/0.5)] transition-colors", className),
+      children: [
+        left && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: left }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: description })
+        ] }),
+        right && /* @__PURE__ */ jsx("div", { className: "shrink-0 text-[hsl(var(--muted-foreground))]", children: right })
+      ]
+    }
+  );
+}
+var StructuredList = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-4", className), ...props })
+);
+StructuredList.displayName = "StructuredList";
+function CommandItem({ icon, label, description, shortcut, active, onClick, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick,
+      className: cn(
+        "flex items-center gap-3 rounded-[var(--radius)] px-3 py-2 cursor-pointer transition-colors",
+        active ? "bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]" : "hover:bg-[hsl(var(--accent)/0.6)]",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[hsl(var(--muted-foreground))] h-4 w-4 flex items-center justify-center", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: label }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: description })
+        ] }),
+        shortcut && /* @__PURE__ */ jsx("kbd", { className: "shrink-0 pointer-events-none inline-flex h-5 items-center gap-1 rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 text-[10px] font-medium text-[hsl(var(--muted-foreground))]", children: shortcut })
+      ]
+    }
+  );
+}
+var bannerVariants = cva(
+  "relative flex items-start gap-3 rounded-lg border px-4 py-3.5 text-sm transition-all",
+  {
+    variants: {
+      variant: {
+        info: "border-blue-200/80   bg-blue-50/60   dark:border-blue-800/60  dark:bg-blue-950/30",
+        success: "border-green-200/80  bg-green-50/60  dark:border-green-800/60 dark:bg-green-950/30",
+        warning: "border-yellow-200/80 bg-yellow-50/60 dark:border-yellow-800/60 dark:bg-yellow-950/30",
+        error: "border-red-200/80    bg-red-50/60    dark:border-red-800/60   dark:bg-red-950/30",
+        neutral: "border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.5)]"
+      }
+    },
+    defaultVariants: { variant: "info" }
+  }
+);
+var accentVariants = cva("absolute left-0 top-[12%] bottom-[12%] w-[3px] rounded-full", {
+  variants: {
+    variant: {
+      info: "bg-blue-500",
+      success: "bg-green-500",
+      warning: "bg-yellow-500",
+      error: "bg-red-500",
+      neutral: "bg-[hsl(var(--foreground)/0.3)]"
+    }
+  },
+  defaultVariants: { variant: "info" }
+});
+var iconVariants = cva("mt-0.5 h-4 w-4 shrink-0", {
+  variants: {
+    variant: {
+      info: "text-blue-500   dark:text-blue-400",
+      success: "text-green-500  dark:text-green-400",
+      warning: "text-yellow-500 dark:text-yellow-400",
+      error: "text-red-500    dark:text-red-400",
+      neutral: "text-[hsl(var(--muted-foreground))]"
+    }
+  },
+  defaultVariants: { variant: "info" }
+});
+var titleVariants = cva("font-semibold leading-snug", {
+  variants: {
+    variant: {
+      info: "text-blue-900   dark:text-blue-100",
+      success: "text-green-900  dark:text-green-100",
+      warning: "text-yellow-900 dark:text-yellow-100",
+      error: "text-red-900    dark:text-red-100",
+      neutral: "text-[hsl(var(--foreground))]"
+    }
+  },
+  defaultVariants: { variant: "info" }
+});
+var descriptionVariants = cva("mt-0.5 leading-snug opacity-80", {
+  variants: {
+    variant: {
+      info: "text-blue-800   dark:text-blue-200",
+      success: "text-green-800  dark:text-green-200",
+      warning: "text-yellow-800 dark:text-yellow-200",
+      error: "text-red-800    dark:text-red-200",
+      neutral: "text-[hsl(var(--muted-foreground))]"
+    }
+  },
+  defaultVariants: { variant: "info" }
+});
+var actionVariants = cva(
+  "inline-flex items-center gap-1 text-xs font-medium underline-offset-2 hover:underline transition-opacity hover:opacity-80",
+  {
+    variants: {
+      variant: {
+        info: "text-blue-700   dark:text-blue-300",
+        success: "text-green-700  dark:text-green-300",
+        warning: "text-yellow-700 dark:text-yellow-300",
+        error: "text-red-700    dark:text-red-300",
+        neutral: "text-[hsl(var(--foreground))]"
+      }
+    },
+    defaultVariants: { variant: "info" }
+  }
+);
+var ICONS = {
+  info: /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
+  success: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4" }),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" }),
+  error: /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4" }),
+  neutral: /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" })
+};
+function Banner({
+  variant = "info",
+  title,
+  description,
+  dismissible,
+  onDismiss,
+  action,
+  icon = true,
+  className,
+  children
+}) {
+  const [dismissed, setDismissed] = React14.useState(false);
+  const [exiting, setExiting] = React14.useState(false);
+  const handleDismiss = () => {
+    setExiting(true);
+    setTimeout(() => {
+      setDismissed(true);
+      onDismiss?.();
+    }, 200);
+  };
+  if (dismissed)
+    return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        bannerVariants({ variant }),
+        "pl-[18px]",
+        exiting && "opacity-0 translate-x-1 scale-[0.98]",
+        "transition-all duration-200",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: accentVariants({ variant }), "aria-hidden": true }),
+        icon && /* @__PURE__ */ jsx("span", { className: iconVariants({ variant }), children: ICONS[variant] }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+          title && /* @__PURE__ */ jsx("p", { className: cn(titleVariants({ variant }), "text-sm"), children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: cn(descriptionVariants({ variant }), "text-sm"), children: description }),
+          children && /* @__PURE__ */ jsx("div", { className: cn(descriptionVariants({ variant }), "text-sm"), children }),
+          action && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: action.onClick,
+              className: cn(actionVariants({ variant }), "mt-1.5"),
+              children: [
+                action.label,
+                action.icon !== false && /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3" })
+              ]
+            }
+          )
+        ] }),
+        dismissible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleDismiss,
+            "aria-label": "Dismiss",
+            className: "shrink-0 rounded-md p-0.5 text-[hsl(var(--muted-foreground))] opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
+            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function Toaster(props) {
+  const ctx = useBlinkUI?.();
+  const dark = ctx?.darkMode === "dark";
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      theme: dark ? "dark" : "light",
+      position: "bottom-right",
+      toastOptions: {
+        classNames: {
+          toast: [
+            "group flex items-start gap-3 rounded-lg border px-4 py-3.5 text-sm shadow-md",
+            "border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))]"
+          ].join(" "),
+          title: "font-semibold text-sm leading-snug",
+          description: "text-xs text-[hsl(var(--muted-foreground))] mt-0.5 leading-snug",
+          actionButton: [
+            "mt-2 inline-flex items-center gap-1 text-xs font-medium",
+            "text-[hsl(var(--primary))] underline-offset-2 hover:underline"
+          ].join(" "),
+          cancelButton: "mt-2 text-xs text-[hsl(var(--muted-foreground))] hover:opacity-80",
+          closeButton: "text-[hsl(var(--muted-foreground))] opacity-60 hover:opacity-100 transition-opacity",
+          error: "border-red-200/80 bg-red-50/60 dark:border-red-800/60 dark:bg-red-950/30",
+          success: "border-green-200/80 bg-green-50/60 dark:border-green-800/60 dark:bg-green-950/30",
+          warning: "border-yellow-200/80 bg-yellow-50/60 dark:border-yellow-800/60 dark:bg-yellow-950/30",
+          info: "border-blue-200/80 bg-blue-50/60 dark:border-blue-800/60 dark:bg-blue-950/30"
+        }
+      },
+      ...props
+    }
+  );
+}
+function LoadingOverlay({ loading, text, fullPage, children, className }) {
+  if (fullPage) {
+    return loading ? /* @__PURE__ */ jsx("div", { className: cn("fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm", className), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-[hsl(var(--primary))]" }),
+      text && /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: text })
+    ] }) }) : null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    children,
+    loading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center rounded-[var(--radius)] bg-[hsl(var(--background)/0.8)] backdrop-blur-[2px]", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-[hsl(var(--primary))]" }),
+      text && /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: text })
+    ] }) })
+  ] });
+}
+function StepperStep({ index, current, total, title, description }) {
+  const done = index < current;
+  const active = index === current;
+  const isLast = index === total - 1;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 flex-1 min-w-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center shrink-0", children: [
+      /* @__PURE__ */ jsx("div", { className: cn(
+        "h-8 w-8 rounded-full flex items-center justify-center border-2 text-sm font-semibold transition-colors",
+        done && "bg-[hsl(var(--primary))] border-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]",
+        active && "border-[hsl(var(--primary))] text-[hsl(var(--primary))] bg-transparent",
+        !done && !active && "border-[hsl(var(--muted-foreground)/0.4)] text-[hsl(var(--muted-foreground))] bg-transparent"
+      ), children: done ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : index + 1 }),
+      !isLast && /* @__PURE__ */ jsx("div", { className: cn("w-0.5 flex-1 min-h-[16px] mt-1", done ? "bg-[hsl(var(--primary))]" : "bg-[hsl(var(--border))]") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 pb-4", children: [
+      /* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium", active ? "text-[hsl(var(--foreground))]" : "text-[hsl(var(--muted-foreground))]"), children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mt-0.5", children: description })
+    ] })
+  ] });
+}
+function Stepper({ currentStep, steps, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-0", className), children: steps.map((step, i) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-start", i < steps.length - 1 && "flex-1"), children: [
+    /* @__PURE__ */ jsx(StepperStep, { ...step, index: i, current: currentStep, total: steps.length }),
+    i < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: cn("flex-1 h-0.5 mt-4 mx-2", i < currentStep ? "bg-[hsl(var(--primary))]" : "bg-[hsl(var(--border))]") })
+  ] }, i)) });
+}
+function BreadcrumbItem({ href, label, active, className }) {
+  return /* @__PURE__ */ jsx("li", { className: cn("flex items-center", className), children: href && !active ? /* @__PURE__ */ jsx("a", { href, className: "text-sm text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors", children: label }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-[hsl(var(--foreground))] font-medium", children: label }) });
+}
+function BreadcrumbPage({ children, className }) {
+  return /* @__PURE__ */ jsx("li", { "aria-current": "page", className: cn("flex items-center text-sm font-medium text-[hsl(var(--foreground))]", className), children });
+}
+function BreadcrumbSeparator({ className }) {
+  return /* @__PURE__ */ jsx("li", { role: "presentation", "aria-hidden": "true", className: cn("flex items-center text-[hsl(var(--muted-foreground))]", className), children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" }) });
+}
+function Breadcrumb({ children, className }) {
+  const items = React14.Children.toArray(children);
+  const withSeparators = [];
+  items.forEach((item, i) => {
+    withSeparators.push(item);
+    if (i < items.length - 1)
+      withSeparators.push(/* @__PURE__ */ jsx(BreadcrumbSeparator, {}, `sep-${i}`));
+  });
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: cn("flex flex-wrap items-center gap-1", className), children: withSeparators }) });
+}
+function HotkeyBadge({ children, className }) {
+  return /* @__PURE__ */ jsx("kbd", { className: cn(
+    "inline-flex items-center justify-center rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 py-0.5 text-[11px] font-medium text-[hsl(var(--muted-foreground))] shadow-[0_1px_0_rgba(0,0,0,0.1)] min-w-[20px] h-5",
+    className
+  ), children });
+}
+function Hotkeys({ keys, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center gap-0.5", className), children: keys.map((key, i) => /* @__PURE__ */ jsx(HotkeyBadge, { children: key }, i)) });
+}
+var textOps = ["contains", "equals", "starts with"];
+var numOps = ["=", ">", "<", ">=", "<="];
+function AddFilterPopover({ filters, onAdd }) {
+  const [open, setOpen] = React14.useState(false);
+  const [key, setKey] = React14.useState("");
+  const [op, setOp] = React14.useState("");
+  const [val, setVal] = React14.useState("");
+  const def = filters.find((f) => f.key === key);
+  const ops = def?.type === "number" ? numOps : textOps;
+  const handleAdd = () => {
+    if (!key || !val)
+      return;
+    onAdd({ key, operator: op || ops[0], value: val });
+    setKey("");
+    setOp("");
+    setVal("");
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-7 gap-1 text-xs", children: [
+      /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+      "Add Filter"
+    ] }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-72 p-3 space-y-2", children: [
+      /* @__PURE__ */ jsxs(Select, { value: key, onValueChange: setKey, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Field" }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: filters.map((f) => /* @__PURE__ */ jsx(SelectItem, { value: f.key, children: f.label }, f.key)) })
+      ] }),
+      key && /* @__PURE__ */ jsxs(Select, { value: op || ops[0], onValueChange: setOp, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: ops.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o, children: o }, o)) })
+      ] }),
+      key && def?.type === "select" ? /* @__PURE__ */ jsxs(Select, { value: val, onValueChange: setVal, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Value" }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: def.options?.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })
+      ] }) : key && /* @__PURE__ */ jsx(Input, { type: def?.type === "number" ? "number" : def?.type === "date" ? "date" : "text", className: "h-8 text-xs", value: val, onChange: (e) => setVal(e.target.value), placeholder: "Value" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", className: "w-full h-7 text-xs", onClick: handleAdd, disabled: !key || !val, children: "Apply" })
+    ] })
+  ] });
+}
+function FilterBadge({ filter, def, onRemove }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-2.5 py-0.5 text-xs font-medium text-[hsl(var(--foreground))]", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[hsl(var(--muted-foreground))]", children: def?.label ?? filter.key }),
+    /* @__PURE__ */ jsx("span", { children: filter.operator }),
+    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: filter.value }),
+    /* @__PURE__ */ jsx("button", { onClick: onRemove, className: "ml-0.5 rounded-full hover:text-[hsl(var(--destructive))]", children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+  ] });
+}
+function Filters({ filters, value, onChange, className }) {
+  const remove = (i) => onChange(value.filter((_, idx) => idx !== i));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [
+    value.map((fv, i) => /* @__PURE__ */ jsx(FilterBadge, { filter: fv, def: filters.find((f) => f.key === fv.key), onRemove: () => remove(i) }, i)),
+    /* @__PURE__ */ jsx(AddFilterPopover, { filters, onAdd: (fv) => onChange([...value, fv]) })
+  ] });
+}
+function BulkActions({ count, actions, onClear, className }) {
+  if (count === 0)
+    return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--card))] px-4 py-2 shadow-lg", className), children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[hsl(var(--foreground))] pr-2 border-r border-[hsl(var(--border))]", children: [
+      count,
+      " selected"
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: actions.map((action, i) => /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: action.variant === "destructive" ? "destructive" : "ghost",
+        size: "sm",
+        className: "h-7 gap-1.5 text-xs rounded-full px-3",
+        onClick: action.onClick,
+        children: [
+          action.icon,
+          action.label
+        ]
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx("button", { onClick: onClear, className: "ml-1 rounded-full p-0.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+  ] });
+}
+function ToggleButton({ pressed, onClick, disabled, children, className }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": pressed,
+      disabled,
+      onClick,
+      className: cn(
+        "inline-flex items-center justify-center gap-1.5 rounded-[var(--radius)] px-3 py-1.5 text-sm font-medium transition-colors border",
+        "disabled:pointer-events-none disabled:opacity-50",
+        pressed ? "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] border-[hsl(var(--primary))]" : "bg-transparent text-[hsl(var(--foreground))] border-[hsl(var(--border))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]",
+        className
+      ),
+      children
+    }
+  );
+}
+function ToggleButtonGroup(props) {
+  const { children, className } = props;
+  const isPressed = (val) => props.type === "multiple" ? props.value.includes(val) : props.value === val;
+  const handleClick = (val) => {
+    if (props.type === "multiple") {
+      const current = props.value;
+      props.onChange(current.includes(val) ? current.filter((v) => v !== val) : [...current, val]);
+    } else {
+      props.onChange(val);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center gap-1 rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.4)] p-0.5", className), children: React14.Children.map(children, (child) => {
+    if (!React14.isValidElement(child))
+      return child;
+    const tb = child;
+    return React14.cloneElement(tb, {
+      pressed: isPressed(tb.props.value),
+      onClick: () => handleClick(tb.props.value)
+    });
+  }) });
+}
+function useCommandBar() {
+  const [open, setOpen] = React14.useState(false);
+  React14.useEffect(() => {
+    const handler = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+  return { open, setOpen };
+}
+function CommandBarEmpty({ children = "No results found." }) {
+  return /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-[hsl(var(--muted-foreground))]", children });
+}
+function CommandBarGroup({ heading, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "px-2 py-1", children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-1 px-2 text-xs font-semibold text-[hsl(var(--muted-foreground))]", children: heading }),
+    children
+  ] });
+}
+function CommandBarItem({ icon, label, shortcut, onSelect, active, className }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: onSelect,
+      className: cn(
+        "flex w-full items-center gap-2.5 rounded-[var(--radius)] px-3 py-2 text-sm transition-colors",
+        active ? "bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]" : "hover:bg-[hsl(var(--accent)/0.6)]",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "h-4 w-4 shrink-0 text-[hsl(var(--muted-foreground))]", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-left truncate", children: label }),
+        shortcut && /* @__PURE__ */ jsx("kbd", { className: "pointer-events-none shrink-0 inline-flex h-5 items-center rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 text-[10px] font-medium text-[hsl(var(--muted-foreground))]", children: shortcut })
+      ]
+    }
+  );
+}
+function CommandBar({ open, onOpenChange, children, placeholder = "Search commands...", onSearch }) {
+  const [query, setQuery] = React14.useState("");
+  const handleSearch = (v) => {
+    setQuery(v);
+    onSearch?.(v);
+  };
+  const items = React14.useRef(null);
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      onOpenChange(false);
+      return;
+    }
+    const focusable = items.current?.querySelectorAll("button");
+    if (!focusable?.length)
+      return;
+    const arr = Array.from(focusable);
+    const idx = arr.indexOf(document.activeElement);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      arr[(idx + 1) % arr.length]?.focus();
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      arr[(idx - 1 + arr.length) % arr.length]?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0 gap-0 max-w-lg overflow-hidden", onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Command Bar" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[hsl(var(--border))] px-4 py-3", children: [
+      /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0 text-[hsl(var(--muted-foreground))]" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          autoFocus: true,
+          className: "flex-1 bg-transparent text-sm outline-none placeholder:text-[hsl(var(--muted-foreground))]",
+          placeholder,
+          value: query,
+          onChange: (e) => handleSearch(e.target.value)
+        }
+      ),
+      query && /* @__PURE__ */ jsx("button", { onClick: () => handleSearch(""), className: "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: items, className: "max-h-80 overflow-y-auto py-2", children })
+  ] }) });
+}
+function KanbanCard({ card, isDragging }) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: card.id });
+  const style = { transform: CSS.Transform.toString(transform), transition };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      ...attributes,
+      ...listeners,
+      className: cn("rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-3 cursor-grab active:cursor-grabbing select-none", isDragging && "shadow-lg opacity-80"),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[hsl(var(--foreground))] leading-tight", children: card.title }),
+          card.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] px-1.5 py-0.5 rounded-full bg-[hsl(var(--primary)/0.1)] text-[hsl(var(--primary))] font-medium", children: card.badge })
+        ] }),
+        card.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[hsl(var(--muted-foreground))] line-clamp-2", children: card.description })
+      ]
+    }
+  );
+}
+function KanbanColumn({ column, isOver }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-64 shrink-0 flex-col gap-2 rounded-[var(--radius)] bg-[hsl(var(--muted)/0.4)] p-3 transition-colors", isOver && "bg-[hsl(var(--muted)/0.7)]"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[hsl(var(--foreground))]", children: column.title }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))] bg-[hsl(var(--muted))] rounded-full px-2 py-0.5", children: column.cards.length })
+    ] }),
+    /* @__PURE__ */ jsx(SortableContext, { items: column.cards.map((c) => c.id), strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 min-h-[60px]", children: column.cards.map((card) => /* @__PURE__ */ jsx(KanbanCard, { card }, card.id)) }) })
+  ] });
+}
+function Kanban({ columns: initialColumns, onMoveCard, className }) {
+  const [cols, setCols] = React14.useState(initialColumns);
+  const [activeCard, setActiveCard] = React14.useState(null);
+  const [overColId, setOverColId] = React14.useState(null);
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+  const findColByCard = (cardId) => cols.find((c) => c.cards.some((card) => card.id === cardId));
+  const onDragStart = ({ active }) => {
+    const col = findColByCard(active.id);
+    setActiveCard(col?.cards.find((c) => c.id === active.id) ?? null);
+  };
+  const onDragOver = ({ over }) => {
+    if (!over) {
+      setOverColId(null);
+      return;
+    }
+    const colId = cols.find((c) => c.id === over.id)?.id ?? findColByCard(over.id)?.id ?? null;
+    setOverColId(colId);
+  };
+  const onDragEnd = ({ active, over }) => {
+    setActiveCard(null);
+    setOverColId(null);
+    if (!over || active.id === over.id)
+      return;
+    const fromCol = findColByCard(active.id);
+    const toCol = cols.find((c) => c.id === over.id) ?? findColByCard(over.id);
+    if (!fromCol || !toCol || fromCol.id === toCol.id)
+      return;
+    const card = fromCol.cards.find((c) => c.id === active.id);
+    setCols((prev) => prev.map((c) => {
+      if (c.id === fromCol.id)
+        return { ...c, cards: c.cards.filter((card2) => card2.id !== active.id) };
+      if (c.id === toCol.id)
+        return { ...c, cards: [...c.cards, card] };
+      return c;
+    }));
+    onMoveCard?.(active.id, fromCol.id, toCol.id);
+  };
+  return /* @__PURE__ */ jsxs(DndContext, { sensors, onDragStart, onDragOver, onDragEnd, children: [
+    /* @__PURE__ */ jsx("div", { className: cn("flex gap-4 overflow-x-auto pb-4", className), children: cols.map((col) => /* @__PURE__ */ jsx(KanbanColumn, { column: col, isOver: overColId === col.id }, col.id)) }),
+    /* @__PURE__ */ jsx(DragOverlay, { children: activeCard && /* @__PURE__ */ jsx(KanbanCard, { card: activeCard, isDragging: true }) })
+  ] });
+}
+var DEFAULT_COLORS = [
+  "hsl(var(--primary))",
+  "hsl(217 91% 60%)",
+  "hsl(142 71% 45%)",
+  "hsl(38 92% 50%)",
+  "hsl(280 65% 60%)"
+];
+function AreaChart({
+  data,
+  dataKey,
+  xAxisKey = "name",
+  height = 300,
+  colors = DEFAULT_COLORS,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = false,
+  curved = true,
+  className
+}) {
+  const keys = Array.isArray(dataKey) ? dataKey : [dataKey];
+  const curve = curved ? "monotone" : "linear";
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top: 4, right: 4, left: -20, bottom: 0 }, children: [
+    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
+    /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        contentStyle: {
+          background: "hsl(var(--card))",
+          border: "1px solid hsl(var(--border))",
+          borderRadius: "var(--radius)",
+          fontSize: 12
+        }
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 12 } }),
+    keys.map((key, i) => /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: curve,
+        dataKey: key,
+        stroke: colors[i % colors.length],
+        fill: colors[i % colors.length],
+        fillOpacity: 0.15,
+        strokeWidth: 2
+      },
+      key
+    ))
+  ] }) }) });
+}
+var DEFAULT_COLORS2 = [
+  "hsl(var(--primary))",
+  "hsl(217 91% 60%)",
+  "hsl(142 71% 45%)",
+  "hsl(38 92% 50%)",
+  "hsl(280 65% 60%)"
+];
+function BarChart({
+  data,
+  dataKey,
+  xAxisKey = "name",
+  height = 300,
+  colors = DEFAULT_COLORS2,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = false,
+  layout = "horizontal",
+  stacked = false,
+  className
+}) {
+  const keys = Array.isArray(dataKey) ? dataKey : [dataKey];
+  const isVertical = layout === "vertical";
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(BarChart$1, { data, layout, margin: { top: 4, right: 4, left: -20, bottom: 0 }, children: [
+    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
+    isVertical ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(XAxis, { type: "number", tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
+      /* @__PURE__ */ jsx(YAxis, { type: "category", dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
+      /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false })
+    ] }),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        contentStyle: {
+          background: "hsl(var(--card))",
+          border: "1px solid hsl(var(--border))",
+          borderRadius: "var(--radius)",
+          fontSize: 12
+        }
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 12 } }),
+    keys.map((key, i) => /* @__PURE__ */ jsx(
+      Bar,
+      {
+        dataKey: key,
+        fill: colors[i % colors.length],
+        radius: isVertical ? [0, 4, 4, 0] : [4, 4, 0, 0],
+        stackId: stacked ? "stack" : void 0
+      },
+      key
+    ))
+  ] }) }) });
+}
+var DEFAULT_COLORS3 = [
+  "hsl(var(--primary))",
+  "hsl(217 91% 60%)",
+  "hsl(142 71% 45%)",
+  "hsl(38 92% 50%)",
+  "hsl(280 65% 60%)"
+];
+function LineChart({
+  data,
+  dataKey,
+  xAxisKey = "name",
+  height = 300,
+  colors = DEFAULT_COLORS3,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = false,
+  curved = true,
+  dotted = false,
+  strokeWidth = 2,
+  className
+}) {
+  const keys = Array.isArray(dataKey) ? dataKey : [dataKey];
+  const curve = curved ? "monotone" : "linear";
+  const dash = dotted ? "4 4" : void 0;
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top: 4, right: 4, left: -20, bottom: 0 }, children: [
+    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
+    /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12, fill: "hsl(var(--muted-foreground))" }, axisLine: false, tickLine: false }),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        contentStyle: {
+          background: "hsl(var(--card))",
+          border: "1px solid hsl(var(--border))",
+          borderRadius: "var(--radius)",
+          fontSize: 12
+        }
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 12 } }),
+    keys.map((key, i) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: curve,
+        dataKey: key,
+        stroke: colors[i % colors.length],
+        strokeWidth,
+        strokeDasharray: dash,
+        dot: false,
+        activeDot: { r: 4 }
+      },
+      key
+    ))
+  ] }) }) });
+}
+function buildPath(data, w, h) {
+  if (data.length < 2)
+    return "";
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const pad = 2;
+  const points = data.map((v, i) => {
+    const x = pad + i / (data.length - 1) * (w - pad * 2);
+    const y = pad + (1 - (v - min) / range) * (h - pad * 2);
+    return `${x},${y}`;
+  });
+  return `M ${points.join(" L ")}`;
+}
+function Sparkline({
+  data,
+  type = "line",
+  color = "hsl(var(--primary))",
+  height = 32,
+  width = 100,
+  className
+}) {
+  const path = buildPath(data, width, height);
+  if (!path)
+    return null;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const pad = 2;
+  const lastY = pad + (1 - (data[data.length - 1] - min) / range) * (height - pad * 2);
+  const areaPath = type === "area" ? `${path} L ${width - pad},${height - pad} L ${pad},${height - pad} Z` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className,
+      style: { display: "inline-block", verticalAlign: "middle" },
+      children: [
+        type === "area" && areaPath && /* @__PURE__ */ jsx("path", { d: areaPath, fill: color, fillOpacity: 0.15, stroke: "none" }),
+        /* @__PURE__ */ jsx("path", { d: path, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: width - pad, cy: lastY, r: 2, fill: color })
+      ]
+    }
+  );
+}
+var colorMap2 = {
+  primary: "bg-[hsl(var(--primary))]",
+  success: "bg-green-500",
+  warning: "bg-yellow-500",
+  error: "bg-red-500"
+};
+var sizeMap4 = {
+  sm: "h-1.5 w-1.5",
+  md: "h-2.5 w-2.5",
+  lg: "h-3.5 w-3.5"
+};
+function BeaconDot({ color = "primary", size = "md" }) {
+  return /* @__PURE__ */ jsxs("span", { className: "relative flex", children: [
+    /* @__PURE__ */ jsx("span", { className: cn("animate-ping absolute inline-flex h-full w-full rounded-full opacity-75", colorMap2[color]) }),
+    /* @__PURE__ */ jsx("span", { className: cn("relative inline-flex rounded-full", sizeMap4[size], colorMap2[color]) })
+  ] });
+}
+function Beacon({ color = "primary", size = "md", children, className }) {
+  if (!children) {
+    return /* @__PURE__ */ jsx("span", { className: cn("inline-flex", className), children: /* @__PURE__ */ jsx(BeaconDot, { color, size }) });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex", className), children: [
+    children,
+    /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex", children: /* @__PURE__ */ jsx(BeaconDot, { color, size }) })
+  ] });
+}
+var TourContext = createContext(null);
+function useTour() {
+  const ctx = useContext(TourContext);
+  if (!ctx)
+    throw new Error("useTour must be used within <Tour>");
+  return ctx;
+}
+function Tour({ totalSteps, children }) {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isActive, setIsActive] = useState(false);
+  const stop = useCallback(() => setIsActive(false), []);
+  const start = useCallback(() => {
+    setCurrentStep(0);
+    setIsActive(true);
+  }, []);
+  const next = useCallback(() => setCurrentStep((s) => Math.min(s + 1, totalSteps - 1)), [totalSteps]);
+  const prev = useCallback(() => setCurrentStep((s) => Math.max(s - 1, 0)), []);
+  const goTo = useCallback((step) => setCurrentStep(Math.max(0, Math.min(step, totalSteps - 1))), [totalSteps]);
+  useEffect(() => {
+    if (!isActive)
+      return;
+    const onKey = (e) => {
+      if (e.key === "Escape")
+        stop();
+      if (e.key === "ArrowRight")
+        next();
+      if (e.key === "ArrowLeft")
+        prev();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [isActive, stop, next, prev]);
+  return /* @__PURE__ */ jsx(TourContext.Provider, { value: { currentStep, totalSteps, isActive, start, stop, next, prev, goTo }, children });
+}
+var placementClasses = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+  left: "right-full top-1/2 -translate-y-1/2 mr-2",
+  right: "left-full top-1/2 -translate-y-1/2 ml-2"
+};
+function TourStep({ step, title, description, placement = "bottom", children }) {
+  const { currentStep, isActive, stop, next, prev, totalSteps } = useTour();
+  const active = isActive && currentStep === step;
+  const isLast = step === totalSteps - 1;
+  return /* @__PURE__ */ jsxs("span", { className: "relative inline-block", children: [
+    active && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "fixed inset-0 z-40 pointer-events-none",
+        style: { boxShadow: "0 0 0 9999px rgba(0,0,0,0.5)" }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: cn("relative", active && "z-50 ring-2 ring-[hsl(var(--primary))] ring-offset-2 rounded-[var(--radius)]"), children }),
+    active && /* @__PURE__ */ jsxs("div", { className: cn("absolute z-50 w-64 rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-4 shadow-lg", placementClasses[placement]), children: [
+      /* @__PURE__ */ jsx("p", { className: "font-semibold text-sm mb-1", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mb-3", children: description }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: [
+          step + 1,
+          " / ",
+          totalSteps
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+          step > 0 && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: prev, children: "Back" }),
+          isLast ? /* @__PURE__ */ jsx(Button, { size: "sm", onClick: stop, children: "Done" }) : /* @__PURE__ */ jsx(Button, { size: "sm", onClick: next, children: "Next" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+var NAV_ITEMS = [
+  { icon: LayoutDashboard, label: "Dashboard", active: true },
+  { icon: FolderOpen, label: "Projects" },
+  { icon: Users, label: "Team" },
+  { icon: Settings, label: "Settings" }
+];
+function NavItem({ icon: Icon2, label, active }) {
+  return /* @__PURE__ */ jsxs("button", { className: cn(
+    "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+    active ? "bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))] font-medium" : "text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]"
+  ), children: [
+    /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 shrink-0" }),
+    label
+  ] });
+}
+function SidebarLayoutMinimal({
+  brandName = "Acme Inc",
+  pageTitle = "Dashboard",
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-[600px] overflow-hidden rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--background))]", className), children: [
+    /* @__PURE__ */ jsxs("aside", { className: "flex w-60 flex-col border-r border-[hsl(var(--border))] bg-[hsl(var(--card))]", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-14 items-center px-4 font-semibold text-sm", children: brandName }),
+      /* @__PURE__ */ jsx(Separator4, {}),
+      /* @__PURE__ */ jsx("nav", { className: "flex-1 space-y-0.5 p-2", children: NAV_ITEMS.map((item) => /* @__PURE__ */ jsx(NavItem, { ...item }, item.label)) }),
+      /* @__PURE__ */ jsx(Separator4, {}),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4", children: [
+        /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: "JD" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: "Jane Doe" }),
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[hsl(var(--muted-foreground))]", children: "jane@acme.com" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("main", { className: "flex flex-1 flex-col overflow-auto", children: [
+      /* @__PURE__ */ jsx("header", { className: "flex h-14 items-center border-b border-[hsl(var(--border))] px-6", children: /* @__PURE__ */ jsx("h1", { className: "text-sm font-semibold", children: pageTitle }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 p-6 text-sm text-[hsl(var(--muted-foreground))]", children: children ?? "Page content goes here." })
+    ] })
+  ] });
+}
+var NAV_GROUPS = [
+  {
+    label: "Main",
+    items: [{ icon: LayoutDashboard, label: "Dashboard", active: true }, { icon: BarChart2, label: "Analytics" }]
+  },
+  {
+    label: "Management",
+    items: [{ icon: FolderOpen, label: "Projects" }, { icon: Users, label: "Team" }, { icon: CreditCard, label: "Billing" }]
+  },
+  {
+    label: "Account",
+    items: [{ icon: Settings, label: "Settings" }, { icon: HelpCircle, label: "Help" }]
+  }
+];
+function NavItem2({ icon: Icon2, label, active }) {
+  return /* @__PURE__ */ jsxs("button", { className: cn(
+    "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+    active ? "bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))] font-medium" : "text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]"
+  ), children: [
+    /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 shrink-0" }),
+    label
+  ] });
+}
+function SidebarLayoutGroups({
+  brandName = "Acme Inc",
+  pageTitle = "Dashboard",
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-[600px] overflow-hidden rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--background))]", className), children: [
+    /* @__PURE__ */ jsxs("aside", { className: "flex w-60 flex-col border-r border-[hsl(var(--border))] bg-[hsl(var(--card))]", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-14 items-center px-4 font-semibold text-sm", children: brandName }),
+      /* @__PURE__ */ jsx(Separator4, {}),
+      /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-auto p-2 space-y-4", children: NAV_GROUPS.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-1 px-3 text-[10px] font-semibold uppercase tracking-wider text-[hsl(var(--muted-foreground))]", children: group.label }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: group.items.map((item) => /* @__PURE__ */ jsx(NavItem2, { ...item }, item.label)) })
+      ] }, group.label)) })
+    ] }),
+    /* @__PURE__ */ jsxs("main", { className: "flex flex-1 flex-col overflow-auto", children: [
+      /* @__PURE__ */ jsx("header", { className: "flex h-14 items-center border-b border-[hsl(var(--border))] px-6", children: /* @__PURE__ */ jsx("h1", { className: "text-sm font-semibold", children: pageTitle }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 p-6 text-sm text-[hsl(var(--muted-foreground))]", children: children ?? "Page content goes here." })
+    ] })
+  ] });
+}
+var NAV_ITEMS2 = [
+  { icon: LayoutDashboard, label: "Dashboard", active: true },
+  { icon: FolderOpen, label: "Projects" },
+  { icon: Users, label: "Team" },
+  { icon: Bell, label: "Notifications", badge: "3" },
+  { icon: Settings, label: "Settings" }
+];
+function NavItem3({ icon: Icon2, label, active, badge }) {
+  return /* @__PURE__ */ jsxs("button", { className: cn(
+    "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+    active ? "bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))] font-medium" : "text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]"
+  ), children: [
+    /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 shrink-0" }),
+    /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: label }),
+    badge && /* @__PURE__ */ jsx(Badge, { className: "text-[10px] px-1.5 py-0.5 shrink-0", children: badge })
+  ] });
+}
+function SidebarLayoutUser({
+  userName = "Jane Doe",
+  userEmail = "jane@acme.com",
+  userRole = "Admin",
+  pageTitle = "Dashboard",
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-[600px] overflow-hidden rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--background))]", className), children: [
+    /* @__PURE__ */ jsxs("aside", { className: "flex w-60 flex-col border-r border-[hsl(var(--border))] bg-[hsl(var(--card))]", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-[var(--radius)] bg-[hsl(var(--accent))] p-3", children: [
+        /* @__PURE__ */ jsx(Avatar, { className: "h-9 w-9", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: userName.slice(0, 2).toUpperCase() }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold", children: userName }),
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[hsl(var(--muted-foreground))]", children: userRole })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Separator4, {}),
+      /* @__PURE__ */ jsx("nav", { className: "flex-1 space-y-0.5 p-2", children: NAV_ITEMS2.map((item) => /* @__PURE__ */ jsx(NavItem3, { ...item }, item.label)) }),
+      /* @__PURE__ */ jsx(Separator4, {}),
+      /* @__PURE__ */ jsx("p", { className: "p-4 text-xs text-[hsl(var(--muted-foreground))] truncate", children: userEmail })
+    ] }),
+    /* @__PURE__ */ jsxs("main", { className: "flex flex-1 flex-col overflow-auto", children: [
+      /* @__PURE__ */ jsx("header", { className: "flex h-14 items-center border-b border-[hsl(var(--border))] px-6", children: /* @__PURE__ */ jsx("h1", { className: "text-sm font-semibold", children: pageTitle }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 p-6 text-sm text-[hsl(var(--muted-foreground))]", children: children ?? "Page content goes here." })
+    ] })
+  ] });
+}
+var ALL_ITEMS = [
+  { icon: LayoutDashboard, label: "Dashboard", active: true },
+  { icon: BarChart2, label: "Analytics" },
+  { icon: FolderOpen, label: "Projects" },
+  { icon: Users, label: "Team" },
+  { icon: Bell, label: "Notifications" },
+  { icon: Settings, label: "Settings" }
+];
+function NavItem4({ icon: Icon2, label, active }) {
+  return /* @__PURE__ */ jsxs("button", { className: cn(
+    "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+    active ? "bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))] font-medium" : "text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]"
+  ), children: [
+    /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 shrink-0" }),
+    label
+  ] });
+}
+function SidebarLayoutSearch({
+  brandName = "Acme Inc",
+  pageTitle = "Dashboard",
+  children,
+  className
+}) {
+  const [query, setQuery] = useState("");
+  const filtered = ALL_ITEMS.filter((i) => i.label.toLowerCase().includes(query.toLowerCase()));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-[600px] overflow-hidden rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--background))]", className), children: [
+    /* @__PURE__ */ jsxs("aside", { className: "flex w-60 flex-col border-r border-[hsl(var(--border))] bg-[hsl(var(--card))]", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-14 items-center px-4 font-semibold text-sm", children: brandName }),
+      /* @__PURE__ */ jsx(Separator4, {}),
+      /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder: "Search...",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          className: "h-8 text-sm"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("nav", { className: "flex-1 space-y-0.5 overflow-auto p-2", children: filtered.length > 0 ? filtered.map((item) => /* @__PURE__ */ jsx(NavItem4, { ...item }, item.label)) : /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-xs text-[hsl(var(--muted-foreground))]", children: "No results" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("main", { className: "flex flex-1 flex-col overflow-auto", children: [
+      /* @__PURE__ */ jsx("header", { className: "flex h-14 items-center border-b border-[hsl(var(--border))] px-6", children: /* @__PURE__ */ jsx("h1", { className: "text-sm font-semibold", children: pageTitle }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 p-6 text-sm text-[hsl(var(--muted-foreground))]", children: children ?? "Page content goes here." })
+    ] })
+  ] });
+}
+var NAV_ITEMS3 = [
+  { icon: LayoutDashboard, label: "Dashboard", active: true },
+  { icon: FolderOpen, label: "Projects" },
+  { icon: Users, label: "Team" },
+  { icon: Settings, label: "Settings" }
+];
+var KPIS = [
+  { label: "Total Revenue", value: "$48,295", change: "+12.5%" },
+  { label: "Active Users", value: "2,847", change: "+8.3%" },
+  { label: "New Orders", value: "384", change: "+3.1%" },
+  { label: "Conversion", value: "3.24%", change: "-0.4%" }
+];
+var TABLE_ROWS = [
+  { name: "Alpha Project", status: "Active", team: "Design", progress: 72 },
+  { name: "Beta Launch", status: "Review", team: "Engineering", progress: 45 },
+  { name: "Gamma Research", status: "Active", team: "Product", progress: 89 }
+];
+function NavItem5({ icon: Icon2, label, active }) {
+  return /* @__PURE__ */ jsxs("button", { className: cn(
+    "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+    active ? "bg-[hsl(var(--accent))] font-medium" : "text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))]"
+  ), children: [
+    /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 shrink-0" }),
+    label
+  ] });
+}
+function SidebarLayoutDashboard({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-[600px] overflow-hidden rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--background))]", className), children: [
+    /* @__PURE__ */ jsxs("aside", { className: "flex w-56 flex-col border-r border-[hsl(var(--border))] bg-[hsl(var(--card))]", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-12 items-center px-4 font-semibold text-sm", children: "Acme Inc" }),
+      /* @__PURE__ */ jsx(Separator4, {}),
+      /* @__PURE__ */ jsx("nav", { className: "flex-1 space-y-0.5 p-2", children: NAV_ITEMS3.map((i) => /* @__PURE__ */ jsx(NavItem5, { ...i }, i.label)) }),
+      /* @__PURE__ */ jsx(Separator4, {}),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3", children: [
+        /* @__PURE__ */ jsx(Avatar, { className: "h-7 w-7", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: "JD" }) }),
+        /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-medium", children: "Jane Doe" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("header", { className: "flex h-12 items-center justify-between border-b border-[hsl(var(--border))] px-4", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-sm font-semibold", children: "Dashboard" }),
+        /* @__PURE__ */ jsxs("button", { className: "relative", children: [
+          /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 h-2 w-2 rounded-full bg-[hsl(var(--primary))]" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto p-4 space-y-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "grid gap-3", style: { gridTemplateColumns: "repeat(auto-fill, minmax(min(100%,130px),1fr))" }, children: KPIS.map((k) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "p-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: k.label }),
+          /* @__PURE__ */ jsx("p", { className: "text-lg font-bold mt-0.5", children: k.value }),
+          /* @__PURE__ */ jsxs("p", { className: cn("text-xs flex items-center gap-0.5 mt-0.5", k.change.startsWith("+") ? "text-green-600" : "text-red-500"), children: [
+            /* @__PURE__ */ jsx(TrendingUp, { className: "h-3 w-3" }),
+            k.change
+          ] })
+        ] }) }, k.label)) }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-[var(--radius)] border border-[hsl(var(--border))]", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-[hsl(var(--border))]", children: ["Project", "Status", "Team", "Progress"].map((h) => /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left font-medium text-[hsl(var(--muted-foreground))]", children: h }, h)) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: TABLE_ROWS.map((r) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-[hsl(var(--border))] last:border-0", children: [
+            /* @__PURE__ */ jsx("td", { className: "px-3 py-2 font-medium", children: r.name }),
+            /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-[10px]", children: r.status }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-[hsl(var(--muted-foreground))]", children: r.team }),
+            /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx("div", { className: "h-1.5 w-20 rounded-full bg-[hsl(var(--muted))]", children: /* @__PURE__ */ jsx("div", { className: "h-full rounded-full bg-[hsl(var(--primary))]", style: { width: `${r.progress}%` } }) }) })
+          ] }, r.name)) })
+        ] }) })
+      ] })
+    ] })
+  ] });
+}
+var NAV_LINKS = ["Home", "Projects", "Analytics", "Team"];
+var TABS = ["Overview", "Activity", "Settings", "Billing"];
+function StackedLayoutTabs({
+  brandName = "Acme Inc",
+  children,
+  className
+}) {
+  const [activeTab, setActiveTab] = useState(0);
+  const [activeNav, setActiveNav] = useState(0);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-[600px] flex-col overflow-hidden rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--background))]", className), children: [
+    /* @__PURE__ */ jsxs("nav", { className: "flex h-14 items-center gap-6 border-b border-[hsl(var(--border))] bg-[hsl(var(--card))] px-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm shrink-0", children: brandName }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-1", children: NAV_LINKS.map((link, i) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setActiveNav(i),
+          className: cn(
+            "px-3 py-1.5 text-sm rounded-md transition-colors",
+            i === activeNav ? "bg-[hsl(var(--accent))] font-medium" : "text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))]"
+          ),
+          children: link
+        },
+        link
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4 text-[hsl(var(--muted-foreground))]" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 cursor-pointer", children: [
+          /* @__PURE__ */ jsx(Avatar, { className: "h-7 w-7", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: "JD" }) }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 text-[hsl(var(--muted-foreground))]" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border-b border-[hsl(var(--border))] bg-[hsl(var(--card))] px-4", children: /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: TABS.map((tab, i) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActiveTab(i),
+        className: cn(
+          "py-3 text-sm transition-colors border-b-2",
+          i === activeTab ? "border-[hsl(var(--primary))] font-medium" : "border-transparent text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
+        ),
+        children: tab
+      },
+      tab
+    )) }) }),
+    /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto p-6", children: children ?? /* @__PURE__ */ jsxs("div", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: [
+      "Content for ",
+      /* @__PURE__ */ jsx("strong", { children: TABS[activeTab] }),
+      " tab"
+    ] }) })
+  ] });
+}
+var NAV_LINKS2 = ["Features", "Pricing", "Docs", "Blog"];
+function StackedLayoutBranded({
+  brandName = "Acme",
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-[600px] flex-col overflow-hidden rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--background))]", className), children: [
+    /* @__PURE__ */ jsxs("nav", { className: "flex h-14 items-center gap-6 bg-[hsl(var(--primary))] px-6", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-bold text-sm text-[hsl(var(--primary-foreground))] shrink-0", children: brandName }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-1", children: NAV_LINKS2.map((link) => /* @__PURE__ */ jsx("button", { className: "px-3 py-1.5 text-sm text-[hsl(var(--primary-foreground)/0.8)] hover:text-[hsl(var(--primary-foreground))] transition-colors rounded-md hover:bg-white/10", children: link }, link)) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4 text-[hsl(var(--primary-foreground)/0.8)]" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 cursor-pointer", children: [
+          /* @__PURE__ */ jsx(Avatar, { className: "h-7 w-7 ring-2 ring-white/30", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-white/20 text-[hsl(var(--primary-foreground))] text-xs", children: "JD" }) }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 text-[hsl(var(--primary-foreground)/0.8)]" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto", children: children ?? /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold", children: "Welcome back, Jane" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))] mt-1", children: "Here's what's happening today." })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-4", style: { gridTemplateColumns: "repeat(auto-fill, minmax(min(100%,200px),1fr))" }, children: ["Get Started", "View Analytics", "Manage Team"].map((action) => /* @__PURE__ */ jsx(Card, { className: "cursor-pointer hover:shadow-md transition-shadow", children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: action }),
+        /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 text-[hsl(var(--muted-foreground))]" })
+      ] }) }, action)) })
+    ] }) })
+  ] });
+}
+var NOTIFICATIONS = [
+  { id: "comments", label: "Comments", description: "Get notified when someone comments on your post", default: true },
+  { id: "mentions", label: "Mentions", description: "Get notified when you are mentioned", default: true },
+  { id: "followers", label: "New followers", description: "Get notified when someone follows you", default: false },
+  { id: "updates", label: "Product updates", description: "Receive emails about new features and improvements", default: true },
+  { id: "digest", label: "Weekly digest", description: "A summary of activity from the past week", default: false },
+  { id: "security", label: "Security alerts", description: "Important alerts about your account security", default: true }
+];
+function NotifRow({ label, description, checked, onChange }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 py-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: label }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mt-0.5", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(Switch, { checked, onCheckedChange: onChange })
+  ] });
+}
+function NotificationSettings({ className }) {
+  const [states, setStates] = useState(
+    Object.fromEntries(NOTIFICATIONS.map((n) => [n.id, n.default]))
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-6", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold", children: "Email Notifications" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))] mt-0.5", children: "Choose what you want to be notified about." })
+    ] }),
+    /* @__PURE__ */ jsx(Separator4, {}),
+    /* @__PURE__ */ jsx("div", { className: "divide-y divide-[hsl(var(--border))]", children: NOTIFICATIONS.map((n) => /* @__PURE__ */ jsx(
+      NotifRow,
+      {
+        ...n,
+        checked: states[n.id],
+        onChange: (val) => setStates((s) => ({ ...s, [n.id]: val }))
+      },
+      n.id
+    )) })
+  ] });
+}
+var MEMBERS = [
+  { id: "1", name: "Jane Doe", email: "jane@acme.com", role: "Owner", initials: "JD" },
+  { id: "2", name: "Bob Smith", email: "bob@acme.com", role: "Admin", initials: "BS" },
+  { id: "3", name: "Alice Chen", email: "alice@acme.com", role: "Member", initials: "AC" },
+  { id: "4", name: "Tom Ray", email: "tom@acme.com", role: "Member", initials: "TR" },
+  { id: "5", name: "Sara Kim", email: "sara@acme.com", role: "Viewer", initials: "SK" }
+];
+var roleVariant = (role) => role === "Owner" ? "default" : role === "Admin" ? "secondary" : "outline";
+function WorkspaceMembers({ className }) {
+  const [query, setQuery] = useState("");
+  const [members, setMembers] = useState(MEMBERS);
+  const filtered = members.filter(
+    (m) => m.name.toLowerCase().includes(query.toLowerCase()) || m.email.toLowerCase().includes(query.toLowerCase())
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--card))]", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-[hsl(var(--border))]", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: "Members" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: [
+          members.length,
+          " members"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[hsl(var(--muted-foreground))]" }),
+        /* @__PURE__ */ jsx(Input, { className: "h-8 pl-8 text-xs w-48", placeholder: "Search members...", value: query, onChange: (e) => setQuery(e.target.value) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "divide-y divide-[hsl(var(--border))]", children: filtered.map((m) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [
+      /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: m.initials }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: m.name }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: m.email })
+      ] }),
+      /* @__PURE__ */ jsx(Badge, { variant: roleVariant(m.role), className: "text-[10px] px-1.5 py-0.5 shrink-0", children: m.role }),
+      m.role !== "Owner" && /* @__PURE__ */ jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7 shrink-0", onClick: () => setMembers((ms) => ms.filter((x) => x.id !== m.id)), children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" }) })
+    ] }, m.id)) })
+  ] });
+}
+function IntegrationCard({
+  icon,
+  name = "Slack",
+  description = "Send notifications and updates to your Slack workspace.",
+  connected = false,
+  className
+}) {
+  const [isConnected, setIsConnected] = useState(connected);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4 rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-4", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-[var(--radius)] bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]", children: icon ?? /* @__PURE__ */ jsx("span", { className: "text-base font-bold", children: name[0] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: name }),
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: isConnected ? "default" : "outline",
+            className: "text-[10px] px-1.5 py-0.5 shrink-0",
+            children: isConnected ? "Connected" : "Not connected"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mt-0.5 truncate", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: isConnected ? "outline" : "default",
+        className: "shrink-0",
+        onClick: () => setIsConnected((v) => !v),
+        children: isConnected ? "Disconnect" : "Connect"
+      }
+    )
+  ] });
+}
+var REACTIONS = ["\u{1F60A}", "\u{1F610}", "\u{1F615}", "\u{1F621}", "\u{1F929}"];
+function FeedbackModal({ onSubmit, className }) {
+  const [reaction, setReaction] = useState("");
+  const [text, setText] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const handleSubmit = () => {
+    onSubmit?.({ reaction, text });
+    setSubmitted(true);
+  };
+  if (submitted) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-3 py-8 px-6 text-center", className), children: [
+      /* @__PURE__ */ jsx("span", { className: "text-4xl", children: "\u{1F389}" }),
+      /* @__PURE__ */ jsx("p", { className: "font-semibold", children: "Thanks for your feedback!" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: "We'll use it to improve your experience." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 p-6", className), children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold", children: "Send Feedback" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))] mt-0.5", children: "How are you feeling about the product?" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: REACTIONS.map((r) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setReaction(r),
+        className: cn(
+          "flex h-10 w-10 items-center justify-center rounded-[var(--radius)] border text-xl transition-colors",
+          reaction === r ? "border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.1)]" : "border-[hsl(var(--border))] hover:bg-[hsl(var(--accent))]"
+        ),
+        children: r
+      },
+      r
+    )) }),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        placeholder: "Tell us more (optional)...",
+        value: text,
+        onChange: (e) => setText(e.target.value),
+        className: "resize-none",
+        rows: 4
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleSubmit, disabled: !reaction, children: "Submit" })
+    ] })
+  ] });
+}
+var PENDING = [
+  { email: "alex@startup.io", role: "Member" },
+  { email: "sam@startup.io", role: "Viewer" }
+];
+function InviteModal({ className }) {
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState("Member");
+  const [pending, setPending] = useState(PENDING);
+  const invite = () => {
+    if (!email.trim())
+      return;
+    setPending((p) => [...p, { email: email.trim(), role }]);
+    setEmail("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 p-6", className), children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold", children: "Invite People" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))] mt-0.5", children: "Invite team members to collaborate." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          className: "flex-1 h-9 text-sm",
+          placeholder: "colleague@company.com",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          onKeyDown: (e) => e.key === "Enter" && invite()
+        }
+      ),
+      /* @__PURE__ */ jsxs(Select, { value: role, onValueChange: setRole, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 w-28 text-sm", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: ["Admin", "Member", "Viewer"].map((r) => /* @__PURE__ */ jsx(SelectItem, { value: r, children: r }, r)) })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", className: "h-9", onClick: invite, children: "Send" })
+    ] }),
+    pending.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[hsl(var(--muted-foreground))]", children: "Pending invites" }),
+      /* @__PURE__ */ jsx("div", { className: "divide-y divide-[hsl(var(--border))] rounded-[var(--radius)] border border-[hsl(var(--border))]", children: pending.map((p, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [
+        /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[10px]", children: p.email[0].toUpperCase() }) }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm truncate", children: p.email }),
+        /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0.5 shrink-0", children: p.role }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setPending((ps) => ps.filter((_, j) => j !== i)), children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]" }) })
+      ] }, i)) })
+    ] })
+  ] });
+}
+var COLORS = ["bg-blue-500", "bg-green-500", "bg-yellow-500", "bg-purple-500", "bg-red-500", "bg-pink-500"];
+var INITIAL_TAGS = [
+  { id: "1", name: "Design", color: "bg-blue-500" },
+  { id: "2", name: "Engineering", color: "bg-green-500" },
+  { id: "3", name: "Marketing", color: "bg-yellow-500" },
+  { id: "4", name: "Research", color: "bg-purple-500" }
+];
+function ManageTagsModal({ className }) {
+  const [tags, setTags] = useState(INITIAL_TAGS);
+  const [newTag, setNewTag] = useState("");
+  const [colorIdx, setColorIdx] = useState(0);
+  const addTag = () => {
+    if (!newTag.trim())
+      return;
+    const id = `tag-${Date.now()}`;
+    setTags((t) => [...t, { id, name: newTag.trim(), color: COLORS[colorIdx % COLORS.length] }]);
+    setNewTag("");
+    setColorIdx((i) => i + 1);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 p-6", className), children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold", children: "Manage Tags" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))] mt-0.5", children: "Create and organize your tags." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("h-9 w-9 shrink-0 rounded-md cursor-pointer transition-opacity", COLORS[colorIdx % COLORS.length]),
+          onClick: () => setColorIdx((i) => i + 1),
+          title: "Click to change color"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          className: "flex-1 h-9 text-sm",
+          placeholder: "New tag name...",
+          value: newTag,
+          onChange: (e) => setNewTag(e.target.value),
+          onKeyDown: (e) => e.key === "Enter" && addTag()
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { size: "sm", className: "h-9", onClick: addTag, children: "Add" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: tags.map((tag) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-[var(--radius)] border border-[hsl(var(--border))] px-3 py-2", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("h-3 w-3 rounded-full shrink-0", tag.color) }),
+      /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children: tag.name }),
+      /* @__PURE__ */ jsx("button", { className: "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors", children: /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setTags((ts) => ts.filter((t) => t.id !== tag.id)),
+          className: "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors",
+          children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+        }
+      )
+    ] }, tag.id)) })
+  ] });
+}
+var USERS = [
+  { id: "1", name: "Jane Doe", email: "jane@acme.com", initials: "JD" },
+  { id: "2", name: "Bob Smith", email: "bob@acme.com", initials: "BS" },
+  { id: "3", name: "Alice Chen", email: "alice@acme.com", initials: "AC" },
+  { id: "4", name: "Tom Ray", email: "tom@acme.com", initials: "TR" },
+  { id: "5", name: "Sara Kim", email: "sara@acme.com", initials: "SK" },
+  { id: "6", name: "Mike Liu", email: "mike@acme.com", initials: "ML" }
+];
+function SelectUsersModal({ onConfirm, className }) {
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+  const filtered = USERS.filter(
+    (u) => u.name.toLowerCase().includes(query.toLowerCase()) || u.email.toLowerCase().includes(query.toLowerCase())
+  );
+  const toggle = (id) => setSelected((s) => {
+    const n = new Set(s);
+    n.has(id) ? n.delete(id) : n.add(id);
+    return n;
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "p-4 border-b border-[hsl(var(--border))]", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold mb-3", children: "Select Users" }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[hsl(var(--muted-foreground))]" }),
+        /* @__PURE__ */ jsx(Input, { className: "pl-8 h-8 text-sm", placeholder: "Search users...", value: query, onChange: (e) => setQuery(e.target.value) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-auto max-h-64 divide-y divide-[hsl(var(--border))]", children: filtered.map((u) => /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-3 px-4 py-3 hover:bg-[hsl(var(--accent))] transition-colors", children: [
+      /* @__PURE__ */ jsx(Checkbox, { checked: selected.has(u.id), onCheckedChange: () => toggle(u.id) }),
+      /* @__PURE__ */ jsx(Avatar, { className: "h-7 w-7", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: u.initials }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: u.name }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: u.email })
+      ] })
+    ] }, u.id)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-t border-[hsl(var(--border))]", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: [
+        selected.size,
+        " selected"
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", disabled: selected.size === 0, onClick: () => onConfirm?.(Array.from(selected)), children: "Confirm" })
+    ] })
+  ] });
+}
+function UserMenu({
+  name = "Jane Doe",
+  email = "jane@acme.com",
+  initials = "JD",
+  onProfile,
+  onSettings,
+  onBilling,
+  onSignOut,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: cn("flex items-center gap-2 rounded-[var(--radius)] px-2 py-1.5 text-sm transition-colors hover:bg-[hsl(var(--accent))] focus:outline-none", className), children: [
+      /* @__PURE__ */ jsx(Avatar, { className: "h-7 w-7", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: initials }) }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium max-w-[120px] truncate", children: name }),
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-[hsl(var(--muted-foreground))]" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-52", children: [
+      /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "font-normal", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: name }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: email })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onProfile, children: [
+        /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }),
+        "Profile"
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onSettings, children: [
+        /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }),
+        "Account Settings"
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onBilling, children: [
+        /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4" }),
+        "Billing"
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onSignOut, className: "text-[hsl(var(--destructive))] focus:text-[hsl(var(--destructive))]", children: [
+        /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
+        "Sign out"
+      ] })
+    ] })
+  ] });
+}
+var ORGS = [
+  { id: "1", name: "Acme Corp", slug: "acme", plan: "Pro" },
+  { id: "2", name: "Beta Labs", slug: "beta-labs", plan: "Starter" },
+  { id: "3", name: "Gamma Inc", slug: "gamma", plan: "Free" }
+];
+function OrgMenu({
+  currentOrgId = "1",
+  onSwitch,
+  onCreateOrg,
+  className
+}) {
+  const current = ORGS.find((o) => o.id === currentOrgId) ?? ORGS[0];
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: cn("flex items-center gap-2 rounded-[var(--radius)] px-2 py-1.5 text-sm transition-colors hover:bg-[hsl(var(--accent))] focus:outline-none", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded bg-[hsl(var(--primary))] text-[10px] font-bold text-[hsl(var(--primary-foreground))]", children: current.name[0] }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium max-w-[120px] truncate", children: current.name }),
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-[hsl(var(--muted-foreground))]" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-52", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Organizations" }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      ORGS.map((org) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => onSwitch?.(org.id), className: "justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded bg-[hsl(var(--muted))] text-[10px] font-bold", children: org.name[0] }),
+          /* @__PURE__ */ jsx("span", { children: org.name })
+        ] }),
+        org.id === currentOrgId && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-[hsl(var(--primary))]" })
+      ] }, org.id)),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onCreateOrg, children: [
+        /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+        "Create organization"
+      ] })
+    ] })
+  ] });
+}
+var ROLES = [
+  { value: "owner", label: "Owner", description: "Full control over the workspace" },
+  { value: "admin", label: "Admin", description: "Manage members and settings" },
+  { value: "member", label: "Member", description: "Can create and edit content" },
+  { value: "viewer", label: "Viewer", description: "Read-only access" }
+];
+function RolesMenu({ value = "member", onChange, className }) {
+  const [role, setRole] = useState(value);
+  const current = ROLES.find((r) => r.value === role) ?? ROLES[2];
+  const handleChange = (v) => {
+    setRole(v);
+    onChange?.(v);
+  };
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: cn("gap-1.5", className), children: [
+      current.label,
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 opacity-60" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Change role" }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: role, onValueChange: handleChange, children: ROLES.map((r) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: r.value, className: "items-start py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "ml-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-none", children: r.label }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mt-0.5", children: r.description })
+      ] }) }, r.value)) })
+    ] })
+  ] });
+}
+function MetricCard({ label = "Total Revenue", value = "$48,295", change = "+12.5%", trend = "up", className }) {
+  const TrendIcon = trend === "up" ? TrendingUp : TrendingDown;
+  const trendColor = trend === "up" ? "text-green-600" : "text-red-500";
+  return /* @__PURE__ */ jsx(Card, { className: cn("", className), children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: label }),
+    /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold mt-1", children: value }),
+    /* @__PURE__ */ jsxs("p", { className: cn("flex items-center gap-1 text-sm mt-1", trendColor), children: [
+      /* @__PURE__ */ jsx(TrendIcon, { className: "h-4 w-4" }),
+      change,
+      " from last month"
+    ] })
+  ] }) });
+}
+function MetricCardWithIcon({ icon, iconColor = "bg-[hsl(var(--primary)/0.1)] text-[hsl(var(--primary))]", ...props }) {
+  const TrendIcon = (props.trend ?? "up") === "up" ? TrendingUp : TrendingDown;
+  const trendColor = (props.trend ?? "up") === "up" ? "text-green-600" : "text-red-500";
+  return /* @__PURE__ */ jsx(Card, { className: cn("", props.className), children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: props.label ?? "Total Revenue" }),
+      /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold mt-1", children: props.value ?? "$48,295" }),
+      /* @__PURE__ */ jsxs("p", { className: cn("flex items-center gap-1 text-sm mt-1", trendColor), children: [
+        /* @__PURE__ */ jsx(TrendIcon, { className: "h-4 w-4" }),
+        props.change ?? "+12.5%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-[var(--radius)]", iconColor), children: icon ?? /* @__PURE__ */ jsx(TrendingUp, { className: "h-5 w-5" }) })
+  ] }) }) });
+}
+function MetricCardWithButton({ actionLabel = "View details", onAction, ...props }) {
+  const TrendIcon = (props.trend ?? "up") === "up" ? TrendingUp : TrendingDown;
+  const trendColor = (props.trend ?? "up") === "up" ? "text-green-600" : "text-red-500";
+  return /* @__PURE__ */ jsx(Card, { className: cn("", props.className), children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: props.label ?? "Total Revenue" }),
+    /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold mt-1", children: props.value ?? "$48,295" }),
+    /* @__PURE__ */ jsxs("p", { className: cn("flex items-center gap-1 text-sm mt-1 mb-3", trendColor), children: [
+      /* @__PURE__ */ jsx(TrendIcon, { className: "h-4 w-4" }),
+      props.change ?? "+12.5%"
+    ] }),
+    /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", className: "w-full", onClick: onAction, children: actionLabel })
+  ] }) });
+}
+var INITIAL_MESSAGES = [
+  { id: "1", author: "Alice Chen", initials: "AC", text: "Hey team, just pushed the new design files to Figma.", time: "9:41 AM" },
+  { id: "2", author: "Bob Smith", initials: "BS", text: "Awesome! I'll take a look and share feedback by EOD.", time: "9:43 AM" },
+  { id: "3", author: "You", initials: "JD", text: "Looks great, the new color palette really pops!", time: "9:45 AM", self: true },
+  { id: "4", author: "Alice Chen", initials: "AC", text: "Thanks! Let's sync tomorrow to go through the comments.", time: "9:47 AM" }
+];
+function ChatBubble({ msg }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-2.5", msg.self && "flex-row-reverse"), children: [
+    /* @__PURE__ */ jsx(Avatar, { className: "h-7 w-7 shrink-0 mt-0.5", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: msg.initials }) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("max-w-[70%]", msg.self && "items-end flex flex-col"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 mb-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: msg.author }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[hsl(var(--muted-foreground))]", children: msg.time })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: cn(
+        "rounded-[var(--radius)] px-3 py-2 text-sm",
+        msg.self ? "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]" : "bg-[hsl(var(--muted))]"
+      ), children: msg.text })
+    ] })
+  ] });
+}
+function ChatDetail({ className }) {
+  const [messages, setMessages] = useState(INITIAL_MESSAGES);
+  const [input, setInput] = useState("");
+  const send = () => {
+    if (!input.trim())
+      return;
+    const now = (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    setMessages((m) => [...m, { id: `${Date.now()}`, author: "You", initials: "JD", text: input.trim(), time: now, self: true }]);
+    setInput("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-[480px] flex-col overflow-hidden rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--card))]", className), children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex items-center gap-3 border-b border-[hsl(var(--border))] px-4 py-3", children: [
+      /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: "AC" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Design Team" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: "4 members" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4 space-y-4", children: messages.map((m) => /* @__PURE__ */ jsx(ChatBubble, { msg: m }, m.id)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t border-[hsl(var(--border))] p-3", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          className: "flex-1 h-9 text-sm",
+          placeholder: "Type a message...",
+          value: input,
+          onChange: (e) => setInput(e.target.value),
+          onKeyDown: (e) => e.key === "Enter" && send()
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { size: "icon", className: "h-9 w-9 shrink-0", onClick: send, children: /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" }) })
+    ] })
+  ] });
+}
+var MESSAGES = [
+  { id: "1", name: "Alice Chen", initials: "AC", preview: "Just pushed the new design files to Figma.", time: "9:41 AM", unread: true },
+  { id: "2", name: "Bob Smith", initials: "BS", preview: "I'll take a look and share feedback by EOD.", time: "9:43 AM", unread: true },
+  { id: "3", name: "Tom Ray", initials: "TR", preview: "Can we reschedule the standup to 10am?", time: "Yesterday" },
+  { id: "4", name: "Sara Kim", initials: "SK", preview: "Shipped the new auth flow. Ready for QA.", time: "Yesterday" },
+  { id: "5", name: "Mike Liu", initials: "ML", preview: "The latest metrics look promising \u{1F4C8}", time: "Mon" }
+];
+function MessageRow({ msg }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3 hover:bg-[hsl(var(--accent))] cursor-pointer transition-colors", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+      /* @__PURE__ */ jsx(Avatar, { className: "h-9 w-9", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: msg.initials }) }),
+      msg.unread && /* @__PURE__ */ jsx("span", { className: "absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full bg-[hsl(var(--primary))] ring-2 ring-[hsl(var(--card))]" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: cn("text-sm truncate", msg.unread ? "font-semibold" : "font-medium"), children: msg.name }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))] shrink-0", children: msg.time })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: cn("text-xs mt-0.5 truncate", msg.unread ? "text-[hsl(var(--foreground))]" : "text-[hsl(var(--muted-foreground))]"), children: msg.preview })
+    ] })
+  ] });
+}
+function MessagesCard({ className }) {
+  return /* @__PURE__ */ jsxs(Card, { className: cn("overflow-hidden", className), children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "px-4 py-3 border-b border-[hsl(var(--border))]", children: /* @__PURE__ */ jsxs(CardTitle, { className: "text-sm font-semibold flex items-center justify-between", children: [
+      "Messages",
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-[hsl(var(--primary)/0.1)] text-[hsl(var(--primary))] font-medium", children: "2 new" })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "divide-y divide-[hsl(var(--border))]", children: MESSAGES.map((m) => /* @__PURE__ */ jsx(MessageRow, { msg: m }, m.id)) })
+  ] });
+}
+var FILES = [
+  { id: "1", name: "design-system.fig", type: "figma", size: "14.2 MB", modified: "Mar 12" },
+  { id: "2", name: "hero-banner.png", type: "image", size: "3.8 MB", modified: "Mar 11" },
+  { id: "3", name: "api-spec.yaml", type: "code", size: "42 KB", modified: "Mar 10" },
+  { id: "4", name: "demo-video.mp4", type: "video", size: "128 MB", modified: "Mar 9" },
+  { id: "5", name: "assets.zip", type: "archive", size: "56 MB", modified: "Mar 8" },
+  { id: "6", name: "meeting-notes.pdf", type: "pdf", size: "1.1 MB", modified: "Mar 7" }
+];
+var TYPE_ICON = {
+  figma: FileText,
+  image: Image,
+  code: FileCode,
+  video: Film,
+  archive: Archive,
+  pdf: FileText
+};
+var TYPE_COLOR = {
+  figma: "text-purple-500",
+  image: "text-green-500",
+  code: "text-blue-500",
+  video: "text-red-500",
+  archive: "text-yellow-500",
+  pdf: "text-orange-500"
+};
+function FileCard({ file }) {
+  const Icon2 = TYPE_ICON[file.type] ?? File;
+  return /* @__PURE__ */ jsx(Card, { className: "cursor-pointer hover:shadow-md transition-shadow", children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-[var(--radius)] bg-[hsl(var(--muted))] mb-3", TYPE_COLOR[file.type]), children: /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5" }) }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: file.name }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: file.size }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: file.modified })
+    ] })
+  ] }) });
+}
+function FileCards({ files = FILES, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-3", className), style: { gridTemplateColumns: "repeat(auto-fill, minmax(min(100%,160px),1fr))" }, children: files.map((f) => /* @__PURE__ */ jsx(FileCard, { file: f }, f.id)) });
+}
+var FILES2 = [
+  { id: "1", name: "design-system.fig", type: "Figma", size: "14.2 MB", modified: "Mar 12, 2024" },
+  { id: "2", name: "hero-banner.png", type: "PNG Image", size: "3.8 MB", modified: "Mar 11, 2024" },
+  { id: "3", name: "api-spec.yaml", type: "YAML", size: "42 KB", modified: "Mar 10, 2024" },
+  { id: "4", name: "demo-video.mp4", type: "MP4 Video", size: "128 MB", modified: "Mar 9, 2024" },
+  { id: "5", name: "assets.zip", type: "ZIP Archive", size: "56 MB", modified: "Mar 8, 2024" }
+];
+var TYPE_ICON2 = {
+  Figma: FileText,
+  "PNG Image": Image,
+  YAML: FileCode,
+  "MP4 Video": Film,
+  "ZIP Archive": Archive
+};
+function FileRow({ file, onDelete }) {
+  const Icon2 = TYPE_ICON2[file.type] ?? FileText;
+  return /* @__PURE__ */ jsxs("tr", { className: "border-b border-[hsl(var(--border))] last:border-0 hover:bg-[hsl(var(--accent)/0.5)] transition-colors", children: [
+    /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+      /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 shrink-0 text-[hsl(var(--muted-foreground))]" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: file.name })
+    ] }) }),
+    /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm text-[hsl(var(--muted-foreground))]", children: file.type }),
+    /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm text-[hsl(var(--muted-foreground))]", children: file.size }),
+    /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm text-[hsl(var(--muted-foreground))]", children: file.modified }),
+    /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-right", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "icon", variant: "ghost", className: "h-7 w-7", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+          /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
+          "Download"
+        ] }),
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onDelete, className: "text-[hsl(var(--destructive))]", children: [
+          /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
+          "Delete"
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+function FilesList({ className }) {
+  const [files, setFiles] = React14.useState(FILES2);
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-[var(--radius)] border border-[hsl(var(--border))] overflow-hidden", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+    /* @__PURE__ */ jsx("thead", { className: "bg-[hsl(var(--muted)/0.5)]", children: /* @__PURE__ */ jsx("tr", { children: ["Name", "Type", "Size", "Modified", ""].map((h) => /* @__PURE__ */ jsx("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-[hsl(var(--muted-foreground))]", children: h }, h)) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: files.map((f) => /* @__PURE__ */ jsx(FileRow, { file: f, onDelete: () => setFiles((fs) => fs.filter((x) => x.id !== f.id)) }, f.id)) })
+  ] }) });
+}
+var PRIORITY_COLOR = {
+  High: "bg-red-500/10 text-red-600 border-red-200",
+  Medium: "bg-yellow-500/10 text-yellow-600 border-yellow-200",
+  Low: "bg-green-500/10 text-green-600 border-green-200"
+};
+function TaskCard({
+  title = "Redesign onboarding flow",
+  description = "Update the user onboarding experience with the new design language.",
+  assigneeInitials = "AC",
+  dueDate = "Mar 20",
+  priority = "High",
+  className
+}) {
+  return /* @__PURE__ */ jsx(Card, { className: cn("cursor-pointer hover:shadow-md transition-shadow", className), children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4 space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold leading-tight", children: title }),
+      /* @__PURE__ */ jsx("span", { className: cn("text-[10px] px-1.5 py-0.5 rounded-full border font-medium shrink-0", PRIORITY_COLOR[priority]), children: priority })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] leading-relaxed line-clamp-2", children: description }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[10px]", children: assigneeInitials }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-[hsl(var(--muted-foreground))]", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "h-3 w-3" }),
+        dueDate
+      ] })
+    ] })
+  ] }) });
+}
+var LABEL_COLORS = ["bg-blue-100 text-blue-700", "bg-purple-100 text-purple-700", "bg-green-100 text-green-700"];
+function TaskCardWithLabels({
+  labels = ["Design", "Frontend"],
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Card, { className: cn("cursor-pointer hover:shadow-md transition-shadow", props.className), children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4 space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold leading-tight", children: props.title ?? "Redesign onboarding flow" }),
+      /* @__PURE__ */ jsx("span", { className: cn("text-[10px] px-1.5 py-0.5 rounded-full border font-medium shrink-0", PRIORITY_COLOR[props.priority ?? "High"]), children: props.priority ?? "High" })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-[hsl(var(--muted-foreground))] leading-relaxed line-clamp-2", children: props.description ?? "Update the user onboarding experience with the new design language." }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: labels.map((l, i) => /* @__PURE__ */ jsx("span", { className: cn("text-[10px] px-1.5 py-0.5 rounded-full font-medium", LABEL_COLORS[i % LABEL_COLORS.length]), children: l }, l)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[10px]", children: props.assigneeInitials ?? "AC" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-[hsl(var(--muted-foreground))]", children: [
+        /* @__PURE__ */ jsx(Calendar, { className: "h-3 w-3" }),
+        props.dueDate ?? "Mar 20"
+      ] })
+    ] })
+  ] }) });
+}
+var TASKS = [
+  { id: "1", title: "Redesign onboarding flow", assignee: "AC", priority: "High", status: "In Progress", done: false },
+  { id: "2", title: "Fix authentication bug", assignee: "BS", priority: "High", status: "In Progress", done: false },
+  { id: "3", title: "Write API documentation", assignee: "JD", priority: "Medium", status: "Todo", done: false },
+  { id: "4", title: "Add dark mode support", assignee: "TR", priority: "Low", status: "Todo", done: false },
+  { id: "5", title: "Setup CI/CD pipeline", assignee: "SK", priority: "Medium", status: "Done", done: true },
+  { id: "6", title: "Deploy to staging", assignee: "ML", priority: "Low", status: "Done", done: true }
+];
+var PRIORITY_DOT = {
+  High: "bg-red-500",
+  Medium: "bg-yellow-500",
+  Low: "bg-green-500"
+};
+var SECTIONS = ["In Progress", "Todo", "Done"];
+function TaskRow({ task, onToggle }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-3 py-2.5 hover:bg-[hsl(var(--accent)/0.5)] rounded-md transition-colors", children: [
+    /* @__PURE__ */ jsx(Checkbox, { checked: task.done, onCheckedChange: onToggle }),
+    /* @__PURE__ */ jsx("span", { className: cn("flex-1 text-sm", task.done && "line-through text-[hsl(var(--muted-foreground))]"), children: task.title }),
+    /* @__PURE__ */ jsx("span", { className: cn("h-2 w-2 rounded-full shrink-0", PRIORITY_DOT[task.priority]), title: task.priority }),
+    /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6 shrink-0", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[10px]", children: task.assignee }) })
+  ] });
+}
+function SortableTaskList({ className }) {
+  const [tasks, setTasks] = useState(TASKS);
+  const toggle = (id) => setTasks((ts) => ts.map((t) => t.id === id ? { ...t, done: !t.done } : t));
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-[var(--radius)] border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-4 space-y-4", className), children: SECTIONS.map((section) => {
+    const items = tasks.filter((t) => t.status === section);
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wide", children: section }),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: [
+          "(",
+          items.length,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: items.map((task) => /* @__PURE__ */ jsx(TaskRow, { task, onToggle: () => toggle(task.id) }, task.id)) })
+    ] }, section);
+  }) });
+}
+
+export { AppShell, AppShellMain, AppShellSidebar, AreaChart, ArrayField, AutoForm, Avatar, AvatarFallback, AvatarImage, Badge, Banner, BarChart, Beacon, BlinkUIProvider, Breadcrumb, BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator, BulkActions, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatDetail, Checkbox, CommandBar, CommandBarEmpty, CommandBarGroup, CommandBarItem, CommandItem, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataTable, DataTableColumnHeader, DataTablePagination, DataTableToolbar, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateIcon, FeedbackModal, Field, FieldDescription, FieldError, FieldLabel, FileCards, FileUpload, FileUploadPreview, FilesList, FilterBadge, Filters, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HStack, HotkeyBadge, Hotkeys, IconBadge, Input, IntegrationCard, InviteModal, Kanban, KanbanCard, KanbanColumn, LineChart, LoadingOverlay, ManageTagsModal, MessagesCard, MetricCard, MetricCardWithButton, MetricCardWithIcon, Navbar, NavbarBrand, NavbarContent, NavbarItem, NotificationSettings, ObjectField, OrgMenu, Page, PageActions, PageBody, PageDescription, PageHeader, PageTitle, PasswordInput, Persona, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, PropertyItem, PropertyList, RadioGroup, RadioGroupItem, ResizeBox, ResizeHandle, RolesMenu, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectUsersModal, SelectValue, Separator4 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarItem, SidebarLayoutDashboard, SidebarLayoutGroups, SidebarLayoutMinimal, SidebarLayoutSearch, SidebarLayoutUser, SidebarSeparator, Skeleton, Slider, SortableTaskList, Sparkline, SplitPage, SplitPageDetail, SplitPageList, Stack, StackedLayoutBranded, StackedLayoutTabs, Stat, StatGroup, StepForm, StepFormNavigation, StepFormStep, Stepper, StructuredList, StructuredListItem, StructuredListSection, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TaskCard, TaskCardWithLabels, Textarea, Timeline, TimelineConnector, TimelineContent, TimelineItem, Toaster, ToggleButton, ToggleButtonGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, TourStep, UserMenu, VStack, WorkspaceMembers, badgeVariants, buttonVariants, cn, useAppShell, useBlinkUI, useCommandBar, useTour };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map