@melony/react 0.1.52 → 0.1.54

package/dist/index.js

@@ -8,7 +8,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as ICONS from '@tabler/icons-react';
-import { IconX, IconChevronLeft, IconChevronRight, IconLoader2, IconCheck, IconUpload, IconUser, IconLogout, IconBrandGoogle, IconFileText, IconFile, IconPaperclip, IconChevronDown, IconArrowUp, IconDotsVertical, IconTrash, IconHistory, IconPlus, IconArrowLeft, IconMessage, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconDeviceDesktop, IconMoon, IconSun, IconSelector, IconChevronUp } from '@tabler/icons-react';
+import { IconX, IconChevronLeft, IconChevronRight, IconLoader2, IconCheck, IconUpload, IconDotsVertical, IconUser, IconLogout, IconBrandGoogle, IconFileText, IconFile, IconPaperclip, IconChevronDown, IconArrowUp, IconHistory, IconPlus, IconArrowLeft, IconMessage, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconDeviceDesktop, IconMoon, IconSun, IconSelector, IconChevronUp } from '@tabler/icons-react';
 export * from '@tabler/icons-react';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { mergeProps } from '@base-ui/react/merge-props';
@@ -51,10 +51,7 @@ function DialogOverlay({
     }
   );
 }
-function DialogContent({
-  className,
-  ...props
-}) {
+function DialogContent({ className, ...props }) {
   return /* @__PURE__ */ jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsx(
@@ -70,10 +67,7 @@ function DialogContent({
     )
   ] });
 }
