@mastra/playground-ui 31.0.0-alpha.4 → 31.0.0-alpha.6

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @mastra/playground-ui
 
+## 31.0.0-alpha.6
+
+### Patch Changes
+
+- Agent Builder starter agents now use the admin-configured default model when the model policy has one set. Previously, the starter ignored the admin default and always picked the first entry from the picker allowlist, which surfaced as "default model gets over-written by agent builder" on agents created from starter cards or the freeform prompt. ([#17424](https://github.com/mastra-ai/mastra/pull/17424))
+
+  When no admin default is set, behavior is unchanged: the starter falls back to the first allowed model, then to the hardcoded fallback.
+
+- Improved switch focus, disabled, and motion states. ([#17416](https://github.com/mastra-ai/mastra/pull/17416))
+
+- Updated dependencies [[`860ec4e`](https://github.com/mastra-ai/mastra/commit/860ec4edf6aa508edfd4f34c312c141209eb0dbf), [`bb3fce8`](https://github.com/mastra-ai/mastra/commit/bb3fce8f8d80079170c0f98cb2efbb29ae34375d), [`19a8658`](https://github.com/mastra-ai/mastra/commit/19a86589c788ef48bb6c1b0612cc82a201857379), [`a659a77`](https://github.com/mastra-ai/mastra/commit/a659a779bdebe3a52a518c56d2260592d0240fe0), [`3332be9`](https://github.com/mastra-ai/mastra/commit/3332be9701ecd77aba840959d9a1d1ce7aef02d3), [`05d61e1`](https://github.com/mastra-ai/mastra/commit/05d61e18aa014a012a32ee9cb79cdcf3210dbe9d)]:
+  - @mastra/react@0.4.3-alpha.6
+  - @mastra/client-js@1.22.0-alpha.6
+  - @mastra/core@1.38.0-alpha.6
+
+## 31.0.0-alpha.5
+
+### Patch Changes
+
+- Improved studio load time by only bundling the CodeMirror and Shiki languages the editor actually uses, and removed a redundant TypeScript pass from the playground-ui build. ([#17406](https://github.com/mastra-ai/mastra/pull/17406))
+
+- Improved RadioGroup styling with neutral selected states, cleaner focus outlines, and surface-aware disabled states. ([#17401](https://github.com/mastra-ai/mastra/pull/17401))
+
+- Removed the unused `ElementSelect` export from `@mastra/playground-ui`. Use the `Select` primitives instead. ([#17417](https://github.com/mastra-ai/mastra/pull/17417))
+
+  ```tsx
+  // Before
+  import { ElementSelect } from '@mastra/playground-ui';
+
+  <ElementSelect name="status" value={status} onChange={setStatus} options={['Draft', 'Published']} />;
+
+  // After
+  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@mastra/playground-ui';
+
+  <Select name="status" value={status} onValueChange={setStatus}>
+    <SelectTrigger>
+      <SelectValue placeholder="Select..." />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="draft">Draft</SelectItem>
+      <SelectItem value="published">Published</SelectItem>
+    </SelectContent>
+  </Select>;
+  ```
+
+- Improved Checkbox styling with neutral selected states, cleaner focus outlines, and smoother state transitions. ([#17400](https://github.com/mastra-ai/mastra/pull/17400))
+
+- Updated dependencies [[`a18775a`](https://github.com/mastra-ai/mastra/commit/a18775a693172546ee2378d39b67d4e32895b251), [`1baf2d1`](https://github.com/mastra-ai/mastra/commit/1baf2d152c6881338ff8f114633d5316fe13dd15), [`309f7c9`](https://github.com/mastra-ai/mastra/commit/309f7c9899ee6870a07a16690a091c6ba7af4e1e), [`66d65f5`](https://github.com/mastra-ai/mastra/commit/66d65f58e4b1f862c7f7928866a4426f8de9d583)]:
+  - @mastra/core@1.38.0-alpha.5
+  - @mastra/client-js@1.22.0-alpha.5
+  - @mastra/react@0.4.3-alpha.5
+
 ## 31.0.0-alpha.4
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -9,7 +9,6 @@ const tooltip = require('@base-ui/react/tooltip');
 const langJson = require('@codemirror/lang-json');
 const langMarkdown = require('@codemirror/lang-markdown');
 const language = require('@codemirror/language');
-const languageData = require('@codemirror/language-data');
 const state = require('@codemirror/state');
 const view = require('@codemirror/view');
 const highlight$1 = require('@lezer/highlight');
@@ -3745,6 +3744,66 @@ const Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
+function legacy(parser) {
+  return new language.LanguageSupport(language.StreamLanguage.define(parser));
+}
+const codeLanguages = [
+  language.LanguageDescription.of({
+    name: "JavaScript",
+    alias: ["ecmascript", "js", "node"],
+    extensions: ["js", "mjs", "cjs"],
+    load() {
+      return import('@codemirror/lang-javascript').then((m) => m.javascript());
+    }
+  }),
+  language.LanguageDescription.of({
+    name: "JSON",
+    alias: ["json5"],
+    extensions: ["json", "map"],
+    load() {
+      return import('@codemirror/lang-json').then((m) => m.json());
+    }
+  }),
+  language.LanguageDescription.of({
+    name: "JSX",
+    extensions: ["jsx"],
+    load() {
+      return import('@codemirror/lang-javascript').then((m) => m.javascript({ jsx: true }));
+    }
+  }),
+  language.LanguageDescription.of({
+    name: "Markdown",
+    extensions: ["md", "markdown", "mkd"],
+    load() {
+      return import('@codemirror/lang-markdown').then((m) => m.markdown());
+    }
+  }),
+  language.LanguageDescription.of({
+    name: "TSX",
+    extensions: ["tsx"],
+    load() {
+      return import('@codemirror/lang-javascript').then((m) => m.javascript({ jsx: true, typescript: true }));
+    }
+  }),
+  language.LanguageDescription.of({
+    name: "TypeScript",
+    alias: ["ts"],
+    extensions: ["ts", "mts", "cts"],
+    load() {
+      return import('@codemirror/lang-javascript').then((m) => m.javascript({ typescript: true }));
+    }
+  }),
+  language.LanguageDescription.of({
+    name: "Shell",
+    alias: ["bash", "sh", "zsh"],
+    extensions: ["sh", "ksh", "bash"],
+    filename: /^PKGBUILD$/,
+    load() {
+      return import('@codemirror/legacy-modes/mode/shell').then((m) => legacy(m.shell));
+    }
+  })
+];
+
 function flattenSchemaToVariables(schema, maxDepth = 5) {
   if (!schema?.properties) {
     return [];
@@ -4273,7 +4332,7 @@ const CodeEditor = React.forwardRef(
       if (language === "json") {
         exts.push(langJson.jsonLanguage);
       } else if (language === "markdown") {
-        exts.push(langMarkdown.markdown({ base: langMarkdown.markdownLanguage, codeLanguages: languageData.languages }));
+        exts.push(langMarkdown.markdown({ base: langMarkdown.markdownLanguage, codeLanguages }));
         exts.push(view.EditorView.lineWrapping);
       }
       if (highlightVariables && language === "markdown") {
@@ -4316,11 +4375,59 @@ const CodeEditor = React.forwardRef(
     );
   }
 );
+
+const langAliases = {
+  js: "javascript",
+  javascript: "javascript",
+  mjs: "javascript",
+  cjs: "javascript",
+  node: "javascript",
+  ts: "typescript",
+  typescript: "typescript",
+  mts: "typescript",
+  cts: "typescript",
+  tsx: "tsx",
+  jsx: "jsx",
+  json: "json",
+  json5: "json",
+  md: "markdown",
+  markdown: "markdown",
+  sh: "bash",
+  bash: "bash",
+  shell: "bash",
+  zsh: "bash"
+};
+let highlighterPromise = null;
+function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = (async () => {
+      const [{ createHighlighterCore }, { createJavaScriptRegexEngine }] = await Promise.all([
+        import('shiki/core'),
+        import('shiki/engine/javascript')
+      ]);
+      return createHighlighterCore({
+        themes: [import('shiki/themes/github-light.mjs'), import('shiki/themes/github-dark.mjs')],
+        langs: [
+          import('shiki/langs/javascript.mjs'),
+          import('shiki/langs/typescript.mjs'),
+          import('shiki/langs/tsx.mjs'),
+          import('shiki/langs/jsx.mjs'),
+          import('shiki/langs/json.mjs'),
+          import('shiki/langs/bash.mjs'),
+          import('shiki/langs/markdown.mjs')
+        ],
+        engine: createJavaScriptRegexEngine()
+      });
+    })();
+  }
+  return highlighterPromise;
+}
 async function highlight(code, language) {
-  const { codeToTokens, bundledLanguages } = await import('shiki');
-  if (!(language in bundledLanguages)) return null;
-  const { tokens } = await codeToTokens(code, {
-    lang: language,
+  const lang = langAliases[language?.toLowerCase()];
+  if (!lang) return null;
+  const highlighter = await getHighlighter();
+  const { tokens } = highlighter.codeToTokens(code, {
+    lang,
     defaultColor: false,
     themes: {
       light: "github-light",
@@ -6173,28 +6280,38 @@ const Checkbox = React__namespace.forwardRef(
         ref,
         checked: isCheckedIndeterminate ? false : checked,
         indeterminate: indeterminate ?? isCheckedIndeterminate,
+        "data-slot": "checkbox",
         className: cn(
-          "peer h-4 w-4 shrink-0 rounded-sm border border-neutral3",
-          "flex items-center justify-center",
-          "shadow-sm",
+          "peer flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-[0.3125rem]",
+          "border border-neutral6/[0.06] bg-neutral6/[0.12] text-surface1 outline-hidden",
           transitions.all,
-          "hover:border-neutral5 hover:shadow-md",
-          formElementFocus,
-          // Base UI's Checkbox.Root is a `<span>`, so `:disabled` never matches — target `data-disabled`.
-          "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:border-neutral3 data-[disabled]:hover:shadow-sm",
-          "data-[checked]:bg-accent1 data-[checked]:border-accent1 data-[checked]:text-surface1",
-          "data-[indeterminate]:bg-accent1 data-[indeterminate]:border-accent1 data-[indeterminate]:text-surface1",
-          "data-[checked]:shadow-glow-accent1 data-[indeterminate]:shadow-glow-accent1",
+          "hover:border-neutral6/[0.12] hover:bg-neutral6/[0.16]",
+          "active:scale-95 active:border-neutral6/[0.18] active:bg-neutral6/[0.18]",
+          "focus-visible:border-neutral5/50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55",
+          "data-[checked]:border-neutral6 data-[checked]:bg-neutral6 data-[checked]:text-surface1",
+          "data-[indeterminate]:border-neutral6 data-[indeterminate]:bg-neutral6 data-[indeterminate]:text-surface1",
+          "data-[checked]:hover:border-neutral5 data-[checked]:hover:bg-neutral5",
+          "data-[indeterminate]:hover:border-neutral5 data-[indeterminate]:hover:bg-neutral5",
+          "data-[checked]:active:border-neutral4 data-[checked]:active:bg-neutral4",
+          "data-[indeterminate]:active:border-neutral4 data-[indeterminate]:active:bg-neutral4",
+          // Base UI's Checkbox.Root is a `<span>`, so `:disabled` never matches; target `data-disabled`.
+          "data-[disabled]:cursor-not-allowed data-[disabled]:border-neutral6/[0.38] data-[disabled]:bg-neutral6/[0.38] data-[disabled]:hover:border-neutral6/[0.38] data-[disabled]:hover:bg-neutral6/[0.38] data-[disabled]:active:scale-100",
+          "data-[disabled]:data-[checked]:border-neutral6/[0.38] data-[disabled]:data-[checked]:bg-neutral6/[0.38] data-[disabled]:data-[checked]:text-neutral6",
+          "data-[disabled]:data-[indeterminate]:border-neutral6/[0.38] data-[disabled]:data-[indeterminate]:bg-neutral6/[0.38] data-[disabled]:data-[indeterminate]:text-neutral6",
           className
         ),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           checkbox.Checkbox.Indicator,
           {
+            keepMounted: true,
             className: cn(
               "group/checkbox-indicator flex items-center justify-center text-current",
-              "data-[checked]:animate-in data-[checked]:zoom-in-50 data-[checked]:duration-150",
-              "data-[indeterminate]:animate-in data-[indeterminate]:zoom-in-50 data-[indeterminate]:duration-150"
+              "opacity-0 scale-75 transition-[opacity,transform] duration-200 ease-out-custom",
+              "data-[checked]:opacity-100 data-[checked]:scale-100",
+              "data-[indeterminate]:opacity-100 data-[indeterminate]:scale-100",
+              "data-[starting-style]:opacity-0 data-[starting-style]:scale-75",
+              "data-[ending-style]:opacity-0 data-[ending-style]:scale-75"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndicatorIcon, {})
           }
@@ -6206,8 +6323,30 @@ const Checkbox = React__namespace.forwardRef(
 Checkbox.displayName = "Checkbox";
 function CheckboxIndicatorIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 stroke-3 group-data-[indeterminate]/checkbox-indicator:hidden" }),
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "hidden h-3.5 w-3.5 stroke-3 group-data-[indeterminate]/checkbox-indicator:block" })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.Check,
+      {
+        className: cn(
+          "size-3 scale-95 stroke-[3.25] transition-[stroke-dashoffset,transform] duration-200 ease-out-custom",
+          // Lucide's check path is ~22.6 units long. Use a longer dash so the
+          // final checked mark is never clipped.
+          "[stroke-dasharray:28] [stroke-dashoffset:28]",
+          "group-data-[checked]/checkbox-indicator:[stroke-dashoffset:0]",
+          "group-data-[checked]/checkbox-indicator:scale-100",
+          "group-data-[indeterminate]/checkbox-indicator:hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.Minus,
+      {
+        className: cn(
+          "hidden size-3 scale-95 stroke-[3.25] transition-transform duration-200 ease-out-custom",
+          "group-data-[indeterminate]/checkbox-indicator:block",
+          "group-data-[indeterminate]/checkbox-indicator:scale-100"
+        )
+      }
+    )
   ] });
 }
 
@@ -8732,7 +8871,7 @@ const ButtonsGroupText = React__namespace.forwardRef(
 ButtonsGroupText.displayName = "ButtonsGroupText";
 
 const RadioGroup = React__namespace.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(radioGroup.RadioGroup, { ref, className: cn("grid gap-2", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(radioGroup.RadioGroup, { ref, "data-slot": "radio-group", className: cn("grid gap-2", className), ...props });
 });
 RadioGroup.displayName = "RadioGroup";
 const RadioGroupItem = React__namespace.forwardRef(({ className, ...props }, ref) => {
@@ -8740,31 +8879,36 @@ const RadioGroupItem = React__namespace.forwardRef(({ className, ...props }, ref
     radio.Radio.Root,
     {
       ref,
+      "data-slot": "radio-group-item",
       className: cn(
-        // Base UI's Radio.Root renders a `<span>` (inline) — unlike Radix's
-        // `<button>`. `flex` + `shrink-0` make the sizing/centering classes
-        // take effect and keep the control square inside flex rows.
-        "flex shrink-0 items-center justify-center",
-        "aspect-square h-4 w-4 rounded-full border border-neutral3 text-neutral6",
-        "shadow-sm",
+        "flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-full",
+        "border border-neutral6/[0.06] bg-neutral6/[0.12] text-surface1 outline-hidden",
         transitions.all,
-        "hover:border-neutral5 hover:shadow-md",
-        formElementFocus,
-        // Base UI's Radio.Root is a `<span>`, so `:disabled` never matches — target `data-disabled`.
-        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:border-neutral3 data-[disabled]:hover:shadow-sm",
+        "hover:border-neutral6/[0.12] hover:bg-neutral6/[0.16]",
+        "active:scale-95 active:border-neutral6/[0.18] active:bg-neutral6/[0.18]",
+        "focus-visible:border-neutral5/50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55",
         // Base UI exposes `data-checked`/`data-unchecked` instead of Radix's `data-state`.
-        "data-[checked]:border-accent1 data-[checked]:shadow-glow-accent1",
+        "data-[checked]:border-neutral6 data-[checked]:bg-neutral6 data-[checked]:text-surface1",
+        "data-[checked]:hover:border-neutral5 data-[checked]:hover:bg-neutral5",
+        "data-[checked]:active:border-neutral4 data-[checked]:active:bg-neutral4",
+        // Base UI's Radio.Root is a `<span>`, so `:disabled` never matches; target `data-disabled`.
+        "data-[disabled]:cursor-not-allowed data-[disabled]:border-neutral6/[0.38] data-[disabled]:bg-neutral6/[0.38] data-[disabled]:hover:border-neutral6/[0.38] data-[disabled]:hover:bg-neutral6/[0.38] data-[disabled]:active:scale-100",
+        "data-[disabled]:data-[checked]:border-neutral6/[0.38] data-[disabled]:data-[checked]:bg-neutral6/[0.38] data-[disabled]:data-[checked]:text-neutral6",
         className
       ),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         radio.Radio.Indicator,
         {
+          keepMounted: true,
           className: cn(
-            "flex items-center justify-center",
-            "data-[checked]:animate-in data-[checked]:zoom-in-50 data-[checked]:duration-150"
+            "flex items-center justify-center text-current",
+            "scale-50 opacity-0 transition-[opacity,scale] duration-200 ease-out-custom",
+            "data-[checked]:scale-100 data-[checked]:opacity-100",
+            "data-[starting-style]:scale-50 data-[starting-style]:opacity-0",
+            "data-[ending-style]:scale-50 data-[ending-style]:opacity-0"
           ),
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-accent1 text-accent1" })
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1.5 rounded-full bg-current" })
         }
       )
     }
@@ -9811,13 +9955,16 @@ const Switch = React__namespace.forwardRef(({ className, asChild, children, ...p
       ref,
       "data-slot": "switch",
       className: cn(
-        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
-        transitions.all,
-        formElementFocus,
-        "hover:brightness-110",
-        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:brightness-100",
-        "data-[checked]:bg-accent1 data-[checked]:shadow-glow-accent1",
-        "data-[unchecked]:bg-neutral2",
+        "peer group/switch inline-flex h-5 w-9 shrink-0 cursor-pointer items-center overflow-hidden rounded-full border-0 bg-neutral6/[0.14] p-0.5 outline-hidden",
+        "transition-colors duration-normal ease-out-custom motion-reduce:transition-none",
+        "hover:bg-neutral6/[0.18]",
+        "active:bg-neutral6/[0.22]",
+        "focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55",
+        "data-[checked]:bg-neutral6/[0.92]",
+        "data-[checked]:hover:bg-neutral6",
+        "data-[checked]:active:bg-neutral5",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:bg-neutral6/[0.16] data-[disabled]:hover:bg-neutral6/[0.16]",
+        "data-[disabled]:data-[checked]:bg-neutral6/[0.3] data-[disabled]:data-[checked]:hover:bg-neutral6/[0.3]",
         className
       ),
       ...renderProps,
@@ -9827,11 +9974,14 @@ const Switch = React__namespace.forwardRef(({ className, asChild, children, ...p
         /* @__PURE__ */ jsxRuntime.jsx(
           _switch.Switch.Thumb,
           {
+            "data-slot": "switch-thumb",
             className: cn(
-              "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-md",
-              "transition-all duration-normal ease-out-custom",
-              "data-[checked]:translate-x-4 data-[unchecked]:translate-x-0",
-              "data-[checked]:shadow-lg"
+              "switch-thumb-motion pointer-events-none block h-4 w-5 rounded-full bg-neutral6",
+              "transition-[background-color,translate,width,transform] duration-normal ease-out-custom motion-reduce:transition-none",
+              "group-active/switch:w-6 group-data-[disabled]/switch:w-5",
+              "data-[checked]:translate-x-3 data-[checked]:bg-surface1 data-[unchecked]:translate-x-0",
+              "group-active/switch:data-[checked]:translate-x-2",
+              "data-[disabled]:data-[unchecked]:bg-neutral6/[0.42] data-[disabled]:data-[checked]:bg-surface1/80"
             )
           }
         )
@@ -11925,13 +12075,6 @@ function SectionCard({
   );
 }
 
-function ElementSelect({ name, onChange, value, options, placeholder }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Select, { name, onValueChange: onChange, value, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: placeholder || "Select..." }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: (options || []).map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: `${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 [&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:text-neutral3", children: option }) }, option)) })
-  ] });
-}
-
 function SettingsRow({ label, description, htmlFor, className, children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -22403,7 +22546,6 @@ exports.DrawerTrigger = DrawerTrigger;
 exports.DrawerViewport = DrawerViewport;
 exports.DropdownMenu = DropdownMenu;
 exports.EXTENSION_TO_MIME = EXTENSION_TO_MIME;
-exports.ElementSelect = ElementSelect;
 exports.EmptyState = EmptyState;
 exports.Entity = Entity;
 exports.EntityContent = EntityContent;
@@ -22668,6 +22810,7 @@ exports.clearSavedLogsFilters = clearSavedLogsFilters;
 exports.clearSavedMetricsFilters = clearSavedMetricsFilters;
 exports.clearSavedTraceFilters = clearSavedTraceFilters;
 exports.cn = cn;
+exports.codeLanguages = codeLanguages;
 exports.comboboxStyles = comboboxStyles;
 exports.countLeafRules = countLeafRules;
 exports.createDefaultRule = createDefaultRule;