@mastra/playground-ui 29.0.0-alpha.8 → 29.0.0

package/dist/index.cjs.js

@@ -19,12 +19,12 @@ const autocomplete = require('@codemirror/autocomplete');
 const lucideReact = require('lucide-react');
 const sonner = require('sonner');
 const react = require('@mastra/react');
-const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
+const alertDialog = require('@base-ui/react/alert-dialog');
 const CheckboxPrimitive = require('@radix-ui/react-checkbox');
-const CollapsiblePrimitive = require('@radix-ui/react-collapsible');
+const collapsible = require('@base-ui/react/collapsible');
 const combobox = require('@base-ui/react/combobox');
 const cmdk = require('cmdk');
-const DialogPrimitive = require('@radix-ui/react-dialog');
+const dialog = require('@base-ui/react/dialog');
 const SelectPrimitive = require('@radix-ui/react-select');
 const tabs = require('@base-ui/react/tabs');
 const menu = require('@base-ui/react/menu');
@@ -42,11 +42,11 @@ const dateFns = require('date-fns');
 const reactDayPicker = require('react-day-picker');
 const HoverCard = require('@radix-ui/react-hover-card');
 const reactSlot = require('@radix-ui/react-slot');
+const Dialog$1 = require('@radix-ui/react-dialog');
 const dnd = require('@hello-pangea/dnd');
 const merge = require('@codemirror/merge');
 const format = require('date-fns/format');
 const isToday = require('date-fns/isToday');
-const reactDropdownMenu = require('@radix-ui/react-dropdown-menu');
 const search = require('@codemirror/search');
 const recharts = require('recharts');
 const reactResizablePanels = require('react-resizable-panels');
@@ -74,16 +74,14 @@ function _interopNamespaceDefault(e) {
 }
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
 const CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CheckboxPrimitive);
-const CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
-const DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
 const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
 const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(VisuallyHidden);
 const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
 const RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(RadioGroupPrimitive);
 const SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespaceDefault(SwitchPrimitives);
 const HoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(HoverCard);
+const Dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(Dialog$1);
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -6064,9 +6062,7 @@ const Textarea = React__namespace.forwardRef(
 );
 Textarea.displayName = "Textarea";
 
-const AlertDialogRoot = AlertDialogPrimitive__namespace.Root;
-const AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
-const AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
+const AlertDialogRoot = alertDialog.AlertDialog.Root;
 function AlertDialog({
   open,
   onOpenChange,
@@ -6074,21 +6070,30 @@ function AlertDialog({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogRoot, { open, onOpenChange, children });
 }
+const AlertDialogTrigger = React__namespace.forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog.Trigger, { ref, ...renderProps, ...props, children: asChild ? void 0 : children });
+  }
+);
+AlertDialogTrigger.displayName = "AlertDialogTrigger";
+const AlertDialogPortal = alertDialog.AlertDialog.Portal;
 const AlertDialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  AlertDialogPrimitive__namespace.Overlay,
+  alertDialog.AlertDialog.Backdrop,
   {
     ref,
     className: cn("dialog-overlay-anim fixed inset-0 z-50 bg-overlay backdrop-blur-xs", className),
     ...props
   }
 ));
-AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
+AlertDialogOverlay.displayName = "AlertDialogOverlay";
 const AlertDialogContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsx(
-    AlertDialogPrimitive__namespace.Content,
+    alertDialog.AlertDialog.Popup,
     {
       ref,
+      "data-slot": "alert-dialog-content",
       className: cn(
         "dialog-content-anim",
         "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%]",
@@ -6100,35 +6105,41 @@ const AlertDialogContent = React__namespace.forwardRef(({ className, ...props },
     }
   )
 ] }));
-AlertDialogContent.displayName = AlertDialogPrimitive__namespace.Content.displayName;
+AlertDialogContent.displayName = "AlertDialogContent";
 const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-0.5 px-4 py-3 text-left", className), ...props });
 AlertDialogHeader.displayName = "AlertDialogHeader";
 const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse gap-1.5 px-4 py-2.5 sm:flex-row sm:justify-end", className), ...props });
 AlertDialogFooter.displayName = "AlertDialogFooter";
 const AlertDialogBody = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-y-auto px-4 py-3.5 max-h-[50vh]", className), ...props });
 AlertDialogBody.displayName = "AlertDialogBody";
