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

package/dist/index.cjs.js

@@ -26,7 +26,7 @@ const multiCombobox = require('./multi-combobox-DkFLK64B.cjs');
 const combobox$1 = require('@base-ui/react/combobox');
 const command = require('./command-D0tQ1Lpz.cjs');
 const code = require('./code-B3WONxnA.cjs');
-const codeBlock = require('./code-block-CcVa6fM8.cjs');
+const codeBlock = require('./code-block-C4Zp_ewI.cjs');
 const copyButton = require('./copy-button-BaAuAgdC.cjs');
 const dashboardCard = require('./dashboard-card-B9enj4NG.cjs');
 const dialog = require('./dialog-46zkb32X.cjs');
@@ -47,8 +47,8 @@ const label = require('./label-U8omtW8w.cjs');
 const markdownRenderer = require('./markdown-renderer-DyUlVfRt.cjs');
 const metricsCard = require('./metrics-card-hs1pqY2Y.cjs');
 const metricsFlexGrid = require('./metrics-flex-grid-DzlyAgr7.cjs');
-const popover = require('./popover-ttQgAb0m.cjs');
-const propertyFilterCreator = require('./property-filter-creator-Cl7xhaML.cjs');
+const popover = require('./popover-B8RFw-D-.cjs');
+const propertyFilterCreator = require('./property-filter-creator-DU8pl6-6.cjs');
 const radioGroup = require('./radio-group-CcZMn-TY.cjs');
 const scrollArea = require('./scroll-area-BqJfcT94.cjs');
 const pendingIndicator = require('./pending-indicator-BxD-kwEk.cjs');
@@ -68,16 +68,16 @@ const buttonsGroup = require('./buttons-group-BvLg2kpv.cjs');
 const mainContent = require('./main-content-CnmMWNin.cjs');
 const mainHeader = require('./main-header-DJLRceP9.cjs');
 const sections = require('./sections-BgrvBjOR.cjs');
-const dateTimePicker = require('./date-time-picker-BKqGpw5w.cjs');
+const dateTimePicker = require('./date-time-picker-Bjr6V3AR.cjs');
 const timePicker = require('./time-picker-DWrxHBfR.cjs');
 const components_JSONSchemaForm = require('./components/JSONSchemaForm.cjs.js');
 const keyValueList = require('./key-value-list-D067I300.cjs');
-const mainSidebar = require('./main-sidebar-CWoM-yrH.cjs');
+const mainSidebar = require('./main-sidebar-Djs_3tGw.cjs');
 const pageHeader = require('./page-header-C1ZlL4Ua.cjs');
 const section = require('./section-muObW4n-.cjs');
 const sectionCard = require('./section-card-23Os1QRs.cjs');
 const processStepProgressBar = require('./process-step-progress-bar-D74Y-8Jo.cjs');
-const tabsTab = require('./tabs-tab-Dl9FqQhm.cjs');
+const tabsTab = require('./tabs-tab-CulV7e_n.cjs');
 const tabsContent = require('./tabs-content-m86TGI_b.cjs');
 const getShortId = require('./get-short-id-DtN4BmrD.cjs');
 const contentBlock = require('./content-block-Csb01oxE.cjs');
@@ -102,7 +102,7 @@ const dataCodeSection = require('./data-code-section-BtFzBCox.cjs');
 const components_DataDetailsPanel = require('./components/DataDetailsPanel.cjs.js');
 const dataKeysAndValues = require('./data-keys-and-values-Spy2O_IE.cjs');
 const dataPanel = require('./data-panel-DToYF7cH.cjs');
-const dateTimeRangePicker = require('./date-time-range-picker-Do-3VVvo.cjs');
+const dateTimeRangePicker = require('./date-time-range-picker-DjcVeD-Z.cjs');
 const horizontalBars = require('./horizontal-bars-C9qp4r47.cjs');
 const metricsDataTable = require('./metrics-data-table-D7vx2WEJ.cjs');
 const metricsLineChart = require('./metrics-line-chart-D1ZGVepo.cjs');
@@ -116,12 +116,12 @@ const transitions = require('./transitions-DpczSjmD.cjs');
 const useCopyToClipboard = require('./use-copy-to-clipboard-CQgIuR1c.cjs');
 const React = require('react');
 const utils = require('./utils-vA5sWo9W.cjs');
-const zustand = require('zustand');
-const middleware = require('zustand/middleware');
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const reactResizablePanels = require('react-resizable-panels');
 const Icon = require('./Icon-C_Ooy-cP.cjs');
+const zustand = require('zustand');
+const middleware = require('zustand/middleware');
 const dateFns = require('date-fns');
 const observability = require('@mastra/core/observability');
 const metricsKpiCard = require('./metrics-kpi-card-D_SaIWBc.cjs');
@@ -1426,6 +1426,19 @@ const useInView = () => {
   return { inView, setRef };
 };
 
+const useIsMobile = (breakpoint = 1024) => {
+  const query = React.useMemo(() => `(max-width: ${breakpoint - 1}px)`, [breakpoint]);
+  const [isMobile, setIsMobile] = React.useState(false);
+  React.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();
@@ -2160,33 +2173,315 @@ const RuleBuilder = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(RuleGroupView, { schema, group: ruleGroup, onChange: handleGroupChange, depth: 0, maxDepth }) });
 };
 
