@hanzo/ui 5.3.34 → 5.3.35

package/dist/index.mjs

@@ -1,15 +1,16 @@
 "use client";
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { Loader2, ArrowLeft, ArrowRight, Dot, ChevronRight, Check, Circle, ChevronDown, MoreHorizontal, X, Search, EyeOffIcon, EyeIcon, SearchIcon, XIcon, GripVertical, CheckCircle2, CopyIcon, SunMedium, Moon, ArrowUpRight, Menu } from 'lucide-react';
+import { Loader2, ArrowLeft, ArrowRight, Dot, ChevronRight, Check, Circle, ChevronDown, VolumeX, Volume2, Maximize, Minimize2, Maximize2, X, MoreHorizontal, Search, EyeOffIcon, EyeIcon, SearchIcon, XIcon, GripVertical, CheckCircle2, CopyIcon, SunMedium, Moon, ArrowUpRight, Menu } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import * as React2 from 'react';
-import React2__default, { useRef, useImperativeHandle, useEffect, useState, cloneElement, useMemo } from 'react';
+import * as React19 from 'react';
+import React19__default, { useRef, useImperativeHandle, useEffect, useState, cloneElement, useMemo } from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import useEmblaCarousel from 'embla-carousel-react';
 import { Command as Command$1 } from 'cmdk';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
@@ -17,7 +18,6 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import { OTPInput, OTPInputContext } from 'input-otp';
 import * as MenubarPrimitive from '@radix-ui/react-menubar';
