@melony/react 0.1.54 → 0.2.0

package/dist/index.js

@@ -1,4043 +1,48 @@
-import * as React3 from 'react';
-import React3__default, { createContext, useContext, useRef, useEffect, useState, useCallback, useMemo } from 'react';
-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';
-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, 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';
-import { useRender } from '@base-ui/react/use-render';
-import { cva } from 'class-variance-authority';
-import { Input as Input$1 } from '@base-ui/react/input';
-import { Select as Select$1 } from '@base-ui/react/select';
-import { createPortal } from 'react-dom';
-import { Button as Button$1 } from '@base-ui/react/button';
-import { Menu } from '@base-ui/react/menu';
-import { useQueryState, parseAsString } from 'nuqs';
-import { useHotkeys } from 'react-hotkeys-hook';
+import { createContext, useState, useEffect, useMemo, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
 
 // src/providers/melony-provider.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "dialog", ...props });
-}
-function DialogTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { "data-slot": "dialog-trigger", ...props });
-}
-function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Backdrop,
-    {
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-200 supports-backdrop-filter:backdrop-blur-sm fixed inset-0 isolate z-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsx(
-      Dialog$1.Popup,
-      {
-        "data-slot": "dialog-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 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg outline-none",
-          className
-        ),
-        ...props
-      }
-    )
-  ] });
-}
-function DialogClose({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Close,
-    {
-      "data-slot": "dialog-close",
-      className: cn(
-        "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "dialog-header",
-      className: cn(
-        "flex flex-col space-y-1.5 text-center sm:text-left",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn(
-        "text-lg font-semibold leading-none tracking-tight",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn("text-sm text-muted-foreground", className),
-      ...props
-    }
-  );
-}
-function Card({
-  className,
-  size = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card",
-      "data-size": size,
-      className: cn(
-        "ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-2xl py-6 text-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-header",
-      className: cn(
-        "gap-2 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-title",
-      className: cn("text-base font-medium", className),
-      ...props
-    }
-  );
-}
-function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-description",
-      className: cn("text-muted-foreground text-sm", className),
-      ...props
-    }
-  );
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6 group-data-[size=sm]/card:px-4", 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,
-  background,
-  padding = "md",
-  radius = "md",
-  shadow = "md"
-}) => {
-  return /* @__PURE__ */ jsxs(
-    Card,
-    {
-      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: cn("flex flex-col gap-4", paddingMap[padding]), children })
-      ]
-    }
-  );
-};
-var Row = ({
-  children,
-  align = "start",
-  justify = "start",
-  wrap = "nowrap",
-  gap = "none",
-  padding = "none",
-  width = "full"
-}) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "flex flex-row",
-        alignMap[align],
-        justifyMap[justify],
-        wrapMap[wrap],
-        gapMap[gap],
-        paddingMap[padding],
-        widthMap[width]
-      ),
-      children
-    }
-  );
-};
-var Col = ({
-  children,
-  align = "start",
-  justify = "start",
-  gap = "none",
-  width = "auto",
-  height = "auto",
-  padding = "none",
-  background,
-  radius
-}) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "flex flex-col",
-        alignMap[align],
-        justifyMap[justify],
-        gapMap[gap],
-        paddingMap[padding],
-        widthMap[width],
-        height === "full" && "h-full",
-        background && colorBgMap[background],
-        radius && radiusMap[radius]
-      ),
-      children
-    }
-  );
-};
-var Box = ({
-  children,
-  padding = "none",
-  margin = "none",
-  background,
-  border = false,
-  borderColor = "border",
-  radius = "none",
-  width = "auto",
-  height = "auto",
-  shadow = "none",
-  group = false
-}) => {
-  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],
-        group && "group"
-      ),
-      children
-    }
-  );
-};
-var Float = ({
-  children,
-  position = "top-right",
-  offsetX = "none",
-  offsetY = "none",
-  showOnHover = false
-}) => {
-  const positionClasses = {
-    "top-left": "top-1 left-1",
-    "top-right": "top-1 right-1",
-    "top-center": "top-1 left-1/2 -translate-x-1/2",
-    "bottom-left": "bottom-1 left-1",
-    "bottom-right": "bottom-1 right-1",
-    "bottom-center": "bottom-1 left-1/2 -translate-x-1/2",
-    center: "top- 1 / 2 left - 1/2 -tra nslate-x-1/2 -translate-y-1/2",
-    "left-center": "top-1/2 left-1 -translate-y-1/2",
-    "right-center": "top-1/2 right-1 -translate-y-1/2"
-  };
-  const marginXClass = position.endsWith("left") ? marginMap[offsetX].replace("m-", "ml-") : marginMap[offsetX].replace("m-", "mr-");
-  const marginYClass = position.startsWith("top") ? marginMap[offsetY].replace("m-", "mt-") : marginMap[offsetY].replace("m-", "mb-");
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "absolute z-10",
-        positionClasses[position],
-        marginXClass,
-        marginYClass,
-        showOnHover && "opacity-0 group-hover:opacity-100 transition-opacity"
-      ),
-      children
-    }
-  );
-};
-var Spacer = ({
-  size = "md",
-  direction = "vertical"
-}) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        direction === "vertical" ? "w-full" : "h-full",
-        paddingMap[size]
-      )
-    }
-  );
-};
-function Separator({
-  className,
-  orientation = "horizontal",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Separator$1,
-    {
-      "data-slot": "separator",
-      orientation,
-      className: cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var Divider = ({
-  orientation = "horizontal",
-  color = "border",
-  margin = "md"
-}) => {
-  return /* @__PURE__ */ jsx(
-    Separator,
-    {
-      orientation,
-      className: cn(marginMap[margin], colorBgMap[color])
-    }
-  );
-};
-var List = ({ children, padding = "none", gap = "none", flex, overflow }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "flex flex-col list-none m-0",
-        paddingMap[padding],
-        gapMap[gap]
-      ),
-      style: { flex, overflow },
-      children
-    }
-  );
-};
-var useMelony = (options) => {
-  const context = useContext(MelonyContext);
-  if (context === void 0) {
-    throw new Error("useMelony must be used within a MelonyClientProvider");
-  }
-  const { client, reset } = context;
-  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) {
-        reset(initialEvents);
-      } else {
-        reset([]);
-      }
-      prevInitialEventsRef.current = currentSerialized;
-    }
-  }, [client, initialEvents, reset]);
-  return context;
-};
-var ListItem = ({
-  children,
-  onClickAction,
-  gap = "sm",
-  padding = "sm",
-  background,
-  radius = "md",
-  align = "center"
-}) => {
-  const { sendEvent } = useMelony();
-  const isInteractive = !!onClickAction;
-  const handleClick = () => {
-    if (onClickAction) {
-      sendEvent(onClickAction);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      onClick: isInteractive ? handleClick : void 0,
-      className: cn(
-        "flex flex-row transition-colors text-sm",
-        paddingMap[padding],
-        background ? colorBgMap[background] : isInteractive && "hover:bg-muted",
-        radiusMap[radius],
-        isInteractive ? "cursor-pointer" : "cursor-default"
-      ),
-      children: /* @__PURE__ */ jsx(Row, { align, gap, children })
-    }
-  );
-};
-var Image = ({
-  src,
-  alt,
-  width = "auto",
-  height,
-  radius = "md",
-  objectFit = "cover"
-}) => {
-  const [hasError, setHasError] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [open, setOpen] = useState(false);
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [gallery, setGallery] = useState([]);
-  const triggerRef = useRef(null);
-  useEffect(() => {
-    if (open && triggerRef.current) {
-      let parent = triggerRef.current.parentElement;
-      while (parent && parent.parentElement && parent.parentElement.children.length === 1) {
-        parent = parent.parentElement;
-      }
-      const container = parent?.parentElement;
-      if (container) {
-        const foundImgs = Array.from(container.querySelectorAll("img")).map((img) => ({
-          src: img.getAttribute("src") || "",
-          alt: img.getAttribute("alt") || ""
-        })).filter((v, i, a) => a.findIndex((t) => t.src === v.src) === i);
-        setGallery(foundImgs);
-        const idx = foundImgs.findIndex((img) => img.src === src);
-        setCurrentIndex(idx >= 0 ? idx : 0);
-      }
-    }
-  }, [open, src]);
-  const navigate = (dir) => {
-    setCurrentIndex((prev) => (prev + dir + gallery.length) % gallery.length);
-  };
-  const currentImage = gallery[currentIndex] || { src, alt };
-  const hasMultiple = gallery.length > 1;
-  const handleError = () => {
-    setHasError(true);
-    setIsLoading(false);
-  };
-  const handleLoad = () => {
-    setIsLoading(false);
-  };
-  if (hasError) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "flex items-center justify-center bg-muted text-muted-foreground",
-          widthMap[width],
-          radiusMap[radius]
-        ),
-        style: { height: height || "100px" },
-        children: /* @__PURE__ */ jsx("span", { className: "text-[10px]", children: "Error" })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(DialogTrigger, { children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: triggerRef,
-        className: cn(
-          "relative overflow-hidden cursor-pointer",
-          widthMap[width],
-          radiusMap[radius]
-        ),
-        style: { height },
-        children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src,
-              alt,
-              onError: handleError,
-              onLoad: handleLoad,
-              className: cn(
-                "block w-full transition-opacity duration-200 hover:opacity-90",
-                isLoading ? "opacity-0" : "opacity-100",
-                objectFit === "cover" ? "object-cover" : objectFit === "contain" ? "object-contain" : "object-fill",
-                height ? "h-full" : "h-auto"
-              )
-            }
-          ),
-          isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted animate-pulse" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      DialogContent,
-      {
-        className: "max-w-[90vw] max-h-[90vh] p-0 bg-transparent border-none shadow-none outline-none",
-        onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center group/lightbox", children: [
-          /* @__PURE__ */ jsx(DialogClose, { className: "absolute -top-12 right-0 text-white hover:text-gray-300 transition-colors z-50 bg-black/50 rounded-full p-2", children: /* @__PURE__ */ jsx(IconX, { size: 20 }) }),
-          hasMultiple && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  navigate(-1);
-                },
-                className: "absolute left-4 z-50 p-3 bg-black/40 hover:bg-black/60 text-white rounded-full transition-all opacity-0 group-hover/lightbox:opacity-100",
-                children: /* @__PURE__ */ jsx(IconChevronLeft, { size: 28 })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  navigate(1);
-                },
-                className: "absolute right-4 z-50 p-3 bg-black/40 hover:bg-black/60 text-white rounded-full transition-all opacity-0 group-hover/lightbox:opacity-100",
-                children: /* @__PURE__ */ jsx(IconChevronRight, { size: 28 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: currentImage.src,
-              alt: currentImage.alt || alt || "Enlarged image",
-              className: "max-w-full max-h-[85vh] object-contain rounded-lg shadow-2xl"
-            }
-          ),
-          hasMultiple && /* @__PURE__ */ jsxs("div", { className: "absolute -bottom-10 left-1/2 -translate-x-1/2 text-white bg-black/50 px-3 py-1 rounded-full text-sm font-medium", children: [
-            currentIndex + 1,
-            " / ",
-            gallery.length
-          ] })
-        ] })
-      }
-    )
-  ] });
-};
-var Video = ({
-  src,
-  poster,
-  autoPlay = false,
-  controls = true,
-  loop = false,
-  muted = false,
-  aspectRatio = "16/9",
-  width = "full",
-  height = "auto",
-  radius = "lg"
-}) => {
-  const aspectRatios = {
-    "16/9": "aspect-video",
-    "4/3": "aspect-[4/3]",
-    "1/1": "aspect-square",
-    "9/16": "aspect-[9/16]"
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "relative overflow-hidden bg-black shadow-sm",
-        aspectRatios[aspectRatio] || "aspect-video",
-        widthMap[width],
-        radiusMap[radius]
-      ),
-      style: { height },
-      children: /* @__PURE__ */ jsx(
-        "video",
-        {
-          src,
-          poster,
-          autoPlay,
-          controls,
-          loop,
-          muted,
-          playsInline: true,
-          className: "h-full w-full object-cover"
-        }
-      )
-    }
-  );
-};
-var Icon = ({
-  name,
-  size = "md",
-  color = "foreground"
-}) => {
-  const IconComponent = ICONS[name];
-  if (!IconComponent) return null;
-  const sizeMap = {
-    sm: 16,
-    md: 20,
-    lg: 24
-  };
-  const resolvedSize = typeof size === "number" ? size : sizeMap[size] || 20;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "inline-flex items-center justify-center",
-        colorTextMap[color]
-      ),
-      children: /* @__PURE__ */ jsx(IconComponent, { 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",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
-        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({
-  className,
-  variant = "default",
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "span",
-    props: mergeProps(
-      {
-        className: cn(badgeVariants({ className, variant }))
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "badge",
-      variant
-    }
-  });
-}
-var Badge2 = ({
-  label,
-  variant = "primary",
-  size = "md"
-}) => {
-  const variantMap = {
-    primary: "default",
-    secondary: "secondary",
-    danger: "destructive",
-    success: "default",
-    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: sizeClasses[size],
-      children: label
-    }
-  );
-};
-var Chart = ({
-  data,
-  chartType = "bar",
-  title,
-  height = 250,
-  showValues = false,
-  showGrid = false,
-  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 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 chartHeight = height;
-  const chartWidth = 600;
-  const defaultColors = [
-    "hsl(var(--primary))",
-    "hsl(var(--chart-1, 217 91% 60%))",
-    "hsl(var(--chart-2, 142 71% 45%))",
-    "hsl(var(--chart-3, 31 92% 55%))",
-    "hsl(var(--chart-4, 346 84% 61%))",
-    "hsl(var(--chart-5, 271 81% 56%))"
-  ];
-  const getColor = (index, color) => {
-    if (color) return color;
-    return defaultColors[index % defaultColors.length];
-  };
-  const renderGrid = () => {
-    if (!showGrid) return null;
-    return [0, 0.25, 0.5, 0.75, 1].map((fraction, i) => /* @__PURE__ */ jsx(
-      "line",
-      {
-        x1: padding.left,
-        y1: padding.top + chartHeight * (1 - fraction),
-        x2: chartWidth - padding.right,
-        y2: padding.top + chartHeight * (1 - fraction),
-        stroke: "currentColor",
-        className: "text-border",
-        strokeDasharray: "4,4",
-        strokeOpacity: 0.5
-      },
-      i
-    ));
-  };
-  const renderTooltip = () => {
-    if (!tooltip || !tooltip.visible) return null;
-    return /* @__PURE__ */ jsxs("g", { className: "pointer-events-none", children: [
-      /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: tooltip.x - 40,
-          y: tooltip.y - 45,
-          width: 80,
-          height: 40,
-          fill: "hsl(var(--popover))",
-          stroke: "hsl(var(--border))",
-          strokeWidth: 1,
-          rx: 6,
-          className: "shadow-md"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: tooltip.x,
-          y: tooltip.y - 28,
-          textAnchor: "middle",
-          className: "fill-popover-foreground text-[10px] font-semibold",
-          children: tooltip.value
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: tooltip.x,
-          y: tooltip.y - 14,
-          textAnchor: "middle",
-          className: "fill-muted-foreground text-[9px]",
-          children: tooltip.label
-        }
-      )
-    ] });
-  };
-  const renderBarChart = () => {
-    const totalBarSpace = chartWidth - padding.left - padding.right;
-    const barSpacing = data.length > 1 ? totalBarSpace * 0.1 / data.length : 0;
-    const actualBarWidth = (totalBarSpace - barSpacing * (data.length + 1)) / data.length;
-    return /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        viewBox: `0 0 ${chartWidth} ${chartHeight + padding.bottom}`,
-        className: "w-full h-auto overflow-visible",
-        children: [
-          renderGrid(),
-          data.map((item, index) => {
-            const barHeight = item.value / maxValue * chartHeight;
-            const x = padding.left + barSpacing + index * (actualBarWidth + barSpacing);
-            const y = padding.top + chartHeight - barHeight;
-            return /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsx(
-                "rect",
-                {
-                  x,
-                  y,
-                  width: actualBarWidth,
-                  height: barHeight,
-                  fill: getColor(index, item.color),
-                  rx: 4,
-                  onMouseEnter: () => showTooltips && setTooltip({
-                    visible: true,
-                    x: x + actualBarWidth / 2,
-                    y: y - 5,
-                    label: item.label,
-                    value: item.value
-                  }),
-                  onMouseLeave: () => setTooltip({
-                    visible: false,
-                    x: 0,
-                    y: 0,
-                    label: "",
-                    value: 0
-                  }),
-                  className: "transition-all hover:opacity-80 cursor-pointer"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "text",
-                {
-                  x: x + actualBarWidth / 2,
-                  y: padding.top + chartHeight + 20,
-                  textAnchor: "middle",
-                  className: "fill-muted-foreground text-[10px]",
-                  children: item.label
-                }
-              )
-            ] }, index);
-          }),
-          showTooltips && renderTooltip()
-        ]
-      }
-    );
-  };
-  const renderLineChart = () => {
-    const points = data.map((item, index) => ({
-      x: padding.left + index / Math.max(data.length - 1, 1) * (chartWidth - padding.left - padding.right),
-      y: padding.top + chartHeight - item.value / maxValue * chartHeight,
-      ...item
-    }));
-    const pathData = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-    return /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        viewBox: `0 0 ${chartWidth} ${chartHeight + padding.bottom}`,
-        className: "w-full h-auto overflow-visible",
-        children: [
-          renderGrid(),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: pathData,
-              fill: "none",
-              stroke: getColor(0),
-              strokeWidth: 3,
-              className: "transition-all"
-            }
-          ),
-          points.map((point, index) => /* @__PURE__ */ jsxs("g", { children: [
-            /* @__PURE__ */ jsx(
-              "circle",
-              {
-                cx: point.x,
-                cy: point.y,
-                r: 5,
-                fill: getColor(index, point.color),
-                stroke: "hsl(var(--background))",
-                strokeWidth: 2,
-                onMouseEnter: () => showTooltips && setTooltip({
-                  visible: true,
-                  x: point.x,
-                  y: point.y - 5,
-                  label: point.label,
-                  value: point.value
-                }),
-                onMouseLeave: () => setTooltip({ visible: false, x: 0, y: 0, label: "", value: 0 }),
-                className: "hover:r-6 transition-all cursor-pointer"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "text",
-              {
-                x: point.x,
-                y: padding.top + chartHeight + 20,
-                textAnchor: "middle",
-                className: "fill-muted-foreground text-[10px]",
-                children: point.label
-              }
-            )
-          ] }, index)),
-          showTooltips && renderTooltip()
-        ]
-      }
-    );
-  };
-  const renderChart = () => {
-    switch (chartType) {
-      case "line":
-        return renderLineChart();
-      case "bar":
-      default:
-        return renderBarChart();
-    }
-  };
-  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",
-  color = "foreground"
-}) => {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        textSizeMap[size],
-        fontWeightMap[weight],
-        textAlignMap[align],
-        colorTextMap[color]
-      ),
-      children: value
-    }
-  );
-};
-var Heading = ({
-  value,
-  level = 2,
-  color = "foreground",
-  align = "start"
-}) => {
-  const Tag = `h${level}`;
-  const levelClasses = {
-    h1: "text-3xl font-bold tracking-tight",
-    h2: "text-2xl font-semibold tracking-tight",
-    h3: "text-xl font-semibold tracking-tight",
-    h4: "text-lg font-semibold tracking-tight",
-    h5: "text-base font-semibold",
-    h6: "text-sm font-semibold"
-  };
-  return /* @__PURE__ */ jsx(
-    Tag,
-    {
-      className: cn(
-        levelClasses[Tag] || levelClasses.h2,
-        colorTextMap[color],
-        textAlignMap[align]
-      ),
-      children: value
-    }
-  );
-};
-function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Input$1,
-    {
-      type,
-      "data-slot": "input",
-      className: cn(
-        "bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-4xl border px-3 py-1 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function Label({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "label",
-    {
-      "data-slot": "label",
-      className: cn(
-        "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var fieldVariants = cva(
-  "data-[invalid=true]:text-destructive gap-3 group/field flex w-full",
-  {
-    variants: {
-      orientation: {
-        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
-        horizontal: "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        responsive: "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
-      }
-    },
-    defaultVariants: {
-      orientation: "vertical"
-    }
-  }
-);
-function Field({
-  className,
-  orientation = "vertical",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "group",
-      "data-slot": "field",
-      "data-orientation": orientation,
-      className: cn(fieldVariants({ orientation }), className),
-      ...props
-    }
-  );
-}
-function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "field-label",
-      className: cn(
-        "gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var Input2 = ({
-  inputType = "text",
-  placeholder,
-  defaultValue,
-  label,
-  name,
-  disabled,
-  required,
-  width = "full",
-  onChangeAction
-}) => {
-  const { sendEvent } = useMelony();
-  const handleChange = (e) => {
-    if (onChangeAction) {
-      sendEvent({
-        ...onChangeAction,
-        data: {
-          name: name || "",
-          value: e.target.value
-        }
-      });
-    }
-  };
-  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,
-      {
-        type: inputType,
-        name,
-        id: name,
-        placeholder,
-        defaultValue,
-        disabled,
-        onChange: handleChange,
-        required
-      }
-    )
-  ] });
-};
-function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      "data-slot": "textarea",
-      className: cn(
-        "border-input bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-xl border px-3 py-3 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-var Textarea2 = ({
-  placeholder,
-  defaultValue,
-  label,
-  name,
-  disabled,
-  rows,
-  required,
-  width = "full",
-  onChangeAction
-}) => {
-  const { sendEvent } = useMelony();
-  const handleChange = (e) => {
-    if (onChangeAction) {
-      sendEvent({
-        ...onChangeAction,
-        data: {
-          name: name || "",
-          value: e.target.value
-        }
-      });
-    }
-  };
-  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,
-      {
-        name,
-        id: name,
-        placeholder,
-        defaultValue,
-        disabled,
-        rows,
-        onChange: handleChange,
-        required
-      }
-    )
-  ] });
-};
-var Select = Select$1.Root;
-function SelectValue({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Select$1.Value,
-    {
-      "data-slot": "select-value",
-      className: cn("flex flex-1 text-left", className),
-      ...props
-    }
-  );
-}
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    Select$1.Trigger,
-    {
-      "data-slot": "select-trigger",
-      "data-size": size,
-      className: cn(
-        "border-input data-[placeholder]:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(
-          Select$1.Icon,
-          {
-            render: /* @__PURE__ */ jsx(IconSelector, { className: "text-muted-foreground size-4 pointer-events-none" })
-          }
-        )
-      ]
-    }
-  );
-}
-function SelectContent({
-  className,
-  children,
-  side = "bottom",
-  sideOffset = 4,
-  align = "center",
-  alignOffset = 0,
-  alignItemWithTrigger = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
-    Select$1.Positioner,
-    {
-      side,
-      sideOffset,
-      align,
-      alignOffset,
-      alignItemWithTrigger,
-      className: "isolate z-50",
-      children: /* @__PURE__ */ jsxs(
-        Select$1.Popup,
-        {
-          "data-slot": "select-content",
-          className: cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto",
-            className
-          ),
-          ...props,
-          children: [
-            /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-            /* @__PURE__ */ jsx(Select$1.List, { children }),
-            /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-          ]
-        }
-      )
-    }
-  ) });
-}
-function SelectItem({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    Select$1.Item,
-    {
-      "data-slot": "select-item",
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full 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
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(Select$1.ItemText, { className: "flex flex-1 gap-2 shrink-0 whitespace-nowrap", children }),
-        /* @__PURE__ */ jsx(
-          Select$1.ItemIndicator,
-          {
-            render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
-            children: /* @__PURE__ */ jsx(IconCheck, { className: "pointer-events-none" })
-          }
-        )
-      ]
-    }
-  );
-}
-function SelectScrollUpButton({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Select$1.ScrollUpArrow,
-    {
-      "data-slot": "select-scroll-up-button",
-      className: cn(
-        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(IconChevronUp, {})
-    }
-  );
-}
-function SelectScrollDownButton({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Select$1.ScrollDownArrow,
-    {
-      "data-slot": "select-scroll-down-button",
-      className: cn(
-        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(IconChevronDown, {})
-    }
-  );
-}
-var Select2 = ({
-  options,
-  defaultValue,
-  label,
-  name,
-  disabled,
-  required,
-  width = "full",
-  placeholder,
-  onChangeAction
-}) => {
-  const { sendEvent } = useMelony();
-  const handleValueChange = (val) => {
-    if (onChangeAction) {
-      sendEvent({
-        ...onChangeAction,
-        data: {
-          name: name || "",
-          value: val
-        }
-      });
-    }
-  };
-  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,
-        disabled,
-        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)) })
-        ]
-      }
-    )
-  ] });
-};
-var Label2 = ({
-  value,
-  htmlFor,
-  required,
-  size = "md",
-  color = "foreground"
-}) => {
-  return /* @__PURE__ */ jsxs(
-    Label,
-    {
-      htmlFor,
-      className: cn(
-        "flex items-center gap-1",
-        textSizeMap[size],
-        colorTextMap[color]
-      ),
-      children: [
-        value,
-        required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
-      ]
-    }
-  );
-};
-var Checkbox = ({
-  label,
-  name,
-  checked,
-  disabled,
-  onChangeAction
-}) => {
-  const { sendEvent } = useMelony();
-  const handleChange = (e) => {
-    if (onChangeAction) {
-      sendEvent({
-        ...onChangeAction,
-        data: {
-          name: name || "",
-          checked: e.target.checked
-        }
-      });
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "checkbox",
-        name,
-        id: name,
-        checked,
-        disabled,
-        onChange: handleChange,
-        className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
-      }
-    ),
-    label && /* @__PURE__ */ jsx(
-      Label2,
-      {
-        htmlFor: name,
-        value: label,
-        color: disabled ? "muted" : "foreground",
-        size: "sm"
-      }
-    )
-  ] });
-};
-var Hidden = ({ name, value }) => {
-  return /* @__PURE__ */ jsx("input", { type: "hidden", name, value });
-};
-var PopoverContext = React3.createContext(
-  void 0
-);
-function usePopoverContext() {
-  const context = React3.useContext(PopoverContext);
-  if (!context) {
-    throw new Error("Popover components must be used within a Popover");
-  }
-  return context;
-}
-function Popover({
-  children,
-  defaultOpen = false,
-  open: controlledOpen,
-  onOpenChange
-}) {
-  const [internalOpen, setInternalOpen] = React3.useState(defaultOpen);
-  const triggerRef = React3.useRef(null);
-  const open = controlledOpen ?? internalOpen;
-  const setOpen = React3.useCallback(
-    (newOpen) => {
-      if (controlledOpen === void 0) {
-        setInternalOpen(newOpen);
-      }
-      onOpenChange?.(newOpen);
-    },
-    [controlledOpen, onOpenChange]
-  );
-  const value = React3.useMemo(
-    () => ({
-      open,
-      setOpen,
-      triggerRef
-    }),
-    [open, setOpen]
-  );
-  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
-}
-var PopoverTrigger = React3.forwardRef(
-  ({ asChild, className, children, ...props }, ref) => {
-    const { setOpen, triggerRef } = usePopoverContext();
-    const handleClick = (e) => {
-      setOpen(true);
-      props.onClick?.(e);
-    };
-    if (asChild && React3.isValidElement(children)) {
-      return React3.cloneElement(children, {
-        ref: (node) => {
-          triggerRef.current = node;
-          if (typeof children.ref === "function") {
-            children.ref(node);
-          } else if (children.ref) {
-            children.ref.current = node;
-          }
-        },
-        onClick: handleClick
-      });
-    }
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref: (node) => {
-          triggerRef.current = node;
-          if (typeof ref === "function") {
-            ref(node);
-          } else if (ref) {
-            ref.current = node;
-          }
-        },
-        className,
-        onClick: handleClick,
-        ...props,
-        children
-      }
-    );
-  }
-);
-PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React3.forwardRef(
-  ({
-    className,
-    side = "bottom",
-    align = "start",
-    sideOffset = 4,
-    alignOffset = 0,
-    children,
-    ...props
-  }, ref) => {
-    const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React3.useState({ top: 0, left: 0 });
-    const contentRef = React3.useRef(null);
-    React3.useEffect(() => {
-      if (!open || !triggerRef.current) return;
-      const updatePosition = () => {
-        if (!triggerRef.current || !contentRef.current) return;
-        const triggerRect = triggerRef.current.getBoundingClientRect();
-        const contentRect = contentRef.current.getBoundingClientRect();
-        const scrollX = window.scrollX;
-        const scrollY = window.scrollY;
-        let top = 0;
-        let left = 0;
-        switch (side) {
-          case "bottom":
-            top = triggerRect.bottom + sideOffset + scrollY;
-            break;
-          case "top":
-            top = triggerRect.top - contentRect.height - sideOffset + scrollY;
-            break;
-          case "right":
-            top = triggerRect.top + scrollY;
-            left = triggerRect.right + sideOffset + scrollX;
-            break;
-          case "left":
-            top = triggerRect.top + scrollY;
-            left = triggerRect.left - contentRect.width - sideOffset + scrollX;
-            break;
-        }
-        switch (align) {
-          case "start":
-            if (side === "top" || side === "bottom") {
-              left = triggerRect.left + scrollX + alignOffset;
-            } else {
-              top += alignOffset;
-            }
-            break;
-          case "center":
-            if (side === "top" || side === "bottom") {
-              left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2 + scrollX + alignOffset;
-            } else {
-              top += triggerRect.height / 2 - contentRect.height / 2 + alignOffset;
-            }
-            break;
-          case "end":
-            if (side === "top" || side === "bottom") {
-              left = triggerRect.left + triggerRect.width - contentRect.width + scrollX + alignOffset;
-            } else {
-              top += triggerRect.height - contentRect.height + alignOffset;
-            }
-            break;
-        }
-        setPosition({ top, left });
-      };
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-      window.addEventListener("resize", updatePosition);
-      window.addEventListener("scroll", updatePosition, true);
-      return () => {
-        window.removeEventListener("resize", updatePosition);
-        window.removeEventListener("scroll", updatePosition, true);
-      };
-    }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React3.useEffect(() => {
-      if (!open) return;
-      const handleClickOutside = (event) => {
-        if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
-          setOpen(false);
-        }
-      };
-      const handleEscape = (event) => {
-        if (event.key === "Escape") {
-          setOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleEscape);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-        document.removeEventListener("keydown", handleEscape);
-      };
-    }, [open, setOpen, triggerRef]);
-    if (!open) return null;
-    const content = /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: (node) => {
-          contentRef.current = node;
-          if (typeof ref === "function") {
-            ref(node);
-          } else if (ref) {
-            ref.current = node;
-          }
-        },
-        className: cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 rounded-2xl shadow-2xl ring-1 z-50 min-w-48 max-h-96 overflow-hidden",
-          className
-        ),
-        style: {
-          position: "absolute",
-          top: `${position.top}px`,
-          left: `${position.left}px`
-        },
-        ...props,
-        children
-      }
-    );
-    return createPortal(content, document.body);
-  }
-);
-PopoverContent.displayName = "PopoverContent";
-var PRESET_COLORS = [
-  "#000000",
-  "#ffffff",
-  "#f44336",
-  "#e91e63",
-  "#9c27b0",
-  "#673ab7",
-  "#3f51b5",
-  "#2196f3",
-  "#03a9f4",
-  "#00bcd4",
-  "#009688",
-  "#4caf50",
-  "#8bc34a",
-  "#cddc39",
-  "#ffeb3b",
-  "#ffc107",
-  "#ff9800",
-  "#ff5722",
-  "#795548",
-  "#9e9e9e",
-  "#607d8b"
-];
-var ColorPicker = ({
-  name,
-  label,
-  defaultValue = "#000000",
-  onChangeAction,
-  disabled
-}) => {
-  const { sendEvent } = useMelony();
-  const [color, setColor] = useState(defaultValue);
-  const handleColorChange = (newColor) => {
-    setColor(newColor);
-    if (onChangeAction) {
-      sendEvent({
-        ...onChangeAction,
-        data: {
-          name: name || "",
-          value: newColor
-        }
-      });
-    }
-  };
-  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: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            disabled,
-            className: cn(
-              "w-10 h-10 rounded-lg border border-border shadow-sm transition-transform hover:scale-105 active:scale-95 disabled:opacity-50 disabled:hover:scale-100",
-              "flex items-center justify-center p-1"
-            ),
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "w-full h-full rounded-md",
-                style: { backgroundColor: color }
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsx(PopoverContent, { className: "p-3 w-64", side: "bottom", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: PRESET_COLORS.map((preset) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: cn(
-                "w-6 h-6 rounded-md border border-border transition-transform hover:scale-110 active:scale-90",
-                color === preset && "ring-2 ring-primary ring-offset-1"
-              ),
-              style: { backgroundColor: preset },
-              onClick: () => handleColorChange(preset)
-            },
-            preset
-          )) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "color",
-                value: color,
-                onChange: (e) => handleColorChange(e.target.value),
-                className: "w-8 h-8 rounded border-none p-0 cursor-pointer"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                value: color,
-                onChange: (e) => handleColorChange(e.target.value),
-                className: "flex-1 h-8 px-2 text-xs font-mono border border-border rounded uppercase focus:outline-none focus:ring-1 focus:ring-primary"
-              }
-            )
-          ] })
-        ] }) })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "text-sm font-mono uppercase text-muted-foreground", children: color })
-    ] }),
-    /* @__PURE__ */ jsx("input", { type: "hidden", name, value: color })
-  ] });
-};
-var RadioGroup = ({
-  name,
-  options,
-  defaultValue,
-  label,
-  disabled,
-  orientation = "vertical",
-  onChangeAction
-}) => {
-  const { sendEvent } = useMelony();
-  const handleChange = (e) => {
-    if (onChangeAction) {
-      sendEvent({
-        ...onChangeAction,
-        data: {
-          name,
-          value: e.target.value
-        }
-      });
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-    label && /* @__PURE__ */ jsx(Label2, { value: label }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "flex",
-          orientation === "horizontal" ? "flex-row gap-4" : "flex-col gap-2"
-        ),
-        children: options.map((option, index) => {
-          const radioId = `${name}-${index}`;
-          const isDisabled = disabled || option.disabled;
-          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "radio",
-                name,
-                id: radioId,
-                value: option.value,
-                defaultChecked: defaultValue === option.value,
-                disabled: isDisabled,
-                onChange: handleChange,
-                className: "h-4 w-4 border-gray-300 text-primary focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Label2,
-              {
-                htmlFor: radioId,
-                value: option.label,
-                size: "sm",
-                color: isDisabled ? "muted" : "foreground"
-              }
-            )
-          ] }, index);
-        })
-      }
-    )
-  ] });
-};
-var buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        icon: "size-9",
-        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Button$1,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-var Button2 = ({
-  type = "button",
-  label,
-  variant = "primary",
-  size = "md",
-  disabled = false,
-  width,
-  onClickAction,
-  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"
-  };
-  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,
-    {
-      type,
-      variant: variantMap[variant] || "default",
-      size: size === "md" ? "default" : size,
-      disabled,
-      className: cn(width && widthMap2[width], justifyMap[justify]),
-      onClick: () => {
-        if (onClickAction) {
-          sendEvent(onClickAction);
-        }
-      },
-      children: label
-    }
-  );
-};
-var Upload = ({
-  label = "Upload",
-  multiple = false,
-  accept,
-  onUploadAction,
-  initialFiles,
-  mode = "append",
-  disabled
-}) => {
-  const { sendEvent, events } = useMelony();
-  const fileInputRef = useRef(null);
-  const [isUploading, setIsUploading] = useState(false);
-  const [status, setStatus] = useState("idle");
-  const uploadedFilesEvents = events.filter(
-    (event) => event.type === "uploaded-files"
-  );
-  const displayEvents = mode === "replace" && uploadedFilesEvents.length > 0 ? [uploadedFilesEvents[uploadedFilesEvents.length - 1]] : uploadedFilesEvents;
-  const showInitialFiles = mode === "replace" ? displayEvents.length === 0 : true;
-  const handleFileChange = async (e) => {
-    const files = Array.from(e.target.files || []);
-    if (files.length === 0) return;
-    setIsUploading(true);
-    setStatus("idle");
-    try {
-      const filePromises = files.map((file) => {
-        return new Promise((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload = () => {
-            try {
-              const base64 = reader.result;
-              if (!base64) {
-                reject(new Error("FileReader returned empty result"));
-                return;
-              }
-              resolve({
-                name: file.name,
-                type: file.type,
-                size: file.size,
-                data: base64
-              });
-            } catch (error) {
-              reject(error);
-            }
-          };
-          reader.onerror = (error) => {
-            reject(new Error(`Failed to read file ${file.name}: ${error}`));
-          };
-          reader.readAsDataURL(file);
-        });
-      });
-      const convertedFiles = await Promise.all(filePromises);
-      if (onUploadAction) {
-        if (typeof onUploadAction === "function") {
-          await sendEvent(onUploadAction({ files: convertedFiles }));
-        } else {
-          await sendEvent({
-            ...onUploadAction,
-            data: {
-              ...onUploadAction.data,
-              files: convertedFiles
-            }
-          });
-        }
-      }
-      setStatus("success");
-      setTimeout(() => setStatus("idle"), 3e3);
-    } catch (error) {
-      console.error("Upload failed:", error);
-      setStatus("error");
-      setTimeout(() => setStatus("idle"), 3e3);
-    } finally {
-      setIsUploading(false);
-      if (fileInputRef.current) {
-        fileInputRef.current.value = "";
-      }
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "file",
-        ref: fileInputRef,
-        onChange: handleFileChange,
-        multiple,
-        accept,
-        className: "hidden",
-        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,
-          width: "min",
-          radius: "md"
-        },
-        index
-      )),
-      displayEvents.map(
-        (event, index) => event.ui ? /* @__PURE__ */ jsx(UIRenderer, { node: event.ui }, index) : null
-      ),
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          type: "button",
-          disabled: isUploading || disabled,
-          onClick: () => fileInputRef.current?.click(),
-          variant: "default",
-          children: [
-            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
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-var Form = ({ children, onSubmitAction, gap = "md" }) => {
-  const { sendEvent } = useMelony();
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (isSubmitted) return;
-    const formData = new FormData(e.currentTarget);
-    const data = {};
-    formData.forEach((value, key) => {
-      data[key] = value;
-    });
-    if (onSubmitAction) {
-      setIsSubmitted(true);
-      if (typeof onSubmitAction === "object" && "type" in onSubmitAction) {
-        sendEvent({
-          ...onSubmitAction,
-          data: {
-            ...onSubmitAction?.data || {},
-            ...data
-          }
-        });
-      } else if (typeof onSubmitAction === "function") {
-        sendEvent(onSubmitAction(data));
-      }
-    }
-  };
-  return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: "w-full", children: /* @__PURE__ */ jsx("fieldset", { disabled: isSubmitted, className: "m-0 border-0 p-0", children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "flex flex-col transition-opacity",
-        gapMap[gap],
-        isSubmitted && "opacity-60 pointer-events-none"
-      ),
-      children
-    }
-  ) }) });
-};
-function DropdownMenu({ ...props }) {
-  return /* @__PURE__ */ jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
-}
-function DropdownMenuContent({
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
-    Menu.Positioner,
-    {
-      className: "isolate z-50 outline-none",
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      children: /* @__PURE__ */ jsx(
-        Menu.Popup,
-        {
-          "data-slot": "dropdown-menu-content",
-          className: cn(
-            "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: "outline",
-            size: "icon-sm",
-            ...props,
-            onClick: (e) => {
-              e.stopPropagation();
-              props.onClick?.(e);
-            },
-            children: children || /* @__PURE__ */ jsx(IconDotsVertical, { className: "size-3.5" })
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: cn("w-32"), children: items.map((item, i) => /* @__PURE__ */ jsxs(
-      DropdownMenuItem,
-      {
-        onClick: (e) => {
-          e.stopPropagation();
-          if (item.onClickAction) {
-            sendEvent(item.onClickAction);
-          }
-        },
-        children: [
-          item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm" }),
-          /* @__PURE__ */ jsx("span", { className: item.icon ? "ml-2" : "", children: item.label })
-        ]
-      },
-      `${item.label}-${i}`
-    )) })
-  ] });
-};
-function UIRenderer({ node }) {
-  const { type, props, children } = node;
-  const typeMap = {
-    card: Card2,
-    button: Button2,
-    row: Row,
-    col: Col,
-    text: Text,
-    heading: Heading,
-    badge: Badge2,
-    input: Input2,
-    hidden: Hidden,
-    textarea: Textarea2,
-    select: Select2,
-    checkbox: Checkbox,
-    radioGroup: RadioGroup,
-    colorPicker: ColorPicker,
-    spacer: Spacer,
-    divider: Divider,
-    box: Box,
-    float: Float,
-    image: Image,
-    video: Video,
-    icon: Icon,
-    list: List,
-    listItem: ListItem,
-    form: Form,
-    chart: Chart,
-    label: Label2,
-    upload: Upload,
-    dropdown: Dropdown
-  };
-  const Component = typeMap[type];
-  if (!Component) {
-    return /* @__PURE__ */ jsxs("div", { className: "text-destructive italic text-sm p-2 border border-dashed rounded border-destructive/50 bg-destructive/5", children: [
-      "[Unknown component: ",
-      type,
-      "]"
-    ] });
-  }
-  const renderedChildren = children?.map((child, i) => /* @__PURE__ */ jsx(UIRenderer, { node: child }, i));
-  return /* @__PURE__ */ jsx(Component, { ...props, children: renderedChildren });
-}
 var MelonyContext = createContext(
   void 0
 );