-const AlertDialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Title, { ref, className: cn("text-ui-md font-medium", className), ...props }));
-AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
-const AlertDialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Description, { ref, className: cn("text-ui-sm text-neutral3", className), ...props }));
-AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
-const AlertDialogAction = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  AlertDialogPrimitive__namespace.Action,
-  {
-    ref,
-    className: cn(buttonVariants({ variant: "primary", size: "default" }), className),
-    ...props
-  }
-));
-AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
-const AlertDialogCancel = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  AlertDialogPrimitive__namespace.Cancel,
-  {
-    ref,
-    className: cn(buttonVariants({ variant: "default", size: "default" }), className),
-    ...props
-  }
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
+const AlertDialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog.Title, { ref, className: cn("text-ui-md font-medium", className), ...props }));
+AlertDialogTitle.displayName = "AlertDialogTitle";
+const AlertDialogDescription = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog.Description, { ref, className: cn("text-ui-sm text-neutral3", className), ...props })
+);
+AlertDialogDescription.displayName = "AlertDialogDescription";
+const AlertDialogAction = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    alertDialog.AlertDialog.Close,
+    {
+      ref,
+      className: cn(buttonVariants({ variant: "primary", size: "default" }), className),
+      ...props
+    }
+  )
+);
+AlertDialogAction.displayName = "AlertDialogAction";
+const AlertDialogCancel = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    alertDialog.AlertDialog.Close,
+    {
+      ref,
+      className: cn(buttonVariants({ variant: "default", size: "default" }), className),
+      ...props
+    }
+  )
+);
+AlertDialogCancel.displayName = "AlertDialogCancel";
 AlertDialog.Trigger = AlertDialogTrigger;
 AlertDialog.Portal = AlertDialogPortal;
 AlertDialog.Overlay = AlertDialogOverlay;
@@ -6171,41 +6182,54 @@ const Checkbox = React__namespace.forwardRef(({ className, ...props }, ref) => /
 ));
 Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
 
-const Collapsible = CollapsiblePrimitive__namespace.Root;
-const CollapsibleTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  CollapsiblePrimitive__namespace.CollapsibleTrigger,
-  {
-    ref,
-    className: cn(
-      "-outline-offset-2",
-      transitions.colors,
-      focusRing.visible,
-      "hover:text-neutral5",
-      "[&>svg]:transition-transform [&>svg]:duration-normal [&>svg]:ease-out-custom",
-      "[&[data-state=open]>svg]:rotate-90",
-      className
-    ),
-    ...props,
-    children
-  }
-));
-CollapsibleTrigger.displayName = CollapsiblePrimitive__namespace.CollapsibleTrigger.displayName;
-const CollapsibleContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  CollapsiblePrimitive__namespace.CollapsibleContent,
-  {
-    ref,
-    className: cn(
-      "overflow-hidden",
-      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-1",
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-1",
-      "duration-normal ease-out-custom",
-      className
-    ),
-    ...props,
-    children
+const Collapsible = collapsible.Collapsible.Root;
+const CollapsibleTrigger = React.forwardRef(
+  ({ className, asChild, children, ...props }, ref) => {
+    const renderProps = asChild && React.isValidElement(children) ? { render: children } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      collapsible.Collapsible.Trigger,
+      {
+        ref,
+        "data-slot": "collapsible-trigger",
+        className: cn(
+          "-outline-offset-2",
+          transitions.colors,
+          focusRing.visible,
+          "hover:text-neutral5",
+          "[&>svg]:transition-transform [&>svg]:duration-normal [&>svg]:ease-out-custom",
+          "[&[data-panel-open]>svg]:rotate-90",
+          className
+        ),
+        ...renderProps,
+        ...props,
+        children: asChild ? void 0 : children
+      }
+    );
   }
-));
-CollapsibleContent.displayName = CollapsiblePrimitive__namespace.CollapsibleContent.displayName;
+);
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+const CollapsibleContent = React.forwardRef(
+  ({ className, children, ...props }, ref) => (
+    // Base UI animates the panel's `height` between 0 and `--collapsible-panel-height`.
+    // Padding/margin/borders must live on an inner wrapper — if applied to the panel
+    // itself they keep it from collapsing to 0, which makes the animation jump.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      collapsible.Collapsible.Panel,
+      {
+        ref,
+        "data-slot": "collapsible-content",
+        className: cn(
+          "overflow-hidden",
+          "h-[var(--collapsible-panel-height)] transition-[height] duration-normal ease-out-custom",
+          "data-[starting-style]:h-0 data-[ending-style]:h-0"
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children })
+      }
+    )
+  )
+);
+CollapsibleContent.displayName = "CollapsibleContent";
 
 const comboboxStyles = {
   /** Root wrapper */
@@ -6481,51 +6505,70 @@ function MultiCombobox({
   ] });
 }
 
