@melony/react 0.1.50 → 0.1.52

package/dist/index.cjs

@@ -209,210 +209,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(CardHeader, { className: "pb-3", children: [
           title && /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-lg", children: title }),
           subtitle && /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: subtitle })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "flex flex-col gap-4", children })
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
         direction === "vertical" ? "w-full" : "h-full",
-        sizeClasses[size] || "p-2",
-        className
-      ),
-      style
+        paddingMap[size]
+      )
     }
   );
 };
@@ -436,27 +521,30 @@ function Separator({
 }
 var Divider = ({
   orientation = "horizontal",
-  className,
-  style
+  color = "border",
+  margin = "md"
 }) => {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
     }
   );
@@ -470,6 +558,9 @@ var useMelony = (options) => {
   const { initialEvents } = options || {};
   const prevInitialEventsRef = React3.useRef(void 0);
   React3.useEffect(() => {
+    if (initialEvents && initialEvents === client.getState().events) {
+      return;
+    }
     const currentSerialized = initialEvents ? JSON.stringify(initialEvents) : void 0;
     if (currentSerialized !== prevInitialEventsRef.current) {
       if (initialEvents) {
@@ -484,46 +575,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);
@@ -534,29 +594,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__ */ jsxRuntime.jsx(Row, { align, gap, children })
     }
   );
 };
 var Image = ({
   src,
   alt,
-  size = "sm",
-  className,
-  style
+  width = "auto",
+  height,
+  radius = "md",
+  objectFit = "cover"
 }) => {
   const [hasError, setHasError] = React3.useState(false);
   const [isLoading, setIsLoading] = React3.useState(true);
@@ -587,11 +641,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);
@@ -604,11 +653,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__ */ jsxRuntime.jsx("span", { className: "text-[10px]", children: "Error" })
       }
     );
@@ -619,10 +668,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__ */ jsxRuntime.jsx(
             "img",
@@ -632,9 +682,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"
               )
             }
           ),
