@mastra/playground-ui 34.1.0-alpha.3 → 35.0.0

package/dist/index.es.js

@@ -23,11 +23,12 @@ export { M as MultiCombobox, c as comboboxStyles } from './multi-combobox-Y3gT0M
 export { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
 export { C as Command, a as CommandDialog, b as CommandEmpty, c as CommandGroup, d as CommandInput, e as CommandItem, f as CommandList, g as CommandSeparator, h as CommandShortcut } from './command-DPEUOKZw.js';
 export { C as Code } from './code-C5KVVzOZ.js';
-export { C as CodeBlock } from './code-block-DPy5IAR8.js';
+export { C as CodeBlock } from './code-block-CnRVTecy.js';
 import { C as CopyButton } from './copy-button-BfiqaCtC.js';
 export { D as DashboardCard } from './dashboard-card-C7nmBU5A.js';
 export { D as Dialog, a as DialogBody, b as DialogClose, c as DialogContent, d as DialogDescription, e as DialogFooter, f as DialogHeader, g as DialogOverlay, h as DialogPortal, i as DialogTitle, j as DialogTrigger } from './dialog-CSSfcjSX.js';
-export { D as Drawer, a as DrawerBackdrop, b as DrawerBody, c as DrawerClose, d as DrawerContent, e as DrawerDescription, f as DrawerFooter, g as DrawerHeader, h as DrawerIndent, i as DrawerIndentBackground, j as DrawerInteractive, k as DrawerPopup, l as DrawerPortal, m as DrawerProvider, n as DrawerSwipeArea, o as DrawerTitle, p as DrawerTrigger, q as DrawerViewport, r as createDrawerHandle, u as useDrawerSide } from './drawer-kUj-H7_u.js';
+import { D as Drawer, p as DrawerTrigger, l as DrawerPortal, a as DrawerBackdrop, q as DrawerViewport, k as DrawerPopup, o as DrawerTitle } from './drawer-kUj-H7_u.js';
+export { b as DrawerBody, c as DrawerClose, d as DrawerContent, e as DrawerDescription, f as DrawerFooter, g as DrawerHeader, h as DrawerIndent, i as DrawerIndentBackground, j as DrawerInteractive, m as DrawerProvider, n as DrawerSwipeArea, r as createDrawerHandle, u as useDrawerSide } from './drawer-kUj-H7_u.js';
 import { D as DropdownMenu } from './dropdown-menu-Dh-CMMjl.js';
 export { E as Entry } from './entry-B53NXi9c.js';
 export { E as EntityHeader } from './entity-header-CpClAdJT.js';
@@ -44,9 +45,9 @@ export { L as Label } from './label-Dgz2hRMg.js';
 export { M as MarkdownRenderer } from './markdown-renderer-BYSrmn0E.js';
 import { M as MetricsCard } from './metrics-card-Bk3X19xx.js';
 export { M as MetricsFlexGrid } from './metrics-flex-grid-BqtZ5emh.js';
-export { H as HoverPopover, P as Popover, a as PopoverContent, b as PopoverTrigger } from './popover-CRLP2Ay_.js';
-import { b as PropertyFilterApplied, a as PropertyFilterActions } from './property-filter-creator-CnuA0Otn.js';
-export { P as PickMultiPanel, c as PropertyFilterCreator } from './property-filter-creator-CnuA0Otn.js';
+export { H as HoverPopover, P as Popover, a as PopoverContent, b as PopoverTrigger } from './popover-C65fxQ7m.js';
+import { b as PropertyFilterApplied, a as PropertyFilterActions } from './property-filter-creator-B9tK0VY3.js';
+export { P as PickMultiPanel, c as PropertyFilterCreator } from './property-filter-creator-B9tK0VY3.js';
 export { R as RadioGroup, a as RadioGroupItem } from './radio-group-DIbajvIk.js';
 export { S as ScrollArea, a as ScrollBar, u as useAutoscroll } from './scroll-area-BtDqmqBK.js';
 export { P as PendingIndicator } from './pending-indicator-DmowRHLo.js';
@@ -69,17 +70,17 @@ export { a as ButtonsGroupSeparator, b as ButtonsGroupText, c as buttonsGroupVar
 export { M as MainContentContent, a as MainContentLayout, g as getMainContentContentClassName } from './main-content-CR0j00N1.js';
 export { M as MainHeader } from './main-header-Bp0d1TMi.js';
 export { S as Sections } from './sections-SdJxf4JD.js';
-export { D as DateTimePicker, a as DateTimePickerContent, b as DefaultTrigger } from './date-time-picker-t67keTZg.js';
+export { D as DateTimePicker, a as DateTimePickerContent, b as DefaultTrigger } from './date-time-picker-BKSdFrHR.js';
 export { D as DatePicker, T as TimePicker } from './time-picker-BtJz6IU2.js';
 export { AddField, Field, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, JSONSchemaForm, NestedFields, Root, createField, fieldsToJSONSchema, jsonSchemaToFields, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext } from './components/JSONSchemaForm.es.js';
 export { K as KeyValueList } from './key-value-list-BFGuMFbL.js';
-import { R as ResizeHandleIndicator } from './main-sidebar-Bk2U9O57.js';
-export { M as MainSidebar, a as MainSidebarMobileTrigger, b as MainSidebarProvider, c as MainSidebarTrigger, g as getIsLinkActive, n as navItemClasses, u as useMainSidebar, d as useMaybeSidebar } from './main-sidebar-Bk2U9O57.js';
+import { R as ResizeHandleIndicator } from './main-sidebar-1GVDTtcD.js';
+export { M as MainSidebar, a as MainSidebarMobileTrigger, b as MainSidebarProvider, c as MainSidebarTrigger, g as getIsLinkActive, n as navItemClasses, u as useMainSidebar, d as useMaybeSidebar } from './main-sidebar-1GVDTtcD.js';
 export { P as PageHeader } from './page-header-BS_LNnKw.js';
 export { S as Section, a as SectionRoot, b as SubSectionRoot } from './section-BUngbrvn.js';
 export { C as CardHeading, S as SectionCard } from './section-card-BMArnkcD.js';
 export { P as ProcessStepList, a as ProcessStepListItem, b as ProcessStepProgressBar, g as getStatusIcon } from './process-step-progress-bar-C0mArMKD.js';
-import { b as Tabs, a as TabList, T as Tab } from './tabs-tab-Cjv_3xGC.js';
+import { b as Tabs, a as TabList, T as Tab } from './tabs-tab-Bv9aRRTl.js';
 import { T as TabContent } from './tabs-content-D-fKCtLW.js';
 export { T as TextAndIcon, g as getShortId } from './get-short-id-B4_2mLzM.js';
 export { C as ContentBlock, a as ContentBlocks } from './content-block-BTpK7gPz.js';
@@ -105,7 +106,7 @@ export { D as DataCodeSection } from './data-code-section-MygZlpwo.js';
 import { DataDetailsPanel } from './components/DataDetailsPanel.es.js';
 import { D as DataKeysAndValues } from './data-keys-and-values-BSeQG7jb.js';
 import { D as DataPanel } from './data-panel-DumaHQiP.js';
-import { D as DateTimeRangePicker } from './date-time-range-picker-iMvwOfiZ.js';
+import { D as DateTimeRangePicker } from './date-time-range-picker-DKvS9c4j.js';
 import { H as HorizontalBars } from './horizontal-bars-DjLETHvH.js';
 import { M as MetricsDataTable } from './metrics-data-table-DryqJWoI.js';
 import { M as MetricsLineChart } from './metrics-line-chart-BUUqDQPW.js';
@@ -120,14 +121,14 @@ export { f as focusRing, h as hoverEffects, t as transitions } from './transitio
 import { t as toast } from './use-copy-to-clipboard-CGqfkXnN.js';
 export { T as Toaster, u as useCopyToClipboard } from './use-copy-to-clipboard-CGqfkXnN.js';
 import * as React from 'react';
-import { useState, useCallback, useMemo, useContext, createContext, useRef, useEffect, Fragment as Fragment$1 } from 'react';
+import { useState, useCallback, useMemo, useLayoutEffect, useRef, useEffect, useContext, createContext, Fragment as Fragment$1 } from 'react';
 import { c as cn } from './utils-CzYGxqbG.js';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Wand2, Type, ToggleLeft, Hash, List, Braces, Ban, Check, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, ChevronRight, Text, TextSearch, EqualNot, Equal, X, Plus, Component, ArrowRight, ArrowLeft, LogsIcon as LogsIcon$1, EyeIcon, GaugeIcon, BrainIcon, ChevronUpIcon, ChevronDownIcon, ChevronsUpIcon, ChevronsDownIcon, FoldVerticalIcon, UnfoldVerticalIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Link2Icon, CircleGaugeIcon, SaveIcon, Loader2Icon, DownloadIcon, FileInputIcon, FileOutputIcon, BracesIcon, ExternalLinkIcon, CircleSlashIcon, ArrowUpIcon, ArrowDownIcon, ArrowRightIcon } from 'lucide-react';
+import { Wand2, Type, ToggleLeft, Hash, List, Braces, Ban, Check, ListX, ChevronsLeft, ChevronsRight, ChevronLeft, ChevronRight, Text, TextSearch, EqualNot, Equal, X, Plus, Component, LogsIcon as LogsIcon$1, EyeIcon, GaugeIcon, BrainIcon, ChevronUpIcon, ChevronDownIcon, ChevronsUpIcon, ChevronsDownIcon, FoldVerticalIcon, UnfoldVerticalIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Link2Icon, CircleGaugeIcon, SaveIcon, Loader2Icon, DownloadIcon, FileInputIcon, FileOutputIcon, BracesIcon, ExternalLinkIcon, CircleSlashIcon, ArrowUpIcon, ArrowDownIcon, ArrowRightIcon } from 'lucide-react';
 import { usePanelRef, Panel, Separator } from 'react-resizable-panels';
 import { I as Icon } from './Icon-CJEjdbjB.js';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 import { format } from 'date-fns';
 import { EntityType } from '@mastra/core/observability';
 import { M as MetricsKpiCard } from './metrics-kpi-card-CNUpkoQO.js';
@@ -1413,6 +1414,19 @@ const useInView = () => {
   return { inView, setRef };
 };
 
+const useIsMobile = (breakpoint = 1024) => {
+  const query = useMemo(() => `(max-width: ${breakpoint - 1}px)`, [breakpoint]);
+  const [isMobile, setIsMobile] = useState(false);
+  useLayoutEffect(() => {
+    const mq = window.matchMedia(query);
+    const update = () => setIsMobile(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, [query]);
+  return isMobile;
+};
+
 const lodashTitleCase = (str) => {
   const camelCased = str.replace(/[-_\s]+(.)?/g, (_, char) => char ? char.toUpperCase() : "").replace(/^(.)/, (char) => char.toLowerCase());
   return camelCased.replace(/([A-Z])/g, " $1").replace(/^./, (str2) => str2.toUpperCase()).trim();
@@ -2147,33 +2161,315 @@ const RuleBuilder = ({
   return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(RuleGroupView, { schema, group: ruleGroup, onChange: handleGroupChange, depth: 0, maxDepth }) });
 };
 
-const CollapsiblePanel = ({ collapsedSize, children, direction, onResize, ...props }) => {
+const PanelEdgeIcon = ({ side }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "5" }),
+      /* @__PURE__ */ jsx("path", { d: side === "left" ? "M9 3v18" : "M15 3v18" })
+    ]
+  }
+);
+
+const panelIconButtonClass = cn(
+  "flex size-8 cursor-pointer items-center justify-center rounded-full",
+  "border border-transparent bg-transparent text-neutral5 hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10",
+  "transition-colors duration-150 ease-out-custom motion-reduce:transition-none",
+  "focus-visible:outline-hidden focus-visible:border-accent1"
+);
+
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const readAxis = (point, rect, axis) => {
+  return { client: point.clientY, start: rect.top, size: rect.height };
+};
+const getClampedElementCursorOffset = (point, rect, axis, margin = 0) => {
+  const { client, start, size } = readAxis(point, rect);
+  return clamp(client - start, margin, Math.max(margin, size - margin));
+};
+const useClampedElementCursor = ({
+  axis,
+  margin = 0,
+  variableName
+}) => {
+  const elementRef = useRef(null);
+  const rectRef = useRef(null);
+  const writePosition = useCallback(
+    (point, refreshRect = false) => {
+      const element = elementRef.current;
+      if (!element) return;
+      const rect = refreshRect || !rectRef.current ? element.getBoundingClientRect() : rectRef.current;
+      rectRef.current = rect;
+      const offset = getClampedElementCursorOffset(point, rect, axis, margin);
+      element.style.setProperty(variableName, `${offset}px`);
+    },
+    [axis, margin, variableName]
+  );
+  const beginTracking = useCallback(
+    (point) => {
+      writePosition(point, true);
+    },
+    [writePosition]
+  );
+  const updateTracking = useCallback(
+    (point) => {
+      writePosition(point);
+    },
+    [writePosition]
+  );
+  const endTracking = useCallback(() => {
+    rectRef.current = null;
+  }, []);
+  return { beginTracking, elementRef, endTracking, updateTracking };
+};
+
+const PILL_EDGE_MARGIN = 22;
+const usePanelSizeTransitions = (elementRef) => {
+  const [booted, setBooted] = useState(false);
+  const bootedRef = useRef(false);
+  const bootScheduled = useRef(false);
+  const enableSizeTransitionsRef = useRef(() => {
+  });
+  const enableSizeTransitions = useCallback(() => {
+    enableSizeTransitionsRef.current();
+  }, []);
+  const boot = useCallback(() => {
+    if (bootScheduled.current) return;
+    bootScheduled.current = true;
+    requestAnimationFrame(() => {
+      bootedRef.current = true;
+      setBooted(true);
+      enableSizeTransitionsRef.current();
+    });
+  }, []);
+  useEffect(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const group = elementRef.current?.parentElement;
+    if (!group) return;
+    const panels = Array.from(group.children).filter(
+      (child) => child instanceof HTMLElement && child.hasAttribute("data-panel")
+    );
+    const separators = Array.from(group.children).filter(
+      (child) => child instanceof HTMLElement && child.hasAttribute("data-separator")
+    );
+    const enable = () => {
+      if (!bootedRef.current) return;
+      panels.forEach(
+        (panel) => panel.style.transition = "flex-grow 300ms var(--ease-out-custom, ease), flex-basis 300ms var(--ease-out-custom, ease)"
+      );
+    };
+    const disable = () => panels.forEach((panel) => panel.style.transition = "none");
+    enable();
+    enableSizeTransitionsRef.current = enable;
+    separators.forEach((separator) => separator.addEventListener("pointerdown", disable));
+    window.addEventListener("pointerup", enable);
+    window.addEventListener("pointercancel", enable);
+    return () => {
+      enableSizeTransitionsRef.current = () => {
+      };
+      separators.forEach((separator) => separator.removeEventListener("pointerdown", disable));
+      window.removeEventListener("pointerup", enable);
+      window.removeEventListener("pointercancel", enable);
+      panels.forEach((panel) => panel.style.transition = "");
+    };
+  }, [elementRef]);
+  return { booted, boot, enableSizeTransitions };
+};
+const useCollapsedEdgePill = ({
+  collapsed,
+  direction,
+  elementRef
+}) => {
+  const expandButtonRef = useRef(null);
+  const pillRef = useRef(null);
+  const {
+    beginTracking: beginPillTracking,
+    elementRef: stripRef,
+    endTracking: endPillTracking,
+    updateTracking: updatePillTracking
+  } = useClampedElementCursor({
+    axis: "y",
+    margin: PILL_EDGE_MARGIN,
+    variableName: "--pill-y"
+  });
+  const setEdgeHovered = useCallback((hovered) => {
+    const expandButton = expandButtonRef.current;
+    const pill = pillRef.current;
+    if (expandButton) expandButton.dataset.edgeHovered = hovered ? "true" : "false";
+    if (pill) pill.dataset.edgeHovered = hovered ? "true" : "false";
+  }, []);
+  const spawnPill = useCallback(
+    (point) => {
+      const pill = pillRef.current;
+      if (!pill) return;
+      beginPillTracking(point);
+      pill.style.transitionProperty = "opacity, translate";
+      requestAnimationFrame(() => {
+        pill.style.transitionProperty = "";
+      });
+    },
+    [beginPillTracking]
+  );
+  const trackPillPosition = useCallback(
+    (point) => {
+      updatePillTracking(point);
+    },
+    [updatePillTracking]
+  );
+  useEffect(() => {
+    if (!collapsed) return;
+    const panelElement = elementRef.current;
+    const separator = direction === "left" ? panelElement?.nextElementSibling : panelElement?.previousElementSibling;
+    if (!(separator instanceof HTMLElement) || !separator.hasAttribute("data-separator")) return;
+    const show = (event) => {
+      setEdgeHovered(true);
+      spawnPill(event);
+    };
+    const hide = () => {
+      setEdgeHovered(false);
+      endPillTracking();
+    };
+    const follow = (event) => trackPillPosition(event);
+    separator.addEventListener("pointerenter", show);
+    separator.addEventListener("pointerleave", hide);
+    separator.addEventListener("pointermove", follow);
+    return () => {
+      separator.removeEventListener("pointerenter", show);
+      separator.removeEventListener("pointerleave", hide);
+      separator.removeEventListener("pointermove", follow);
+      setEdgeHovered(false);
+      endPillTracking();
+    };
+  }, [collapsed, direction, elementRef, endPillTracking, setEdgeHovered, spawnPill, trackPillPosition]);
+  return { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition };
+};
+const CollapsiblePanel = ({
+  collapsedSize,
+  children,
+  direction,
+  className,
+  onResize,
+  style,
+  minSize,
+  ...props
+}) => {
   const [collapsed, setCollapsed] = useState(false);
   const panelRef = usePanelRef();
-  const expand = () => {
+  const elementRef = useRef(null);
+  const { booted, boot, enableSizeTransitions } = usePanelSizeTransitions(elementRef);
+  const { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition } = useCollapsedEdgePill({
+    collapsed,
+    direction,
+    elementRef
+  });
+  const expand = useCallback(() => {
+    enableSizeTransitions();
     if (!panelRef.current) return;
     panelRef.current.expand();
-  };
-  return /* @__PURE__ */ jsx(
+  }, [enableSizeTransitions, panelRef]);
+  const numericMinSize = typeof minSize === "number" ? minSize : null;
+  return /* @__PURE__ */ jsxs(
     Panel,
     {
       panelRef,
+      elementRef,
       collapsedSize,
+      minSize,
+      className: cn("relative", className),
+      style: {
+        overflow: collapsed ? "visible" : "hidden",
+        "--panel-min-w": numericMinSize ? `${numericMinSize}px` : void 0,
+        ...style
+      },
       ...props,
-      onResize: (size, id, prevSize) => {
-        if (typeof collapsedSize === "number") {
-          if (size.inPixels <= collapsedSize) {
-            setCollapsed(true);
-          } else if (collapsed) {
-            setCollapsed(false);
-          }
-        }
-        onResize?.(size, id, prevSize);
+      onResize: (size, previousSize, panel) => {
+        onResize?.(size, previousSize, panel);
+        if (typeof collapsedSize !== "number") return;
+        setCollapsed(size.inPixels <= collapsedSize);
+        boot();
       },
-      children: collapsed ? /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { onClick: expand, className: "h-48! border-none", children: /* @__PURE__ */ jsx(Icon, { children: direction === "left" ? /* @__PURE__ */ jsx(ArrowRight, {}) : /* @__PURE__ */ jsx(ArrowLeft, {}) }) }) }) }),
-        /* @__PURE__ */ jsx(TooltipContent, { children: "Expand" })
-      ] }) : children
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            inert: collapsed,
+            "data-state": collapsed ? "collapsed" : "open",
+            "data-direction": direction,
+            style: {
+              minWidth: "var(--panel-min-w)",
+              opacity: collapsed ? 0 : void 0,
+              translate: collapsed ? direction === "left" ? "-100% 0" : "100% 0" : void 0
+            },
+            className: cn(
+              "absolute inset-y-0 w-full overflow-hidden",
+              "transition-[opacity,translate] duration-300 ease-out-custom motion-reduce:transition-none",
+              "data-[direction=left]:left-0 data-[direction=right]:right-0",
+              "data-[state=collapsed]:z-10",
+              !booted && "transition-none"
+            ),
+            children
+          }
+        ),
+        collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: expandButtonRef,
+              type: "button",
+              "aria-label": "Expand panel",
+              onClick: expand,
+              className: cn(
+                panelIconButtonClass,
+                "absolute top-2 z-10",
+                "transition-[color,background-color,opacity] duration-300 starting:opacity-0",
+                direction === "left" ? "left-2" : "right-2",
+                "data-[edge-hovered=true]:text-neutral6"
+              ),
+              children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(PanelEdgeIcon, { side: direction }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: stripRef,
+              type: "button",
+              tabIndex: -1,
+              "aria-hidden": "true",
+              onClick: expand,
+              onPointerEnter: (event) => spawnPill(event),
+              onPointerLeave: endPillTracking,
+              onPointerMove: (event) => trackPillPosition(event),
+              style: { "--pill-y": "50%" },
+              className: cn(
+                "group/expand absolute inset-y-0 z-10 w-4 cursor-pointer focus-visible:outline-hidden",
+                direction === "left" ? "left-1" : "right-1"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ref: pillRef,
+                  style: { top: "var(--pill-y)" },
+                  className: cn(
+                    "absolute flex size-7 -translate-y-1/2 items-center justify-center rounded-full bg-neutral6 text-surface1 shadow-dialog",
+                    "pointer-events-none opacity-0 transition-[opacity,translate,top] duration-150 ease-out-custom motion-reduce:transition-none",
+                    direction === "left" ? "left-0.5 -translate-x-1" : "right-0.5 translate-x-1",
+                    "group-hover/expand:pointer-events-auto group-hover/expand:translate-x-0 group-hover/expand:opacity-100",
+                    "group-active/expand:bg-neutral6/80",
+                    "data-[edge-hovered=true]:pointer-events-auto data-[edge-hovered=true]:translate-x-0 data-[edge-hovered=true]:opacity-100"
+                  ),
+                  children: /* @__PURE__ */ jsx(Icon, { children: direction === "left" ? /* @__PURE__ */ jsx(ChevronRight, {}) : /* @__PURE__ */ jsx(ChevronLeft, {}) })
+                }
+              )
+            }
+          )
+        ] })
+      ]
     }
   );
 };
