@melony/react 0.1.51 → 0.1.53

package/dist/index.js

@@ -1,6 +1,6 @@
 import * as React3 from 'react';
 import React3__default, { createContext, useContext, useRef, useEffect, useState, useCallback, useMemo } from 'react';
-import { convertEventsToMessages } from 'melony';
+import { filterEventsBySlots, convertEventsToMessages } from 'melony';
 import { NuqsAdapter } from 'nuqs/adapters/react';
 import { QueryClient, QueryClientProvider, useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
@@ -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';
@@ -189,210 +189,295 @@ function CardContent({ className, ...props }) {
     }
   );
 }
+
+// src/lib/theme-utils.ts
+var paddingMap = {
+  none: "p-0",
+  xs: "p-1",
+  sm: "p-2",
+  md: "p-4",
+  lg: "p-6",
+  xl: "p-8",
+  xxl: "p-12"
+};
+var marginMap = {
+  none: "m-0",
+  xs: "m-1",
+  sm: "m-2",
+  md: "m-4",
+  lg: "m-6",
+  xl: "m-8",
+  xxl: "m-12"
+};
+var gapMap = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8",
+  xxl: "gap-12"
+};
+var colorBgMap = {
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  success: "bg-green-500 text-white",
+  danger: "bg-destructive text-destructive-foreground",
+  warning: "bg-yellow-500 text-white",
+  info: "bg-blue-500 text-white",
+  background: "bg-background text-foreground",
+  foreground: "bg-foreground text-background",
+  muted: "bg-muted text-muted-foreground",
+  mutedForeground: "bg-muted-foreground text-muted",
+  border: "bg-border",
+  transparent: "bg-transparent"
+};
+var colorTextMap = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  success: "text-green-600",
+  danger: "text-destructive",
+  warning: "text-yellow-600",
+  info: "text-blue-600",
+  background: "text-background",
+  foreground: "text-foreground",
+  muted: "text-muted-foreground",
+  mutedForeground: "text-muted-foreground",
+  border: "text-border",
+  transparent: "text-transparent"
+};
+var colorBorderMap = {
+  primary: "border-primary",
+  secondary: "border-secondary",
+  success: "border-green-500",
+  danger: "border-destructive",
+  warning: "border-yellow-500",
+  info: "border-blue-500",
+  background: "border-background",
+  foreground: "border-foreground",
+  muted: "border-muted",
+  mutedForeground: "border-muted-foreground",
+  border: "border-border",
+  transparent: "border-transparent"
+};
+var widthMap = {
+  auto: "w-auto",
+  full: "w-full",
+  min: "w-min",
+  max: "w-max",
+  "1/2": "w-1/2",
+  "1/3": "w-1/3",
+  "2/3": "w-2/3",
+  "1/4": "w-1/4",
+  "3/4": "w-3/4"
+};
+var shadowMap = {
+  none: "shadow-none",
+  sm: "shadow-sm",
+  md: "shadow-md",
+  lg: "shadow-lg",
+  xl: "shadow-xl"
+};
+var radiusMap = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full"
+};
+var alignMap = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var justifyMap = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around"
+};
+var wrapMap = {
+  nowrap: "flex-nowrap",
+  wrap: "flex-wrap",
+  "wrap-reverse": "flex-wrap-reverse"
+};
+var textSizeMap = {
+  none: "text-[0]",
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  xxl: "text-2xl"
+};
+var textAlignMap = {
+  start: "text-left",
+  center: "text-center",
+  end: "text-right",
+  stretch: "text-justify"
+};
+var fontWeightMap = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
 var Card2 = ({
   children,
   title,
   subtitle,
-  className,
-  style
+  background,
+  padding = "md",
+  radius = "md",
+  shadow = "md"
 }) => {
   return /* @__PURE__ */ jsxs(
     Card,
     {
-      className: cn("min-w-96", className),
-      style,
+      className: cn(
+        "min-w-96 relative",
+        background && colorBgMap[background],
+        radius && radiusMap[radius],
+        shadow && shadowMap[shadow]
+      ),
       children: [
         (title || subtitle) && /* @__PURE__ */ jsxs(CardHeader, { className: "pb-3", children: [
           title && /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: title }),
           subtitle && /* @__PURE__ */ jsx(CardDescription, { children: subtitle })
         ] }),
-        /* @__PURE__ */ jsx(CardContent, { className: "flex flex-col gap-4", children })
+        /* @__PURE__ */ jsx(CardContent, { className: cn("flex flex-col gap-4", paddingMap[padding]), children })
       ]
     }
   );
 };
 var Row = ({
   children,
-  gap = "md",
   align = "start",
   justify = "start",
-  wrap = false,
-  className,
-  style
+  wrap = "nowrap",
+  gap = "none",
+  padding = "none",
+  width = "full"
 }) => {
-  const gapClasses = {
-    xs: "gap-0",
-    sm: "gap-1",
-    md: "gap-2",
-    lg: "gap-4",
-    xl: "gap-6"
-  };
-  const alignClasses = {
-    start: "items-start",
-    center: "items-center",
-    end: "items-end",
-    stretch: "items-stretch"
-  };
-  const justifyClasses = {
-    start: "justify-start",
-    center: "justify-center",
-    end: "justify-end",
-    between: "justify-between",
-    around: "justify-around"
-  };
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "flex flex-row w-full",
-        gapClasses[gap] || "gap-4",
-        alignClasses[align] || "items-start",
-        justifyClasses[justify] || "justify-start",
-        wrap ? "flex-wrap" : "flex-nowrap",
-        className
+        "flex flex-row",
+        alignMap[align],
+        justifyMap[justify],
+        wrapMap[wrap],
+        gapMap[gap],
+        paddingMap[padding],
+        widthMap[width]
       ),
