@melony/react 0.1.0

package/dist/index.js

@@ -0,0 +1,2334 @@
+import * as React9 from 'react';
+import { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { generateId } from 'melony/client';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
+import * as ICONS from '@tabler/icons-react';
+import { IconArrowUp, IconPlus, IconMessage, IconTrash, IconArrowLeft, IconHistory, IconX, IconUser, IconLogout, IconBrandGoogle, IconSelector, IconCheck, IconChevronUp, IconChevronDown } from '@tabler/icons-react';
+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 { Button as Button$1 } from '@base-ui/react/button';
+import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
+import { Menu } from '@base-ui/react/menu';
+
+// src/providers/melony-provider.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function groupEventsToMessages(events) {
+  if (events.length === 0) return [];
+  const messages = [];
+  let currentMessage = null;
+  for (const event of events) {
+    const role = event.role || "assistant";
+    const runId = event.runId;
+    if (!currentMessage || currentMessage.role !== role || runId && currentMessage.runId && runId !== currentMessage.runId) {
+      currentMessage = {
+        role,
+        content: [event],
+        runId
+      };
+      messages.push(currentMessage);
+    } else {
+      currentMessage.content.push(event);
+      if (!currentMessage.runId && runId) {
+        currentMessage.runId = runId;
+      }
+    }
+  }
+  return messages;
+}
+var MelonyContext = createContext(void 0);
+var MelonyProvider = ({
+  children,
+  client
+}) => {
+  const [state, setState] = useState(client.getState());
+  useEffect(() => {
+    setState(client.getState());
+    return () => {
+      client.subscribe(setState);
+    };
+  }, [client]);
+  const sendEvent = useCallback(
+    async (event, options) => {
+      const generator = client.sendEvent(event, options);
+      for await (const _ of generator) {
+      }
+    },
+    [client]
+  );
+  const clear = useCallback(() => client.clear(), [client]);
+  const value = useMemo(
+    () => ({
+      ...state,
+      messages: groupEventsToMessages(state.events),
+      sendEvent,
+      clear,
+      client
+    }),
+    [state, sendEvent, clear, client]
+  );
+  return /* @__PURE__ */ jsx(MelonyContext.Provider, { value, children });
+};
+var AuthContext = createContext(
+  void 0
+);
+var AuthProvider = ({
+  children,
+  service
+}) => {
+  const [user, setUser] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const fetchMe = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const userData = await service.getMe();
+      setUser(userData);
+    } catch (error) {
+      console.error("Failed to fetch user:", error);
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [service]);
+  useEffect(() => {
+    fetchMe();
+  }, [fetchMe]);
+  const login = useCallback(() => {
+    service.login();
+  }, [service]);
+  const logout = useCallback(async () => {
+    try {
+      await service.logout();
+      setUser(null);
+    } catch (error) {
+      console.error("Failed to logout:", error);
+    }
+  }, [service]);
+  const value = {
+    user,
+    isAuthenticated: !!user,
+    isLoading,
+    login,
+    logout,
+    getToken: service.getToken
+  };
+  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..."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children });
+};
+var ThreadContext = createContext(void 0);
+var ThreadProvider = ({
+  children,
+  service,
+  initialThreadId: providedInitialThreadId
+}) => {
+  const defaultInitialThreadId = useMemo(() => generateId(), []);
+  const initialThreadId = providedInitialThreadId || defaultInitialThreadId;
+  const [threads, setThreads] = useState([]);
+  const [activeThreadId, setActiveThreadId] = useState(
+    initialThreadId
+  );
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [threadEvents, setThreadEvents] = useState([]);
+  const [isLoadingEvents, setIsLoadingEvents] = useState(false);
+  const fetchThreads = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const processedThreads = await service.getThreads();
+      setThreads(processedThreads);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Failed to fetch threads");
+      setError(error2);
+      console.error("Failed to fetch threads:", error2);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [service]);
+  useEffect(() => {
+    fetchThreads();
+  }, [fetchThreads]);
+  const selectThread = useCallback((threadId) => {
+    setActiveThreadId(threadId);
+  }, []);
+  const createThread = useCallback(async () => {
+    const newId = service.createThread ? await service.createThread() : generateId();
+    const newThread = {
+      id: newId,
+      updatedAt: /* @__PURE__ */ new Date()
+    };
+    setThreads((prev) => [newThread, ...prev]);
+    setActiveThreadId(newId);
+    return newId;
+  }, [service]);
+  const deleteThread = useCallback(
+    async (threadId) => {
+      try {
+        await service.deleteThread(threadId);
+        setThreads((prev) => {
+          const remainingThreads = prev.filter((t) => t.id !== threadId);
+          setActiveThreadId((current) => {
+            if (current === threadId) {
+              return remainingThreads.length > 0 ? remainingThreads[0].id : null;
+            }
+            return current;
+          });
+          return remainingThreads;
+        });
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error("Failed to delete thread");
+        setError(error2);
+        throw error2;
+      }
+    },
+    [service]
+  );
+  const refreshThreads = useCallback(async () => {
+    await fetchThreads();
+  }, [fetchThreads]);
+  const threadMessages = useMemo(() => {
+    return groupEventsToMessages(threadEvents);
+  }, [threadEvents]);
+  useEffect(() => {
+    if (!activeThreadId) {
+      setThreadEvents([]);
+      setIsLoadingEvents(false);
+      return;
+    }
+    let cancelled = false;
+    const fetchEvents = async () => {
+      setIsLoadingEvents(true);
+      try {
+        const events = await service.getEvents(activeThreadId);
+        if (!cancelled) {
+          setThreadEvents(events);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          console.error("Failed to fetch events:", err);
+          setThreadEvents([]);
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoadingEvents(false);
+        }
+      }
+    };
+    fetchEvents();
+    return () => {
+      cancelled = true;
+    };
+  }, [activeThreadId, service]);
+  const value = useMemo(
+    () => ({
+      threads,
+      activeThreadId,
+      isLoading,
+      error,
+      selectThread,
+      createThread,
+      deleteThread,
+      refreshThreads,
+      threadEvents,
+      threadMessages,
+      isLoadingEvents
+    }),
+    [
+      threads,
+      activeThreadId,
+      isLoading,
+      error,
+      selectThread,
+      createThread,
+      deleteThread,
+      refreshThreads,
+      threadEvents,
+      threadMessages,
+      isLoadingEvents
+    ]
+  );
+  return /* @__PURE__ */ jsx(ThreadContext.Provider, { value, children });
+};
+var useMelony = () => {
+  const context = useContext(MelonyContext);
+  if (context === void 0) {
+    throw new Error("useMelony must be used within a MelonyProvider");
+  }
+  return context;
+};
+var useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === void 0) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};
+var useThreads = () => {
+  const context = useContext(ThreadContext);
+  if (context === void 0) {
+    throw new Error("useThreads must be used within a ThreadProvider");
+  }
+  return context;
+};
+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
+    }
+  );
+}
+var Card2 = ({
+  children,
+  title,
+  subtitle,
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn("w-full max-w-2xl shadow-sm", className),
+      style,
+      children: [
+        (title || subtitle) && /* @__PURE__ */ jsxs(CardHeader, { className: "pb-3", children: [
+          title && /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: title }),
+          subtitle && /* @__PURE__ */ jsx(CardDescription, { children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { className: "flex flex-col gap-4", children })
+      ]
+    }
+  );
+};
+var Row = ({
+  children,
+  gap = "md",
+  align = "start",
+  justify = "start",
+  wrap = false,
+  className,
+  style
+}) => {
+  const gapClasses = {
+    xs: "gap-0",
+    sm: "gap-1",
+    md: "gap-2",
+    lg: "gap-4",
+    xl: "gap-6"
+  };
+  const alignClasses = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch"
+  };
+  const justifyClasses = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-row w-full",
+        gapClasses[gap] || "gap-4",
+        alignClasses[align] || "items-start",
+        justifyClasses[justify] || "justify-start",
+        wrap ? "flex-wrap" : "flex-nowrap",
+        className
+      ),
+      style,
+      children
+    }
+  );
+};
+var Col = ({
+  children,
+  gap = "sm",
+  align = "start",
+  justify = "start",
+  wrap = "nowrap",
+  flex = 1,
+  width,
+  height,
+  padding,
+  overflow,
+  position = "static",
+  className,
+  style
+}) => {
+  const gapClasses = {
+    xs: "gap-1",
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+    xl: "gap-8"
+  };
+  const alignClasses = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch"
+  };
+  const justifyClasses = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around"
+  };
+  const overflowClasses = {
+    auto: "overflow-auto",
+    hidden: "overflow-hidden",
+    scroll: "overflow-scroll",
+    visible: "overflow-visible"
+  };
+  const positionClasses = {
+    static: "static",
+    relative: "relative",
+    absolute: "absolute",
+    fixed: "fixed",
+    sticky: "sticky"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col",
+        gapClasses[gap] || "gap-2",
+        alignClasses[align] || "items-start",
+        justifyClasses[justify] || "justify-start",
+        wrap === "wrap" ? "flex-wrap" : "flex-nowrap",
+        overflow && overflowClasses[overflow],
+        position && positionClasses[position],
+        className
+      ),
+      style: {
+        flex,
+        width,
+        height,
+        padding,
+        ...style
+      },
+      children
+    }
+  );
+};
+var Box = ({
+  children,
+  padding = "md",
+  margin,
+  background,
+  border = false,
+  borderRadius,
+  width,
+  height,
+  overflow = "visible",
+  className,
+  style
+}) => {
+  const paddingClasses = {
+    xs: "p-1",
+    sm: "p-2",
+    md: "p-4",
+    lg: "p-6",
+    xl: "p-8"
+  };
+  const overflowClasses = {
+    auto: "overflow-auto",
+    hidden: "overflow-hidden",
+    scroll: "overflow-scroll",
+    visible: "overflow-visible"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        paddingClasses[padding] || "p-4",
+        border && "border rounded-md",
+        overflowClasses[overflow],
+        className
+      ),
+      style: {
+        margin,
+        background: background ?? void 0,
+        borderRadius,
+        width,
+        height,
+        ...style
+      },
+      children
+    }
+  );
+};
+var Spacer = ({
+  size = "md",
+  direction = "vertical",
+  className,
+  style
+}) => {
+  const sizeClasses = {
+    xs: "p-0.5",
+    sm: "p-1",
+    md: "p-2",
+    lg: "p-4",
+    xl: "p-8"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        direction === "vertical" ? "w-full" : "h-full",
+        sizeClasses[size] || "p-2",
+        className
+      ),
+      style
+    }
+  );
+};
+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",
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      orientation,
+      className: cn("my-4", className),
+      style
+    }
+  );
+};
+var List = ({ children, width, className, style }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col list-none p-0 m-0", className),
+      style: {
+        width,
+        ...style
+      },
+      children
+    }
+  );
+};
+var ListItem = ({
+  children,
+  orientation = "horizontal",
+  gap = "md",
+  align,
+  justify = "start",
+  onClickAction,
+  width,
+  padding = "md",
+  className,
+  style
+}) => {
+  const { sendEvent } = useMelony();
+  const paddingClasses = {
+    xs: "px-1.5 py-1",
+    sm: "px-2 py-1.5",
+    md: "px-3 py-2",
+    lg: "px-4 py-3",
+    xl: "px-6 py-4"
+  };
+  const isInteractive = !!onClickAction;
+  const gapClasses = {
+    xs: "gap-1",
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+    xl: "gap-6"
+  };
+  const resolvedAlign = align ?? (orientation === "vertical" ? "start" : "center");
+  const alignClasses = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch"
+  };
+  const justifyClasses = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around"
+  };
+  const handleClick = () => {
+    if (onClickAction) {
+      sendEvent(onClickAction);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: isInteractive ? handleClick : void 0,
+      className: cn(
+        "flex rounded-md transition-colors",
+        orientation === "horizontal" ? "flex-row" : "flex-col",
+        gapClasses[gap] || "gap-3",
+        alignClasses[resolvedAlign],
+        justifyClasses[justify],
+        paddingClasses[padding] || "px-3 py-2",
+        isInteractive ? "cursor-pointer hover:bg-muted" : "cursor-default",
+        className
+      ),
+      style: {
+        width,
+        ...style
+      },
+      children
+    }
+  );
+};
+var Image = ({
+  src,
+  alt,
+  size = "sm",
+  className,
+  style
+}) => {
+  const [hasError, setHasError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const sizes = {
+    sm: "h-11 w-11",
+    md: "h-22 w-22",
+    lg: "h-44 w-44"
+  };
+  const handleError = () => {
+    setHasError(true);
+    setIsLoading(false);
+  };
+  const handleLoad = () => {
+    setIsLoading(false);
+  };
+  if (hasError) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center rounded-md border bg-muted text-muted-foreground",
+          sizes[size] || "h-11 w-11",
+          className
+        ),
+        style,
+        children: /* @__PURE__ */ jsx("span", { className: "text-[10px]", children: "Error" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative overflow-hidden rounded-md border", className), style, children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt,
+        onError: handleError,
+        onLoad: handleLoad,
+        className: cn(
+          "block h-auto w-full transition-opacity duration-200",
+          isLoading ? "opacity-0" : "opacity-100",
+          sizes[size]
+        )
+      }
+    ),
+    isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted animate-pulse" })
+  ] });
+};
+var Icon = ({
+  name,
+  size,
+  color,
+  className,
+  style
+}) => {
+  const IconComponent = ICONS[name];
+  if (!IconComponent) return null;
+  const sizeMap = {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 28,
+    xxl: 32
+  };
+  const resolvedSize = typeof size === "string" && size in sizeMap ? sizeMap[size] : typeof size === "number" ? size : 20;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("inline-flex items-center justify-center", className),
+      style,
+      children: /* @__PURE__ */ jsx(
+        IconComponent,
+        {
+          size: resolvedSize,
+          color: color || "currentColor",
+          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",
+  className,
+  style
+}) => {
+  const variantMap = {
+    primary: "default",
+    secondary: "secondary",
+    danger: "destructive",
+    success: "default",
+    // Mapping success to default/primary
+    warning: "secondary"
+    // Mapping warning to secondary
+  };
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      variant: variantMap[variant] || "default",
+      className,
+      style,
+      children: label
+    }
+  );
+};
+var Chart = ({
+  data,
+  chartType = "bar",
+  size = "md",
+  showValues = false,
+  showGrid = false,
+  showTooltips = true,
+  className,
+  style
+}) => {
+  const [tooltip, setTooltip] = useState(null);
+  if (!Array.isArray(data)) {
+    return /* @__PURE__ */ jsx("div", { className: "p-4 text-destructive border border-destructive/20 rounded-md bg-destructive/5", children: "Error: Chart data must be an array" });
+  }
+  const maxValue = Math.max(...data.map((d) => d.value), 1);
+  const padding = { top: 40, right: 20, bottom: 40, left: 20 };
+  const chartWidth = size === "sm" ? 300 : size === "md" ? 450 : size === "lg" ? 600 : 800;
+  const chartHeight = size === "sm" ? 150 : size === "md" ? 250 : size === "lg" ? 350 : 450;
+  const 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", { width: chartWidth, height: chartHeight + padding.bottom, className: "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", { width: chartWidth, height: chartHeight + padding.bottom, className: "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__ */ jsx("div", { className: cn("py-4 overflow-x-auto", className), style, children: renderChart() });
+};
+var Text = ({
+  value,
+  size = "md",
+  weight = "normal",
+  align = "start",
+  className,
+  style
+}) => {
+  const sizeClasses = {
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+    xl: "text-xl"
+  };
+  const weightClasses = {
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold"
+  };
+  const alignClasses = {
+    start: "text-left",
+    center: "text-center",
+    end: "text-right",
+    stretch: "text-justify"
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        sizeClasses[size] || "text-base",
+        weightClasses[weight] || "font-normal",
+        alignClasses[align] || "text-left",
+        className
+      ),
+      style,
+      children: value
+    }
+  );
+};
+var Heading = ({
+  value,
+  level = 2,
+  className,
+  style
+}) => {
+  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,
+        "text-foreground",
+        className
+      ),
+      style,
+      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,
+  value,
+  label,
+  name,
+  disabled,
+  onChangeAction,
+  className,
+  style
+}) => {
+  const { sendEvent } = useMelony();
+  const handleChange = (e) => {
+    if (onChangeAction) {
+      sendEvent({
+        ...onChangeAction,
+        data: {
+          name: name || "",
+          value: e.target.value
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Field, { className: cn("w-full", className), style, children: [
+    label && /* @__PURE__ */ jsx(FieldTitle, { children: label }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: inputType,
+        name,
+        id: name,
+        placeholder,
+        defaultValue,
+        value,
+        disabled,
+        onChange: handleChange
+      }
+    )
+  ] });
+};
+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,
+  value,
+  label,
+  name,
+  disabled,
+  rows,
+  onChangeAction,
+  className,
+  style
+}) => {
+  const { sendEvent } = useMelony();
+  const handleChange = (e) => {
+    if (onChangeAction) {
+      sendEvent({
+        ...onChangeAction,
+        data: {
+          name: name || "",
+          value: e.target.value
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Field, { className: cn("w-full", className), style, children: [
+    label && /* @__PURE__ */ jsx(FieldTitle, { children: label }),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        name,
+        id: name,
+        placeholder,
+        defaultValue,
+        value,
+        disabled,
+        rows,
+        onChange: handleChange
+      }
+    )
+  ] });
+};
+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,
+  value,
+  label,
+  name,
+  disabled,
+  placeholder,
+  onChangeAction,
+  className,
+  style
+}) => {
+  const { sendEvent } = useMelony();
+  const handleValueChange = (val) => {
+    if (onChangeAction) {
+      sendEvent({
+        ...onChangeAction,
+        data: {
+          name: name || "",
+          value: val
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Field, { className: cn("w-full", className), style, children: [
+    label && /* @__PURE__ */ jsx(FieldTitle, { children: label }),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        defaultValue,
+        value,
+        disabled,
+        onValueChange: handleValueChange,
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder || "Select an option" }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+        ]
+      }
+    )
+  ] });
+};
+var Label2 = ({
+  value,
+  htmlFor,
+  required,
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Label,
+    {
+      htmlFor,
+      className: cn("flex items-center gap-1", className),
+      style,
+      children: [
+        value,
+        required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+      ]
+    }
+  );
+};
+var Checkbox = ({
+  label,
+  name,
+  value = "on",
+  checked,
+  defaultChecked,
+  disabled,
+  onChangeAction,
+  className,
+  style
+}) => {
+  const { sendEvent } = useMelony();
+  const handleChange = (e) => {
+    if (onChangeAction) {
+      sendEvent({
+        ...onChangeAction,
+        data: {
+          name: name || "",
+          value,
+          checked: e.target.checked
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center gap-2", className),
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            name,
+            id: name,
+            value,
+            checked,
+            defaultChecked,
+            disabled,
+            onChange: handleChange,
+            className: "h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
+          }
+        ),
+        label && /* @__PURE__ */ jsx(
+          Label2,
+          {
+            htmlFor: name,
+            value: label,
+            className: cn(
+              "cursor-pointer select-none text-sm font-medium leading-none",
+              disabled && "cursor-not-allowed opacity-50"
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var RadioGroup = ({
+  name,
+  options,
+  defaultValue,
+  value,
+  label,
+  disabled,
+  orientation = "vertical",
+  onChangeAction,
+  className,
+  style
+}) => {
+  const { sendEvent } = useMelony();
+  const handleChange = (e) => {
+    if (onChangeAction) {
+      sendEvent({
+        ...onChangeAction,
+        data: {
+          name,
+          value: e.target.value
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), style, children: [
+    label && /* @__PURE__ */ jsx(Label2, { value: label, className: "text-sm font-semibold" }),
+    /* @__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 ? true : void 0,
+                    checked: value === 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,
+                    className: cn(
+                      "cursor-pointer select-none text-sm font-medium leading-none",
+                      isDisabled && "cursor-not-allowed opacity-50"
+                    )
+                  }
+                )
+              ]
+            },
+            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 = ({
+  label,
+  variant = "primary",
+  size = "default",
+  disabled = false,
+  fullWidth = false,
+  onClickAction,
+  className,
+  style
+}) => {
+  const { sendEvent } = useMelony();
+  const variantMap = {
+    primary: "default",
+    secondary: "secondary",
+    danger: "destructive",
+    outline: "outline",
+    success: "default"
+    // Success doesn't have a direct shadcn mapping in base variant, default is usually primary
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: variantMap[variant] || "default",
+      size: size === "md" ? "default" : size,
+      disabled,
+      className: cn(fullWidth ? "w-full" : void 0, className),
+      style,
+      onClick: () => {
+        if (onClickAction) {
+          sendEvent(onClickAction);
+        }
+      },
+      children: label
+    }
+  );
+};
+var Form = ({ children, onSubmitAction, className, style }) => {
+  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);
+      sendEvent({
+        ...onSubmitAction,
+        data: {
+          ...onSubmitAction.data || {},
+          ...data
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: cn("w-full", className),
+      style,
+      children: /* @__PURE__ */ jsx(
+        "fieldset",
+        {
+          disabled: isSubmitted,
+          className: "m-0 border-0 p-0",
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex flex-col gap-4 transition-opacity",
+                isSubmitted && "opacity-60 pointer-events-none"
+              ),
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+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,
+    textarea: Textarea2,
+    select: Select2,
+    checkbox: Checkbox,
+    radioGroup: RadioGroup,
+    spacer: Spacer,
+    divider: Divider,
+    box: Box,
+    image: Image,
+    icon: Icon,
+    list: List,
+    listItem: ListItem,
+    form: Form,
+    chart: Chart,
+    label: Label2
+  };
+  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));
+  const componentProps = { ...props };
+  return /* @__PURE__ */ jsx(Component, { ...componentProps, children: renderedChildren });
+}
+function Composer({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Type a message...",
+  isLoading,
+  className
+}) {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSubmit();
+    }
+  };
+  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: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        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"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end items-center px-2 pb-0.5", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "submit",
+        disabled: !value.trim() && !isLoading || isLoading,
+        size: "icon",
+        onClick: () => onSubmit(),
+        className: cn(
+          "h-8 w-8 rounded-full transition-all shrink-0",
+          value.trim() ? "bg-foreground text-background hover:bg-foreground/90" : "bg-muted-foreground/20 text-muted-foreground/40"
+        ),
+        children: /* @__PURE__ */ jsx(IconArrowUp, { className: "h-5 w-5" })
+      }
+    ) })
+  ] }) });
+}
+function Thread({
+  className,
+  placeholder = "Type a message...",
+  starterPrompts,
+  onStarterPromptClick
+}) {
+  const { messages, isLoading, error, sendEvent } = useMelony();
+  const [input, setInput] = useState("");
+  const messagesEndRef = useRef(null);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const handleSubmit = async (e, overrideInput) => {
+    e?.preventDefault();
+    const text = (overrideInput ?? input).trim();
+    if (!text || isLoading) return;
+    if (!overrideInput) setInput("");
+    await sendEvent({
+      type: "text",
+      role: "user",
+      data: { content: text }
+    });
+  };
+  const handleStarterPromptClick = (prompt) => {
+    if (onStarterPromptClick) {
+      onStarterPromptClick(prompt);
+    } else {
+      handleSubmit(void 0, prompt);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full bg-background", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto w-full", children: [
+        messages.length === 0 && starterPrompts && starterPrompts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center min-h-[300px] space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-center 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: "grid grid-cols-1 md:grid-cols-2 gap-3 w-full max-w-2xl px-4", children: starterPrompts.map((item, i) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => handleStarterPromptClick(item.prompt),
+              className: "flex items-center gap-3 p-4 rounded-xl border bg-card hover:bg-muted/50 transition-all text-left group",
+              children: [
+                item.icon && /* @__PURE__ */ jsx("div", { className: "p-2 rounded-lg bg-muted group-hover:bg-background transition-colors", children: item.icon }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: item.label })
+              ]
+            },
+            i
+          )) })
+        ] }),
+        messages.map((message, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex flex-col",
+              message.role === "user" ? "items-end" : "items-start"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "max-w-[85%] rounded-2xl px-4 py-2 space-y-2",
+                  message.role === "user" ? "bg-primary text-primary-foreground" : "px-0 py-0 text-foreground"
+                ),
+                children: message.content.map((event, j) => {
+                  if (event.type === "text-delta")
+                    return /* @__PURE__ */ jsx("span", { children: event.data?.delta }, j);
+                  if (event.type === "text")
+                    return /* @__PURE__ */ jsx("p", { children: event.data?.content || event.data?.text }, j);
+                  if (event.ui) return /* @__PURE__ */ jsx(UIRenderer, { node: event.ui }, j);
+                  return null;
+                })
+              }
+            )
+          },
+          i
+        )),
+        isLoading && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground animate-pulse", children: "Thinking..." }),
+        error && /* @__PURE__ */ jsx("div", { className: "text-destructive p-2 border border-destructive rounded-md bg-destructive/10", children: error.message })
+      ] }),
+      /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-4 border-t w-full", children: /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto", children: /* @__PURE__ */ jsx(
+      Composer,
+      {
+        value: input,
+        onChange: setInput,
+        onSubmit: handleSubmit,
+        placeholder,
+        isLoading
+      }
+    ) }) })
+  ] });
+}
+var ThreadList = ({
+  className,
+  emptyState,
+  onThreadSelect
+}) => {
+  const {
+    threads,
+    activeThreadId,
+    selectThread,
+    createThread,
+    deleteThread
+  } = useThreads();
+  const handleThreadClick = (threadId) => {
+    if (threadId !== activeThreadId) {
+      selectThread(threadId);
+    }
+    onThreadSelect?.(threadId);
+  };
+  const handleDelete = async (e, threadId) => {
+    e.stopPropagation();
+    try {
+      await deleteThread(threadId);
+    } catch (error) {
+      console.error("Failed to delete thread:", error);
+    }
+  };
+  const handleNewThread = async () => {
+    try {
+      await createThread();
+    } catch (error) {
+      console.error("Failed to create thread:", error);
+    }
+  };
+  const formatDate = (date) => {
+    if (!date) return "";
+    const d = typeof date === "string" ? new Date(date) : date;
+    if (isNaN(d.getTime())) return "";
+    const now = /* @__PURE__ */ new Date();
+    const diffMs = now.getTime() - d.getTime();
+    const diffMins = Math.floor(diffMs / 6e4);
+    const diffHours = Math.floor(diffMs / 36e5);
+    const diffDays = Math.floor(diffMs / 864e5);
+    if (diffMins < 1) return "Just now";
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return d.toLocaleDateString();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "p-2 border-b", children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: handleNewThread,
+        className: "w-full justify-start",
+        children: [
+          /* @__PURE__ */ jsx(IconPlus, { className: "mr-2 size-4" }),
+          "New Thread"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(IconMessage, { className: "size-8 mx-auto opacity-50" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No threads yet" }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleNewThread, children: "Start a conversation" })
+    ] }) }) : /* @__PURE__ */ jsx("div", { className: "p-2 space-y-1", children: threads.map((thread) => {
+      const isActive = thread.id === activeThreadId;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: () => handleThreadClick(thread.id),
+          className: cn(
+            "group relative flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors",
+            isActive ? "bg-primary text-primary-foreground" : "hover:bg-muted"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-sm font-medium truncate",
+                    isActive && "text-primary-foreground"
+                  ),
+                  children: thread.title || `Thread ${thread.id.slice(0, 8)}`
+                }
+              ),
+              thread.updatedAt && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-xs shrink-0",
+                    isActive ? "text-primary-foreground/70" : "text-muted-foreground"
+                  ),
+                  children: formatDate(thread.updatedAt)
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-xs",
+                onClick: (e) => handleDelete(e, thread.id),
+                className: cn(
+                  "opacity-0 group-hover:opacity-100 transition-opacity shrink-0",
+                  isActive && "hover:bg-primary-foreground/20"
+                ),
+                children: /* @__PURE__ */ jsx(IconTrash, { className: "size-3" })
+              }
+            )
+          ]
+        },
+        thread.id
+      );
+    }) }) })
+  ] });
+};
+function ChatPopup({
+  title = "Chat",
+  placeholder = "Message the AI",
+  starterPrompts,
+  defaultOpen = false
+}) {
+  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] 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__ */ jsxs(CardHeader, { className: "p-4 border-b flex flex-row items-center justify-between space-y-0 h-14 shrink-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          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" })
+            }
+          ),
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-semibold", children: view === "history" ? "History" : title })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", 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" })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: view === "chat" ? /* @__PURE__ */ jsx(
+        Thread,
+        {
+          placeholder,
+          starterPrompts,
+          className: "h-full"
+        }
+      ) : /* @__PURE__ */ jsx(
+        ThreadList,
+        {
+          onThreadSelect: () => setView("chat"),
+          className: "h-full"
+        }
+      ) })
+    ] }),
+    /* @__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 ChatSidebar({
+  title = "Chat",
+  placeholder = "Message the AI",
+  starterPrompts,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full border-r bg-background w-80", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "p-4 border-b h-14 flex items-center shrink-0", children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: title }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+      Thread,
+      {
+        placeholder,
+        starterPrompts,
+        className: "h-full"
+      }
+    ) })
+  ] });
+}
+function ChatFull({
+  title = "Chat",
+  placeholder = "Message the AI",
+  starterPrompts,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full w-full bg-background", className), children: [
+    title && /* @__PURE__ */ jsx("div", { className: "p-4 border-b h-14 flex items-center shrink-0", children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: title }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(Thread, { placeholder, starterPrompts }) })
+  ] });
+}
+function AlertDialog({ ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialog$1.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialog$1.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Backdrop,
+    {
+      "data-slot": "alert-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-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialog$1.Popup,
+      {
+        "data-slot": "alert-dialog-content",
+        "data-size": size,
+        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 bg-background ring-foreground/5 gap-6 rounded-4xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn("text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className),
+      ...props
+    }
+  );
+}
+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 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
+    }
+  );
+}
+var AccountDialog = ({
+  className,
+  variant,
+  size
+}) => {
+  const { isLoading, isAuthenticated, login, logout } = useAuth();
+  const [open, setOpen] = React9.useState(false);
+  const [error, setError] = React9.useState(null);
+  const handleGoogleSignIn = async () => {
+    login();
+  };
+  if (isAuthenticated) {
+    return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenuTrigger,
+        {
+          render: (props) => /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant,
+              size,
+              ...props,
+              className,
+              children: [
+                /* @__PURE__ */ jsx(IconUser, { className: "mr-2 size-4" }),
+                "Account"
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { children: [
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+          /* @__PURE__ */ jsx(IconUser, { className: "mr-2 size-4" }),
+          "Account"
+        ] }),
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: logout, children: [
+          /* @__PURE__ */ jsx(IconLogout, { className: "mr-2 size-4" }),
+          "Logout"
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant,
+        size,
+        onClick: () => setOpen(true),
+        className,
+        children: [
+          /* @__PURE__ */ jsx(IconBrandGoogle, { className: "mr-2 size-4" }),
+          "Sign in with Google"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(AlertDialogContent, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Sign in to continue" }),
+        /* @__PURE__ */ jsx(AlertDialogDescription, { children: "Choose your preferred sign-in method to access your account." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 py-4", 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"
+            ]
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+};
+
+export { AccountDialog, AuthContext, AuthProvider, ChatFull, ChatPopup, ChatSidebar, Composer, MelonyContext, MelonyProvider, Thread, ThreadContext, ThreadList, ThreadProvider, UIRenderer, useAuth, useMelony, useThreads };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map