@@ -2212,6 +2508,27 @@ const PanelSeparator = ({ variant = "line" }) => {
   );
 };
 
+const PanelDrawer = ({ direction, label, children }) => {
+  return /* @__PURE__ */ jsxs(Drawer, { side: direction, children: [
+    /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        className: cn(panelIconButtonClass, "absolute top-2 z-10", direction === "left" ? "left-2" : "right-2"),
+        children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(PanelEdgeIcon, { side: direction }) })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DrawerPortal, { keepMounted: true, children: [
+      /* @__PURE__ */ jsx(DrawerBackdrop, {}),
+      /* @__PURE__ */ jsx(DrawerViewport, { children: /* @__PURE__ */ jsxs(DrawerPopup, { className: "w-[calc(100vw-2.5rem)] max-w-[28rem]", children: [
+        /* @__PURE__ */ jsx(DrawerTitle, { className: "sr-only", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children })
+      ] }) })
+    ] })
+  ] });
+};
+
 const EXTENSION_TO_MIME = {
   jpg: "image/jpg",
   jpeg: "image/jpeg",
@@ -8104,5 +8421,5 @@ function useLogsListNavigation(logs, featuredLogId, onFeaturedChange, featuredTr
   };
 }
 
-export { AgentCoinIcon, AgentIcon, AgentNetworkCoinIcon, AiIcon, AmazonIcon, AnthropicChatIcon, AnthropicMessagesIcon, ApiIcon, AzureIcon, BarListContent, BranchIcon, Button, ButtonsGroup, CHART_COLORS, CONTEXT_FIELD_IDS, CheckIcon, ChevronIcon, CohereIcon, CollapsiblePanel, CommitIcon, CopyButton, CrossIcon, DATE_PRESETS, DEFAULT_LOGS_FILTERS_STORAGE_KEY, DEFAULT_TRACE_FILTERS_STORAGE_KEY, DataDetailsPanel, DataKeysAndValues, DataListSkeleton, DataPanel, DatasetsIcon, DateRangeSelector, DateTimeRangePicker, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DropdownMenu, EXTENSION_TO_MIME, EmptyState, EnvIcon, ErrorState, ExperimentsIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, GroqIcon, HomeIcon, HorizontalBars, HoverCard, HoverCardContent, HoverCardTrigger, Icon, InfoIcon, Input, JudgeIcon, KpiCardView, LOGS_DATE_FROM_PARAM, LOGS_DATE_PRESET_PARAM, LOGS_DATE_PRESET_VALUES, LOGS_DATE_TO_PARAM, LOGS_PROPERTY_FILTER_FIELD_IDS, LOGS_PROPERTY_FILTER_PARAM_BY_FIELD, LOGS_ROOT_ENTITY_TYPES, LOGS_ROOT_ENTITY_TYPE_OPTIONS, LOGS_ROOT_ENTITY_TYPE_PARAM, LOG_LEVEL_OPTIONS, LOG_LEVEL_VALUES, LatencyCardView, LatencyIcon, LogDetailsView, LogsDataList, DataListSkeleton as LogsDataListSkeleton, LogsErrorContent, LogsIcon, LogsLayout, LogsListView, LogsToolbar, MastraIcon, McpCoinIcon, McpServerIcon, MemoryCardView, MemoryIcon, MetricsCard, MetricsDataTable, MetricsIcon, MetricsLineChart, MetricsProvider, MistralIcon, ModelUsageCostCardView, NetlifyIcon, NoLogsInfo, NoTracesInfo, Notice, OPERATORS, OPERATOR_LABELS, OpenAIIcon, OpenErrorsInLogsButton, OpenInTracesButton, OpenaiChatIcon, PanelSeparator, PermissionDenied, ProcessorIcon, PromptIcon, PropertyFilterActions, PropertyFilterApplied, ROOT_ENTITY_TYPES, ROOT_ENTITY_TYPE_OPTIONS, RepoIcon, RequestContextIcon, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, ScorersIcon, ScoresCardView, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SessionExpired, SettingsIcon, SkillIcon, SpanDataPanelView, SpanDetailsView, SpanTokenUsage, Spinner, StackedRunsBars, TRACE_ANCHOR_SPAN_ID_PARAM, TRACE_DATE_FROM_PARAM, TRACE_DATE_PRESET_PARAM, TRACE_DATE_PRESET_VALUES, TRACE_DATE_TO_PARAM, TRACE_LIST_MODE_OPTIONS, TRACE_LIST_MODE_PARAM, TRACE_LIST_MODE_VALUES, TRACE_PROPERTY_FILTER_FIELD_IDS, TRACE_PROPERTY_FILTER_PARAM_BY_FIELD, TRACE_ROOT_ENTITY_TYPE_PARAM, TRACE_STATUS_OPTIONS, TRACE_STATUS_PARAM, TRACE_STATUS_VALUES, TRACE_SYNTHETIC_FILTER_FIELD_IDS, Tab, TabContent, TabList, Tabs, TimelineExpandCol, TimelineNameCol, TimelineStructureSign, TimelineTimingCol, TokenUsageByAgentCardView, TokenUsageTimelineCardView, ToolCoinIcon, ToolsIcon, Tooltip, TooltipContent, TooltipTrigger, TraceDataPanelView, TraceDetailsView, TraceIcon, TraceKeysAndValues, TraceTimeline, TraceTimelineSpan, TracesDataList, TracesErrorContent, TracesLayout, TracesListModeToggle, TracesListView, TracesToolbar, TracesVolumeCardView, TsIcon, VariablesIcon, WorkflowCoinIcon, WorkflowIcon, WorkspacesIcon, XGroqIcon, applyLogsPropertyFilterTokens, applyMetricsPropertyFilterTokens, applyTracePropertyFilterTokens, buildLogsDrilldownUrl, buildLogsListFilters, buildMetricsDimensionalFilter, buildTraceListFilters, buildTracesDrilldownUrl, clearSavedLogsFilters, clearSavedMetricsFilters, clearSavedTraceFilters, cn, countLeafRules, createDefaultRule, createDefaultRuleGroup, createLogsPropertyFilterFields, createMetricsPropertyFilterFields, createTracePropertyFilterFields, downloadJson, fileToBase64, formatCompact, formatCost, formatHierarchicalSpans, formatJSON, formatTypeScript, generateDefaultValues, getAllSpanIds, getChildFieldOptions, getFieldOptionAtPath, getFieldOptionsFromSchema, getFileContentType, getInputPreview, getLogsPropertyFilterTokens, getMetricsPropertyFilterTokens, getPreservedLogsFilterParams, getPreservedTraceFilterParams, getSpanDescendantIds, getSpanTypeUi, getTokenLimitMessage, getTracePropertyFilterTokens, hasAnyLogsFilterParams, hasAnyMetricsFilterParams, hasAnyTraceFilterParams, is401UnauthorizedError, is403ForbiddenError, is404NotFoundError, isBranchesNotSupportedError, isNonRetryableError, isObjectEmpty, isRule, isRuleGroup, isTokenLimitExceeded, isValidJson, isValidPreset, loadLogsFiltersFromStorage, loadMetricsFiltersFromStorage, loadTraceFiltersFromStorage, lodashTitleCase, narrowWindowToBucket, neutralizeFilterTokens, neutralizeLogsFilterTokens, parseError, parseFieldPath, saveLogsFiltersToStorage, saveMetricsFiltersToStorage, saveTraceFiltersToStorage, shouldRetryQuery, spanTypePrefixes, stringToColor, toSigFigs, toast, truncateString, useActiveResourcesKpiMetrics, useActiveThreadsKpiMetrics, useAgentRunsKpiMetrics, useBranch, useDownloadTraceJson, useDrilldown, useEntityNames, useEnvironments, useInView, useLatencyMetrics, useLogs, useLogsFilterPersistence, useLogsListNavigation, useLogsUrlState, useMetrics, useMetricsFilters, useModelCostKpiMetrics, useModelUsageCostMetrics, usePlaygroundStore, useScoresMetrics, useServiceNames, useSpanDetail, useTags, useTokenUsageByAgentMetrics, useTokenUsageTimeSeries, useTopActiveThreadsMetrics, useTopResourcesByThreadsMetrics, useTotalTokensKpiMetrics, useTraceFilterPersistence, useTraceLightSpans, useTraceListNavigation, useTraceOrBranchSpans, useTraceSpanNavigation, useTraceSpans, useTraceUrlState, useTraceVolumeMetrics, useTraces };
+export { AgentCoinIcon, AgentIcon, AgentNetworkCoinIcon, AiIcon, AmazonIcon, AnthropicChatIcon, AnthropicMessagesIcon, ApiIcon, AzureIcon, BarListContent, BranchIcon, Button, ButtonsGroup, CHART_COLORS, CONTEXT_FIELD_IDS, CheckIcon, ChevronIcon, CohereIcon, CollapsiblePanel, CommitIcon, CopyButton, CrossIcon, DATE_PRESETS, DEFAULT_LOGS_FILTERS_STORAGE_KEY, DEFAULT_TRACE_FILTERS_STORAGE_KEY, DataDetailsPanel, DataKeysAndValues, DataListSkeleton, DataPanel, DatasetsIcon, DateRangeSelector, DateTimeRangePicker, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, Drawer, DrawerBackdrop, DrawerPopup, DrawerPortal, DrawerTitle, DrawerTrigger, DrawerViewport, DropdownMenu, EXTENSION_TO_MIME, EmptyState, EnvIcon, ErrorState, ExperimentsIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, GroqIcon, HomeIcon, HorizontalBars, HoverCard, HoverCardContent, HoverCardTrigger, Icon, InfoIcon, Input, JudgeIcon, KpiCardView, LOGS_DATE_FROM_PARAM, LOGS_DATE_PRESET_PARAM, LOGS_DATE_PRESET_VALUES, LOGS_DATE_TO_PARAM, LOGS_PROPERTY_FILTER_FIELD_IDS, LOGS_PROPERTY_FILTER_PARAM_BY_FIELD, LOGS_ROOT_ENTITY_TYPES, LOGS_ROOT_ENTITY_TYPE_OPTIONS, LOGS_ROOT_ENTITY_TYPE_PARAM, LOG_LEVEL_OPTIONS, LOG_LEVEL_VALUES, LatencyCardView, LatencyIcon, LogDetailsView, LogsDataList, DataListSkeleton as LogsDataListSkeleton, LogsErrorContent, LogsIcon, LogsLayout, LogsListView, LogsToolbar, MastraIcon, McpCoinIcon, McpServerIcon, MemoryCardView, MemoryIcon, MetricsCard, MetricsDataTable, MetricsIcon, MetricsLineChart, MetricsProvider, MistralIcon, ModelUsageCostCardView, NetlifyIcon, NoLogsInfo, NoTracesInfo, Notice, OPERATORS, OPERATOR_LABELS, OpenAIIcon, OpenErrorsInLogsButton, OpenInTracesButton, OpenaiChatIcon, PanelDrawer, PanelSeparator, PermissionDenied, ProcessorIcon, PromptIcon, PropertyFilterActions, PropertyFilterApplied, ROOT_ENTITY_TYPES, ROOT_ENTITY_TYPE_OPTIONS, RepoIcon, RequestContextIcon, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, ScorersIcon, ScoresCardView, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SessionExpired, SettingsIcon, SkillIcon, SpanDataPanelView, SpanDetailsView, SpanTokenUsage, Spinner, StackedRunsBars, TRACE_ANCHOR_SPAN_ID_PARAM, TRACE_DATE_FROM_PARAM, TRACE_DATE_PRESET_PARAM, TRACE_DATE_PRESET_VALUES, TRACE_DATE_TO_PARAM, TRACE_LIST_MODE_OPTIONS, TRACE_LIST_MODE_PARAM, TRACE_LIST_MODE_VALUES, TRACE_PROPERTY_FILTER_FIELD_IDS, TRACE_PROPERTY_FILTER_PARAM_BY_FIELD, TRACE_ROOT_ENTITY_TYPE_PARAM, TRACE_STATUS_OPTIONS, TRACE_STATUS_PARAM, TRACE_STATUS_VALUES, TRACE_SYNTHETIC_FILTER_FIELD_IDS, Tab, TabContent, TabList, Tabs, TimelineExpandCol, TimelineNameCol, TimelineStructureSign, TimelineTimingCol, TokenUsageByAgentCardView, TokenUsageTimelineCardView, ToolCoinIcon, ToolsIcon, Tooltip, TooltipContent, TooltipTrigger, TraceDataPanelView, TraceDetailsView, TraceIcon, TraceKeysAndValues, TraceTimeline, TraceTimelineSpan, TracesDataList, TracesErrorContent, TracesLayout, TracesListModeToggle, TracesListView, TracesToolbar, TracesVolumeCardView, TsIcon, VariablesIcon, WorkflowCoinIcon, WorkflowIcon, WorkspacesIcon, XGroqIcon, applyLogsPropertyFilterTokens, applyMetricsPropertyFilterTokens, applyTracePropertyFilterTokens, buildLogsDrilldownUrl, buildLogsListFilters, buildMetricsDimensionalFilter, buildTraceListFilters, buildTracesDrilldownUrl, clearSavedLogsFilters, clearSavedMetricsFilters, clearSavedTraceFilters, cn, countLeafRules, createDefaultRule, createDefaultRuleGroup, createLogsPropertyFilterFields, createMetricsPropertyFilterFields, createTracePropertyFilterFields, downloadJson, fileToBase64, formatCompact, formatCost, formatHierarchicalSpans, formatJSON, formatTypeScript, generateDefaultValues, getAllSpanIds, getChildFieldOptions, getFieldOptionAtPath, getFieldOptionsFromSchema, getFileContentType, getInputPreview, getLogsPropertyFilterTokens, getMetricsPropertyFilterTokens, getPreservedLogsFilterParams, getPreservedTraceFilterParams, getSpanDescendantIds, getSpanTypeUi, getTokenLimitMessage, getTracePropertyFilterTokens, hasAnyLogsFilterParams, hasAnyMetricsFilterParams, hasAnyTraceFilterParams, is401UnauthorizedError, is403ForbiddenError, is404NotFoundError, isBranchesNotSupportedError, isNonRetryableError, isObjectEmpty, isRule, isRuleGroup, isTokenLimitExceeded, isValidJson, isValidPreset, loadLogsFiltersFromStorage, loadMetricsFiltersFromStorage, loadTraceFiltersFromStorage, lodashTitleCase, narrowWindowToBucket, neutralizeFilterTokens, neutralizeLogsFilterTokens, parseError, parseFieldPath, saveLogsFiltersToStorage, saveMetricsFiltersToStorage, saveTraceFiltersToStorage, shouldRetryQuery, spanTypePrefixes, stringToColor, toSigFigs, toast, truncateString, useActiveResourcesKpiMetrics, useActiveThreadsKpiMetrics, useAgentRunsKpiMetrics, useBranch, useDownloadTraceJson, useDrilldown, useEntityNames, useEnvironments, useInView, useIsMobile, useLatencyMetrics, useLogs, useLogsFilterPersistence, useLogsListNavigation, useLogsUrlState, useMetrics, useMetricsFilters, useModelCostKpiMetrics, useModelUsageCostMetrics, usePlaygroundStore, useScoresMetrics, useServiceNames, useSpanDetail, useTags, useTokenUsageByAgentMetrics, useTokenUsageTimeSeries, useTopActiveThreadsMetrics, useTopResourcesByThreadsMetrics, useTotalTokensKpiMetrics, useTraceFilterPersistence, useTraceLightSpans, useTraceListNavigation, useTraceOrBranchSpans, useTraceSpanNavigation, useTraceSpans, useTraceUrlState, useTraceVolumeMetrics, useTraces };
 //# sourceMappingURL=index.es.js.map