@mastra/playground-ui 24.0.2-alpha.0 → 24.0.2-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @mastra/playground-ui
 
+## 24.0.2-alpha.1
+
+### Patch Changes
+
+- Updated the look and motion of `Dialog`. The surface is now lighter and translucent with a subtle backdrop blur, the typography is tighter, and the open/close animation feels snappier. `SideDialog` and `AlertDialog` pick up the refined ambient shadow as well, since they share the same shadow style. ([#15958](https://github.com/mastra-ai/mastra/pull/15958))
+
+- Polished DataList visuals: removed the trailing "No more data to load" message and dropped the bottom border on the last row for a cleaner end-of-list appearance. ([#15959](https://github.com/mastra-ai/mastra/pull/15959))
+
+- Refined the DataPanel loading state with a smaller spinner and tightened layout for a less prominent appearance. ([#15965](https://github.com/mastra-ai/mastra/pull/15965))
+
+- Updated dependencies [[`920c757`](https://github.com/mastra-ai/mastra/commit/920c75799c6bd71787d86deaf654a35af4c839ca), [`1fe2533`](https://github.com/mastra-ai/mastra/commit/1fe2533c4382ca6858aac7c4b63e888c2eac6541), [`f8694b6`](https://github.com/mastra-ai/mastra/commit/f8694b6fa0b7a5cde71d794c3bbef4957c55bcb8)]:
+  - @mastra/core@1.30.0-alpha.1
+  - @mastra/client-js@1.15.2-alpha.1
+  - @mastra/react@0.2.32-alpha.1
+
 ## 24.0.2-alpha.0
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -6442,12 +6442,7 @@ const DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref)
   DialogPrimitive__namespace.Overlay,
   {
     ref,
-    className: cn(
-      "fixed inset-0 z-50 bg-overlay backdrop-blur-sm",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out",
-      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
+    className: cn("dialog-overlay-anim fixed inset-0 z-50 bg-overlay backdrop-blur-xs", className),
     ...props
   }
 ));
@@ -6459,51 +6454,26 @@ const DialogContent = React__namespace.forwardRef(({ className, children, ...pro
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
-        "gap-4 border border-border1 bg-surface3 py-6 shadow-dialog rounded-lg",
-        "duration-slow",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        "data-[state=closed]:slide-out-to-bottom-4",
-        "data-[state=open]:slide-in-from-bottom-4",
+        "dialog-content-anim",
+        "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%]",
+        "w-full max-w-[calc(100%-2rem)] sm:max-w-lg",
+        "rounded-xl border border-border1/40 bg-surface2/96 backdrop-blur-md shadow-dialog",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          DialogPrimitive__namespace.Close,
-          {
-            className: cn(
-              "absolute right-4 top-4 rounded-md p-1",
-              "text-neutral3 hover:text-neutral6 hover:bg-surface4",
-              "transition-all duration-normal ease-out-custom",
-              "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring",
-              "disabled:pointer-events-none"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-3 right-3", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) }) })
       ]
     }
   )
 ] }));
 DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
-const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn("flex flex-col space-y-1.5 text-center sm:text-left border-b border-border1 pb-4 px-6", className),
-    ...props
-  }
-);
+const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-0.5 px-4 py-3 text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
-const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
+const DialogFooter = ({ 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 });
 DialogFooter.displayName = "DialogFooter";
-const DialogBody = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-y-auto px-6 max-h-[50vh]", className), ...props });
+const DialogBody = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-y-auto px-4 py-3.5 max-h-[50vh]", className), ...props });
 DialogBody.displayName = "DialogBody";
 const DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { ref, className: cn("text-ui-md font-medium", className), ...props }));
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
@@ -12006,23 +11976,22 @@ function DataListDescriptionCell({ children, className }) {
 
 function DataListNextPageLoading({
   isLoading,
-  hasMore,
   setEndOfListElement,
-  loadingText = "Loading more data...",
-  noMoreDataText = "No more data to load"
+  hasMore,
+  loadingText = "Loading more data..."
 }) {
   if (!setEndOfListElement) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: setEndOfListElement,
-      className: "col-span-full text-ui-md text-neutral3 opacity-50 flex py-4 justify-center",
-      children: [
-        isLoading && loadingText,
-        !hasMore && !isLoading && noMoreDataText
-      ]
+      className: cn("col-span-full text-ui-md text-neutral3 opacity-50 flex justify-center min-h-1", {
+        "py-4": isLoading,
+        "py-0": !hasMore
+      }),
+      children: isLoading && loadingText
     }
   );
 }
@@ -12081,6 +12050,7 @@ const dataListRowStyles = [
   "[.data-list-row:hover+&]:border-t-transparent [.data-list-row:focus-visible+&]:border-t-transparent",
   "[.data-list-subheader+&]:border-t-transparent",
   "[&:has(+.data-list-subheader)]:border-b-transparent",
+  "[&:not(:has(~.data-list-row))]:border-b-transparent",
   "transition-colors duration-200 rounded-lg"
 ];
 
@@ -13657,8 +13627,8 @@ function DataPanelHeading({ className, children }) {
 }
 
 function DataPanelLoadingData({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-6 text-ui-sm text-neutral3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-6 text-ui-sm text-neutral2 min-h-32", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm", color: tokens.Colors.neutral1 }),
     " ",
     children ?? "Loading..."
   ] });