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

package/dist/index.css

@@ -183,7 +183,6 @@
     --blur-xs: 4px;
     --blur-sm: 8px;
     --blur-md: 12px;
-    --blur-xl: 24px;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: var(--font-sans);
@@ -1256,6 +1255,10 @@
     height: calc(100vh - 6rem) !important;
   }
 
+  .h-\[var\(--collapsible-panel-height\)\] {
+    height: var(--collapsible-panel-height);
+  }
+
   .h-auto {
     height: auto;
   }
@@ -1858,10 +1861,6 @@
     min-width: var(--spacing-80);
   }
 
-  .min-w-\[8rem\] {
-    min-width: 8rem;
-  }
-
   .min-w-\[12rem\] {
     min-width: 12rem;
   }
@@ -4181,12 +4180,6 @@
     backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   }
 
-  .backdrop-blur-xl {
-    --tw-backdrop-blur: blur(var(--blur-xl));
-    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-  }
-
   .backdrop-blur-xs {
     --tw-backdrop-blur: blur(var(--blur-xs));
     -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -4199,6 +4192,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[height\] {
+    transition-property: height;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[transform\,scale\,opacity\] {
     transition-property: transform, scale, opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -5431,6 +5430,10 @@
     opacity: .5;
   }
 
+  .data-\[ending-style\]\:h-0[data-ending-style] {
+    height: var(--spacing-0);
+  }
+
   .data-\[ending-style\]\:scale-95[data-ending-style] {
     --tw-scale-x: 95%;
     --tw-scale-y: 95%;
@@ -5675,6 +5678,10 @@
     --tw-enter-translate-y: calc(1*var(--spacing));
   }
 
+  .data-\[starting-style\]\:h-0[data-starting-style] {
+    height: var(--spacing-0);
+  }
+
   .data-\[starting-style\]\:scale-95[data-starting-style] {
     --tw-scale-x: 95%;
     --tw-scale-y: 95%;
@@ -5760,10 +5767,6 @@
     --tw-exit-translate-x: calc(1 / 4*100%);
   }
 
-  .data-\[state\=closed\]\:slide-out-to-top-1[data-state="closed"] {
-    --tw-exit-translate-y: calc(1*var(--spacing)*-1);
-  }
-
   .data-\[state\=open\]\:animate-in[data-state="open"] {
     animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
   }
@@ -5806,10 +5809,6 @@
     --tw-enter-translate-x: calc(1 / 4*100%);
   }
 
-  .data-\[state\=open\]\:slide-in-from-top-1[data-state="open"] {
-    --tw-enter-translate-y: calc(1*var(--spacing)*-1);
-  }
-
   .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
     --tw-translate-x: var(--spacing-0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -7091,7 +7090,7 @@
     height: var(--height-table-row-small);
   }
 
-  .\[\&\[data-state\=open\]\>svg\]\:rotate-90[data-state="open"] > svg {
+  .\[\&\[data-panel-open\]\>svg\]\:rotate-90[data-panel-open] > svg {
     rotate: 90deg;
   }
 

package/dist/index.es.js

@@ -17,9 +17,9 @@ import { autocompletion } from '@codemirror/autocomplete';
 import { CheckIcon as CheckIcon$1, CopyIcon, Wand2, ShieldX, LogIn, Check, ChevronsUpDown, Search, X, ChevronDown, Circle, TriangleAlertIcon, SearchIcon, XIcon, TrendingUpIcon, TrendingDownIcon, EllipsisVerticalIcon, SaveIcon, Trash2Icon, LockIcon, ListFilterPlusIcon, ArrowLeftIcon, FilterIcon, PlusIcon, ChevronRightIcon, Monitor, Sun, Moon, CalendarIcon, CircleAlertIcon, InfoIcon as InfoIcon$1, ArrowRightIcon, Type, Hash, ToggleLeft, AlignLeft, Braces, List, MenuIcon, PanelRightIcon, KeyboardIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, ChevronsRightIcon, ChevronLeftIcon, ClockIcon, BanIcon, FileTextIcon, OctagonAlertIcon, LightbulbIcon, ChevronRight, Folder, File, ListTreeIcon, CornerDownRightIcon, AlertTriangle, CircleXIcon, ExpandIcon, ExternalLinkIcon, Link2Icon, Ban, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, Text, TextSearch, EqualNot, Equal, Plus, Component, ArrowRight, ArrowLeft, LogsIcon as LogsIcon$1, EyeIcon, GaugeIcon, BrainIcon, ChevronUpIcon, ChevronDownIcon, ChevronsUpIcon, ChevronsDownIcon, FoldVerticalIcon, UnfoldVerticalIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, CircleGaugeIcon, FileInputIcon, FileOutputIcon, BracesIcon, CircleSlashIcon } from 'lucide-react';
 import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
 import { useMastraClient } from '@mastra/react';
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { Collapsible as Collapsible$1 } from '@base-ui/react/collapsible';
 import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
 export { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
 import { Command as Command$1 } from 'cmdk';
@@ -47,7 +47,6 @@ import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import { MergeView } from '@codemirror/merge';
 import { format as format$1 } from 'date-fns/format';
 import { isToday } from 'date-fns/isToday';
-import { Portal, SubContent } from '@radix-ui/react-dropdown-menu';
 import { SearchCursor } from '@codemirror/search';
 import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$2, Line } from 'recharts';
 import { usePanelRef, Panel, Separator as Separator$1 } from 'react-resizable-panels';
@@ -6036,9 +6035,7 @@ const Textarea = React.forwardRef(
 );
 Textarea.displayName = "Textarea";
 
-const AlertDialogRoot = AlertDialogPrimitive.Root;
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogRoot = AlertDialog$1.Root;
 function AlertDialog({
   open,
   onOpenChange,
@@ -6046,21 +6043,30 @@ function AlertDialog({
 }) {
   return /* @__PURE__ */ jsx(AlertDialogRoot, { open, onOpenChange, children });
 }
+const AlertDialogTrigger = React.forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    const renderProps = asChild && React.isValidElement(children) ? { render: children } : {};
+    return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, { ref, ...renderProps, ...props, children: asChild ? void 0 : children });
+  }
+);
+AlertDialogTrigger.displayName = "AlertDialogTrigger";
+const AlertDialogPortal = AlertDialog$1.Portal;
 const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AlertDialogPrimitive.Overlay,
+  AlertDialog$1.Backdrop,
   {
     ref,
     className: cn("dialog-overlay-anim fixed inset-0 z-50 bg-overlay backdrop-blur-xs", className),
     ...props
   }
 ));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+AlertDialogOverlay.displayName = "AlertDialogOverlay";
 const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