-function DialogClose({
-  className,
-  ...props
-}) {
+function DialogClose({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     Dialog$1.Close,
     {
@@ -86,10 +80,7 @@ function DialogClose({
     }
   );
 }
-function DialogHeader({
-  className,
-  ...props
-}) {
+function DialogHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -141,7 +132,10 @@ function Card({
     {
       "data-slot": "card",
       "data-size": size,
-      className: cn("ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-2xl py-6 text-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className),
+      className: cn(
+        "ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-2xl py-6 text-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+        className
+      ),
       ...props
     }
   );
@@ -416,7 +410,8 @@ var Box = ({
   radius = "none",
   width = "auto",
   height = "auto",
-  shadow = "none"
+  shadow = "none",
+  group = false
 }) => {
   return /* @__PURE__ */ jsx(
     "div",
@@ -431,7 +426,8 @@ var Box = ({
         radiusMap[radius],
         widthMap[width],
         height === "full" && "h-full",
-        shadowMap[shadow]
+        shadowMap[shadow],
+        group && "group"
       ),
       children
     }
@@ -445,11 +441,15 @@ var Float = ({
   showOnHover = false
 }) => {
   const positionClasses = {
-    "top-left": "top-0 left-0",
-    "top-right": "top-0 right-0",
-    "bottom-left": "bottom-0 left-0",
-    "bottom-right": "bottom-0 right-0",
-    "center": "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+    "top-left": "top-1 left-1",
+    "top-right": "top-1 right-1",
+    "top-center": "top-1 left-1/2 -translate-x-1/2",
+    "bottom-left": "bottom-1 left-1",
+    "bottom-right": "bottom-1 right-1",
+    "bottom-center": "bottom-1 left-1/2 -translate-x-1/2",
+    center: "top- 1 / 2 left - 1/2 -tra nslate-x-1/2 -translate-y-1/2",
+    "left-center": "top-1/2 left-1 -translate-y-1/2",
+    "right-center": "top-1/2 right-1 -translate-y-1/2"
   };
   const marginXClass = position.endsWith("left") ? marginMap[offsetX].replace("m-", "ml-") : marginMap[offsetX].replace("m-", "mr-");
   const marginYClass = position.startsWith("top") ? marginMap[offsetY].replace("m-", "mt-") : marginMap[offsetY].replace("m-", "mb-");
@@ -508,10 +508,7 @@ var Divider = ({
     Separator,
     {
       orientation,
-      className: cn(
-        marginMap[margin],
-        colorBgMap[color]
-      )
+      className: cn(marginMap[margin], colorBgMap[color])
     }
   );
 };
@@ -731,6 +728,7 @@ var Video = ({
   muted = false,
   aspectRatio = "16/9",
   width = "full",
+  height = "auto",
   radius = "lg"
 }) => {
   const aspectRatios = {
@@ -748,6 +746,7 @@ var Video = ({
         widthMap[width],
         radiusMap[radius]
       ),
+      style: { height },
       children: /* @__PURE__ */ jsx(
         "video",
         {
@@ -777,13 +776,16 @@ var Icon = ({
     lg: 24
   };
   const resolvedSize = typeof size === "number" ? size : sizeMap[size] || 20;
-  return /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center justify-center", colorTextMap[color]), children: /* @__PURE__ */ jsx(
-    IconComponent,
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      size: resolvedSize,
-      strokeWidth: 1.5
+      className: cn(
+        "inline-flex items-center justify-center",
+        colorTextMap[color]
+      ),
+      children: /* @__PURE__ */ jsx(IconComponent, { size: resolvedSize, strokeWidth: 1.5 })
     }
-  ) });
+  );
 };
 var badgeVariants = cva(
   "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-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 transition-colors overflow-hidden group/badge",
@@ -940,41 +942,60 @@ var Chart = ({
     const totalBarSpace = chartWidth - padding.left - padding.right;
     const barSpacing = data.length > 1 ? totalBarSpace * 0.1 / data.length : 0;
     const actualBarWidth = (totalBarSpace - barSpacing * (data.length + 1)) / data.length;
-    return /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${chartWidth} ${chartHeight + padding.bottom}`, className: "w-full h-auto overflow-visible", children: [
-      renderGrid(),
-      data.map((item, index) => {
-        const barHeight = item.value / maxValue * chartHeight;
-        const x = padding.left + barSpacing + index * (actualBarWidth + barSpacing);
-        const y = padding.top + chartHeight - barHeight;
-        return /* @__PURE__ */ jsxs("g", { children: [
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              x,
-              y,
-              width: actualBarWidth,
-              height: barHeight,
-              fill: getColor(index, item.color),
-              rx: 4,
-              onMouseEnter: () => showTooltips && setTooltip({ visible: true, x: x + actualBarWidth / 2, y: y - 5, label: item.label, value: item.value }),
-              onMouseLeave: () => setTooltip({ visible: false, x: 0, y: 0, label: "", value: 0 }),
-              className: "transition-all hover:opacity-80 cursor-pointer"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "text",
-            {
-              x: x + actualBarWidth / 2,
-              y: padding.top + chartHeight + 20,
-              textAnchor: "middle",
-              className: "fill-muted-foreground text-[10px]",
-              children: item.label
-            }
-          )
-        ] }, index);
-      }),
-      showTooltips && renderTooltip()
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: `0 0 ${chartWidth} ${chartHeight + padding.bottom}`,
+        className: "w-full h-auto overflow-visible",
+        children: [
+          renderGrid(),
+          data.map((item, index) => {
+            const barHeight = item.value / maxValue * chartHeight;
+            const x = padding.left + barSpacing + index * (actualBarWidth + barSpacing);
+            const y = padding.top + chartHeight - barHeight;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x,
+                  y,
+                  width: actualBarWidth,
+                  height: barHeight,
+                  fill: getColor(index, item.color),
+                  rx: 4,
+                  onMouseEnter: () => showTooltips && setTooltip({
+                    visible: true,
+                    x: x + actualBarWidth / 2,
+                    y: y - 5,
+                    label: item.label,
+                    value: item.value
+                  }),
+                  onMouseLeave: () => setTooltip({
+                    visible: false,
+                    x: 0,
+                    y: 0,
+                    label: "",
+                    value: 0
+                  }),
+                  className: "transition-all hover:opacity-80 cursor-pointer"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: x + actualBarWidth / 2,
+                  y: padding.top + chartHeight + 20,
+                  textAnchor: "middle",
+                  className: "fill-muted-foreground text-[10px]",
+                  children: item.label
+                }
+              )
+            ] }, index);
+          }),
+          showTooltips && renderTooltip()
+        ]
+      }
+    );
   };
   const renderLineChart = () => {
     const points = data.map((item, index) => ({
@@ -983,37 +1004,59 @@ var Chart = ({
       ...item
     }));
     const pathData = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-    return /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${chartWidth} ${chartHeight + padding.bottom}`, className: "w-full h-auto overflow-visible", children: [
-      renderGrid(),
-      /* @__PURE__ */ jsx("path", { d: pathData, fill: "none", stroke: getColor(0), strokeWidth: 3, className: "transition-all" }),
-      points.map((point, index) => /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: point.x,
-            cy: point.y,
-            r: 5,
-            fill: getColor(index, point.color),
-            stroke: "hsl(var(--background))",
-            strokeWidth: 2,
-            onMouseEnter: () => showTooltips && setTooltip({ visible: true, x: point.x, y: point.y - 5, label: point.label, value: point.value }),
-            onMouseLeave: () => setTooltip({ visible: false, x: 0, y: 0, label: "", value: 0 }),
-            className: "hover:r-6 transition-all cursor-pointer"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: point.x,
-            y: padding.top + chartHeight + 20,
-            textAnchor: "middle",
-            className: "fill-muted-foreground text-[10px]",
-            children: point.label
-          }
-        )
-      ] }, index)),
-      showTooltips && renderTooltip()
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: `0 0 ${chartWidth} ${chartHeight + padding.bottom}`,
+        className: "w-full h-auto overflow-visible",
+        children: [
+          renderGrid(),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: pathData,
+              fill: "none",
+              stroke: getColor(0),
+              strokeWidth: 3,
+              className: "transition-all"
+            }
+          ),
+          points.map((point, index) => /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: point.x,
+                cy: point.y,
+                r: 5,
+                fill: getColor(index, point.color),
+                stroke: "hsl(var(--background))",
+                strokeWidth: 2,
+                onMouseEnter: () => showTooltips && setTooltip({
+                  visible: true,
+                  x: point.x,
+                  y: point.y - 5,
+                  label: point.label,
+                  value: point.value
+                }),
+                onMouseLeave: () => setTooltip({ visible: false, x: 0, y: 0, label: "", value: 0 }),
+                className: "hover:r-6 transition-all cursor-pointer"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: point.x,
+                y: padding.top + chartHeight + 20,
+                textAnchor: "middle",
+                className: "fill-muted-foreground text-[10px]",
+                children: point.label
+              }
+            )
+          ] }, index)),
+          showTooltips && renderTooltip()
+        ]
+      }
+    );
   };
   const renderChart = () => {
     switch (chartType) {
@@ -1103,18 +1146,21 @@ function Label({ className, ...props }) {
     }
   );
 }