-var defaultQueryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-      refetchOnWindowFocus: false
-    }
-  }
-});
-var MelonyContextProviderInner = ({
+var MelonyProvider = ({
   children,
   client,
-  initialEvents,
-  setContextValue
+  initialEvents
 }) => {
   const [state, setState] = useState(client.getState());
-  const queryClient = useQueryClient();
-  const [dialog, setDialog] = useState();
-  const { data: config } = useQuery({
-    queryKey: ["melony-config", client.url],
-    queryFn: () => client.getConfig(),
-    staleTime: Infinity
-  });
   useEffect(() => {
-    if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
+    if (initialEvents?.length && client.getState().events.length === 0) {
       client.reset(initialEvents);
     }
-  }, [client, initialEvents]);
+  }, []);
   useEffect(() => {
-    setState(client.getState());
     const unsubscribe = client.subscribe(setState);
-    return () => {
-      unsubscribe();
-    };
+    return unsubscribe;
   }, [client]);
-  const reset = useCallback(
-    (events) => client.reset(events),
-    [client]
-  );
-  const dispatchClientAction = useCallback(
-    async (event) => {
-      if (!event.type.startsWith("client:")) return false;
-      switch (event.type) {
-        case "client:navigate": {
-          const url = event.data?.url;
-          if (url) {
-            const isStreaming = client.getState().isLoading;
-            if (isStreaming) {
-              window.history.replaceState(null, "", url);
-            } else {
-              window.history.pushState(null, "", url);
-            }
-            window.dispatchEvent(new PopStateEvent("popstate"));
-          }
-          return true;
-        }
-        case "client:open-url": {
-          const { url, target = "_blank" } = event.data || {};
-          if (url) {
-            window.open(url, target);
-          }
-          return true;
-        }
-        case "client:copy": {
-          const { text } = event.data || {};
-          if (text) {
-            await navigator.clipboard.writeText(text);
-          }
-          return true;
-        }
-        case "client:reset": {
-          reset([]);
-          return true;
-        }
-        case "client:invalidate-query": {
-          const { queryKey } = event.data || {};
-          if (queryKey) {
-            await queryClient.invalidateQueries({ queryKey });
-          }
-          return true;
-        }
-        case "client:open-dialog": {
-          setDialog(event.data);
-          return true;
-        }
-        case "client:close-dialog": {
-          setDialog(null);
-          return true;
-        }
-        default:
-          return false;
-      }
-    },
-    [client, reset, queryClient]
-  );
-  const sendEvent = useCallback(
-    async (event) => {
-      const handled = await dispatchClientAction(event);
-      if (handled) return;
-      const generator = client.sendEvent(event);
-      for await (const incomingEvent of generator) {
-        await dispatchClientAction(incomingEvent);
-      }
-    },
-    [client, dispatchClientAction]
-  );
-  const value = useMemo(
+  const contextValue = useMemo(
     () => ({
       ...state,
-      messages: convertEventsToMessages(state.events),
-      sendEvent,
-      reset,
-      client,
-      config
-    }),
-    [state, sendEvent, reset, client, config]
-  );
-  useEffect(() => {
-    setContextValue(value);
-  }, [value, setContextValue]);
-  return /* @__PURE__ */ jsxs(NuqsAdapter, { children: [
-    children,
-    /* @__PURE__ */ jsx(
-      Dialog,
-      {
-        open: !!dialog,
-        onOpenChange: (open) => {
-          !open && setDialog(null);
-        },
-        children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md max-h-[90vh] overflow-y-auto", children: [
-          /* @__PURE__ */ jsxs(DialogHeader, { children: [
-            /* @__PURE__ */ jsx(DialogTitle, { children: dialog?.title }),
-            dialog?.description && /* @__PURE__ */ jsx(DialogDescription, { children: dialog?.description })
-          ] }),
-          /* @__PURE__ */ jsxs(DialogClose, { children: [
-            /* @__PURE__ */ jsx(IconX, { className: "size-4" }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: dialog?.ui && /* @__PURE__ */ jsx(UIRenderer, { node: dialog.ui }) })
-        ] })
-      }
-    )
-  ] });
-};
-var MelonyProvider = ({
-  children,
-  client,
-  initialEvents,
-  queryClient = defaultQueryClient
-}) => {
-  const [contextValue, setContextValue] = useState(void 0);
-  return /* @__PURE__ */ jsx(MelonyContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(
-    MelonyContextProviderInner,
-    {
-      client,
-      initialEvents,
-      setContextValue,
-      children
-    }
-  ) }) });
-};
-var useAuth = () => {
-  const context = useContext(AuthContext);
-  if (context === void 0) {
-    throw new Error("useAuth must be used within an AuthProvider");
-  }
-  return context;
-};
-var AccountButton = ({
-  className,
-  variant = "outline",
-  size
-}) => {
-  const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  const [open, setOpen] = React3.useState(false);
-  const [accountInfoOpen, setAccountInfoOpen] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const initials = React3.useMemo(() => {
-    const name = user?.displayName || user?.name;
-    if (!name) return "";
-    return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  }, [user?.displayName, user?.name]);
-  const handleGoogleSignIn = async () => {
-    login();
-  };
-  if (isAuthenticated) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx(
-          DropdownMenuTrigger,
-          {
-            render: (props) => /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant,
-                size: "icon",
-                ...props,
-                className: cn("rounded-full", className),
-                children: user?.picture ? /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: user.picture,
-                    alt: user.displayName || user.name,
-                    className: "size-7 rounded-full object-cover"
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: "flex size-7 items-center justify-center rounded-full bg-muted text-xs font-bold", children: initials || /* @__PURE__ */ jsx(IconUser, { className: "size-4" }) })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
-            user?.picture ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: user.picture,
-                alt: user.displayName || user.name,
-                className: "size-8 rounded-full object-cover"
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-muted text-xs font-bold", children: initials || /* @__PURE__ */ jsx(IconUser, { className: "size-4" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-0.5 overflow-hidden", children: [
-              /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: user?.displayName || user?.name }),
-              /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: user?.email })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
-          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setAccountInfoOpen(true), children: [
-            /* @__PURE__ */ jsx(IconUser, { className: "mr-2 size-4" }),
-            "Account Settings"
-          ] }),
-          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: logout, className: "text-destructive", children: [
-            /* @__PURE__ */ jsx(IconLogout, { className: "mr-2 size-4" }),
-            "Logout"
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(Dialog, { open: accountInfoOpen, onOpenChange: setAccountInfoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
-        /* @__PURE__ */ jsxs(DialogHeader, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { children: "Account Information" }),
-          /* @__PURE__ */ jsx(DialogDescription, { children: "Your account details and settings." })
-        ] }),
-        /* @__PURE__ */ jsxs(DialogClose, { children: [
-          /* @__PURE__ */ jsx(IconX, { className: "size-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 py-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-            user?.picture ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: user.picture,
-                alt: user.displayName || user.name,
-                className: "size-16 rounded-full object-cover"
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-muted text-xl font-bold", children: initials || /* @__PURE__ */ jsx(IconUser, { className: "size-8 text-muted-foreground" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: user?.displayName || user?.name }),
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: user?.email })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(Separator, {}),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "User ID" }),
-              /* @__PURE__ */ jsx("p", { className: "font-mono text-xs truncate", children: user?.uid || user?.id })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Created At" }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs", children: user?.createdAt || "N/A" })
-            ] })
-          ] })
-        ] })
-      ] }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant,
-        size,
-        onClick: () => setOpen(true),
-        className,
-        children: "Sign in"
-      }
-    ),
-    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsx(DialogTitle, { children: "Sign in to continue" }),
-        /* @__PURE__ */ jsx(DialogDescription, { children: "Choose your preferred sign-in method to access your account." })
-      ] }),
-      /* @__PURE__ */ jsxs(DialogClose, { children: [
-        /* @__PURE__ */ jsx(IconX, { className: "size-4" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-        error && /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-destructive/10 p-3 text-sm text-destructive", children: error }),
-        /* @__PURE__ */ jsxs(
-          Button,
-          {
-            onClick: handleGoogleSignIn,
-            disabled: isLoading,
-            variant: "outline",
-            className: "w-full",
-            size: "lg",
-            children: [
-              /* @__PURE__ */ jsx(IconBrandGoogle, { className: "mr-2 size-5" }),
-              isLoading ? "Signing in..." : "Continue with Google"
-            ]
-          }
-        )
-      ] })
-    ] }) })
-  ] });
-};
-function WelcomeScreen({
-  title = "Welcome to Melony",
-  description = "The most powerful AI agent framework for building modern applications. Connect your tools, build your brain, and ship faster.",
-  features = [
-    {
-      title: "Context Aware",
-      description: "Built-in state management for complex LLM flows."
-    },
-    {
-      title: "Extensible",
-      description: "Plugin architecture for easy integrations."
-    },
-    {
-      title: "Real-time",
-      description: "Streaming responses and live state updates."
-    },
-    {
-      title: "Tool-ready",
-      description: "Ready-to-use actions for common tasks."
-    }
-  ],
-  className,
-  onLoginClick,
-  termsUrl = "#",
-  privacyUrl = "#",
-  imageUrl,
-  imageAlt = "Product screenshot"
-}) {
-  const { login, isLoading } = useAuth();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex min-h-[600px] h-full w-full flex-col md:flex-row bg-background overflow-hidden",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex w-8/12 flex-col bg-sidebar text-foreground relative overflow-hidden", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute -top-24 -left-24 size-96 bg-primary/5 rounded-full blur-3xl" }),
-          /* @__PURE__ */ jsx("div", { className: "absolute -bottom-24 -right-24 size-96 bg-primary/5 rounded-full blur-3xl" }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden relative z-10 flex flex-col p-8 md:p-12 lg:p-20", children: /* @__PURE__ */ jsxs("div", { className: "max-w-xl mx-auto w-full my-auto", children: [
-            /* @__PURE__ */ jsx("h1", { className: "mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-foreground", children: title }),
-            /* @__PURE__ */ jsx("p", { className: "mb-12 text-lg text-muted-foreground md:text-xl leading-relaxed", children: description }),
-            imageUrl && /* @__PURE__ */ jsxs("div", { className: "mb-12 relative group", children: [
-              /* @__PURE__ */ jsx("div", { className: "absolute -inset-1 bg-gradient-to-r from-primary/20 to-primary/10 rounded-xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200" }),
-              /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: imageUrl,
-                  alt: imageAlt,
-                  className: "relative rounded-xl border border-border/50 shadow-2xl transition-transform duration-500 hover:scale-[1.02] w-full"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2", children: features.map((feature, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("h3", { className: "font-bold text-lg text-foreground", children: feature.title }),
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-relaxed", children: feature.description })
-            ] }, i)) })
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex w-4/12 flex-col overflow-y-auto p-8 md:p-12 lg:p-20 bg-background transition-colors duration-300", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm space-y-8 my-auto mx-auto", children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-3 text-center md:text-left", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: "Get Started" }),
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-lg", children: "Sign in to your account to continue" })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(AccountButton, {}) }),
-          /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground leading-relaxed text-center md:text-left", children: [
-            "By continuing, you agree to our ",
-            /* @__PURE__ */ jsx("br", { className: "hidden md:block" }),
-            /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: termsUrl,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: "underline underline-offset-4 hover:text-primary transition-colors font-medium",
-                children: "Terms of Service"
-              }
-            ),
-            " ",
-            "and",
-            " ",
-            /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: privacyUrl,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: "underline underline-offset-4 hover:text-primary transition-colors font-medium",
-                children: "Privacy Policy"
-              }
-            ),
-            "."
-          ] })
-        ] }) })
-      ]
-    }
-  );
-}
-var AuthContext = createContext(
-  void 0
-);
-var AuthProvider = ({
-  children,
-  service,
-  welcomeScreenProps
-}) => {
-  const queryClient = useQueryClient();
-  const { data: user, isLoading } = useQuery({
-    queryKey: ["auth-user", service],
-    queryFn: () => service.getMe(),
-    retry: false
-  });
-  const logoutMutation = useMutation({
-    mutationFn: () => service.logout(),
-    onSuccess: () => {
-      queryClient.setQueryData(["auth-user", service], null);
-    }
-  });
-  const login = useCallback(() => {
-    service.login();
-  }, [service]);
-  const logout = useCallback(async () => {
-    try {
-      await logoutMutation.mutateAsync();
-    } catch (error) {
-      console.error("Failed to logout:", error);
-    }
-  }, [logoutMutation]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          height: "100vh",
-          width: "100vw",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          fontSize: "0.875rem",
-          letterSpacing: "0.01em"
-        },
-        className: "text-muted-foreground animate-pulse",
-        children: "Loading..."
-      }
-    );
-  }
-  const value = {
-    user: user || null,
-    isAuthenticated: !!user,
-    isLoading,
-    login,
-    logout,
-    getToken: service.getToken
-  };
-  return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children: !value.isAuthenticated && welcomeScreenProps ? /* @__PURE__ */ jsx(WelcomeScreen, { ...welcomeScreenProps }) : children });
-};
-var ThreadContext = createContext(
-  void 0
-);
-var ThreadProvider = ({
-  children,
-  service,
-  initialThreadId: providedInitialThreadId
-}) => {
-  const queryClient = useQueryClient();
-  const melonyContext = useContext(MelonyContext);
-  const [activeThreadId, setActiveThreadId] = useQueryState(
-    "threadId",
-    parseAsString
-  );
-  const prevActiveThreadIdRef = useRef(activeThreadId);
-  useEffect(() => {
-    prevActiveThreadIdRef.current = activeThreadId;
-  }, [activeThreadId]);
-  useEffect(() => {
-    if (!activeThreadId && providedInitialThreadId) {
-      setActiveThreadId(providedInitialThreadId);
-    }
-  }, [activeThreadId, providedInitialThreadId, setActiveThreadId]);
-  const {
-    data: threads = [],
-    isLoading,
-    isFetched: isFetchedThreads,
-    error: threadsError,
-    refetch: refreshThreads
-  } = useQuery({
-    queryKey: ["threads"],
-    queryFn: () => service.getThreads(),
-    staleTime: prevActiveThreadIdRef.current === null && activeThreadId !== null ? Infinity : 0
-  });
-  const isNewThread = useMemo(() => {
-    if (!activeThreadId || !isFetchedThreads) return false;
-    return !threads.some((t) => t.id === activeThreadId);
-  }, [activeThreadId, threads, isFetchedThreads]);
-  const { data: threadEvents = [], isLoading: isLoadingEvents } = useQuery({
-    queryKey: ["threads", activeThreadId, "events"],
-    queryFn: () => service.getEvents(activeThreadId),
-    enabled: !!activeThreadId,
-    initialData: isNewThread ? melonyContext?.events : void 0,
-    staleTime: isNewThread ? Infinity : 0
-  });
-  const createMutation = useMutation({
-    mutationFn: async () => {
-      return null;
-    },
-    onSuccess: async () => {
-      await setActiveThreadId(null);
-    }
-  });
-  const deleteMutation = useMutation({
-    mutationFn: (threadId) => service.deleteThread(threadId),
-    onSuccess: async (_, threadId) => {
-      await queryClient.invalidateQueries({ queryKey: ["threads"] });
-      if (activeThreadId === threadId) {
-        const remainingThreads = threads.filter((t) => t.id !== threadId);
-        const nextId = remainingThreads.length > 0 ? remainingThreads[0].id : null;
-        await setActiveThreadId(nextId);
-      }
-    }
-  });
-  const selectThread = useCallback(
-    (threadId) => {
-      setActiveThreadId(threadId);
-    },
-    [setActiveThreadId]
-  );
-  const createThread = useCallback(async () => {
-    return createMutation.mutateAsync();
-  }, [createMutation]);
-  const deleteThread = useCallback(
-    async (threadId) => {
-      return deleteMutation.mutateAsync(threadId);
-    },
-    [deleteMutation]
-  );
-  const value = useMemo(
-    () => ({
-      threads,
-      activeThreadId,
-      isLoading,
-      error: threadsError || null,
-      selectThread,
-      createThread,
-      deleteThread,
-      refreshThreads: async () => {
-        await refreshThreads();
+      sendEvent: async (event) => {
+        const generator = client.sendEvent(event);
+        for await (const _ of generator) {
+        }
       },
-      threadEvents,
-      isLoadingEvents
+      reset: client.reset.bind(client),
+      client
     }),
-    [
-      threads,
-      activeThreadId,
-      isLoading,
-      threadsError,
-      selectThread,
-      createThread,
-      deleteThread,
-      refreshThreads,
-      threadEvents,
-      isLoadingEvents
-    ]
+    [state, client]
   );
-  return /* @__PURE__ */ jsx(ThreadContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(MelonyContext.Provider, { value: contextValue, children });
 };
-function useScreenSize(mobileBreakpoint = 768, tabletBreakpoint = 1024) {
-  const [screenSize, setScreenSize] = useState(() => {
-    if (typeof window === "undefined") {
-      return {
-        width: 1024,
-        height: 768,
-        isMobile: false,
-        isTablet: false,
-        isDesktop: true
-      };
-    }
-    const width = window.innerWidth;
-    return {
-      width,
-      height: window.innerHeight,
-      isMobile: width < mobileBreakpoint,
-      isTablet: width >= mobileBreakpoint && width < tabletBreakpoint,
-      isDesktop: width >= tabletBreakpoint
-    };
-  });
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const updateScreenSize = () => {
-      const width = window.innerWidth;
-      const height = window.innerHeight;
-      setScreenSize({
-        width,
-        height,
-        isMobile: width < mobileBreakpoint,
-        isTablet: width >= mobileBreakpoint && width < tabletBreakpoint,
-        isDesktop: width >= tabletBreakpoint
-      });
-    };
-    updateScreenSize();
-    window.addEventListener("resize", updateScreenSize);
-    return () => {
-      window.removeEventListener("resize", updateScreenSize);
-    };
-  }, [mobileBreakpoint, tabletBreakpoint]);
-  return screenSize;
-}
-var SidebarContext = createContext(
-  void 0
-);
-function useSidebar() {
-  const context = useContext(SidebarContext);
-  if (context === void 0) {
-    throw new Error("useSidebar must be used within a SidebarProvider");
-  }
-  return context;
-}
-function SidebarProvider({
-  children,
-  defaultLeftCollapsed,
-  defaultRightCollapsed
-}) {
-  const { isMobile, isTablet } = useScreenSize();
-  const isSmallScreen = isMobile || isTablet;
-  const [leftCollapsed, setLeftCollapsed] = useState(() => {
-    if (defaultLeftCollapsed !== void 0) return defaultLeftCollapsed;
-    if (typeof window !== "undefined") {
-      return window.innerWidth < 1024;
-    }
-    return false;
-  });
-  const [rightCollapsed, setRightCollapsed] = useState(() => {
-    if (defaultRightCollapsed !== void 0) return defaultRightCollapsed;
-    if (typeof window !== "undefined") {
-      return window.innerWidth < 1024;
-    }
-    return false;
-  });
-  useEffect(() => {
-    if (isSmallScreen) {
-      setLeftCollapsed(true);
-      setRightCollapsed(true);
-    }
-  }, [isSmallScreen]);
-  const handleLeftToggle = useCallback((collapsed) => {
-    setLeftCollapsed(collapsed);
-  }, []);
-  const handleRightToggle = useCallback((collapsed) => {
-    setRightCollapsed(collapsed);
-  }, []);
-  const contextValue = useMemo(
-    () => ({
-      leftCollapsed,
-      rightCollapsed,
-      setLeftCollapsed: handleLeftToggle,
-      setRightCollapsed: handleRightToggle,
-      leftCollapsible: true,
-      rightCollapsible: true
-    }),
-    [leftCollapsed, rightCollapsed, handleLeftToggle, handleRightToggle]
-  );
-  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children });
-}
-var ThemeContext = createContext(void 0);
-function ThemeProvider({ children }) {
-  const [theme, setThemeState] = useState("system");
-  const [resolvedTheme, setResolvedTheme] = useState("light");
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const stored = localStorage.getItem("theme");
-      if (stored) {
-        setThemeState(stored);
-      }
-    }
-  }, []);
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      if (theme === "system") {
-        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-        const updateResolvedTheme = () => {
-          setResolvedTheme(mediaQuery.matches ? "dark" : "light");
-        };
-        updateResolvedTheme();
-        mediaQuery.addEventListener("change", updateResolvedTheme);
-        return () => mediaQuery.removeEventListener("change", updateResolvedTheme);
-      } else {
-        setResolvedTheme(theme);
-      }
-    }
-  }, [theme]);
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const root = document.documentElement;
-      if (resolvedTheme === "dark") {
-        root.classList.add("dark");
-      } else {
-        root.classList.remove("dark");
-      }
-    }
-  }, [resolvedTheme]);
-  const setTheme = (newTheme) => {
-    setThemeState(newTheme);
-    if (typeof window !== "undefined") {
-      localStorage.setItem("theme", newTheme);
-    }
-  };
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme, resolvedTheme }, children });
-}
-function useTheme() {
-  const context = useContext(ThemeContext);
-  if (context === void 0) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
-}
-var useThreads = () => {
-  const context = useContext(ThreadContext);
+var useMelony = () => {
+  const context = useContext(MelonyContext);
   if (context === void 0) {
-    throw new Error("useThreads must be used within a ThreadProvider");
+    throw new Error("useMelony must be used within a MelonyProvider");
   }
   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,
-  onSubmit,
-  placeholder = "Type a message...",
-  isLoading,
-  className,
-  options = [],
-  autoFocus = false,
-  defaultSelectedIds = [],
-  fileAttachments
-}) {
-  const enabled = fileAttachments?.enabled || false;
-  const accept = fileAttachments?.accept;
-  const maxFiles = fileAttachments?.maxFiles ?? 10;
-  const maxFileSize = fileAttachments?.maxFileSize ?? 10 * 1024 * 1024;
-  const [selectedOptions, setSelectedOptions] = React3__default.useState(
-    () => new Set(defaultSelectedIds)
-  );
-  const [attachedFiles, setAttachedFiles] = React3__default.useState([]);
-  const [previews, setPreviews] = React3__default.useState([]);
-  const fileInputRef = React3__default.useRef(null);
-  React3__default.useEffect(() => {
-    const newPreviews = attachedFiles.map((file) => ({
-      name: file.name,
-      type: file.type,
-      size: file.size,
-      url: file.type.startsWith("image/") ? URL.createObjectURL(file) : ""
-    }));
-    setPreviews(newPreviews);
-    return () => {
-      newPreviews.forEach((p) => {
-        if (p.url) URL.revokeObjectURL(p.url);
-      });
-    };
-  }, [attachedFiles]);
-  const toggleOption = (id, groupOptions, type = "multiple") => {
-    const next = new Set(selectedOptions);
-    if (type === "single") {
-      const isAlreadySelected = next.has(id);
-      if (groupOptions) {
-        groupOptions.forEach((o) => next.delete(o.id));
-      }
-      if (!isAlreadySelected) {
-        next.add(id);
-      }
-    } else {
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-    }
-    setSelectedOptions(next);
-  };
-  const handleFileSelect = (e) => {
-    const files = Array.from(e.target.files || []);
-    const validFiles = files.filter((file) => {
-      if (file.size > maxFileSize) {
-        console.warn(
-          `File ${file.name} exceeds maximum size of ${maxFileSize} bytes`
-        );
-        return false;
-      }
-      return true;
-    });
-    const remainingSlots = maxFiles - attachedFiles.length;
-    const filesToAdd = validFiles.slice(0, remainingSlots);
-    if (filesToAdd.length < validFiles.length) {
-      console.warn(
-        `Only ${filesToAdd.length} files can be added (max: ${maxFiles})`
-      );
-    }
-    setAttachedFiles((prev) => [...prev, ...filesToAdd]);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  };
-  const handleRemoveFile = (index) => {
-    setAttachedFiles((prev) => prev.filter((_, i) => i !== index));
-  };
-  const handleInternalSubmit = async () => {
-    const state = {};
-    options.forEach((group) => {
-      const selectedInGroup = group.options.filter(
-        (o) => selectedOptions.has(o.id)
-      );
-      if (selectedInGroup.length > 0) {
-        if (group.type === "single") {
-          state[group.id] = selectedInGroup[0].value;
-        } else {
-          state[group.id] = selectedInGroup.map((o) => ({
-            id: o.id,
-            value: o.value
-          }));
-        }
-      }
-    });
-    if (attachedFiles.length > 0) {
-      const filePromises = attachedFiles.map((file) => {
-        return new Promise((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload = () => {
-            try {
-              const base64 = reader.result;
-              if (!base64) {
-                reject(new Error("FileReader returned empty result"));
-                return;
-              }
-              resolve({
-                name: file.name,
-                type: file.type,
-                size: file.size,
-                data: base64
-              });
-            } catch (error) {
-              reject(error);
-            }
-          };
-          reader.onerror = (error) => {
-            reject(new Error(`Failed to read file ${file.name}: ${error}`));
-          };
-          reader.onabort = () => {
-            reject(new Error(`File read aborted for ${file.name}`));
-          };
-          reader.readAsDataURL(file);
-        });
-      });
-      try {
-        const convertedFiles = await Promise.all(filePromises);
-        if (convertedFiles.length > 0) {
-          state.files = convertedFiles;
-        }
-      } catch (error) {
-        console.error("Failed to convert files to base64:", error);
-      }
-    }
-    onSubmit(state);
-    setAttachedFiles([]);
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleInternalSubmit().catch(console.error);
-    }
-  };
-  const handlePaste = (e) => {
-    if (!enabled) return;
-    const items = Array.from(e.clipboardData.items);
-    const files = items.map((item) => item.getAsFile()).filter((file) => file !== null);
-    if (files.length > 0) {
-      const remainingSlots = maxFiles - attachedFiles.length;
-      const validFiles = files.filter((f) => f.size <= maxFileSize);
-      const filesToAdd = validFiles.slice(0, remainingSlots);
-      if (filesToAdd.length > 0) {
-        setAttachedFiles((prev) => [...prev, ...filesToAdd]);
-      }
-    }
-  };
-  return /* @__PURE__ */ jsx("div", { className: cn("relative flex flex-col w-full", className), children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col w-full border-input border-[1.5px] rounded-3xl bg-background shadow-sm focus-within:border-ring transition-all p-2", children: [
-    previews.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3 p-2 px-3 pb-3", children: previews.map((preview, index) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "group relative flex flex-col items-center justify-center w-20 h-20 rounded-xl border bg-muted/30 overflow-hidden shadow-sm",
-        children: [
-          preview.type.startsWith("image/") ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: preview.url,
-              alt: preview.name,
-              className: "w-full h-full object-cover"
-            }
-          ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-2 text-center", children: [
-            preview.type.includes("text") || preview.type.includes("pdf") ? /* @__PURE__ */ jsx(IconFileText, { className: "h-8 w-8 text-muted-foreground" }) : /* @__PURE__ */ jsx(IconFile, { className: "h-8 w-8 text-muted-foreground" }),
-            /* @__PURE__ */ jsx("span", { className: "text-[9px] truncate w-full px-1 mt-1 text-muted-foreground", children: preview.name })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => handleRemoveFile(index),
-              className: "absolute top-1 right-1 p-1 rounded-full bg-foreground/10 hover:bg-foreground/20 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity",
-              children: /* @__PURE__ */ jsx(IconX, { className: "h-3 w-3" })
-            }
-          )
-        ]
-      },
-      index
-    )) }),
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        value,
-        onChange: (e) => onChange(e.target.value),
-        onKeyDown: handleKeyDown,
-        onPaste: handlePaste,
-        placeholder,
-        className: "min-h-[44px] max-h-[200px] border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-3 py-2 text-[15px] resize-none",
-        autoFocus
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center px-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: fileInputRef,
-              type: "file",
-              multiple: true,
-              accept,
-              onChange: handleFileSelect,
-              className: "hidden",
-              disabled: isLoading || attachedFiles.length >= maxFiles
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "sm",
-              onClick: () => fileInputRef.current?.click(),
-              disabled: isLoading || attachedFiles.length >= maxFiles,
-              className: "text-muted-foreground",
-              title: "Attach file",
-              children: [
-                /* @__PURE__ */ jsx(IconPaperclip, { className: "h-4 w-4" }),
-                attachedFiles.length > 0 && /* @__PURE__ */ jsx(Badge, { className: "ml-1 h-[18px] min-w-[18px] px-1.5 text-[10px]", children: attachedFiles.length })
-              ]
-            }
-          )
-        ] }),
-        options.map((group) => {
-          const selectedInGroup = group.options.filter(
-            (o) => selectedOptions.has(o.id)
-          );
-          const label = selectedInGroup.length === 0 ? group.label : selectedInGroup.length === 1 ? selectedInGroup[0].label : group.label;
-          const isSingle = group.type === "single";
-          return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx(
-              DropdownMenuTrigger,
-              {
-                render: (props) => /* @__PURE__ */ jsxs(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    ...props,
-                    className: cn(
-                      "gap-2",
-                      selectedInGroup.length > 0 ? "text-foreground bg-muted/50" : "text-muted-foreground"
-                    ),
-                    children: [
-                      label,
-                      selectedInGroup.length > 1 && /* @__PURE__ */ jsx(Badge, { className: "h-[18px] min-w-[18px] px-1.5 text-[10px]", children: selectedInGroup.length }),
-                      /* @__PURE__ */ jsx(IconChevronDown, { className: "h-3 w-3 opacity-50" })
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-56", children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
-              /* @__PURE__ */ jsx(DropdownMenuLabel, { children: group.label }),
-              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              group.options.map((option) => /* @__PURE__ */ jsx(
-                DropdownMenuCheckboxItem,
-                {
-                  checked: selectedOptions.has(option.id),
-                  onCheckedChange: () => toggleOption(
-                    option.id,
-                    group.options,
-                    isSingle ? "single" : "multiple"
-                  ),
-                  onSelect: (e) => e.preventDefault(),
-                  children: option.label
-                },
-                option.id
-              ))
-            ] }) })
-          ] }, group.id);
-        })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "submit",
-          disabled: !value.trim() && attachedFiles.length === 0 && selectedOptions.size === 0 && !isLoading || isLoading,
-          size: "icon-lg",
-          onClick: () => handleInternalSubmit().catch(console.error),
-          children: isLoading ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ jsx(IconArrowUp, { className: "h-5 w-5" })
-        }
-      )
-    ] })
-  ] }) });
-}
-function StarterPrompts({ prompts }) {
-  if (!prompts || prompts.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500 mt-auto max-w-2xl", children: [
-    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: "What can I help with today?" }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 w-full", children: prompts.map((item, index) => /* @__PURE__ */ jsx(
-      Button2,
-      {
-        label: item.label,
-        variant: "ghost",
-        size: "lg",
-        onClickAction: {
-          type: "text",
-          role: "user",
-          data: { content: item.prompt }
-        },
-        justify: "start"
-      },
-      index
-    )) })
-  ] });
-}
-function MessageContent({ events }) {
-  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);
-    }
-    if (displayEvent.type === "text") {
-      return /* @__PURE__ */ jsx("p", { children: displayEvent.data?.content || displayEvent.data?.text }, index);
-    }
-    if (displayEvent.ui) {
-      return /* @__PURE__ */ jsx(UIRenderer, { node: displayEvent.ui }, index);
-    }
-    return null;
-  }) });
-}
-function MessageBubble({ message }) {
-  const isUser = message.role === "user";
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", isUser ? "items-end" : "items-start"), children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "flex flex-col items-start max-w-[85%] rounded-2xl px-4 py-2 space-y-4 whitespace-pre-wrap",
-        isUser ? "bg-primary text-primary-foreground" : "px-0 py-0 text-foreground"
-      ),
-      children: /* @__PURE__ */ jsx(MessageContent, { events: message.content })
-    }
-  ) });
-}
-function LoadingIndicator({ status }) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const message = status?.message || "Processing...";
-  const details = status?.details;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground group", children: [
-      /* @__PURE__ */ jsx(IconLoader2, { className: "size-3.5 animate-spin" }),
-      /* @__PURE__ */ jsx("div", { className: "animate-pulse", children: message }),
-      details && /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => setIsExpanded(!isExpanded),
-          className: "p-0.5 hover:bg-muted rounded-sm transition-colors flex items-center justify-center",
-          title: isExpanded ? "Hide details" : "Show details",
-          children: isExpanded ? /* @__PURE__ */ jsx(IconChevronUp, { className: "size-3.5 opacity-50 group-hover:opacity-100" }) : /* @__PURE__ */ jsx(IconChevronDown, { className: "size-3.5 opacity-50 group-hover:opacity-100" })
-        }
-      )
-    ] }),
-    isExpanded && details && /* @__PURE__ */ jsx("div", { className: "text-[10px] leading-relaxed font-mono bg-muted/30 p-2.5 rounded border border-border/50 max-h-64 overflow-y-auto whitespace-pre-wrap text-muted-foreground shadow-sm", children: details })
-  ] });
-}
-function ErrorDisplay({ error }) {
-  return /* @__PURE__ */ jsx("div", { className: "text-destructive p-2 border border-destructive rounded-md bg-destructive/10", children: error.message });
-}
-function MessageList({
-  messages,
-  isLoading,
-  error,
-  loadingStatus
-}) {
-  if (messages.length === 0) {
-    return null;
-  }
-  const isTextStreaming = useMemo(() => {
-    if (messages.length === 0 || !isLoading) return false;
-    const lastMessage = messages[messages.length - 1];
-    return lastMessage.content.some((event) => event.type === "text-delta");
-  }, [messages, isLoading]);
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    messages.map((message, index) => /* @__PURE__ */ jsx(MessageBubble, { message }, index)),
-    isLoading && !isTextStreaming && /* @__PURE__ */ jsx(LoadingIndicator, { status: loadingStatus }),
-    error && /* @__PURE__ */ jsx(ErrorDisplay, { error })
-  ] });
-}
-function Thread({
-  placeholder = "Type a message...",
-  starterPrompts: localStarterPrompts,
-  options: localOptions,
-  autoFocus = false,
-  defaultSelectedIds
-}) {
-  const { activeThreadId, threadEvents, isLoadingEvents } = useThreads();
-  const {
-    messages: initialMessages,
-    isLoading,
-    error,
-    sendEvent,
-    loadingStatus,
-    config
-  } = useMelony({
-    initialEvents: threadEvents
-  });
-  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;
-  const allDefaultSelectedIds = useMemo(() => {
-    const defaultSelectedIdsFromOptions = options?.flatMap((group) => group.defaultSelectedIds ?? []) ?? [];
-    return [
-      .../* @__PURE__ */ new Set([
-        ...defaultSelectedIdsFromOptions,
-        ...defaultSelectedIds ?? []
-      ])
-    ];
-  }, [options, defaultSelectedIds]);
-  const [input, setInput] = useState("");
-  const messagesEndRef = useRef(null);
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-  const handleSubmit = async (state, overrideInput) => {
-    const text = (overrideInput ?? input).trim();
-    const hasFiles = state?.files && Array.isArray(state.files) && state.files.length > 0;
-    if (!text && !hasFiles || isLoading) return;
-    if (!overrideInput) setInput("");
-    await sendEvent({
-      type: "text",
-      role: "user",
-      data: { content: text || "" },
-      state: {
-        ...state,
-        threadId: activeThreadId ?? void 0
-      }
-    });
-  };
-  const showStarterPrompts = messages.length === 0 && starterPrompts && starterPrompts.length > 0 && !isLoadingEvents;
-  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col h-full bg-background flex-1 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 pb-36", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "max-w-[48rem] mx-auto w-full p-4",
-            showStarterPrompts && "min-h-full flex flex-col"
-          ),
-          children: isLoadingEvents && messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx(LoadingIndicator, { status: { message: "Loading messages..." } }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            showStarterPrompts && /* @__PURE__ */ jsx(StarterPrompts, { prompts: starterPrompts }),
-            /* @__PURE__ */ jsx(
-              MessageList,
-              {
-                messages,
-                isLoading,
-                error,
-                loadingStatus
-              }
-            )
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 p-4 w-full", children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto", children: /* @__PURE__ */ jsx(
-      Composer,
-      {
-        value: input,
-        onChange: setInput,
-        onSubmit: handleSubmit,
-        placeholder,
-        isLoading,
-        options,
-        autoFocus,
-        defaultSelectedIds: allDefaultSelectedIds,
-        fileAttachments
-      }
-    ) }) })
-  ] });
-}
-function ChatHeader({
-  leftContent,
-  rightContent,
-  className,
-  children
-}) {
-  if (children) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "px-2 border-b border-border h-14 flex items-center shrink-0",
-          className
-        ),
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "px-2 border-b border-border h-14 flex items-center justify-between shrink-0",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: leftContent }),
-        rightContent && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 shrink-0 ml-2", children: rightContent })
-      ]
-    }
-  );
-}
-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;
-      const dateB = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
-      return dateB - dateA;
-    });
-  }, [threads]);
-  return /* @__PURE__ */ jsx(List, { padding, gap, flex: "1", overflow: "scroll", children: sortedThreads.map((thread) => {
-    const isActive = thread.id === activeThreadId;
-    return /* @__PURE__ */ jsx(
-      ListItem,
-      {
-        onClickAction: {
-          type: "client:navigate",
-          data: {
-            url: `?threadId=${thread.id}`
-          }
-        },
-        background: isActive ? "primary" : "transparent",
-        children: /* @__PURE__ */ jsxs(Box, { group: true, width: "full", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 pr-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: thread.title || `Thread ${thread.id.slice(0, 8)}` }) }),
-          /* @__PURE__ */ jsx(Float, { position: "right-center", showOnHover: true, children: /* @__PURE__ */ jsx(
-            Dropdown,
-            {
-              items: [
-                {
-                  label: "Delete",
-                  icon: "trash",
-                  onClickAction: {
-                    role: "system",
-                    type: "delete-thread",
-                    data: {
-                      threadId: thread.id
-                    }
-                  }
-                }
-              ]
-            }
-          ) })
-        ] })
-      },
-      thread.id
-    );
-  }) });
-};
-function PopupChat({
-  title = "Chat",
-  placeholder = "Message the AI",
-  starterPrompts,
-  options,
-  defaultOpen = false,
-  headerProps,
-  defaultSelectedIds
-}) {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-  const [view, setView] = useState("chat");
-  const { createThread } = useThreads();
-  const handleNewChat = async () => {
-    try {
-      await createThread();
-      setView("chat");
-    } catch (error) {
-      console.error("Failed to create new chat:", error);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-6 right-6 z-50 flex flex-col items-end gap-4 font-sans", children: [
-    isOpen && /* @__PURE__ */ jsxs(Card, { className: "py-0 w-[440px] h-[640px] gap-0 flex flex-col overflow-hidden border bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 shadow-2xl animate-in fade-in zoom-in-95 duration-200 origin-bottom-right", children: [
-      /* @__PURE__ */ jsx(
-        ChatHeader,
-        {
-          title: view === "history" ? "History" : title,
-          leftContent: view === "history" ? /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon-xs",
-              onClick: () => setView("chat"),
-              className: "text-muted-foreground hover:text-foreground",
-              children: /* @__PURE__ */ jsx(IconArrowLeft, { className: "size-4" })
-            }
-          ) : void 0,
-          rightContent: /* @__PURE__ */ jsxs(Fragment, { children: [
-            view === "chat" && /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon-xs",
-                onClick: () => setView("history"),
-                className: "text-muted-foreground hover:text-foreground",
-                title: "History",
-                children: /* @__PURE__ */ jsx(IconHistory, { className: "size-4" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon-xs",
-                onClick: handleNewChat,
-                className: "text-muted-foreground hover:text-foreground",
-                title: "New Chat",
-                children: /* @__PURE__ */ jsx(IconPlus, { className: "size-4" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon-xs",
-                onClick: () => setIsOpen(false),
-                className: "text-muted-foreground hover:text-foreground",
-                children: /* @__PURE__ */ jsx(IconX, { className: "size-4" })
-              }
-            )
-          ] }),
-          ...headerProps
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: view === "chat" ? /* @__PURE__ */ jsx(
-        Thread,
-        {
-          placeholder,
-          starterPrompts,
-          options,
-          defaultSelectedIds
-        }
-      ) : /* @__PURE__ */ jsx(
-        ThreadList,
-        {
-          padding: "md",
-          gap: "md",
-          background: "muted",
-          radius: "md"
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "icon-lg",
-        className: cn(
-          "h-14 w-14 rounded-full shadow-2xl transition-all hover:scale-105 active:scale-95",
-          isOpen ? "bg-muted text-muted-foreground hover:bg-muted/80" : "bg-primary text-primary-foreground"
-        ),
-        onClick: () => setIsOpen(!isOpen),
-        children: isOpen ? /* @__PURE__ */ jsx(IconX, { className: "size-6" }) : /* @__PURE__ */ jsx(IconMessage, { className: "size-6" })
-      }
-    )
-  ] });
-}
-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",
-    {
-      className: cn(
-        "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 && widthClass
-      ),
-      style: !collapsed && !widthClass ? { width } : void 0,
-      children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-h-0 flex flex-col", children })
-    }
-  );
-}
-function FullChat({
-  title = "Chat",
-  placeholder,
-  starterPrompts,
-  options,
-  className,
-  headerProps,
-  autoFocus = false,
-  defaultSelectedIds
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full w-full bg-background", className), children: [
-    title && /* @__PURE__ */ jsx(ChatHeader, { title, ...headerProps }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden flex relative", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ jsx(
-      Thread,
-      {
-        placeholder,
-        starterPrompts,
-        options,
-        autoFocus,
-        defaultSelectedIds
-      }
-    ) }) })
-  ] });
-}
-function Surface({ name, children }) {
-  const { events } = useSurface({ name });
-  return /* @__PURE__ */ jsx(Fragment, { children: children(events) });
-}
-function SidebarToggle({ side, className }) {
-  const {
-    leftCollapsed,
-    rightCollapsed,
-    setLeftCollapsed,
-    setRightCollapsed,
-    leftCollapsible,
-    rightCollapsible
-  } = useSidebar();
-  if (side === "left") {
-    if (!leftCollapsible) return null;
-    return /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        onClick: () => setLeftCollapsed(!leftCollapsed),
-        "aria-label": leftCollapsed ? "Expand left sidebar" : "Collapse left sidebar",
-        className: cn("", className),
-        children: leftCollapsed ? /* @__PURE__ */ jsx(IconLayoutSidebarLeftExpand, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconLayoutSidebarLeftCollapse, { className: "h-4 w-4" })
-      }
-    );
-  }
-  if (side === "right") {
-    if (!rightCollapsible) return null;
-    return /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        onClick: () => setRightCollapsed(!rightCollapsed),
-        "aria-label": rightCollapsed ? "Expand right sidebar" : "Collapse right sidebar",
-        className: cn("", className),
-        children: rightCollapsed ? /* @__PURE__ */ jsx(IconLayoutSidebarRightExpand, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconLayoutSidebarRightCollapse, { className: "h-4 w-4" })
-      }
-    );
-  }
-  return null;
-}
-var ThreadPopover = ({}) => {
-  const [isOpen, setIsOpen] = React3.useState(false);
-  useHotkeys(
-    "h",
-    (e) => {
-      e.preventDefault();
-      setIsOpen((prev) => !prev);
-    },
-    {
-      enableOnFormTags: false,
-      // Don't trigger when typing in form inputs
-      enableOnContentEditable: false
-      // Don't trigger in contenteditable elements
-    }
-  );
-  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx(IconHistory, { className: "size-4" }) }) }),
-    /* @__PURE__ */ jsx(
-      PopoverContent,
-      {
-        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, {}) })
-      }
-    )
-  ] });
-};
-var CreateThreadButton = ({
-  className,
-  variant = "ghost",
-  size = "default",
-  onThreadCreated
-}) => {
-  const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React3.useState(false);
-  const handleCreateThread = async () => {
-    if (isCreating) return;
-    try {
-      setIsCreating(true);
-      const threadId = await createThread();
-      if (threadId) {
-        onThreadCreated?.(threadId);
-      }
-    } catch (error) {
-      console.error("Failed to create thread:", error);
-    } finally {
-      setIsCreating(false);
-    }
-  };
-  useHotkeys(
-    "n",
-    (e) => {
-      e.preventDefault();
-      handleCreateThread();
-    },
-    {
-      enableOnFormTags: false,
-      // Don't trigger when typing in form inputs
-      enableOnContentEditable: false
-      // Don't trigger in contenteditable elements
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      variant,
-      size,
-      onClick: handleCreateThread,
-      disabled: isCreating,
-      className: cn(className),
-      children: [
-        /* @__PURE__ */ jsx(IconPlus, { className: "size-4" }),
-        "New chat"
-      ]
-    }
-  );
-};
-function ThemeToggle() {
-  const { theme, setTheme, resolvedTheme } = useTheme();
-  const cycleTheme = () => {
-    if (theme === "light") {
-      setTheme("dark");
-    } else if (theme === "dark") {
-      setTheme("system");
-    } else {
-      setTheme("light");
-    }
-  };
-  const getIcon = () => {
-    if (theme === "system") {
-      return /* @__PURE__ */ jsx(IconDeviceDesktop, { className: "h-4 w-4" });
-    }
-    return resolvedTheme === "dark" ? /* @__PURE__ */ jsx(IconMoon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconSun, { className: "h-4 w-4" });
-  };
-  const getLabel = () => {
-    if (theme === "system") {
-      return "System";
-    }
-    return resolvedTheme === "dark" ? "Dark" : "Light";
-  };
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      variant: "ghost",
-      size: "icon",
-      onClick: cycleTheme,
-      "aria-label": `Toggle theme (current: ${getLabel()})`,
-      title: `Current: ${getLabel()}. Click to cycle: Light \u2192 Dark \u2192 System`,
-      children: getIcon()
-    }
-  );
-}
-var CreateThreadListItem = ({
-  padding = "sm",
-  background,
-  radius = "md"
-}) => {
-  const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React3.useState(false);
-  const handleCreateThread = async () => {
-    if (isCreating) return;
-    try {
-      setIsCreating(true);
-      const threadId = await createThread();
-    } catch (error) {
-      console.error("Failed to create thread:", error);
-    } finally {
-      setIsCreating(false);
-    }
-  };
-  useHotkeys(
-    "n",
-    (e) => {
-      e.preventDefault();
-      handleCreateThread();
-    },
-    {
-      enableOnFormTags: false,
-      // Don't trigger when typing in form inputs
-      enableOnContentEditable: false
-      // Don't trigger in contenteditable elements
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    ListItem,
-    {
-      onClickAction: {
-        type: "client:navigate",
-        data: {
-          url: "?"
-        }
-      },
-      padding,
-      background,
-      radius,
-      children: [
-        /* @__PURE__ */ jsx(IconPlus, { className: "size-4" }),
-        "New chat"
-      ]
-    }
-  );
-};
 
-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 };
+export { MelonyContext, MelonyProvider, useMelony };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map