@mastra/playground-ui 22.1.3-alpha.3 → 22.2.0-alpha.8

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @mastra/playground-ui
 
+## 22.2.0-alpha.8
+
+### Patch Changes
+
+- Updated dependencies [[`1bd5104`](https://github.com/mastra-ai/mastra/commit/1bd51048b6da93507276d6623e3fd96a9e1a8944)]:
+  - @mastra/core@1.26.0-alpha.8
+  - @mastra/client-js@1.13.5-alpha.8
+  - @mastra/react@0.2.27-alpha.8
+
+## 22.2.0-alpha.7
+
+### Minor Changes
+
+- Added BrandLoader, a branded pulse-wave loader component for brand moments like app boot or agent thinking. Complements Spinner, which remains the inline utility loader. ([#15490](https://github.com/mastra-ai/mastra/pull/15490))
+
+### Patch Changes
+
+- Updated dependencies [[`8786a61`](https://github.com/mastra-ai/mastra/commit/8786a61fa54ba265f85eeff9985ca39863d18bb6), [`8fb2405`](https://github.com/mastra-ai/mastra/commit/8fb2405138f2d208b7962ad03f121ca25bcc28c5)]:
+  - @mastra/core@1.26.0-alpha.7
+  - @mastra/client-js@1.13.5-alpha.7
+  - @mastra/react@0.2.27-alpha.7
+
+## 22.1.3-alpha.6
+
+### Patch Changes
+
+- Updated dependencies [[`6315317`](https://github.com/mastra-ai/mastra/commit/63153175fe9a7b224e5be7c209bbebc01dd9b0d5), [`9d3b24b`](https://github.com/mastra-ai/mastra/commit/9d3b24b19407ae9c09586cf7766d38dc4dff4a69)]:
+  - @mastra/core@1.26.0-alpha.6
+  - @mastra/client-js@1.13.5-alpha.6
+  - @mastra/react@0.2.27-alpha.6
+
+## 22.1.3-alpha.5
+
+### Patch Changes
+
+- Added a Foundations/Tokens page to the @mastra/playground-ui Storybook so you can browse all typography, color, spacing, radius, shadow, and animation tokens in one place. ([#15475](https://github.com/mastra-ai/mastra/pull/15475))
+
+- Added `ScoresDataList` for rendering lists of score evaluation results. ([#15339](https://github.com/mastra-ai/mastra/pull/15339))
+
+- Updated dependencies [[`92dcf02`](https://github.com/mastra-ai/mastra/commit/92dcf029294210ac91b090900c1a0555a425c57a)]:
+  - @mastra/core@1.26.0-alpha.5
+  - @mastra/client-js@1.13.5-alpha.5
+  - @mastra/react@0.2.27-alpha.5
+
+## 22.1.3-alpha.4
+
+### Patch Changes
+
+- Updated dependencies [[`0474c2b`](https://github.com/mastra-ai/mastra/commit/0474c2b2e7c7e1ad8691dca031284841391ff1ef), [`f607106`](https://github.com/mastra-ai/mastra/commit/f607106854c6416c4a07d4082604b9f66d047221), [`62919a6`](https://github.com/mastra-ai/mastra/commit/62919a6ee0fbf3779ad21a97b1ec6696515d5104), [`0fd90a2`](https://github.com/mastra-ai/mastra/commit/0fd90a215caf5fca8099c15a67ca03e4427747a3)]:
+  - @mastra/core@1.26.0-alpha.4
+  - @mastra/client-js@1.13.5-alpha.4
+  - @mastra/react@0.2.27-alpha.4
+
 ## 22.1.3-alpha.3
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -3386,7 +3386,7 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-const sizeClasses$4 = {
+const sizeClasses$5 = {
   sm: `${formElementSizes.sm} text-ui-sm px-[.75em]`,
   md: `${formElementSizes.md} text-ui-md px-[.75em]`,
   default: `${formElementSizes.default} text-ui-md px-[.85em] `,
@@ -3419,7 +3419,7 @@ function resolveVariant(variant) {
 function buttonVariants(options) {
   const variant = resolveVariant(options?.variant || "default");
   const size = options?.size || "default";
-  return cn(sharedStyles, sizeClasses$4[size], variantClasses$4[variant], options?.iconOnly && "[&>svg]:opacity-75");
+  return cn(sharedStyles, sizeClasses$5[size], variantClasses$4[variant], options?.iconOnly && "[&>svg]:opacity-75");
 }
 function flattenChildren(children) {
   const result = [];
@@ -4797,7 +4797,7 @@ const AlertDescription = ({ children, as: As = "p" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-sm", children });
 };
 
-const sizeClasses$3 = {
+const sizeClasses$4 = {
   sm: "h-avatar-sm w-avatar-sm",
   md: "h-avatar-md w-avatar-md",
   lg: "h-avatar-lg w-avatar-lg"
@@ -4807,7 +4807,7 @@ const Avatar = ({ src, name, size = "sm", interactive = false }) => {
     "div",
     {
       className: cn(
-        sizeClasses$3[size],
+        sizeClasses$4[size],
         "border border-border1 bg-surface3 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
         transitions.all,
         interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
@@ -7043,7 +7043,7 @@ function SelectFieldBlock({
   ] });
 }
 
-const sizeClasses$2 = {
+const sizeClasses$3 = {
   sm: `${formElementSizes.sm} w-form-sm`,
   md: `${formElementSizes.md} w-form-md`,
   lg: `${formElementSizes.lg} w-form-lg`,
@@ -7076,7 +7076,7 @@ const IconButton = React.forwardRef(
             baseButtonStyles,
             formElementFocus,
             variantClasses$1[variant],
-            sizeClasses$2[size],
+            sizeClasses$3[size],
             disabled && "active:scale-100",
             className
           ),
@@ -7240,7 +7240,7 @@ function MetricsCardError({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-3 items-center justify-center", className), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-sm text-accent2", children: message }) });
 }
 
-const sizeClasses$1 = {
+const sizeClasses$2 = {
   sm: "w-4 h-4",
   md: "w-6 h-6",
   lg: "w-8 h-8"
@@ -7249,7 +7249,7 @@ function Spinner({ color, className, size = "md" }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      className: cn("animate-spin", sizeClasses$1[size], className),
+      className: cn("animate-spin", sizeClasses$2[size], className),
       style: { animationDuration: "800ms", animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)" },
       xmlns: "http://www.w3.org/2000/svg",
       width: "24",
@@ -7661,6 +7661,49 @@ const Slider = React__namespace.forwardRef(({ className, ...props }, ref) => /*
 ));
 Slider.displayName = SliderPrimitive__namespace.Root.displayName;
 
+const sizeClasses$1 = {
+  sm: "w-6",
+  md: "w-10",
+  lg: "w-16"
+};
+function BrandLoader({ className, size = "md", "aria-label": ariaLabel = "Loading" }) {
+  const reactId = React.useId();
+  const filterId = `brand-loader-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": ariaLabel,
+      className: cn("brand-loader inline-block text-neutral6", sizeClasses$1[size], className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 34 21",
+          className: "block w-full h-auto overflow-visible",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: filterId, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0.55" }),
+              /* @__PURE__ */ jsxRuntime.jsx("feColorMatrix", { values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("g", { filter: `url(#${filterId})`, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln23", x1: "10.4", y1: "4.5", x2: "16.8", y2: "16.2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln34", x1: "16.8", y1: "16.2", x2: "23.2", y2: "4.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln45", x1: "23.2", y1: "4.5", x2: "29.5", y2: "16.2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b1", cx: "4.5", cy: "16.2", r: "4.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b2", cx: "10.4", cy: "4.5", r: "4.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b3", cx: "16.8", cy: "16.2", r: "4.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b4", cx: "23.2", cy: "4.5", r: "4.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b5", cx: "29.5", cy: "16.2", r: "4.5" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
 const Switch = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SwitchPrimitives__namespace.Root,
   {
@@ -11347,6 +11390,45 @@ function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3 })
   )) });
 }
 
+function toDate$2(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  return isNaN(date.getTime()) ? null : date;
+}
+function ScoresDataListDateCell({ timestamp }) {
+  const date = toDate$2(timestamp);
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? dateFns.isToday(date) ? "Today" : dateFns.format(date, "MMM dd") : "-" });
+}
+function ScoresDataListTimeCell({ timestamp }) {
+  const date = toDate$2(timestamp);
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral3", children: date ? dateFns.format(date, "h:mm:ss aaa") : "-" });
+}
+function ScoresDataListInputCell({ input }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-neutral3 text-ui-smd font-mono truncate", children: input != null ? JSON.stringify(input) : "-" }) });
+}
+function ScoresDataListEntityCell({ entityId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-ui-smd truncate", children: entityId || "-" }) });
+}
+function ScoresDataListScoreCell({ score }) {
+  const display = score == null ? "-" : typeof score === "object" ? JSON.stringify(score) : String(score);
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3", children: display });
+}
+
+function ScoresDataListRoot(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListRoot, { ...props });
+}
+const ScoresDataList = Object.assign(ScoresDataListRoot, {
+  Top: DataListTop,
+  TopCell: DataListTopCell,
+  RowButton: DataListRowButton,
+  NoMatch: DataListNoMatch,
+  NextPageLoading: DataListNextPageLoading,
+  DateCell: ScoresDataListDateCell,
+  TimeCell: ScoresDataListTimeCell,
+  InputCell: ScoresDataListInputCell,
+  EntityCell: ScoresDataListEntityCell,
+  ScoreCell: ScoresDataListScoreCell
+});
+
 function toDate$1(value) {
   const date = value instanceof Date ? value : new Date(value);
   return isNaN(date.getTime()) ? null : date;
@@ -11409,7 +11491,10 @@ function TracesDataListStatusCell({ status }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "uppercase text-ui-sm font-semibold", style: { color: config.color }, children: config.label }) });
 }
 
-const TracesDataList = Object.assign(DataListRoot, {
+function TracesDataListRoot(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListRoot, { ...props });
+}
+const TracesDataList = Object.assign(TracesDataListRoot, {
   Top: DataListTop,
   TopCell: DataListTopCell,
   RowButton: DataListRowButton,
@@ -14128,6 +14213,7 @@ exports.Avatar = Avatar;
 exports.AzureIcon = AzureIcon;
 exports.Badge = Badge;
 exports.BranchIcon = BranchIcon;
+exports.BrandLoader = BrandLoader;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonWithTooltip = ButtonWithTooltip;
@@ -14310,6 +14396,7 @@ exports.RuleFieldSelect = RuleFieldSelect;
 exports.RuleOperatorSelect = RuleOperatorSelect;
 exports.RuleRow = RuleRow;
 exports.RuleValueInput = RuleValueInput;
+exports.ScoresDataList = ScoresDataList;
 exports.ScrollArea = ScrollArea;
 exports.ScrollBar = ScrollBar;
 exports.ScrollableContainer = ScrollableContainer;