-    AlertDialogPrimitive.Content,
+    AlertDialog$1.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%]",
@@ -6072,35 +6078,41 @@ const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => /*
     }
   )
 ] }));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+AlertDialogContent.displayName = "AlertDialogContent";
 const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: cn("overflow-y-auto px-4 py-3.5 max-h-[50vh]", className), ...props });
 AlertDialogBody.displayName = "AlertDialogBody";
-const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { ref, className: cn("text-ui-md font-medium", className), ...props }));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { ref, className: cn("text-ui-sm text-neutral3", className), ...props }));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AlertDialogPrimitive.Action,
-  {
-    ref,
-    className: cn(buttonVariants({ variant: "primary", size: "default" }), className),
-    ...props
-  }
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AlertDialogPrimitive.Cancel,
-  {
-    ref,
-    className: cn(buttonVariants({ variant: "default", size: "default" }), className),
-    ...props
-  }
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialog$1.Title, { ref, className: cn("text-ui-md font-medium", className), ...props }));
+AlertDialogTitle.displayName = "AlertDialogTitle";
+const AlertDialogDescription = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialog$1.Description, { ref, className: cn("text-ui-sm text-neutral3", className), ...props })
+);
+AlertDialogDescription.displayName = "AlertDialogDescription";
+const AlertDialogAction = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    AlertDialog$1.Close,
+    {
+      ref,
+      className: cn(buttonVariants({ variant: "primary", size: "default" }), className),
+      ...props
+    }
+  )
+);
+AlertDialogAction.displayName = "AlertDialogAction";
+const AlertDialogCancel = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    AlertDialog$1.Close,
+    {
+      ref,
+      className: cn(buttonVariants({ variant: "default", size: "default" }), className),
+      ...props
+    }
+  )
+);
+AlertDialogCancel.displayName = "AlertDialogCancel";
 AlertDialog.Trigger = AlertDialogTrigger;
 AlertDialog.Portal = AlertDialogPortal;
 AlertDialog.Overlay = AlertDialogOverlay;
@@ -6143,41 +6155,54 @@ const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-const Collapsible = CollapsiblePrimitive.Root;
-const CollapsibleTrigger = React__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  CollapsiblePrimitive.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.CollapsibleTrigger.displayName;
-const CollapsibleContent = React__default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  CollapsiblePrimitive.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$1.Root;
+const CollapsibleTrigger = React__default.forwardRef(
+  ({ className, asChild, children, ...props }, ref) => {
+    const renderProps = asChild && React__default.isValidElement(children) ? { render: children } : {};
+    return /* @__PURE__ */ jsx(
+      Collapsible$1.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.CollapsibleContent.displayName;
+);
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+const CollapsibleContent = React__default.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__ */ jsx(
+      Collapsible$1.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__ */ jsx("div", { className, children })
+      }
+    )
+  )
+);
+CollapsibleContent.displayName = "CollapsibleContent";
 
 const comboboxStyles = {
   /** Root wrapper */
@@ -12915,15 +12940,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__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(SubContent, { className: cn(subContentClass, className), ...props, children }) });
-}
 function SubMenuSearch({
   value,
   onChange,
@@ -13028,7 +13044,7 @@ function SelectDataFilter({
         /* @__PURE__ */ jsx("span", { className: cn("truncate"), children: cat.label }),
         selectedCount > 0 && /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: selectedCount })
       ] }),
