@melony/react 0.1.27 → 0.1.29

package/dist/index.cjs

@@ -4,23 +4,22 @@ var React11 = require('react');
 var react = require('nuqs/adapters/react');
 var reactQuery = require('@tanstack/react-query');
 var jsxRuntime = require('react/jsx-runtime');
-var button = require('@base-ui/react/button');
-var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var dialog = require('@base-ui/react/dialog');
+var button = require('@base-ui/react/button');
+var classVarianceAuthority = require('class-variance-authority');
 var ICONS = require('@tabler/icons-react');
+var menu = require('@base-ui/react/menu');
+var separator = require('@base-ui/react/separator');
 var client = require('melony/client');
 var nuqs = require('nuqs');
 var mergeProps = require('@base-ui/react/merge-props');
 var useRender = require('@base-ui/react/use-render');
-var menu = require('@base-ui/react/menu');
-var separator = require('@base-ui/react/separator');
-var dialog = require('@base-ui/react/dialog');
 var input = require('@base-ui/react/input');
 var select = require('@base-ui/react/select');
 var reactDom = require('react-dom');
 var reactHotkeysHook = require('react-hotkeys-hook');
-var alertDialog = require('@base-ui/react/alert-dialog');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -171,7 +170,7 @@ var MelonyContextProviderInner = ({
   }, [value, setContextValue]);
   return /* @__PURE__ */ jsxRuntime.jsx(react.NuqsAdapter, { children });
 };
-var MelonyClientProvider = ({
+var MelonyProvider = ({
   children,
   client,
   initialEvents,
@@ -188,9 +187,121 @@ var MelonyClientProvider = ({
     }
   ) }) });
 };
+var useAuth = () => {
+  const context = React11.useContext(AuthContext);
+  if (context === void 0) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.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__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      dialog.Dialog.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__ */ jsxRuntime.jsx(
+    dialog.Dialog.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    dialog.Dialog.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
 var buttonVariants = classVarianceAuthority.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",
   {
@@ -235,12 +346,287 @@ function Button({
     }
   );
 }
-var useAuth = () => {
-  const context = React11.useContext(AuthContext);
-  if (context === void 0) {
-    throw new Error("useAuth must be used within an AuthProvider");
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        menu.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__ */ jsxRuntime.jsx(menu.Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    menu.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__ */ jsxRuntime.jsx(
+    menu.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__ */ jsxRuntime.jsxs(
+    menu.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(menu.Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              ICONS.IconCheck,
+              {}
+            ) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border/50 -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    separator.Separator,
+    {
+      "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 AccountButton = ({
+  className,
+  variant = "outline",
+  size
+}) => {
+  const { isLoading, isAuthenticated, user, login, logout } = useAuth();
+  const [open, setOpen] = React11__namespace.useState(false);
+  const [accountInfoOpen, setAccountInfoOpen] = React11__namespace.useState(false);
+  const [error, setError] = React11__namespace.useState(null);
+  const initials = React11__namespace.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownMenuTrigger,
+          {
+            render: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant,
+                size: "icon",
+                ...props,
+                className: cn("rounded-full", className),
+                children: user?.picture ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: user.picture,
+                    alt: user.displayName || user.name,
+                    className: "size-7 rounded-full object-cover"
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center rounded-full bg-muted text-xs font-bold", children: initials || /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "size-4" }) })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2", children: [
+            user?.picture ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: user.picture,
+                alt: user.displayName || user.name,
+                className: "size-8 rounded-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-muted text-xs font-bold", children: initials || /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "size-4" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-0.5 overflow-hidden", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-medium", children: user?.displayName || user?.name }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-muted-foreground", children: user?.email })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-1" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onClick: () => setAccountInfoOpen(true), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "mr-2 size-4" }),
+            "Account Settings"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onClick: logout, className: "text-destructive", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLogout, { className: "mr-2 size-4" }),
+            "Logout"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: accountInfoOpen, onOpenChange: setAccountInfoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Account Information" }),
+          /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Your account details and settings." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogClose, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconX, { className: "size-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 py-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+            user?.picture ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: user.picture,
+                alt: user.displayName || user.name,
+                className: "size-16 rounded-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-muted text-xl font-bold", children: initials || /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "size-8 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: user?.displayName || user?.name }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: user?.email })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "User ID" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-xs truncate", children: user?.uid || user?.id })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Created At" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: user?.createdAt || "N/A" })
+            ] })
+          ] })
+        ] })
+      ] }) })
+    ] });
   }