-const Dialog = DialogPrimitive__namespace.Root;
-const DialogTrigger = DialogPrimitive__namespace.Trigger;
-const DialogPortal = DialogPrimitive__namespace.Portal;
-const DialogClose = DialogPrimitive__namespace.Close;
+const Dialog = dialog.Dialog.Root;
+const DialogTrigger = React__namespace.forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { ref, ...renderProps, ...props, children: asChild ? void 0 : children });
+  }
+);
+DialogTrigger.displayName = "DialogTrigger";
+const DialogPortal = dialog.Dialog.Portal;
+const DialogClose = React__namespace.forwardRef(({ asChild, children, ...props }, ref) => {
+  const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Close, { ref, ...renderProps, ...props, children: asChild ? void 0 : children });
+});
+DialogClose.displayName = "DialogClose";
 const DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Overlay,
+  dialog.Dialog.Backdrop,
   {
     ref,
     className: cn("dialog-overlay-anim fixed inset-0 z-50 bg-overlay backdrop-blur-xs", className),
     ...props
   }
 ));
-DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+DialogOverlay.displayName = "DialogOverlay";
 const DialogContent = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogPrimitive__namespace.Content,
+    dialog.Dialog.Popup,
     {
       ref,
+      "data-slot": "dialog-content",
       className: cn(
         "dialog-content-anim",
         "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%]",
         "w-full max-w-[calc(100%-2rem)] sm:max-w-lg",
         "rounded-xl border border-border1/40 bg-surface2/96 backdrop-blur-md shadow-dialog",
+        "focus-visible:outline-hidden",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-3 right-3", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) }) })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          dialog.Dialog.Close,
+          {
+            render: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-3 right-3", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
+          }
+        )
       ]
     }
   )
 ] }));
-DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
+DialogContent.displayName = "DialogContent";
 const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-0.5 px-4 py-3 text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
 const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse gap-1.5 px-4 py-2.5 sm:flex-row sm:justify-end", className), ...props });
 DialogFooter.displayName = "DialogFooter";
 const DialogBody = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-y-auto px-4 py-3.5 max-h-[50vh]", className), ...props });
 DialogBody.displayName = "DialogBody";
-const DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { ref, className: cn("text-ui-md font-medium", className), ...props }));
-DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-const DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("sr-only", className), ...props }));
-DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
+const DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { ref, className: cn("text-ui-md font-medium", className), ...props }));
+DialogTitle.displayName = "DialogTitle";
+const DialogDescription = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Description, { ref, className: cn("sr-only", className), ...props })
+);
+DialogDescription.displayName = "DialogDescription";
 
 const Command = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command,
