@mastra/playground-ui 30.0.0-alpha.5 → 30.0.0-alpha.8

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @mastra/playground-ui
 
+## 30.0.0-alpha.8
+
+### Patch Changes
+
+- Exported ContextMenu from the package entry so it can be imported alongside other Base UI primitives. ([#17062](https://github.com/mastra-ai/mastra/pull/17062))
+
+- Updated dependencies [[`c35b962`](https://github.com/mastra-ai/mastra/commit/c35b9625c7e854fcfdeee226a3338a750d0ff211), [`c35b962`](https://github.com/mastra-ai/mastra/commit/c35b9625c7e854fcfdeee226a3338a750d0ff211), [`9be1545`](https://github.com/mastra-ai/mastra/commit/9be1545475eb81a716169bb1281a37853cc739e0), [`4084113`](https://github.com/mastra-ai/mastra/commit/408411370fc48a822e8b616b3b63f9409774e0e9), [`bc01b1b`](https://github.com/mastra-ai/mastra/commit/bc01b1bfafe381d90af909f8bce7eeb4eee779f2), [`1120b4f`](https://github.com/mastra-ai/mastra/commit/1120b4fa928552c6ee1751efa5603d955841e766)]:
+  - @mastra/core@1.37.0-alpha.8
+  - @mastra/client-js@1.21.0-alpha.8
+  - @mastra/react@0.4.1-alpha.8
+
+## 30.0.0-alpha.7
+
+### Patch Changes
+
+- Design-system additions to support theming: ([#17059](https://github.com/mastra-ai/mastra/pull/17059))
+  - `Avatar` now accepts optional `color` and `textColor` props for per-instance tinting, and falls back to the initial when the image fails to load.
+  - `Searchbar` accepts an optional `className` to let consumers tune layout without forking.
+  - `TabList` accepts a `style` prop and the active-tab indicator now reads from the `--tab-indicator-color` CSS variable, letting parents theme the indicator (e.g. per-agent accent color).
+  - `stringToColor` now accepts any `number` for the `lightness` argument and defaults to `90` instead of `75` for a lighter fallback chip.
+  - Global `body` rule enables `font-smoothing` / `-webkit-font-smoothing` for crisper UI text.
+
+- Updated dependencies [[`f1b9f87`](https://github.com/mastra-ai/mastra/commit/f1b9f87a00505f15d4fe39f92de287674adc2198), [`168fa09`](https://github.com/mastra-ai/mastra/commit/168fa09d6b39114cb8c13bd06f1dccb9bc81c6cd), [`af2e1f8`](https://github.com/mastra-ai/mastra/commit/af2e1f8e2a2d2c4ba75167d5c93ca44395639eff)]:
+  - @mastra/react@0.4.1-alpha.7
+  - @mastra/core@1.37.0-alpha.7
+  - @mastra/client-js@1.21.0-alpha.7
+
+## 30.0.0-alpha.6
+
+### Patch Changes
+
+- Updated dependencies [[`0cbece9`](https://github.com/mastra-ai/mastra/commit/0cbece9d832cb134a74cdbf3682d390a058215a4), [`7dfe1bc`](https://github.com/mastra-ai/mastra/commit/7dfe1bcfe71d261a6fd6bbf29b1dec49d78fb98f), [`70cb714`](https://github.com/mastra-ai/mastra/commit/70cb7149c8f16f478e15b58498254a53181750a4), [`7f9da22`](https://github.com/mastra-ai/mastra/commit/7f9da22efd5aa595e138a31de55a5f0f2f28b33d)]:
+  - @mastra/core@1.37.0-alpha.6
+  - @mastra/client-js@1.21.0-alpha.6
+  - @mastra/react@0.4.1-alpha.6
+
 ## 30.0.0-alpha.5
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('./index.css');const jsxRuntime = require('react/jsx-runtime');
-const tokens = require('./tokens.cjs.js');
 const React = require('react');
+const tokens = require('./tokens.cjs.js');
 const tooltip = require('@base-ui/react/tooltip');
 const langJson = require('@codemirror/lang-json');
 const langMarkdown = require('@codemirror/lang-markdown');
@@ -25,6 +25,7 @@ const collapsible = require('@base-ui/react/collapsible');
 const combobox = require('@base-ui/react/combobox');
 const cmdk = require('cmdk');
 const dialog = require('@base-ui/react/dialog');
+const contextMenu = require('@base-ui/react/context-menu');
 const select = require('@base-ui/react/select');
 const tabs = require('@base-ui/react/tabs');
 const drawer = require('@base-ui/react/drawer');
@@ -3423,17 +3424,31 @@ const sizeClasses$4 = {
   md: "h-avatar-md w-avatar-md",
   lg: "h-avatar-lg w-avatar-lg"
 };
-const Avatar = ({ src, name, size = "sm", interactive = false }) => {
+const Avatar = ({ src, name, size = "sm", interactive = false, color, textColor }) => {
+  const [didError, setDidError] = React.useState(false);
+  const initial = name.trim()[0]?.toUpperCase() ?? "A";
+  const showImage = Boolean(src) && !didError;
+  const showFallbackTint = !showImage && Boolean(color);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
         sizeClasses$4[size],
-        "border border-border1 bg-surface3 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
+        "border border-border1 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
+        !showFallbackTint && "bg-surface3",
         transitions.all,
         interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
       ),
-      children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-center text-neutral4", children: name[0].toUpperCase() })
+      style: showFallbackTint ? { backgroundColor: color } : void 0,
+      children: showImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, className: "h-full w-full object-cover", onError: () => setDidError(true) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        Txt,
+        {
+          variant: "ui-md",
+          className: cn("text-center", !showFallbackTint && "text-neutral4"),
+          style: showFallbackTint && textColor ? { color: textColor } : void 0,
+          children: initial
+        }
+      )
     }
   );
 };
@@ -6694,6 +6709,187 @@ const CommandShortcut = ({ className, ...props }) => {
 };
 CommandShortcut.displayName = "CommandShortcut";
 
+const ContextMenuRoot = contextMenu.ContextMenu.Root;
+const ContextMenuGroup = contextMenu.ContextMenu.Group;
+const ContextMenuPortal = contextMenu.ContextMenu.Portal;
+const ContextMenuSub = contextMenu.ContextMenu.SubmenuRoot;
+const ContextMenuRadioGroup = contextMenu.ContextMenu.RadioGroup;
+const itemClass$1 = cn(
+  "relative flex cursor-pointer select-none items-center gap-2.5 rounded-lg px-2 py-1.5 text-ui-smd leading-ui-sm transition-colors text-neutral4 hover:text-neutral6 focus:text-neutral6 hover:bg-surface4 focus:bg-surface4 data-[highlighted]:bg-surface4 data-[highlighted]:text-neutral6 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent data-disabled:hover:text-neutral4 data-disabled:focus:bg-transparent data-disabled:focus:text-neutral4 data-disabled:data-[highlighted]:bg-transparent data-disabled:data-[highlighted]:text-neutral4 [&>span]:truncate [&_svg]:size-4 [&_svg]:shrink-0 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0",
+  "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-60 [&:hover>svg]:opacity-100"
+);
+const popupClass$1 = cn(
+  "bg-surface3 text-neutral4 z-50 min-w-44 max-h-[min(20rem,var(--available-height))] overflow-x-hidden overflow-y-auto rounded-xl border border-border1 p-1 shadow-dialog origin-[var(--transform-origin)] outline-none",
+  "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
+  "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1"
+);
+const ContextMenuTrigger = contextMenu.ContextMenu.Trigger;
+const ContextMenuContent = React__namespace.forwardRef(
+  ({ className, align = "start", alignOffset = 4, side, sideOffset = 0, container, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(contextMenu.ContextMenu.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
+    contextMenu.ContextMenu.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        contextMenu.ContextMenu.Popup,
+        {
+          ref,
+          "data-slot": "context-menu-content",
+          className: cn(popupClass$1, className),
+          ...props
+        }
+      )
+    }
+  ) })
+);
+ContextMenuContent.displayName = "ContextMenuContent";
+const ContextMenuItem = React__namespace.forwardRef(
+  ({ className, inset, variant = "default", onSelect, onClick, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    contextMenu.ContextMenu.Item,
+    {
+      ref,
+      "data-inset": inset ? "" : void 0,
+      "data-variant": variant,
+      onClick: (event) => {
+        onClick?.(event);
+        onSelect?.(event);
+      },
+      className: cn(
+        itemClass$1,
+        inset && "pl-8",
+        "data-[variant=destructive]:text-accent2 data-[variant=destructive]:hover:bg-accent2/10 data-[variant=destructive]:hover:text-accent2 data-[variant=destructive]:data-[highlighted]:bg-accent2/10 data-[variant=destructive]:data-[highlighted]:text-accent2",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ContextMenuItem.displayName = "ContextMenuItem";
+const ContextMenuCheckboxItem = React__namespace.forwardRef(
+  ({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    contextMenu.ContextMenu.CheckboxItem,
+    {
+      ref,
+      checked,
+      className: cn(itemClass$1, "w-full", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-border2 flex h-4 w-4 items-center justify-center rounded-sm", children: /* @__PURE__ */ jsxRuntime.jsx(contextMenu.ContextMenu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) }) }),
+        children
+      ]
+    }
+  )
+);
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+const ContextMenuRadioItem = React__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    contextMenu.ContextMenu.RadioItem,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-ui-smd leading-ui-sm transition-colors text-neutral4 hover:text-neutral6 focus:text-neutral6 hover:bg-surface4 focus:bg-surface4 data-[highlighted]:bg-surface4 data-[highlighted]:text-neutral6 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent data-disabled:hover:text-neutral4 data-disabled:focus:bg-transparent data-disabled:focus:text-neutral4 data-disabled:data-[highlighted]:bg-transparent data-disabled:data-[highlighted]:text-neutral4 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(contextMenu.ContextMenu.RadioItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  )
+);
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+const ContextMenuLabel = React__namespace.forwardRef(
+  ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "px-2 pt-1.5 pb-1 text-ui-xs font-medium uppercase tracking-wider text-neutral3",
+        inset && "pl-8",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ContextMenuLabel.displayName = "ContextMenuLabel";
+const ContextMenuSeparator = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(contextMenu.ContextMenu.Separator, { ref, className: cn("bg-border1 -mx-1 my-1 h-px", className), ...props })
+);
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+const ContextMenuShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+const ContextMenuSubTrigger = React__namespace.forwardRef(
+  ({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    contextMenu.ContextMenu.SubmenuTrigger,
+    {
+      ref,
+      className: cn(
+        itemClass$1,
+        "data-[popup-open]:bg-surface4 data-[popup-open]:text-neutral6",
+        inset && "pl-8",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pl-2", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "-rotate-90 opacity-50" }) })
+      ]
+    }
+  )
+);
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+const ContextMenuSubContent = React__namespace.forwardRef(
+  ({ className, align = "start", alignOffset = -4, side = "right", sideOffset = -4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(contextMenu.ContextMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    contextMenu.ContextMenu.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        contextMenu.ContextMenu.Popup,
+        {
+          ref,
+          "data-slot": "context-menu-sub-content",
+          className: cn(popupClass$1, className),
+          ...props
+        }
+      )
+    }
+  ) })
+);
+ContextMenuSubContent.displayName = "ContextMenuSubContent";
+function ContextMenu({
+  open,
+  defaultOpen,
+  onOpenChange,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuRoot, { open, defaultOpen, onOpenChange, children });
+}
+ContextMenu.Trigger = ContextMenuTrigger;
+ContextMenu.Content = ContextMenuContent;
+ContextMenu.Group = ContextMenuGroup;
+ContextMenu.Portal = ContextMenuPortal;
+ContextMenu.Item = ContextMenuItem;
+ContextMenu.CheckboxItem = ContextMenuCheckboxItem;
+ContextMenu.RadioItem = ContextMenuRadioItem;
+ContextMenu.Label = ContextMenuLabel;
+ContextMenu.Separator = ContextMenuSeparator;
+ContextMenu.Shortcut = ContextMenuShortcut;
+ContextMenu.Sub = ContextMenuSub;
+ContextMenu.SubContent = ContextMenuSubContent;
+ContextMenu.SubTrigger = ContextMenuSubTrigger;
+ContextMenu.RadioGroup = ContextMenuRadioGroup;
+
 function isSelectItem(node) {
   return React__namespace.isValidElement(node) && node.type?.displayName === "SelectItem";
 }
@@ -6839,20 +7035,21 @@ const tabListVariants = cva("flex items-center relative text-ui-lg", {
     variant: "line"
   }
 });
-const TabList = ({ children, className, variant, sticky }) => {
+const TabList = ({ children, className, variant, sticky, style }) => {
   const resolvedVariant = variant ?? "line";
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", sticky && "sticky top-0 z-10 bg-surface2"), children: /* @__PURE__ */ jsxRuntime.jsxs(
     tabs.Tabs.List,
     {
       "data-variant": resolvedVariant,
       className: cn("group/tabs-list", tabListVariants({ variant: resolvedVariant }), className),
+      style,
       children: [
         children,
         resolvedVariant === "line" && /* @__PURE__ */ jsxRuntime.jsx(
           tabs.Tabs.Indicator,
           {
             className: cn(
-              "absolute bottom-0 left-0 bg-neutral3",
+              "absolute bottom-0 left-0 bg-[var(--tab-indicator-color,var(--neutral3))]",
               "w-[var(--active-tab-width)] h-0.5",
               "transition-all duration-200 ease-in-out"
             ),
@@ -6863,7 +7060,7 @@ const TabList = ({ children, className, variant, sticky }) => {
           tabs.Tabs.Indicator,
           {
             className: cn(
-              "absolute top-1/2 left-0 z-0 rounded-full bg-surface4",
+              "absolute top-1/2 left-0 z-0 rounded-full bg-[var(--tab-indicator-color,var(--surface4))]",
               "w-[var(--active-tab-width)] h-[calc(100%-0.5rem)]",
               "transition-all duration-200 ease-in-out"
             ),
@@ -9272,7 +9469,14 @@ const searchbarSizeClasses = {
   lg: formElementSizes.lg,
   default: formElementSizes.default
 };
-const Searchbar = ({ onSearch, label, placeholder, debounceMs = 300, size = "md" }) => {
+const Searchbar = ({
+  onSearch,
+  label,
+  placeholder,
+  debounceMs = 300,
+  size = "md",
+  className
+}) => {
   const id = React.useId();
   const inputRef = React.useRef(null);
   const debouncedSearch = useDebounce.useDebouncedCallback((value) => {
@@ -9309,7 +9513,8 @@ const Searchbar = ({ onSearch, label, placeholder, debounceMs = 300, size = "md"
         formElementFocusWithin,
         transitions.all,
         "hover:border-neutral2",
-        searchbarSizeClasses[size]
+        searchbarSizeClasses[size],
+        className
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: cn("text-neutral3 h-4 w-4", transitions.colors) }),
@@ -15751,7 +15956,7 @@ const isValidJson = (str) => {
   }
 };
 
-const stringToColor = (str, lightness = 75, saturation = 100) => {
+const stringToColor = (str, lightness = 90, saturation = 100) => {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
     hash = str.charCodeAt(i) + ((hash << 5) - hash);
@@ -22204,6 +22409,7 @@ exports.CommandShortcut = CommandShortcut;
 exports.CommitIcon = CommitIcon;
 exports.ContentBlock = ContentBlock;
 exports.ContentBlocks = ContentBlocks;
+exports.ContextMenu = ContextMenu;
 exports.CopyButton = CopyButton;
 exports.CrossIcon = CrossIcon;
 exports.Crumb = Crumb;