@mastra/playground-ui 5.0.5-alpha.0 → 5.1.0-alpha.1

package/dist/src/components/assistant-ui/image-with-fallback.d.ts

@@ -0,0 +1,3 @@
+import { ImgHTMLAttributes } from '../../../node_modules/@types/react';
+
+export declare const ImageWithFallback: ({ alt, src, ...rest }: ImgHTMLAttributes<HTMLImageElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/assistant-ui/thread.d.ts

@@ -3,8 +3,9 @@ import { ToolCallContentPartComponent } from '@assistant-ui/react';
 export interface ThreadProps {
     ToolFallback?: ToolCallContentPartComponent;
     agentName?: string;
+    hasMemory?: boolean;
 }
-export declare const Thread: ({ ToolFallback, agentName }: ThreadProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Thread: ({ ToolFallback, agentName, hasMemory }: ThreadProps) => import("react/jsx-runtime").JSX.Element;
 export interface ThreadWelcomeProps {
     agentName?: string;
 }

package/dist/src/components/ui/data-table.d.ts

@@ -35,5 +35,6 @@ export interface DataTableProps<TData, TValue> {
      * text to display when there are no results
      */
     emptyText?: string;
+    onClick?: (row: TData) => void;
 }
-export declare const DataTable: <TData, TValue>({ columns, data, pagination, gotoNextPage, gotoPreviousPage, getRowId, selectedRowId, isLoading, emptyText, }: DataTableProps<TData, TValue>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <TData, TValue>({ columns, data, pagination, gotoNextPage, gotoPreviousPage, getRowId, selectedRowId, isLoading, emptyText, onClick, }: DataTableProps<TData, TValue>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/context/legacy-workflow-nested-graph-context.d.ts

@@ -0,0 +1,13 @@
+type LegacyWorkflowNestedGraphContextType = {
+    showNestedGraph: ({ label, stepGraph, stepSubscriberGraph, }: {
+        label: string;
+        stepGraph: any;
+        stepSubscriberGraph: any;
+    }) => void;
+    closeNestedGraph: () => void;
+};
+export declare const LegacyWorkflowNestedGraphContext: import('../../../../node_modules/@types/react').Context<LegacyWorkflowNestedGraphContextType>;
+export declare function LegacyWorkflowNestedGraphProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/domains/workflows/context/workflow-nested-graph-context.d.ts

@@ -1,8 +1,9 @@
+import { SerializedStepFlowEntry } from '@mastra/core/workflows';
+
 type WorkflowNestedGraphContextType = {
-    showNestedGraph: ({ label, stepGraph, stepSubscriberGraph, }: {
+    showNestedGraph: ({ label, stepGraph }: {
         label: string;
-        stepGraph: any;
-        stepSubscriberGraph: any;
+        stepGraph: SerializedStepFlowEntry[];
     }) => void;
     closeNestedGraph: () => void;
 };

package/dist/src/domains/workflows/context/workflow-run-context.d.ts

@@ -1,10 +1,10 @@
-import { ExtendedVNextWorkflowWatchResult, ExtendedWorkflowRunResult } from '../../../hooks/use-workflows';
+import { ExtendedLegacyWorkflowRunResult, ExtendedWorkflowWatchResult } from '../../../hooks/use-workflows';
 
 type WorkflowRunContextType = {
-    result: ExtendedWorkflowRunResult | null;
+    legacyResult: ExtendedLegacyWorkflowRunResult | null;
+    setLegacyResult: React.Dispatch<React.SetStateAction<any>>;
+    result: ExtendedWorkflowWatchResult | null;
     setResult: React.Dispatch<React.SetStateAction<any>>;
-    vNextResult: ExtendedVNextWorkflowWatchResult | null;
-    setVNextResult: React.Dispatch<React.SetStateAction<any>>;
     payload: any;
     setPayload: React.Dispatch<React.SetStateAction<any>>;
     clearData: () => void;

package/dist/src/domains/workflows/index.d.ts

@@ -1,6 +1,6 @@
 export * from './workflow/workflow-traces';
+export * from './workflow/legacy-workflow-graph';
+export * from './workflow/legacy-workflow-trigger';
+export * from './context/workflow-run-context';
 export * from './workflow/workflow-graph';
 export * from './workflow/workflow-trigger';
-export * from './context/workflow-run-context';
-export * from './workflow/v-next-workflow-graph';
-export * from './workflow/v-next-workflow-trigger';

package/dist/src/domains/workflows/workflow/legacy-workflow-graph-inner.d.ts

@@ -0,0 +1,5 @@
+import { LegacyWorkflow } from '@mastra/core/workflows/legacy';
+
+export declare function LegacyWorkflowGraphInner({ workflow }: {
+    workflow: LegacyWorkflow;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/workflow/{v-next-workflow-graph.d.ts → legacy-workflow-graph.d.ts}

@@ -1,5 +1,5 @@
 
-export declare function VNextWorkflowGraph({ workflowId, baseUrl }: {
+export declare function LegacyWorkflowGraph({ workflowId, baseUrl }: {
     workflowId: string;
     baseUrl: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/workflow/legacy-workflow-nested-graph.d.ts

@@ -0,0 +1,6 @@
+
+export declare function LegacyWorkflowNestedGraph({ stepGraph, stepSubscriberGraph, open, }: {
+    stepGraph: any;
+    stepSubscriberGraph: any;
+    open: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/workflow/legacy-workflow-nested-node.d.ts

@@ -0,0 +1,12 @@
+import { NodeProps, Node } from '@xyflow/react';
+
+type LegacyWorkflowNestedNode = Node<{
+    label: string;
+    description?: string;
+    withoutTopHandle?: boolean;
+    withoutBottomHandle?: boolean;
+    stepGraph: any;
+    stepSubscriberGraph: any;
+}, 'nested-node'>;
+export declare function LegacyWorkflowNestedNode({ data }: NodeProps<LegacyWorkflowNestedNode>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/domains/workflows/workflow/legacy-workflow-status.d.ts

@@ -0,0 +1,6 @@
+export interface LegacyWorkflowStatusProps {
+    stepId: string;
+    pathStatus: string;
+    path: string;
+}
+export declare const LegacyWorkflowStatus: ({ stepId, pathStatus, path }: LegacyWorkflowStatusProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/workflow/{v-next-workflow-trigger.d.ts → legacy-workflow-trigger.d.ts}

@@ -1,4 +1,4 @@
-export declare function VNextWorkflowTrigger({ workflowId, baseUrl, setRunId, }: {
+export declare function LegacyWorkflowTrigger({ workflowId, baseUrl, setRunId, }: {
     workflowId: string;
     baseUrl: string;
     setRunId?: (runId: string) => void;

package/dist/src/domains/workflows/workflow/utils.d.ts

@@ -1,5 +1,5 @@
-import { StepCondition } from '@mastra/core/workflows';
-import { NewWorkflow } from '@mastra/core/workflows/vNext';
+import { Workflow } from '@mastra/core/workflows';
+import { StepCondition } from '@mastra/core/workflows/legacy';
 import { Node, Edge } from '@xyflow/react';
 
 export type ConditionConditionType = 'if' | 'else' | 'when' | 'until' | 'while' | 'dountil' | 'dowhile';
@@ -32,7 +32,7 @@ export type WStep = {
         stepSubscriberGraph?: any;
     };
 };
-export declare const contructNodesAndEdges: ({ stepGraph, stepSubscriberGraph, steps: mainSteps, }: {
+export declare const contructLegacyNodesAndEdges: ({ stepGraph, stepSubscriberGraph, steps: mainSteps, }: {
     stepGraph: any;
     stepSubscriberGraph: any;
     steps?: WStep;
@@ -40,8 +40,8 @@ export declare const contructNodesAndEdges: ({ stepGraph, stepSubscriberGraph, s
     nodes: Node[];
     edges: Edge[];
 };
-export declare const constructVNextNodesAndEdges: ({ stepGraph, }: {
-    stepGraph: NewWorkflow["serializedStepGraph"];
+export declare const constructNodesAndEdges: ({ stepGraph, }: {
+    stepGraph: Workflow["serializedStepGraph"];
 }) => {
     nodes: Node[];
     edges: Edge[];

package/dist/src/domains/workflows/workflow/workflow-card.d.ts

@@ -0,0 +1,6 @@
+export interface WorkflowCardProps {
+    header: React.ReactNode;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+export declare const WorkflowCard: ({ header, children, footer }: WorkflowCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/workflow/workflow-graph-inner.d.ts

@@ -1,5 +1,5 @@
-import { Workflow } from '@mastra/core/workflows';
+import { GetWorkflowResponse } from '@mastra/client-js';
 
 export declare function WorkflowGraphInner({ workflow }: {
-    workflow: Workflow;
+    workflow: GetWorkflowResponse;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/workflow/workflow-nested-graph.d.ts

@@ -1,6 +1,6 @@
+import { SerializedStepFlowEntry } from '@mastra/core/workflows';
 
-export declare function WorkflowNestedGraph({ stepGraph, stepSubscriberGraph, open, }: {
-    stepGraph: any;
-    stepSubscriberGraph: any;
+export declare function WorkflowNestedGraph({ stepGraph, open }: {
+    stepGraph: SerializedStepFlowEntry[];
     open: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/workflow/workflow-nested-node.d.ts

@@ -1,11 +1,11 @@
 import { NodeProps, Node } from '@xyflow/react';
+import { StepFlowEntry } from '@mastra/core/workflows';
 
 export type NestedNode = Node<{
     label: string;
     description?: string;
     withoutTopHandle?: boolean;
     withoutBottomHandle?: boolean;
-    stepGraph: any;
-    stepSubscriberGraph: any;
+    stepGraph: StepFlowEntry[];
 }, 'nested-node'>;
 export declare function WorkflowNestedNode({ data }: NodeProps<NestedNode>): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/workflow/workflow-result.d.ts

@@ -0,0 +1,5 @@
+export interface WorkflowResultProps {
+    jsonResult: string;
+    sanitizedJsonResult?: string | null;
+}
+export declare const WorkflowResult: ({ jsonResult, sanitizedJsonResult }: WorkflowResultProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/workflow/workflow-status.d.ts

@@ -0,0 +1,5 @@
+export interface WorkflowStatusProps {
+    stepId: string;
+    status: string;
+}
+export declare const WorkflowStatus: ({ stepId, status }: WorkflowStatusProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/tokens/sizes.d.ts

@@ -1,6 +1,7 @@
 export declare const Sizes: {
     'icon-default': string;
     'icon-lg': string;
+    'icon-sm': string;
     'button-md': string;
     'button-lg': string;
     'header-default': string;

package/dist/src/hooks/use-workflows.d.ts

@@ -1,33 +1,34 @@
-import { Workflow } from '@mastra/core/workflows';
-import { WorkflowRunResult as BaseWorkflowRunResult, VNextWorkflowWatchResult, GetVNextWorkflowResponse } from '@mastra/client-js';
+import { LegacyWorkflowRunResult, WorkflowWatchResult, GetWorkflowResponse } from '@mastra/client-js';
+import { LegacyWorkflow } from '@mastra/core/workflows/legacy';
 
-export type ExtendedWorkflowRunResult = BaseWorkflowRunResult & {
+export type ExtendedLegacyWorkflowRunResult = LegacyWorkflowRunResult & {
     sanitizedOutput?: string | null;
     sanitizedError?: {
         message: string;
         stack?: string;
     } | null;
 };
-export type ExtendedVNextWorkflowWatchResult = VNextWorkflowWatchResult & {
+export type ExtendedWorkflowWatchResult = WorkflowWatchResult & {
     sanitizedOutput?: string | null;
     sanitizedError?: {
         message: string;
         stack?: string;
     } | null;
 };
-export declare const useWorkflow: (workflowId: string, baseUrl: string) => {
-    workflow: Workflow<import('@mastra/core').Step<string, any, any, import('@mastra/core').StepExecutionContext<any, import('@mastra/core').WorkflowContext<any, import('@mastra/core').Step<string, any, any, any>[], Record<string, any>>>>[], string, any, any> | null;
+export declare const useLegacyWorkflow: (workflowId: string, baseUrl: string) => {
+    legacyWorkflow: LegacyWorkflow<import('@mastra/core/workflows/legacy').LegacyStep<string, any, any, import('@mastra/core/workflows/legacy').StepExecutionContext<any, import('@mastra/core/workflows/legacy').WorkflowContext<any, import('@mastra/core/workflows/legacy').LegacyStep<string, any, any, any>[], Record<string, any>>>>[], string, any, any> | null;
     isLoading: boolean;
 };
-export declare const useVNextWorkflow: (workflowId: string, baseUrl: string) => {
-    vNextWorkflow: GetVNextWorkflowResponse | null;
+export declare const useWorkflow: (workflowId: string, baseUrl: string) => {
+    workflow: GetWorkflowResponse | null;
     isLoading: boolean;
 };
 export declare const useExecuteWorkflow: (baseUrl: string) => {
-    startWorkflowRun: ({ workflowId, runId, input }: {
+    startWorkflowRun: ({ workflowId, runId, input, runtimeContext: playgroundRuntimeContext, }: {
         workflowId: string;
         runId: string;
         input: any;
+        runtimeContext: Record<string, any>;
     }) => Promise<void>;
     createWorkflowRun: ({ workflowId, prevRunId }: {
         workflowId: string;
@@ -35,41 +36,40 @@ export declare const useExecuteWorkflow: (baseUrl: string) => {
     }) => Promise<{
         runId: string;
     }>;
-    startVNextWorkflowRun: ({ workflowId, runId, input, runtimeContext: playgroundRuntimeContext, }: {
+    startLegacyWorkflowRun: ({ workflowId, runId, input, }: {
         workflowId: string;
         runId: string;
         input: any;
-        runtimeContext: Record<string, any>;
     }) => Promise<void>;
-    createVNextWorkflowRun: ({ workflowId, prevRunId }: {
+    createLegacyWorkflowRun: ({ workflowId, prevRunId }: {
         workflowId: string;
         prevRunId?: string;
     }) => Promise<{
         runId: string;
     }>;
-    startAsyncVNextWorkflowRun: ({ workflowId, runId, input, runtimeContext: playgroundRuntimeContext, }: {
+    startAsyncWorkflowRun: ({ workflowId, runId, input, runtimeContext: playgroundRuntimeContext, }: {
         workflowId: string;
         runId?: string;
         input: any;
         runtimeContext: Record<string, any>;
-    }) => Promise<import('@mastra/client-js').VNextWorkflowRunResult>;
+    }) => Promise<import('@mastra/client-js').WorkflowRunResult>;
 };
 export declare const useWatchWorkflow: (baseUrl: string) => {
-    watchWorkflow: ({ workflowId, runId }: {
+    watchLegacyWorkflow: ({ workflowId, runId }: {
         workflowId: string;
         runId: string;
     }) => Promise<void>;
-    isWatchingWorkflow: boolean;
-    watchResult: ExtendedWorkflowRunResult | null;
-    watchVNextWorkflow: ({ workflowId, runId }: {
+    isWatchingLegacyWorkflow: boolean;
+    legacyWatchResult: ExtendedLegacyWorkflowRunResult | null;
+    watchWorkflow: ({ workflowId, runId }: {
         workflowId: string;
         runId: string;
     }) => Promise<void>;
-    isWatchingVNextWorkflow: boolean;
-    watchVNextResult: ExtendedVNextWorkflowWatchResult | null;
+    isWatchingWorkflow: boolean;
+    watchResult: ExtendedWorkflowWatchResult | null;
 };
 export declare const useResumeWorkflow: (baseUrl: string) => {
-    resumeWorkflow: ({ workflowId, stepId, runId, context, }: {
+    resumeLegacyWorkflow: ({ workflowId, stepId, runId, context, }: {
         workflowId: string;
         stepId: string;
         runId: string;
@@ -77,8 +77,8 @@ export declare const useResumeWorkflow: (baseUrl: string) => {
     }) => Promise<{
         message: string;
     }>;
-    isResumingWorkflow: boolean;
-    resumeVNextWorkflow: ({ workflowId, step, runId, resumeData, runtimeContext: playgroundRuntimeContext, }: {
+    isResumingLegacyWorkflow: boolean;
+    resumeWorkflow: ({ workflowId, step, runId, resumeData, runtimeContext: playgroundRuntimeContext, }: {
         workflowId: string;
         step: string | string[];
         runId: string;
@@ -87,5 +87,5 @@ export declare const useResumeWorkflow: (baseUrl: string) => {
     }) => Promise<{
         message: string;
     }>;
-    isResumingVNextWorkflow: boolean;
+    isResumingWorkflow: boolean;
 };

package/dist/tokens.cjs.js

@@ -59,6 +59,7 @@ const LineHeights = {
 const Sizes = {
   "icon-default": "16px",
   "icon-lg": "20px",
+  "icon-sm": "12px",
   "button-md": "24px",
   "button-lg": "40px",
   "header-default": "40px",

package/dist/tokens.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.cjs.js","sources":["../src/ds/tokens/borders.ts","../src/ds/tokens/colors.ts","../src/ds/tokens/fonts.ts","../src/ds/tokens/sizes.ts","../src/ds/tokens/spacings.ts"],"sourcesContent":["export const BorderWidth = {\n  sm: '0.5px',\n};\n\nexport const BorderRadius = {\n  none: '0px',\n  sm: '2px',\n  md: '4px',\n  lg: '6px',\n};\n","export const Colors = {\n  surface1: '#000000',\n  surface2: '#0F0F0F',\n  surface3: '#141414',\n  surface4: '#1A1A1A',\n  surface5: 'rgba(46, 46, 46, 0.9)',\n  accent1: '#1AFB6F',\n  accent2: '#FF4931',\n  accent3: '#267AD2',\n  accent4: '#9E57B3',\n};\n\nexport const BorderColors = {\n  border1: 'rgba(48, 48, 48, 1)',\n  border2: 'rgba(66, 66, 66, 1)',\n};\n\nexport const IconColors = {\n  icon1: '#5C5C5C',\n  icon2: '#707070',\n  icon3: '#939393',\n  icon4: '#A9A9A9',\n  icon5: '#E6E6E6',\n  icon6: '#FFFFFF',\n};\n","export const FontSizes = {\n  'header-md': '1rem', // 16px\n  'ui-lg': '0.813rem', // 13px\n  'ui-md': '0.75rem', // 12px\n  'ui-sm': '0.688rem', // 11px\n  'ui-xs': '0.625rem', // 10px\n};\n\nexport const LineHeights = {\n  'header-md': '125%',\n  'ui-lg': '153.846%',\n  'ui-md': '166.667%',\n  'ui-sm': '181.818%',\n  'ui-xs': '200%',\n};\n","export const Sizes = {\n  'icon-default': '16px',\n  'icon-lg': '20px',\n  'button-md': '24px',\n  'button-lg': '40px',\n  'header-default': '40px',\n  'table-header': '28px',\n  'table-row': '44px',\n  'table-row-small': '32px',\n  'badge-default': '20px',\n  'avatar-default': '24px',\n};\n","export const Spacings = {\n  sm: '2px',\n  md: '4px',\n  lg: '8px',\n};\n"],"names":[],"mappings":";;;;AAAO,MAAM,WAAc,GAAA;AAAA,EACzB,EAAI,EAAA;AACN;AAEO,MAAM,YAAe,GAAA;AAAA,EAC1B,IAAM,EAAA,KAAA;AAAA,EACN,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA;AACN;;ACTO,MAAM,MAAS,GAAA;AAAA,EACpB,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,uBAAA;AAAA,EACV,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA;AACX;AAEO,MAAM,YAAe,GAAA;AAAA,EAC1B,OAAS,EAAA,qBAAA;AAAA,EACT,OAAS,EAAA;AACX;AAEO,MAAM,UAAa,GAAA;AAAA,EACxB,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA;AACT;;ACxBO,MAAM,SAAY,GAAA;AAAA,EACvB,WAAa,EAAA,MAAA;AAAA;AAAA,EACb,OAAS,EAAA,UAAA;AAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA;AAAA,EACT,OAAS,EAAA,UAAA;AAAA;AAAA,EACT,OAAS,EAAA;AAAA;AACX;AAEO,MAAM,WAAc,GAAA;AAAA,EACzB,WAAa,EAAA,MAAA;AAAA,EACb,OAAS,EAAA,UAAA;AAAA,EACT,OAAS,EAAA,UAAA;AAAA,EACT,OAAS,EAAA,UAAA;AAAA,EACT,OAAS,EAAA;AACX;;ACdO,MAAM,KAAQ,GAAA;AAAA,EACnB,cAAgB,EAAA,MAAA;AAAA,EAChB,SAAW,EAAA,MAAA;AAAA,EACX,WAAa,EAAA,MAAA;AAAA,EACb,WAAa,EAAA,MAAA;AAAA,EACb,gBAAkB,EAAA,MAAA;AAAA,EAClB,cAAgB,EAAA,MAAA;AAAA,EAChB,WAAa,EAAA,MAAA;AAAA,EACb,iBAAmB,EAAA,MAAA;AAAA,EACnB,eAAiB,EAAA,MAAA;AAAA,EACjB,gBAAkB,EAAA;AACpB;;ACXO,MAAM,QAAW,GAAA;AAAA,EACtB,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA;AACN;;;;;;;;;;;;"}
+{"version":3,"file":"tokens.cjs.js","sources":["../src/ds/tokens/borders.ts","../src/ds/tokens/colors.ts","../src/ds/tokens/fonts.ts","../src/ds/tokens/sizes.ts","../src/ds/tokens/spacings.ts"],"sourcesContent":["export const BorderWidth = {\n  sm: '0.5px',\n};\n\nexport const BorderRadius = {\n  none: '0px',\n  sm: '2px',\n  md: '4px',\n  lg: '6px',\n};\n","export const Colors = {\n  surface1: '#000000',\n  surface2: '#0F0F0F',\n  surface3: '#141414',\n  surface4: '#1A1A1A',\n  surface5: 'rgba(46, 46, 46, 0.9)',\n  accent1: '#1AFB6F',\n  accent2: '#FF4931',\n  accent3: '#267AD2',\n  accent4: '#9E57B3',\n};\n\nexport const BorderColors = {\n  border1: 'rgba(48, 48, 48, 1)',\n  border2: 'rgba(66, 66, 66, 1)',\n};\n\nexport const IconColors = {\n  icon1: '#5C5C5C',\n  icon2: '#707070',\n  icon3: '#939393',\n  icon4: '#A9A9A9',\n  icon5: '#E6E6E6',\n  icon6: '#FFFFFF',\n};\n","export const FontSizes = {\n  'header-md': '1rem', // 16px\n  'ui-lg': '0.813rem', // 13px\n  'ui-md': '0.75rem', // 12px\n  'ui-sm': '0.688rem', // 11px\n  'ui-xs': '0.625rem', // 10px\n};\n\nexport const LineHeights = {\n  'header-md': '125%',\n  'ui-lg': '153.846%',\n  'ui-md': '166.667%',\n  'ui-sm': '181.818%',\n  'ui-xs': '200%',\n};\n","export const Sizes = {\n  'icon-default': '16px',\n  'icon-lg': '20px',\n  'icon-sm': '12px',\n  'button-md': '24px',\n  'button-lg': '40px',\n  'header-default': '40px',\n  'table-header': '28px',\n  'table-row': '44px',\n  'table-row-small': '32px',\n  'badge-default': '20px',\n  'avatar-default': '24px',\n};\n","export const Spacings = {\n  sm: '2px',\n  md: '4px',\n  lg: '8px',\n};\n"],"names":[],"mappings":";;;;AAAO,MAAM,WAAc,GAAA;AAAA,EACzB,EAAI,EAAA;AACN;AAEO,MAAM,YAAe,GAAA;AAAA,EAC1B,IAAM,EAAA,KAAA;AAAA,EACN,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA;AACN;;ACTO,MAAM,MAAS,GAAA;AAAA,EACpB,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,uBAAA;AAAA,EACV,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA;AACX;AAEO,MAAM,YAAe,GAAA;AAAA,EAC1B,OAAS,EAAA,qBAAA;AAAA,EACT,OAAS,EAAA;AACX;AAEO,MAAM,UAAa,GAAA;AAAA,EACxB,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA;AACT;;ACxBO,MAAM,SAAY,GAAA;AAAA,EACvB,WAAa,EAAA,MAAA;AAAA;AAAA,EACb,OAAS,EAAA,UAAA;AAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA;AAAA,EACT,OAAS,EAAA,UAAA;AAAA;AAAA,EACT,OAAS,EAAA;AAAA;AACX;AAEO,MAAM,WAAc,GAAA;AAAA,EACzB,WAAa,EAAA,MAAA;AAAA,EACb,OAAS,EAAA,UAAA;AAAA,EACT,OAAS,EAAA,UAAA;AAAA,EACT,OAAS,EAAA,UAAA;AAAA,EACT,OAAS,EAAA;AACX;;ACdO,MAAM,KAAQ,GAAA;AAAA,EACnB,cAAgB,EAAA,MAAA;AAAA,EAChB,SAAW,EAAA,MAAA;AAAA,EACX,SAAW,EAAA,MAAA;AAAA,EACX,WAAa,EAAA,MAAA;AAAA,EACb,WAAa,EAAA,MAAA;AAAA,EACb,gBAAkB,EAAA,MAAA;AAAA,EAClB,cAAgB,EAAA,MAAA;AAAA,EAChB,WAAa,EAAA,MAAA;AAAA,EACb,iBAAmB,EAAA,MAAA;AAAA,EACnB,eAAiB,EAAA,MAAA;AAAA,EACjB,gBAAkB,EAAA;AACpB;;ACZO,MAAM,QAAW,GAAA;AAAA,EACtB,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA;AACN;;;;;;;;;;;;"}

package/dist/tokens.es.js

@@ -55,6 +55,7 @@ const LineHeights = {
 const Sizes = {
   "icon-default": "16px",
   "icon-lg": "20px",
+  "icon-sm": "12px",
   "button-md": "24px",
   "button-lg": "40px",
   "header-default": "40px",

package/dist/tokens.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.es.js","sources":["../src/ds/tokens/borders.ts","../src/ds/tokens/colors.ts","../src/ds/tokens/fonts.ts","../src/ds/tokens/sizes.ts","../src/ds/tokens/spacings.ts"],"sourcesContent":["export const BorderWidth = {\n  sm: '0.5px',\n};\n\nexport const BorderRadius = {\n  none: '0px',\n  sm: '2px',\n  md: '4px',\n  lg: '6px',\n};\n","export const Colors = {\n  surface1: '#000000',\n  surface2: '#0F0F0F',\n  surface3: '#141414',\n  surface4: '#1A1A1A',\n  surface5: 'rgba(46, 46, 46, 0.9)',\n  accent1: '#1AFB6F',\n  accent2: '#FF4931',\n  accent3: '#267AD2',\n  accent4: '#9E57B3',\n};\n\nexport const BorderColors = {\n  border1: 'rgba(48, 48, 48, 1)',\n  border2: 'rgba(66, 66, 66, 1)',\n};\n\nexport const IconColors = {\n  icon1: '#5C5C5C',\n  icon2: '#707070',\n  icon3: '#939393',\n  icon4: '#A9A9A9',\n  icon5: '#E6E6E6',\n  icon6: '#FFFFFF',\n};\n","export const FontSizes = {\n  'header-md': '1rem', // 16px\n  'ui-lg': '0.813rem', // 13px\n  'ui-md': '0.75rem', // 12px\n  'ui-sm': '0.688rem', // 11px\n  'ui-xs': '0.625rem', // 10px\n};\n\nexport const LineHeights = {\n  'header-md': '125%',\n  'ui-lg': '153.846%',\n  'ui-md': '166.667%',\n  'ui-sm': '181.818%',\n  'ui-xs': '200%',\n};\n","export const Sizes = {\n  'icon-default': '16px',\n  'icon-lg': '20px',\n  'button-md': '24px',\n  'button-lg': '40px',\n  'header-default': '40px',\n  'table-header': '28px',\n  'table-row': '44px',\n  'table-row-small': '32px',\n  'badge-default': '20px',\n  'avatar-default': '24px',\n};\n","export const Spacings = {\n  sm: '2px',\n  md: '4px',\n  lg: '8px',\n};\n"],"names":[],"mappings":"AAAO,MAAM,WAAc,GAAA;AAAA,EACzB,EAAI,EAAA;AACN;AAEO,MAAM,YAAe,GAAA;AAAA,EAC1B,IAAM,EAAA,KAAA;AAAA,EACN,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA;AACN;;ACTO,MAAM,MAAS,GAAA;AAAA,EACpB,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,uBAAA;AAAA,EACV,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA;AACX;AAEO,MAAM,YAAe,GAAA;AAAA,EAC1B,OAAS,EAAA,qBAAA;AAAA,EACT,OAAS,EAAA;AACX;AAEO,MAAM,UAAa,GAAA;AAAA,EACxB,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA;AACT;;ACxBO,MAAM,SAAY,GAAA;AAAA,EACvB,WAAa,EAAA,MAAA;AAAA;AAAA,EACb,OAAS,EAAA,UAAA;AAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA;AAAA,EACT,OAAS,EAAA,UAAA;AAAA;AAAA,EACT,OAAS,EAAA;AAAA;AACX;AAEO,MAAM,WAAc,GAAA;AAAA,EACzB,WAAa,EAAA,MAAA;AAAA,EACb,OAAS,EAAA,UAAA;AAAA,EACT,OAAS,EAAA,UAAA;AAAA,EACT,OAAS,EAAA,UAAA;AAAA,EACT,OAAS,EAAA;AACX;;ACdO,MAAM,KAAQ,GAAA;AAAA,EACnB,cAAgB,EAAA,MAAA;AAAA,EAChB,SAAW,EAAA,MAAA;AAAA,EACX,WAAa,EAAA,MAAA;AAAA,EACb,WAAa,EAAA,MAAA;AAAA,EACb,gBAAkB,EAAA,MAAA;AAAA,EAClB,cAAgB,EAAA,MAAA;AAAA,EAChB,WAAa,EAAA,MAAA;AAAA,EACb,iBAAmB,EAAA,MAAA;AAAA,EACnB,eAAiB,EAAA,MAAA;AAAA,EACjB,gBAAkB,EAAA;AACpB;;ACXO,MAAM,QAAW,GAAA;AAAA,EACtB,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA;AACN;;;;"}
+{"version":3,"file":"tokens.es.js","sources":["../src/ds/tokens/borders.ts","../src/ds/tokens/colors.ts","../src/ds/tokens/fonts.ts","../src/ds/tokens/sizes.ts","../src/ds/tokens/spacings.ts"],"sourcesContent":["export const BorderWidth = {\n  sm: '0.5px',\n};\n\nexport const BorderRadius = {\n  none: '0px',\n  sm: '2px',\n  md: '4px',\n  lg: '6px',\n};\n","export const Colors = {\n  surface1: '#000000',\n  surface2: '#0F0F0F',\n  surface3: '#141414',\n  surface4: '#1A1A1A',\n  surface5: 'rgba(46, 46, 46, 0.9)',\n  accent1: '#1AFB6F',\n  accent2: '#FF4931',\n  accent3: '#267AD2',\n  accent4: '#9E57B3',\n};\n\nexport const BorderColors = {\n  border1: 'rgba(48, 48, 48, 1)',\n  border2: 'rgba(66, 66, 66, 1)',\n};\n\nexport const IconColors = {\n  icon1: '#5C5C5C',\n  icon2: '#707070',\n  icon3: '#939393',\n  icon4: '#A9A9A9',\n  icon5: '#E6E6E6',\n  icon6: '#FFFFFF',\n};\n","export const FontSizes = {\n  'header-md': '1rem', // 16px\n  'ui-lg': '0.813rem', // 13px\n  'ui-md': '0.75rem', // 12px\n  'ui-sm': '0.688rem', // 11px\n  'ui-xs': '0.625rem', // 10px\n};\n\nexport const LineHeights = {\n  'header-md': '125%',\n  'ui-lg': '153.846%',\n  'ui-md': '166.667%',\n  'ui-sm': '181.818%',\n  'ui-xs': '200%',\n};\n","export const Sizes = {\n  'icon-default': '16px',\n  'icon-lg': '20px',\n  'icon-sm': '12px',\n  'button-md': '24px',\n  'button-lg': '40px',\n  'header-default': '40px',\n  'table-header': '28px',\n  'table-row': '44px',\n  'table-row-small': '32px',\n  'badge-default': '20px',\n  'avatar-default': '24px',\n};\n","export const Spacings = {\n  sm: '2px',\n  md: '4px',\n  lg: '8px',\n};\n"],"names":[],"mappings":"AAAO,MAAM,WAAc,GAAA;AAAA,EACzB,EAAI,EAAA;AACN;AAEO,MAAM,YAAe,GAAA;AAAA,EAC1B,IAAM,EAAA,KAAA;AAAA,EACN,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA;AACN;;ACTO,MAAM,MAAS,GAAA;AAAA,EACpB,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,uBAAA;AAAA,EACV,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA;AACX;AAEO,MAAM,YAAe,GAAA;AAAA,EAC1B,OAAS,EAAA,qBAAA;AAAA,EACT,OAAS,EAAA;AACX;AAEO,MAAM,UAAa,GAAA;AAAA,EACxB,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA;AACT;;ACxBO,MAAM,SAAY,GAAA;AAAA,EACvB,WAAa,EAAA,MAAA;AAAA;AAAA,EACb,OAAS,EAAA,UAAA;AAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA;AAAA,EACT,OAAS,EAAA,UAAA;AAAA;AAAA,EACT,OAAS,EAAA;AAAA;AACX;AAEO,MAAM,WAAc,GAAA;AAAA,EACzB,WAAa,EAAA,MAAA;AAAA,EACb,OAAS,EAAA,UAAA;AAAA,EACT,OAAS,EAAA,UAAA;AAAA,EACT,OAAS,EAAA,UAAA;AAAA,EACT,OAAS,EAAA;AACX;;ACdO,MAAM,KAAQ,GAAA;AAAA,EACnB,cAAgB,EAAA,MAAA;AAAA,EAChB,SAAW,EAAA,MAAA;AAAA,EACX,SAAW,EAAA,MAAA;AAAA,EACX,WAAa,EAAA,MAAA;AAAA,EACb,WAAa,EAAA,MAAA;AAAA,EACb,gBAAkB,EAAA,MAAA;AAAA,EAClB,cAAgB,EAAA,MAAA;AAAA,EAChB,WAAa,EAAA,MAAA;AAAA,EACb,iBAAmB,EAAA,MAAA;AAAA,EACnB,eAAiB,EAAA,MAAA;AAAA,EACjB,gBAAkB,EAAA;AACpB;;ACZO,MAAM,QAAW,GAAA;AAAA,EACtB,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA,KAAA;AAAA,EACJ,EAAI,EAAA;AACN;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "5.0.5-alpha.0",
+  "version": "5.1.0-alpha.1",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -91,14 +91,14 @@
     "use-debounce": "^10.0.4",
     "zod": "^3.24.3",
     "zustand": "^5.0.3",
-    "@mastra/client-js": "^0.1.23-alpha.0"
+    "@mastra/client-js": "^0.2.0-alpha.1"
   },
   "peerDependencies": {
+    "@mastra/core": "^0.9.4",
     "lucide-react": "^0.474.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "tailwindcss": "^3.0.0",
-    "@mastra/core": "^0.9.5-alpha.0"
+    "tailwindcss": "^3.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.17.27",
@@ -115,7 +115,8 @@
     "typescript": "^5.8.2",
     "vite": "^6.0.0",
     "vite-plugin-dts": "^3.9.1",
-    "vite-plugin-lib-inject-css": "^2.2.1"
+    "vite-plugin-lib-inject-css": "^2.2.1",
+    "@mastra/core": "0.10.0-alpha.1"
   },
   "scripts": {
     "dev": "vite",

package/dist/src/domains/workflows/context/v-next-workflow-nested-graph-context.d.ts

@@ -1,14 +0,0 @@
-import { StepFlowEntry } from '@mastra/core/workflows/vNext';
-
-type VNextWorkflowNestedGraphContextType = {
-    showNestedGraph: ({ label, stepGraph }: {
-        label: string;
-        stepGraph: StepFlowEntry[];
-    }) => void;
-    closeNestedGraph: () => void;
-};
-export declare const VNextWorkflowNestedGraphContext: import('../../../../node_modules/@types/react').Context<VNextWorkflowNestedGraphContextType>;
-export declare function VNextWorkflowNestedGraphProvider({ children }: {
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/domains/workflows/workflow/v-next-workflow-graph-inner.d.ts

@@ -1,5 +0,0 @@
-import { GetVNextWorkflowResponse } from '@mastra/client-js';
-
-export declare function VNextWorkflowGraphInner({ workflow }: {
-    workflow: GetVNextWorkflowResponse;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/workflow/v-next-workflow-nested-graph.d.ts

@@ -1,6 +0,0 @@
-import { StepFlowEntry } from '@mastra/core/workflows/vNext';
-
-export declare function VNextWorkflowNestedGraph({ stepGraph, open }: {
-    stepGraph: StepFlowEntry[];
-    open: boolean;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/workflow/v-next-workflow-nested-node.d.ts

@@ -1,11 +0,0 @@
-import { NodeProps, Node } from '@xyflow/react';
-import { StepFlowEntry } from '@mastra/core/workflows/vNext';
-
-export type NestedNode = Node<{
-    label: string;
-    description?: string;
-    withoutTopHandle?: boolean;
-    withoutBottomHandle?: boolean;
-    stepGraph: StepFlowEntry[];
-}, 'nested-node'>;
-export declare function VNextWorkflowNestedNode({ data }: NodeProps<NestedNode>): import("react/jsx-runtime").JSX.Element;