@mastra/playground-ui 31.0.0-alpha.9 → 31.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.
- package/CHANGELOG.md +179 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,184 @@
|
|
|
1
1
|
# @mastra/playground-ui
|
|
2
2
|
|
|
3
|
+
## 31.0.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Made `ButtonsGroup` compose joined controls (searchbar + dropdown pills, split buttons, steppers) cleanly, and improved `InputGroup` so it drops straight into one. ([#17259](https://github.com/mastra-ai/mastra/pull/17259))
|
|
8
|
+
- `ButtonsGroup` with `spacing="close"` fuses outline, filled and `Select` segments into one pill with a single clean divider, a complete focus ring (no missing side), and no consumer width classes.
|
|
9
|
+
- `InputGroup` fills a flex row on its own, matches a same-size sibling height, and propagates size via `data-size` (no React context) — so an icon + input segment composes inside a `ButtonsGroup` pill with no layout classes.
|
|
10
|
+
|
|
11
|
+
Use `InputGroup` (icon as an `InputGroupAddon`, optional clear button as an `InputGroupButton`) to build an icon input — it owns the box, focus, hover and error states on the focusable wrapper:
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import {
|
|
15
|
+
ButtonsGroup,
|
|
16
|
+
InputGroup,
|
|
17
|
+
InputGroupAddon,
|
|
18
|
+
InputGroupInput,
|
|
19
|
+
Select,
|
|
20
|
+
SelectTrigger,
|
|
21
|
+
SelectValue,
|
|
22
|
+
SelectContent,
|
|
23
|
+
SelectItem,
|
|
24
|
+
} from '@mastra/playground-ui';
|
|
25
|
+
|
|
26
|
+
<ButtonsGroup spacing="close">
|
|
27
|
+
<InputGroup variant="outline">
|
|
28
|
+
<InputGroupAddon align="inline-start">
|
|
29
|
+
<SearchIcon />
|
|
30
|
+
</InputGroupAddon>
|
|
31
|
+
<InputGroupInput placeholder="Search projects..." />
|
|
32
|
+
</InputGroup>
|
|
33
|
+
<Select value={sort} onValueChange={setSort}>
|
|
34
|
+
<SelectTrigger className="rounded-full">
|
|
35
|
+
<SelectValue />
|
|
36
|
+
</SelectTrigger>
|
|
37
|
+
<SelectContent align="end">{/* options */}</SelectContent>
|
|
38
|
+
</Select>
|
|
39
|
+
</ButtonsGroup>;
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
- Refined the focus state of form inputs in `@mastra/playground-ui`. Applies to `Input`, `InputGroup`, `Searchbar`, and `Textarea`. ([#17259](https://github.com/mastra-ai/mastra/pull/17259))
|
|
43
|
+
- Removed the green border and glow that appeared on focus.
|
|
44
|
+
- On focus, the field shows a subtle background shift and brightens its border to a neutral tone, so the focused field stays clearly visible on any underlying surface.
|
|
45
|
+
- Made single-line inputs fully rounded to match the design system. Multi-line surfaces (`Textarea`, and `InputGroup` with a block-style addon) keep a softer `rounded-xl` corner.
|
|
46
|
+
- Added `filled` and `outline` variants for consumers that need to choose between the new surface treatment and a quieter border-only treatment.
|
|
47
|
+
- The `unstyled` variant of `Input` and `Textarea` no longer leaks the browser default focus outline.
|
|
48
|
+
|
|
49
|
+
`Input`, `Textarea`, and `InputGroup` default to the `filled` surface. `Searchbar` and `ListSearch` default to the `outline` (transparent) treatment. For `Searchbar` this matches its previous transparent look. `ListSearch` previously rendered a filled (`bg-surface2`), `rounded-lg` box, so its search fields across the list pages now read as transparent, fully-rounded pills — pass `variant="filled"` to keep them on a filled surface:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import { Input, InputGroup, InputGroupAddon, InputGroupInput, Searchbar } from '@mastra/playground-ui';
|
|
53
|
+
|
|
54
|
+
<Input placeholder="Name" />
|
|
55
|
+
<Input variant="outline" placeholder="Name" />
|
|
56
|
+
|
|
57
|
+
<InputGroup variant="outline">
|
|
58
|
+
<InputGroupAddon>
|
|
59
|
+
<SearchIcon />
|
|
60
|
+
</InputGroupAddon>
|
|
61
|
+
<InputGroupInput placeholder="Email" />
|
|
62
|
+
</InputGroup>
|
|
63
|
+
|
|
64
|
+
<Searchbar label="Search agents" placeholder="Search agents..." onSearch={handleSearch} />
|
|
65
|
+
<Searchbar variant="filled" label="Search agents" placeholder="Search agents..." onSearch={handleSearch} />
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Patch Changes
|
|
69
|
+
|
|
70
|
+
- Fixed syntax highlighting in Studio code blocks. Shiki tokens now render with per-token colors (keywords, strings, identifiers) instead of flat monochrome text, and Code Mode `execute_typescript` programs display as a formatted, highlighted TypeScript block instead of a one-line JSON string. ([#17324](https://github.com/mastra-ai/mastra/pull/17324))
|
|
71
|
+
|
|
72
|
+
- 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))
|
|
73
|
+
|
|
74
|
+
- Improved RadioGroup styling with neutral selected states, cleaner focus outlines, and surface-aware disabled states. ([#17401](https://github.com/mastra-ai/mastra/pull/17401))
|
|
75
|
+
|
|
76
|
+
- Added a `DataPanel.SectionHeading` component for small-caps section labels (with an optional leading icon) inside a `DataPanel.Content`. `DataCodeSection` now renders through it, and `DataPanel.Header` hides its bottom border when the panel is collapsed (header-only) so an empty panel no longer shows a stray divider. ([#17464](https://github.com/mastra-ai/mastra/pull/17464))
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
<DataPanel.SectionHeading icon={<FileInputIcon />}>Input</DataPanel.SectionHeading>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
- Pointer drags inside the `SideDialog` body now select text reliably instead of fighting with the close-swipe gesture. The popup chrome (header, edges) still closes the drawer on drag. ([#16959](https://github.com/mastra-ai/mastra/pull/16959))
|
|
83
|
+
|
|
84
|
+
**Drawer composition**
|
|
85
|
+
|
|
86
|
+
`DrawerContent` is now the shadcn-style opinionated bundle (`DrawerPortal` + `DrawerBackdrop` + `DrawerViewport` + `DrawerPopup`, with a handle bar on top/bottom-anchored drawers and a fade-out when a nested drawer covers the parent). Most drawers can now be written as:
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
<Drawer>
|
|
90
|
+
<DrawerTrigger>…</DrawerTrigger>
|
|
91
|
+
<DrawerContent>
|
|
92
|
+
<DrawerHeader>…</DrawerHeader>
|
|
93
|
+
<DrawerBody>…</DrawerBody>
|
|
94
|
+
</DrawerContent>
|
|
95
|
+
</Drawer>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
The low-level primitives (`DrawerPortal`, `DrawerBackdrop`, `DrawerViewport`, `DrawerPopup`) remain exported for drawers that need a custom portal target, non-modal page behavior, or chrome outside the popup (see the `SwipeToOpen` and `NonModal` Storybook examples).
|
|
99
|
+
|
|
100
|
+
Base UI's text-selectable region (the `Drawer.Content` part — pointer drags inside it select text instead of closing the drawer) is now exported as `DrawerInteractive`. Migration:
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
// Before
|
|
104
|
+
import { DrawerContent } from '@mastra/playground-ui';
|
|
105
|
+
<DrawerContent render={<div>...</div>} />;
|
|
106
|
+
|
|
107
|
+
// After
|
|
108
|
+
import { DrawerInteractive } from '@mastra/playground-ui';
|
|
109
|
+
<DrawerInteractive render={<div>...</div>} />;
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
- Removed the unused `ElementSelect` export from `@mastra/playground-ui`. Use the `Select` primitives instead. ([#17417](https://github.com/mastra-ai/mastra/pull/17417))
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
// Before
|
|
116
|
+
import { ElementSelect } from '@mastra/playground-ui';
|
|
117
|
+
|
|
118
|
+
<ElementSelect name="status" value={status} onChange={setStatus} options={['Draft', 'Published']} />;
|
|
119
|
+
|
|
120
|
+
// After
|
|
121
|
+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@mastra/playground-ui';
|
|
122
|
+
|
|
123
|
+
<Select name="status" value={status} onValueChange={setStatus}>
|
|
124
|
+
<SelectTrigger>
|
|
125
|
+
<SelectValue placeholder="Select..." />
|
|
126
|
+
</SelectTrigger>
|
|
127
|
+
<SelectContent>
|
|
128
|
+
<SelectItem value="draft">Draft</SelectItem>
|
|
129
|
+
<SelectItem value="published">Published</SelectItem>
|
|
130
|
+
</SelectContent>
|
|
131
|
+
</Select>;
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
- Changed `Spinner` to render the new compact loader by default and added `variant="pulse"` for longer data-loading states. Removed the `color` prop so the loader defaults to the neutral text token and color overrides go through `className`. ([#17455](https://github.com/mastra-ai/mastra/pull/17455))
|
|
135
|
+
|
|
136
|
+
**Migration note**
|
|
137
|
+
|
|
138
|
+
Before:
|
|
139
|
+
|
|
140
|
+
```tsx
|
|
141
|
+
<Spinner color={Colors.neutral3} />
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
After:
|
|
145
|
+
|
|
146
|
+
```tsx
|
|
147
|
+
<Spinner className="text-neutral3" />
|
|
148
|
+
<Spinner variant="pulse" className="text-neutral1" />
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
- Fixed dropdowns, menus, comboboxes, and popovers being unclickable when opened inside a SideDialog (for example the dataset selector in the "Save as Dataset Item" panel on the Traces tab). These popups now render inside the dialog so they stay interactive within the modal drawer. ([#17479](https://github.com/mastra-ai/mastra/pull/17479))
|
|
152
|
+
|
|
153
|
+
- 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))
|
|
154
|
+
|
|
155
|
+
When no admin default is set, behavior is unchanged: the starter falls back to the first allowed model, then to the hardcoded fallback.
|
|
156
|
+
|
|
157
|
+
- Improved `@mastra/playground-ui` stability by removing legacy runtime UI dependencies without changing `SideDialog`, `MainSidebar`, or accessibility behavior. Nested `SideDialog` levels now stack consistently, so multi-level flows behave predictably. ([#16959](https://github.com/mastra-ai/mastra/pull/16959))
|
|
158
|
+
|
|
159
|
+
- Added an `is404NotFoundError` helper to detect 404 Not Found responses from the Mastra client, alongside the existing `is401UnauthorizedError` and `is403ForbiddenError` helpers. Use it to show a clear not-found state when a resource no longer exists. ([#17460](https://github.com/mastra-ai/mastra/pull/17460))
|
|
160
|
+
|
|
161
|
+
```ts
|
|
162
|
+
import { is404NotFoundError } from '@mastra/playground-ui';
|
|
163
|
+
|
|
164
|
+
try {
|
|
165
|
+
await client.getDataset(id);
|
|
166
|
+
} catch (error) {
|
|
167
|
+
if (is404NotFoundError(error)) {
|
|
168
|
+
// show a not-found state instead of a generic error
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
- Improved Checkbox styling with neutral selected states, cleaner focus outlines, and smoother state transitions. ([#17400](https://github.com/mastra-ai/mastra/pull/17400))
|
|
174
|
+
|
|
175
|
+
- Improved switch focus, disabled, and motion states. ([#17416](https://github.com/mastra-ai/mastra/pull/17416))
|
|
176
|
+
|
|
177
|
+
- Updated dependencies [[`860ec4e`](https://github.com/mastra-ai/mastra/commit/860ec4edf6aa508edfd4f34c312c141209eb0dbf), [`bb3fce8`](https://github.com/mastra-ai/mastra/commit/bb3fce8f8d80079170c0f98cb2efbb29ae34375d), [`fa63872`](https://github.com/mastra-ai/mastra/commit/fa6387280954e6b667bec5714b55ba082bc627ff), [`d779de3`](https://github.com/mastra-ai/mastra/commit/d779de3cd9d2e7ed8110547190e2f15e786a0e41), [`1750c97`](https://github.com/mastra-ai/mastra/commit/1750c975d6179fbf6db2813b15229d4f8f23fc55), [`9283971`](https://github.com/mastra-ai/mastra/commit/928397157009b4aef4d5fdf3a0a273cb371beb55), [`f07b646`](https://github.com/mastra-ai/mastra/commit/f07b64604ab7d25391179790b7fd4823df9e2dff), [`d8838ae`](https://github.com/mastra-ai/mastra/commit/d8838ae80b69780361693d27098f7f6684af12fe), [`40f9297`](https://github.com/mastra-ai/mastra/commit/40f9297003b921c62373d3e8d3a4bda76c9f6de3), [`19a8658`](https://github.com/mastra-ai/mastra/commit/19a86589c788ef48bb6c1b0612cc82a201857379), [`850af77`](https://github.com/mastra-ai/mastra/commit/850af7779cb87c350804488734544a5b1843de25), [`0f0d1ba`](https://github.com/mastra-ai/mastra/commit/0f0d1ba67bfcb2204e571401662f1eceefc03357), [`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), [`8c31bcd`](https://github.com/mastra-ai/mastra/commit/8c31bcdb00e597880d5939b1b7d7566fbe5dacae), [`0e32507`](https://github.com/mastra-ai/mastra/commit/0e32507962cdfa5569b7bda5bc6fb3dd34e40b03), [`95b14cd`](https://github.com/mastra-ai/mastra/commit/95b14cdd820e86d97ac05fe568424c513a252e31), [`07c3de7`](https://github.com/mastra-ai/mastra/commit/07c3de7f7bc418beccaea3b5e6b7f7cdda79d492), [`0bf2d93`](https://github.com/mastra-ai/mastra/commit/0bf2d932d20e2936f2d9abb8c0a86e24fbc97ec6), [`7b0d34c`](https://github.com/mastra-ai/mastra/commit/7b0d34cfe4a2fce22ac86ae17404685ff67a2ddb), [`a659a77`](https://github.com/mastra-ai/mastra/commit/a659a779bdebe3a52a518c56d2260592d0240fe0), [`aa36be2`](https://github.com/mastra-ai/mastra/commit/aa36be23aa513b7dc53cb8ca16b7fab8f20e43ad), [`3332be9`](https://github.com/mastra-ai/mastra/commit/3332be9701ecd77aba840959d9a1d1ce7aef02d3), [`212c635`](https://github.com/mastra-ai/mastra/commit/212c635203e61d036ab41db8ff86c3893dc795b3), [`d8838ae`](https://github.com/mastra-ai/mastra/commit/d8838ae80b69780361693d27098f7f6684af12fe), [`9aa5a73`](https://github.com/mastra-ai/mastra/commit/9aa5a73e7e110f6e9365eec69364a33d5f03bb56), [`f73c789`](https://github.com/mastra-ai/mastra/commit/f73c789e8ef21561580395d2c410119cab5848c8), [`8bd16da`](https://github.com/mastra-ai/mastra/commit/8bd16da73a4cb874d739373643dbd6a6e7f88684), [`c8630f8`](https://github.com/mastra-ai/mastra/commit/c8630f80d4f40cb5d22e60ab162b618b1907167a), [`94dfef6`](https://github.com/mastra-ai/mastra/commit/94dfef6e2bf19a88467ea3940afcbce88a433f0f), [`47f71dc`](https://github.com/mastra-ai/mastra/commit/47f71dc6fbcbd12d71e21a979e676e20a02bd77d), [`50ceae2`](https://github.com/mastra-ai/mastra/commit/50ceae270878e2f8fb2b2c6c2faab09df0007c8a), [`a122f79`](https://github.com/mastra-ai/mastra/commit/a122f79427ae225ec79c7b2ed46278da48d04b17), [`8cdde58`](https://github.com/mastra-ai/mastra/commit/8cdde5875bbba6702d9df226f2b20232b8d75d6c), [`3a081c1`](https://github.com/mastra-ai/mastra/commit/3a081c1255c5ae8c99f6dad91cc612934ef6f2bd), [`49f8abc`](https://github.com/mastra-ai/mastra/commit/49f8abce8258e4f2f87bd326acfbdb641264a47c), [`847ff1e`](https://github.com/mastra-ai/mastra/commit/847ff1e0d94368d94b2e173e4e0908e115568ef3), [`0c1ed1d`](https://github.com/mastra-ai/mastra/commit/0c1ed1d00c7d87b5ac99ca95896211a2fa9189fa), [`259d409`](https://github.com/mastra-ai/mastra/commit/259d409a514174299dbde1ff5e1121209b3ba850), [`9e16c68`](https://github.com/mastra-ai/mastra/commit/9e16c6818b6485ccb43df28aba6f3a2219d28662), [`cefca33`](https://github.com/mastra-ai/mastra/commit/cefca33ae666e69810c935fedf95a929c173d1d7), [`d00e8c5`](https://github.com/mastra-ai/mastra/commit/d00e8c50daebe5bce5bf2f48bde39c86fc3d2fe4), [`36fa7e2`](https://github.com/mastra-ai/mastra/commit/36fa7e24d14e58a1eb46147097b32f583e5b8775), [`87e9774`](https://github.com/mastra-ai/mastra/commit/87e97741c1e493cd6d62f478eb810b49bda4d57c), [`65a72e7`](https://github.com/mastra-ai/mastra/commit/65a72e70c25eedea8ff985a6624b96be2850236b), [`fe9eacd`](https://github.com/mastra-ai/mastra/commit/fe9eacd9545a0a9d64aad31c9fa90294a425289e), [`4c02027`](https://github.com/mastra-ai/mastra/commit/4c020277235eaa6b1dc957c90ad0639eef213992), [`0f77241`](https://github.com/mastra-ai/mastra/commit/0f7724108806703799a8ba80ad0f09414afd5066), [`849efb9`](https://github.com/mastra-ai/mastra/commit/849efb9fca6dc976589c1f90a303fea618769109), [`92ff509`](https://github.com/mastra-ai/mastra/commit/92ff5098ef8a990438ca038077021a5f7541ec1d), [`3fce5e7`](https://github.com/mastra-ai/mastra/commit/3fce5e70d011d289043e75003ef3336ed4aa43c3), [`a763592`](https://github.com/mastra-ai/mastra/commit/a763592c3db46963ef1011cfe16fe372816e775e), [`db79c86`](https://github.com/mastra-ai/mastra/commit/db79c86c60723d57e02f9636ca2611bd4515f194), [`6855012`](https://github.com/mastra-ai/mastra/commit/685501247cc4717506f3e89beed03509d63a5370), [`7fef31c`](https://github.com/mastra-ai/mastra/commit/7fef31c0d2a6d362a43a647a8a4f6ab893758a23), [`80c7737`](https://github.com/mastra-ai/mastra/commit/80c7737e32d7917b5f356957d67c169d01744fd3), [`05d61e1`](https://github.com/mastra-ai/mastra/commit/05d61e18aa014a012a32ee9cb79cdcf3210dbe9d), [`66d65f5`](https://github.com/mastra-ai/mastra/commit/66d65f58e4b1f862c7f7928866a4426f8de9d583), [`7fef31c`](https://github.com/mastra-ai/mastra/commit/7fef31c0d2a6d362a43a647a8a4f6ab893758a23), [`7fef31c`](https://github.com/mastra-ai/mastra/commit/7fef31c0d2a6d362a43a647a8a4f6ab893758a23), [`3f1cf47`](https://github.com/mastra-ai/mastra/commit/3f1cf476f74c1e4cc2df908837e05853a5347e31)]:
|
|
178
|
+
- @mastra/react@0.4.3
|
|
179
|
+
- @mastra/client-js@1.22.0
|
|
180
|
+
- @mastra/core@1.38.0
|
|
181
|
+
|
|
3
182
|
## 31.0.0-alpha.9
|
|
4
183
|
|
|
5
184
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mastra/playground-ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "31.0.0
|
|
4
|
+
"version": "31.0.0",
|
|
5
5
|
"description": "Mastra Playground components",
|
|
6
6
|
"main": "dist/index.umd.js",
|
|
7
7
|
"module": "dist/index.es.js",
|
|
@@ -86,8 +86,8 @@
|
|
|
86
86
|
"react": ">=19.0.0",
|
|
87
87
|
"react-dom": ">=19.0.0",
|
|
88
88
|
"tailwindcss": "^4.0.0",
|
|
89
|
-
"@mastra/client-js": "^1.22.0
|
|
90
|
-
"@mastra/react": "0.4.3
|
|
89
|
+
"@mastra/client-js": "^1.22.0",
|
|
90
|
+
"@mastra/react": "0.4.3"
|
|
91
91
|
},
|
|
92
92
|
"devDependencies": {
|
|
93
93
|
"@storybook/addon-a11y": "^10.3.6",
|
|
@@ -123,10 +123,10 @@
|
|
|
123
123
|
"vite-plugin-dts": "^4.5.4",
|
|
124
124
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
125
125
|
"vitest": "4.1.5",
|
|
126
|
-
"@
|
|
127
|
-
"@mastra/client-js": "^1.22.0
|
|
128
|
-
"@mastra/core": "1.38.0
|
|
129
|
-
"@
|
|
126
|
+
"@mastra/react": "0.4.3",
|
|
127
|
+
"@mastra/client-js": "^1.22.0",
|
|
128
|
+
"@mastra/core": "1.38.0",
|
|
129
|
+
"@internal/lint": "0.0.100"
|
|
130
130
|
},
|
|
131
131
|
"homepage": "https://mastra.ai",
|
|
132
132
|
"repository": {
|