-var fieldVariants = cva("data-[invalid=true]:text-destructive gap-3 group/field flex w-full", {
-  variants: {
-    orientation: {
-      vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
-      horizontal: "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-      responsive: "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
-    }
-  },
-  defaultVariants: {
-    orientation: "vertical"
+var fieldVariants = cva(
+  "data-[invalid=true]:text-destructive gap-3 group/field flex w-full",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+        horizontal: "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive: "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
   }
-});
+);
 function Field({
   className,
   orientation = "vertical",
@@ -1305,7 +1351,10 @@ function SelectContent({
         Select$1.Popup,
         {
           "data-slot": "select-content",
-          className: cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto", className),
+          className: cn(
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto",
+            className
+          ),
           ...props,
           children: [
             /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
@@ -1352,12 +1401,12 @@ function SelectScrollUpButton({
     Select$1.ScrollUpArrow,
     {
       "data-slot": "select-scroll-up-button",
-      className: cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className),
+      className: cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full",
+        className
+      ),
       ...props,
-      children: /* @__PURE__ */ jsx(
-        IconChevronUp,
-        {}
-      )
+      children: /* @__PURE__ */ jsx(IconChevronUp, {})
     }
   );
 }
@@ -1369,12 +1418,12 @@ function SelectScrollDownButton({
     Select$1.ScrollDownArrow,
     {
       "data-slot": "select-scroll-down-button",
-      className: cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", className),
+      className: cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full",
+        className
+      ),
       ...props,
-      children: /* @__PURE__ */ jsx(
-        IconChevronDown,
-        {}
-      )
+      children: /* @__PURE__ */ jsx(IconChevronDown, {})
     }
   );
 }
@@ -1830,37 +1879,30 @@ var RadioGroup = ({
         children: options.map((option, index) => {
           const radioId = `${name}-${index}`;
           const isDisabled = disabled || option.disabled;
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "flex items-center gap-2",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "radio",
-                    name,
-                    id: radioId,
-                    value: option.value,
-                    defaultChecked: defaultValue === option.value,
-                    disabled: isDisabled,
-                    onChange: handleChange,
-                    className: "h-4 w-4 border-gray-300 text-primary focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Label2,
-                  {
-                    htmlFor: radioId,
-                    value: option.label,
-                    size: "sm",
-                    color: isDisabled ? "muted" : "foreground"
-                  }
-                )
-              ]
-            },
-            index
-          );
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                name,
+                id: radioId,
+                value: option.value,
+                defaultChecked: defaultValue === option.value,
+                disabled: isDisabled,
+                onChange: handleChange,
+                className: "h-4 w-4 border-gray-300 text-primary focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Label2,
+              {
+                htmlFor: radioId,
+                value: option.label,
+                size: "sm",
+                color: isDisabled ? "muted" : "foreground"
+              }
+            )
+          ] }, index);
         })
       }
     )