-const CollapsiblePanel = ({ collapsedSize, children, direction, onResize, ...props }) => {
+const PanelEdgeIcon = ({ side }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: side === "left" ? "M9 3v18" : "M15 3v18" })
+    ]
+  }
+);
+
+const panelIconButtonClass = utils.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 = React.useRef(null);
+  const rectRef = React.useRef(null);
+  const writePosition = React.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 = React.useCallback(
+    (point) => {
+      writePosition(point, true);
+    },
+    [writePosition]
+  );
+  const updateTracking = React.useCallback(
+    (point) => {
+      writePosition(point);
+    },
+    [writePosition]
+  );
+  const endTracking = React.useCallback(() => {
+    rectRef.current = null;
+  }, []);
+  return { beginTracking, elementRef, endTracking, updateTracking };
+};
+
+const PILL_EDGE_MARGIN = 22;
+const usePanelSizeTransitions = (elementRef) => {
+  const [booted, setBooted] = React.useState(false);
+  const bootedRef = React.useRef(false);
+  const bootScheduled = React.useRef(false);
+  const enableSizeTransitionsRef = React.useRef(() => {
+  });
+  const enableSizeTransitions = React.useCallback(() => {
+    enableSizeTransitionsRef.current();
+  }, []);
+  const boot = React.useCallback(() => {
+    if (bootScheduled.current) return;
+    bootScheduled.current = true;
+    requestAnimationFrame(() => {
+      bootedRef.current = true;
+      setBooted(true);
+      enableSizeTransitionsRef.current();
+    });
+  }, []);
+  React.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 = React.useRef(null);
+  const pillRef = React.useRef(null);
+  const {
+    beginTracking: beginPillTracking,
+    elementRef: stripRef,
+    endTracking: endPillTracking,
+    updateTracking: updatePillTracking
+  } = useClampedElementCursor({
+    axis: "y",
+    margin: PILL_EDGE_MARGIN,
+    variableName: "--pill-y"
+  });
+  const setEdgeHovered = React.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 = React.useCallback(
+    (point) => {
+      const pill = pillRef.current;
+      if (!pill) return;
+      beginPillTracking(point);
+      pill.style.transitionProperty = "opacity, translate";
+      requestAnimationFrame(() => {
+        pill.style.transitionProperty = "";
+      });
+    },
+    [beginPillTracking]
+  );
+  const trackPillPosition = React.useCallback(
+    (point) => {
+      updatePillTracking(point);
+    },
+    [updatePillTracking]
+  );
+  React.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] = React.useState(false);
   const panelRef = reactResizablePanels.usePanelRef();
-  const expand = () => {
+  const elementRef = React.useRef(null);
+  const { booted, boot, enableSizeTransitions } = usePanelSizeTransitions(elementRef);
+  const { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition } = useCollapsedEdgePill({
+    collapsed,
+    direction,
+    elementRef
+  });
+  const expand = React.useCallback(() => {
+    enableSizeTransitions();
     if (!panelRef.current) return;
     panelRef.current.expand();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  }, [enableSizeTransitions, panelRef]);
+  const numericMinSize = typeof minSize === "number" ? minSize : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     reactResizablePanels.Panel,
     {
       panelRef,
+      elementRef,
       collapsedSize,
+      minSize,
+      className: utils.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__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { onClick: expand, className: "h-48! border-none", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { children: direction === "left" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, {}) }) }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Expand" })
-      ] }) : children
+      children: [
+        /* @__PURE__ */ jsxRuntime.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: utils.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ref: expandButtonRef,
+              type: "button",
+              "aria-label": "Expand panel",
+              onClick: expand,
+              className: utils.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__ */ jsxRuntime.jsx(Icon.Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(PanelEdgeIcon, { side: direction }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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: utils.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__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  ref: pillRef,
+                  style: { top: "var(--pill-y)" },
+                  className: utils.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__ */ jsxRuntime.jsx(Icon.Icon, { children: direction === "left" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, {}) })
+                }
+              )
+            }
+          )
+        ] })
+      ]
     }
   );
 };
@@ -2225,6 +2520,27 @@ const PanelSeparator = ({ variant = "line" }) => {
   );
 };
 
+const PanelDrawer = ({ direction, label, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(drawer.Drawer, { side: direction, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(drawer.DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        className: utils.cn(panelIconButtonClass, "absolute top-2 z-10", direction === "left" ? "left-2" : "right-2"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(PanelEdgeIcon, { side: direction }) })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(drawer.DrawerPortal, { keepMounted: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(drawer.DrawerBackdrop, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(drawer.DrawerViewport, { children: /* @__PURE__ */ jsxRuntime.jsxs(drawer.DrawerPopup, { className: "w-[calc(100vw-2.5rem)] max-w-[28rem]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(drawer.DrawerTitle, { className: "sr-only", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col", children })
+      ] }) })
+    ] })
+  ] });
+};
+
 const EXTENSION_TO_MIME = {
   jpg: "image/jpg",
   jpeg: "image/jpeg",
@@ -8487,6 +8803,7 @@ exports.OpenAIIcon = OpenAIIcon;
 exports.OpenErrorsInLogsButton = OpenErrorsInLogsButton;
 exports.OpenInTracesButton = OpenInTracesButton;
 exports.OpenaiChatIcon = OpenaiChatIcon;
+exports.PanelDrawer = PanelDrawer;
 exports.PanelSeparator = PanelSeparator;
 exports.ProcessorIcon = ProcessorIcon;
 exports.PromptIcon = PromptIcon;
@@ -8625,6 +8942,7 @@ exports.useDrilldown = useDrilldown;
 exports.useEntityNames = useEntityNames;
 exports.useEnvironments = useEnvironments;
 exports.useInView = useInView;
+exports.useIsMobile = useIsMobile;
 exports.useLatencyMetrics = useLatencyMetrics;
 exports.useLogs = useLogs;
 exports.useLogsFilterPersistence = useLogsFilterPersistence;