@mastra/playground-ui 58.0.0 → 59.0.0-alpha.1

package/dist/src/ds/components/MetricsLineChart/metrics-line-chart.d.ts

@@ -8,17 +8,19 @@ export type MetricsLineChartSeries = {
     };
 };
 export type MetricsLineChartPointClickHandler = (point: Record<string, unknown>, seriesKey: string) => void;
-export declare function MetricsLineChart({ data, series, height, yDomain, onPointClick, xAxisInterval, xAxisMinTickGap, showDots, }: {
+export declare function MetricsLineChart({ data, series, height, yDomain, onPointClick, xAxisInterval, xAxisMinTickGap, showDots, showLegend, }: {
     data: Record<string, unknown>[];
     series: MetricsLineChartSeries[];
     height?: number;
     yDomain?: [number, number];
     onPointClick?: MetricsLineChartPointClickHandler;
-    /** X-axis tick density. Default `5` (every 6th point). Pass
-     * `"preserveStartEnd"` with `xAxisMinTickGap` for a width-responsive axis. */
+    /** X-axis tick density. Defaults to `"preserveStartEnd"`, which drops labels
+     * to fit the chart width. Pass a number for a fixed step instead. */
     xAxisInterval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
-    /** Minimum px gap between rendered ticks; recharts drops labels to honor it. */
+    /** Minimum px gap between rendered ticks; recharts drops labels to honor it. Default `28`. */
     xAxisMinTickGap?: number;
     /** Render a visible dot on every point (needed for single-point series). */
     showDots?: boolean;
+    /** Set to `false` to render `MetricsLineChartLegend` elsewhere, e.g. next to tabs. */
+    showLegend?: boolean;
 }): import("react").JSX.Element;

package/dist/src/ds/components/MetricsLineChart/metrics-line-chart.stories.d.ts

@@ -5,4 +5,5 @@ export default meta;
 type Story = StoryObj<typeof MetricsLineChart>;
 export declare const MultipleSeries: Story;
 export declare const SinglePoint: Story;
+export declare const InMetricsCardWithTabs: Story;
 export declare const FixedDomain: Story;

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

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

package/dist/src/ds/components/RelativeTimestamp/relative-timestamp.d.ts

@@ -0,0 +1,6 @@
+import { DateInput } from '../../../utils/date-format';
+export interface RelativeTimestampProps {
+    value: DateInput;
+    className?: string;
+}
+export declare function RelativeTimestamp({ value, className }: RelativeTimestampProps): import("react").JSX.Element | null;

package/dist/src/ds/components/RelativeTimestamp/relative-timestamp.stories.d.ts

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

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

@@ -1,5 +1,5 @@
-export type StatusTone = 'success' | 'progress' | 'error' | 'idle' | 'neutral';
-export type StatusDotGlyph = 'circle' | 'square' | 'dashed';
+export type StatusTone = 'success' | 'progress' | 'error' | 'neutral';
+export type StatusDotGlyph = 'filled' | 'ring';
 export type StatusPresentation = {
     label: string;
     tone: StatusTone;
@@ -7,5 +7,34 @@ export type StatusPresentation = {
     description: string;
 };
 export type StatusPresentationFn<T> = (status: T | null) => StatusPresentation;
+export type DeployState = 'ready' | 'building' | 'idle' | 'queued' | 'stopped' | 'error';
+export declare const deployStates: {
+    ready: {
+        label: string;
+        tone: "success";
+    };
+    building: {
+        label: string;
+        tone: "progress";
+    };
+    idle: {
+        label: string;
+        tone: "neutral";
+        glyph: "ring";
+    };
+    queued: {
+        label: string;
+        tone: "neutral";
+        glyph: "ring";
+    };
+    stopped: {
+        label: string;
+        tone: "neutral";
+    };
+    error: {
+        label: string;
+        tone: "error";
+    };
+};
 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.stories.d.ts

@@ -1,9 +1,8 @@
 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>>;
+import { DeployState } from './status-dot-styles';
+declare const meta: Meta<typeof StatusDot<DeployState>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Tones: Story;
+export declare const States: Story;

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

@@ -1,7 +1,6 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef } 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;
+export declare function Status({ presentation, className, ...props }: StatusProps): import("react").JSX.Element;

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

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof Status>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const TextSlot: Story;
+export declare const Inherited: Story;
+export declare const InContext: Story;

package/dist/src/ds/components/Txt/Txt.d.ts

@@ -5,12 +5,16 @@ export interface TxtProps extends HTMLAttributes<HTMLDivElement | HTMLLabelEleme
     ref?: Ref<HTMLElement>;
     variant?: TextRole;
     tone?: keyof typeof tones;
-    font?: 'mono';
+    font?: keyof typeof fonts;
     htmlFor?: string;
     className?: string;
     title?: string;
     children?: ReactNode;
 }
+declare const fonts: {
+    body: string;
+    mono: string;
+};
 declare const tones: {
     ink: string;
     muted: string;

package/dist/src/ds/components/ai/task-list/task-graph-node.d.ts

@@ -0,0 +1,8 @@
+import { TaskItem } from '@mastra/core/signals';
+type TaskStatus = TaskItem['status'];
+export declare const TASK_ROW_HEIGHT = 28;
+export declare const TASK_GRAPH_MOTION_MS = 600;
+export declare const taskGraphMotion = "duration-[600ms] ease-(--resize-ease) motion-reduce:transition-none";
+export declare const taskGraphNodeClass = "absolute top-1/2 left-0.5 -translate-y-1/2 transition-[translate]";
+export declare const taskGraphLaneShift: Record<TaskStatus, string>;
+export {};

package/dist/src/ds/components/ai/task-list/task-graph.d.ts

@@ -0,0 +1,8 @@
+import { TaskItem } from '@mastra/core/signals';
+type TaskStatus = TaskItem['status'];
+interface TaskGraphLinesProps {
+    statuses: TaskStatus[];
+    singleLane?: boolean;
+}
+export declare const TaskGraphLines: ({ statuses, singleLane }: TaskGraphLinesProps) => import("react").JSX.Element;
+export {};

package/dist/src/ds/components/ai/task-list/task-list.d.ts

@@ -1,9 +1,7 @@
 import { TaskItem } from '@mastra/core/signals';
-import { ComponentProps, ReactNode } from 'react';
-import { CollapsibleTrigger } from '../../Collapsible';
+import { ComponentProps } from 'react';
 export type TaskListItem = TaskItem;
 export declare const TaskListContainer: ({ className, ...props }: ComponentProps<"section">) => import("react").JSX.Element;
-export declare const TaskListHeader: ({ className, ...props }: ComponentProps<typeof CollapsibleTrigger>) => import("react").JSX.Element;
 export interface TaskListProgressProps extends Omit<ComponentProps<'span'>, 'children'> {
     tasks: TaskListItem[];
 }
@@ -15,13 +13,11 @@ export declare const TaskListStatusIcon: ({ status, className, ...props }: TaskL
 export interface TaskListRowProps extends ComponentProps<'li'> {
     task: TaskListItem;
 }
-export declare const TaskListRow: ({ task, className, ...props }: TaskListRowProps) => import("react").JSX.Element;
-export interface TaskListProps extends Omit<ComponentProps<typeof TaskListContainer>, 'children' | 'title'> {
+export declare const TaskListRow: ({ task, className, style, ...props }: TaskListRowProps) => import("react").JSX.Element;
+export interface TaskListProps extends Omit<ComponentProps<typeof TaskListContainer>, 'children'> {
     tasks: TaskListItem[];
-    title?: ReactNode;
-    hideWhenEmpty?: boolean;
     hideWhenComplete?: boolean;
     scrollActiveIntoView?: boolean;
     defaultOpen?: boolean;
 }
-export declare const TaskList: ({ tasks, title, hideWhenEmpty, hideWhenComplete, scrollActiveIntoView, defaultOpen, ...props }: TaskListProps) => import("react").JSX.Element | null;
+export declare const TaskList: ({ tasks, hideWhenComplete, scrollActiveIntoView, defaultOpen, className, ...props }: TaskListProps) => import("react").JSX.Element | null;

package/dist/src/ds/components/ai/task-list/task-list.stories.d.ts

@@ -7,5 +7,5 @@ export declare const MixedProgress: Story;
 export declare const OneActiveTask: Story;
 export declare const Collapsed: Story;
 export declare const LongList: Story;
-export declare const Empty: Story;
 export declare const Completed: Story;
+export declare const Live: Story;

package/dist/src/ds/components/ai/task-list/use-focused-row-scroll.d.ts

@@ -0,0 +1,12 @@
+export declare const taskWindowHeight: (rowCount: number, open: boolean) => number;
+interface FocusedRowScrollOptions {
+    focusIndex: number;
+    rowCount: number;
+    open: boolean;
+    followFocus: boolean;
+}
+export declare const useFocusedRowScroll: ({ focusIndex, rowCount, open, followFocus }: FocusedRowScrollOptions) => {
+    viewportRef: import('react').RefObject<HTMLDivElement | null>;
+    glideForOpen: (nextOpen: boolean) => void;
+};
+export {};

package/dist/src/ds/new/layout/page-header/page-header.stories.d.ts

@@ -64,6 +64,7 @@ export declare const Default: Story;
 export declare const AllSlots: Story;
 export declare const MetaBeside: Story;
 export declare const MetaBoth: Story;
+export declare const MetaText: Story;
 export declare const IconOnly: Story;
 export declare const TitleOnly: Story;
 export declare const MetaOnly: Story;

package/dist/src/ds/new/settings/settings-row.d.ts

@@ -6,10 +6,12 @@ export type SettingsRowProps = Omit<ComponentProps<'div'>, 'children'> & {
     children?: ReactNode;
     tone?: 'default' | 'destructive';
     viewOnly?: boolean;
+    required?: boolean;
+    errorMsg?: ReactNode;
 };
 type SettingsRowLayoutProps = SettingsRowProps & {
     layout: 'factory' | 'standalone' | 'section';
 };
-export declare function SettingsRowLayout({ label, description, htmlFor, children, className, layout, tone, viewOnly, ...props }: SettingsRowLayoutProps): import("react").JSX.Element;
+export declare function SettingsRowLayout({ label, description, htmlFor, children, className, layout, tone, viewOnly, required, errorMsg, ...props }: SettingsRowLayoutProps): import("react").JSX.Element;
 export declare function SettingsRow(props: SettingsRowProps): import("react").JSX.Element;
 export {};

package/dist/src/ds/new/settings/settings.stories.d.ts

@@ -296,5 +296,6 @@ type Story = StoryObj<typeof meta>;
 export declare const General: Story;
 export declare const Connection: Story;
 export declare const Permissions: Story;
+export declare const Validation: Story;
 export declare const Page: Story;
 export declare const PageHeaderOnly: Story;

package/dist/src/hooks/stories/state/use-elapsed-time.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+declare function ElapsedTimeDemo(): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof ElapsedTimeDemo;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/hooks/use-elapsed-time.d.ts

@@ -0,0 +1,2 @@
+/** Milliseconds elapsed since `isActive` became true (or since `startTime`), refreshed every 100ms. */
+export declare function useElapsedTime(isActive: boolean, startTime?: number): number;

package/dist/src/lib/cost.d.ts

@@ -0,0 +1,6 @@
+export interface CompactNumberFormatOptions {
+    currency?: string;
+}
+export declare function formatCompactNumber(value: number, { currency }?: CompactNumberFormatOptions): string;
+export declare function formatFullNumber(value: number, { currency }?: CompactNumberFormatOptions): string;
+export declare function formatCost(value: number, unit?: string | null): string;

package/dist/src/utils/cost.d.ts

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

package/dist/src/utils/date-format.d.ts

@@ -0,0 +1,28 @@
+export type DateInput = Date | string | number | null | undefined;
+export type DatePreset = 'date' | 'date-time' | 'date-time-seconds' | 'time' | 'time-seconds' | 'relative-time';
+type FormatOptions = {
+    locale?: string;
+    now?: Date | number;
+    timeZone?: string;
+};
+export declare function toDate(value: DateInput): Date | undefined;
+/** Short absolute date without time: `Sep 24` this year, `Sep 24, 2025` otherwise. */
+export declare function formatShortDate(value: DateInput, { locale, now, timeZone }?: FormatOptions): string | undefined;
+/**
+ * Uses the browser locale unless `locale` is given.
+ * - `date`: date only; omits the year when it matches `now` in the requested timezone
+ * - `date-time`: date, year and time to minutes, including historical dates
+ * - `date-time-seconds`: date, year and time to seconds
+ * - `time`: time to minutes, without a date
+ * - `time-seconds`: time to seconds, without a date
+ * - `relative-time`: short relative label; delegates to `date` at seven days
+ */
+export declare function formatDate(value: DateInput, preset: DatePreset, options?: FormatOptions): string | undefined;
+/** Locale-aware compact date range, e.g. `Sep 2 – 5, 2026`. */
+export declare function formatDateRange(start: DateInput, end: DateInput, options?: Omit<FormatOptions, 'now'>): string | undefined;
+/** Date and time down to milliseconds, for trace debugging. `withDate: false` keeps only the time. */
+export declare function formatTimestampPrecise(value: DateInput, { locale, withDate }?: {
+    locale?: string;
+    withDate?: boolean;
+}): string | undefined;
+export {};

package/dist/src/utils/duration.d.ts

@@ -1 +1,7 @@
-export declare function formatDuration(durationMs: number): string | undefined;
+export declare function formatDuration(durationMs: number | null | undefined, { signed }?: {
+    signed?: boolean;
+}): string | undefined;
+/** Millisecond-precise duration for span timelines: `123 ms`, `1.234 s`. */
+export declare function formatDurationPrecise(durationMs: number | null | undefined): string | undefined;
+/** Live counter label with a fixed decimal so the width stays stable: `3.2s`. */
+export declare function formatElapsed(elapsedMs: number): string;

package/dist/src/utils/relative-time.d.ts

@@ -0,0 +1,7 @@
+import { DateInput } from './date-format';
+/** Short relative label (`5m ago`, `in 5m`); falls back to an absolute date beyond 7 days. */
+export declare function formatRelativeTime(value: DateInput, options?: {
+    now?: Date | number;
+    locale?: string;
+    timeZone?: string;
+}): string | undefined;