@@ -2048,7 +2090,16 @@ var Upload = ({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 mb-2 items-center", children: [
-      showInitialFiles && initialFiles?.map((file, index) => /* @__PURE__ */ jsx(Image, { src: file.url, alt: file.name, width: "min", radius: "md" }, index)),
+      showInitialFiles && initialFiles?.map((file, index) => /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: file.url,
+          alt: file.name,
+          width: "min",
+          radius: "md"
+        },
+        index
+      )),
       displayEvents.map(
         (event, index) => event.ui ? /* @__PURE__ */ jsx(UIRenderer, { node: event.ui }, index) : null
       ),
@@ -2068,11 +2119,7 @@ var Upload = ({
     ] })
   ] });
 };
-var Form = ({
-  children,
-  onSubmitAction,
-  gap = "md"
-}) => {
+var Form = ({ children, onSubmitAction, gap = "md" }) => {
   const { sendEvent } = useMelony();
   const [isSubmitted, setIsSubmitted] = useState(false);
   const handleSubmit = (e) => {
@@ -2098,24 +2145,176 @@ var Form = ({
       }
     }
   };
-  return /* @__PURE__ */ jsx(
-    "form",
+  return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: "w-full", children: /* @__PURE__ */ jsx("fieldset", { disabled: isSubmitted, className: "m-0 border-0 p-0", children: /* @__PURE__ */ jsx(
+    "div",
     {
-      onSubmit: handleSubmit,
-      className: "w-full",
-      children: /* @__PURE__ */ jsx("fieldset", { disabled: isSubmitted, className: "m-0 border-0 p-0", children: /* @__PURE__ */ jsx(
-        "div",
+      className: cn(
+        "flex flex-col transition-opacity",
+        gapMap[gap],
+        isSubmitted && "opacity-60 pointer-events-none"
+      ),
+      children
+    }
+  ) }) });
+};
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+    Menu.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsx(
+        Menu.Popup,
         {
+          "data-slot": "dropdown-menu-content",
           className: cn(
-            "flex flex-col transition-opacity",
-            gapMap[gap],
-            isSubmitted && "opacity-60 pointer-events-none"
+            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
+            className
           ),
-          children
+          ...props
         }
-      ) })
+      )
+    }
+  ) });
+}
+function DropdownMenuGroup({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu.GroupLabel,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Menu.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none",
+            "data-slot": "dropdown-menu-checkbox-item-indicator",
+            children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(IconCheck, {}) })
+          }
+        ),
+        children
+      ]
     }
   );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border/50 -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+var Dropdown = ({ items = [], children }) => {
+  const { sendEvent } = useMelony();
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenuTrigger,
+      {
+        render: (props) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "icon-sm",
+            ...props,
+            onClick: (e) => {
+              e.stopPropagation();
+              props.onClick?.(e);
+            },
+            children: children || /* @__PURE__ */ jsx(IconDotsVertical, { className: "size-3.5" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: cn("w-32"), children: items.map((item, i) => /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          if (item.onClickAction) {
+            sendEvent(item.onClickAction);
+          }
+        },
+        children: [
+          item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm" }),
+          /* @__PURE__ */ jsx("span", { className: item.icon ? "ml-2" : "", children: item.label })
+        ]
+      },
+      `${item.label}-${i}`
+    )) })
+  ] });
 };
 function UIRenderer({ node }) {
   const { type, props, children } = node;
@@ -2146,7 +2345,8 @@ function UIRenderer({ node }) {
     form: Form,
     chart: Chart,
     label: Label2,
-    upload: Upload
+    upload: Upload,
+    dropdown: Dropdown
   };
   const Component = typeMap[type];
   if (!Component) {
@@ -2329,123 +2529,6 @@ var useAuth = () => {
   }
   return context;
 };
-function DropdownMenu({ ...props }) {
-  return /* @__PURE__ */ jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
-}
-function DropdownMenuContent({
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
-    Menu.Positioner,
-    {
-      className: "isolate z-50 outline-none",
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      children: /* @__PURE__ */ jsx(
-        Menu.Popup,
-        {
-          "data-slot": "dropdown-menu-content",
-          className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden", className),
-          ...props
-        }
-      )
-    }
-  ) });
-}
-function DropdownMenuGroup({ ...props }) {
-  return /* @__PURE__ */ jsx(Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
-}
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Menu.GroupLabel,
-    {
-      "data-slot": "dropdown-menu-label",
-      "data-inset": inset,
-      className: cn("text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8", className),
-      ...props
-    }
-  );
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Menu.Item,
-    {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    Menu.CheckboxItem,
-    {
-      "data-slot": "dropdown-menu-checkbox-item",
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      ),
-      checked,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none",
-            "data-slot": "dropdown-menu-checkbox-item-indicator",
-            children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(
-              IconCheck,
-              {}
-            ) })
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-function DropdownMenuSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Menu.Separator,
-    {
-      "data-slot": "dropdown-menu-separator",
-      className: cn("bg-border/50 -mx-1 my-1 h-px", className),
-      ...props
-    }
-  );
-}
 var AccountButton = ({
   className,
   variant = "outline",
@@ -3321,9 +3404,7 @@ function Composer({
     ] })
   ] }) });
 }
