@mastra/playground-ui 28.0.1 → 29.0.0-alpha.1

package/dist/src/domains/traces/components/traces-list-view.d.ts

@@ -35,6 +35,9 @@ export type TracesListViewProps = {
      * a row is featured only when both `traceId` and `spanId` match.
      */
     featuredSpanId?: string | null;
+    /** Branches mode mixes root traces with subtraces — enables the Trace/Subtrace tooltip on the
+     *  level icon in the Name column, which is meaningless when every row is a root. */
+    isBranchesMode?: boolean;
     /** Called when a row is clicked. The current selection logic (toggle on same id) is the consumer's call. */
     onTraceClick: (trace: TracesListViewTrace) => void;
 };
@@ -42,4 +45,4 @@ export type TracesListViewProps = {
  * Virtualized presentational list. Renders only the visible window via TanStack Virtual, and
  * uses DataList primitives for layout (CSS Grid with subgrid rows).
  */
-export declare function TracesListView({ traces, isLoading, isFetchingNextPage, hasNextPage, setEndOfListElement, filtersApplied, featuredTraceId, featuredSpanId, onTraceClick, }: TracesListViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function TracesListView({ traces, isLoading, isFetchingNextPage, hasNextPage, setEndOfListElement, filtersApplied, featuredTraceId, featuredSpanId, isBranchesMode, onTraceClick, }: TracesListViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/Command/command.d.ts

@@ -6,7 +6,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -36,7 +36,7 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
@@ -45,14 +45,14 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -61,7 +61,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
@@ -70,7 +70,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/src/ds/components/DataList/TracesDataList/traces-data-list-cells.d.ts

@@ -2,11 +2,6 @@ export interface TracesDataListIdCellProps {
     traceId: string;
 }
 export declare function TracesDataListIdCell({ traceId }: TracesDataListIdCellProps): import("react/jsx-runtime").JSX.Element;
-export interface TracesDataListKindCellProps {
-    /** `null`/missing → root span (Trace). Set → nested span (Subtrace). */
-    parentSpanId?: string | null;
-}
-export declare function TracesDataListKindCell({ parentSpanId }: TracesDataListKindCellProps): import("react/jsx-runtime").JSX.Element;
 export interface TracesDataListDateCellProps {
     timestamp: Date | string;
 }
@@ -17,8 +12,13 @@ export interface TracesDataListTimeCellProps {
 export declare function TracesDataListTimeCell({ timestamp }: TracesDataListTimeCellProps): import("react/jsx-runtime").JSX.Element;
 export interface TracesDataListNameCellProps {
     name?: string | null;
+    /** `null`/missing → root span (Trace). Set → nested span (Subtrace). Drives the leading level icon. */
+    parentSpanId?: string | null;
+    /** When true, the leading level icon is wrapped in a Trace/Subtrace tooltip. Off by default —
+     *  only meaningful in branches mode, where rows mix root traces and subtraces. */
+    showLevelTooltip?: boolean;
 }
-export declare function TracesDataListNameCell({ name }: TracesDataListNameCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function TracesDataListNameCell({ name, parentSpanId, showLevelTooltip }: TracesDataListNameCellProps): import("react/jsx-runtime").JSX.Element;
 export interface TracesDataListInputCellProps {
     input?: string | null;
 }

package/dist/src/ds/components/DataList/TracesDataList/traces-data-list.d.ts

@@ -6,7 +6,7 @@ import { DataListSpacer } from '../data-list-spacer';
 import { DataListSubHeading } from '../data-list-subheading';
 import { DataListTop } from '../data-list-top';
 import { DataListTopCellWithTooltip } from '../data-list-top-cell';
-import { TracesDataListIdCell, TracesDataListKindCell, TracesDataListDateCell, TracesDataListTimeCell, TracesDataListNameCell, TracesDataListInputCell, TracesDataListEntityCell, TracesDataListStatusCell } from './traces-data-list-cells';
+import { TracesDataListIdCell, TracesDataListDateCell, TracesDataListTimeCell, TracesDataListNameCell, TracesDataListInputCell, TracesDataListEntityCell, TracesDataListStatusCell } from './traces-data-list-cells';
 declare function TracesDataListRoot(props: ComponentProps<typeof DataListRoot>): import("react/jsx-runtime").JSX.Element;
 export declare const TracesDataList: typeof TracesDataListRoot & {
     Top: typeof DataListTop;
@@ -18,7 +18,6 @@ export declare const TracesDataList: typeof TracesDataListRoot & {
     SubHeading: typeof DataListSubHeading;
     Spacer: typeof DataListSpacer;
     IdCell: typeof TracesDataListIdCell;
-    KindCell: typeof TracesDataListKindCell;
     DateCell: typeof TracesDataListDateCell;
     TimeCell: typeof TracesDataListTimeCell;
     NameCell: typeof TracesDataListNameCell;

package/dist/src/ds/components/MainSidebar/main-sidebar-nav-link.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { default as React, ComponentPropsWithoutRef } from 'react';
 import { SidebarState } from './main-sidebar-context';
 import { LinkComponent } from '../../types/link-component';
 export type NavLink = {

package/dist/src/ds/components/PageLayout/page-layout-row.d.ts

@@ -1,5 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+declare const pageLayoutRowVariants: (props?: ({
+    align?: "start" | "center" | null | undefined;
+    stack?: "horizontal" | "responsive" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type PageLayoutRowProps = {
     children?: React.ReactNode;
     className?: string;
-};
-export declare function PageLayoutRow({ children, className }: PageLayoutRowProps): import("react/jsx-runtime").JSX.Element;
+} & VariantProps<typeof pageLayoutRowVariants>;
+export declare function PageLayoutRow({ children, className, align, stack }: PageLayoutRowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ds/components/ScrollArea/scroll-area.d.ts

@@ -27,7 +27,7 @@ export type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPr
     /** @deprecated Use `mask` instead. Retained for backward compatibility. */
     showMask?: boolean;
 };
-declare const ScrollArea: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react/scroll-area').ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
     viewPortClassName?: string;
     maxHeight?: string;
     autoScroll?: boolean;
@@ -37,5 +37,5 @@ declare const ScrollArea: React.ForwardRefExoticComponent<Omit<Omit<import('@bas
     /** @deprecated Use `mask` instead. Retained for backward compatibility. */
     showMask?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
-declare const ScrollBar: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react/scroll-area').ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ScrollArea, ScrollBar };

package/dist/src/ds/components/Tooltip/tooltip.d.ts

@@ -1,7 +1,20 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
 import * as React from 'react';
-declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
-declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
-declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type TooltipProviderProps = Omit<TooltipPrimitive.Provider.Props, 'delay' | 'timeout'> & {
+    delay?: number;
+    timeout?: number;
+    /** Radix API compatibility alias for `delay`. */
+    delayDuration?: number;
+    /** Radix API compatibility alias for `timeout`. */
+    skipDelayDuration?: number;
+};
+declare function TooltipProvider({ delay, delayDuration, timeout, skipDelayDuration, ...props }: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: <Payload>(props: TooltipPrimitive.Root.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
+type TooltipTriggerProps = TooltipPrimitive.Trigger.Props & {
+    /** Radix-style alias for Base UI's native `render` prop. */
+    asChild?: boolean;
+};
+declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type TooltipContentProps = TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'side' | 'sideOffset' | 'align' | 'alignOffset'>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/src/ds/components/Tooltip/tooltip.stories.d.ts

@@ -4,7 +4,10 @@ declare const meta: Meta<typeof Tooltip>;
 export default meta;
 type Story = StoryObj<typeof Tooltip>;
 export declare const Default: Story;
+export declare const WithKeyboardShortcut: Story;
 export declare const WithIcon: Story;
+export declare const UsingRenderProp: Story;
+export declare const AllSides: Story;
 export declare const TopSide: Story;
 export declare const RightSide: Story;
 export declare const BottomSide: Story;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "28.0.1",
+  "version": "29.0.0-alpha.1",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -100,8 +100,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.19.1",
-    "@mastra/react": "0.3.3"
+    "@mastra/client-js": "^1.20.0-alpha.1",
+    "@mastra/react": "0.4.0-alpha.1"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.3.6",
@@ -138,9 +138,9 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.5",
     "@internal/lint": "0.0.96",
-    "@mastra/client-js": "^1.19.1",
-    "@mastra/core": "1.35.0",
-    "@mastra/react": "0.3.3"
+    "@mastra/client-js": "^1.20.0-alpha.1",
+    "@mastra/core": "1.36.0-alpha.1",
+    "@mastra/react": "0.4.0-alpha.1"
   },
   "homepage": "https://mastra.ai",
   "repository": {