-      style,
       children
     }
   );
 };
 var Col = ({
   children,
-  gap = "sm",
   align = "start",
   justify = "start",
-  width,
-  height,
-  padding,
-  overflow,
-  position = "static",
-  className,
-  style
+  gap = "none",
+  width = "auto",
+  height = "auto",
+  padding = "none",
+  background,
+  radius
 }) => {
-  const gapClasses = {
-    xs: "gap-1",
-    sm: "gap-2",
-    md: "gap-4",
-    lg: "gap-6",
-    xl: "gap-8"
-  };
-  const alignClasses = {
-    start: "items-start",
-    center: "items-center",
-    end: "items-end",
-    stretch: "items-stretch"
-  };
-  const justifyClasses = {
-    start: "justify-start",
-    center: "justify-center",
-    end: "justify-end",
-    between: "justify-between",
-    around: "justify-around"
-  };
-  const overflowClasses = {
-    auto: "overflow-auto",
-    hidden: "overflow-hidden",
-    scroll: "overflow-scroll",
-    visible: "overflow-visible"
-  };
-  const positionClasses = {
-    static: "static",
-    relative: "relative",
-    absolute: "absolute",
-    fixed: "fixed",
-    sticky: "sticky"
-  };
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
         "flex flex-col",
-        gapClasses[gap] || "gap-2",
-        alignClasses[align] || "items-start",
-        justifyClasses[justify] || "justify-start",
-        overflow && overflowClasses[overflow],
-        position && positionClasses[position],
-        className
+        alignMap[align],
+        justifyMap[justify],
+        gapMap[gap],
+        paddingMap[padding],
+        widthMap[width],
+        height === "full" && "h-full",
+        background && colorBgMap[background],
+        radius && radiusMap[radius]
       ),
-      style: {
-        width,
-        height,
-        padding,
-        ...style
-      },
       children
     }
   );
 };
 var Box = ({
   children,
-  padding = "md",
-  margin,
+  padding = "none",
+  margin = "none",
   background,
   border = false,
-  borderRadius,
-  width,
-  height,
-  overflow = "visible",
-  className,
-  style
+  borderColor = "border",
+  radius = "none",
+  width = "auto",
+  height = "auto",
+  shadow = "none"
 }) => {
-  const paddingClasses = {
-    xs: "p-1",
-    sm: "p-2",
-    md: "p-4",
-    lg: "p-6",
-    xl: "p-8"
-  };
-  const overflowClasses = {
-    auto: "overflow-auto",
-    hidden: "overflow-hidden",
-    scroll: "overflow-scroll",
-    visible: "overflow-visible"
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative",
+        paddingMap[padding],
+        marginMap[margin],
+        background && colorBgMap[background],
+        border && "border",
+        border && colorBorderMap[borderColor],
+        radiusMap[radius],
+        widthMap[width],
+        height === "full" && "h-full",
+        shadowMap[shadow]
+      ),
+      children
+    }
+  );
+};
+var Float = ({
+  children,
+  position = "top-right",
+  offsetX = "none",
+  offsetY = "none",
+  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"
   };
+  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-");
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        paddingClasses[padding] || "p-4",
-        border && "border rounded-md",
-        overflowClasses[overflow],
-        className
+        "absolute z-10",
+        positionClasses[position],
+        marginXClass,
+        marginYClass,
+        showOnHover && "opacity-0 group-hover:opacity-100 transition-opacity"
       ),
-      style: {
-        margin,
-        background: background ?? void 0,
-        borderRadius,
-        width,
-        height,
-        ...style
-      },
       children
     }
   );
 };
 var Spacer = ({
   size = "md",
-  direction = "vertical",
-  className,
-  style
+  direction = "vertical"
 }) => {
-  const sizeClasses = {
-    xs: "p-0.5",
-    sm: "p-1",
-    md: "p-2",
-    lg: "p-4",
-    xl: "p-8"
-  };
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
         direction === "vertical" ? "w-full" : "h-full",
-        sizeClasses[size] || "p-2",
-        className
-      ),
-      style
+        paddingMap[size]
+      )
     }
   );
 };