@@ -699,9 +750,8 @@ var Video = ({
   loop = false,
   muted = false,
   aspectRatio = "16/9",
-  width = "100%",
-  className,
-  style
+  width = "full",
+  radius = "lg"
 }) => {
   const aspectRatios = {
     "16/9": "aspect-video",
@@ -713,14 +763,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__ */ jsxRuntime.jsx(
         "video",
         {
@@ -739,37 +786,24 @@ var Video = ({
 };
 var Icon = ({
   name,
-  size,
-  color,
-  className,
-  style
+  size = "md",
+  color = "foreground"
 }) => {
   const IconComponent = ICONS__namespace[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__ */ jsxRuntime.jsx(
-    "div",
+  const resolvedSize = typeof size === "number" ? size : sizeMap[size] || 20;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-flex items-center justify-center", colorTextMap[color]), children: /* @__PURE__ */ jsxRuntime.jsx(
+    IconComponent,
     {
-      className: cn("inline-flex items-center justify-center", className),
-      style,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        IconComponent,
-        {
-          size: resolvedSize,
-          color: color || "currentColor",
-          strokeWidth: 1.5
-        }
-      )
+      size: resolvedSize,
+      strokeWidth: 1.5
     }
-  );
+  ) });
 };
 var badgeVariants = classVarianceAuthority.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",
@@ -813,24 +847,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__ */ jsxRuntime.jsx(
     Badge,
     {
       variant: variantMap[variant] || "default",
-      className,
-      style,
+      className: sizeClasses[size],
       children: label
     }
   );
@@ -838,21 +874,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] = React3.useState(null);
   if (!Array.isArray(data)) {
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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%))",
@@ -925,7 +960,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__ */ jsxRuntime.jsxs("svg", { width: chartWidth, height: chartHeight + padding.bottom, className: "overflow-visible", children: [
+    return /* @__PURE__ */ jsxRuntime.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;
@@ -968,7 +1003,7 @@ var Chart = ({
       ...item
     }));
     const pathData = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: chartWidth, height: chartHeight + padding.bottom, className: "overflow-visible", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: `0 0 ${chartWidth} ${chartHeight + padding.bottom}`, className: "w-full h-auto overflow-visible", children: [
       renderGrid(),
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: pathData, fill: "none", stroke: getColor(0), strokeWidth: 3, className: "transition-all" }),
       points.map((point, index) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
@@ -1009,46 +1044,27 @@ var Chart = ({
         return renderBarChart();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-4 overflow-x-auto", className), style, children: renderChart() });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-4 w-full", children: [
+    title && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
     }
   );
@@ -1056,8 +1072,8 @@ var Text = ({
 var Heading = ({
   value,
   level = 2,
-  className,
-  style
+  color = "foreground",
+  align = "start"
 }) => {
   const Tag = `h${level}`;
   const levelClasses = {
@@ -1073,10 +1089,9 @@ var Heading = ({
     {
       className: cn(
         levelClasses[Tag] || levelClasses.h2,
-        "text-foreground",
-        className
+        colorTextMap[color],
+        textAlignMap[align]
       ),
-      style,
       children: value
     }
   );
@@ -1153,13 +1168,12 @@ var Input2 = ({
   inputType = "text",
   placeholder,
   defaultValue,
-  value,
   label,
   name,
   disabled,
-  onChangeAction,
-  className,
-  style
+  required,
+  width = "full",
+  onChangeAction
 }) => {
   const { sendEvent } = useMelony();
   const handleChange = (e) => {
@@ -1173,8 +1187,11 @@ var Input2 = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className: cn("w-full", className), style, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(FieldTitle, { children: label }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className: cn(widthMap[width]), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(FieldTitle, { children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
@@ -1183,9 +1200,9 @@ var Input2 = ({
         id: name,
         placeholder,
         defaultValue,
-        value,
         disabled,
-        onChange: handleChange
+        onChange: handleChange,
+        required
       }
     )
   ] });
@@ -1206,14 +1223,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) => {
@@ -1227,8 +1243,11 @@ var Textarea2 = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className: cn("w-full", className), style, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(FieldTitle, { children: label }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className: cn(widthMap[width]), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(FieldTitle, { children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       Textarea,
       {
@@ -1236,10 +1255,10 @@ var Textarea2 = ({
         id: name,
         placeholder,
         defaultValue,
-        value,
         disabled,
         rows,
-        onChange: handleChange
+        onChange: handleChange,
+        required
       }
     )
   ] });
@@ -1382,14 +1401,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) => {
@@ -1403,15 +1421,18 @@ var Select2 = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className: cn("w-full", className), style, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(FieldTitle, { children: label }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className: cn(widthMap[width]), children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(FieldTitle, { children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       Select,
       {
         defaultValue,
-        value,
         disabled,
-        onValueChange: (value2) => handleValueChange(value2 || ""),
+        onValueChange: (value) => handleValueChange(value || ""),
+        required,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
           /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
@@ -1424,15 +1445,18 @@ var Label2 = ({
   value,
   htmlFor,
   required,
-  className,
-  style
+  size = "md",
+  color = "foreground"
 }) => {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-destructive", children: "*" })
@@ -1444,11 +1468,8 @@ var Checkbox = ({
   label,
   name,
   checked,
-  defaultChecked,
   disabled,
-  onChangeAction,
-  className,
-  style
+  onChangeAction
 }) => {
   const { sendEvent } = useMelony();
   const handleChange = (e) => {
@@ -1462,7 +1483,7 @@ var Checkbox = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", className), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -1470,7 +1491,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"
@@ -1481,10 +1501,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"
       }
     )
   ] });
@@ -1719,19 +1737,11 @@ var ColorPicker = ({
   name,
   label,
   defaultValue = "#000000",
-  value: controlledValue,
   onChangeAction,
-  disabled,
-  className,
-  style
+  disabled
 }) => {
   const { sendEvent } = useMelony();
-  const [color, setColor] = React3.useState(controlledValue || defaultValue);
-  React3.useEffect(() => {
-    if (controlledValue !== void 0) {
-      setColor(controlledValue);
-    }
-  }, [controlledValue]);
+  const [color, setColor] = React3.useState(defaultValue);
   const handleColorChange = (newColor) => {
     setColor(newColor);
     if (onChangeAction) {
@@ -1744,7 +1754,7 @@ var ColorPicker = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className: cn("w-full", className), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { className: "w-full", children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(FieldTitle, { children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
@@ -1811,13 +1821,10 @@ var RadioGroup = ({
   name,
   options,
   defaultValue,
-  value,
   label,
   disabled,
   orientation = "vertical",
-  onChangeAction,
-  className,
-  style
+  onChangeAction
 }) => {
   const { sendEvent } = useMelony();
   const handleChange = (e) => {
@@ -1831,8 +1838,8 @@ var RadioGroup = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-3", className), style, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(Label2, { value: label, className: "text-sm font-semibold" }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(Label2, { value: label }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -1855,8 +1862,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"
@@ -1867,10 +1873,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"
                   }
                 )
               ]
@@ -1927,26 +1931,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__ */ jsxRuntime.jsx(
     Button,
@@ -1955,8 +1967,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);
@@ -1971,10 +1982,9 @@ var Upload = ({
   multiple = false,
   accept,
   onUploadAction,
-  className,
-  style,
   initialFiles,
-  mode = "append"
+  mode = "append",
+  disabled
 }) => {
   const { sendEvent, events } = useMelony();
   const fileInputRef = React3.useRef(null);
@@ -2044,7 +2054,7 @@ var Upload = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-block", className), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-block", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -2054,11 +2064,11 @@ var Upload = ({
         multiple,
         accept,
         className: "hidden",
-        disabled: isUploading
+        disabled: isUploading || disabled
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 mb-2 items-center", children: [
-      showInitialFiles && initialFiles?.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(Image, { src: file.url, alt: file.name, size: "md" }, index)),
+      showInitialFiles && initialFiles?.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(Image, { src: file.url, alt: file.name, width: "min", radius: "md" }, index)),
       displayEvents.map(
         (event, index) => event.ui ? /* @__PURE__ */ jsxRuntime.jsx(UIRenderer, { node: event.ui }, index) : null
       ),
@@ -2066,12 +2076,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__ */ jsxRuntime.jsx(ICONS.IconLoader2, { className: "h-4 w-4 animate-spin" }) : status === "success" ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconCheck, { className: "h-4 w-4 text-green-500" }) : status === "error" ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconX, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUpload, { className: "h-4 w-4" }),
+            isUploading ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLoader2, { className: "h-4 w-4 animate-spin mr-2" }) : status === "success" ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconCheck, { className: "h-4 w-4 text-green-500 mr-2" }) : status === "error" ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconX, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUpload, { className: "h-4 w-4 mr-2" }),
             status === "success" ? "Uploaded" : status === "error" ? "Failed" : label
           ]
         }
@@ -2082,8 +2091,7 @@ var Upload = ({
 var Form = ({
   children,
   onSubmitAction,
-  className,
-  style
+  gap = "md"
 }) => {
   const { sendEvent } = useMelony();
   const [isSubmitted, setIsSubmitted] = React3.useState(false);
@@ -2097,7 +2105,7 @@ var Form = ({
     });
     if (onSubmitAction) {
       setIsSubmitted(true);
-      if ("type" in onSubmitAction) {
+      if (typeof onSubmitAction === "object" && "type" in onSubmitAction) {
         sendEvent({
           ...onSubmitAction,
           data: {
@@ -2105,7 +2113,7 @@ var Form = ({
             ...data
           }
         });
-      } else {
+      } else if (typeof onSubmitAction === "function") {
         sendEvent(onSubmitAction(data));
       }
     }
@@ -2114,13 +2122,13 @@ var Form = ({
     "form",
     {
       onSubmit: handleSubmit,
-      className: cn("w-full", className),
-      style,
+      className: "w-full",
       children: /* @__PURE__ */ jsxRuntime.jsx("fieldset", { disabled: isSubmitted, className: "m-0 border-0 p-0", children: /* @__PURE__ */ jsxRuntime.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
@@ -2149,6 +2157,7 @@ function UIRenderer({ node }) {
     spacer: Spacer,
     divider: Divider,
     box: Box,
+    float: Float,
     image: Image,
     video: Video,
     icon: Icon,
@@ -2168,8 +2177,7 @@ function UIRenderer({ node }) {
     ] });
   }
   const renderedChildren = children?.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(UIRenderer, { node: child }, i));
-  const componentProps = { ...props };
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...componentProps, children: renderedChildren });
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, children: renderedChildren });
 }
 var MelonyContext = React3.createContext(
   void 0
@@ -2224,8 +2232,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;
         }
@@ -3027,6 +3035,16 @@ var useThreads = () => {
   }
   return context;
 };
+var useSurface = (options) => {
+  const { events } = useMelony();
+  const surfaceEvents = React3.useMemo(() => {
+    const filtered = events.filter((event) => event.surface === options.name);
+    return melony.filterEventsBySlots(filtered);
+  }, [events, options.name]);
+  return {
+    events: surfaceEvents
+  };
+};
 function Composer({
   value,
   onChange,
@@ -3324,8 +3342,7 @@ function Composer({
   ] }) });
 }
 function StarterPrompts({
-  prompts,
-  onPromptClick
+  prompts
 }) {
   if (!prompts || prompts.length === 0) {
     return null;
@@ -3343,32 +3360,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__ */ jsxRuntime.jsx(jsxRuntime.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 = React3.useMemo(() => melony.filterEventsBySlots(events), [events]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayEvents.map((displayEvent, index) => {
     if (displayEvent.type === "text-delta") {
       return /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayEvent.data?.delta }, index);
     }
@@ -3439,10 +3439,8 @@ function MessageList({
   ] });
 }
 function Thread({
-  className,
   placeholder = "Type a message...",
   starterPrompts: localStarterPrompts,
-  onStarterPromptClick,
   options: localOptions,
   autoFocus = false,
   defaultSelectedIds
@@ -3458,9 +3456,14 @@ function Thread({
   } = useMelony({
     initialEvents: threadEvents
   });
-  const messages = initialMessages.filter(
-    (x) => ["user", "assistant"].includes(x.role)
-  );
+  const messages = React3.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;
@@ -3493,18 +3496,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-4 pb-36", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3518,8 +3514,7 @@ function Thread({
                 showStarterPrompts && /* @__PURE__ */ jsxRuntime.jsx(
                   StarterPrompts,
                   {
-                    prompts: starterPrompts,
-                    onPromptClick: handleStarterPromptClick
+                    prompts: starterPrompts
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -3618,7 +3613,7 @@ var Dropdown = ({
     ] }, item.label)) })
   ] });
 };
-var ThreadList = ({ className }) => {
+var ThreadList = ({ padding, background, gap, radius = "md" }) => {
   const { threads, activeThreadId, deleteThread } = useThreads();
   const sortedThreads = React3__namespace.useMemo(() => {
     return [...threads].sort((a, b) => {
@@ -3634,8 +3629,8 @@ var ThreadList = ({ className }) => {
       console.error("Failed to delete thread:", error);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(List, { className, children: sortedThreads.map((thread) => {
-    const isActive = thread.id === activeThreadId;
+  return /* @__PURE__ */ jsxRuntime.jsx(List, { padding, gap, flex: "1", overflow: "scroll", children: sortedThreads.map((thread) => {
+    thread.id === activeThreadId;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       ListItem,
       {
@@ -3645,7 +3640,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__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: thread.title || `Thread ${thread.id.slice(0, 8)}` }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3745,13 +3743,15 @@ function PopupChat({
           placeholder,
           starterPrompts,
           options,
-          className: "h-full",
           defaultSelectedIds
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(
         ThreadList,
         {
-          className: "h-full"
+          padding: "md",
+          gap: "md",
+          background: "muted",
+          radius: "md"
         }
       ) })
     ] }),
@@ -3769,9 +3769,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__ */ jsxRuntime.jsx(
     "div",
     {
@@ -3779,8 +3780,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__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-h-0 flex flex-col", children })
     }
   );
@@ -3809,6 +3811,10 @@ function FullChat({
     ) }) })
   ] });
 }
+function Surface({ name, children }) {
+  const { events } = useSurface({ name });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(events) });
+}
 function SidebarToggle({ side, className }) {
   const {
     leftCollapsed,
@@ -3848,13 +3854,7 @@ function SidebarToggle({ side, className }) {
   }
   return null;
 }
-var ThreadPopover = ({
-  className,
-  buttonClassName,
-  buttonVariant = "ghost",
-  buttonSize = "icon",
-  emptyState
-}) => {
+var ThreadPopover = ({}) => {
   const [isOpen, setIsOpen] = React3__namespace.useState(false);
   reactHotkeysHook.useHotkeys(
     "h",
@@ -3873,20 +3873,19 @@ var ThreadPopover = ({
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
-        variant: buttonVariant,
-        size: buttonSize,
-        className: cn(buttonClassName),
+        variant: "ghost",
+        size: "icon",
         children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconHistory, { className: "size-4" })
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       PopoverContent,
       {
-        className: cn("w-80 p-0", className),
+        className: "w-80 p-0",
         side: "bottom",
         align: "start",
         sideOffset: 8,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(ThreadList, { emptyState, className: "h-full" }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(ThreadList, {}) })
       }
     )
   ] });
@@ -3977,7 +3976,9 @@ function ThemeToggle() {
   );
 }
 var CreateThreadListItem = ({
-  className
+  padding = "sm",
+  background,
+  radius = "md"
 }) => {
   const { createThread } = useThreads();
   const [isCreating, setIsCreating] = React3__namespace.useState(false);
@@ -4014,7 +4015,9 @@ var CreateThreadListItem = ({
           url: "?"
         }
       },
-      className: cn(className, "border roudned-lg"),
+      padding,
+      background,
+      radius,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPlus, { className: "size-4" }),
         "New chat"
@@ -4040,6 +4043,7 @@ exports.CreateThreadButton = CreateThreadButton;
 exports.CreateThreadListItem = CreateThreadListItem;
 exports.Divider = Divider;
 exports.Dropdown = Dropdown;
+exports.Float = Float;
 exports.Form = Form;
 exports.FullChat = FullChat;
 exports.Heading = Heading;
@@ -4060,6 +4064,7 @@ exports.SidebarContext = SidebarContext;
 exports.SidebarProvider = SidebarProvider;
 exports.SidebarToggle = SidebarToggle;
 exports.Spacer = Spacer;
+exports.Surface = Surface;
 exports.Text = Text;
 exports.Textarea = Textarea2;
 exports.ThemeProvider = ThemeProvider;
@@ -4076,6 +4081,7 @@ exports.useAuth = useAuth;
 exports.useMelony = useMelony;
 exports.useScreenSize = useScreenSize;
 exports.useSidebar = useSidebar;
+exports.useSurface = useSurface;
 exports.useTheme = useTheme;
 exports.useThreads = useThreads;
 Object.keys(ICONS).forEach(function (k) {