@mastra/playground-ui 55.0.0 → 56.0.0-alpha.5

package/dist/src/ds/components/FilterBar/use-value-step.d.ts

@@ -0,0 +1,33 @@
+import { KeyboardEvent } from 'react';
+import { FilterBarField, FilterBarOperator, FilterBarOption, FilterBarValue } from './types';
+export type UseValueStepOptions = {
+    field: FilterBarField | undefined;
+    operator: FilterBarOperator | undefined;
+    query: string;
+    enabled: boolean;
+    initialValue?: FilterBarValue;
+    onCommit: (value: FilterBarValue) => void;
+};
+/**
+ * Shared value-editing logic for the typeahead value step and the chip value
+ * editor. Single arity: picking an option (or Enter on free text) commits.
+ * Many arity: Enter/click toggles the highlighted option; Ctrl/Meta+Enter (or
+ * `commitSelection`) commits the selection. List navigation itself is owned by
+ * the surrounding `ComboboxPrimitive.Root`.
+ */
+export declare function useValueStep({ field, operator, query, enabled, initialValue, onCommit }: UseValueStepOptions): {
+    isMany: boolean;
+    selected: string[];
+    toggle: (value: string) => void;
+    options: FilterBarOption[];
+    isLoading: boolean;
+    error: unknown;
+    hasSuggestions: boolean;
+    allowFreeText: boolean;
+    /** True when the current query can be committed as free text (non-empty, numeric when the field is a number). */
+    canCommitQuery: boolean;
+    handleSelect: (option: FilterBarOption) => void;
+    handleKeyDown: (event: KeyboardEvent, highlighted: FilterBarOption | null) => boolean;
+    commitSelection: () => boolean;
+    commitFreeText: () => boolean;
+};

package/dist/src/ds/components/FilterBar/use-value-suggestions.d.ts

@@ -0,0 +1,23 @@
+import { FilterBarField, FilterBarOption } from './types';
+/** The field's suggestions, defaulting to True/False for boolean fields. */
+export declare const getFieldSuggestions: (field: FilterBarField | undefined) => FilterBarOption[] | import('./types').FilterBarSuggestionsResolver | undefined;
+export type UseValueSuggestionsOptions = {
+    field: FilterBarField | undefined;
+    operatorId: string;
+    query: string;
+    /** Resolver only runs while true (the value editor is open). */
+    enabled: boolean;
+};
+export type UseValueSuggestionsResult = {
+    options: FilterBarOption[];
+    isLoading: boolean;
+    error: unknown;
+    /** True when the field has any suggestions (static or lazy). */
+    hasSuggestions: boolean;
+};
+/**
+ * Value suggestions for a field. Static lists are filtered locally. Lazy
+ * resolvers run only while `enabled`, are debounced on `query`, receive an
+ * AbortSignal, and only the latest response is applied.
+ */
+export declare function useValueSuggestions({ field, operatorId, query, enabled, }: UseValueSuggestionsOptions): UseValueSuggestionsResult;

package/dist/src/ds/components/MainSidebar/main-sidebar-mobile-trigger.d.ts

@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
 export type MainSidebarMobileTriggerProps = ComponentPropsWithoutRef<'button'> & {
-    /** Override the hamburger icon. */
     icon?: React.ReactNode;
 };
 export declare function MainSidebarMobileTrigger({ className, icon, 'aria-label': ariaLabel, onClick, ...props }: MainSidebarMobileTriggerProps): import("react").JSX.Element;

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

@@ -6,7 +6,6 @@ export type MainSidebarNavHeaderProps = Omit<ComponentPropsWithoutRef<'header'>,
     state?: SidebarState;
     href?: string;
     isActive?: boolean;
-    /** Override the Provider-level LinkComponent. Defaults to `<a>` when neither is set. */
     LinkComponent?: LinkComponent;
 };
 export declare function MainSidebarNavHeader({ children, className, state: stateProp, href, isActive, LinkComponent: LinkProp, ...props }: MainSidebarNavHeaderProps): import("react").JSX.Element;

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