@@ -416,27 +501,30 @@ function Separator({
 }
 var Divider = ({
   orientation = "horizontal",
-  className,
-  style
+  color = "border",
+  margin = "md"
 }) => {
   return /* @__PURE__ */ jsx(
     Separator,
     {
       orientation,
-      className: cn("my-4", className),
-      style
+      className: cn(
+        marginMap[margin],
+        colorBgMap[color]
+      )
     }
   );
 };
-var List = ({ children, width, className, style }) => {
+var List = ({ children, padding = "none", gap = "none", flex, overflow }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("flex flex-col list-none p-0 m-0", className),
-      style: {
-        width,
-        ...style
-      },
+      className: cn(
+        "flex flex-col list-none m-0",
+        paddingMap[padding],
+        gapMap[gap]
+      ),
+      style: { flex, overflow },
       children
     }
   );
@@ -450,6 +538,9 @@ var useMelony = (options) => {
   const { initialEvents } = options || {};
   const prevInitialEventsRef = useRef(void 0);
   useEffect(() => {
+    if (initialEvents && initialEvents === client.getState().events) {
+      return;
+    }
     const currentSerialized = initialEvents ? JSON.stringify(initialEvents) : void 0;
     if (currentSerialized !== prevInitialEventsRef.current) {
       if (initialEvents) {
@@ -464,46 +555,15 @@ var useMelony = (options) => {
 };
 var ListItem = ({
   children,
-  orientation = "horizontal",
-  gap = "md",
-  align,
-  justify = "start",
   onClickAction,
-  width,
-  padding = "md",
-  className,
-  style
+  gap = "sm",
+  padding = "sm",
+  background,
+  radius = "md",
+  align = "center"
 }) => {
   const { sendEvent } = useMelony();
-  const paddingClasses = {
-    xs: "px-1.5 py-1",
-    sm: "px-2 py-1.5",
-    md: "px-3 py-1.5",
-    lg: "px-4 py-3",
-    xl: "px-6 py-4"
-  };
   const isInteractive = !!onClickAction;
-  const gapClasses = {
-    xs: "gap-1",
-    sm: "gap-2",
-    md: "gap-3",
-    lg: "gap-4",
-    xl: "gap-6"
-  };
-  const resolvedAlign = align ?? (orientation === "vertical" ? "start" : "center");
-  const alignClasses = {
-    start: "items-start",
-    center: "items-center",
-    end: "items-end",
-    stretch: "items-stretch"
-  };
-  const justifyClasses = {
-    start: "justify-start",
-    center: "justify-center",
-    end: "justify-end",
-    between: "justify-between",
-    around: "justify-around"
-  };
   const handleClick = () => {
     if (onClickAction) {
       sendEvent(onClickAction);
@@ -514,29 +574,23 @@ var ListItem = ({
     {
       onClick: isInteractive ? handleClick : void 0,
       className: cn(
-        "flex rounded-md transition-colors text-sm",
-        orientation === "horizontal" ? "flex-row" : "flex-col",
-        gapClasses[gap] || "gap-3",
-        alignClasses[resolvedAlign],
-        justifyClasses[justify],
-        paddingClasses[padding] || "px-3 py-2",
-        isInteractive ? "cursor-pointer hover:bg-muted" : "cursor-default",
-        className
+        "flex flex-row transition-colors text-sm",
+        paddingMap[padding],
+        background ? colorBgMap[background] : isInteractive && "hover:bg-muted",
+        radiusMap[radius],
+        isInteractive ? "cursor-pointer" : "cursor-default"
       ),
-      style: {
-        width,
-        ...style
-      },
-      children
+      children: /* @__PURE__ */ jsx(Row, { align, gap, children })
     }
   );
 };
 var Image = ({
   src,
   alt,
-  size = "sm",
-  className,
-  style
+  width = "auto",
+  height,
+  radius = "md",
+  objectFit = "cover"
 }) => {
   const [hasError, setHasError] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
@@ -567,11 +621,6 @@ var Image = ({
   };
   const currentImage = gallery[currentIndex] || { src, alt };
   const hasMultiple = gallery.length > 1;
-  const sizes = {
-    sm: "h-11",
-    md: "h-22",
-    lg: "h-44"
-  };
   const handleError = () => {
     setHasError(true);
     setIsLoading(false);
@@ -584,11 +633,11 @@ var Image = ({
       "div",
       {
         className: cn(
-          "flex items-center justify-center rounded-md border bg-muted text-muted-foreground",
-          sizes[size] || "h-11 w-11",
-          className
+          "flex items-center justify-center bg-muted text-muted-foreground",
+          widthMap[width],
+          radiusMap[radius]
         ),
-        style,
+        style: { height: height || "100px" },
         children: /* @__PURE__ */ jsx("span", { className: "text-[10px]", children: "Error" })
       }
     );
@@ -599,10 +648,11 @@ var Image = ({
       {
         ref: triggerRef,
         className: cn(
-          "relative overflow-hidden rounded-md border cursor-pointer",
-          className
+          "relative overflow-hidden cursor-pointer",
+          widthMap[width],
+          radiusMap[radius]
         ),
-        style,
+        style: { height },
         children: [
           /* @__PURE__ */ jsx(
             "img",
@@ -612,9 +662,10 @@ var Image = ({
               onError: handleError,
               onLoad: handleLoad,
               className: cn(
-                "block h-auto w-full transition-opacity duration-200 hover:opacity-90",
+                "block w-full transition-opacity duration-200 hover:opacity-90",
                 isLoading ? "opacity-0" : "opacity-100",
-                sizes[size]
+                objectFit === "cover" ? "object-cover" : objectFit === "contain" ? "object-contain" : "object-fill",
+                height ? "h-full" : "h-auto"
               )
             }
           ),
@@ -679,9 +730,8 @@ var Video = ({
   loop = false,
   muted = false,
   aspectRatio = "16/9",
-  width = "100%",
-  className,
-  style
+  width = "full",
+  radius = "lg"
 }) => {
   const aspectRatios = {
     "16/9": "aspect-video",
@@ -693,14 +743,11 @@ var Video = ({
     "div",
     {
       className: cn(
-        "relative overflow-hidden rounded-lg bg-black shadow-sm",
+        "relative overflow-hidden bg-black shadow-sm",
         aspectRatios[aspectRatio] || "aspect-video",
-        className
+        widthMap[width],
+        radiusMap[radius]
       ),
-      style: {
-        width: typeof width === "number" ? `${width}px` : width,
-        ...style
-      },
       children: /* @__PURE__ */ jsx(
         "video",
         {
@@ -719,37 +766,24 @@ var Video = ({
 };
 var Icon = ({
   name,
-  size,
-  color,
-  className,
-  style
+  size = "md",
+  color = "foreground"
 }) => {
   const IconComponent = ICONS[name];
   if (!IconComponent) return null;
   const sizeMap = {
-    xs: 12,
     sm: 16,
     md: 20,
-    lg: 24,
-    xl: 28,
-    xxl: 32
+    lg: 24
   };
-  const resolvedSize = typeof size === "string" && size in sizeMap ? sizeMap[size] : typeof size === "number" ? size : 20;
-  return /* @__PURE__ */ jsx(
-    "div",
+  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,
     {
-      className: cn("inline-flex items-center justify-center", className),
-      style,
-      children: /* @__PURE__ */ jsx(
-        IconComponent,
-        {
-          size: resolvedSize,
-          color: color || "currentColor",
-          strokeWidth: 1.5
-        }
-      )
+      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",
@@ -793,24 +827,26 @@ function Badge({
 var Badge2 = ({
   label,
   variant = "primary",
-  className,
-  style
+  size = "md"
 }) => {
   const variantMap = {
     primary: "default",
     secondary: "secondary",
     danger: "destructive",
     success: "default",
-    // Mapping success to default/primary
-    warning: "secondary"
-    // Mapping warning to secondary
+    warning: "secondary",
+    outline: "outline"
+  };
+  const sizeClasses = {
+    sm: "text-[10px] px-1.5 py-0",
+    md: "text-xs px-2.5 py-0.5",
+    lg: "text-sm px-3 py-1"
   };
   return /* @__PURE__ */ jsx(
     Badge,
     {
       variant: variantMap[variant] || "default",
-      className,
-      style,
+      className: sizeClasses[size],
       children: label
     }
   );
@@ -818,21 +854,20 @@ var Badge2 = ({
 var Chart = ({
   data,
   chartType = "bar",
-  size = "md",
+  title,
+  height = 250,
   showValues = false,
   showGrid = false,
-  showTooltips = true,
-  className,
-  style
+  showTooltips = true
 }) => {
   const [tooltip, setTooltip] = useState(null);
   if (!Array.isArray(data)) {
-    return /* @__PURE__ */ jsx("div", { className: "p-4 text-destructive border border-destructive/20 rounded-md bg-destructive/5", children: "Error: Chart data must be an array" });
+    return /* @__PURE__ */ jsx("div", { className: "p-4 text-destructive border border-destructive/20 rounded-md bg-destructive/5 text-sm", children: "Error: Chart data must be an array" });
   }
   const maxValue = Math.max(...data.map((d) => d.value), 1);
   const padding = { top: 40, right: 20, bottom: 40, left: 20 };
-  const chartWidth = size === "sm" ? 300 : size === "md" ? 450 : size === "lg" ? 600 : 800;
-  const chartHeight = size === "sm" ? 150 : size === "md" ? 250 : size === "lg" ? 350 : 450;
+  const chartHeight = height;
+  const chartWidth = 600;
   const defaultColors = [
     "hsl(var(--primary))",
     "hsl(var(--chart-1, 217 91% 60%))",
@@ -905,7 +940,7 @@ 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", { width: chartWidth, height: chartHeight + padding.bottom, className: "overflow-visible", children: [
+    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;
@@ -948,7 +983,7 @@ var Chart = ({
       ...item
     }));
     const pathData = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-    return /* @__PURE__ */ jsxs("svg", { width: chartWidth, height: chartHeight + padding.bottom, className: "overflow-visible", children: [
+    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: [
@@ -989,46 +1024,27 @@ var Chart = ({
         return renderBarChart();
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: cn("py-4 overflow-x-auto", className), style, children: renderChart() });
+  return /* @__PURE__ */ jsxs("div", { className: "py-4 w-full", children: [
+    title && /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold mb-4 text-center", children: title }),
+    renderChart()
+  ] });
 };
 var Text = ({
   value,
   size = "md",
   weight = "normal",
   align = "start",
-  className,
-  style
+  color = "foreground"
 }) => {
-  const sizeClasses = {
-    xs: "text-xs",
-    sm: "text-sm",
-    md: "text-base",
-    lg: "text-lg",
-    xl: "text-xl"
-  };
-  const weightClasses = {
-    light: "font-light",
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold"
-  };
-  const alignClasses = {
-    start: "text-left",
-    center: "text-center",
-    end: "text-right",
-    stretch: "text-justify"
-  };
   return /* @__PURE__ */ jsx(
     "span",
     {
       className: cn(
-        sizeClasses[size] || "text-base",
-        weightClasses[weight] || "font-normal",
-        alignClasses[align] || "text-left",
-        className
+        textSizeMap[size],
+        fontWeightMap[weight],
+        textAlignMap[align],
+        colorTextMap[color]
       ),
-      style,
       children: value
     }
   );
@@ -1036,8 +1052,8 @@ var Text = ({
 var Heading = ({
   value,
   level = 2,
-  className,
-  style
+  color = "foreground",
+  align = "start"
 }) => {
   const Tag = `h${level}`;
   const levelClasses = {
@@ -1053,10 +1069,9 @@ var Heading = ({
     {
       className: cn(
         levelClasses[Tag] || levelClasses.h2,
-        "text-foreground",
-        className
+        colorTextMap[color],
+        textAlignMap[align]
       ),
-      style,
       children: value
     }
   );
@@ -1133,13 +1148,12 @@ var Input2 = ({
   inputType = "text",
   placeholder,
   defaultValue,
-  value,
   label,
   name,
   disabled,
-  onChangeAction,
-  className,
-  style
+  required,
+  width = "full",
+  onChangeAction
 }) => {
   const { sendEvent } = useMelony();
   const handleChange = (e) => {
@@ -1153,8 +1167,11 @@ var Input2 = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxs(Field, { className: cn("w-full", className), style, children: [
-    label && /* @__PURE__ */ jsx(FieldTitle, { children: label }),
+  return /* @__PURE__ */ jsxs(Field, { className: cn(widthMap[width]), children: [
+    label && /* @__PURE__ */ jsxs(FieldTitle, { children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+    ] }),
     /* @__PURE__ */ jsx(
       Input,
       {
@@ -1163,9 +1180,9 @@ var Input2 = ({
         id: name,
         placeholder,
         defaultValue,
-        value,
         disabled,
-        onChange: handleChange
+        onChange: handleChange,
+        required
       }
     )
   ] });
@@ -1186,14 +1203,13 @@ function Textarea({ className, ...props }) {
 var Textarea2 = ({
   placeholder,
   defaultValue,
-  value,
   label,
   name,
   disabled,
   rows,
-  onChangeAction,
-  className,
-  style
+  required,
+  width = "full",
+  onChangeAction
 }) => {
   const { sendEvent } = useMelony();
   const handleChange = (e) => {
@@ -1207,8 +1223,11 @@ var Textarea2 = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxs(Field, { className: cn("w-full", className), style, children: [
-    label && /* @__PURE__ */ jsx(FieldTitle, { children: label }),
+  return /* @__PURE__ */ jsxs(Field, { className: cn(widthMap[width]), children: [
+    label && /* @__PURE__ */ jsxs(FieldTitle, { children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+    ] }),
     /* @__PURE__ */ jsx(
       Textarea,
       {
@@ -1216,10 +1235,10 @@ var Textarea2 = ({
         id: name,
         placeholder,
         defaultValue,
-        value,
         disabled,
         rows,
-        onChange: handleChange
+        onChange: handleChange,
+        required
       }
     )
   ] });
@@ -1362,14 +1381,13 @@ function SelectScrollDownButton({
 var Select2 = ({
   options,
   defaultValue,
-  value,
   label,
   name,
   disabled,
+  required,
+  width = "full",
   placeholder,
-  onChangeAction,
-  className,
-  style
+  onChangeAction
 }) => {
   const { sendEvent } = useMelony();
   const handleValueChange = (val) => {
@@ -1383,15 +1401,18 @@ var Select2 = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxs(Field, { className: cn("w-full", className), style, children: [
-    label && /* @__PURE__ */ jsx(FieldTitle, { children: label }),
+  return /* @__PURE__ */ jsxs(Field, { className: cn(widthMap[width]), children: [
+    label && /* @__PURE__ */ jsxs(FieldTitle, { children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+    ] }),
     /* @__PURE__ */ jsxs(
       Select,
       {
         defaultValue,
-        value,
         disabled,
-        onValueChange: (value2) => handleValueChange(value2 || ""),
+        onValueChange: (value) => handleValueChange(value || ""),
+        required,
         children: [
           /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
           /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
@@ -1404,15 +1425,18 @@ var Label2 = ({
   value,
   htmlFor,
   required,
-  className,
-  style
+  size = "md",
+  color = "foreground"
 }) => {
   return /* @__PURE__ */ jsxs(
     Label,
     {
       htmlFor,
-      className: cn("flex items-center gap-1", className),
-      style,
+      className: cn(
+        "flex items-center gap-1",
+        textSizeMap[size],
+        colorTextMap[color]
+      ),
       children: [
         value,
         required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
@@ -1424,11 +1448,8 @@ var Checkbox = ({
   label,
   name,
   checked,
-  defaultChecked,
   disabled,
-  onChangeAction,
-  className,
-  style
+  onChangeAction
 }) => {
   const { sendEvent } = useMelony();
   const handleChange = (e) => {
@@ -1442,7 +1463,7 @@ var Checkbox = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), style, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -1450,7 +1471,6 @@ var Checkbox = ({
         name,
         id: name,
         checked,
-        defaultChecked,
         disabled,
         onChange: handleChange,
         className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
@@ -1461,10 +1481,8 @@ var Checkbox = ({
       {
         htmlFor: name,
         value: label,
-        className: cn(
-          "cursor-pointer select-none text-sm font-medium leading-none",
-          disabled && "cursor-not-allowed opacity-50"
-        )
+        color: disabled ? "muted" : "foreground",
+        size: "sm"
       }
     )
   ] });
@@ -1699,19 +1717,11 @@ var ColorPicker = ({
   name,
   label,
   defaultValue = "#000000",
-  value: controlledValue,
   onChangeAction,
-  disabled,
-  className,
-  style
+  disabled
 }) => {
   const { sendEvent } = useMelony();
-  const [color, setColor] = useState(controlledValue || defaultValue);
-  useEffect(() => {
-    if (controlledValue !== void 0) {
-      setColor(controlledValue);
-    }
-  }, [controlledValue]);
+  const [color, setColor] = useState(defaultValue);
   const handleColorChange = (newColor) => {
     setColor(newColor);
     if (onChangeAction) {
@@ -1724,7 +1734,7 @@ var ColorPicker = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxs(Field, { className: cn("w-full", className), style, children: [
+  return /* @__PURE__ */ jsxs(Field, { className: "w-full", children: [
     label && /* @__PURE__ */ jsx(FieldTitle, { children: label }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxs(Popover, { children: [
@@ -1791,13 +1801,10 @@ var RadioGroup = ({
   name,
   options,
   defaultValue,
-  value,
   label,
   disabled,
   orientation = "vertical",
-  onChangeAction,
-  className,
-  style
+  onChangeAction
 }) => {
   const { sendEvent } = useMelony();
   const handleChange = (e) => {
@@ -1811,8 +1818,8 @@ var RadioGroup = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), style, children: [
-    label && /* @__PURE__ */ jsx(Label2, { value: label, className: "text-sm font-semibold" }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    label && /* @__PURE__ */ jsx(Label2, { value: label }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -1835,8 +1842,7 @@ var RadioGroup = ({
                     name,
                     id: radioId,
                     value: option.value,
-                    defaultChecked: defaultValue === option.value ? true : void 0,
-                    checked: 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"
@@ -1847,10 +1853,8 @@ var RadioGroup = ({
                   {
                     htmlFor: radioId,
                     value: option.label,
-                    className: cn(
-                      "cursor-pointer select-none text-sm font-medium leading-none",
-                      isDisabled && "cursor-not-allowed opacity-50"
-                    )
+                    size: "sm",
+                    color: isDisabled ? "muted" : "foreground"
                   }
                 )
               ]
@@ -1907,26 +1911,34 @@ function Button({
   );
 }
 var Button2 = ({
-  type,
+  type = "button",
   label,
   variant = "primary",
-  size = "default",
+  size = "md",
   disabled = false,
-  fullWidth = false,
+  width,
   onClickAction,
-  className,
-  style
+  justify = "center"
 }) => {
   const { sendEvent } = useMelony();
   const variantMap = {
     primary: "default",
     secondary: "secondary",
     danger: "destructive",
+    success: "default",
+    // We might want a custom success style later
     outline: "outline",
     ghost: "ghost",
-    link: "link",
-    success: "default"
-    // Success doesn't have a direct shadcn mapping in base variant, default is usually primary
+    link: "link"
+  };
+  const widthMap2 = {
+    full: "w-full",
+    auto: "w-auto",
+    "1/2": "w-1/2",
+    "1/3": "w-1/3",
+    "2/3": "w-2/3",
+    "1/4": "w-1/4",
+    "3/4": "w-3/4"
   };
   return /* @__PURE__ */ jsx(
     Button,
@@ -1935,8 +1947,7 @@ var Button2 = ({
       variant: variantMap[variant] || "default",
       size: size === "md" ? "default" : size,
       disabled,
-      className: cn(fullWidth ? "w-full" : void 0, className),
-      style,
+      className: cn(width && widthMap2[width], justifyMap[justify]),
       onClick: () => {
         if (onClickAction) {
           sendEvent(onClickAction);
@@ -1951,10 +1962,9 @@ var Upload = ({
   multiple = false,
   accept,
   onUploadAction,
-  className,
-  style,
   initialFiles,
-  mode = "append"
+  mode = "append",
+  disabled
 }) => {
   const { sendEvent, events } = useMelony();
   const fileInputRef = useRef(null);
@@ -2024,7 +2034,7 @@ var Upload = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-block", className), style, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -2034,11 +2044,11 @@ var Upload = ({
         multiple,
         accept,
         className: "hidden",
-        disabled: isUploading
+        disabled: isUploading || disabled
       }
     ),
     /* @__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, size: "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
       ),
@@ -2046,12 +2056,11 @@ var Upload = ({
         Button,
         {
           type: "button",
-          disabled: isUploading,
+          disabled: isUploading || disabled,
           onClick: () => fileInputRef.current?.click(),
-          className: "gap-2",
-          variant: status === "error" ? "destructive" : status === "success" ? "outline" : "default",
+          variant: "default",
           children: [
-            isUploading ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-4 w-4 animate-spin" }) : status === "success" ? /* @__PURE__ */ jsx(IconCheck, { className: "h-4 w-4 text-green-500" }) : status === "error" ? /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconUpload, { className: "h-4 w-4" }),
+            isUploading ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-4 w-4 animate-spin mr-2" }) : status === "success" ? /* @__PURE__ */ jsx(IconCheck, { className: "h-4 w-4 text-green-500 mr-2" }) : status === "error" ? /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsx(IconUpload, { className: "h-4 w-4 mr-2" }),
             status === "success" ? "Uploaded" : status === "error" ? "Failed" : label
           ]
         }
@@ -2062,8 +2071,7 @@ var Upload = ({
 var Form = ({
   children,
   onSubmitAction,
-  className,
-  style
+  gap = "md"
 }) => {
   const { sendEvent } = useMelony();
   const [isSubmitted, setIsSubmitted] = useState(false);
@@ -2077,7 +2085,7 @@ var Form = ({
     });
     if (onSubmitAction) {
       setIsSubmitted(true);
-      if ("type" in onSubmitAction) {
+      if (typeof onSubmitAction === "object" && "type" in onSubmitAction) {
         sendEvent({
           ...onSubmitAction,
           data: {
@@ -2085,7 +2093,7 @@ var Form = ({
             ...data
           }
         });
-      } else {
+      } else if (typeof onSubmitAction === "function") {
         sendEvent(onSubmitAction(data));
       }
     }
@@ -2094,13 +2102,13 @@ var Form = ({
     "form",
     {
       onSubmit: handleSubmit,
-      className: cn("w-full", className),
-      style,
+      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 gap-4 transition-opacity",
+            "flex flex-col transition-opacity",
+            gapMap[gap],
             isSubmitted && "opacity-60 pointer-events-none"
           ),
           children
@@ -2109,6 +2117,165 @@ var Form = ({
     }
   );
 };
+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 Dropdown = ({
+  items = [],
+  children
+}) => {
+  const { sendEvent } = useMelony();
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenuTrigger,
+      {
+        render: (props) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-xs",
+            ...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;
   const typeMap = {
@@ -2129,6 +2296,7 @@ function UIRenderer({ node }) {
     spacer: Spacer,
     divider: Divider,
     box: Box,
+    float: Float,
     image: Image,
     video: Video,
     icon: Icon,
@@ -2137,7 +2305,8 @@ function UIRenderer({ node }) {
     form: Form,
     chart: Chart,
     label: Label2,
-    upload: Upload
+    upload: Upload,
+    dropdown: Dropdown
   };
   const Component = typeMap[type];
   if (!Component) {
@@ -2148,8 +2317,7 @@ function UIRenderer({ node }) {
     ] });
   }
   const renderedChildren = children?.map((child, i) => /* @__PURE__ */ jsx(UIRenderer, { node: child }, i));
-  const componentProps = { ...props };
-  return /* @__PURE__ */ jsx(Component, { ...componentProps, children: renderedChildren });
+  return /* @__PURE__ */ jsx(Component, { ...props, children: renderedChildren });
 }
 var MelonyContext = createContext(
   void 0
@@ -2204,8 +2372,8 @@ var MelonyContextProviderInner = ({
               window.history.replaceState(null, "", url);
             } else {
               window.history.pushState(null, "", url);
-              window.dispatchEvent(new PopStateEvent("popstate"));
             }
+            window.dispatchEvent(new PopStateEvent("popstate"));
           }
           return true;
         }
@@ -2321,123 +2489,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",
@@ -3007,6 +3058,16 @@ var useThreads = () => {
   }
   return context;
 };
+var useSurface = (options) => {
+  const { events } = useMelony();
+  const surfaceEvents = useMemo(() => {
+    const filtered = events.filter((event) => event.surface === options.name);
+    return filterEventsBySlots(filtered);
+  }, [events, options.name]);
+  return {
+    events: surfaceEvents
+  };
+};
 function Composer({
   value,
   onChange,
@@ -3304,8 +3365,7 @@ function Composer({
   ] }) });
 }
 function StarterPrompts({
-  prompts,
-  onPromptClick
+  prompts
 }) {
   if (!prompts || prompts.length === 0) {
     return null;
@@ -3323,32 +3383,15 @@ function StarterPrompts({
           role: "user",
           data: { content: item.prompt }
         },
-        className: "w-full justify-start"
+        justify: "start"
       },
       index
     )) })
   ] });
 }
 function MessageContent({ events }) {
-  const firstSlotIndexes = /* @__PURE__ */ new Map();
-  const latestSlotIndexes = /* @__PURE__ */ new Map();
-  events.forEach((event, index) => {
-    if (event.slot) {
-      if (!firstSlotIndexes.has(event.slot)) {
-        firstSlotIndexes.set(event.slot, index);
-      }
-      latestSlotIndexes.set(event.slot, index);
-    }
-  });
-  return /* @__PURE__ */ jsx(Fragment, { children: events.map((event, index) => {
-    let displayEvent = event;
-    if (event.slot) {
-      if (firstSlotIndexes.get(event.slot) !== index) {
-        return null;
-      }
-      const latestIndex = latestSlotIndexes.get(event.slot);
-      displayEvent = events[latestIndex];
-    }
+  const displayEvents = useMemo(() => filterEventsBySlots(events), [events]);
+  return /* @__PURE__ */ jsx(Fragment, { children: displayEvents.map((displayEvent, index) => {
     if (displayEvent.type === "text-delta") {
       return /* @__PURE__ */ jsx("span", { children: displayEvent.data?.delta }, index);
     }
@@ -3419,10 +3462,8 @@ function MessageList({
   ] });
 }
 function Thread({
-  className,
   placeholder = "Type a message...",
   starterPrompts: localStarterPrompts,
-  onStarterPromptClick,
   options: localOptions,
   autoFocus = false,
   defaultSelectedIds
@@ -3438,9 +3479,14 @@ function Thread({
   } = useMelony({
     initialEvents: threadEvents
   });
-  const messages = initialMessages.filter(
-    (x) => ["user", "assistant"].includes(x.role)
-  );
+  const messages = useMemo(() => {
+    return initialMessages.map((msg) => ({
+      ...msg,
+      content: msg.content.filter((event) => !event.surface)
+    })).filter(
+      (msg) => ["user", "assistant"].includes(msg.role) && msg.content.length > 0
+    );
+  }, [initialMessages]);
   const starterPrompts = localStarterPrompts ?? config?.starterPrompts;
   const options = localOptions ?? config?.options;
   const fileAttachments = config?.fileAttachments;
@@ -3473,18 +3519,11 @@ function Thread({
       }
     });
   };
-  const handleStarterPromptClick = (prompt) => {
-    if (onStarterPromptClick) {
-      onStarterPromptClick(prompt);
-    } else {
-      handleSubmit(void 0, prompt);
-    }
-  };
   const showStarterPrompts = messages.length === 0 && starterPrompts && starterPrompts.length > 0 && !isLoadingEvents;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("relative flex flex-col h-full bg-background", className),
+      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(
@@ -3498,8 +3537,7 @@ function Thread({
                 showStarterPrompts && /* @__PURE__ */ jsx(
                   StarterPrompts,
                   {
-                    prompts: starterPrompts,
-                    onPromptClick: handleStarterPromptClick
+                    prompts: starterPrompts
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -3566,40 +3604,8 @@ function ChatHeader({
     }
   );
 }
-var Dropdown = ({
-  className,
-  trigger,
-  triggerClassName,
-  items
-}) => {
-  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 = ({ className }) => {
-  const { threads, activeThreadId, deleteThread } = useThreads();
+var ThreadList = ({ padding, background, gap, radius = "md" }) => {
+  const { threads, activeThreadId } = useThreads();
   const sortedThreads = React3.useMemo(() => {
     return [...threads].sort((a, b) => {
       const dateA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
@@ -3607,15 +3613,8 @@ var ThreadList = ({ className }) => {
       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, { className, children: sortedThreads.map((thread) => {
-    const isActive = thread.id === activeThreadId;
+  return /* @__PURE__ */ jsx(List, { padding, gap, flex: "1", overflow: "scroll", children: sortedThreads.map((thread) => {
+    thread.id === activeThreadId;
     return /* @__PURE__ */ jsxs(
       ListItem,
       {
@@ -3625,7 +3624,10 @@ var ThreadList = ({ className }) => {
             url: `?threadId=${thread.id}`
           }
         },
-        className: isActive ? "bg-muted text-foreground group" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground group",
+        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(
@@ -3634,8 +3636,14 @@ var ThreadList = ({ className }) => {
               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
+                    }
+                  }
                 }
               ]
             }
@@ -3725,13 +3733,15 @@ function PopupChat({
           placeholder,
           starterPrompts,
           options,
-          className: "h-full",
           defaultSelectedIds
         }
       ) : /* @__PURE__ */ jsx(
         ThreadList,
         {
-          className: "h-full"
+          padding: "md",
+          gap: "md",
+          background: "muted",
+          radius: "md"
         }
       ) })
     ] }),
@@ -3749,9 +3759,10 @@ function PopupChat({
     )
   ] });
 }
-function Sidebar({ side, children, className }) {
+function Sidebar({ side, children, width = "1/4" }) {
   const { leftCollapsed, rightCollapsed } = useSidebar();
   const collapsed = side === "left" ? leftCollapsed : rightCollapsed;
+  const widthClass = widthMap[width];
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3759,8 +3770,9 @@ function Sidebar({ side, children, className }) {
         "flex-shrink-0 border-border bg-background transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
         side === "left" ? "border-r" : "border-l",
         collapsed ? "w-0 border-r-0 border-l-0 min-w-0" : "",
-        !collapsed && className
+        !collapsed && widthClass
       ),
+      style: !collapsed && !widthClass ? { width } : void 0,
       children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-h-0 flex flex-col", children })
     }
   );
@@ -3789,6 +3801,10 @@ function FullChat({
     ) }) })
   ] });
 }
+function Surface({ name, children }) {
+  const { events } = useSurface({ name });
+  return /* @__PURE__ */ jsx(Fragment, { children: children(events) });
+}
 function SidebarToggle({ side, className }) {
   const {
     leftCollapsed,
@@ -3828,13 +3844,7 @@ function SidebarToggle({ side, className }) {
   }
   return null;
 }
-var ThreadPopover = ({
-  className,
-  buttonClassName,
-  buttonVariant = "ghost",
-  buttonSize = "icon",
-  emptyState
-}) => {
+var ThreadPopover = ({}) => {
   const [isOpen, setIsOpen] = React3.useState(false);
   useHotkeys(
     "h",
@@ -3853,20 +3863,19 @@ var ThreadPopover = ({
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       Button,
       {
-        variant: buttonVariant,
-        size: buttonSize,
-        className: cn(buttonClassName),
+        variant: "ghost",
+        size: "icon",
         children: /* @__PURE__ */ jsx(IconHistory, { className: "size-4" })
       }
     ) }),
     /* @__PURE__ */ jsx(
       PopoverContent,
       {
-        className: cn("w-80 p-0", className),
+        className: "w-80 p-0",
         side: "bottom",
         align: "start",
         sideOffset: 8,
-        children: /* @__PURE__ */ jsx("div", { className: "flex flex-col h-[400px]", children: /* @__PURE__ */ jsx(ThreadList, { emptyState, className: "h-full" }) })
+        children: /* @__PURE__ */ jsx("div", { className: "flex flex-col h-[400px]", children: /* @__PURE__ */ jsx(ThreadList, {}) })
       }
     )
   ] });
@@ -3957,7 +3966,9 @@ function ThemeToggle() {
   );
 }
 var CreateThreadListItem = ({
-  className
+  padding = "sm",
+  background,
+  radius = "md"
 }) => {
   const { createThread } = useThreads();
   const [isCreating, setIsCreating] = React3.useState(false);
@@ -3994,7 +4005,9 @@ var CreateThreadListItem = ({
           url: "?"
         }
       },
-      className: cn(className),
+      padding,
+      background,
+      radius,
       children: [
         /* @__PURE__ */ jsx(IconPlus, { className: "size-4" }),
         "New chat"
@@ -4003,6 +4016,6 @@ var CreateThreadListItem = ({
   );
 };
 
-export { AccountButton, AuthContext, AuthProvider, Badge2 as Badge, Box, Button2 as Button, Card2 as Card, Chart, ChatHeader, Checkbox, Col, ColorPicker, Composer, CreateThreadButton, CreateThreadListItem, Divider, Dropdown, Form, FullChat, Heading, Hidden, Image, Input2 as Input, Label2 as Label, List, ListItem, MelonyContext, MelonyProvider, PopupChat, RadioGroup, Row, Select2 as Select, Sidebar, SidebarContext, SidebarProvider, SidebarToggle, Spacer, Text, Textarea2 as Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadPopover, ThreadProvider, UIRenderer, Upload, WelcomeScreen, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };
+export { AccountButton, AuthContext, AuthProvider, Badge2 as Badge, Box, Button2 as Button, Card2 as Card, Chart, ChatHeader, Checkbox, Col, ColorPicker, Composer, CreateThreadButton, CreateThreadListItem, Divider, Dropdown, Float, Form, FullChat, Heading, Hidden, Image, Input2 as Input, Label2 as Label, List, ListItem, MelonyContext, MelonyProvider, PopupChat, RadioGroup, Row, Select2 as Select, Sidebar, SidebarContext, SidebarProvider, SidebarToggle, Spacer, Surface, Text, Textarea2 as Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadPopover, ThreadProvider, UIRenderer, Upload, WelcomeScreen, useAuth, useMelony, useScreenSize, useSidebar, useSurface, useTheme, useThreads };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map