@mastra/playground-ui 29.0.0-alpha.9 → 29.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 +224 -0
- package/dist/index.cjs.js +154 -88
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.css +19 -20
- package/dist/index.es.js +154 -86
- package/dist/index.es.js.map +1 -1
- package/dist/src/ds/components/AlertDialog/alert-dialog.d.ts +27 -9
- package/dist/src/ds/components/Collapsible/collapsible.d.ts +11 -4
- package/dist/src/ds/components/Table/Table.d.ts +12 -11
- package/dist/src/ds/components/Txt/Txt.d.ts +4 -3
- package/dist/src/ds/icons/Icon.d.ts +4 -3
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,229 @@
|
|
|
1
1
|
# @mastra/playground-ui
|
|
2
2
|
|
|
3
|
+
## 29.0.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Added `ContextMenu` for right-click interactions. Supports submenus, checkbox and radio items, keyboard shortcuts, and a `destructive` variant for dangerous actions like delete. ([#16791](https://github.com/mastra-ai/mastra/pull/16791))
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
import { ContextMenu } from '@mastra/playground-ui';
|
|
11
|
+
|
|
12
|
+
<ContextMenu>
|
|
13
|
+
<ContextMenu.Trigger className="…">Right click here</ContextMenu.Trigger>
|
|
14
|
+
<ContextMenu.Content>
|
|
15
|
+
<ContextMenu.Item>Rename</ContextMenu.Item>
|
|
16
|
+
<ContextMenu.Item variant="destructive">Delete</ContextMenu.Item>
|
|
17
|
+
</ContextMenu.Content>
|
|
18
|
+
</ContextMenu>;
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
- Removed `ButtonWithTooltip` from `@mastra/playground-ui`. Use `Button` with the `tooltip` prop instead. ([#16719](https://github.com/mastra-ai/mastra/pull/16719))
|
|
22
|
+
|
|
23
|
+
**Migration**
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
// before
|
|
27
|
+
import { ButtonWithTooltip } from '@mastra/playground-ui';
|
|
28
|
+
|
|
29
|
+
<ButtonWithTooltip tooltipContent="Search">
|
|
30
|
+
<Search />
|
|
31
|
+
</ButtonWithTooltip>;
|
|
32
|
+
|
|
33
|
+
// after
|
|
34
|
+
import { Button } from '@mastra/playground-ui';
|
|
35
|
+
|
|
36
|
+
<Button tooltip="Search">
|
|
37
|
+
<Search />
|
|
38
|
+
</Button>;
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
`tooltip` supports the same values as `tooltipContent`. Icon-only buttons that pass a string `tooltip` now also get it as their `aria-label` automatically, matching how labelled controls have always behaved. Pass an explicit `aria-label` to override.
|
|
42
|
+
|
|
43
|
+
- Added a custom date range option to the Metrics page date picker. You can now filter metrics by an arbitrary start and end date and time, matching the Traces page, alongside the existing relative presets (last 24 hours, 3, 7, 14, and 30 days). ([#16832](https://github.com/mastra-ai/mastra/pull/16832))
|
|
44
|
+
|
|
45
|
+
The selected range is reflected in the URL so it can be bookmarked or shared:
|
|
46
|
+
|
|
47
|
+
```txt
|
|
48
|
+
/metrics?period=custom&dateFrom=2026-05-01T00:00:00.000Z&dateTo=2026-05-07T23:59:59.999Z
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
- Refreshed Button + Card design system tokens. ([#16769](https://github.com/mastra-ai/mastra/pull/16769))
|
|
52
|
+
|
|
53
|
+
**Button variants (breaking)**: consolidated to `default`, `primary`, `outline`, `ghost`. The `cta`, `contrast`, and unused `link` variants have been removed. `primary` now uses a high-contrast `neutral6` fill instead of `surface4`, so it reads clearly as the form submit action in both themes.
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
// Before
|
|
57
|
+
<Button variant="cta">Save</Button>
|
|
58
|
+
<Button variant="contrast">Done</Button>
|
|
59
|
+
<Button variant="link">Open</Button>
|
|
60
|
+
|
|
61
|
+
// After
|
|
62
|
+
<Button variant="primary">Save</Button> // cta → primary (no brand green; theme-aware high contrast)
|
|
63
|
+
<Button variant="primary">Done</Button> // contrast → primary (same recipe, renamed)
|
|
64
|
+
<Button as="a" href="…" variant="ghost">Open</Button> // link → ghost (or plain <a> for inline text links)
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
**New tokens**: `--surface-overlay-soft` and `--surface-overlay-strong` — alpha overlays of the opposite-theme color, used by `SectionCard` header strip and `DashboardCard` fill so cards read consistently on any surface.
|
|
68
|
+
|
|
69
|
+
**Other**:
|
|
70
|
+
- DashboardCard radius reduced to `rounded-xl` and padding tightened to `px-4 py-3` for better grid density.
|
|
71
|
+
- SectionCard wrapper no longer fills its background — header strip + border carry definition.
|
|
72
|
+
- Dark `surface2` / `surface3` darkened slightly (16.84% → 16%, 19.13% → 18%) so the main frame reads as a distinct surface.
|
|
73
|
+
- Dark `border1` / `border2` alphas bumped (6% → 7%, 10% → 11%) for closer dark/light parity.
|
|
74
|
+
- Removed deprecated `--section-card-*` tokens and their `@utility` blocks.
|
|
75
|
+
|
|
76
|
+
### Patch Changes
|
|
77
|
+
|
|
78
|
+
- Added a `destructive` variant on `DropdownMenu.Item` to highlight dangerous actions like delete. ([#16791](https://github.com/mastra-ai/mastra/pull/16791))
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
<DropdownMenu.Item variant="destructive">Delete project</DropdownMenu.Item>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
- `PopoverContent` no longer forwards the underlying library's auto-focus event handlers (`onOpenAutoFocus`, `onCloseAutoFocus`). To control focus when the popover opens or closes, use `initialFocus` and `finalFocus`. ([#16791](https://github.com/mastra-ai/mastra/pull/16791))
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
// Before
|
|
88
|
+
<PopoverContent onOpenAutoFocus={(e) => e.preventDefault()} />
|
|
89
|
+
|
|
90
|
+
// After
|
|
91
|
+
<PopoverContent initialFocus={false} />
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
- Fixed a crash in filter menus with nested submenus (such as the Filter on the Agent review page) that showed "`MenuPortal` must be used within `Menu`". The submenu content now uses the design system's `DropdownMenu.SubContent` instead of the underlying library's portal directly. ([#16829](https://github.com/mastra-ai/mastra/pull/16829))
|
|
95
|
+
|
|
96
|
+
- Fixed type definitions and shared UI component types for `@mastra/playground-ui`. ([#16213](https://github.com/mastra-ai/mastra/pull/16213))
|
|
97
|
+
|
|
98
|
+
- `AlertDialog`'s API and behavior are unchanged — `asChild` on `AlertDialog.Trigger`, and `AlertDialog.Action` and `AlertDialog.Cancel`, all work exactly as before. (Internally it now builds on Base UI primitives.) ([#16824](https://github.com/mastra-ai/mastra/pull/16824))
|
|
99
|
+
|
|
100
|
+
- Moved the `Collapsible` component to Base UI, with a smoother height-based expand and collapse animation. The public API is unchanged — `asChild` on `CollapsibleTrigger` still works. ([#16825](https://github.com/mastra-ai/mastra/pull/16825))
|
|
101
|
+
|
|
102
|
+
- Upgraded `@base-ui/react` to 1.5, making popups noticeably faster — components built on Base UI such as `Tooltip`, `Popover`, `DropdownMenu` and `ContextMenu` now open and close more quickly. ([#16819](https://github.com/mastra-ai/mastra/pull/16819))
|
|
103
|
+
|
|
104
|
+
- Moved the Level icon from its own column into the Name column, next to the trace name, on the Observability traces list. ([#16712](https://github.com/mastra-ai/mastra/pull/16712))
|
|
105
|
+
|
|
106
|
+
- The Traces list now updates live via delta polling. Previously the list was refetched every 10 seconds, replacing the whole page with no signal about what changed; now new traces appear within a few seconds of being created, with a brief highlight to draw attention. Status changes on already-visible rows (running → success / error) also propagate without intervention, and returning to the tab after being idle re-syncs from a fresh cursor. ([#16727](https://github.com/mastra-ai/mastra/pull/16727))
|
|
107
|
+
|
|
108
|
+
**New `useTraces` return fields**
|
|
109
|
+
- `isRefetching` — true while any meaningful refetch is in flight. Use it to drive a heartbeat indicator.
|
|
110
|
+
- `autoRefetch` / `setAutoRefetch` — pause / resume all automatic polling so the consumer can render an opt-out toggle.
|
|
111
|
+
- `recentlyAddedKeys` — `Set<string>` of `traceId:spanId` for rows that just arrived via delta polling. Drives the temporary highlight in `TracesListView`.
|
|
112
|
+
|
|
113
|
+
**New polling config**
|
|
114
|
+
|
|
115
|
+
Every timing in the hook is tunable per-instance via a new `polling` option:
|
|
116
|
+
|
|
117
|
+
```ts
|
|
118
|
+
import { useTraces, type TracesPollingConfig } from '@mastra/playground-ui';
|
|
119
|
+
|
|
120
|
+
useTraces({
|
|
121
|
+
filters,
|
|
122
|
+
listMode,
|
|
123
|
+
polling: {
|
|
124
|
+
deltaPollIntervalMs: 10_000,
|
|
125
|
+
idleGuardThresholdMs: 5 * 60_000,
|
|
126
|
+
},
|
|
127
|
+
});
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
Omitted fields fall through to the defaults (delta poll every 5s, idle reset after 15 min, status refresh every 60s, etc).
|
|
131
|
+
|
|
132
|
+
**TracesListView**
|
|
133
|
+
|
|
134
|
+
New optional `recentlyAddedKeys?: Set<string>` prop. Rows whose `traceId:spanId` is in the set get the `animate-row-highlight` class — a brief fade-out to transparent, added to `index.css`.
|
|
135
|
+
|
|
136
|
+
**Compatibility**
|
|
137
|
+
|
|
138
|
+
Requires `@mastra/server` and `@mastra/client-js` at the versions that ship the observability delta-polling endpoints, and a store that opts into delta polling (`@mastra/clickhouse`, `@mastra/duckdb`, and the in-memory store today). When unavailable — older server or a store without delta capability — the hook silently falls back to page-mode interval refetching. No consumer changes required.
|
|
139
|
+
|
|
140
|
+
- Added `align` and `stack` variants to `PageLayout.Row`. Use `stack="responsive"` for top bars that should collapse to a vertical stack on narrow viewports, and `align="center"` to vertically center children. Applied the new variants to the Prompts and Workflows top bars so the search field and primary action share a single row on desktop and stack on mobile. ([#16714](https://github.com/mastra-ai/mastra/pull/16714))
|
|
141
|
+
|
|
142
|
+
```tsx
|
|
143
|
+
<PageLayout.Row align="center" stack="responsive">
|
|
144
|
+
<ListSearch ... />
|
|
145
|
+
<Button ...>Create</Button>
|
|
146
|
+
</PageLayout.Row>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
- Fixed the playground memory configuration display for agents using observationalMemory: true. ([#16213](https://github.com/mastra-ai/mastra/pull/16213))
|
|
150
|
+
|
|
151
|
+
- Fixed double-counted cache token costs in the Metrics dashboard. The Model Usage & Cost table and the Token Usage by Agent table were summing cache read/write costs on top of the total input cost, which already includes them. ([#16737](https://github.com/mastra-ai/mastra/pull/16737))
|
|
152
|
+
|
|
153
|
+
- Migrated the Tooltip primitive to Base UI while preserving the existing API. The popup explicitly sets `role="tooltip"` so consumers can keep querying it via `getByRole('tooltip')` (Base UI does not add this role automatically). Existing `<TooltipTrigger asChild>` usage continues to work unchanged, and Base UI's native `render` prop is now also supported on `TooltipTrigger` so consumers wrapping anchors, custom router links, or icons can pass the element directly without an `asChild` adapter: ([#16713](https://github.com/mastra-ai/mastra/pull/16713))
|
|
154
|
+
|
|
155
|
+
```tsx
|
|
156
|
+
// Still supported
|
|
157
|
+
<TooltipTrigger asChild>
|
|
158
|
+
<Button>Save</Button>
|
|
159
|
+
</TooltipTrigger>
|
|
160
|
+
|
|
161
|
+
// New: pass the element via Base UI's native API
|
|
162
|
+
<TooltipTrigger render={<Button>Save</Button>} />
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
Also fixed the arrow rendering so the diagonal stroke meets the popup outline at the exact same pixel center on every side, removing the ~1px seam previously visible where the arrow joined the popup edge.
|
|
166
|
+
|
|
167
|
+
- Migrated the Slider component to base-ui with a refined neutral visual design. ([#16788](https://github.com/mastra-ai/mastra/pull/16788))
|
|
168
|
+
|
|
169
|
+
**What changed**
|
|
170
|
+
- Replaced `@radix-ui/react-slider` with `@base-ui/react/slider` as the underlying primitive
|
|
171
|
+
- Refreshed visuals: thin rounded thumb with white border and neutral inside, opacity-based track that adapts to any surface, neutral filled indicator (no green/accent color)
|
|
172
|
+
- Larger click target via padded `Slider.Control` and an invisible hit area on the thumb so it is easier to grab
|
|
173
|
+
- Added `cursor-pointer` on the control and `cursor-not-allowed` when disabled
|
|
174
|
+
- Removed the now unused `@radix-ui/react-slider` and `@radix-ui/react-tabs` dependencies
|
|
175
|
+
|
|
176
|
+
**API compatibility**
|
|
177
|
+
|
|
178
|
+
The public API is preserved. `onValueChange` and `onValueCommitted` are wrapped so consumers always receive `number[]`, even though base-ui returns `number | number[]` internally. Existing call sites like `<Slider value={[temperature]} onValueChange={value => setTemperature(value[0])} />` continue to work without changes.
|
|
179
|
+
|
|
180
|
+
- Moved the `Dialog` component to Base UI. The public API is unchanged — `asChild` on `DialogTrigger` and `DialogClose` still works the same way, and open/close animations behave as before. ([#16821](https://github.com/mastra-ai/mastra/pull/16821))
|
|
181
|
+
|
|
182
|
+
- Updated dependencies [[`452036a`](https://github.com/mastra-ai/mastra/commit/452036a0d965b4f4c1efd93606e4f03b50b807a5), [`c272d50`](https://github.com/mastra-ai/mastra/commit/c272d50610a54496b6b6d92ccd4d37b333a2613a), [`27fd1b7`](https://github.com/mastra-ai/mastra/commit/27fd1b79ac62eb7694f92587eb7d1be05b59be01), [`5ba7253`](https://github.com/mastra-ai/mastra/commit/5ba7253745c85e8df8012a76d954c640ffa336f7), [`6b25032`](https://github.com/mastra-ai/mastra/commit/6b250329fa4795b4d085cba4077c7998893c1d59), [`5556cc1`](https://github.com/mastra-ai/mastra/commit/5556cc1befec71518d84f826b3bfe3a079a9daf7), [`f73980d`](https://github.com/mastra-ai/mastra/commit/f73980d651eb5f7f1ab20582de4615a1b6f10fce), [`5499303`](https://github.com/mastra-ai/mastra/commit/54993032c1ebc09642625b78d2014e0cf84a3cae), [`a702009`](https://github.com/mastra-ai/mastra/commit/a702009d3cfaa745120f501e21c783ed4d6a3072), [`9aee493`](https://github.com/mastra-ai/mastra/commit/9aee493ed6089b5133472623dcce49934bf2d509), [`d8692af`](https://github.com/mastra-ai/mastra/commit/d8692afa253028e39cdce2aafa0ac414071a762e), [`1a9cc60`](https://github.com/mastra-ai/mastra/commit/1a9cc6069f9910fc3d59e4953ac8cd95d89ad6f5), [`8cdb86c`](https://github.com/mastra-ai/mastra/commit/8cdb86ceed1137bc2768e147dce85a0692b9fb26), [`bd92c15`](https://github.com/mastra-ai/mastra/commit/bd92c154238ce5d05e12d5477da07c7b7292c5e3), [`8534d79`](https://github.com/mastra-ai/mastra/commit/8534d791fa1cb70fe1c19e2604c4b63cc10dd051), [`9692d60`](https://github.com/mastra-ai/mastra/commit/9692d60298e8f629d10de54867642a38955fb708), [`eda90c5`](https://github.com/mastra-ai/mastra/commit/eda90c5bfd7de11805ecc9f4552716c895fbaf78), [`a935b0a`](https://github.com/mastra-ai/mastra/commit/a935b0a0977ae3f196b33ec7621f528069c82db0), [`9c88701`](https://github.com/mastra-ai/mastra/commit/9c8870195b41a38dc40b6ba2aa55eda04df8fa69), [`9c88701`](https://github.com/mastra-ai/mastra/commit/9c8870195b41a38dc40b6ba2aa55eda04df8fa69), [`3498b49`](https://github.com/mastra-ai/mastra/commit/3498b4946be94f4313cd817733589680dcda5278), [`c78f8cd`](https://github.com/mastra-ai/mastra/commit/c78f8cd6222a86e6c60ae5210b6929ad5221b6fb), [`e146aad`](https://github.com/mastra-ai/mastra/commit/e146aadbba66c410ba0e74bac4c50135495cb8dd), [`ac79462`](https://github.com/mastra-ai/mastra/commit/ac79462b98f1062394c45093aa515b0766f27ee2), [`1a0ec78`](https://github.com/mastra-ai/mastra/commit/1a0ec789a26cae443744e9abbd62ed6ee676af39), [`e47bca7`](https://github.com/mastra-ai/mastra/commit/e47bca7b72866d3abd173b9f530ac4318113a8ff), [`afc004f`](https://github.com/mastra-ai/mastra/commit/afc004f5cc7e30697809e7021820b9f5881e6719), [`0031d0f`](https://github.com/mastra-ai/mastra/commit/0031d0f13831d7843ac5d498734a7d92862e2ce3), [`841a222`](https://github.com/mastra-ai/mastra/commit/841a222560d8c19238f8213713f30535cdd82284), [`64c1e0b`](https://github.com/mastra-ai/mastra/commit/64c1e0b35165c96b659818bd0177aa18794ef11f), [`a935b0a`](https://github.com/mastra-ai/mastra/commit/a935b0a0977ae3f196b33ec7621f528069c82db0), [`bd92c15`](https://github.com/mastra-ai/mastra/commit/bd92c154238ce5d05e12d5477da07c7b7292c5e3), [`40d83a9`](https://github.com/mastra-ai/mastra/commit/40d83a90d9be31a1b83e04649edb703eb7753e33), [`4e88dc6`](https://github.com/mastra-ai/mastra/commit/4e88dc6b89f154c0eae37221c8126be0c23c569f), [`19018f0`](https://github.com/mastra-ai/mastra/commit/19018f05722af74a5978781a7731a654b26f7f2a), [`19281c7`](https://github.com/mastra-ai/mastra/commit/19281c70424f757219782de16c2699743c5e04d0), [`3498b49`](https://github.com/mastra-ai/mastra/commit/3498b4946be94f4313cd817733589680dcda5278), [`d52b6fe`](https://github.com/mastra-ai/mastra/commit/d52b6fe1c56853eb38864baae0bbfa75cc739ccb), [`408be73`](https://github.com/mastra-ai/mastra/commit/408be73449dfab92b51eab8c6623b6c443debc25), [`359439b`](https://github.com/mastra-ai/mastra/commit/359439bb8c635e048176306828195f8297f50021), [`71a820b`](https://github.com/mastra-ai/mastra/commit/71a820b2353fa1406772c50760a3732058a8b337), [`1698f5e`](https://github.com/mastra-ai/mastra/commit/1698f5ec141d34f22a873efdb145ce3cdf848a5e)]:
|
|
183
|
+
- @mastra/core@1.36.0
|
|
184
|
+
- @mastra/client-js@1.20.0
|
|
185
|
+
- @mastra/react@0.4.0
|
|
186
|
+
|
|
187
|
+
## 29.0.0-alpha.11
|
|
188
|
+
|
|
189
|
+
### Minor Changes
|
|
190
|
+
|
|
191
|
+
- Added a custom date range option to the Metrics page date picker. You can now filter metrics by an arbitrary start and end date and time, matching the Traces page, alongside the existing relative presets (last 24 hours, 3, 7, 14, and 30 days). ([#16832](https://github.com/mastra-ai/mastra/pull/16832))
|
|
192
|
+
|
|
193
|
+
The selected range is reflected in the URL so it can be bookmarked or shared:
|
|
194
|
+
|
|
195
|
+
```txt
|
|
196
|
+
/metrics?period=custom&dateFrom=2026-05-01T00:00:00.000Z&dateTo=2026-05-07T23:59:59.999Z
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
### Patch Changes
|
|
200
|
+
|
|
201
|
+
- Updated dependencies [[`27fd1b7`](https://github.com/mastra-ai/mastra/commit/27fd1b79ac62eb7694f92587eb7d1be05b59be01), [`a702009`](https://github.com/mastra-ai/mastra/commit/a702009d3cfaa745120f501e21c783ed4d6a3072), [`8534d79`](https://github.com/mastra-ai/mastra/commit/8534d791fa1cb70fe1c19e2604c4b63cc10dd051), [`c78f8cd`](https://github.com/mastra-ai/mastra/commit/c78f8cd6222a86e6c60ae5210b6929ad5221b6fb), [`e146aad`](https://github.com/mastra-ai/mastra/commit/e146aadbba66c410ba0e74bac4c50135495cb8dd), [`1a0ec78`](https://github.com/mastra-ai/mastra/commit/1a0ec789a26cae443744e9abbd62ed6ee676af39), [`d52b6fe`](https://github.com/mastra-ai/mastra/commit/d52b6fe1c56853eb38864baae0bbfa75cc739ccb)]:
|
|
202
|
+
- @mastra/core@1.36.0-alpha.10
|
|
203
|
+
- @mastra/client-js@1.20.0-alpha.10
|
|
204
|
+
- @mastra/react@0.4.0-alpha.10
|
|
205
|
+
|
|
206
|
+
## 29.0.0-alpha.10
|
|
207
|
+
|
|
208
|
+
### Patch Changes
|
|
209
|
+
|
|
210
|
+
- Fixed a crash in filter menus with nested submenus (such as the Filter on the Agent review page) that showed "`MenuPortal` must be used within `Menu`". The submenu content now uses the design system's `DropdownMenu.SubContent` instead of the underlying library's portal directly. ([#16829](https://github.com/mastra-ai/mastra/pull/16829))
|
|
211
|
+
|
|
212
|
+
- Fixed type definitions and shared UI component types for `@mastra/playground-ui`. ([#16213](https://github.com/mastra-ai/mastra/pull/16213))
|
|
213
|
+
|
|
214
|
+
- `AlertDialog`'s API and behavior are unchanged — `asChild` on `AlertDialog.Trigger`, and `AlertDialog.Action` and `AlertDialog.Cancel`, all work exactly as before. (Internally it now builds on Base UI primitives.) ([#16824](https://github.com/mastra-ai/mastra/pull/16824))
|
|
215
|
+
|
|
216
|
+
- Moved the `Collapsible` component to Base UI, with a smoother height-based expand and collapse animation. The public API is unchanged — `asChild` on `CollapsibleTrigger` still works. ([#16825](https://github.com/mastra-ai/mastra/pull/16825))
|
|
217
|
+
|
|
218
|
+
- Upgraded `@base-ui/react` to 1.5, making popups noticeably faster — components built on Base UI such as `Tooltip`, `Popover`, `DropdownMenu` and `ContextMenu` now open and close more quickly. ([#16819](https://github.com/mastra-ai/mastra/pull/16819))
|
|
219
|
+
|
|
220
|
+
- Fixed the playground memory configuration display for agents using observationalMemory: true. ([#16213](https://github.com/mastra-ai/mastra/pull/16213))
|
|
221
|
+
|
|
222
|
+
- Updated dependencies [[`bd92c15`](https://github.com/mastra-ai/mastra/commit/bd92c154238ce5d05e12d5477da07c7b7292c5e3), [`bd92c15`](https://github.com/mastra-ai/mastra/commit/bd92c154238ce5d05e12d5477da07c7b7292c5e3), [`1698f5e`](https://github.com/mastra-ai/mastra/commit/1698f5ec141d34f22a873efdb145ce3cdf848a5e)]:
|
|
223
|
+
- @mastra/client-js@1.20.0-alpha.9
|
|
224
|
+
- @mastra/core@1.36.0-alpha.9
|
|
225
|
+
- @mastra/react@0.4.0-alpha.9
|
|
226
|
+
|
|
3
227
|
## 29.0.0-alpha.9
|
|
4
228
|
|
|
5
229
|
### Patch Changes
|
package/dist/index.cjs.js
CHANGED
|
@@ -19,9 +19,9 @@ const autocomplete = require('@codemirror/autocomplete');
|
|
|
19
19
|
const lucideReact = require('lucide-react');
|
|
20
20
|
const sonner = require('sonner');
|
|
21
21
|
const react = require('@mastra/react');
|
|
22
|
-
const
|
|
22
|
+
const alertDialog = require('@base-ui/react/alert-dialog');
|
|
23
23
|
const CheckboxPrimitive = require('@radix-ui/react-checkbox');
|
|
24
|
-
const
|
|
24
|
+
const collapsible = require('@base-ui/react/collapsible');
|
|
25
25
|
const combobox = require('@base-ui/react/combobox');
|
|
26
26
|
const cmdk = require('cmdk');
|
|
27
27
|
const dialog = require('@base-ui/react/dialog');
|
|
@@ -47,7 +47,6 @@ const dnd = require('@hello-pangea/dnd');
|
|
|
47
47
|
const merge = require('@codemirror/merge');
|
|
48
48
|
const format = require('date-fns/format');
|
|
49
49
|
const isToday = require('date-fns/isToday');
|
|
50
|
-
const reactDropdownMenu = require('@radix-ui/react-dropdown-menu');
|
|
51
50
|
const search = require('@codemirror/search');
|
|
52
51
|
const recharts = require('recharts');
|
|
53
52
|
const reactResizablePanels = require('react-resizable-panels');
|
|
@@ -75,9 +74,7 @@ function _interopNamespaceDefault(e) {
|
|
|
75
74
|
}
|
|
76
75
|
|
|
77
76
|
const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
78
|
-
const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
|
|
79
77
|
const CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CheckboxPrimitive);
|
|
80
|
-
const CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
|
|
81
78
|
const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
|
|
82
79
|
const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(VisuallyHidden);
|
|
83
80
|
const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
|
|
@@ -6065,9 +6062,7 @@ const Textarea = React__namespace.forwardRef(
|
|
|
6065
6062
|
);
|
|
6066
6063
|
Textarea.displayName = "Textarea";
|
|
6067
6064
|
|
|
6068
|
-
const AlertDialogRoot =
|
|
6069
|
-
const AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
|
|
6070
|
-
const AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
|
|
6065
|
+
const AlertDialogRoot = alertDialog.AlertDialog.Root;
|
|
6071
6066
|
function AlertDialog({
|
|
6072
6067
|
open,
|
|
6073
6068
|
onOpenChange,
|
|
@@ -6075,21 +6070,30 @@ function AlertDialog({
|
|
|
6075
6070
|
}) {
|
|
6076
6071
|
return /* @__PURE__ */ jsxRuntime.jsx(AlertDialogRoot, { open, onOpenChange, children });
|
|
6077
6072
|
}
|
|
6073
|
+
const AlertDialogTrigger = React__namespace.forwardRef(
|
|
6074
|
+
({ asChild, children, ...props }, ref) => {
|
|
6075
|
+
const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : {};
|
|
6076
|
+
return /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog.Trigger, { ref, ...renderProps, ...props, children: asChild ? void 0 : children });
|
|
6077
|
+
}
|
|
6078
|
+
);
|
|
6079
|
+
AlertDialogTrigger.displayName = "AlertDialogTrigger";
|
|
6080
|
+
const AlertDialogPortal = alertDialog.AlertDialog.Portal;
|
|
6078
6081
|
const AlertDialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
6079
|
-
|
|
6082
|
+
alertDialog.AlertDialog.Backdrop,
|
|
6080
6083
|
{
|
|
6081
6084
|
ref,
|
|
6082
6085
|
className: cn("dialog-overlay-anim fixed inset-0 z-50 bg-overlay backdrop-blur-xs", className),
|
|
6083
6086
|
...props
|
|
6084
6087
|
}
|
|
6085
6088
|
));
|
|
6086
|
-
AlertDialogOverlay.displayName =
|
|
6089
|
+
AlertDialogOverlay.displayName = "AlertDialogOverlay";
|
|
6087
6090
|
const AlertDialogContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
|
|
6088
6091
|
/* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
|
|
6089
6092
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6090
|
-
|
|
6093
|
+
alertDialog.AlertDialog.Popup,
|
|
6091
6094
|
{
|
|
6092
6095
|
ref,
|
|
6096
|
+
"data-slot": "alert-dialog-content",
|
|
6093
6097
|
className: cn(
|
|
6094
6098
|
"dialog-content-anim",
|
|
6095
6099
|
"fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%]",
|
|
@@ -6101,35 +6105,41 @@ const AlertDialogContent = React__namespace.forwardRef(({ className, ...props },
|
|
|
6101
6105
|
}
|
|
6102
6106
|
)
|
|
6103
6107
|
] }));
|
|
6104
|
-
AlertDialogContent.displayName =
|
|
6108
|
+
AlertDialogContent.displayName = "AlertDialogContent";
|
|
6105
6109
|
const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-0.5 px-4 py-3 text-left", className), ...props });
|
|
6106
6110
|
AlertDialogHeader.displayName = "AlertDialogHeader";
|
|
6107
6111
|
const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse gap-1.5 px-4 py-2.5 sm:flex-row sm:justify-end", className), ...props });
|
|
6108
6112
|
AlertDialogFooter.displayName = "AlertDialogFooter";
|
|
6109
6113
|
const AlertDialogBody = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-y-auto px-4 py-3.5 max-h-[50vh]", className), ...props });
|
|
6110
6114
|
AlertDialogBody.displayName = "AlertDialogBody";
|
|
6111
|
-
const AlertDialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
6112
|
-
AlertDialogTitle.displayName =
|
|
6113
|
-
const AlertDialogDescription = React__namespace.forwardRef(
|
|
6114
|
-
|
|
6115
|
-
|
|
6116
|
-
|
|
6117
|
-
|
|
6118
|
-
|
|
6119
|
-
|
|
6120
|
-
|
|
6121
|
-
|
|
6122
|
-
))
|
|
6123
|
-
|
|
6124
|
-
|
|
6125
|
-
|
|
6126
|
-
|
|
6127
|
-
|
|
6128
|
-
|
|
6129
|
-
|
|
6130
|
-
|
|
6131
|
-
|
|
6132
|
-
|
|
6115
|
+
const AlertDialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog.Title, { ref, className: cn("text-ui-md font-medium", className), ...props }));
|
|
6116
|
+
AlertDialogTitle.displayName = "AlertDialogTitle";
|
|
6117
|
+
const AlertDialogDescription = React__namespace.forwardRef(
|
|
6118
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog.Description, { ref, className: cn("text-ui-sm text-neutral3", className), ...props })
|
|
6119
|
+
);
|
|
6120
|
+
AlertDialogDescription.displayName = "AlertDialogDescription";
|
|
6121
|
+
const AlertDialogAction = React__namespace.forwardRef(
|
|
6122
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
6123
|
+
alertDialog.AlertDialog.Close,
|
|
6124
|
+
{
|
|
6125
|
+
ref,
|
|
6126
|
+
className: cn(buttonVariants({ variant: "primary", size: "default" }), className),
|
|
6127
|
+
...props
|
|
6128
|
+
}
|
|
6129
|
+
)
|
|
6130
|
+
);
|
|
6131
|
+
AlertDialogAction.displayName = "AlertDialogAction";
|
|
6132
|
+
const AlertDialogCancel = React__namespace.forwardRef(
|
|
6133
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
6134
|
+
alertDialog.AlertDialog.Close,
|
|
6135
|
+
{
|
|
6136
|
+
ref,
|
|
6137
|
+
className: cn(buttonVariants({ variant: "default", size: "default" }), className),
|
|
6138
|
+
...props
|
|
6139
|
+
}
|
|
6140
|
+
)
|
|
6141
|
+
);
|
|
6142
|
+
AlertDialogCancel.displayName = "AlertDialogCancel";
|
|
6133
6143
|
AlertDialog.Trigger = AlertDialogTrigger;
|
|
6134
6144
|
AlertDialog.Portal = AlertDialogPortal;
|
|
6135
6145
|
AlertDialog.Overlay = AlertDialogOverlay;
|
|
@@ -6172,41 +6182,54 @@ const Checkbox = React__namespace.forwardRef(({ className, ...props }, ref) => /
|
|
|
6172
6182
|
));
|
|
6173
6183
|
Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
|
|
6174
6184
|
|
|
6175
|
-
const Collapsible =
|
|
6176
|
-
const CollapsibleTrigger = React.forwardRef(
|
|
6177
|
-
|
|
6178
|
-
|
|
6179
|
-
|
|
6180
|
-
|
|
6181
|
-
|
|
6182
|
-
|
|
6183
|
-
|
|
6184
|
-
|
|
6185
|
-
|
|
6186
|
-
|
|
6187
|
-
|
|
6188
|
-
|
|
6189
|
-
|
|
6190
|
-
|
|
6191
|
-
|
|
6192
|
-
)
|
|
6193
|
-
|
|
6194
|
-
|
|
6195
|
-
|
|
6196
|
-
|
|
6197
|
-
|
|
6198
|
-
className: cn(
|
|
6199
|
-
"overflow-hidden",
|
|
6200
|
-
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-1",
|
|
6201
|
-
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-1",
|
|
6202
|
-
"duration-normal ease-out-custom",
|
|
6203
|
-
className
|
|
6204
|
-
),
|
|
6205
|
-
...props,
|
|
6206
|
-
children
|
|
6185
|
+
const Collapsible = collapsible.Collapsible.Root;
|
|
6186
|
+
const CollapsibleTrigger = React.forwardRef(
|
|
6187
|
+
({ className, asChild, children, ...props }, ref) => {
|
|
6188
|
+
const renderProps = asChild && React.isValidElement(children) ? { render: children } : {};
|
|
6189
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
6190
|
+
collapsible.Collapsible.Trigger,
|
|
6191
|
+
{
|
|
6192
|
+
ref,
|
|
6193
|
+
"data-slot": "collapsible-trigger",
|
|
6194
|
+
className: cn(
|
|
6195
|
+
"-outline-offset-2",
|
|
6196
|
+
transitions.colors,
|
|
6197
|
+
focusRing.visible,
|
|
6198
|
+
"hover:text-neutral5",
|
|
6199
|
+
"[&>svg]:transition-transform [&>svg]:duration-normal [&>svg]:ease-out-custom",
|
|
6200
|
+
"[&[data-panel-open]>svg]:rotate-90",
|
|
6201
|
+
className
|
|
6202
|
+
),
|
|
6203
|
+
...renderProps,
|
|
6204
|
+
...props,
|
|
6205
|
+
children: asChild ? void 0 : children
|
|
6206
|
+
}
|
|
6207
|
+
);
|
|
6207
6208
|
}
|
|
6208
|
-
)
|
|
6209
|
-
|
|
6209
|
+
);
|
|
6210
|
+
CollapsibleTrigger.displayName = "CollapsibleTrigger";
|
|
6211
|
+
const CollapsibleContent = React.forwardRef(
|
|
6212
|
+
({ className, children, ...props }, ref) => (
|
|
6213
|
+
// Base UI animates the panel's `height` between 0 and `--collapsible-panel-height`.
|
|
6214
|
+
// Padding/margin/borders must live on an inner wrapper — if applied to the panel
|
|
6215
|
+
// itself they keep it from collapsing to 0, which makes the animation jump.
|
|
6216
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6217
|
+
collapsible.Collapsible.Panel,
|
|
6218
|
+
{
|
|
6219
|
+
ref,
|
|
6220
|
+
"data-slot": "collapsible-content",
|
|
6221
|
+
className: cn(
|
|
6222
|
+
"overflow-hidden",
|
|
6223
|
+
"h-[var(--collapsible-panel-height)] transition-[height] duration-normal ease-out-custom",
|
|
6224
|
+
"data-[starting-style]:h-0 data-[ending-style]:h-0"
|
|
6225
|
+
),
|
|
6226
|
+
...props,
|
|
6227
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children })
|
|
6228
|
+
}
|
|
6229
|
+
)
|
|
6230
|
+
)
|
|
6231
|
+
);
|
|
6232
|
+
CollapsibleContent.displayName = "CollapsibleContent";
|
|
6210
6233
|
|
|
6211
6234
|
const comboboxStyles = {
|
|
6212
6235
|
/** Root wrapper */
|
|
@@ -12944,15 +12967,6 @@ const Tree = Object.assign(TreeRoot, {
|
|
|
12944
12967
|
});
|
|
12945
12968
|
|
|
12946
12969
|
const SUBMENU_SEARCH_THRESHOLD = 6;
|
|
12947
|
-
const subContentClass = cn(
|
|
12948
|
-
"bg-surface5 backdrop-blur-xl z-50 min-w-[8rem] overflow-auto rounded-lg p-2 shadow-md",
|
|
12949
|
-
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
12950
|
-
"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
|
|
12951
|
-
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
|
|
12952
|
-
);
|
|
12953
|
-
function PortalSubContent({ className, children, ...props }) {
|
|
12954
|
-
return /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.SubContent, { className: cn(subContentClass, className), ...props, children }) });
|
|
12955
|
-
}
|
|
12956
12970
|
function SubMenuSearch({
|
|
12957
12971
|
value,
|
|
12958
12972
|
onChange,
|
|
@@ -13057,7 +13071,7 @@ function SelectDataFilter({
|
|
|
13057
13071
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate"), children: cat.label }),
|
|
13058
13072
|
selectedCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-ui-sm text-accent1"), children: selectedCount })
|
|
13059
13073
|
] }),
|
|
13060
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
13074
|
+
/* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.SubContent, { className: cn("max-h-[20rem]"), children: [
|
|
13061
13075
|
cat.values.length >= searchThreshold && /* @__PURE__ */ jsxRuntime.jsx(SubMenuSearch, { value: subSearch, onChange: setSubSearch, label: `Search ${cat.label.toLowerCase()}` }),
|
|
13062
13076
|
mode === "single" ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.RadioGroup, { value: selected[0] ?? "", onValueChange: (val) => handleSelect(cat.id, val, mode), children: cat.values.filter((v) => !subSearch || v.label.toLowerCase().includes(subSearch.toLowerCase())).map((v) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.RadioItem, { value: v.value, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate"), children: v.label }) }, v.value)) }) : cat.values.filter((v) => !subSearch || v.label.toLowerCase().includes(subSearch.toLowerCase())).map((v) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
13063
13077
|
DropdownMenu.CheckboxItem,
|
|
@@ -13121,7 +13135,7 @@ function SelectDataFilter({
|
|
|
13121
13135
|
}
|
|
13122
13136
|
return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.Sub, { children: [
|
|
13123
13137
|
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.SubTrigger, { children: group.label }),
|
|
13124
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13138
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.SubContent, { className: cn("max-h-[20rem]"), children: group.items.map((cat) => renderCategory(cat)) })
|
|
13125
13139
|
] }, group.key);
|
|
13126
13140
|
}),
|
|
13127
13141
|
activeFilterCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -16769,18 +16783,70 @@ function MetricsProvider({
|
|
|
16769
16783
|
return /* @__PURE__ */ jsxRuntime.jsx(MetricsContext.Provider, { value, children });
|
|
16770
16784
|
}
|
|
16771
16785
|
|
|
16786
|
+
const METRICS_PRESETS = [
|
|
16787
|
+
"last-24h",
|
|
16788
|
+
"last-3d",
|
|
16789
|
+
"last-7d",
|
|
16790
|
+
"last-14d",
|
|
16791
|
+
"last-30d",
|
|
16792
|
+
"custom"
|
|
16793
|
+
];
|
|
16794
|
+
function toPickerPreset(preset) {
|
|
16795
|
+
switch (preset) {
|
|
16796
|
+
case "3d":
|
|
16797
|
+
return "last-3d";
|
|
16798
|
+
case "7d":
|
|
16799
|
+
return "last-7d";
|
|
16800
|
+
case "14d":
|
|
16801
|
+
return "last-14d";
|
|
16802
|
+
case "30d":
|
|
16803
|
+
return "last-30d";
|
|
16804
|
+
case "custom":
|
|
16805
|
+
return "custom";
|
|
16806
|
+
default:
|
|
16807
|
+
return "last-24h";
|
|
16808
|
+
}
|
|
16809
|
+
}
|
|
16810
|
+
function fromPickerPreset(preset) {
|
|
16811
|
+
switch (preset) {
|
|
16812
|
+
case "last-3d":
|
|
16813
|
+
return "3d";
|
|
16814
|
+
case "last-7d":
|
|
16815
|
+
return "7d";
|
|
16816
|
+
case "last-14d":
|
|
16817
|
+
return "14d";
|
|
16818
|
+
case "last-30d":
|
|
16819
|
+
return "30d";
|
|
16820
|
+
case "custom":
|
|
16821
|
+
return "custom";
|
|
16822
|
+
default:
|
|
16823
|
+
return "24h";
|
|
16824
|
+
}
|
|
16825
|
+
}
|
|
16772
16826
|
function DateRangeSelector() {
|
|
16773
|
-
const { datePreset, setDatePreset } = useMetrics();
|
|
16827
|
+
const { datePreset, setDatePreset, customRange, setCustomRange } = useMetrics();
|
|
16828
|
+
const presetRef = React.useRef(datePreset);
|
|
16829
|
+
presetRef.current = datePreset;
|
|
16830
|
+
const customRangeRef = React.useRef(customRange);
|
|
16831
|
+
customRangeRef.current = customRange;
|
|
16774
16832
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
16775
|
-
|
|
16833
|
+
DateTimeRangePicker,
|
|
16776
16834
|
{
|
|
16777
|
-
|
|
16778
|
-
|
|
16779
|
-
|
|
16780
|
-
|
|
16781
|
-
|
|
16782
|
-
|
|
16783
|
-
|
|
16835
|
+
preset: toPickerPreset(datePreset),
|
|
16836
|
+
onPresetChange: (next) => {
|
|
16837
|
+
const mapped = fromPickerPreset(next);
|
|
16838
|
+
presetRef.current = mapped;
|
|
16839
|
+
setDatePreset(mapped);
|
|
16840
|
+
},
|
|
16841
|
+
dateFrom: customRange?.from,
|
|
16842
|
+
dateTo: customRange?.to,
|
|
16843
|
+
onDateChange: (value, type) => {
|
|
16844
|
+
if (presetRef.current !== "custom") return;
|
|
16845
|
+
const next = { ...customRangeRef.current, [type]: value };
|
|
16846
|
+
customRangeRef.current = next;
|
|
16847
|
+
setCustomRange(next);
|
|
16848
|
+
},
|
|
16849
|
+
presets: METRICS_PRESETS
|
|
16784
16850
|
}
|
|
16785
16851
|
);
|
|
16786
16852
|
}
|