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

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @mastra/playground-ui
 
+## 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" })
         }
       )
     }
@@ -11925,13 +12069,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 +22540,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 +22804,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;