@@ -96,15 +96,15 @@ var AccordionContent = /* @__PURE__ */ __name(({
 ), "AccordionContent");
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
         // Keep the additional Hanzo variants for backward compatibility
         primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
@@ -112,10 +112,12 @@ var buttonVariants = cva(
         linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
       }
     },
     defaultVariants: {
@@ -124,12 +126,15 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React2.forwardRef(
-  ({ className, variant, size, asChild = false, isLoading = false, children, ...props }, ref) => {
+var Button = React19.forwardRef(
+  ({ className, variant = "default", size = "default", asChild = false, isLoading = false, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsxs(
       Comp,
       {
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
         className: cn(buttonVariants({ variant, size, className })),
         ref,
         ...props,
@@ -137,10 +142,10 @@ var Button = React2.forwardRef(
           isLoading ? /* @__PURE__ */ jsx(
             Loader2,
             {
-              className: cn("h-4 w-4 animate-spin", size !== "icon" && "mr-2")
+              className: cn("h-4 w-4 animate-spin", size !== "icon" && size !== "icon-sm" && size !== "icon-lg" && "mr-2")
             }
           ) : null,
-          isLoading && size === "icon" ? null : children
+          isLoading && (size === "icon" || size === "icon-sm" || size === "icon-lg") ? null : children
         ]
       }
     );
@@ -266,16 +271,17 @@ var AlertDialogCancel = /* @__PURE__ */ __name(({
 ), "AlertDialogCancel");
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 var alertVariants = cva(
-  "[&>svg]:text-text-default relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7",
+  "group/alert relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7 [&>svg]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-bg-tertiary text-text-default",
-        info: "text-text-secondary [&>svg]:text-text-secondary bg-gray-250 border-gray-100 border-gray-200",
-        destructive: "border-[#4d0408] bg-[#2d0607] text-[#ff9ea1] [&>svg]:text-[#ff9ea1]",
-        warning: "border-yellow-800 bg-yellow-900 text-yellow-400 [&>svg]:text-yellow-400",
-        success: "border-green-800 bg-green-900 text-green-400 [&>svg]:text-green-400",
-        download: "border-gray-800 bg-gray-900 text-cyan-400 [&>svg]:text-cyan-400"
+        default: "bg-background text-foreground [&>svg]:text-foreground",
+        destructive: "border-destructive/50 text-destructive bg-destructive/10 dark:border-destructive [&>svg]:text-destructive",
+        // Hanzo-specific variants for backward compatibility
+        info: "text-muted-foreground bg-muted border-border [&>svg]:text-muted-foreground",
+        warning: "border-yellow-500/50 bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-400",
+        success: "border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-400 [&>svg]:text-green-600 dark:[&>svg]:text-green-400",
+        download: "border-cyan-500/50 bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 [&>svg]:text-cyan-600 dark:[&>svg]:text-cyan-400"
       }
     },
     defaultVariants: {
@@ -283,38 +289,65 @@ var alertVariants = cva(
     }
   }
 );
-var Alert = /* @__PURE__ */ __name(({ className, variant, ref, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(alertVariants({ variant }), className),
-    ref,
-    role: "alert",
-    ...props
-  }
-), "Alert");
-Alert.displayName = "Alert";
-var AlertTitle = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
-  "h5",
-  {
-    className: cn("mb-1 leading-none font-medium tracking-tight", className),
-    ref,
-    ...props
-  }
-), "AlertTitle");
-AlertTitle.displayName = "AlertTitle";
-var AlertDescription = /* @__PURE__ */ __name(({
+function Alert({
   className,
-  ref,
+  variant = "default",
   ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn("text-sm [&_p]:leading-relaxed", className),
-    ref,
-    ...props
-  }
-), "AlertDescription");
-AlertDescription.displayName = "AlertDescription";
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert",
+      "data-variant": variant,
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+__name(Alert, "Alert");
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn(
+        "mb-1 leading-none font-medium tracking-tight [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(AlertTitle, "AlertTitle");
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn(
+        "text-sm [&_p]:leading-relaxed [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(AlertDescription, "AlertDescription");
+function AlertAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-action",
+      className: cn("mt-3 flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+__name(AlertAction, "AlertAction");
 var Avatar = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
@@ -432,63 +465,180 @@ var BreadcrumbEllipsis = /* @__PURE__ */ __name(({
   }
 ), "BreadcrumbEllipsis");
 BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-var Card = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
-  "div",
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(Card, "Card");
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(CardHeader, "CardHeader");
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+__name(CardTitle, "CardTitle");
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+__name(CardDescription, "CardDescription");
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(CardAction, "CardAction");
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+__name(CardContent, "CardContent");
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      ...props
+    }
+  );
+}
+__name(CardFooter, "CardFooter");
+var Separator = /* @__PURE__ */ __name(({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  SeparatorPrimitive.Root,
   {
     className: cn(
-      "bg-card text-card-foreground rounded-lg border shadow-xs",
+      "bg-divider shrink-0",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
       className
     ),
-    ref,
-    ...props
-  }
-), "Card");
-Card.displayName = "Card";
-var CardHeader = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ref,
+    decorative,
+    orientation,
     ...props
   }
-), "CardHeader");
-CardHeader.displayName = "CardHeader";
-var CardTitle = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
-  "h3",
+), "Separator");
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+var separator_default = Separator;
+var buttonGroupVariants = cva(
+  'flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*="w-"])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2',
   {
-    className: cn(
-      "text-2xl leading-none font-semibold tracking-tight",
-      className
-    ),
-    ref,
-    ...props
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
   }
-), "CardTitle");
-CardTitle.displayName = "CardTitle";
-var CardDescription = /* @__PURE__ */ __name(({
+);
+function ButtonGroup({
   className,
-  ref,
+  orientation,
   ...props
-}) => /* @__PURE__ */ jsx(
-  "p",
-  {
-    className: cn("text-text-secondary text-sm", className),
-    ref,
-    ...props
-  }
-), "CardDescription");
-CardDescription.displayName = "CardDescription";
-var CardContent = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("p-6 pt-0", className), ref, ...props }), "CardContent");
-CardContent.displayName = "CardContent";
-var CardFooter = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn("flex items-center p-6 pt-0", className),
-    ref,
-    ...props
-  }
-), "CardFooter");
-CardFooter.displayName = "CardFooter";
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+__name(ButtonGroup, "ButtonGroup");
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        'bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4',
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(ButtonGroupText, "ButtonGroupText");
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "button-group-separator",
+      orientation,
+      className: cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(ButtonGroupSeparator, "ButtonGroupSeparator");
 
 // util/copy-to-clipboard.ts
 async function copyToClipboard(text) {
@@ -552,15 +702,15 @@ function constrain(value, minOrConstrainTo, max) {
   throw new Error("Invalid parameters for constrain function");
 }
 __name(constrain, "constrain");
-var CarouselContext = React2.createContext(null);
+var CarouselContext = React19.createContext(null);
 var useCarousel = /* @__PURE__ */ __name(() => {
-  const service = React2.useContext(CarouselContext);
+  const service = React19.useContext(CarouselContext);
   if (!service) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
   return service;
 }, "useCarousel");
-var Carousel = React2.forwardRef(
+var Carousel = React19.forwardRef(
   ({
     orientation = "horizontal",
     options,
@@ -572,9 +722,9 @@ var Carousel = React2.forwardRef(
     ...props
   }, ref) => {
     const [carouselRef, api] = useEmblaCarousel({ ...options, axis: orientation === "horizontal" ? "x" : "y" }, plugins);
-    const [canScrollPrev, setCanScrollPrev] = React2.useState(false);
-    const [canScrollNext, setCanScrollNext] = React2.useState(false);
-    const onSelect = React2.useCallback((api2) => {
+    const [canScrollPrev, setCanScrollPrev] = React19.useState(false);
+    const [canScrollNext, setCanScrollNext] = React19.useState(false);
+    const onSelect = React19.useCallback((api2) => {
       if (!api2) {
         return;
       }
@@ -584,13 +734,13 @@ var Carousel = React2.forwardRef(
         onCarouselSelect(api2);
       }
     }, []);
-    const scrollPrev = React2.useCallback(() => {
+    const scrollPrev = React19.useCallback(() => {
       api?.scrollPrev();
     }, [api]);
-    const scrollNext = React2.useCallback(() => {
+    const scrollNext = React19.useCallback(() => {
       api?.scrollNext();
     }, [api]);
-    const handleKeyDown = React2.useCallback((event) => {
+    const handleKeyDown = React19.useCallback((event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
         scrollPrev();
@@ -599,13 +749,13 @@ var Carousel = React2.forwardRef(
         scrollNext();
       }
     }, [scrollPrev, scrollNext]);
-    React2.useEffect(() => {
+    React19.useEffect(() => {
       if (!api || !setApi) {
         return;
       }
       setApi(api);
     }, [api, setApi]);
-    React2.useEffect(() => {
+    React19.useEffect(() => {
       if (!api) {
         return;
       }
@@ -647,7 +797,7 @@ var Carousel = React2.forwardRef(
   }
 );
 Carousel.displayName = "Carousel";
-var CarouselContent = React2.forwardRef(({ className, ...props }, ref) => {
+var CarouselContent = React19.forwardRef(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel();
   return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", "data-vaul-no-drag": true, children: /* @__PURE__ */ jsx(
     "div",
@@ -663,7 +813,7 @@ var CarouselContent = React2.forwardRef(({ className, ...props }, ref) => {
   ) });
 });
 CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React2.forwardRef(({ className, ...props }, ref) => {
+var CarouselItem = React19.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useCarousel();
   return /* @__PURE__ */ jsx(
     "div",
@@ -682,7 +832,7 @@ var CarouselItem = React2.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React2.forwardRef(({ className, variant = "ghost", size = "icon", ...props }, ref) => {
+var CarouselPrevious = React19.forwardRef(({ className, variant = "ghost", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxs(
     button_default,
@@ -706,7 +856,7 @@ var CarouselPrevious = React2.forwardRef(({ className, variant = "ghost", size =
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React2.forwardRef(({ className, variant = "ghost", size = "icon", ...props }, ref) => {
+var CarouselNext = React19.forwardRef(({ className, variant = "ghost", size = "icon", ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
   return /* @__PURE__ */ jsxs(
     button_default,
@@ -730,112 +880,145 @@ var CarouselNext = React2.forwardRef(({ className, variant = "ghost", size = "ic
   );
 });
 CarouselNext.displayName = "CarouselNext";
-var Dialog = SheetPrimitive.Root;
-var DialogTrigger = SheetPrimitive.Trigger;
-var DialogPortal = SheetPrimitive.Portal;
-var DialogOverlay = /* @__PURE__ */ __name(({
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+__name(Dialog, "Dialog");
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+__name(DialogTrigger, "DialogTrigger");
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+__name(DialogPortal, "DialogPortal");
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+__name(DialogClose, "DialogClose");
+function DialogOverlay({
   className,
   ...props
-}) => /* @__PURE__ */ jsx(
-  SheetPrimitive.Overlay,
-  {
-    className: cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50",
-      "bg-bg-dark/90",
-      className
-    ),
-    ...props
-  }
-), "DialogOverlay");
-DialogOverlay.displayName = SheetPrimitive.Overlay.displayName;
-var DialogContent = /* @__PURE__ */ __name(({
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 isolate z-50",
+        "bg-black/80",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(DialogOverlay, "DialogOverlay");
+function DialogContent({
   className,
   children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      SheetPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg duration-200",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon-sm",
+              className: "absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none",
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "size-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+__name(DialogContent, "DialogContent");
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-1.5 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+__name(DialogHeader, "DialogHeader");
+function DialogFooter({
+  className,
   showCloseButton = false,
+  children,
   ...props
-}) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs(
-    SheetPrimitive.Content,
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
+      "data-slot": "dialog-footer",
       className: cn(
-        "bg-bg-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 border-divider fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs(
-          SheetPrimitive.Close,
-          {
-            className: cn(
-              "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-text-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
-              !showCloseButton && "hidden"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-            ]
-          }
-        )
+        showCloseButton && /* @__PURE__ */ jsx(SheetPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Close" }) })
       ]
     }
-  )
-] }), "DialogContent");
-DialogContent.displayName = SheetPrimitive.Content.displayName;
-var DialogHeader = /* @__PURE__ */ __name(({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-), "DialogHeader");
-DialogHeader.displayName = "DialogHeader";
-var DialogFooter = /* @__PURE__ */ __name(({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    ),
-    ...props
-  }
-), "DialogFooter");
-DialogFooter.displayName = "DialogFooter";
-var DialogTitle = /* @__PURE__ */ __name(({
+  );
+}
+__name(DialogFooter, "DialogFooter");
+function DialogTitle({
   className,
   ...props
-}) => /* @__PURE__ */ jsx(
-  SheetPrimitive.Title,
-  {
-    className: cn(
-      "text-lg leading-none font-semibold tracking-tight",
-      className
-    ),
-    ...props
-  }
-), "DialogTitle");
-DialogTitle.displayName = SheetPrimitive.Title.displayName;
-var DialogDescription = /* @__PURE__ */ __name(({
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold tracking-tight", className),
+      ...props
+    }
+  );
+}
+__name(DialogTitle, "DialogTitle");
+function DialogDescription({
   className,
   ...props
-}) => /* @__PURE__ */ jsx(
-  SheetPrimitive.Description,
-  {
-    className: cn("text-text-secondary text-sm", className),
-    ...props
-  }
-), "DialogDescription");
-DialogDescription.displayName = SheetPrimitive.Description.displayName;
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+__name(DialogDescription, "DialogDescription");
 var Command = /* @__PURE__ */ __name(({
   className,
   ...props
@@ -1195,6 +1378,103 @@ var DrawerDescription = /* @__PURE__ */ __name(({
   }
 ), "DrawerDescription");
 DrawerDescription.displayName = Drawer$1.Description.displayName;
+function Empty({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty",
+      className: cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(Empty, "Empty");
+function EmptyHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-header",
+      className: cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(EmptyHeader, "EmptyHeader");
+var emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: 'bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*="size-"])]:size-6'
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-icon",
+      "data-variant": variant,
+      className: cn(emptyMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+__name(EmptyMedia, "EmptyMedia");
+function EmptyTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-title",
+      className: cn("text-lg font-medium tracking-tight", className),
+      ...props
+    }
+  );
+}
+__name(EmptyTitle, "EmptyTitle");
+function EmptyDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-description",
+      className: cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(EmptyDescription, "EmptyDescription");
+function EmptyContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-content",
+      className: cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(EmptyContent, "EmptyContent");
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
@@ -1346,27 +1626,7 @@ var DropdownMenuShortcut = /* @__PURE__ */ __name(({
   );
 }, "DropdownMenuShortcut");
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var Separator3 = /* @__PURE__ */ __name(({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  SeparatorPrimitive.Root,
-  {
-    className: cn(
-      "bg-divider shrink-0",
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-      className
-    ),
-    decorative,
-    orientation,
-    ...props
-  }
-), "Separator");
-Separator3.displayName = SeparatorPrimitive.Root.displayName;
-var separator_default = Separator3;
-var Field = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Field = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1376,7 +1636,7 @@ var Field = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Field.displayName = "Field";
-var FieldLabel = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var FieldLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "label",
   {
     ref,
@@ -1389,7 +1649,7 @@ var FieldLabel = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 FieldLabel.displayName = "FieldLabel";
-var FieldDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var FieldDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -1403,7 +1663,7 @@ var FieldDescription = React2.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 FieldDescription.displayName = "FieldDescription";
-var FieldGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var FieldGroup = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1417,7 +1677,7 @@ var FieldGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 FieldGroup.displayName = "FieldGroup";
-var FieldSeparator = React2.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+var FieldSeparator = React19.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
   "div",
   {
     ref,
@@ -1462,7 +1722,7 @@ var HoverCardContent = /* @__PURE__ */ __name(({
   }
 ), "HoverCardContent");
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-var InputOTP = React2.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+var InputOTP = React19.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
   OTPInput,
   {
     ref,
@@ -1473,33 +1733,356 @@ var InputOTP = React2.forwardRef(({ className, containerClassName, ...props }, r
     className: cn("disabled:cursor-not-allowed", className),
     ...props
   }
-));
-InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props }));
-InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React2.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React2.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-  return /* @__PURE__ */ jsxs(
+));
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props }));
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React19.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React19.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React19.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Dot, {}) }));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(InputGroup, "InputGroup");
+var inputGroupAddonVariants = cva(
+  'text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*="size-"])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50',
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+__name(InputGroupAddon, "InputGroupAddon");
+var inputGroupButtonVariants = cva("text-sm shadow-none flex gap-2 items-center", {
+  variants: {
+    size: {
+      xs: 'h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*="size-"])]:size-3.5 has-[>svg]:px-2',
+      sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+    }
+  },
+  defaultVariants: {
+    size: "xs"
+  }
+});
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+__name(InputGroupButton, "InputGroupButton");
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4',
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(InputGroupText, "InputGroupText");
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent h-9 px-3 text-sm outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(InputGroupInput, "InputGroupInput");
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent px-3 text-sm outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(InputGroupTextarea, "InputGroupTextarea");
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "list",
+      "data-slot": "item-group",
+      className: cn("group/item-group flex flex-col", className),
+      ...props
+    }
+  );
+}
+__name(ItemGroup, "ItemGroup");
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      className: cn("my-0", className),
+      ...props
+    }
+  );
+}
+__name(ItemSeparator, "ItemSeparator");
+var itemVariants = cva(
+  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50"
+      },
+      size: {
+        default: "p-4 gap-4 ",
+        sm: "py-3 px-4 gap-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item4({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(itemVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+__name(Item4, "Item");
+var itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: 'size-8 border rounded-sm bg-muted [&_svg:not([class*="size-"])]:size-4',
+        image: "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: cn(itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+__name(ItemMedia, "ItemMedia");
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-content",
       className: cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-1 ring-ring",
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
         className
       ),
-      ...props,
-      children: [
-        char,
-        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
-      ]
+      ...props
     }
   );
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React2.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Dot, {}) }));
-InputOTPSeparator.displayName = "InputOTPSeparator";
+}
+__name(ItemContent, "ItemContent");
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(ItemTitle, "ItemTitle");
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "item-description",
+      className: cn(
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(ItemDescription, "ItemDescription");
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: cn("flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+__name(ItemActions, "ItemActions");
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-header",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(ItemHeader, "ItemHeader");
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(ItemFooter, "ItemFooter");
 function Kbd({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "kbd",
@@ -1557,7 +2140,7 @@ function MenubarSub({
   return /* @__PURE__ */ jsx(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
 }
 __name(MenubarSub, "MenubarSub");
-var Menubar = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Menubar = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Root,
   {
     ref,
@@ -1569,7 +2152,7 @@ var Menubar = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Menubar.displayName = MenubarPrimitive.Root.displayName;
-var MenubarTrigger = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarTrigger = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Trigger,
   {
     ref,
@@ -1581,7 +2164,7 @@ var MenubarTrigger = React2.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-var MenubarSubTrigger = React2.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MenubarSubTrigger = React19.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   MenubarPrimitive.SubTrigger,
   {
     ref,
@@ -1598,7 +2181,7 @@ var MenubarSubTrigger = React2.forwardRef(({ className, inset, children, ...prop
   }
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-var MenubarSubContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarSubContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.SubContent,
   {
     ref,
@@ -1610,7 +2193,7 @@ var MenubarSubContent = React2.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-var MenubarContent = React2.forwardRef(
+var MenubarContent = React19.forwardRef(
   ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     MenubarPrimitive.Content,
     {
@@ -1627,7 +2210,7 @@ var MenubarContent = React2.forwardRef(
   ) })
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-var MenubarItem = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarItem = React19.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Item,
   {
     ref,
@@ -1640,7 +2223,7 @@ var MenubarItem = React2.forwardRef(({ className, inset, ...props }, ref) => /*
   }
 ));
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-var MenubarCheckboxItem = React2.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MenubarCheckboxItem = React19.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   MenubarPrimitive.CheckboxItem,
   {
     ref,
@@ -1657,7 +2240,7 @@ var MenubarCheckboxItem = React2.forwardRef(({ className, children, checked, ...
   }
 ));
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-var MenubarRadioItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MenubarRadioItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   MenubarPrimitive.RadioItem,
   {
     ref,
@@ -1673,7 +2256,7 @@ var MenubarRadioItem = React2.forwardRef(({ className, children, ...props }, ref
   }
 ));
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-var MenubarLabel = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarLabel = React19.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Label,
   {
     ref,
@@ -1686,7 +2269,7 @@ var MenubarLabel = React2.forwardRef(({ className, inset, ...props }, ref) => /*
   }
 ));
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-var MenubarSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Separator,
   {
     ref,
@@ -1711,7 +2294,7 @@ var MenubarShortcut = /* @__PURE__ */ __name(({
   );
 }, "MenubarShortcut");
 MenubarShortcut.displayName = "MenubarShortcut";
-var NavigationMenu = React2__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenu = React19__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Root,
   {
     ref,
@@ -1724,7 +2307,7 @@ var NavigationMenu = React2__default.forwardRef(({ className, children, ...props
   }
 ));
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-var NavigationMenuList = React2__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuList = React19__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.List,
   {
     ref,
@@ -1736,7 +2319,7 @@ var NavigationMenuList = React2__default.forwardRef(({ className, ...props }, re
   }
 ));
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
-var NavigationMenuItem = React2__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuItem = React19__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Item,
   {
     ref,
@@ -1748,7 +2331,7 @@ NavigationMenuItem.displayName = "NavigationMenuItem";
 var navigationMenuTriggerStyle = cva(
   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-level-1 text-foreground hover:text-accent  focus:text-accent focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-level-1/50 data-[state=open]:bg-level-1/50"
 );
-var NavigationMenuTrigger = React2__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var NavigationMenuTrigger = React19__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   NavigationMenuPrimitive.Trigger,
   {
     ref,
@@ -1768,7 +2351,7 @@ var NavigationMenuTrigger = React2__default.forwardRef(({ className, children, .
   }
 ));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-var NavigationMenuContent = React2__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuContent = React19__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Content,
   {
     ref,
@@ -1783,7 +2366,7 @@ var NavigationMenuContent = React2__default.forwardRef(({ className, ...props },
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
-var NavigationMenuViewport = React2__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
+var NavigationMenuViewport = React19__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Viewport,
   {
     className: cn(
@@ -1796,7 +2379,7 @@ var NavigationMenuViewport = React2__default.forwardRef(({ className, ...props }
   }
 ) }));
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-var NavigationMenuIndicator = React2__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuIndicator = React19__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Indicator,
   {
     ref,
@@ -2150,49 +2733,93 @@ var TableCaption = /* @__PURE__ */ __name(({
   }
 ), "TableCaption");
 TableCaption.displayName = "TableCaption";
-var Tabs = TabsPrimitive.Root;
-var TabsList = /* @__PURE__ */ __name(({
+function Tabs({
   className,
+  orientation = "horizontal",
   ...props
-}) => /* @__PURE__ */ jsx(
-  TabsPrimitive.List,
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      orientation,
+      className: cn(
+        "group/tabs flex data-[orientation=horizontal]:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(Tabs, "Tabs");
+var tabsListVariants = cva(
+  "group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
   {
-    className: cn(
-      "text-text-tertiary inline-flex h-10 items-center justify-center rounded-md bg-[#27252B] p-1",
-      className
-    ),
-    ...props
+    variants: {
+      variant: {
+        default: "bg-muted rounded-lg p-1",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
   }
-), "TabsList");
-TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = /* @__PURE__ */ __name(({
+);
+function TabsList({
   className,
+  variant = "default",
   ...props
-}) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Trigger,
-  {
-    className: cn(
-      "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[#2D3239] data-[state=active]:text-white data-[state=active]:shadow-xs",
-      className
-    ),
-    ...props
-  }
-), "TabsTrigger");
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = /* @__PURE__ */ __name(({
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn(tabsListVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+__name(TabsList, "TabsList");
+function TabsTrigger({
   className,
   ...props
-}) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Content,
-  {
-    className: cn(
-      "ring-offset-background focus-visible:ring-ring mt-3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
-      className
-    ),
-    ...props
-  }
-), "TabsContent");
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        // Default variant styles
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        // Active state
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        // Line variant indicator
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(TabsTrigger, "TabsTrigger");
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 outline-none mt-2", className),
+      ...props
+    }
+  );
+}
+__name(TabsContent, "TabsContent");
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -2235,9 +2862,9 @@ var DialogVideoController = /* @__PURE__ */ __name(({
       }
     });
   }, "onOpenChange");
-  const updatedChildren = React2__default.Children.map(
+  const updatedChildren = React19__default.Children.map(
     children,
-    (child) => React2__default.cloneElement(
+    (child) => React19__default.cloneElement(
       child,
       { open, onOpenChange }
     )
@@ -2305,16 +2932,19 @@ var ApplyTypography = /* @__PURE__ */ __name(({
 var AspectRatio = AspectRatioPrimitive.Root;
 var aspect_ratio_default = AspectRatio;
 var badgeVariants = cva(
-  "focus:ring-ring border-divider inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden",
+  "inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive [&>svg]:pointer-events-none overflow-hidden",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 border-transparent shadow-sm",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
-        outline: "hover:bg-bg-secondary text-text-secondary hover:text-text-default border border-gray-500 bg-transparent shadow-xs",
-        inputAdornment: "bg-gray-600 px-2 font-medium text-white",
-        tags: "text-text-secondary border-divider bg-bg-quaternary rounded-lg px-2 py-1 font-normal capitalize"
+        destructive: "bg-destructive text-white hover:bg-destructive/90 border-transparent shadow-sm focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground border-transparent",
+        link: "text-primary underline-offset-4 hover:underline border-transparent",
+        // Hanzo-specific variants for backward compatibility
+        inputAdornment: "bg-gray-600 px-2 font-medium text-white border-transparent",
+        tags: "text-muted-foreground border-border bg-muted rounded-lg px-2 py-1 font-normal capitalize"
       }
     },
     defaultVariants: {
@@ -2322,12 +2952,24 @@ var badgeVariants = cva(
     }
   }
 );
-var Badge = React2.forwardRef(
-  ({ className, variant, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(badgeVariants({ variant }), className), ...props });
-  }
-);
-Badge.displayName = "Badge";
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+__name(Badge, "Badge");
 var badge_default = Badge;
 var BreakpointIndicator = /* @__PURE__ */ __name(() => {
   if (process?.env?.NODE_ENV !== void 0 && process.env.NODE_ENV === "production") return null;
@@ -2467,7 +3109,7 @@ var DefaultTriggerInner = /* @__PURE__ */ __name(({
     ]
   }
 ), "DefaultTriggerInner");
-var DefaultTrigger = React2__default.forwardRef(DefaultTriggerInner);
+var DefaultTrigger = React19__default.forwardRef(DefaultTriggerInner);
 var Combobox = /* @__PURE__ */ __name(({
   elements,
   initial,
@@ -2576,7 +3218,7 @@ var Input = /* @__PURE__ */ __name(({
   const inputRef = useRef(null);
   const startAdornmentRef = useRef(null);
   const endAdornmentRef = useRef(null);
-  const [showPassword, setShowPassword] = React2.useState(false);
+  const [showPassword, setShowPassword] = React19.useState(false);
   const togglePasswordVisibility = /* @__PURE__ */ __name(() => {
     setShowPassword(!showPassword);
   }, "togglePasswordVisibility");
@@ -2633,7 +3275,7 @@ var Input = /* @__PURE__ */ __name(({
         children: endAdornment
       }
     ) : null,
-    endAdornment && typeof endAdornment !== "string" && React2.isValidElement(endAdornment) ? React2.cloneElement(endAdornment, {
+    endAdornment && typeof endAdornment !== "string" && React19.isValidElement(endAdornment) ? React19.cloneElement(endAdornment, {
       ref: endAdornmentRef
     }) : null,
     type === "password" && !hidePasswordToggle && /* @__PURE__ */ jsx(
@@ -2661,7 +3303,7 @@ var Label5 = /* @__PURE__ */ __name(({
 }) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { className: cn(labelVariants(), className), ...props }), "Label");
 Label5.displayName = LabelPrimitive.Root.displayName;
 var label_default = Label5;
-function Item7({
+function Item8({
   value,
   label,
   className,
@@ -2686,7 +3328,7 @@ function Item7({
     }
   );
 }
-__name(Item7, "Item");
+__name(Item8, "Item");
 function ListBox({
   values,
   labels,
@@ -2697,7 +3339,7 @@ function ListBox({
   itemClx = ""
 }) {
   return /* @__PURE__ */ jsx("div", { className: cn("border rounded-md select-none", clx), children: values.map((val, i) => /* @__PURE__ */ jsx(
-    Item7,
+    Item8,
     {
       value: val,
       label: labels[i],
@@ -2735,6 +3377,55 @@ var LoadingSpinner = /* @__PURE__ */ __name(({
   );
 }, "LoadingSpinner");
 var loading_spinner_default = LoadingSpinner;
+var NativeSelect = React19.forwardRef(
+  ({ className, size = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+        "data-slot": "native-select-wrapper",
+        children: [
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              ref,
+              "data-slot": "native-select",
+              "data-size": size,
+              className: cn(
+                "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
+                "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+                "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+                className
+              ),
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none",
+              "aria-hidden": "true",
+              "data-slot": "native-select-icon"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+NativeSelect.displayName = "NativeSelect";
+var NativeSelectOption = React19.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("option", { ref, "data-slot": "native-select-option", ...props }));
+NativeSelectOption.displayName = "NativeSelectOption";
+var NativeSelectOptGroup = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "optgroup",
+  {
+    ref,
+    "data-slot": "native-select-optgroup",
+    className: cn(className),
+    ...props
+  }
+));
+NativeSelectOptGroup.displayName = "NativeSelectOptGroup";
 var Progress = /* @__PURE__ */ __name(({
   className,
   value,
@@ -2903,7 +3594,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React2.useMemo(
+  const _values = React19.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -2967,6 +3658,18 @@ function Skeleton({
 }
 __name(Skeleton, "Skeleton");
 var skeleton_default = Skeleton;
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Loader2,
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("size-4 animate-spin", className),
+      ...props
+    }
+  );
+}
+__name(Spinner, "Spinner");
 var StepIndicator = /* @__PURE__ */ __name(({
   steps,
   currentStep,
@@ -3047,7 +3750,7 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 var switch_default = Switch;
 var DEFAULT_MIN_TEXTAREA_HEIGHT = 32;
 var DEFAULT_MAX_TEXTAREA_HEIGHT = 300;
-var Textarea = React2.forwardRef(
+var Textarea = React19.forwardRef(
   ({
     className,
     minHeight = DEFAULT_MIN_TEXTAREA_HEIGHT,
@@ -3055,9 +3758,9 @@ var Textarea = React2.forwardRef(
     resize = "none",
     ...props
   }, ref) => {
-    const textareaRef = React2.useRef(null);
+    const textareaRef = React19.useRef(null);
     const mergedRef = ref || textareaRef;
-    React2.useLayoutEffect(() => {
+    React19.useLayoutEffect(() => {
       if (!mergedRef.current) return;
       mergedRef.current.style.height = "inherit";
       mergedRef.current.style.height = `${Math.max(
@@ -3139,7 +3842,7 @@ var Toggle = /* @__PURE__ */ __name(({
   }
 ), "Toggle");
 Toggle.displayName = TogglePrimitive.Root.displayName;
-var ToggleGroupContext = React2.createContext({
+var ToggleGroupContext = React19.createContext({
   size: "default",
   variant: "default"
 });
@@ -3165,7 +3868,7 @@ var ToggleGroupItem = /* @__PURE__ */ __name(({
   size,
   ...props
 }) => {
-  const context = React2.useContext(ToggleGroupContext);
+  const context = React19.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -3182,7 +3885,7 @@ var ToggleGroupItem = /* @__PURE__ */ __name(({
   );
 }, "ToggleGroupItem");
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-var VideoPlayer = React2__default.forwardRef(
+var VideoPlayer = React19__default.forwardRef(
   ({
     sources,
     ...rest
@@ -3192,9 +3895,9 @@ var VideoPlayer = React2__default.forwardRef(
 );
 var video_player_default = VideoPlayer;
 var useAutoResizeTextarea = /* @__PURE__ */ __name((ref, value, autoResize = true) => {
-  const textAreaRef = React2.useRef(null);
-  React2.useImperativeHandle(ref, () => textAreaRef.current);
-  React2.useEffect(() => {
+  const textAreaRef = React19.useRef(null);
+  React19.useImperativeHandle(ref, () => textAreaRef.current);
+  React19.useEffect(() => {
     const ref2 = textAreaRef?.current;
     const updateTextareaHeight = /* @__PURE__ */ __name(() => {
       if (ref2 && autoResize) {
@@ -3238,7 +3941,7 @@ var ChatInputBase = /* @__PURE__ */ __name(({
   );
 }, "ChatInputBase");
 ChatInputBase.displayName = "ChatInput";
-var ChatInput = React2.memo(ChatInputBase);
+var ChatInput = React19.memo(ChatInputBase);
 function useCombinedRefs(...refs) {
   const targetRef = useRef(null);
   useEffect(() => {
@@ -3619,7 +4322,7 @@ var LinkElement = /* @__PURE__ */ __name(({
     ...linkProps
   };
   const Contents = /* @__PURE__ */ __name(() => {
-    if (React2__default.Children.count(children) > 0) return children;
+    if (React19__default.Children.count(children) > 0) return children;
     const _icon = icon ? icon : def.icon ? def.icon : void 0;
     const _iconAfter = iconAfter ? iconAfter : def.iconAfter ? def.iconAfter : false;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3779,6 +4482,437 @@ var YouTubeEmbed = /* @__PURE__ */ __name(({
   ) });
 }, "YouTubeEmbed");
 var youtube_embed_default = YouTubeEmbed;
+var pipPositionStyles = {
+  "bottom-right": { defaultX: /* @__PURE__ */ __name((w, pipW) => w - pipW - 24, "defaultX"), defaultY: /* @__PURE__ */ __name((h, pipH) => h - pipH - 24, "defaultY") },
+  "bottom-left": { defaultX: /* @__PURE__ */ __name(() => 24, "defaultX"), defaultY: /* @__PURE__ */ __name((h, pipH) => h - pipH - 24, "defaultY") },
+  "top-right": { defaultX: /* @__PURE__ */ __name((w, pipW) => w - pipW - 24, "defaultX"), defaultY: /* @__PURE__ */ __name(() => 24, "defaultY") },
+  "top-left": { defaultX: /* @__PURE__ */ __name(() => 24, "defaultX"), defaultY: /* @__PURE__ */ __name(() => 24, "defaultY") }
+};
+var youtubePipPlayerVariants = cva(
+  "relative bg-black rounded-[30px] overflow-hidden",
+  {
+    variants: {
+      size: {
+        sm: "aspect-video max-w-md",
+        md: "aspect-video max-w-2xl",
+        lg: "aspect-video max-w-4xl",
+        full: "w-full aspect-video",
+        hero: "w-full max-h-[calc(100vh-160px)]"
+      }
+    },
+    defaultVariants: {
+      size: "hero"
+    }
+  }
+);
+var YouTubePipPlayer = React19.forwardRef(
+  ({
+    className,
+    size,
+    videoId,
+    rotationInterval = 3e4,
+    enablePip = true,
+    defaultMuted = true,
+    showLiveIndicator = true,
+    enableTvEffects = true,
+    pipPosition = "bottom-right",
+    onPlay,
+    onPause,
+    onPipEnter,
+    onPipExit,
+    onMuteChange,
+    ...props
+  }, ref) => {
+    const videoIds = React19.useMemo(
+      () => Array.isArray(videoId) ? videoId : [videoId],
+      [videoId]
+    );
+    const [currentVideoIndex, setCurrentVideoIndex] = React19.useState(0);
+    const [isMuted, setIsMuted] = React19.useState(defaultMuted);
+    const [isPip, setIsPip] = React19.useState(false);
+    const [showPip, setShowPip] = React19.useState(true);
+    const [pipSize, setPipSize] = React19.useState("normal");
+    const [isMobile, setIsMobile] = React19.useState(false);
+    const [isHovered, setIsHovered] = React19.useState(false);
+    const [isPipHovered, setIsPipHovered] = React19.useState(false);
+    const [showStatic, setShowStatic] = React19.useState(false);
+    const [pipPos, setPipPos] = React19.useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = React19.useState(false);
+    const [dragStart, setDragStart] = React19.useState({ x: 0, y: 0 });
+    const [hasDragged, setHasDragged] = React19.useState(false);
+    const containerRef = React19.useRef(null);
+    const pipContainerRef = React19.useRef(null);
+    const PIP_WIDTH_BASE = 384;
+    const PIP_MARGIN = 24;
+    const getCurrentPipWidth = React19.useCallback(() => {
+      return pipSize === "double" ? PIP_WIDTH_BASE * 2 : PIP_WIDTH_BASE;
+    }, [pipSize]);
+    const getYouTubeEmbedUrl = React19.useCallback(
+      (forPip = false) => {
+        const currentId = videoIds[currentVideoIndex];
+        const muteParam = forPip && isPip ? isMuted ? "1" : "0" : isMuted ? "1" : "0";
+        return `https://www.youtube.com/embed/${currentId}?autoplay=1&mute=${muteParam}&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1`;
+      },
+      [videoIds, currentVideoIndex, isMuted, isPip]
+    );
+    React19.useEffect(() => {
+      const checkMobile = /* @__PURE__ */ __name(() => setIsMobile(window.innerWidth < 768), "checkMobile");
+      checkMobile();
+      window.addEventListener("resize", checkMobile);
+      return () => window.removeEventListener("resize", checkMobile);
+    }, []);
+    React19.useEffect(() => {
+      if (videoIds.length <= 1) return;
+      const interval = setInterval(() => {
+        setCurrentVideoIndex((prev) => (prev + 1) % videoIds.length);
+      }, rotationInterval);
+      return () => clearInterval(interval);
+    }, [videoIds.length, rotationInterval]);
+    React19.useEffect(() => {
+      if (!enableTvEffects) return;
+      const interval = setInterval(() => {
+        setShowStatic(true);
+        setTimeout(() => setShowStatic(false), 200);
+      }, 3e4);
+      return () => clearInterval(interval);
+    }, [enableTvEffects]);
+    React19.useEffect(() => {
+      if (!enablePip) return;
+      const handleScroll = /* @__PURE__ */ __name(() => {
+        if (!containerRef.current) return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const shouldShowPip = rect.bottom < 100;
+        const wasInPip = isPip;
+        setIsPip(shouldShowPip);
+        if (shouldShowPip !== wasInPip) {
+          if (shouldShowPip) {
+            onPipEnter?.();
+          } else {
+            onPipExit?.();
+          }
+        }
+      }, "handleScroll");
+      window.addEventListener("scroll", handleScroll);
+      return () => window.removeEventListener("scroll", handleScroll);
+    }, [enablePip, isPip, onPipEnter, onPipExit]);
+    React19.useEffect(() => {
+      if (typeof window === "undefined") return;
+      const pipWidth = getCurrentPipWidth();
+      const pipHeight = pipWidth * 9 / 16;
+      const pos = pipPositionStyles[pipPosition];
+      setPipPos({
+        x: pos.defaultX(window.innerWidth, pipWidth),
+        y: pos.defaultY(window.innerHeight, pipHeight)
+      });
+    }, [getCurrentPipWidth, pipPosition]);
+    React19.useEffect(() => {
+      if (pipSize === "fullscreen" || typeof window === "undefined") return;
+      const pipWidth = getCurrentPipWidth();
+      const pipHeight = pipWidth * 9 / 16;
+      const pos = pipPositionStyles[pipPosition];
+      setPipPos({
+        x: pos.defaultX(window.innerWidth, pipWidth),
+        y: pos.defaultY(window.innerHeight, pipHeight)
+      });
+    }, [pipSize, getCurrentPipWidth, pipPosition]);
+    const handleMouseDown = React19.useCallback((e) => {
+      if (pipSize === "fullscreen") return;
+      setIsDragging(true);
+      setHasDragged(false);
+      setDragStart({
+        x: e.clientX - pipPos.x,
+        y: e.clientY - pipPos.y
+      });
+    }, [pipSize, pipPos]);
+    const handleMouseMove = React19.useCallback((e) => {
+      if (!isDragging || pipSize === "fullscreen") return;
+      const newX = e.clientX - dragStart.x;
+      const newY = e.clientY - dragStart.y;
+      const distanceMoved = Math.sqrt(Math.pow(newX - pipPos.x, 2) + Math.pow(newY - pipPos.y, 2));
+      if (distanceMoved > 5) setHasDragged(true);
+      const pipWidth = getCurrentPipWidth();
+      const maxX = window.innerWidth - pipWidth - PIP_MARGIN;
+      const maxY = window.innerHeight - pipWidth * 9 / 16 - PIP_MARGIN;
+      setPipPos({
+        x: Math.max(PIP_MARGIN, Math.min(newX, maxX)),
+        y: Math.max(PIP_MARGIN, Math.min(newY, maxY))
+      });
+    }, [isDragging, pipSize, dragStart, pipPos, getCurrentPipWidth]);
+    const handleMouseUp = React19.useCallback(() => {
+      if (isDragging && hasDragged) {
+        const pipWidth = getCurrentPipWidth();
+        const pipHeight = pipWidth * 9 / 16;
+        const pos = pipPositionStyles[pipPosition];
+        setPipPos({
+          x: pos.defaultX(window.innerWidth, pipWidth),
+          y: pos.defaultY(window.innerHeight, pipHeight)
+        });
+      }
+      setIsDragging(false);
+      setHasDragged(false);
+    }, [isDragging, hasDragged, getCurrentPipWidth, pipPosition]);
+    React19.useEffect(() => {
+      if (!isDragging) return;
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    }, [isDragging, handleMouseMove, handleMouseUp]);
+    const toggleMute = React19.useCallback((e) => {
+      e.stopPropagation();
+      const newMuted = !isMuted;
+      setIsMuted(newMuted);
+      onMuteChange?.(newMuted);
+    }, [isMuted, onMuteChange]);
+    const cyclePipSize = React19.useCallback((e) => {
+      e.stopPropagation();
+      setPipSize((prev) => {
+        if (prev === "normal") return "double";
+        if (prev === "double") return "fullscreen";
+        return "normal";
+      });
+    }, []);
+    const closePip = React19.useCallback((e) => {
+      e.stopPropagation();
+      setShowPip(false);
+    }, []);
+    const requestFullscreen = React19.useCallback((e) => {
+      e.stopPropagation();
+      if (!containerRef.current) return;
+      if (document.fullscreenElement) {
+        document.exitFullscreen();
+      } else {
+        containerRef.current.requestFullscreen();
+      }
+    }, []);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(
+            youtubePipPlayerVariants({ size }),
+            "group transition-all duration-500",
+            className
+          ),
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false),
+          ...props,
+          children: [
+            enableTvEffects && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute -inset-24 bg-gradient-radial from-white/40 via-white/20 to-transparent blur-[100px] opacity-80 pointer-events-none" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -inset-12 bg-gradient-radial from-white/30 via-white/15 to-transparent blur-[60px] opacity-70 pointer-events-none" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -inset-2 rounded-[30px] bg-gradient-to-r from-white/80 via-white/60 to-white/80 opacity-100 blur-2xl animate-pulse pointer-events-none" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-[30px] border-2 border-white/30 shadow-[0_0_60px_rgba(255,255,255,0.5)] pointer-events-none" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none z-10", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute inset-0 rounded-[30px] border-2 border-white/10 bg-gradient-to-b from-white/5 to-transparent",
+                style: {
+                  boxShadow: "inset 0 2px 20px rgba(255,255,255,0.1), inset 0 -2px 20px rgba(0,0,0,0.5)"
+                }
+              }
+            ) }),
+            enableTvEffects && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute inset-0 z-20 pointer-events-none",
+                style: { boxShadow: "inset 0 0 120px 60px rgba(0,0,0,0.8)" }
+              }
+            ),
+            showStatic && enableTvEffects && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-40 pointer-events-none", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-white/3 animate-pulse" }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0 opacity-20",
+                  style: {
+                    backgroundImage: `url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E")`
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "iframe",
+              {
+                className: "absolute inset-0 w-full h-full",
+                src: getYouTubeEmbedUrl(),
+                title: "Video",
+                frameBorder: "0",
+                allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                allowFullScreen: true
+              }
+            ),
+            enableTvEffects && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none opacity-[0.02] z-10", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full w-full",
+                style: {
+                  backgroundImage: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.05) 2px, rgba(255,255,255,0.05) 4px)"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "absolute bottom-6 left-6 flex items-center gap-3 z-30 transition-opacity duration-300",
+                  isHovered ? "opacity-100" : "opacity-0"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: toggleMute,
+                      className: "flex items-center gap-2 bg-black/80 backdrop-blur-md px-4 py-2 rounded-full hover:bg-black transition-all duration-300 border border-white/10",
+                      children: [
+                        isMuted ? /* @__PURE__ */ jsx(VolumeX, { className: "h-4 w-4 text-white" }) : /* @__PURE__ */ jsx(Volume2, { className: "h-4 w-4 text-white" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-xs text-white/90 font-medium tracking-wider uppercase", children: isMuted ? "Unmute" : "Mute" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: requestFullscreen,
+                      className: "flex items-center gap-2 bg-black/80 backdrop-blur-md px-4 py-2 rounded-full hover:bg-black transition-all duration-300 border border-white/10",
+                      children: [
+                        /* @__PURE__ */ jsx(Maximize, { className: "h-4 w-4 text-white" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-xs text-white/90 font-medium tracking-wider uppercase", children: "Fullscreen" })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            showLiveIndicator && /* @__PURE__ */ jsxs("div", { className: "absolute top-6 left-6 flex items-center gap-2 bg-black/80 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 z-30", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-red-600 rounded-full animate-pulse shadow-[0_0_10px_rgba(220,38,38,0.8)]" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-white/90 font-medium tracking-widest uppercase", children: "Live" })
+            ] })
+          ]
+        }
+      ),
+      enablePip && isPip && showPip && !isMobile && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: pipContainerRef,
+          className: cn(
+            "fixed z-50 transition-all ease-out group",
+            pipSize === "fullscreen" ? "inset-0 bg-black/98 backdrop-blur-xl duration-500" : isDragging ? "duration-75" : "duration-300",
+            isDragging ? "cursor-grabbing scale-105 shadow-2xl" : pipSize === "fullscreen" ? "" : "cursor-grab hover:scale-105"
+          ),
+          style: pipSize !== "fullscreen" ? {
+            left: `${pipPos.x}px`,
+            top: `${pipPos.y}px`,
+            filter: isDragging ? "brightness(1.1) drop-shadow(0 20px 40px rgba(0,0,0,0.5))" : "brightness(1)"
+          } : {},
+          onMouseDown: handleMouseDown,
+          onMouseEnter: () => setIsPipHovered(true),
+          onMouseLeave: () => setIsPipHovered(false),
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "relative bg-black overflow-hidden transition-all duration-500",
+                pipSize === "fullscreen" ? "w-full h-full" : pipSize === "double" ? "aspect-video rounded-2xl" : "w-96 aspect-video rounded-2xl"
+              ),
+              style: pipSize === "double" ? { width: "768px" } : {},
+              children: [
+                enableTvEffects && pipSize !== "fullscreen" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "absolute -inset-12 rounded-full bg-gradient-radial from-white/30 via-white/10 to-transparent blur-3xl opacity-60 pointer-events-none" }),
+                  /* @__PURE__ */ jsx("div", { className: "absolute -inset-1 rounded-2xl bg-gradient-to-r from-white/40 via-white/20 to-white/40 opacity-75 blur-xl animate-pulse pointer-events-none" }),
+                  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none z-10", children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "absolute inset-0 rounded-2xl border-2 border-white/10 bg-gradient-to-b from-white/5 to-transparent",
+                      style: {
+                        boxShadow: "inset 0 2px 20px rgba(255,255,255,0.1), inset 0 -2px 20px rgba(0,0,0,0.5)"
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none z-10 opacity-10", children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "h-full w-full animate-scan",
+                      style: {
+                        backgroundImage: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px)"
+                      }
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 overflow-hidden", children: [
+                  /* @__PURE__ */ jsx(
+                    "iframe",
+                    {
+                      className: cn(
+                        "absolute top-0 left-0 w-full h-full object-cover",
+                        pipSize !== "fullscreen" && "rounded-2xl"
+                      ),
+                      style: { aspectRatio: "16 / 9", pointerEvents: "none" },
+                      src: getYouTubeEmbedUrl(true),
+                      title: "Video PiP",
+                      frameBorder: "0",
+                      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                      allowFullScreen: true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-5" })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute flex items-center gap-2 z-30 transition-opacity duration-300",
+                      pipSize === "fullscreen" ? "bottom-10 right-10" : "bottom-3 right-3",
+                      isPipHovered ? "opacity-100" : "opacity-0"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: toggleMute,
+                          className: "relative p-2.5 bg-black/90 backdrop-blur-md rounded-full hover:bg-black transition-all duration-300 shadow-lg hover:scale-110 border border-white/10",
+                          title: isMuted ? "Unmute" : "Mute",
+                          children: isMuted ? /* @__PURE__ */ jsx(VolumeX, { className: "h-4 w-4 text-white" }) : /* @__PURE__ */ jsx(Volume2, { className: "h-4 w-4 text-white" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: cyclePipSize,
+                          className: "relative p-2.5 bg-black/90 backdrop-blur-md rounded-full hover:bg-black transition-all duration-300 shadow-lg hover:scale-110 border border-white/10",
+                          title: pipSize === "fullscreen" ? "Normal Size" : pipSize === "double" ? "Fullscreen" : "Double Size",
+                          children: pipSize === "fullscreen" ? /* @__PURE__ */ jsx(Minimize2, { className: "h-4 w-4 text-white" }) : /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4 text-white" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: closePip,
+                          className: "relative p-2.5 bg-black/90 backdrop-blur-md rounded-full hover:bg-red-600 transition-all duration-300 shadow-lg hover:scale-110 border border-white/10",
+                          title: "Close",
+                          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-white" })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                showLiveIndicator && pipSize !== "fullscreen" && /* @__PURE__ */ jsx("div", { className: "absolute top-3 right-3 z-20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 bg-black/80 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10", children: [
+                  /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-red-600 rounded-full animate-pulse shadow-[0_0_10px_rgba(220,38,38,0.8)]" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white/80 font-medium tracking-widest uppercase", children: "Live" })
+                ] }) })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+YouTubePipPlayer.displayName = "YouTubePipPlayer";
 var fileIconMap = {
   aep: "",
   ai: "",
@@ -8066,4 +9200,4 @@ var HanzoIcon = /* @__PURE__ */ __name(({ className }) => {
   );
 }, "HanzoIcon");
 
-export { AIAgentIcon, AISearchContentIcon, Accordion, AccordionContent, AccordionItem, AccordionTrigger, action_button_default as ActionButton, ActiveIcon, AddAgentIcon, AddCryptoWalletIcon, AddNewFolderIcon, AgentIcon, AiTasksIcon, AisIcon, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnthropicIcon, ApplyTypography, ArchiveIcon, ArchivedIcon, ArrowRightIcon, aspect_ratio_default as AspectRatio, AttachmentIcon, Avatar, AvatarFallback, AvatarImage, AyaCohereIcon, AzureIcon, badge_default as Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breakpoint_indicator_default as BreakpointIndicator, BrowseSubscriptionIcon, button_default as Button, calendar_default as Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryIcon, ChatBubbleIcon, ChatInput, ChatInputArea, ChatSettingsIcon, checkbox_default as Checkbox, CloudModelIcon, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyToClipboardIcon, CreateAIIcon, CryptoWalletIcon, DeepSeekIcon, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialog_video_controller_default as DialogVideoController, DirectoryTypeIcon, DisconnectIcon, DotsLoader, DownloadIcon, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmbeddingsGeneratedIcon, EthereumIcon, ExoIcon, ExportIcon, Field, FieldDescription, FieldGroup, FieldLabel, FieldSeparator, FileEmptyStateIcon, FileTypeIcon, FilesIcon, FormulaIcon, GeminiIcon, GenerateDocIcon, GenerateFromWebIcon, GoogleIcon, GrokIcon, GroqIcon, HanzoCombinationMarkIcon, HanzoIcon, HanzoLogoIcon, HanzoLogoSoloIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardTrigger, icons_exports as Icons, image_default as Image, ImportIcon, InboxIcon, inline_icon_default as InlineIcon, input_default as Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, JobBubbleIcon, json_form_default as JsonForm, Kbd, KbdGroup, label_default as Label, link_element_default as LinkElement, list_box_default as ListBox, LmStudioIcon, loading_spinner_default as LoadingSpinner, LocalModelIcon, MCPIcon, mdx_link_default as MDXLink, media_stack_default as MediaStack, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetaIcon, MetadataIcon, MicrosoftIcon, MistralIcon, MySubscriptionsIcon, nav_items_default as NavItems, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NetworkAgentIcon, NotificationIcon, OllamaIcon, OpenAIIcon, OpenBMBIcon, OpenRouterIcon, PaperClipIcon, PartyIcon, PerplexityIcon, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, PrettyJsonPrint, progress_default as Progress, PromptLibraryIcon, PythonIcon, QrIcon, QwenIcon, RadioGroup4 as RadioGroup, RadioGroupItem, ReactJsIcon, ReasoningIcon, ResizableHandle, ResizablePanel, ResizablePanelGroup, SaveIcon, ScheduledTasksComingSoonIcon, ScheduledTasksIcon, ScrollArea, ScrollBar, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SendIcon, separator_default as Separator, SharedFolderIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFileIcon, SheetFooter, SheetHeader, SheetIcon, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortcutsIcon, skeleton_default as Skeleton, slider_default as Slider, SortingAToZ, SortingZToA, step_indicator_default as StepIndicator, StoreIcon, switch_default as Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, TogetherAI, Toggle, ToggleGroup, ToggleGroupItem, ToolAssetsIcon, ToolsDisabledIcon, ToolsIcon, Tooltip, TooltipArrow2 as TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, TracingIcon, TypeScriptIcon, USDCIcon, UnknownLanguageIcon, UploadVectorResourceIcon, video_player_default as VideoPlayer, WebSearchDisabledIcon, WebSearchIcon, youtube_embed_default as YouTubeEmbed, buttonVariants, fileIconMap, navigationMenuTriggerStyle, toggleVariants };
+export { AIAgentIcon, AISearchContentIcon, Accordion, AccordionContent, AccordionItem, AccordionTrigger, action_button_default as ActionButton, ActiveIcon, AddAgentIcon, AddCryptoWalletIcon, AddNewFolderIcon, AgentIcon, AiTasksIcon, AisIcon, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnthropicIcon, ApplyTypography, ArchiveIcon, ArchivedIcon, ArrowRightIcon, aspect_ratio_default as AspectRatio, AttachmentIcon, Avatar, AvatarFallback, AvatarImage, AyaCohereIcon, AzureIcon, badge_default as Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breakpoint_indicator_default as BreakpointIndicator, BrowseSubscriptionIcon, button_default as Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, calendar_default as Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryIcon, ChatBubbleIcon, ChatInput, ChatInputArea, ChatSettingsIcon, checkbox_default as Checkbox, CloudModelIcon, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyToClipboardIcon, CreateAIIcon, CryptoWalletIcon, DeepSeekIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialog_video_controller_default as DialogVideoController, DirectoryTypeIcon, DisconnectIcon, DotsLoader, DownloadIcon, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmbeddingsGeneratedIcon, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EthereumIcon, ExoIcon, ExportIcon, Field, FieldDescription, FieldGroup, FieldLabel, FieldSeparator, FileEmptyStateIcon, FileTypeIcon, FilesIcon, FormulaIcon, GeminiIcon, GenerateDocIcon, GenerateFromWebIcon, GoogleIcon, GrokIcon, GroqIcon, HanzoCombinationMarkIcon, HanzoIcon, HanzoLogoIcon, HanzoLogoSoloIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardTrigger, icons_exports as Icons, image_default as Image, ImportIcon, InboxIcon, inline_icon_default as InlineIcon, input_default as Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item4 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, JobBubbleIcon, json_form_default as JsonForm, Kbd, KbdGroup, label_default as Label, link_element_default as LinkElement, list_box_default as ListBox, LmStudioIcon, loading_spinner_default as LoadingSpinner, LocalModelIcon, MCPIcon, mdx_link_default as MDXLink, media_stack_default as MediaStack, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetaIcon, MetadataIcon, MicrosoftIcon, MistralIcon, MySubscriptionsIcon, NativeSelect, NativeSelectOptGroup, NativeSelectOption, nav_items_default as NavItems, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NetworkAgentIcon, NotificationIcon, OllamaIcon, OpenAIIcon, OpenBMBIcon, OpenRouterIcon, PaperClipIcon, PartyIcon, PerplexityIcon, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, PrettyJsonPrint, progress_default as Progress, PromptLibraryIcon, PythonIcon, QrIcon, QwenIcon, RadioGroup4 as RadioGroup, RadioGroupItem, ReactJsIcon, ReasoningIcon, ResizableHandle, ResizablePanel, ResizablePanelGroup, SaveIcon, ScheduledTasksComingSoonIcon, ScheduledTasksIcon, ScrollArea, ScrollBar, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, SendIcon, separator_default as Separator, SharedFolderIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFileIcon, SheetFooter, SheetHeader, SheetIcon, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortcutsIcon, skeleton_default as Skeleton, slider_default as Slider, SortingAToZ, SortingZToA, Spinner, step_indicator_default as StepIndicator, StoreIcon, switch_default as Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, TogetherAI, Toggle, ToggleGroup, ToggleGroupItem, ToolAssetsIcon, ToolsDisabledIcon, ToolsIcon, Tooltip, TooltipArrow2 as TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, TracingIcon, TypeScriptIcon, USDCIcon, UnknownLanguageIcon, UploadVectorResourceIcon, video_player_default as VideoPlayer, WebSearchDisabledIcon, WebSearchIcon, youtube_embed_default as YouTubeEmbed, YouTubePipPlayer, alertVariants, buttonGroupVariants, buttonVariants, fileIconMap, navigationMenuTriggerStyle, tabsListVariants, toggleVariants, youtubePipPlayerVariants };