@mastra/playground-ui 35.0.0-alpha.0 → 35.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 +51 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,56 @@
|
|
|
1
1
|
# @mastra/playground-ui
|
|
2
2
|
|
|
3
|
+
## 35.0.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Random bump ([#18178](https://github.com/mastra-ai/mastra/pull/18178))
|
|
8
|
+
|
|
9
|
+
- Added reusable UI support for redesigned Studio panels and code surfaces. ([#17970](https://github.com/mastra-ai/mastra/pull/17970))
|
|
10
|
+
|
|
11
|
+
**Resizable panels.** Collapsing a side panel no longer reserves a wide empty rail with a permanent arrow button: the panel collapses to zero width while its content fades and slides out as one block. A ghost panel icon stays visible at the top of the edge so the panel remains discoverable, and hovering the edge or the resize handle peeks the content back in by a translucent sliver — a hint that clicking the edge opens it.
|
|
12
|
+
|
|
13
|
+
**Smooth open and close.** Expanding animates the panel width so the neighboring layout reflows smoothly instead of jumping, and a panel restored in its collapsed state first paints collapsed instead of loading open and snapping shut. Content holds a minimum width while the panel moves so text never rewraps mid-flight, and stays mounted while collapsed, preserving scroll position and inputs.
|
|
14
|
+
|
|
15
|
+
**Mobile gets drawers.** Below the mobile breakpoint, resizable side panels become near-full-width edge drawers (new `PanelDrawer` component) opened from the same ghost icon, with content kept mounted so panel state survives open/close. A new `useIsMobile` hook is exported for viewport-dependent rendering.
|
|
16
|
+
|
|
17
|
+
**CodeBlock actions.** `CodeBlock` has a new `actions` prop for controls that belong with the code surface, such as a mode toggle next to language tabs. The slot renders at the inline end of the header row in all three header modes (tabs, select, file name), and gets its own header row when no other header is present.
|
|
18
|
+
|
|
19
|
+
**Popover alignment.** `PopoverContent` now exposes collision avoidance controls so consumers can keep start-aligned popovers while still avoiding viewport overflow.
|
|
20
|
+
|
|
21
|
+
The resize wrapper also preserves the original resize callback arguments from `react-resizable-panels`, `useIsMobile` handles environments where media query APIs are unavailable, and the `SearchWithDropdown` ButtonsGroup story now keeps the segmented control heights aligned.
|
|
22
|
+
|
|
23
|
+
**Example**
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { PanelDrawer, useIsMobile, CodeBlock } from '@mastra/playground-ui';
|
|
27
|
+
|
|
28
|
+
function Panel({ code }: { code: string }) {
|
|
29
|
+
const isMobile = useIsMobile();
|
|
30
|
+
|
|
31
|
+
if (isMobile) {
|
|
32
|
+
return (
|
|
33
|
+
<PanelDrawer direction="left" label="Open panel">
|
|
34
|
+
<CodeBlock code={code} actions={<button type="button">Toggle view</button>} />
|
|
35
|
+
</PanelDrawer>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return <CodeBlock code={code} actions={<button type="button">Toggle view</button>} />;
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Patch Changes
|
|
44
|
+
|
|
45
|
+
- Improved the mobile sidebar menu to use native drawer interactions. ([#18154](https://github.com/mastra-ai/mastra/pull/18154))
|
|
46
|
+
|
|
47
|
+
- Improved mobile breakpoint detection to avoid unnecessary listener updates. ([#17970](https://github.com/mastra-ai/mastra/pull/17970))
|
|
48
|
+
|
|
49
|
+
- Updated dependencies [[`7c0d868`](https://github.com/mastra-ai/mastra/commit/7c0d868d97d0fdbc04c14d0166dbf44d4c5a4a62), [`d9d2273`](https://github.com/mastra-ai/mastra/commit/d9d2273c702690c9a26eab2aebea879701d4355a), [`b04369d`](https://github.com/mastra-ai/mastra/commit/b04369d6b167c698ef103981171a8bf92808e756), [`8f3c262`](https://github.com/mastra-ai/mastra/commit/8f3c262587b335588a02d96b17fd6aca34c885b3)]:
|
|
50
|
+
- @mastra/core@1.45.0
|
|
51
|
+
- @mastra/client-js@1.26.0
|
|
52
|
+
- @mastra/react@1.1.0
|
|
53
|
+
|
|
3
54
|
## 35.0.0-alpha.0
|
|
4
55
|
|
|
5
56
|
### Minor Changes
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mastra/playground-ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "35.0.0
|
|
4
|
+
"version": "35.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/client-js": "^1.26.0
|
|
100
|
-
"@mastra/react": "1.1.0
|
|
99
|
+
"@mastra/client-js": "^1.26.0",
|
|
100
|
+
"@mastra/react": "1.1.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.8",
|
|
137
|
-
"@mastra/
|
|
138
|
-
"@
|
|
139
|
-
"@
|
|
140
|
-
"@mastra/
|
|
137
|
+
"@mastra/core": "1.45.0",
|
|
138
|
+
"@internal/lint": "0.0.107",
|
|
139
|
+
"@mastra/react": "1.1.0",
|
|
140
|
+
"@mastra/client-js": "^1.26.0"
|
|
141
141
|
},
|
|
142
142
|
"homepage": "https://mastra.ai",
|
|
143
143
|
"repository": {
|