@mastra/playground-ui 5.1.20 → 5.1.21-alpha.1

package/dist/src/components/ui/elements/buttons/button.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from '../../../../../node_modules/@types/react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    as?: React.ElementType;
+    className?: string;
+    href?: string;
+    to?: string;
+    prefetch?: boolean | null;
+    children: React.ReactNode;
+    variant?: 'primary' | 'outline' | 'ghost';
+    target?: string;
+}
+export declare const Button: ({ className, as, variant, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/buttons/button.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const Primary: Story;
+export declare const Outline: Story;
+export declare const Ghost: Story;
+export declare const WithIcon: Story;
+export declare const IconOnly: Story;
+export declare const Disabled: Story;
+export declare const AsLink: Story;

package/dist/src/components/ui/elements/buttons/index.d.ts

@@ -0,0 +1 @@
+export * from './button';

package/dist/src/components/ui/elements/entry-list/entry-list-cell.d.ts

@@ -0,0 +1,3 @@
+export declare function EntryListCell({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/entry-list/entry-list-item.d.ts

@@ -0,0 +1,8 @@
+import { Column } from './shared';
+export declare function EntryListItem({ item, selectedItem, onClick, children, columns, }: {
+    item: any;
+    selectedItem: any | null;
+    onClick?: (score: string) => void;
+    children?: React.ReactNode;
+    columns?: Column[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/entry-list/entry-list-page-header.d.ts

@@ -0,0 +1,8 @@
+type EntryListPageHeaderProps = {
+    title: string;
+    description?: string;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+};
+export declare function EntryListPageHeader({ title, description, icon, children }: EntryListPageHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/elements/entry-list/entry-list-toolbar.d.ts

@@ -0,0 +1,6 @@
+type EntryListToolbarProps = {
+    children?: React.ReactNode;
+    className?: string;
+};
+export declare function EntryListToolbar({ children, className }: EntryListToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/elements/entry-list/entry-list.d.ts

@@ -0,0 +1,15 @@
+import { Column } from './shared';
+export declare function EntryList({ items, selectedItem, onItemClick, isLoading, total, page, hasMore, onNextPage, onPrevPage, perPage, columns, searchTerm, }: {
+    items: any[];
+    selectedItem: Record<string, any> | null;
+    onItemClick?: (item: string) => void;
+    isLoading?: boolean;
+    total?: number;
+    page?: number;
+    hasMore?: boolean;
+    onNextPage?: () => void;
+    onPrevPage?: () => void;
+    perPage?: number;
+    columns?: Column[];
+    searchTerm?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/entry-list/index.d.ts

@@ -0,0 +1,6 @@
+export * from './entry-list';
+export * from './entry-list-item';
+export * from './entry-list-cell';
+export * from './entry-list-toolbar';
+export * from './entry-list-page-header';
+export * from './shared';

package/dist/src/components/ui/elements/entry-list/shared.d.ts

@@ -0,0 +1,6 @@
+export type Column = {
+    name: string;
+    label: string;
+    size: string;
+};
+export declare function getColumnTemplate(columns?: Column[]): string;

package/dist/src/components/ui/elements/form-fields/form-actions.d.ts

@@ -0,0 +1,12 @@
+type FormActionsProps = {
+    children?: React.ReactNode;
+    onSubmit?: () => void;
+    onCancel?: () => void;
+    className?: string;
+    submitLabel?: string;
+    cancelLabel?: string;
+    isSubmitting?: boolean;
+    variant?: 'toLeft' | 'toRight' | 'stretch';
+};
+export declare function FormActions({ children, onSubmit, onCancel, className, submitLabel, cancelLabel, isSubmitting, variant, }: FormActionsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/components/ui/elements/form-fields/index.d.ts

@@ -0,0 +1,7 @@
+export * from './search-field';
+export * from './input-field';
+export * from './textarea-field';
+export * from './form-actions';
+export * from './select-field';
+export * from './slider-field';
+export * from './radio-group-field';

package/dist/src/components/ui/elements/form-fields/input-field.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export type InputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    name?: string;
+    testId?: string;
+    label?: string;
+    labelIsHidden?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    value?: string;
+    helpMsg?: string;
+    error?: boolean;
+    errorMsg?: string;
+};
+export declare function InputField({ name, value, label, labelIsHidden, className, testId, required, disabled, helpMsg, error, errorMsg, ...props }: InputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/form-fields/input-field.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { InputField } from './input-field';
+declare const meta: Meta<typeof InputField>;
+export default meta;
+type Story = StoryObj<typeof InputField>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Required: Story;
+export declare const WithHelpMessage: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;
+export declare const HiddenLabel: Story;
+export declare const Email: Story;
+export declare const Password: Story;
+export declare const Number: Story;

package/dist/src/components/ui/elements/form-fields/radio-group-field.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+type RadioGroupFieldProps = React.ComponentProps<typeof RadixRadioGroup.Root> & {
+    name?: string;
+    testId?: string;
+    label?: React.ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    value?: number[];
+    helpMsg?: string;
+    errorMsg?: string;
+    className?: string;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    layout?: 'horizontal' | 'vertical';
+    onChange?: (value: string) => void;
+};
+export declare function RadioGroupField({ name, value, label, className, testId, required, disabled, helpMsg, errorMsg, onChange, options, layout, onValueChange, ...props }: RadioGroupFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/elements/form-fields/search-field.d.ts

@@ -0,0 +1,2 @@
+import { InputFieldProps } from '..';
+export declare function SearchField(props: InputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/form-fields/select-field.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+type SelectFieldProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
+    name?: string;
+    testId?: string;
+    label?: React.ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    value?: string;
+    helpMsg?: string;
+    errorMsg?: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    placeholder?: string;
+    onValueChange: (value: string) => void;
+};
+export declare function SelectField({ name, value, label, className, required, disabled, helpMsg, options, onValueChange, placeholder, }: SelectFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/elements/form-fields/select-field.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SelectField } from './select-field';
+declare const meta: Meta<typeof SelectField>;
+export default meta;
+type Story = StoryObj<typeof SelectField>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Required: Story;
+export declare const WithHelpMessage: Story;
+export declare const Disabled: Story;
+export declare const NoLabel: Story;
+export declare const FruitSelector: Story;
+export declare const LongOptions: Story;

package/dist/src/components/ui/elements/form-fields/slider-field.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as RadixSlider from '@radix-ui/react-slider';
+type SliderFieldProps = React.ComponentProps<typeof RadixSlider.Root> & {
+    name?: string;
+    testId?: string;
+    label?: React.ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    value?: number[];
+    helpMsg?: string;
+    errorMsg?: string;
+    className?: string;
+};
+export declare function SliderField({ name, value, label, className, testId, required, disabled, helpMsg, errorMsg, onChange, ...props }: SliderFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/elements/form-fields/textarea-field.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+type TextareaFieldProps = React.InputHTMLAttributes<HTMLTextAreaElement> & {
+    testId?: string;
+    label?: React.ReactNode;
+    helpText?: string;
+    value?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function TextareaField({ value, label, helpText, className, testId, type, disabled, ...props }: TextareaFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/elements/headers/entity-main-header.d.ts

@@ -0,0 +1,11 @@
+type EntityMainHeaderProps = {
+    title?: string;
+    description?: string;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    isLoading?: boolean;
+    className?: string;
+    placement?: 'page' | 'sidebar';
+};
+export declare function EntityMainHeader({ title, description, icon, children, isLoading, className, placement, }: EntityMainHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/elements/headers/index.d.ts

@@ -0,0 +1 @@
+export * from './entity-main-header';

package/dist/src/components/ui/elements/index.d.ts

@@ -0,0 +1,2 @@
+export * from './form-fields';
+export * from './key-value-list';

package/dist/src/components/ui/elements/key-value-list/index.d.ts

@@ -0,0 +1 @@
+export * from './key-value-list';

package/dist/src/components/ui/elements/key-value-list/key-value-list.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from '../../../../../node_modules/@types/react';
+export type KeyValueListItemValue = {
+    id: string;
+    name: React.ReactNode;
+    path?: string;
+    description?: React.ReactNode;
+};
+export type KeyValueListItemData = {
+    key: string;
+    label: string;
+    value: Value;
+    icon?: React.ReactNode;
+    separator?: React.ReactNode;
+};
+type Value = React.ReactNode | KeyValueListItemValue[];
+type KeyValueListProps = {
+    data: KeyValueListItemData[];
+    LinkComponent: React.ComponentType;
+    labelsAreHidden?: boolean;
+    className?: string;
+    isLoading?: boolean;
+};
+export declare function KeyValueList({ data, LinkComponent, className, labelsAreHidden, isLoading }: KeyValueListProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/components/ui/elements/key-value-list/key-value-list.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { KeyValueList } from './key-value-list';
+declare const meta: Meta<typeof KeyValueList>;
+export default meta;
+type Story = StoryObj<typeof KeyValueList>;
+export declare const Default: Story;
+export declare const WithLinks: Story;
+export declare const EmptyValues: Story;
+export declare const Loading: Story;
+export declare const HiddenLabels: Story;
+export declare const CustomClassName: Story;
+export declare const SingleItem: Story;

package/dist/src/components/ui/elements/select/index.d.ts

@@ -0,0 +1 @@
+export * from './select';

package/dist/src/components/ui/elements/select/select.d.ts

@@ -0,0 +1,10 @@
+type SelectProps = {
+    name: string;
+    onChange?: (value: string) => void;
+    defaultValue?: string;
+    value?: string;
+    options?: string[];
+    placeholder?: string;
+};
+export declare function Select({ name, onChange, defaultValue, value, options, placeholder }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/elements/side-dialog/index.d.ts

@@ -0,0 +1,5 @@
+export * from './side-dialog';
+export * from './side-dialog-header';
+export * from './side-dialog-footer';
+export * from './side-dialog-content';
+export * from './side-dialog-top';

package/dist/src/components/ui/elements/side-dialog/side-dialog-content.d.ts

@@ -0,0 +1,21 @@
+export type SideDialogContentProps = {
+    children?: React.ReactNode;
+    className?: string;
+    isCentered?: boolean;
+    isFullHeight?: boolean;
+    variant?: 'default' | 'confirmation';
+};
+export declare function SideDialogContent({ children, className, isCentered, isFullHeight, variant }: SideDialogContentProps): import("react/jsx-runtime").JSX.Element;
+export type SideDialogSectionProps = {
+    children?: React.ReactNode;
+};
+export declare function SideDialogSection({ children }: SideDialogSectionProps): import("react/jsx-runtime").JSX.Element;
+type SideDialogKeyValueListProps = {
+    items: {
+        key: string;
+        value: React.ReactNode;
+    }[];
+    className?: string;
+};
+export declare function SideDialogKeyValueList({ items, className }: SideDialogKeyValueListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/elements/side-dialog/side-dialog-footer.d.ts

@@ -0,0 +1,10 @@
+export type SideDialogFooterProps = {
+    children?: React.ReactNode;
+    onNext?: (() => void) | null;
+    onPrevious?: (() => void) | null;
+    showInnerNav?: boolean;
+};
+export declare function SideDialogFooter({ children, onNext, onPrevious, showInnerNav }: SideDialogFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function SideDialogFooterGroup({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/side-dialog/side-dialog-header.d.ts

@@ -0,0 +1,5 @@
+export type SideDialogHeaderProps = {
+    children?: React.ReactNode;
+    className?: string;
+};
+export declare function SideDialogHeader({ children, className }: SideDialogHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/side-dialog/side-dialog-top.d.ts

@@ -0,0 +1,7 @@
+export type SideDialogTopProps = {
+    children?: React.ReactNode;
+    onNext?: (() => void) | null;
+    onPrevious?: (() => void) | null;
+    showInnerNav?: boolean;
+};
+export declare function SideDialogTop({ children, onNext, onPrevious, showInnerNav }: SideDialogTopProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/side-dialog/side-dialog.d.ts

@@ -0,0 +1,10 @@
+export declare function SideDialog({ dialogTitle, isOpen, onClose, children, variant, hasCloseButton, }: {
+    variant?: 'default' | 'confirmation';
+    dialogTitle: string;
+    isOpen: boolean;
+    onClose?: () => void;
+    onNext?: (() => void) | null;
+    onPrevious?: (() => void) | null;
+    children?: React.ReactNode;
+    hasCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './tabs';

package/dist/src/components/ui/elements/tabs/tabs.d.ts

@@ -0,0 +1,40 @@
+type TabsProps<T extends string> = {
+    children: React.ReactNode;
+    defaultTab: T;
+    value?: T;
+    onValueChange?: (value: T) => void;
+    className?: string;
+};
+type TabListProps = {
+    children: React.ReactNode;
+    className?: string;
+    variant?: 'default' | 'buttons';
+};
+type TabProps = {
+    children: React.ReactNode;
+    value: string;
+    onClick?: () => void;
+    className?: string;
+};
+type TabContentProps = {
+    children: React.ReactNode;
+    value: string;
+    className?: string;
+};
+declare const Tabs: {
+    <T extends string>({ children, defaultTab, value, onValueChange, className }: TabsProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Tab: {
+        ({ children, value, onClick, className }: TabProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    List: {
+        ({ children, variant, className }: TabListProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ children, value, className }: TabContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { Tabs };

package/dist/src/domains/agents/components/agent-metadata/agent-metadata-model-switcher.d.ts

@@ -0,0 +1,11 @@
+import { UpdateModelParams } from '@mastra/client-js';
+export interface AgentMetadataModelSwitcherProps {
+    defaultProvider: string;
+    defaultModel: string;
+    updateModel: (newModel: UpdateModelParams) => Promise<{
+        message: string;
+    }>;
+    closeEditor: () => void;
+    modelProviders: string[];
+}
+export declare const AgentMetadataModelSwitcher: ({ defaultProvider, defaultModel, updateModel, closeEditor, modelProviders, }: AgentMetadataModelSwitcherProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/agents/components/agent-metadata/agent-metadata.d.ts

@@ -1,13 +1,16 @@
 import { GetAgentResponse, GetToolResponse, GetWorkflowResponse } from '@mastra/client-js';
 import { ReactNode } from '../../../../../node_modules/@types/react';
+import { AgentMetadataModelSwitcherProps } from './agent-metadata-model-switcher';
 export interface AgentMetadataProps {
     agent: GetAgentResponse;
     promptSlot: ReactNode;
     hasMemoryEnabled: boolean;
     computeToolLink: (tool: GetToolResponse) => string;
     computeWorkflowLink: (workflow: GetWorkflowResponse) => string;
+    modelProviders: string[];
+    updateModel: AgentMetadataModelSwitcherProps['updateModel'];
 }
-export declare const AgentMetadata: ({ agent, promptSlot, hasMemoryEnabled, computeToolLink, computeWorkflowLink, }: AgentMetadataProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AgentMetadata: ({ agent, promptSlot, hasMemoryEnabled, computeToolLink, computeWorkflowLink, updateModel, modelProviders, }: AgentMetadataProps) => import("react/jsx-runtime").JSX.Element;
 export interface AgentMetadataToolListProps {
     tools: GetToolResponse[];
     computeToolLink: (tool: GetToolResponse) => string;

package/dist/src/domains/agents/components/agent-metadata/models.d.ts

@@ -0,0 +1,5 @@
+export declare const openaiModels: string[];
+export declare const anthropicModels: string[];
+export declare const googleModels: string[];
+export declare const xAIModels: string[];
+export declare const groqModels: string[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "5.1.20",
+  "version": "5.1.21-alpha.1",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -48,11 +48,12 @@
     "@hookform/resolvers": "^3.10.0",
     "@lezer/highlight": "^1.2.1",
     "@lukeed/uuid": "^2.0.1",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-hover-card": "^1.1.14",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-radio-group": "^1.3.7",
@@ -64,6 +65,7 @@
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-visually-hidden": "^1.2.3",
     "@tanstack/react-query": "^5.81.5",
     "@tanstack/react-table": "^8.21.3",
     "@types/react-syntax-highlighter": "^15.5.13",
@@ -95,7 +97,7 @@
     "use-debounce": "^10.0.5",
     "zod": "^3.25.67",
     "zustand": "^5.0.7",
-    "@mastra/client-js": "^0.10.21"
+    "@mastra/client-js": "^0.10.22-alpha.1"
   },
   "peerDependencies": {
     "@mastra/core": ">=0.11.0-0 <0.14.0-0",
@@ -105,6 +107,8 @@
     "tailwindcss": "^3.0.0"
   },
   "devDependencies": {
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/react-vite": "^9.1.2",
     "@types/node": "^20.19.0",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
@@ -114,18 +118,21 @@
     "clsx": "^2.1.1",
     "postcss": "^8.5.6",
     "rollup-plugin-node-externals": "^8.0.1",
+    "storybook": "^9.1.2",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@mastra/core": "0.13.2"
+    "@mastra/core": "0.14.0-alpha.1"
   },
   "scripts": {
     "build": "tsc && vite build",
     "dev:playground": "vite build --watch",
     "build:publish": "pnpm build && yalc push",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build"
   }
 }