@mastra/playground-ui 30.0.0-alpha.9 → 30.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 +196 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,201 @@
|
|
|
1
1
|
# @mastra/playground-ui
|
|
2
2
|
|
|
3
|
+
## 30.0.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Added a Drawer component — a panel that slides in from any edge of the screen with swipe-to-dismiss gestures. ([#16958](https://github.com/mastra-ai/mastra/pull/16958))
|
|
8
|
+
|
|
9
|
+
The Drawer can be anchored to any of the four screen edges and supports snap points, nested stacking, controlled state, non-modal mode, swipe-to-open areas, and detached triggers.
|
|
10
|
+
|
|
11
|
+
```tsx
|
|
12
|
+
import {
|
|
13
|
+
Drawer,
|
|
14
|
+
DrawerTrigger,
|
|
15
|
+
DrawerContent,
|
|
16
|
+
DrawerHeader,
|
|
17
|
+
DrawerTitle,
|
|
18
|
+
DrawerDescription,
|
|
19
|
+
DrawerFooter,
|
|
20
|
+
DrawerClose,
|
|
21
|
+
Button,
|
|
22
|
+
} from '@mastra/playground-ui';
|
|
23
|
+
|
|
24
|
+
<Drawer side="right">
|
|
25
|
+
<DrawerTrigger asChild>
|
|
26
|
+
<Button>Open</Button>
|
|
27
|
+
</DrawerTrigger>
|
|
28
|
+
<DrawerContent>
|
|
29
|
+
<DrawerHeader>
|
|
30
|
+
<DrawerTitle>Library</DrawerTitle>
|
|
31
|
+
<DrawerDescription>A panel that slides in from the right edge.</DrawerDescription>
|
|
32
|
+
</DrawerHeader>
|
|
33
|
+
<DrawerFooter>
|
|
34
|
+
<DrawerClose asChild>
|
|
35
|
+
<Button variant="outline">Close</Button>
|
|
36
|
+
</DrawerClose>
|
|
37
|
+
</DrawerFooter>
|
|
38
|
+
</DrawerContent>
|
|
39
|
+
</Drawer>;
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
- Added a reusable `HoverCard` component (`HoverCard`, `HoverCardTrigger`, `HoverCardContent`) built on Base UI. You can now use these exported components to add hover card interactions anywhere in your UI. ([#16919](https://github.com/mastra-ai/mastra/pull/16919))
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@mastra/playground-ui';
|
|
46
|
+
|
|
47
|
+
<HoverCard>
|
|
48
|
+
<HoverCardTrigger>Weather Agent</HoverCardTrigger>
|
|
49
|
+
<HoverCardContent>Answers questions about current conditions and forecasts.</HoverCardContent>
|
|
50
|
+
</HoverCard>;
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Patch Changes
|
|
54
|
+
|
|
55
|
+
- Migrated the Switch component to Base UI for smoother animations and consistent behavior. No API changes — `checked`, `defaultChecked`, `onCheckedChange`, and `disabled` work exactly as before. ([#16891](https://github.com/mastra-ai/mastra/pull/16891))
|
|
56
|
+
|
|
57
|
+
- Improved the Select component by migrating it to Base UI for more reliable positioning and accessibility. The public API (`Select`, `SelectTrigger`, `SelectContent`, `SelectItem`, `SelectValue`, `SelectGroup`) is unchanged, so no consumer updates are needed. ([#16918](https://github.com/mastra-ai/mastra/pull/16918))
|
|
58
|
+
|
|
59
|
+
- Added `DataList.RowStatic`, a non-interactive row primitive. It renders a row that looks identical to other list rows but does not respond to clicks and shows no hover/focus state — use it alongside `DataList.RowButton` / `DataList.RowLink` when only some rows are clickable (e.g. error or placeholder entries in an otherwise navigable list). ([#16970](https://github.com/mastra-ai/mastra/pull/16970))
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
{
|
|
63
|
+
rows.map(row =>
|
|
64
|
+
row.href ? (
|
|
65
|
+
<DataList.RowLink key={row.id} to={row.href} LinkComponent={Link}>
|
|
66
|
+
{row.cells}
|
|
67
|
+
</DataList.RowLink>
|
|
68
|
+
) : (
|
|
69
|
+
<DataList.RowStatic key={row.id}>{row.cells}</DataList.RowStatic>
|
|
70
|
+
),
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
- Added `DataList` primitives and props for building selection-aware, condensed list rows that match the Traces/Logs visual style. ([#16820](https://github.com/mastra-ai/mastra/pull/16820))
|
|
76
|
+
|
|
77
|
+
**New cells** on `DataList`:
|
|
78
|
+
- `IdCell` — compact mono cell that truncates long IDs to 8 chars.
|
|
79
|
+
- `MonoCell` — compact mono + truncate text cell (for input previews, JSON summaries, etc.).
|
|
80
|
+
- `DateCell` — compact date cell rendering "Today" or "MMM dd".
|
|
81
|
+
- `TimeCell` — compact mono time cell rendering `HH:mm:ss.SSS` with the millisecond portion tinted.
|
|
82
|
+
- `SelectCell` — labelled checkbox cell with a shift-key range-select handler.
|
|
83
|
+
- `TopSelectCell` — header version with `indeterminate` support for "select all".
|
|
84
|
+
- `TopCells` — non-interactive header sibling of `RowButton`, for hosting top cells beside a leading select cell.
|
|
85
|
+
|
|
86
|
+
**New props** on `DataList.RowButton` and `DataList.RowLink`:
|
|
87
|
+
- `flushLeft` — drops the default left margin when wrapped beside a leading cell.
|
|
88
|
+
- `colStart` — places the row starting at a column line (e.g. `colStart={2}` to leave column 1 for a leading cell).
|
|
89
|
+
- `featured` — applies the highlighted background to mark the active row.
|
|
90
|
+
|
|
91
|
+
**New props** on existing wrappers:
|
|
92
|
+
- `as` on `DataList.Cell` and `DataList.TopCell` — render the cell as any HTML element (e.g. `<label>` so the whole cell is clickable).
|
|
93
|
+
- `hasLeadingCell` on `DataList.Top` — drops default gap and left padding so a leading cell sits flush, mirroring how `Row` + `RowButton` compose.
|
|
94
|
+
|
|
95
|
+
**Example** — selection row with a checkbox in column 1 and an interactive button spanning the rest:
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
<DataList.Row>
|
|
99
|
+
<DataList.SelectCell checked={isSelected} onToggle={shiftKey => toggle(id, shiftKey)} />
|
|
100
|
+
<DataList.RowButton flushLeft colStart={2} featured={isFeatured} onClick={onRowClick}>
|
|
101
|
+
<DataList.IdCell id={item.id} />
|
|
102
|
+
<DataList.MonoCell>{item.input}</DataList.MonoCell>
|
|
103
|
+
</DataList.RowButton>
|
|
104
|
+
</DataList.Row>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
Internally the Traces and Logs list views now use the shared primitives — no behavior change for those consumers.
|
|
108
|
+
|
|
109
|
+
- Added support for trailing cells in `DataList` rows. `DataList.RowButton` and `DataList.RowLink` now accept `colEnd` and `flushRight` (mirrors of the existing `colStart`/`flushLeft`), so a row can sit beside a non-interactive trailing cell (e.g. an actions column) and stay aligned with the header. Rows wrapped in `DataList.Row` now render a full-width separator that extends through the leading and trailing cells. `DataList.MonoCell` also gained an optional `height` prop so non-compact lists can use it without forcing compact padding. ([#16888](https://github.com/mastra-ai/mastra/pull/16888))
|
|
110
|
+
|
|
111
|
+
**Usage**
|
|
112
|
+
|
|
113
|
+
```tsx
|
|
114
|
+
<DataList.Row>
|
|
115
|
+
<DataList.RowButton flushLeft flushRight colEnd={-2} onClick={onClick}>
|
|
116
|
+
{/* main row content */}
|
|
117
|
+
</DataList.RowButton>
|
|
118
|
+
<DataList.Cell>
|
|
119
|
+
{/* trailing actions, e.g. icon buttons */}
|
|
120
|
+
</DataList.Cell>
|
|
121
|
+
</DataList.Row>
|
|
122
|
+
|
|
123
|
+
<DataList.MonoCell height="default">long mono text…</DataList.MonoCell>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
- Migrated the Label component off Radix UI. It now renders a native `<label>` element with the same props and styling — `htmlFor`, `className`, and children behave exactly as before. ([#16892](https://github.com/mastra-ai/mastra/pull/16892))
|
|
127
|
+
|
|
128
|
+
- Fixed Studio Settings page (and other default-height `PageLayout` pages) clipping their content with no scrollbar on viewports shorter than the form. Users on short laptop screens (under ~991px tall) could not reach the Save button under the Mastra Connection headers form, making it impossible to apply changes. Default-height `PageLayout` pages now grow with their content and scroll through the studio chrome wrapper; `height="full"` pages (Logs, Traces, Metrics, etc.) are unchanged. ([#16999](https://github.com/mastra-ai/mastra/pull/16999))
|
|
129
|
+
|
|
130
|
+
- Restyled scrollbars across the studio UI to match the design system — thin, themed thumb on a transparent track — replacing the default OS scrollbars that clashed with dark and light surfaces. ([#16918](https://github.com/mastra-ai/mastra/pull/16918))
|
|
131
|
+
|
|
132
|
+
- 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))
|
|
133
|
+
|
|
134
|
+
- Design-system additions to support theming: ([#17059](https://github.com/mastra-ai/mastra/pull/17059))
|
|
135
|
+
- `Avatar` now accepts optional `color` and `textColor` props for per-instance tinting, and falls back to the initial when the image fails to load.
|
|
136
|
+
- `Searchbar` accepts an optional `className` to let consumers tune layout without forking.
|
|
137
|
+
- `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).
|
|
138
|
+
- `stringToColor` now accepts any `number` for the `lightness` argument and defaults to `90` instead of `75` for a lighter fallback chip.
|
|
139
|
+
- Global `body` rule enables `font-smoothing` / `-webkit-font-smoothing` for crisper UI text.
|
|
140
|
+
|
|
141
|
+
- Removed `EntryList` and its sub-components (`EntryList.Header`, `EntryList.Entries`, `EntryList.Entry`, `EntryList.EntryText`, `EntryList.Pagination`, `EntryList.NoMatch`, `EntryListSkeleton`, etc.) from the public API. All in-repo list views have migrated to `DataList`, which is the recommended replacement. ([#16910](https://github.com/mastra-ai/mastra/pull/16910))
|
|
142
|
+
|
|
143
|
+
**Migration:**
|
|
144
|
+
|
|
145
|
+
```tsx
|
|
146
|
+
// Before
|
|
147
|
+
import { EntryList, EntryListSkeleton } from '@mastra/playground-ui';
|
|
148
|
+
|
|
149
|
+
<EntryList>
|
|
150
|
+
<EntryList.Trim>
|
|
151
|
+
<EntryList.Header columns={columns} />
|
|
152
|
+
<EntryList.Entries>
|
|
153
|
+
{items.map(item => (
|
|
154
|
+
<EntryList.Entry key={item.id} columns={columns} entry={item} onClick={…}>
|
|
155
|
+
{columns.map(col => <EntryList.EntryText key={col.name}>{item[col.name]}</EntryList.EntryText>)}
|
|
156
|
+
</EntryList.Entry>
|
|
157
|
+
))}
|
|
158
|
+
</EntryList.Entries>
|
|
159
|
+
</EntryList.Trim>
|
|
160
|
+
<EntryList.Pagination …/>
|
|
161
|
+
</EntryList>
|
|
162
|
+
|
|
163
|
+
// After
|
|
164
|
+
import { DataList } from '@mastra/playground-ui';
|
|
165
|
+
|
|
166
|
+
<DataList columns={gridColumns}>
|
|
167
|
+
<DataList.Top>
|
|
168
|
+
{columns.map(col => <DataList.TopCell key={col.name}>{col.label}</DataList.TopCell>)}
|
|
169
|
+
</DataList.Top>
|
|
170
|
+
{items.map(item => (
|
|
171
|
+
<DataList.RowButton key={item.id} onClick={…}>
|
|
172
|
+
{columns.map(col => <DataList.Cell key={col.name}>{item[col.name]}</DataList.Cell>)}
|
|
173
|
+
</DataList.RowButton>
|
|
174
|
+
))}
|
|
175
|
+
<DataList.Pagination …/>
|
|
176
|
+
</DataList>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
- Improved the Checkbox component by migrating it to Base UI. The public API is unchanged — `checked` (including the `'indeterminate'` value), `defaultChecked`, `onCheckedChange`, and `disabled` all behave as before. ([#16905](https://github.com/mastra-ai/mastra/pull/16905))
|
|
180
|
+
|
|
181
|
+
- Fixed MetricsDataTable sticky header and column backgrounds to use surface3 token, matching DashboardCard surface ([#16828](https://github.com/mastra-ai/mastra/pull/16828))
|
|
182
|
+
|
|
183
|
+
- Improved the RadioGroup component by migrating it to Base UI. The public API (`RadioGroup`, `RadioGroupItem`, `value`, `onValueChange`, `disabled`) is unchanged. Also fixes the radio indicator sizing/centering — the control now stays square and the inner dot is properly centered. ([#16904](https://github.com/mastra-ai/mastra/pull/16904))
|
|
184
|
+
|
|
185
|
+
- Updated dependencies [[`cfa2e3a`](https://github.com/mastra-ai/mastra/commit/cfa2e3a5292322f48bb28b4d257d631da7f9d3cc), [`0cbece9`](https://github.com/mastra-ai/mastra/commit/0cbece9d832cb134a74cdbf3682d390a058215a4), [`2f5f58a`](https://github.com/mastra-ai/mastra/commit/2f5f58a9a8bb13bcdc6789db221eef7c9bf1ff02), [`2f5f58a`](https://github.com/mastra-ai/mastra/commit/2f5f58a9a8bb13bcdc6789db221eef7c9bf1ff02), [`7dfe1bc`](https://github.com/mastra-ai/mastra/commit/7dfe1bcfe71d261a6fd6bbf29b1dec49d78fb98f), [`ac442a4`](https://github.com/mastra-ai/mastra/commit/ac442a42fda0354ac2bcea772bf6691cb3e9dbb3), [`b7286f4`](https://github.com/mastra-ai/mastra/commit/b7286f4308267f5fd70e6bfee10dba9472640906), [`6096445`](https://github.com/mastra-ai/mastra/commit/60964459733f0ab384584d95e19c36607ffdf7b0), [`d72dc4b`](https://github.com/mastra-ai/mastra/commit/d72dc4b12d832546c05c20255fa96fe4eb515900), [`a481027`](https://github.com/mastra-ai/mastra/commit/a481027b549ba1018414990c8f045eaee7b9f413), [`f1b9f87`](https://github.com/mastra-ai/mastra/commit/f1b9f87a00505f15d4fe39f92de287674adc2198), [`1e5c067`](https://github.com/mastra-ai/mastra/commit/1e5c067d2e20a781af670578180d1ee249806d41), [`168fa09`](https://github.com/mastra-ai/mastra/commit/168fa09d6b39114cb8c13bd06f1dccb9bc81c6cd), [`df1947a`](https://github.com/mastra-ai/mastra/commit/df1947affa40f742067542251fac7ca759492ef4), [`ee59b74`](https://github.com/mastra-ai/mastra/commit/ee59b743ce73ad11784b4d9c6fbba8568edee1c8), [`a97b1a0`](https://github.com/mastra-ai/mastra/commit/a97b1a0abaed83946c3519d1e0f680d0815b8a67), [`af2e1f8`](https://github.com/mastra-ai/mastra/commit/af2e1f8e2a2d2c4ba75167d5c93ca44395639eff), [`008baaf`](https://github.com/mastra-ai/mastra/commit/008baafd8d851f831407045aebead5a2e3342eff), [`271d891`](https://github.com/mastra-ai/mastra/commit/271d8917e4323340f9fe549f3e8de55810dbbcbe), [`801baa0`](https://github.com/mastra-ai/mastra/commit/801baa07cccdbaec1d00942a92bdc831111744a2), [`8116436`](https://github.com/mastra-ai/mastra/commit/81164363eb225d774e41ff27da6a5ea611406688), [`c35b962`](https://github.com/mastra-ai/mastra/commit/c35b9625c7e854fcfdeee226a3338a750d0ff211), [`c27c4b9`](https://github.com/mastra-ai/mastra/commit/c27c4b9f137df5414fca4e45896aceccff6b0ed5), [`08b3b59`](https://github.com/mastra-ai/mastra/commit/08b3b590dd960dee6c9a6e39272f8927d803db6e), [`b3c3b18`](https://github.com/mastra-ai/mastra/commit/b3c3b189121489a3a51a8fd8204b569be9a89fe5), [`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), [`70cb714`](https://github.com/mastra-ai/mastra/commit/70cb7149c8f16f478e15b58498254a53181750a4), [`91cf0e0`](https://github.com/mastra-ai/mastra/commit/91cf0e027e511b871481a8576b56b7af83b15afd), [`1120b4f`](https://github.com/mastra-ai/mastra/commit/1120b4fa928552c6ee1751efa5603d955841e766), [`7f9da22`](https://github.com/mastra-ai/mastra/commit/7f9da22efd5aa595e138a31de55a5f0f2f28b33d)]:
|
|
186
|
+
- @mastra/core@1.37.0
|
|
187
|
+
- @mastra/client-js@1.21.0
|
|
188
|
+
- @mastra/react@0.4.1
|
|
189
|
+
|
|
190
|
+
## 30.0.0-alpha.10
|
|
191
|
+
|
|
192
|
+
### Patch Changes
|
|
193
|
+
|
|
194
|
+
- Updated dependencies [[`d72dc4b`](https://github.com/mastra-ai/mastra/commit/d72dc4b12d832546c05c20255fa96fe4eb515900)]:
|
|
195
|
+
- @mastra/core@1.37.0-alpha.9
|
|
196
|
+
- @mastra/client-js@1.21.0-alpha.10
|
|
197
|
+
- @mastra/react@0.4.1-alpha.10
|
|
198
|
+
|
|
3
199
|
## 30.0.0-alpha.9
|
|
4
200
|
|
|
5
201
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mastra/playground-ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "30.0.0
|
|
4
|
+
"version": "30.0.0",
|
|
5
5
|
"description": "Mastra Playground components",
|
|
6
6
|
"main": "dist/index.umd.js",
|
|
7
7
|
"module": "dist/index.es.js",
|
|
@@ -92,8 +92,8 @@
|
|
|
92
92
|
"react": ">=19.0.0",
|
|
93
93
|
"react-dom": ">=19.0.0",
|
|
94
94
|
"tailwindcss": "^4.0.0",
|
|
95
|
-
"@mastra/client-js": "^1.21.0
|
|
96
|
-
"@mastra/react": "0.4.1
|
|
95
|
+
"@mastra/client-js": "^1.21.0",
|
|
96
|
+
"@mastra/react": "0.4.1"
|
|
97
97
|
},
|
|
98
98
|
"devDependencies": {
|
|
99
99
|
"@storybook/addon-a11y": "^10.3.6",
|
|
@@ -129,10 +129,10 @@
|
|
|
129
129
|
"vite-plugin-dts": "^4.5.4",
|
|
130
130
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
131
131
|
"vitest": "4.1.5",
|
|
132
|
-
"@internal/lint": "0.0.
|
|
133
|
-
"@mastra/
|
|
134
|
-
"@mastra/react": "0.4.1
|
|
135
|
-
"@mastra/
|
|
132
|
+
"@internal/lint": "0.0.98",
|
|
133
|
+
"@mastra/client-js": "^1.21.0",
|
|
134
|
+
"@mastra/react": "0.4.1",
|
|
135
|
+
"@mastra/core": "1.37.0"
|
|
136
136
|
},
|
|
137
137
|
"homepage": "https://mastra.ai",
|
|
138
138
|
"repository": {
|