-  return context;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant,
+        size,
+        onClick: () => setOpen(true),
+        className,
+        children: "Sign in"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Sign in to continue" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Choose your preferred sign-in method to access your account." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogClose, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconX, { className: "size-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+        error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            onClick: handleGoogleSignIn,
+            disabled: isLoading,
+            variant: "outline",
+            className: "w-full",
+            size: "lg",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconBrandGoogle, { className: "mr-2 size-5" }),
+              isLoading ? "Signing in..." : "Continue with Google"
+            ]
+          }
+        )
+      ] })
+    ] }) })
+  ] });
 };
 function WelcomeScreen({
   title = "Welcome to Melony",
@@ -271,13 +657,6 @@ function WelcomeScreen({
   imageAlt = "Product screenshot"
 }) {
   const { login, isLoading } = useAuth();
-  const handleLogin = () => {
-    if (onLoginClick) {
-      onLoginClick();
-    } else {
-      login();
-    }
-  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -314,26 +693,7 @@ function WelcomeScreen({
             /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: "Get Started" }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-lg", children: "Sign in to your account to continue" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              Button,
-              {
-                size: "lg",
-                variant: "outline",
-                className: "w-full h-16 text-lg shadow-sm hover:shadow-md transition-all flex items-center justify-center gap-3 border-2 font-medium bg-background text-foreground hover:bg-accent",
-                onClick: handleLogin,
-                disabled: isLoading,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconBrandGoogle, { className: "size-6" }),
-                  isLoading ? "Signing in..." : "Continue with Google"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative py-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-full border-t border-border" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-background px-3 text-muted-foreground tracking-widest font-medium", children: "Secure access" }) })
-            ] })
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx(AccountButton, {}) }),
           /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground leading-relaxed text-center md:text-left", children: [
             "By continuing, you agree to our ",
             /* @__PURE__ */ jsxRuntime.jsx("br", { className: "hidden md:block" }),
@@ -696,175 +1056,58 @@ var useThreads = () => {
     throw new Error("useThreads must be used within a ThreadProvider");
   }
   return context;