-      /* @__PURE__ */ jsxs(PortalSubContent, { className: cn("max-h-[20rem]"), children: [
+      /* @__PURE__ */ jsxs(DropdownMenu.SubContent, { className: cn("max-h-[20rem]"), children: [
         cat.values.length >= searchThreshold && /* @__PURE__ */ jsx(SubMenuSearch, { value: subSearch, onChange: setSubSearch, label: `Search ${cat.label.toLowerCase()}` }),
         mode === "single" ? /* @__PURE__ */ 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__ */ jsx(DropdownMenu.RadioItem, { value: v.value, children: /* @__PURE__ */ jsx("span", { className: cn("truncate"), children: v.label }) }, v.value)) }) : cat.values.filter((v) => !subSearch || v.label.toLowerCase().includes(subSearch.toLowerCase())).map((v) => /* @__PURE__ */ jsx(
           DropdownMenu.CheckboxItem,
@@ -13092,7 +13108,7 @@ function SelectDataFilter({
         }
         return /* @__PURE__ */ jsxs(DropdownMenu.Sub, { children: [
           /* @__PURE__ */ jsx(DropdownMenu.SubTrigger, { children: group.label }),
-          /* @__PURE__ */ jsx(PortalSubContent, { className: cn("max-h-[20rem]"), children: group.items.map((cat) => renderCategory(cat)) })
+          /* @__PURE__ */ jsx(DropdownMenu.SubContent, { className: cn("max-h-[20rem]"), children: group.items.map((cat) => renderCategory(cat)) })
         ] }, group.key);
       }),
       activeFilterCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -16740,18 +16756,70 @@ function MetricsProvider({
   return /* @__PURE__ */ 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 = useRef(datePreset);
+  presetRef.current = datePreset;
+  const customRangeRef = useRef(customRange);
+  customRangeRef.current = customRange;
   return /* @__PURE__ */ 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
     }
   );
 }