@mastra/playground-ui 48.0.0-alpha.13 → 48.0.0-alpha.14

package/dist/components/EnvironmentVariablesEditor.es.js

@@ -2,14 +2,14 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { c as cn } from '../cn-BakJzhuv.js';
 import { PlusIcon, EyeOffIcon, EyeIcon, CheckIcon, CopyIcon, Code2Icon, TrashIcon, UploadIcon } from 'lucide-react';
 import { createContext, use, useState, useMemo } from 'react';
-import { B as Button } from '../Button-Bx2lFdqb.js';
-import { N as Notice } from '../Notice-DIK9IZsq.js';
+import { B as Button } from '../Button-jSNYnNNS.js';
+import { N as Notice } from '../Notice-D3lGV4-M.js';
 import { D as DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE } from '../env-file-BITYowCx.js';
 import { T as Txt } from '../Txt-Df42XG5p.js';
-import { D as DataList } from '../data-list-CnQRIUyN.js';
+import { D as DataList } from '../data-list-Chyj88BP.js';
 import { useCopyToClipboard } from '../hooks/use-copy-to-clipboard.es.js';
 import { F as FieldBlock } from '../field-block-B63CpA4d.js';
-import { I as InputGroup, c as InputGroupInput, a as InputGroupAddon, b as InputGroupButton } from '../input-group-Dzs-ai0n.js';
+import { I as InputGroup, c as InputGroupInput, a as InputGroupAddon, b as InputGroupButton } from '../input-group-BnnvYySr.js';
 
 function EnvironmentVariablesEditorActions({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-2", className), ...props });

package/dist/components/ErrorBoundary.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const Button = require('../Button-Bm94fEF2.cjs');
+const Button = require('../Button-CbPrvFVl.cjs');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 
 function _interopNamespaceDefault(e) {

package/dist/components/ErrorBoundary.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { AlertTriangle } from 'lucide-react';
 import * as React from 'react';
-import { B as Button } from '../Button-Bx2lFdqb.js';
+import { B as Button } from '../Button-jSNYnNNS.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 
 const INITIAL_STATE = { error: null, errorInfo: null };

package/dist/components/FormFieldBlocks.cjs.js

@@ -6,8 +6,8 @@ const fieldBlock = require('../field-block-BcTR08I7.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 const textFieldBlock = require('../text-field-block-BGlwSFYC.cjs');
-const searchFieldBlock = require('../search-field-block-D6TdrHZX.cjs');
-const selectFieldBlock = require('../select-field-block-svlHplxW.cjs');
+const searchFieldBlock = require('../search-field-block-wjh5uz7E.cjs');
+const selectFieldBlock = require('../select-field-block-DY9ebut9.cjs');
 
 function FieldBlocksLayoutColumn({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("grid content-start gap-6", className), children });

package/dist/components/FormFieldBlocks.es.js

@@ -2,8 +2,8 @@ export { F as FieldBlock } from '../field-block-B63CpA4d.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as cn } from '../cn-BakJzhuv.js';
 export { T as TextFieldBlock } from '../text-field-block-DOiM0dpY.js';
-export { S as SearchFieldBlock } from '../search-field-block-DCnFZzRK.js';
-export { S as SelectFieldBlock } from '../select-field-block-DXw3tD0y.js';
+export { S as SearchFieldBlock } from '../search-field-block-C15VrrNp.js';
+export { S as SelectFieldBlock } from '../select-field-block-BWwOG2cP.js';
 
 function FieldBlocksLayoutColumn({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("grid content-start gap-6", className), children });

package/dist/components/HoverCard.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const hoverCard = require('../hover-card-Bx258om1.cjs');
+const hoverCard = require('../hover-card-Cd9QK50X.cjs');
 
 
 

package/dist/components/HoverCard.es.js

@@ -1,2 +1,2 @@
-export { H as HoverCard, a as HoverCardContent, b as HoverCardTrigger } from '../hover-card-crVofiZO.js';
+export { H as HoverCard, a as HoverCardContent, b as HoverCardTrigger } from '../hover-card-Bs845QbV.js';
 //# sourceMappingURL=HoverCard.es.js.map

package/dist/components/InputGroup.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const inputGroup = require('../input-group-CH72YUVL.cjs');
+const inputGroup = require('../input-group-BxAiZUo5.cjs');
 
 
 

package/dist/components/InputGroup.es.js

@@ -1,2 +1,2 @@
-export { I as InputGroup, a as InputGroupAddon, b as InputGroupButton, c as InputGroupInput, d as InputGroupText, e as InputGroupTextarea } from '../input-group-Dzs-ai0n.js';
+export { I as InputGroup, a as InputGroupAddon, b as InputGroupButton, c as InputGroupInput, d as InputGroupText, e as InputGroupTextarea } from '../input-group-BnnvYySr.js';
 //# sourceMappingURL=InputGroup.es.js.map

package/dist/components/JSONSchemaForm.cjs.js

@@ -7,10 +7,10 @@ const React = require('react');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 const textFieldBlock = require('../text-field-block-BGlwSFYC.cjs');
 const lucideReact = require('lucide-react');
-const selectFieldBlock = require('../select-field-block-svlHplxW.cjs');
+const selectFieldBlock = require('../select-field-block-DY9ebut9.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
 const checkbox = require('../checkbox-CY9g_3ZS.cjs');
-const Button = require('../Button-Bm94fEF2.cjs');
+const Button = require('../Button-CbPrvFVl.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/dist/components/JSONSchemaForm.es.js

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { c as cn } from '../cn-BakJzhuv.js';
 import { T as TextFieldBlock } from '../text-field-block-DOiM0dpY.js';
 import { Type, Hash, ToggleLeft, AlignLeft, Braces, List, Trash2Icon } from 'lucide-react';
-import { S as SelectFieldBlock } from '../select-field-block-DXw3tD0y.js';
+import { S as SelectFieldBlock } from '../select-field-block-BWwOG2cP.js';
 import { Icon } from '../icons/Icon.es.js';
 import { C as Checkbox } from '../checkbox-VAUW92fg.js';
-import { B as Button } from '../Button-Bx2lFdqb.js';
+import { B as Button } from '../Button-jSNYnNNS.js';
 
 const JSONSchemaFormContext = React.createContext(null);
 function JSONSchemaFormProvider({

package/dist/components/KeyValueList.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const hoverCard = require('../hover-card-Bx258om1.cjs');
+const hoverCard = require('../hover-card-Cd9QK50X.cjs');
 const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 

package/dist/components/KeyValueList.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ChevronRightIcon } from 'lucide-react';
 import React__default from 'react';
-import { H as HoverCard, b as HoverCardTrigger, a as HoverCardContent } from '../hover-card-crVofiZO.js';
+import { H as HoverCard, b as HoverCardTrigger, a as HoverCardContent } from '../hover-card-Bs845QbV.js';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { c as cn } from '../cn-BakJzhuv.js';
 

package/dist/components/ListSearch.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const useDebounce = require('use-debounce');
-const searchFieldBlock = require('../search-field-block-D6TdrHZX.cjs');
+const searchFieldBlock = require('../search-field-block-wjh5uz7E.cjs');
 
 const ListSearch = ({
   onSearch,

package/dist/components/ListSearch.es.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useId, useState, useEffect, useCallback } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
-import { S as SearchFieldBlock } from '../search-field-block-DCnFZzRK.js';
+import { S as SearchFieldBlock } from '../search-field-block-C15VrrNp.js';
 
 const ListSearch = ({
   onSearch,

package/dist/components/MainSidebar.cjs.js

@@ -10,7 +10,7 @@ const scrollArea = require('../scroll-area-Dv6QagXt.cjs');
 const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
 const index = require('../index-C-Lt4Bx_.cjs');
 const tooltip = require('../tooltip-CLz5PtEE.cjs');
-const drawer = require('../drawer-CdsTitFp.cjs');
+const drawer = require('../drawer-Bng-J6Ne.cjs');
 const primitives_resizeHandleIndicator = require('../primitives/resize-handle-indicator.cjs.js');
 
 function MainSidebarBottom({ className, children, ...props }) {
@@ -134,7 +134,7 @@ function MainSidebarNavLabel({ children, className, state: stateProp, ...rest })
   return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, className: utils_cn.cn("min-w-0 flex-1 truncate text-left", className), children });
 }
 
-const navItemVariants = index.cva("flex min-w-0 cursor-pointer items-center rounded-lg whitespace-nowrap text-neutral3", {
+const navItemVariants = index.cva("flex min-w-0 cursor-pointer items-center rounded-lg whitespace-nowrap", {
   variants: {
     size: {
       default: "h-8 text-ui-md",
@@ -151,19 +151,29 @@ const nestedExpandedItemClasses = (level) => {
   if (level === 2) return "w-full gap-2 py-1 pr-3 pl-10 justify-start text-ui-sm h-8";
   return "w-full gap-2 py-1 pr-3 pl-12 justify-start text-ui-sm h-8";
 };
-const navItemClasses = ({ isActive, isCollapsed, isFeatured, level = 0, size } = {}) => utils_cn.cn(
+const idleSurface = utils_cn.cn(
+  "rounded-lg text-neutral3 [&_svg]:text-neutral3/70",
+  "hover:bg-sidebar-nav-hover hover:text-neutral6 [&:hover_svg]:text-neutral5"
+);
+const activeSurface = "bg-sidebar-nav-active text-neutral6 hover:bg-sidebar-nav-active hover:text-neutral6 [&_svg]:text-neutral6 [&:hover_svg]:text-neutral6";
+const featuredSurface = utils_cn.cn(
+  "my-2 border border-accent1/30 bg-accent1Dark text-accent1 hover:bg-accent1Darker hover:text-accent1",
+  "dark:border-transparent dark:bg-accent1 dark:text-black dark:hover:bg-accent1/90 dark:hover:text-black",
+  "[&_svg]:text-accent1 dark:[&_svg]:text-black/75 [&:hover_svg]:text-accent1 dark:[&:hover_svg]:text-black"
+);
+const navRowSurfaceClasses = ({ isActive, isFeatured }) => utils_cn.cn(idleSurface, isActive && activeSurface, isFeatured && featuredSurface);
+const navItemLayoutClasses = ({ isCollapsed, level = 0, size }) => utils_cn.cn(
   navItemVariants({ size }),
   "duration-normal transition-all ease-out-custom motion-reduce:transition-none",
-  "[&_svg]:duration-normal [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-neutral3/70 [&_svg]:transition-colors motion-reduce:[&_svg]:transition-none",
-  "hover:bg-sidebar-nav-hover hover:text-neutral6 [&:hover_svg]:text-neutral5",
+  "[&_svg]:duration-normal [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:transition-colors motion-reduce:[&_svg]:transition-none",
   "focus-visible:shadow-focus-ring focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:outline-hidden",
   !isCollapsed && nestedExpandedItemClasses(level),
-  isCollapsed && "w-full justify-center p-0",
-  isActive && "bg-sidebar-nav-active text-neutral6 hover:bg-sidebar-nav-active hover:text-neutral6 [&_svg]:text-neutral6 [&:hover_svg]:text-neutral6",
-  isCollapsed && !isActive && "[&_svg]:text-neutral3",
-  isFeatured && "my-2 border border-accent1/30 bg-accent1Dark text-accent1 hover:bg-accent1Darker hover:text-accent1",
-  isFeatured && "dark:border-transparent dark:bg-accent1 dark:text-black dark:hover:bg-accent1/90 dark:hover:text-black",
-  isFeatured && "[&_svg]:text-accent1 dark:[&_svg]:text-black/75 [&:hover_svg]:text-accent1 dark:[&:hover_svg]:text-black"
+  isCollapsed && "w-full justify-center p-0"
+);
+const navItemClasses = ({ isActive, isCollapsed, isFeatured, level, size } = {}) => utils_cn.cn(
+  navItemLayoutClasses({ isCollapsed, level, size }),
+  navRowSurfaceClasses({ isActive, isFeatured }),
+  isCollapsed && !isActive && "[&_svg]:text-neutral3"
 );
 
 function MainSidebarNavLink({
@@ -181,56 +191,69 @@ function MainSidebarNavLink({
   asChild = false,
   ...props
 }) {
+  if (render && asChild) {
+    throw new Error("MainSidebarNavLink accepts either `render` or `asChild`, not both.");
+  }
   const ctx = useMaybeSidebarState();
   const state = stateProp ?? ctx?.state ?? "default";
   const Link = LinkProp ?? ctx?.LinkComponent ?? "a";
   const isCollapsed = state === "collapsed";
   const isFeatured = link?.variant === "featured";
   const level = levelProp ?? (link?.indent ? 1 : 0);
-  const isExternal = Boolean(link?.url && /^(https?:)?\/\//.test(link.url));
-  const linkParams = isExternal ? { target: "_blank", rel: "noreferrer" } : {};
-  const needsTooltip = link ? isCollapsed || Boolean(link.tooltipMsg) : false;
-  const itemClassName = utils_cn.cn(
-    navItemClasses({
-      isActive,
-      isCollapsed,
-      isFeatured,
-      level,
-      size
-    }),
-    action && !isCollapsed && "pr-10"
-  );
-  let interactiveEl = null;
-  if (render && asChild) {
-    throw new Error("MainSidebarNavLink accepts either `render` or `asChild`, not both.");
-  }
-  if (render) {
-    interactiveEl = React.cloneElement(render, {
-      className: utils_cn.cn(itemClassName, render.props.className)
-    });
-  } else if (asChild) {
+  const rowAction = isCollapsed ? void 0 : action;
+  const itemClassName = rowAction ? utils_cn.cn(navItemLayoutClasses({ level, size }), "flex-1 pr-1") : navItemClasses({ isActive, isCollapsed, isFeatured, level, size });
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { ...props, className: utils_cn.cn("relative flex min-w-0 flex-col", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(NavRowBody, { action: rowAction, surfaceClassName: navRowSurfaceClasses({ isActive, isFeatured }), children: /* @__PURE__ */ jsxRuntime.jsx(NavRowTooltip, { label: navTooltipLabel(link, isCollapsed), children: navInteractiveRow({ render, asChild, children, link, state, Link, className: itemClassName }) }) }),
+    !isCollapsed && subItems
+  ] });
+}
+function navInteractiveRow({
+  render,
+  asChild,
+  children,
+  link,
+  state,
+  Link,
+  className
+}) {
+  if (render) return React.cloneElement(render, { className: utils_cn.cn(className, render.props.className) });
+  if (asChild) {
     if (!React.isValidElement(children)) {
       throw new Error(
         "MainSidebarNavLink requires a valid React element child when `asChild` is true so it can apply `SlottedNavChildProps` and merge `itemClassName`."
       );
     }
-    interactiveEl = React.cloneElement(children, {
-      className: utils_cn.cn(itemClassName, children.props.className)
-    });
-  } else if (link) {
-    interactiveEl = /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: link.url, ...linkParams, className: itemClassName, children: [
-      link.icon,
-      /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavLabel, { state, children: link.name }),
-      children
-    ] });
+    return React.cloneElement(children, { className: utils_cn.cn(className, children.props.className) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { ...props, className: utils_cn.cn("relative flex min-w-0 flex-col", className), children: [
-    link && needsTooltip && React.isValidElement(interactiveEl) ? /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { render: interactiveEl }),
-      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { side: "right", align: "center", sideOffset: 16, children: link.tooltipMsg ? isCollapsed ? `${link.name} | ${link.tooltipMsg}` : link.tooltipMsg : link.name })
-    ] }) : interactiveEl ?? children,
-    !isCollapsed && action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1/2 right-1 -translate-y-1/2", children: action }),
-    !isCollapsed && subItems
+  if (!link) return children;
+  const externalParams = /^(https?:)?\/\//.test(link.url) ? { target: "_blank", rel: "noreferrer" } : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: link.url, ...externalParams, className, children: [
+    link.icon,
+    /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavLabel, { state, children: link.name }),
+    children
+  ] });
+}
+function navTooltipLabel(link, isCollapsed) {
+  if (!link) return void 0;
+  if (link.tooltipMsg) return isCollapsed ? `${link.name} | ${link.tooltipMsg}` : link.tooltipMsg;
+  return isCollapsed ? link.name : void 0;
+}
+function NavRowTooltip({ label, children }) {
+  if (!label || !React.isValidElement(children)) return children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { render: children }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { side: "right", align: "center", sideOffset: 16, children: label })
+  ] });
+}
+function NavRowBody({
+  action,
+  surfaceClassName,
+  children
+}) {
+  if (!action) return children;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex min-w-0 items-center pr-1", surfaceClassName), children: [
+    children,
+    action
   ] });
 }