-};
-function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.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 badgeVariants = classVarianceAuthority.cva(
-  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
-  {
-    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.useRender({
-    defaultTagName: "span",
-    props: mergeProps.mergeProps(
-      {
-        className: cn(badgeVariants({ className, variant }))
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "badge",
-      variant
-    }
-  });
-}
-function DropdownMenu({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
-}
-function DropdownMenuContent({
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Positioner,
-    {
-      className: "isolate z-50 outline-none",
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        menu.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__ */ jsxRuntime.jsx(menu.Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
-}
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    menu.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
-}) {
+};
+function Textarea({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Item,
+    "textarea",
     {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
+      "data-slot": "textarea",
       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",
+        "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
     }
   );
 }
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    menu.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(menu.Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              ICONS.IconCheck,
-              {}
-            ) })
-          }
-        ),
-        children
-      ]
+var badgeVariants = classVarianceAuthority.cva(
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
+  {
+    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 DropdownMenuSeparator({
+  }
+);
+function Badge({
   className,
+  variant = "default",
+  render,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Separator,
-    {
-      "data-slot": "dropdown-menu-separator",
-      className: cn("bg-border/50 -mx-1 my-1 h-px", className),
-      ...props
+  return useRender.useRender({
+    defaultTagName: "span",
+    props: mergeProps.mergeProps(
+      {
+        className: cn(badgeVariants({ className, variant }))
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant
     }
-  );
+  });
 }
 function Composer({
   value,
@@ -1109,11 +1352,12 @@ function Composer({
             /* @__PURE__ */ jsxRuntime.jsx(
               DropdownMenuTrigger,
               {
-                render: /* @__PURE__ */ jsxRuntime.jsxs(
+                render: (props) => /* @__PURE__ */ jsxRuntime.jsxs(
                   Button,
                   {
                     variant: "ghost",
                     size: "sm",
+                    ...props,
                     className: cn(
                       "gap-2",
                       selectedInGroup.length > 0 ? "text-foreground bg-muted/50" : "text-muted-foreground"
@@ -1152,7 +1396,7 @@ function Composer({
         Button,
         {
           type: "submit",
-          disabled: !value.trim() && attachedFiles.length === 0 && !isLoading || isLoading,
+          disabled: !value.trim() && attachedFiles.length === 0 && selectedOptions.size === 0 && !isLoading || isLoading,
           size: "icon-lg",
           onClick: () => handleInternalSubmit().catch(console.error),
           children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLoader2, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconArrowUp, { className: "h-5 w-5" })
@@ -1426,24 +1670,6 @@ var Spacer = ({
     }
   );
 };
-function Separator({
-  className,
-  orientation = "horizontal",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    separator.Separator,
-    {
-      "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,
@@ -1487,7 +1713,7 @@ var ListItem = ({
   const paddingClasses = {
     xs: "px-1.5 py-1",
     sm: "px-2 py-1.5",
-    md: "px-3 py-2",
+    md: "px-3 py-1.5",
     lg: "px-4 py-3",
     xl: "px-6 py-4"
   };
@@ -1523,7 +1749,7 @@ var ListItem = ({
     {
       onClick: isInteractive ? handleClick : void 0,
       className: cn(
-        "flex rounded-md transition-colors",
+        "flex rounded-md transition-colors text-sm",
         orientation === "horizontal" ? "flex-row" : "flex-col",
         gapClasses[gap] || "gap-3",
         alignClasses[resolvedAlign],
@@ -1540,111 +1766,6 @@ var ListItem = ({
     }
   );
 };
-function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { "data-slot": "dialog", ...props });
-}
-function DialogTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
-}
-function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    dialog.Dialog.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__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      dialog.Dialog.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__ */ jsxRuntime.jsx(
-    dialog.Dialog.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    dialog.Dialog.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn(
-        "text-lg font-semibold leading-none tracking-tight",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    dialog.Dialog.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn("text-sm text-muted-foreground", className),
-      ...props
-    }
-  );
-}
 var Image = ({
   src,
   alt,
@@ -2670,7 +2791,16 @@ function UIRenderer({ node }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...componentProps, children: renderedChildren });
 }
 function MessageContent({ events }) {
+  const latestSlotIndexes = /* @__PURE__ */ new Map();
+  events.forEach((event, index) => {
+    if (event.slot) {
+      latestSlotIndexes.set(event.slot, index);
+    }
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: events.map((event, index) => {
+    if (event.slot && latestSlotIndexes.get(event.slot) !== index) {
+      return null;
+    }
     if (event.type === "text-delta") {
       return /* @__PURE__ */ jsxRuntime.jsx("span", { children: event.data?.delta }, index);
     }
@@ -2783,7 +2913,8 @@ function Thread({
   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;
+    const hasOptions = state && Object.keys(state).filter((k) => k !== "threadId").length > 0;
+    if (!text && !hasFiles && !hasOptions || isLoading) return;
     if (!overrideInput) setInput("");
     await sendEvent(
       {
@@ -2791,7 +2922,12 @@ function Thread({
         role: "user",
         data: { content: text || "" }
       },
-      { state: { ...state, threadId: activeThreadId ?? void 0 } }
+      {
+        state: {
+          ...state,
+          threadId: activeThreadId ?? void 0
+        }
+      }
     );
   };
   const handleStarterPromptClick = (prompt) => {
@@ -2812,7 +2948,7 @@ function Thread({
             "div",
             {
               className: cn(
-                "max-w-4xl mx-auto w-full p-4",
+                "max-w-[48rem] mx-auto w-full p-4",
                 showStarterPrompts && "min-h-full flex flex-col"
               ),
               children: isLoadingEvents && messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { status: { message: "Loading messages..." } }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -2837,7 +2973,7 @@ function Thread({
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 p-4 w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 p-4 w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
           Composer,
           {
             value: input,
@@ -2887,11 +3023,39 @@ function ChatHeader({
     }
   );
 }
-var ThreadList = ({
+var Dropdown = ({
   className,
-  emptyState,
-  onThreadSelect
+  trigger,
+  triggerClassName,
+  items
 }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenuTrigger,
+      {
+        className: triggerClassName,
+        render: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-xs",
+            ...props,
+            onClick: (e) => {
+              e.stopPropagation();
+              props.onClick?.(e);
+            },
+            children: trigger || /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconDotsVertical, { className: "size-3.5" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", className: cn("w-32", className), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onClick: item.onClick, children: [
+      item.icon,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+    ] }, item.label)) })
+  ] });
+};
+var ThreadList = ({ className }) => {
   const { threads, activeThreadId, selectThread, deleteThread, isLoading } = useThreads();
   const sortedThreads = React11__namespace.useMemo(() => {
     return [...threads].sort((a, b) => {
@@ -2900,73 +3064,44 @@ var ThreadList = ({
       return dateB - dateA;
     });
   }, [threads]);
-  const handleThreadClick = (threadId) => {
-    if (threadId !== activeThreadId) {
-      selectThread(threadId);
-    }
-    onThreadSelect?.(threadId);
-  };
   const handleDelete = async (threadId) => {
-    try {
-      await deleteThread(threadId);
-    } catch (error) {
-      console.error("Failed to delete thread:", error);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading && threads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLoader2, { className: "size-5 animate-spin text-muted-foreground" }) }) : threads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconMessage, { className: "size-8 mx-auto opacity-50" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "No threads yet" })
-  ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 space-y-1", children: sortedThreads.map((thread) => {
-    const isActive = thread.id === activeThreadId;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        onClick: () => handleThreadClick(thread.id),
-        className: cn(
-          "group relative flex items-center gap-3 px-3 py-1.5 rounded-lg cursor-pointer transition-colors",
-          isActive ? "bg-muted text-foreground" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: thread.title || `Thread ${thread.id.slice(0, 8)}` }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DropdownMenuTrigger,
-              {
-                render: (props) => /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "icon-xs",
-                    ...props,
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      props.onClick?.(e);
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconDotsVertical, { className: "size-3.5" })
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", className: "w-32", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              DropdownMenuItem,
-              {
-                variant: "destructive",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  handleDelete(thread.id);
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconTrash, { className: "size-4 mr-2" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Delete" })
-                ]
-              }
-            ) })
-          ] }) })
+    try {
+      await deleteThread(threadId);
+    } catch (error) {
+      console.error("Failed to delete thread:", error);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(List, { className, children: sortedThreads.map((thread) => {
+    const isActive = thread.id === activeThreadId;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ListItem,
+      {
+        onClickAction: {
+          type: "client:navigate",
+          data: {
+            url: `?threadId=${thread.id}`
+          }
+        },
+        className: isActive ? "bg-muted text-foreground group" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground group",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: thread.title || `Thread ${thread.id.slice(0, 8)}` }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Dropdown,
+            {
+              items: [
+                {
+                  label: "Delete",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconTrash, { className: "size-4" }),
+                  onClick: () => handleDelete(thread.id)
+                }
+              ]
+            }
+          ) })
         ]
       },
       thread.id
     );
-  }) }) }) });
+  }) });
 };
 function PopupChat({
   title = "Chat",
@@ -3053,7 +3188,6 @@ function PopupChat({
       ) : /* @__PURE__ */ jsxRuntime.jsx(
         ThreadList,
         {
-          onThreadSelect: () => setView("chat"),
           className: "h-full"
         }
       ) })
@@ -3356,8 +3490,7 @@ var ThreadPopover = ({
   buttonClassName,
   buttonVariant = "ghost",
   buttonSize = "icon",
-  emptyState,
-  onThreadSelect
+  emptyState
 }) => {
   const [isOpen, setIsOpen] = React11__namespace.useState(false);
   reactHotkeysHook.useHotkeys(
@@ -3373,10 +3506,6 @@ var ThreadPopover = ({
       // Don't trigger in contenteditable elements
     }
   );
-  const handleThreadSelect = (threadId) => {
-    setIsOpen(false);
-    onThreadSelect?.(threadId);
-  };
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       Button,
@@ -3394,14 +3523,7 @@ var ThreadPopover = ({
         side: "bottom",
         align: "start",
         sideOffset: 8,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
-          ThreadList,
-          {
-            emptyState,
-            onThreadSelect: handleThreadSelect,
-            className: "h-full"
-          }
-        ) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(ThreadList, { emptyState, className: "h-full" }) })
       }
     )
   ] });
@@ -3455,231 +3577,6 @@ var CreateThreadButton = ({
     }
   );
 };
-function AlertDialog({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
-}
-function AlertDialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props });
-}
-function AlertDialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    alertDialog.AlertDialog.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__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      alertDialog.AlertDialog.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    alertDialog.AlertDialog.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__ */ jsxRuntime.jsx(
-    alertDialog.AlertDialog.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
-    }
-  );
-}
-var AccountDialog = ({
-  className,
-  variant = "outline",
-  size
-}) => {
-  const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  const [open, setOpen] = React11__namespace.useState(false);
-  const [accountInfoOpen, setAccountInfoOpen] = React11__namespace.useState(false);
-  const [error, setError] = React11__namespace.useState(null);
-  const initials = React11__namespace.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DropdownMenuTrigger,
-          {
-            render: (props) => /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant,
-                size: "icon",
-                ...props,
-                className: cn("rounded-full", className),
-                children: user?.picture ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
-                  {
-                    src: user.picture,
-                    alt: user.displayName || user.name,
-                    className: "size-7 rounded-full object-cover"
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center rounded-full bg-muted text-xs font-bold", children: initials || /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "size-4" }) })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2", children: [
-            user?.picture ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: user.picture,
-                alt: user.displayName || user.name,
-                className: "size-8 rounded-full object-cover"
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-muted text-xs font-bold", children: initials || /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "size-4" }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-0.5 overflow-hidden", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-medium", children: user?.displayName || user?.name }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-muted-foreground", children: user?.email })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-1" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onClick: () => setAccountInfoOpen(true), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "mr-2 size-4" }),
-            "Account Settings"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onClick: logout, className: "text-destructive", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLogout, { className: "mr-2 size-4" }),
-            "Logout"
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: accountInfoOpen, onOpenChange: setAccountInfoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Account Information" }),
-          /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Your account details and settings." })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogClose, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconX, { className: "size-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 py-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-            user?.picture ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: user.picture,
-                alt: user.displayName || user.name,
-                className: "size-16 rounded-full object-cover"
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-muted text-xl font-bold", children: initials || /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "size-8 text-muted-foreground" }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: user?.displayName || user?.name }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: user?.email })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "User ID" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-xs truncate", children: user?.uid || user?.id })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Created At" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: user?.createdAt || "N/A" })
-            ] })
-          ] })
-        ] })
-      ] }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        variant,
-        size,
-        onClick: () => setOpen(true),
-        className,
-        children: "Sign in"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "sm:max-w-md", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { children: "Sign in to continue" }),
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogDescription, { children: "Choose your preferred sign-in method to access your account." })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 py-4", children: [
-        error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-destructive/10 p-3 text-sm text-destructive", children: error }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Button,
-          {
-            onClick: handleGoogleSignIn,
-            disabled: isLoading,
-            variant: "outline",
-            className: "w-full",
-            size: "lg",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconBrandGoogle, { className: "mr-2 size-5" }),
-              isLoading ? "Signing in..." : "Continue with Google"
-            ]
-          }
-        )
-      ] })
-    ] }) })
-  ] });
-};
 function ThemeToggle() {
   const { theme, setTheme, resolvedTheme } = useTheme();
   const cycleTheme = () => {
@@ -3715,8 +3612,54 @@ function ThemeToggle() {
     }
   );
 }
