@mastra/playground-ui 42.0.0-alpha.17 → 42.0.0-alpha.19

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @mastra/playground-ui
 
+## 42.0.0-alpha.19
+
+### Minor Changes
+
+- Added a `revealScrollbarOnHover` prop to `ScrollArea`. Set it to `false` to keep the overlay scrollbar hidden until the user actively scrolls, instead of also revealing it when the pointer hovers the area. Defaults to `true`, so existing usage is unchanged. ([#20037](https://github.com/mastra-ai/mastra/pull/20037))
+
+  ```tsx
+  <ScrollArea revealScrollbarOnHover={false}>{content}</ScrollArea>
+  ```
+
+### Patch Changes
+
+- Added a disabled prop to DataList.SelectCell so rows can block checkbox toggling while an async selection save is pending. ([#20038](https://github.com/mastra-ai/mastra/pull/20038))
+
+## 42.0.0-alpha.18
+
+### Patch Changes
+
+- Improved sidebar density and prevented date range timelines from clipping edge labels. ([#19972](https://github.com/mastra-ai/mastra/pull/19972))
+
 ## 42.0.0-alpha.17
 
 ### Patch Changes

package/dist/components/Command.cjs.js

@@ -7,7 +7,7 @@ const cmdk = require('cmdk');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const dialog = require('../dialog-XVpF4nQ5.cjs');
-const scrollArea = require('../scroll-area-C3deZ3yj.cjs');
+const scrollArea = require('../scroll-area-BIaiA4t3.cjs');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 

package/dist/components/Command.es.js

@@ -3,7 +3,7 @@ import { Command as Command$1 } from 'cmdk';
 import { Search } from 'lucide-react';
 import * as React from 'react';
 import { D as Dialog, c as DialogContent, i as DialogTitle, d as DialogDescription } from '../dialog-DhjOHEDT.js';
-import { S as ScrollArea } from '../scroll-area-DcY6f0GS.js';
+import { S as ScrollArea } from '../scroll-area-h3DvBR0U.js';
 import { transitions } from '../primitives/transitions.es.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 

package/dist/components/Composer.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('../Composer.css');const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const scrollArea = require('../scroll-area-C3deZ3yj.cjs');
+const scrollArea = require('../scroll-area-BIaiA4t3.cjs');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
 
 const Composer = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("form", { ref, "data-slot": "composer", ...props, children }));

package/dist/components/Composer.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { S as ScrollArea } from '../scroll-area-DcY6f0GS.js';
+import { S as ScrollArea } from '../scroll-area-h3DvBR0U.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 
 import '../Composer.css';const Composer = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx("form", { ref, "data-slot": "composer", ...props, children }));

package/dist/components/DataList.cjs.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const dataList = require('../data-list-BwGRWaNd.cjs');
-const dataListSkeleton = require('../data-list-skeleton-BGvCCBtu.cjs');
+const dataList = require('../data-list-CQWBPREX.cjs');
+const dataListSkeleton = require('../data-list-skeleton-C-DkvqbS.cjs');
 const jsxRuntime = require('react/jsx-runtime');
-const dataListTopCell = require('../data-list-top-cell-CT5c7UVt.cjs');
+const dataListTopCell = require('../data-list-top-cell-CL-FVkPX.cjs');
 const dateFns = require('date-fns');
-const tracesDataList = require('../traces-data-list-Bh6onSDp.cjs');
+const tracesDataList = require('../traces-data-list-G69pEglx.cjs');
 
 function toDate(value) {
   const date = value instanceof Date ? value : new Date(value);

package/dist/components/DataList.es.js

@@ -1,9 +1,9 @@
-export { D as DataList } from '../data-list-By3xmGvT.js';
-export { D as DataListSkeleton } from '../data-list-skeleton-rDMLgcEJ.js';
+export { D as DataList } from '../data-list-Ca8j8X2e.js';
+export { D as DataListSkeleton } from '../data-list-skeleton-CIxMXF73.js';
 import { jsx } from 'react/jsx-runtime';
-import { a as DataListCell, c as DataListNextPageLoading, f as DataListNoMatch, h as DataListRowButton, k as DataListTopCell, l as DataListTop, D as DataListRoot } from '../data-list-top-cell-B5qdzDE4.js';
+import { a as DataListCell, c as DataListNextPageLoading, f as DataListNoMatch, h as DataListRowButton, k as DataListTopCell, l as DataListTop, D as DataListRoot } from '../data-list-top-cell-QZpCLDIZ.js';
 import { format, isToday } from 'date-fns';
-export { T as TracesDataList } from '../traces-data-list-DKKrObgb.js';
+export { T as TracesDataList } from '../traces-data-list-DLmFHLQ6.js';
 
 function toDate(value) {
   const date = value instanceof Date ? value : new Date(value);

package/dist/components/DateRangeTimeline.cjs.js

@@ -424,7 +424,8 @@ function getMarkerHeight(emphasis) {
   return "h-1.5";
 }
 function DateRangeTrackGrid({ markers }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 overflow-hidden rounded-lg", "aria-hidden": "true", children: markers.map((marker) => /* @__PURE__ */ jsxRuntime.jsx(
+  const interiorMarkers = markers.filter((marker) => marker.position > 0 && marker.position < 100);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0", "aria-hidden": "true", children: interiorMarkers.map((marker) => /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
       className: utils_cn.cn("absolute top-1/2 w-px -translate-1/2 bg-neutral3/15", getMarkerHeight(marker.emphasis)),
@@ -968,31 +969,40 @@ function DateRangeTimeline({ value, min, max, onCommit }) {
   });
   const boundaryModel = createDateRangeBoundaryModel(timeline.state);
   const axisModel = createDateRangeAxisModel(timeline.state);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, role: "group", "aria-label": "Date range timeline", className: "w-full overflow-x-clip select-none", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      DateRangeBoundaryPickers,
-      {
-        positions: boundaryModel.positions,
-        value: boundaryModel.range,
-        min,
-        max,
-        onSelect: timeline.selectDate
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      DateRangeTrack,
-      {
-        wheelTargetRef: rootRef,
-        timeline: timeline.state,
-        maximumIndex: timeline.maximumIndex,
-        onSelectionPreview: timeline.previewSelection,
-        onSelectionCommit: timeline.commitSelection,
-        onSelectionCancel: timeline.cancelSelection,
-        onZoom: timeline.zoom
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(DateRangeTicks, { ticks: axisModel.ticks, min, max })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootRef,
+      role: "group",
+      "aria-label": "Date range timeline",
+      className: "w-full overflow-x-clip select-none [overflow-clip-margin:0.75rem]",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DateRangeBoundaryPickers,
+          {
+            positions: boundaryModel.positions,
+            value: boundaryModel.range,
+            min,
+            max,
+            onSelect: timeline.selectDate
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DateRangeTrack,
+          {
+            wheelTargetRef: rootRef,
+            timeline: timeline.state,
+            maximumIndex: timeline.maximumIndex,
+            onSelectionPreview: timeline.previewSelection,
+            onSelectionCommit: timeline.commitSelection,
+            onSelectionCancel: timeline.cancelSelection,
+            onZoom: timeline.zoom
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(DateRangeTicks, { ticks: axisModel.ticks, min, max })
+      ]
+    }
+  );
 }
 
 exports.DateRangeTimeline = DateRangeTimeline;