@mastra/playground-ui 33.0.0-alpha.4 → 33.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/CHANGELOG.md +174 -0
  2. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,179 @@
1
1
  # @mastra/playground-ui
2
2
 
3
+ ## 33.0.0
4
+
5
+ ### Minor Changes
6
+
7
+ - Added shared chat loading and tool card components to the playground UI package. ([#17774](https://github.com/mastra-ai/mastra/pull/17774))
8
+
9
+ - Added per-component entrypoints under `@mastra/playground-ui/components/*` and enabled tree-shaking via the `sideEffects` field. ([#17740](https://github.com/mastra-ai/mastra/pull/17740))
10
+
11
+ **New per-component entrypoints**
12
+
13
+ Every design-system component can now be imported directly, without going through the root barrel:
14
+
15
+ ```ts
16
+ import { Button } from '@mastra/playground-ui/components/Button';
17
+ ```
18
+
19
+ The root `@mastra/playground-ui` import keeps working unchanged — this change is purely additive. Deep imports let bundlers pull in only the components you use instead of the whole library.
20
+
21
+ **Better tree-shaking**
22
+
23
+ The package now declares `"sideEffects": ["**/*.css"]`, so bundlers can drop unused re-exports even for apps that keep importing from the root barrel. The CSS contract is unchanged: import `@mastra/playground-ui/style.css` once, then import components from any subpath.
24
+
25
+ - Removed legacy raw font-name aliases from playground UI theme tokens. Consumers should use `--font-display`, `--font-body`, and `--font-mono` directly. ([#17707](https://github.com/mastra-ai/mastra/pull/17707))
26
+
27
+ - Redesigned resize handles across the studio. The sidebar and panel separators now show a subtle gradient line that fades in on hover and stays visible for the whole drag — including when the sidebar is collapsed to icons and the cursor moves away from the handle (the handle now captures the pointer during the gesture). `PanelSeparator` accepts a new `variant` prop: `line` (default) fits panels with a visible container edge, `pill` shows a floating pill for panels without one. ([#17823](https://github.com/mastra-ai/mastra/pull/17823))
28
+
29
+ ```tsx
30
+ <PanelSeparator /> // gradient line (default)
31
+ <PanelSeparator variant="pill" /> // floating pill
32
+ ```
33
+
34
+ - Added native switch thumb icons so checked and unchecked states can show their own icon without custom overlay code. ([#17569](https://github.com/mastra-ai/mastra/pull/17569))
35
+
36
+ - Added a Download trace JSON button to the trace detail panel in Studio. It saves the entire trace — every span with its full input, output, metadata, and attributes — to a `trace-<id>.json` file, so you can share a trace, attach it to a bug report, or build an eval dataset offline. Previously only individual IDs and per-section values could be copied. ([#17752](https://github.com/mastra-ai/mastra/pull/17752))
37
+
38
+ - Improved code rendering in the design system so `CodeBlock` is the canonical surface for static code. ([#17430](https://github.com/mastra-ai/mastra/pull/17430))
39
+
40
+ **Fixed** syntax-highlighted code to follow light and dark mode by default. Token colors are now resolved in CSS from the active theme class instead of JavaScript, so highlighted code works without a `ThemeProvider`.
41
+
42
+ **Added** a low-level `Code` component, now shared by `CodeBlock` and `MarkdownRenderer` and exported for custom code surfaces:
43
+
44
+ ```tsx
45
+ import { Code } from '@mastra/playground-ui';
46
+
47
+ <Code code="pnpm dlx mastra init" lang="bash" />;
48
+ ```
49
+
50
+ **Added** an `overflow` prop to `CodeBlock`. Use the default `wrap` for commands and snippets, and `scroll` for source code where preserving columns matters:
51
+
52
+ ```tsx
53
+ <CodeBlock code={source} lang="typescript" overflow="scroll" />
54
+ ```
55
+
56
+ **Added** Python syntax highlighting support.
57
+
58
+ - Added a new `@mastra/playground-ui/theme.css` export and made the Mastra brand green a built-in color. ([#17668](https://github.com/mastra-ai/mastra/pull/17668))
59
+
60
+ **New theme.css export**
61
+
62
+ You can now import the design tokens as raw CSS:
63
+
64
+ ```css
65
+ @import 'tailwindcss';
66
+ @import '@mastra/playground-ui/theme.css'; /* design tokens */
67
+ @import '@mastra/playground-ui/style.css'; /* component styles */
68
+ ```
69
+
70
+ Before, apps had to copy every token into their own `@theme` block so Tailwind would generate the matching utility classes (like `bg-surface1` or `text-neutral4`). Now your app's Tailwind reads the tokens from this file directly. This is the same pattern as `tailwindcss/theme.css`, and it keeps the tokens defined in one place.
71
+
72
+ **Brand green and chart colors**
73
+
74
+ The `green-*` classes now use the Mastra brand green (in both light and dark mode) instead of Tailwind's default green. New `--chart-1` through `--chart-5` colors are also available for charts. If you used the stock Tailwind green before, the new green looks a bit more vivid.
75
+
76
+ - Added role-based semantic font tokens so consumers can swap fonts in one declaration. Components now reference `--font-display` (headlines, brand) and `--font-body` (UI, paragraphs) instead of type-based `--font-sans` / `--font-serif`. Existing utilities keep working through backward-compat aliases (`--font-sans` → `--font-body`, `--font-serif` → `--font-display`). ([#16265](https://github.com/mastra-ai/mastra/pull/16265))
77
+
78
+ **Override fonts in your app**
79
+
80
+ ```css
81
+ :root {
82
+ --font-display: 'Inter', system-ui, sans-serif;
83
+ --font-body: 'Inter', system-ui, sans-serif;
84
+ --font-mono: 'Commit Mono', ui-monospace, monospace;
85
+ }
86
+ ```
87
+
88
+ **Backward-compat for existing consumers** — the legacy raw font-name vars `--geist-mono`, `--font-inter`, `--tasa-explorer` continue to resolve via aliases to the semantic tokens, so any `font-family: var(--geist-mono)` keeps working without code changes. New code should reference `var(--font-mono)` directly.
89
+
90
+ The package no longer ships font files — defaults are system fonts. Bring your own fonts via `@font-face` in your app and override the tokens above.
91
+
92
+ - **Added an `xs` size** to Button, Input, Select, and InputGroup for compact, dense layouts. ([#17675](https://github.com/mastra-ai/mastra/pull/17675))
93
+
94
+ ```tsx
95
+ <Button size="xs">Compact</Button>
96
+ <Input size="xs" />
97
+ ```
98
+
99
+ **Unified the keyboard-focus look across controls.** Buttons now show the same subtle border highlight on focus as inputs and selects, instead of a green ring, so a row of buttons, inputs, and selects feels consistent.
100
+
101
+ **Made Select and Combobox triggers match buttons.** They are now pill-shaped and reuse the Button styling, so a select reads like a button with a dropdown arrow. Their field-safe visual variants are `default` (filled, used by default), `outline`, and `ghost` — the same looks as buttons, minus the high-emphasis `primary`. Since `default` is the default, you only pass a `variant` to switch to `outline` or `ghost`. Legacy `SelectTrigger variant="primary"` and `Combobox variant="link"` are still accepted for source compatibility, but render as the closest field-safe look. MultiCombobox's `variant` now works (it previously had no effect).
102
+
103
+ **Deprecated `asChild`** on the DropdownMenu, Dialog, AlertDialog, and Popover triggers (and DialogClose). Pass your element to the `render` prop instead. `asChild` still works for now.
104
+
105
+ ```tsx
106
+ // Before
107
+ <DropdownMenu.Trigger asChild>
108
+ <Button>Open</Button>
109
+ </DropdownMenu.Trigger>
110
+
111
+ // After
112
+ <DropdownMenu.Trigger render={<Button>Open</Button>} />
113
+ ```
114
+
115
+ - Added a token-usage-over-time timeline to the Studio metrics dashboard, showing input/output tokens per day and cost, filterable by agent and workflow. ([#17686](https://github.com/mastra-ai/mastra/pull/17686))
116
+
117
+ ### Patch Changes
118
+
119
+ - Removed the generic tool card from the shared playground UI package. ([#17774](https://github.com/mastra-ai/mastra/pull/17774))
120
+
121
+ - Removed an unused assistant UI dependency from the playground UI package. ([#17774](https://github.com/mastra-ai/mastra/pull/17774))
122
+
123
+ - Fixed combobox keyboard selection after filtering so pressing Enter chooses the first matching option. ([#17772](https://github.com/mastra-ai/mastra/pull/17772))
124
+
125
+ - Removed the `default` Button size. Buttons now use `md` when no size is provided, and the previous `default` styling is available as `lg`. ([#17778](https://github.com/mastra-ai/mastra/pull/17778))
126
+
127
+ **Migration**
128
+
129
+ Before:
130
+
131
+ ```tsx
132
+ <Button size="default">Save</Button>
133
+ ```
134
+
135
+ After:
136
+
137
+ ```tsx
138
+ <Button size="lg">Save</Button>
139
+ ```
140
+
141
+ Use `size="md"` or omit `size` for the new default Button size.
142
+
143
+ - Fixed the Studio Metrics **Latency** card drilldown, which was a silent no-op on all three tabs (Agents, Workflows, Tools). The view-level click guard and the container-level navigation handler both read a `rawTimestamp` field that the hook never produces; the only timestamp on a `LatencyPoint` is `tsMs`. Clicking a chart point now correctly navigates to the Traces page filtered to the 1-hour bucket and the entity type of the active tab. ([#17704](https://github.com/mastra-ai/mastra/pull/17704))
144
+
145
+ - Added an optional `data-testid` prop to the Breadcrumb `Crumb` so individual crumbs can be targeted in tests and automation. ([#17687](https://github.com/mastra-ai/mastra/pull/17687))
146
+
147
+ - Improved DataList pagination controls, row and header separators, wrapped-row spacing, text truncation, horizontal overflow handling, and empty-cell rendering. ([#17718](https://github.com/mastra-ai/mastra/pull/17718))
148
+
149
+ - Removed five rarely-used components from the root barrel export. `SettingsRow`, `PrevNextNav`, `MetricsKpiCard`, `SideDialog`, and `ContextMenu` must now be imported from their per-component entrypoints (added in v33.1): ([#17753](https://github.com/mastra-ai/mastra/pull/17753))
150
+
151
+ ```ts
152
+ // before
153
+ import { SettingsRow, SideDialog, type SideDialogRootProps } from '@mastra/playground-ui';
154
+
155
+ // after
156
+ import { SettingsRow } from '@mastra/playground-ui/components/SettingsRow';
157
+ import { SideDialog, type SideDialogRootProps } from '@mastra/playground-ui/components/SideDialog';
158
+ ```
159
+
160
+ This is the first step of gradually slimming down the root barrel so apps only load the components they use. All other root exports are unchanged.
161
+
162
+ - Removed an unnecessary overflow clip on the Switch track so thumb motion effects are no longer cut off at the edges ([#17822](https://github.com/mastra-ai/mastra/pull/17822))
163
+
164
+ - Removed the right padding on the agent memory sidebar so it sits flush against the panel resize handle. ([#17823](https://github.com/mastra-ai/mastra/pull/17823))
165
+
166
+ - Fixed the Evaluate Trace button in Studio (Agents → Traces) doing nothing on the first click. Selecting the anchor span and opening the scoring tab now happen in a single URL update instead of two racing ones, so the scoring panel opens immediately. ([#17730](https://github.com/mastra-ai/mastra/pull/17730))
167
+
168
+ - Fixed the Agent and Workflow icon not appearing in the Traces and Logs entity column. The icon now matches the stored lowercase entity types (`agent`, `workflow_run`) instead of only uppercase values, so you can tell agent runs from workflow runs at a glance. ([#17730](https://github.com/mastra-ai/mastra/pull/17730))
169
+
170
+ - Fixed input focus borders so hovering no longer overrides the focused state. ([#17570](https://github.com/mastra-ai/mastra/pull/17570))
171
+
172
+ - Updated dependencies [[`d468acb`](https://github.com/mastra-ai/mastra/commit/d468acb07aec1bb19a2cb0ada8042b05b46746b2), [`575f815`](https://github.com/mastra-ai/mastra/commit/575f815c5c3567b71c0b83cbb7fa98c8253a9d9c), [`34839c1`](https://github.com/mastra-ai/mastra/commit/34839c1910b6964bf59ed0cee58844efebbb684e), [`053735a`](https://github.com/mastra-ai/mastra/commit/053735a75c2c18e23ce34d9468007efa4a45f4c4), [`306909a`](https://github.com/mastra-ai/mastra/commit/306909a693de77d709b38706e2673c9547d24a28), [`5191af8`](https://github.com/mastra-ai/mastra/commit/5191af80c799eea25357c545fc05d91b3883531d), [`43bd3d4`](https://github.com/mastra-ai/mastra/commit/43bd3d421987463fdf35386a45199c49499ed069), [`e6fa79e`](https://github.com/mastra-ai/mastra/commit/e6fa79ec72a2ddffdd25e85270398951e9d552a4), [`904bcdf`](https://github.com/mastra-ai/mastra/commit/904bcdf7b8004aa7be823f9f70ca63580e47e470), [`7f5ee1d`](https://github.com/mastra-ai/mastra/commit/7f5ee1dca46daee8d2817f2ebe49e6335da81956), [`1e9aab5`](https://github.com/mastra-ai/mastra/commit/1e9aab50ff11e6e88fde4d7cbf512c44a9fe8d61), [`2bccba4`](https://github.com/mastra-ai/mastra/commit/2bccba4c03cadc815c2d54cbf4dd43a922140a8d), [`4e790b0`](https://github.com/mastra-ai/mastra/commit/4e790b00c6d58c25922f5bbb5907204daec72e06), [`3abfa15`](https://github.com/mastra-ai/mastra/commit/3abfa158881ad3b187f69392cc64fe3a5aeed5c3), [`bf8eb6d`](https://github.com/mastra-ai/mastra/commit/bf8eb6d0ec213a403eb9265a594ad283c44ab3dc), [`e9be4e7`](https://github.com/mastra-ai/mastra/commit/e9be4e747ec3d8b65548bff92f9377db06105376), [`95482bf`](https://github.com/mastra-ai/mastra/commit/95482bf8a5c2b38022d4e2fee8ee07488c5f6262), [`493a328`](https://github.com/mastra-ai/mastra/commit/493a328f4346a1deeb9f1e2e44c8f2a3a4d7591b), [`d53cfc2`](https://github.com/mastra-ai/mastra/commit/d53cfc2c7f8d78343a4aa84ec4e129ba25f3325e), [`65799d4`](https://github.com/mastra-ai/mastra/commit/65799d4d549e5ebb9c848fbe3f51ac090f64becf), [`4e790b0`](https://github.com/mastra-ai/mastra/commit/4e790b00c6d58c25922f5bbb5907204daec72e06), [`c268c89`](https://github.com/mastra-ai/mastra/commit/c268c89f4c63a93ee474d3cffdf3ea60bf00d4f2), [`34839c1`](https://github.com/mastra-ai/mastra/commit/34839c1910b6964bf59ed0cee58844efebbb684e), [`014e00f`](https://github.com/mastra-ai/mastra/commit/014e00f2b3a597a016b72f9901c6ab27d491f822), [`029a414`](https://github.com/mastra-ai/mastra/commit/029a4141719793bd3e898a39eb5a0466a55f5f3a), [`d468acb`](https://github.com/mastra-ai/mastra/commit/d468acb07aec1bb19a2cb0ada8042b05b46746b2), [`b147b29`](https://github.com/mastra-ai/mastra/commit/b147b2907f0cd1aa812efe6d6e3f58d22e66fc88), [`d371ac1`](https://github.com/mastra-ai/mastra/commit/d371ac1d9820afaaf7cfdbc380a475946a994d8f), [`2bccba4`](https://github.com/mastra-ai/mastra/commit/2bccba4c03cadc815c2d54cbf4dd43a922140a8d), [`0c72f03`](https://github.com/mastra-ai/mastra/commit/0c72f032abb13254df5a7856d64be2f207b8006d), [`36df947`](https://github.com/mastra-ai/mastra/commit/36df947de2603131fd24652db61af7799a790827), [`cf182b7`](https://github.com/mastra-ai/mastra/commit/cf182b7fb495767946d9840ef29f19cfa906f31f), [`3b45ea9`](https://github.com/mastra-ai/mastra/commit/3b45ea95015557a6cb9d70dc5252af54ab1b78ac), [`a049c2a`](https://github.com/mastra-ai/mastra/commit/a049c2a9dfb41d0ee2e7a28874a88cd64fd5669f), [`f084be1`](https://github.com/mastra-ai/mastra/commit/f084be1fcbe33ad7480913e44d6130c421c0976f), [`b147b29`](https://github.com/mastra-ai/mastra/commit/b147b2907f0cd1aa812efe6d6e3f58d22e66fc88), [`65d3320`](https://github.com/mastra-ai/mastra/commit/65d3320bade087db166caff07eb461c008590ee8), [`2a96528`](https://github.com/mastra-ai/mastra/commit/2a9652848dfa3c5a2426f952e9d93554c26fd90f), [`44d2c09`](https://github.com/mastra-ai/mastra/commit/44d2c0989186b7294d624bc6dd17722bdb2dcf72), [`61f5491`](https://github.com/mastra-ai/mastra/commit/61f54912e6453cc706bb5d7df9f6c7aad78d428f), [`f2ab060`](https://github.com/mastra-ai/mastra/commit/f2ab060162bea81505fda553e2cee29c1979fd04), [`5d302c8`](https://github.com/mastra-ai/mastra/commit/5d302c8eda1a6ac74eab5e442c4f64db6cc97a06), [`34839c1`](https://github.com/mastra-ai/mastra/commit/34839c1910b6964bf59ed0cee58844efebbb684e), [`a952852`](https://github.com/mastra-ai/mastra/commit/a952852c971a21fb646cd907c75fcf4443cdc963), [`2656d9c`](https://github.com/mastra-ai/mastra/commit/2656d9c2976d4f3354253bfbbbf9b88a1b2bbf34), [`b3e9781`](https://github.com/mastra-ai/mastra/commit/b3e9781a93a18e8e492849040016ddf239c00d9c), [`63e3fe1`](https://github.com/mastra-ai/mastra/commit/63e3fe13cc1ea96f91d7c68aea92f400faf9e4da), [`1d4ce8d`](https://github.com/mastra-ai/mastra/commit/1d4ce8daaa54511f325c1b609d31b8e54009d677), [`8c68372`](https://github.com/mastra-ai/mastra/commit/8c68372e85fe0b066ec12c58bd29ffb93e54c552)]:
173
+ - @mastra/core@1.42.0
174
+ - @mastra/client-js@1.24.0
175
+ - @mastra/react@0.6.0
176
+
3
177
  ## 33.0.0-alpha.4
4
178
 
5
179
  ### Minor Changes
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mastra/playground-ui",
3
3
  "type": "module",
4
- "version": "33.0.0-alpha.4",
4
+ "version": "33.0.0",
5
5
  "description": "Mastra Playground components",
6
6
  "main": "dist/index.umd.js",
7
7
  "module": "dist/index.es.js",
@@ -96,8 +96,8 @@
96
96
  "react": ">=19.0.0",
97
97
  "react-dom": ">=19.0.0",
98
98
  "tailwindcss": "^4.0.0",
99
- "@mastra/react": "0.6.0-alpha.4",
100
- "@mastra/client-js": "^1.24.0-alpha.4"
99
+ "@mastra/client-js": "^1.24.0",
100
+ "@mastra/react": "0.6.0"
101
101
  },
102
102
  "devDependencies": {
103
103
  "@storybook/addon-a11y": "^10.4.1",
@@ -134,10 +134,10 @@
134
134
  "vite-plugin-dts": "^4.5.4",
135
135
  "vite-plugin-lib-inject-css": "^2.2.2",
136
136
  "vitest": "4.1.5",
137
- "@internal/lint": "0.0.103",
138
- "@mastra/client-js": "^1.24.0-alpha.4",
139
- "@mastra/react": "0.6.0-alpha.4",
140
- "@mastra/core": "1.42.0-alpha.4"
137
+ "@internal/lint": "0.0.104",
138
+ "@mastra/client-js": "^1.24.0",
139
+ "@mastra/react": "0.6.0",
140
+ "@mastra/core": "1.42.0"
141
141
  },
142
142
  "homepage": "https://mastra.ai",
143
143
  "repository": {