+var CreateThreadNavItem = ({
+  className
+}) => {
+  const { createThread } = useThreads();
+  const [isCreating, setIsCreating] = React11__namespace.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);
+    }
+  };
+  reactHotkeysHook.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__ */ jsxRuntime.jsxs(
+    ListItem,
+    {
+      onClickAction: {
+        type: "client:navigate",
+        data: {
+          url: `?threadId=${client.generateId()}`
+        }
+      },
+      className: cn(className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPlus, { className: "size-4" }),
+        "New chat"
+      ]
+    }
+  );
+};
 
-exports.AccountDialog = AccountDialog;
+exports.AccountButton = AccountButton;
 exports.AuthContext = AuthContext;
 exports.AuthProvider = AuthProvider;
 exports.Badge = Badge2;
@@ -3729,7 +3672,9 @@ exports.Checkbox = Checkbox;
 exports.Col = Col;
 exports.Composer = Composer;
 exports.CreateThreadButton = CreateThreadButton;
+exports.CreateThreadNavItem = CreateThreadNavItem;
 exports.Divider = Divider;
+exports.Dropdown = Dropdown;
 exports.Form = Form;
 exports.FullChat = FullChat;
 exports.Heading = Heading;
@@ -3738,8 +3683,8 @@ exports.Input = Input2;
 exports.Label = Label2;
 exports.List = List;
 exports.ListItem = ListItem;
-exports.MelonyClientProvider = MelonyClientProvider;
 exports.MelonyContext = MelonyContext;
+exports.MelonyProvider = MelonyProvider;
 exports.PopupChat = PopupChat;
 exports.RadioGroup = RadioGroup;
 exports.Row = Row;