-function StarterPrompts({
-  prompts
-}) {
+function StarterPrompts({ prompts }) {
   if (!prompts || prompts.length === 0) {
     return null;
   }
@@ -3477,57 +3558,46 @@ function Thread({
     });
   };
   const showStarterPrompts = messages.length === 0 && starterPrompts && starterPrompts.length > 0 && !isLoadingEvents;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "relative flex flex-col h-full bg-background flex-1 overflow-hidden",
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 pb-36", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "max-w-[48rem] mx-auto w-full p-4",
-                showStarterPrompts && "min-h-full flex flex-col"
-              ),
-              children: isLoadingEvents && messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx(LoadingIndicator, { status: { message: "Loading messages..." } }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                showStarterPrompts && /* @__PURE__ */ jsx(
-                  StarterPrompts,
-                  {
-                    prompts: starterPrompts
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  MessageList,
-                  {
-                    messages,
-                    isLoading,
-                    error,
-                    loadingStatus
-                  }
-                )
-              ] })
-            }
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col h-full bg-background flex-1 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 pb-36", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "max-w-[48rem] mx-auto w-full p-4",
+            showStarterPrompts && "min-h-full flex flex-col"
           ),
-          /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 p-4 w-full", children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto", children: /* @__PURE__ */ jsx(
-          Composer,
-          {
-            value: input,
-            onChange: setInput,
-            onSubmit: handleSubmit,
-            placeholder,
-            isLoading,
-            options,
-            autoFocus,
-            defaultSelectedIds: allDefaultSelectedIds,
-            fileAttachments
-          }
-        ) }) })
-      ]
-    }
-  );
+          children: isLoadingEvents && messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx(LoadingIndicator, { status: { message: "Loading messages..." } }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            showStarterPrompts && /* @__PURE__ */ jsx(StarterPrompts, { prompts: starterPrompts }),
+            /* @__PURE__ */ jsx(
+              MessageList,
+              {
+                messages,
+                isLoading,
+                error,
+                loadingStatus
+              }
+            )
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 p-4 w-full", children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto", children: /* @__PURE__ */ jsx(
+      Composer,
+      {
+        value: input,
+        onChange: setInput,
+        onSubmit: handleSubmit,
+        placeholder,
+        isLoading,
+        options,
+        autoFocus,
+        defaultSelectedIds: allDefaultSelectedIds,
+        fileAttachments
+      }
+    ) }) })
+  ] });
 }
 function ChatHeader({
   leftContent,
@@ -3561,40 +3631,13 @@ function ChatHeader({
     }
   );
 }
-var Dropdown = ({
-  className,
-  trigger,
-  triggerClassName,
-  items
+var ThreadList = ({
+  padding,
+  background,
+  gap,
+  radius = "md"
 }) => {
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(
-      DropdownMenuTrigger,
-      {
-        className: triggerClassName,
-        render: (props) => /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon-xs",
-            ...props,
-            onClick: (e) => {
-              e.stopPropagation();
-              props.onClick?.(e);
-            },
-            children: trigger || /* @__PURE__ */ jsx(IconDotsVertical, { className: "size-3.5" })
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: cn("w-32", className), children: items.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: item.onClick, children: [
-      item.icon,
-      /* @__PURE__ */ jsx("span", { children: item.label })
-    ] }, item.label)) })
-  ] });
-};
-var ThreadList = ({ padding, background, gap, radius = "md" }) => {
-  const { threads, activeThreadId, deleteThread } = useThreads();
+  const { threads, activeThreadId } = useThreads();
   const sortedThreads = React3.useMemo(() => {
     return [...threads].sort((a, b) => {
       const dateA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
@@ -3602,16 +3645,9 @@ var ThreadList = ({ padding, background, gap, radius = "md" }) => {
       return dateB - dateA;
     });
   }, [threads]);
-  const handleDelete = async (threadId) => {
-    try {
-      await deleteThread(threadId);
-    } catch (error) {
-      console.error("Failed to delete thread:", error);
-    }
-  };
   return /* @__PURE__ */ jsx(List, { padding, gap, flex: "1", overflow: "scroll", children: sortedThreads.map((thread) => {
-    thread.id === activeThreadId;
-    return /* @__PURE__ */ jsxs(
+    const isActive = thread.id === activeThreadId;
+    return /* @__PURE__ */ jsx(
       ListItem,
       {
         onClickAction: {
@@ -3620,25 +3656,28 @@ var ThreadList = ({ padding, background, gap, radius = "md" }) => {
             url: `?threadId=${thread.id}`
           }
         },
-        background,
-        radius,
-        padding,
-        gap,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: thread.title || `Thread ${thread.id.slice(0, 8)}` }) }),
-          /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx(
+        background: isActive ? "primary" : "transparent",
+        children: /* @__PURE__ */ jsxs(Box, { group: true, width: "full", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 pr-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: thread.title || `Thread ${thread.id.slice(0, 8)}` }) }),
+          /* @__PURE__ */ jsx(Float, { position: "right-center", showOnHover: true, children: /* @__PURE__ */ jsx(
             Dropdown,
             {
               items: [
                 {
                   label: "Delete",
-                  icon: /* @__PURE__ */ jsx(IconTrash, { className: "size-4" }),
-                  onClick: () => handleDelete(thread.id)
+                  icon: "trash",
+                  onClickAction: {
+                    role: "system",
+                    type: "delete-thread",
+                    data: {
+                      threadId: thread.id
+                    }
+                  }
                 }
               ]
             }
           ) })
-        ]
+        ] })
       },
       thread.id
     );
@@ -3850,14 +3889,7 @@ var ThreadPopover = ({}) => {
     }
   );
   return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        children: /* @__PURE__ */ jsx(IconHistory, { className: "size-4" })
-      }
-    ) }),
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx(IconHistory, { className: "size-4" }) }) }),
     /* @__PURE__ */ jsx(
       PopoverContent,
       {