@@ -14,18 +14,7 @@ type NavItemLayoutOptions = {
     size?: MainSidebarNavItemSize;
 };
 type ItemStyleOptions = NavRowSurfaceOptions & NavItemLayoutOptions;
-/**
- * Color chrome of a nav row: background, text, and icon states. Belongs on
- * whatever element spans the whole row box — the interactive element itself, or
- * the flex wrapper holding it next to a trailing action.
- */
 export declare const navRowSurfaceClasses: ({ isActive, isFeatured }: NavRowSurfaceOptions) => string;
-/** Box and typography of a nav row, without the colour chrome. */
 export declare const navItemLayoutClasses: ({ isCollapsed, level, size }: NavItemLayoutOptions) => string;
-/**
- * Shared classes for any sidebar nav row element (anchor, button, custom).
- * Apply directly to the interactive element so `asChild` and custom slotted
- * elements all receive the same styling.
- */
 export declare const navItemClasses: ({ isActive, isCollapsed, isFeatured, level, size }?: ItemStyleOptions) => string;
 export {};

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

@@ -18,17 +18,11 @@ export type MainSidebarNavLinkProps = Omit<ComponentProps<'li'>, 'children'> & {
     isActive?: boolean;
     state?: SidebarState;
     children?: React.ReactNode;
-    /** Visual density for the interactive row. */
     size?: MainSidebarNavItemSize;
-    /** Typed custom interactive element. Sidebar item classes are merged into its `className`. */
     render?: React.ReactElement<SlottedNavChildProps>;
-    /** Optional trailing control rendered beside, never inside, the interactive row. */
     action?: React.ReactNode;
-    /** Override the Provider-level LinkComponent for this row. Defaults to `<a>` when neither is set. */
     LinkComponent?: LinkComponent;
-    /** Nesting depth for manually composed subitems. Data-driven sections set this automatically. */
     level?: number;
-    /** Nested list rendered below the row while keeping valid `<li><a /><ul /></li>` structure. */
     subItems?: React.ReactNode;
     /**
      * When true, render `children` as the interactive element.

package/dist/src/ds/components/Message/index.d.ts

@@ -0,0 +1,4 @@
+export { Message, MessageActions, MessageMetadata } from './message';
+export type { MessageProps, MessageActionsProps } from './message';
+export { MessageCopyButton } from './message-copy-button';
+export { MessageTimestamp } from './message-timestamp';

package/dist/src/ds/components/Message/message-copy-button.d.ts

@@ -0,0 +1,3 @@
+export declare function MessageCopyButton({ text }: {
+    text: string;
+}): import("react").JSX.Element;

package/dist/src/ds/components/Message/message-timestamp.d.ts

@@ -0,0 +1,3 @@
+export declare function MessageTimestamp({ value }: {
+    value: Date | string;
+}): import("react").JSX.Element | null;

package/dist/src/ds/components/Message/message.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ReactNode } from 'react';
+export interface MessageProps extends ComponentProps<'div'> {
+    from: 'user' | 'assistant';
+    avatar?: ReactNode;
+    footer?: ReactNode;
+    pending?: boolean;
+}
+export declare function Message({ from, avatar, footer, pending, children, className, ...props }: MessageProps): import("react").JSX.Element;
+export interface MessageActionsProps extends ComponentProps<'div'> {
+    visibility?: 'hover' | 'always';
+}
+export declare function MessageActions({ visibility, children, className, ...props }: MessageActionsProps): import("react").JSX.Element;
+export declare function MessageMetadata({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;

package/dist/src/ds/components/Message/message.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Message } from './message';
+declare const meta: Meta<typeof Message>;
+export default meta;
+type Story = StoryObj<typeof Message>;
+export declare const Factory: Story;
+export declare const Studio: Story;
+export declare const OtherSender: Story;
+export declare const Pending: Story;
+export declare const LongContent: Story;

package/dist/src/ds/components/PullRequestIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { PullRequestIcon } from './pull-request-icon';
+export type { PullRequestIconProps } from './pull-request-icon';

package/dist/src/ds/components/PullRequestIcon/pull-request-icon.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps } from 'react';
+declare const statuses: {
+    draft: {
+        icon: react.ForwardRefExoticComponent<any>;
+        className: string;
+    };
+    open: {
+        icon: react.ForwardRefExoticComponent<any>;
+        className: string;
+    };
+    closed: {
+        icon: react.ForwardRefExoticComponent<any>;
+        className: string;
+    };
+    merged: {
+        icon: react.ForwardRefExoticComponent<any>;
+        className: string;
+    };
+};
+export interface PullRequestIconProps extends ComponentProps<'svg'> {
+    status: keyof typeof statuses;
+    size?: number;
+}
+export declare function PullRequestIcon({ status, size, className, ...props }: PullRequestIconProps): import("react").JSX.Element;
+export {};

package/dist/src/ds/components/PullRequestIcon/pull-request-icon.stories.d.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react-vite';
+import { PullRequestIcon } from './pull-request-icon';
+declare const meta: {
+    title: string;
+    component: typeof PullRequestIcon;
+    args: {
+        status: "open";
+        'aria-label': string;
+        role: "img";
+    };
+    argTypes: {
+        status: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Open: Story;
+export declare const Draft: Story;
+export declare const Closed: Story;
+export declare const Merged: Story;
+export declare const MergedLight: Story;

package/dist/src/ds/components/Slider/slider.d.ts

@@ -1,7 +1,7 @@
 import { Slider as SliderPrimitive } from '@base-ui/react/slider';
-export type SliderProps = Omit<SliderPrimitive.Root.Props, 'onValueChange' | 'onValueCommitted'> & {
+export type SliderProps = Omit<SliderPrimitive.Root.Props, 'onValueChange' | 'onValueCommitted'> & Pick<SliderPrimitive.Thumb.Props, 'getAriaLabel'> & {
     onValueChange?: (value: number[], eventDetails: SliderPrimitive.Root.ChangeEventDetails) => void;
     onValueCommitted?: (value: number[], eventDetails: SliderPrimitive.Root.CommitEventDetails) => void;
 };
-declare const Slider: ({ className, defaultValue, value, min, max, onValueChange, onValueCommitted, ...props }: SliderProps) => import("react").JSX.Element;
+declare const Slider: ({ className, defaultValue, value, min, max, onValueChange, onValueCommitted, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, getAriaLabel, ...props }: SliderProps) => import("react").JSX.Element;
 export { Slider };

package/dist/src/ds/components/Slider/slider.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof Slider>;
 export default meta;
 type Story = StoryObj<typeof Slider>;
 export declare const Default: Story;
+export declare const ControlledScalar: Story;
 export declare const WithRange: Story;
 export declare const ThreeThumbs: Story;
 export declare const Disabled: Story;

package/dist/src/ds/components/StatusIndicators/index.d.ts

@@ -0,0 +1,3 @@
+export * from './status';
+export * from './status-dot';
+export * from './status-dot-styles';

package/dist/src/ds/components/StatusIndicators/status-dot-styles.d.ts

@@ -0,0 +1,11 @@
+export type StatusTone = 'success' | 'progress' | 'error' | 'idle' | 'neutral';
+export type StatusDotGlyph = 'circle' | 'square' | 'dashed';
+export type StatusPresentation = {
+    label: string;
+    tone: StatusTone;
+    glyph?: StatusDotGlyph;
+    description: string;
+};
+export type StatusPresentationFn<T> = (status: T | null) => StatusPresentation;
+export declare function statusToneFill(tone: StatusTone): string;
+export declare function statusDotClass({ tone, glyph }: Pick<StatusPresentation, 'tone' | 'glyph'>, className?: string): string;

package/dist/src/ds/components/StatusIndicators/status-dot.d.ts

@@ -0,0 +1,8 @@
+import { StatusPresentation, StatusPresentationFn } from './status-dot-styles';
+export declare function StatusDot<T>({ status, presentation, variant, decorative, resolved, }: {
+    status: T | null;
+    presentation: StatusPresentationFn<T>;
+    variant?: 'popover' | 'static';
+    decorative?: boolean;
+    resolved?: StatusPresentation;
+}): import("react").JSX.Element;

package/dist/src/ds/components/StatusIndicators/status-dot.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { StatusDot } from './status-dot';
+declare const STATUSES: readonly ["success", "progress", "error", "idle", "stopped", "unknown"];
+type StoryStatus = (typeof STATUSES)[number];
+declare const meta: Meta<typeof StatusDot<StoryStatus>>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Tones: Story;

package/dist/src/ds/components/StatusIndicators/status.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { StatusPresentation } from './status-dot-styles';
+export type StatusProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {
+    presentation: StatusPresentation;
+    children?: ReactNode;
+};
+export declare function Status({ presentation, children, className, ...props }: StatusProps): import("react").JSX.Element;

package/dist/src/ds/components/StatusIndicators/status.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Status } from './status';
+declare const meta: Meta<typeof Status>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const TextSlot: Story;

package/dist/src/ds/components/Workflow/cards/condition/workflow-condition-card-view.d.ts

@@ -0,0 +1,2 @@
+import { WorkflowConditionCardViewProps } from '../../types';
+export declare function WorkflowConditionCardView({ type, conditions, previousDisplayStatus, actionBar, }: WorkflowConditionCardViewProps): import("react").JSX.Element;

package/dist/src/ds/components/Workflow/cards/condition/workflow-condition-card.d.ts

@@ -0,0 +1,3 @@
+import { WorkflowConditionCardViewProps } from '../../types';
+export type WorkflowConditionCardProps = Omit<WorkflowConditionCardViewProps, 'type'>;
+export declare function WorkflowConditionCard({ conditions, ...props }: WorkflowConditionCardProps): import("react").JSX.Element;

package/dist/src/ds/components/Workflow/cards/condition/workflow-condition-expression.d.ts

@@ -0,0 +1,2 @@
+import { WorkflowCardCondition } from '../../types';
+export declare function conditionExpression(condition: WorkflowCardCondition): string;

package/dist/src/ds/components/Workflow/cards/condition/workflow-condition-source.d.ts

@@ -0,0 +1,3 @@
+export declare function WorkflowConditionSource({ source }: {
+    source: string;
+}): import("react").JSX.Element;

package/dist/src/ds/components/Workflow/cards/step/workflow-step-card-view.d.ts

@@ -0,0 +1,2 @@
+import { WorkflowStepCardViewProps } from '../../types';
+export declare function WorkflowStepCardView(props: WorkflowStepCardViewProps): import("react").JSX.Element;

package/dist/src/ds/components/Workflow/cards/timing/workflow-time-dial.d.ts

@@ -0,0 +1,8 @@
+export type DurationUnit = 'ms' | 's' | 'min' | 'h';
+export declare function ClockDial({ date }: {
+    date: Date;
+}): import("react").JSX.Element;
+export declare function DurationDial({ amount, unit }: {
+    amount: number;
+    unit: DurationUnit;
+}): import("react").JSX.Element;

package/dist/src/ds/components/Workflow/cards/timing/workflow-timing.d.ts

@@ -0,0 +1,2 @@
+import { WorkflowStepCardViewProps } from '../../types';
+export declare function WorkflowTiming({ duration, date }: Pick<WorkflowStepCardViewProps, 'duration' | 'date'>): import("react").JSX.Element | null;

package/dist/src/ds/components/Workflow/cards/workflow-card-badge-utils.d.ts

@@ -62,4 +62,3 @@ export interface WorkflowCardBadgesProps {
 }
 export declare const getNodeBadgeInfo: ({ duration, date, isForEach, mapConfig, canSuspend, isParallel, stepGraph, }: WorkflowCardBadgesProps) => WorkflowNodeBadgeInfo;
 export declare const getNodeIndicators: (props: WorkflowCardBadgesProps) => WorkflowCardIndicator[];
-export declare const getWorkflowCardAccentColor: (indicators: WorkflowCardIndicator[]) => string | undefined;

package/dist/src/ds/components/Workflow/cards/workflow-card-kind.d.ts

@@ -0,0 +1,10 @@
+import { LucideIcon } from 'lucide-react';
+import { WorkflowStepCardViewProps } from '../types';
+import { BadgeVariant } from '../../Badge';
+export type WorkflowTypeBadgeProps = Pick<WorkflowStepCardViewProps, 'nodeKind' | 'isForEach' | 'isNestedWorkflowStep' | 'stepGraph' | 'isParallel' | 'mapConfig' | 'date' | 'duration'>;
+export declare function getWorkflowCardBadge(props: WorkflowTypeBadgeProps): {
+    label: string;
+    Icon: LucideIcon;
+    tone: BadgeVariant;
+    indicator?: string;
+};

package/dist/src/ds/components/Workflow/cards/workflow-clock.d.ts

@@ -1,6 +1,7 @@
 interface WorkflowClockProps {
     startedAt: number;
     endedAt?: number;
+    isRunning?: boolean;
 }
-export declare const WorkflowClock: ({ startedAt, endedAt }: WorkflowClockProps) => import("react").JSX.Element;
+export declare const WorkflowClock: ({ startedAt, endedAt, isRunning }: WorkflowClockProps) => import("react").JSX.Element;
 export {};

package/dist/src/ds/components/Workflow/cards/workflow-type-badge.d.ts

@@ -0,0 +1,2 @@
+import { WorkflowTypeBadgeProps } from './workflow-card-kind';
+export declare function WorkflowTypeBadge(props: WorkflowTypeBadgeProps): import("react").JSX.Element;

package/dist/src/ds/components/Workflow/controls/workflow-debug-controls.d.ts

@@ -1,7 +1,11 @@
+import { ReactNode } from 'react';
 export interface WorkflowDebugControlsProps {
     isStreaming?: boolean;
     canRunNextStep: boolean;
+    nextStepLabel?: string;
+    disabled?: boolean;
+    children?: ReactNode;
     onRunNextStep: () => void;
     onContinueRun: () => void;
 }
-export declare function WorkflowDebugControls({ isStreaming, canRunNextStep, onRunNextStep, onContinueRun, }: WorkflowDebugControlsProps): import("react").JSX.Element;
+export declare function WorkflowDebugControls({ isStreaming, canRunNextStep, nextStepLabel, disabled, children, onRunNextStep, onContinueRun, }: WorkflowDebugControlsProps): import("react").JSX.Element;

package/dist/src/ds/components/Workflow/data/workflow-edge-data-button.d.ts

@@ -1,6 +1,9 @@
+import { MouseEventHandler } from 'react';
 export interface WorkflowEdgeDataButtonProps {
     previousStepId?: string;
     output?: unknown;
     label?: string;
+    selected?: boolean;
+    onInspect?: MouseEventHandler<HTMLButtonElement>;
 }
-export declare const WorkflowEdgeDataButton: ({ previousStepId, output, label }: WorkflowEdgeDataButtonProps) => import("react").JSX.Element | null;
+export declare const WorkflowEdgeDataButton: ({ previousStepId, output, label, selected, onInspect, }: WorkflowEdgeDataButtonProps) => import("react").JSX.Element | null;

package/dist/src/ds/components/Workflow/graph/types.d.ts

@@ -8,6 +8,7 @@ export interface WorkflowDataEdgeData {
     conditionNode?: boolean;
     boundaryPayload?: 'workflow-input' | 'workflow-output';
     edgeStatus?: 'success' | 'idle';
+    dataLabelPlacement?: 'source' | 'hidden';
 }
 export type WorkflowDataEdgeModel = Edge<WorkflowDataEdgeData, typeof WORKFLOW_DATA_EDGE_TYPE>;
 export type WorkflowBoundaryNodeData = {

package/dist/src/ds/components/Workflow/graph/workflow-camera-duration.d.ts

@@ -0,0 +1 @@
+export declare function workflowCameraDuration(): 0 | 300;

package/dist/src/ds/components/Workflow/graph/workflow-data-edge-view.d.ts

@@ -1,7 +1,9 @@
 import { EdgeProps } from '@xyflow/react';
+import { ReactNode } from 'react';
 import { WorkflowDataEdgeModel } from './types';
 export interface WorkflowDataEdgeViewProps extends EdgeProps<WorkflowDataEdgeModel> {
     output?: unknown;
     label?: string;
+    dataControl?: ReactNode;
 }
-export declare function WorkflowDataEdgeView({ output, label, ...props }: WorkflowDataEdgeViewProps): import("react").JSX.Element;
+export declare function WorkflowDataEdgeView({ output, label, dataControl, ...props }: WorkflowDataEdgeViewProps): import("react").JSX.Element;

package/dist/src/ds/components/Workflow/graph/workflow-graph-canvas.d.ts

@@ -1,6 +1,9 @@
 import { Edge, Node, ReactFlowProps } from '@xyflow/react';
+import { WorkflowGraphGroup } from './workflow-graph-groups';
+export type { WorkflowGraphGroup } from './workflow-graph-groups';
 export interface WorkflowGraphCanvasProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> extends Pick<ReactFlowProps<NodeType, EdgeType>, 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes' | 'onNodesChange' | 'onNodeClick'> {
     focusNodeId?: string;
-    variant?: 'default' | 'nested';
+    variant?: 'default' | 'nested' | 'inline';
+    groups?: WorkflowGraphGroup[];
 }
-export declare function WorkflowGraphCanvas<NodeType extends Node, EdgeType extends Edge>({ nodes, edges, nodeTypes, edgeTypes, onNodesChange, onNodeClick, focusNodeId, variant, }: WorkflowGraphCanvasProps<NodeType, EdgeType>): import("react").JSX.Element;
+export declare function WorkflowGraphCanvas<NodeType extends Node, EdgeType extends Edge>({ nodes, edges, nodeTypes, edgeTypes, onNodesChange, onNodeClick, focusNodeId, groups, variant, }: WorkflowGraphCanvasProps<NodeType, EdgeType>): import("react").JSX.Element;

package/dist/src/ds/components/Workflow/graph/workflow-graph-groups.d.ts

@@ -0,0 +1,11 @@
+import { Node } from '@xyflow/react';
+export interface WorkflowGraphGroup {
+    id: string;
+    label: string;
+    description: string;
+    nodeIds: string[];
+}
+export declare function WorkflowGraphGroups({ nodes, groups }: {
+    nodes: Node[];
+    groups: WorkflowGraphGroup[];
+}): import("react").JSX.Element;

package/dist/src/ds/components/Workflow/graph/zoom-slider.d.ts

@@ -1 +1,4 @@
-export declare const ZoomSlider: import('react').ForwardRefExoticComponent<Omit<Omit<any, "children">, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ZoomSlider: import('react').ForwardRefExoticComponent<Omit<Omit<any, "children"> & {
+    compact?: boolean;
+    onFitView?: () => void;
+}, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/ds/components/Workflow/index.d.ts

@@ -1,11 +1,10 @@
 export * from './types';
+export * from './workflow-canvas-inset';
+export * from './cards/workflow-type-badge';
 export * from './cards/workflow-card-badge-utils';
-export * from './cards/workflow-card-badges';
-export * from './cards/workflow-card-status-icon';
 export * from './cards/workflow-clock';
-export * from './cards/workflow-condition-card-view';
-export * from './cards/workflow-condition-code';
-export * from './cards/workflow-step-card-view';
+export * from './cards/condition/workflow-condition-card-view';
+export * from './cards/step/workflow-step-card-view';
 export * from './data/workflow-code-dialog-content';
 export * from './data/workflow-edge-data-button';
 export * from './graph/types';
@@ -15,6 +14,6 @@ export * from './graph/workflow-graph-canvas';
 export * from './graph/workflow-node-frame';
 export * from './controls/workflow-debug-controls';
 export * from './graph/workflow-graph-placeholder';
-export * from './cards/workflow-condition-card';
+export * from './cards/condition/workflow-condition-card';
 export * from './controls/workflow-step-actions';
 export * from './controls/workflow-step-action';

package/dist/src/ds/components/Workflow/stories/graph/graph-example.d.ts

@@ -1,7 +1,9 @@
 import { Node } from '@xyflow/react';
+import { WorkflowGraphCanvasProps } from '../../graph/workflow-graph-canvas';
 import { StoryDataEdge } from './fixtures';
-export declare function GraphExample({ nodes: initialNodes, edges, variant, }: {
+export declare function GraphExample({ nodes: initialNodes, edges, variant, groups, }: {
     nodes: Node[];
     edges: StoryDataEdge[];
-    variant?: 'default' | 'nested';
+    variant?: WorkflowGraphCanvasProps['variant'];
+    groups?: WorkflowGraphCanvasProps['groups'];
 }): import("react").JSX.Element;

package/dist/src/ds/components/Workflow/stories/workflow-condition-card.stories.d.ts

@@ -1,5 +1,5 @@
 import { StoryObj } from '@storybook/react-vite';
-import { WorkflowConditionCard } from '../cards/workflow-condition-card';
+import { WorkflowConditionCard } from '../cards/condition/workflow-condition-card';
 declare const meta: {
     title: string;
     component: typeof WorkflowConditionCard;
@@ -13,7 +13,9 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Collapsed: Story;
 export declare const BranchesAndLoops: Story;
 export declare const MultipleConditions: Story;
 export declare const LongFunction: Story;
+export declare const UnavailableExpression: Story;
+export declare const UnparseableSource: Story;
+export declare const CompoundExpression: Story;

package/dist/src/ds/components/Workflow/stories/workflow-controls.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: {
     title: string;
     component: typeof WorkflowDebugControls;
     args: {
+        nextStepLabel: string;
         canRunNextStep: true;
         onRunNextStep: import('storybook/test').Mock<(...args: any[]) => any>;
         onContinueRun: import('storybook/test').Mock<(...args: any[]) => any>;
@@ -11,6 +12,9 @@ declare const meta: {
     decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react-vite').ReactRenderer, {
         isStreaming?: boolean | undefined;
         canRunNextStep: boolean;
+        nextStepLabel?: string | undefined;
+        disabled?: boolean | undefined;
+        children?: import('react').ReactNode;
         onRunNextStep: () => void;
         onContinueRun: () => void;
     }>) => import("react").JSX.Element)[];
@@ -20,3 +24,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Paused: Story;
 export declare const Streaming: Story;
 export declare const NoNextStep: Story;
+export declare const Cancelling: Story;

package/dist/src/ds/components/Workflow/stories/workflow-data.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ previousStepId, output, label }: import('..').WorkflowEdgeDataButtonProps) => import("react").JSX.Element | null;
+    component: ({ previousStepId, output, label, selected, onInspect, }: import('..').WorkflowEdgeDataButtonProps) => import("react").JSX.Element | null;
     args: {
         previousStepId: string;
         output: {
@@ -24,3 +24,4 @@ export declare const NullOutput: Story;
 export declare const FalseOutput: Story;
 export declare const ZeroOutput: Story;
 export declare const EmptyString: Story;
+export declare const ExternalInspector: Story;

package/dist/src/ds/components/Workflow/stories/workflow-graph.stories.d.ts

@@ -18,7 +18,8 @@ declare const meta: {
     decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react-vite').ReactRenderer, {
         nodes: import('@xyflow/react').Node[];
         edges: import('./graph/fixtures').StoryDataEdge[];
-        variant?: "default" | "nested" | undefined;
+        variant?: "default" | "inline" | "nested" | undefined;
+        groups?: import('..').WorkflowGraphGroup[] | undefined;
     }>) => import("react").JSX.Element)[];
 };
 export default meta;
@@ -29,5 +30,7 @@ export declare const Parallel: Story;
 export declare const Loop: Story;
 export declare const Nested: Story;
 export declare const Narrow: Story;
+export declare const Inline: Story;
+export declare const WithOverlay: Story;
 export declare const Loading: Story;
 export declare const MissingWorkflow: Story;

package/dist/src/ds/components/Workflow/stories/workflow-step-card.stories.d.ts

@@ -1,7 +1,8 @@
 import { StoryObj } from '@storybook/react-vite';
+import { WorkflowStepCardView } from '../cards/step/workflow-step-card-view';
 declare const meta: {
     title: string;
-    component: ({ label, description, displayStatus, hasStep, isNestedWorkflowStep, stepKey, isSelected, isWaiting, isHovered, onHoverChange, duration, date, isForEach, foreachProgress, mapConfig, canSuspend, isParallel, stepGraph, startedAt, endedAt, actionBar, }: import('..').WorkflowStepCardViewProps) => import("react").JSX.Element;
+    component: typeof WorkflowStepCardView;
     args: {
         label: string;
         description: string;
@@ -29,3 +30,8 @@ export declare const ForeachProgress: Story;
 export declare const FailedIteration: Story;
 export declare const Completed: Story;
 export declare const LongContent: Story;
+export declare const InspectAndExpand: Story;
+export declare const EmptyLoop: Story;
+export declare const UnavailableTiming: Story;
+export declare const ExpandedLoop: Story;
+export declare const RunningClock: Story;

package/dist/src/ds/components/Workflow/types.d.ts

@@ -1,6 +1,6 @@
 import { SerializedStepFlowEntry, WorkflowStepStatus } from '@mastra/core/workflows';
 import { ReactNode } from 'react';
-export type WorkflowCardDisplayStatus = Extract<WorkflowStepStatus, 'running' | 'success' | 'failed' | 'suspended' | 'waiting' | 'skipped'> | 'tripwire' | undefined;
+export type WorkflowCardDisplayStatus = WorkflowStepStatus | 'tripwire' | undefined;
 export type WorkflowConditionType = 'if' | 'else' | 'when' | 'until' | 'while' | 'dountil' | 'dowhile';
 export type WorkflowCardCondition = {
     type: WorkflowConditionType;
@@ -20,14 +20,14 @@ export type WorkflowCardCondition = {
     query?: never;
     conj?: never;
 };
-export type WorkflowConditionCodeCondition = Extract<WorkflowCardCondition, {
-    fnString: string;
-}>;
 export interface WorkflowStepCardViewProps {
     label: string;
+    nodeKind?: 'step' | 'agent' | 'tool' | 'map' | 'delay' | 'wait-until';
+    onSelect?: () => void;
+    body?: ReactNode;
+    initiallyOpen?: boolean;
     description?: string;
     displayStatus?: WorkflowCardDisplayStatus;
-    hasStep?: boolean;
     isNestedWorkflowStep?: boolean;
     stepKey?: string;
     isSelected?: boolean;
@@ -54,11 +54,5 @@ export interface WorkflowConditionCardViewProps {
     type?: WorkflowCardCondition['type'];
     conditions: WorkflowCardCondition[];
     previousDisplayStatus?: WorkflowCardDisplayStatus;
-    isOpen: boolean;
-    onOpenChange: (open: boolean) => void;
-    openDialog: boolean;
-    onOpenDialogChange: (open: boolean) => void;
-    dialogCondition?: WorkflowConditionCodeCondition;
-    onConditionClick: (condition: WorkflowConditionCodeCondition) => void;
     actionBar?: ReactNode;
 }

package/dist/src/ds/components/Workflow/workflow-canvas-inset.d.ts

@@ -0,0 +1,3 @@
+import { FitViewOptions } from '@xyflow/react';
+export declare const WorkflowCanvasInsetContext: import('react').Context<number>;
+export declare function workflowFitOptions(leftInset: number, isInline?: boolean): FitViewOptions;