@@ -11178,9 +11221,9 @@ function MainSidebarRoot({ children, className }) {
     [setOpenMobile]
   );
   if (isMobile) {
-    return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        DialogPrimitive__namespace.Overlay,
+        Dialog__namespace.Overlay,
         {
           className: cn(
             "fixed inset-0 z-40 bg-overlay backdrop-blur-sm",
@@ -11190,7 +11233,7 @@ function MainSidebarRoot({ children, className }) {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        DialogPrimitive__namespace.Content,
+        Dialog__namespace.Content,
         {
           className: cn(
             "fixed inset-y-0 left-0 z-50 flex h-full flex-col",
@@ -11202,8 +11245,8 @@ function MainSidebarRoot({ children, className }) {
             className
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { children: "Navigation" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { children: "Primary site navigation drawer" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { children: "Navigation" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Description, { children: "Primary site navigation drawer" }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: closeOnAnchor, className: "flex flex-col h-full min-h-0 px-4 py-2 overflow-hidden", children })
           ]
         }
@@ -11725,9 +11768,9 @@ function SideDialogRoot({
   className
 }) {
   const isConfirmation = variant === "confirmation";
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { children: [
     !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(
-      DialogPrimitive__namespace.Overlay,
+      Dialog__namespace.Overlay,
       {
         className: cn(
           "bg-overlay backdrop-blur-sm top-0 bottom-0 right-0 left-0 fixed z-50",
@@ -11737,7 +11780,7 @@ function SideDialogRoot({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.Content,
+      Dialog__namespace.Content,
       {
         className: cn(
           "fixed top-0 bottom-0 right-0 border-l border-border2 z-50 bg-surface2",
@@ -11753,10 +11796,10 @@ function SideDialogRoot({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(VisuallyHidden__namespace.Root, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { children: dialogTitle }),
-            /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { children: dialogDescription })
+            /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Title, { children: dialogTitle }),
+            /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Description, { children: dialogDescription })
           ] }),
-          !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               className: cn(
@@ -12924,15 +12967,6 @@ const Tree = Object.assign(TreeRoot, {
 });
 
 const SUBMENU_SEARCH_THRESHOLD = 6;
-const subContentClass = cn(
-  "bg-surface5 backdrop-blur-xl z-50 min-w-[8rem] overflow-auto rounded-lg p-2 shadow-md",
-  "data-[state=open]:animate-in data-[state=closed]:animate-out",
-  "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
-  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
-);
-function PortalSubContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.SubContent, { className: cn(subContentClass, className), ...props, children }) });
-}
 function SubMenuSearch({
   value,
   onChange,
@@ -13037,7 +13071,7 @@ function SelectDataFilter({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate"), children: cat.label }),
         selectedCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: selectedCount })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(PortalSubContent, { className: cn("max-h-[20rem]"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.SubContent, { className: cn("max-h-[20rem]"), children: [
         cat.values.length >= searchThreshold && /* @__PURE__ */ jsxRuntime.jsx(SubMenuSearch, { value: subSearch, onChange: setSubSearch, label: `Search ${cat.label.toLowerCase()}` }),
         mode === "single" ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.RadioGroup, { value: selected[0] ?? "", onValueChange: (val) => handleSelect(cat.id, val, mode), children: cat.values.filter((v) => !subSearch || v.label.toLowerCase().includes(subSearch.toLowerCase())).map((v) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.RadioItem, { value: v.value, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate"), children: v.label }) }, v.value)) }) : cat.values.filter((v) => !subSearch || v.label.toLowerCase().includes(subSearch.toLowerCase())).map((v) => /* @__PURE__ */ jsxRuntime.jsx(
           DropdownMenu.CheckboxItem,
@@ -13101,7 +13135,7 @@ function SelectDataFilter({
         }
         return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.Sub, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.SubTrigger, { children: group.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(PortalSubContent, { className: cn("max-h-[20rem]"), children: group.items.map((cat) => renderCategory(cat)) })
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.SubContent, { className: cn("max-h-[20rem]"), children: group.items.map((cat) => renderCategory(cat)) })
         ] }, group.key);
       }),
       activeFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -16749,18 +16783,70 @@ function MetricsProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(MetricsContext.Provider, { value, children });
 }
 
+const METRICS_PRESETS = [
+  "last-24h",
+  "last-3d",
+  "last-7d",
+  "last-14d",
+  "last-30d",
+  "custom"
+];
+function toPickerPreset(preset) {
+  switch (preset) {
+    case "3d":
+      return "last-3d";
+    case "7d":
+      return "last-7d";
+    case "14d":
+      return "last-14d";
+    case "30d":
+      return "last-30d";
+    case "custom":
+      return "custom";
+    default:
+      return "last-24h";
+  }
+}
+function fromPickerPreset(preset) {
+  switch (preset) {
+    case "last-3d":
+      return "3d";
+    case "last-7d":
+      return "7d";
+    case "last-14d":
+      return "14d";
+    case "last-30d":
+      return "30d";
+    case "custom":
+      return "custom";
+    default:
+      return "24h";
+  }
+}
 function DateRangeSelector() {
-  const { datePreset, setDatePreset } = useMetrics();
+  const { datePreset, setDatePreset, customRange, setCustomRange } = useMetrics();
+  const presetRef = React.useRef(datePreset);
+  presetRef.current = datePreset;
+  const customRangeRef = React.useRef(customRange);
+  customRangeRef.current = customRange;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SelectFieldBlock,
+    DateTimeRangePicker,
     {
-      name: "date-range",
-      labelIsHidden: true,
-      value: datePreset,
-      options: DATE_PRESETS.map((p) => ({ label: p.label, value: p.value })),
-      onValueChange: (value) => {
-        if (isValidPreset(value)) setDatePreset(value);
-      }
+      preset: toPickerPreset(datePreset),
+      onPresetChange: (next) => {
+        const mapped = fromPickerPreset(next);
+        presetRef.current = mapped;
+        setDatePreset(mapped);
+      },
+      dateFrom: customRange?.from,
+      dateTo: customRange?.to,
+      onDateChange: (value, type) => {
+        if (presetRef.current !== "custom") return;
+        const next = { ...customRangeRef.current, [type]: value };
+        customRangeRef.current = next;
+        setCustomRange(next);
+      },
+      presets: METRICS_PRESETS
     }
   );
 }