@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

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

@@ -1,5 +1,4 @@
 import { StoryObj } from '@storybook/react-vite';
-import { PageHeaderTitleSize } from './page-header';
 type PageHeaderStoryProps = {
     description: string;
     isLoading: boolean;
@@ -10,9 +9,8 @@ type PageHeaderStoryProps = {
     showMeta: boolean;
     showTitle: boolean;
     title: string;
-    titleSize: PageHeaderTitleSize;
 };
-declare function PageHeaderStory({ description, isLoading, metaBeside, showAction, showDescription, showIcon, showMeta, showTitle, title, titleSize, }: PageHeaderStoryProps): import("react").JSX.Element;
+declare function PageHeaderStory({ description, isLoading, metaBeside, showAction, showDescription, showIcon, showMeta, showTitle, title, }: PageHeaderStoryProps): import("react").JSX.Element;
 declare const meta: {
     title: string;
     component: typeof PageHeaderStory;
@@ -29,16 +27,11 @@ declare const meta: {
         showMeta: false;
         showTitle: true;
         title: string;
-        titleSize: "md";
     };
     argTypes: {
         title: {
             control: "text";
         };
-        titleSize: {
-            control: "inline-radio";
-            options: string[];
-        };
         description: {
             control: "text";
         };
@@ -77,7 +70,6 @@ export declare const MetaOnly: Story;
 export declare const DescriptionOnly: Story;
 export declare const ActionOnly: Story;
 export declare const TallAction: Story;
-export declare const TitleSizes: Story;
 export declare const Loading: Story;
 export declare const LegacyProps: Story;
 export declare const LegacyLoading: Story;

package/dist/src/ds/primitives/control-size.d.ts

@@ -1,7 +1,6 @@
-export type ControlSize = 'xs' | 'sm' | 'md' | 'lg';
+export type ControlSize = 'sm' | 'md' | 'lg';
 export declare const controlHeight: Record<ControlSize, string>;
 export declare const controlSizeClasses: Record<ControlSize, string>;
-export declare const controlIconClasses: Record<ControlSize, string>;
 export type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';
 export declare const controlTriggerOpenState: Record<ControlTriggerVisualVariant | 'field', string>;
 export declare function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined;

package/dist/src/ds/primitives/fluid-menu.d.ts

@@ -1,4 +1,4 @@
-import { UseFluidHoverReturn } from '../../hooks/use-fluid-hover';
+import { UseFluidHoverOptions, UseFluidHoverReturn } from '../../hooks/use-fluid-hover';
 import * as React from 'react';
 /**
  * Shared Fluid Hover wiring for every popup that lists items (DropdownMenu,
@@ -7,10 +7,10 @@ import * as React from 'react';
  *
  * Usage inside a popup component:
  *
- *   const menu = useFluidMenu();
- *   <Popup {...menu.getContainerProps(props, ref)} className={cn(menuPopupClass, menu.containerClassName, className)}>
- *     <FluidMenuItems menu={menu}>{children}</FluidMenuItems>
- *   </Popup>
+ * const menu = useFluidMenu();
+ * <Popup {...menu.getContainerProps(props, ref)} className={cn(menuPopupClass, menu.containerClassName, className)}>
+ * <FluidMenuItems menu={menu}>{children}</FluidMenuItems>
+ * </Popup>
  *
  * and on each row: `ref={useFluidMenuItemRef(forwardedRef)}`.
  *
@@ -24,11 +24,14 @@ type FluidMenuContextValue = {
     setActiveIndex: UseFluidHoverReturn['setActiveIndex'];
     activeAttr: string;
     allocateIndex: () => number;
+    releaseIndex: (index: number) => void;
 };
 type MouseHandlers = Pick<React.HTMLAttributes<HTMLElement>, 'onMouseMove' | 'onMouseEnter' | 'onMouseLeave' | 'onClick'>;
 export type UseFluidMenuOptions = {
     /** Attribute the underlying library sets on its highlighted row. */
     activeAttr?: 'data-highlighted' | 'data-selected';
+    /** Forwarded to `useFluidHover`; lists with inert rows (subheaders, pagination) pass `false`. */
+    gapClick?: UseFluidHoverOptions['gapClick'];
 };
 export type FluidMenu<T extends HTMLElement = HTMLElement> = {
     hover: UseFluidHoverReturn;
@@ -40,7 +43,7 @@ export type FluidMenu<T extends HTMLElement = HTMLElement> = {
         ref: React.Ref<T>;
     };
 };
-export declare function useFluidMenu<T extends HTMLElement = HTMLDivElement>({ activeAttr, }?: UseFluidMenuOptions): FluidMenu<T>;
+export declare function useFluidMenu<T extends HTMLElement = HTMLDivElement>({ activeAttr, gapClick, }?: UseFluidMenuOptions): FluidMenu<T>;
 /**
  * Provides the item registry to the rows and renders the travelling surface.
  * Popups are `bg-popover`; the highlight is the control hover surface on top of it.

package/dist/src/ds/primitives/form-element.d.ts

@@ -1,13 +1,11 @@
 export declare const sharedFormElementDisabledStyle = "disabled:cursor-not-allowed disabled:text-muted-foreground";
-export declare const disabledFilledSurfaceStyle = "disabled:border-border disabled:bg-muted";
+export declare const disabledFilledSurfaceStyle = "disabled:border-border disabled:bg-fill-subtle";
 export declare const disabledOutlineSurfaceStyle = "disabled:border-border disabled:bg-transparent";
-export declare const inputFocusBorderVisible = "focus-visible:border-foreground/60";
-export declare const inputFocusBorderWithin = "focus-within:border-foreground/60";
-export declare const controlFocusBorderVisible = "outline-hidden focus-visible:outline-hidden focus-visible:border-foreground/60";
-export declare const inputHoverBorderVisible = "[&:hover:not(:focus-visible):not(:disabled)]:border-foreground/45";
-export declare const inputHoverBorderWithin = "[&:hover:not(:focus-within):not(:has(:disabled))]:border-foreground/45";
+export declare const inputFocusBorderVisible = "focus-visible:border-border-focus";
+export declare const inputFocusBorderWithin = "focus-within:border-border-focus";
+export declare const controlFocusBorderVisible = "outline-hidden focus-visible:outline-hidden focus-visible:border-border-focus";
 export declare const inputSurfaceAndFocusStyle: string;
-export declare const inputOutlineAndFocusStyle: string;
+export declare const inputSurfaceAndFocusWithinStyle: string;
 export declare const fieldTriggerSurfaceStyle: string;
 export type DeprecatedFilledVariant = 'filled';
 export declare function resolveFieldVariant<TVariant extends string>(variant: TVariant | DeprecatedFilledVariant | null | undefined): TVariant | 'default' | null | undefined;

package/dist/src/ds/primitives/menu-item.d.ts

@@ -6,11 +6,11 @@ export declare const menuItemInsetClass = "pl-[calc(.9em+1.1em+.75em)]";
 export declare const MENU_SIDE_OFFSET = 4;
 export declare const menuPositionerClass = "z-50 outline-none data-[anchor-hidden]:hidden";
 export declare const menuPopupClass: string;
-export declare const menuLabelClass = "px-[.9em] pt-1.5 pb-1 text-ui-xs font-medium tracking-wider text-muted-foreground uppercase";
+export declare const menuLabelClass = "px-[.9em] pt-1.5 pb-1 text-meta tracking-wider text-muted-foreground uppercase";
 export declare const menuSeparatorClass = "-mx-1 my-1 h-px bg-border";
-export declare const menuShortcutClass = "ml-auto text-ui-xs tracking-wider text-muted-foreground tabular-nums";
+export declare const menuShortcutClass = "ml-auto text-meta tracking-wider text-muted-foreground tabular-nums";
 /** Non-interactive row (empty / loading) on the same size grid as an item. */
-export declare const menuEmptyClass = "flex h-form-md items-center gap-[.75em] px-[.9em] py-0.5 text-ui-smd text-muted-foreground box-content";
+export declare const menuEmptyClass = "flex h-control-md items-center gap-[.75em] px-[.9em] py-0.5 text-body-sm text-muted-foreground box-content";
 export declare const menuSearchClasses: {
     container: string;
     icon: string;

package/dist/src/ds/primitives/raised-surface.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Two recipes, because elevation encodes distance from the canvas and there are
+ * only two distances in this product.
+ *
+ * A *raised* surface sits in the flow — card, list panel, settings container,
+ * table head, app frame. It lifts a couple of pixels, which is also what keeps
+ * it honest: a tile in a grid inside a scroller is clipped by that scroller, so
+ * a shadow that bleeds further than the tile's own clearance gets sliced into a
+ * hard line along the container edge.
+ *
+ * An *overlay* is detached — popover, dropdown, dialog, drawer, tooltip. It is
+ * never clipped, has to separate from arbitrary content beneath it, and so
+ * carries the long falloff.
+ *
+ * Both tokens carry the rim as well as the elevation (the rim is `--border`
+ * itself, plus a top inset highlight in dark), so neither draws a border of its
+ * own: adding `border` on top doubles the edge.
+ *
+ * Radius is deliberately absent — it belongs to the family (`rounded-xl` for a
+ * popup, `rounded-studio-frame` for the app frame).
+ *
+ * A raised surface pins its own fill across states. Interaction is expressed by
+ * the state layer below, never by swapping the background: `Button`'s variants
+ * all drive `background-color` on hover, and a raised surface wearing one would
+ * otherwise turn translucent mid-hover and composite over the canvas. A call
+ * site that genuinely wants another fill still overrides it, since its own
+ * classes come after these.
+ */
+export declare const raisedSurfaceStyle = "bg-card hover:bg-card active:bg-card shadow-raised";
+export declare const overlaySurfaceStyle = "bg-card shadow-overlay";
+/**
+ * The app frame and the panels docked beside it. Same elevation as a card, one
+ * step lower fill: a frame is a hole cut in the rail, and what sits inside it —
+ * cards, fields, tables — needs a step to rise above. `Card` is for that
+ * content, never for the frame around it.
+ */
+export declare const frameSurfaceStyle = "bg-background shadow-raised";
+/**
+ * Interaction states for a surface that already carries an opaque fill. The
+ * `state-layer` utility in `src/index.css` holds the reasoning and the measured
+ * numbers: the rung has to be layered, never swapped into `background-color`.
+ */
+export declare const surfaceStateLayerStyle = "state-layer";
+/**
+ * Same layer, driven by an ancestor marked `group` rather than the surface
+ * itself. A utility cannot read an ancestor's state, so this one stays composed
+ * from variants — `isolate` and the negative z-index do the same job as the
+ * utility's, and `inset-px` likewise keeps the inset rim visible.
+ */
+export declare const surfaceGroupStateLayerStyle = "relative isolate before:pointer-events-none before:absolute before:-z-1 before:inset-px before:rounded-[inherit] before:transition-colors before:duration-fast motion-reduce:before:transition-none group-hover:before:bg-fill-subtle group-focus-visible:before:bg-fill-subtle";

package/dist/src/ds/primitives/selection-control.d.ts

@@ -0,0 +1 @@
+export declare const selectionControlStyle: string;

package/dist/src/ds/primitives/transitions.d.ts

@@ -1,3 +1,4 @@
+export declare const controlStateColorTransition = "transition-[color] duration-fast ease-out-custom motion-reduce:transition-none";
 export declare const transitions: {
     readonly colors: "transition-colors duration-normal ease-out-custom";
     readonly transform: "transition-transform duration-normal ease-out-custom";

package/dist/src/ds/primitives/typography.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A quiet control that resolves to ink when pointed at — the two-tone rule
+ * every row, nav item and icon button follows. Colour is the only thing a
+ * hover animates (see `controlStateColorTransition`).
+ *
+ * Size and weight are not here: they arrive as one `text-<role>` class from
+ * the roles in theme/typography.css, so a component never assembles a text style.
+ */
+export declare const quietTextHover = "text-muted-foreground hover:text-foreground";
+/** Same rule, driven by the hover of an enclosing `group`. */
+export declare const quietTextHoverInGroup = "text-muted-foreground group-hover:text-foreground";

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

@@ -1,9 +1,8 @@
-export declare const Animations: {
-    durationNormal: string;
-    durationSlow: string;
-    easeOut: string;
-};
-/** Entrance played by anything the reader watches arrive. Defined in `theme.css`. */
+/** Named duration rungs, one per `@utility duration-*` in `theme/motion.css`. Tailwind cannot
+ * infer a custom utility, so `lib/tw-merge-config.ts` registers these names to keep
+ * `duration-fast` and `duration-slow` from both surviving a merge. */
+export declare const Durations: readonly ["fast", "normal", "slow"];
+/** Entrance played by anything the reader watches arrive. Defined in `ds/components/Arrival/arrival.css`. */
 export declare const ARRIVING_CLASS = "mastra-arriving";
-/** How long that entrance runs, and so how long a word counts as new. Kept in step with `theme.css`. */
+/** How long that entrance runs, and so how long a word counts as new. Kept in step with `arrival.css`. */
 export declare const ARRIVING_MS = 800;

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

@@ -1,10 +1,4 @@
 export declare const Colors: {
-    surface1: string;
-    surface2: string;
-    surface3: string;
-    surface4: string;
-    surface5: string;
-    surface6: string;
     accent1: string;
     accent2: string;
     accent3: string;
@@ -20,30 +14,81 @@ export declare const Colors: {
     accent3Darker: string;
     accent5Darker: string;
     accent6Darker: string;
-    neutral1: string;
-    neutral2: string;
-    neutral3: string;
-    neutral4: string;
-    neutral5: string;
-    neutral6: string;
     background: string;
     sidebar: string;
     card: string;
     popover: string;
+    'surface-panel': string;
+    'surface-overlay-soft': string;
+    'surface-overlay-strong': string;
+    'fill-subtle': string;
+    fill: string;
+    'fill-hover': string;
+    'fill-active': string;
+    'fill-strong': string;
+    'fill-inverse': string;
+    'fill-inverse-hover': string;
+    'fill-inverse-active': string;
+    'fill-inverse-disabled': string;
+    'fill-destructive': string;
+    'fill-destructive-hover': string;
+    'fill-destructive-active': string;
+    'fill-destructive-disabled': string;
     muted: string;
     foreground: string;
     'muted-foreground': string;
+    placeholder: string;
     ring: string;
-    'sidebar-accent': string;
-    selected: string;
     destructive: string;
     'destructive-foreground': string;
     error: string;
-    overlay: string;
+    scrim: string;
+    warning1: string;
+    positive1: string;
+    negative1: string;
+    'notice-success': string;
+    'notice-success-fg': string;
+    'notice-destructive': string;
+    'notice-destructive-fg': string;
+    'notice-warning': string;
+    'notice-warning-fg': string;
+    'notice-info': string;
+    'notice-info-fg': string;
+    'notice-note': string;
+    'notice-note-fg': string;
+    'badge-neutral-fg': string;
+    'badge-green': string;
+    'badge-green-fg': string;
+    'badge-red': string;
+    'badge-red-fg': string;
+    'badge-blue': string;
+    'badge-blue-fg': string;
+    'badge-yellow': string;
+    'badge-yellow-fg': string;
+    'badge-purple': string;
+    'badge-purple-fg': string;
+    'badge-orange': string;
+    'badge-orange-fg': string;
+    'badge-cyan': string;
+    'badge-cyan-fg': string;
+    'badge-pink': string;
+    'badge-pink-fg': string;
+    'green-50': string;
+    'green-100': string;
+    'green-200': string;
+    'green-300': string;
+    'green-400': string;
+    'green-500': string;
+    'green-600': string;
+    'green-700': string;
+    'green-800': string;
+    'green-900': string;
+    'green-950': string;
 };
 export declare const BorderColors: {
-    border1: string;
-    border2: string;
     border: string;
-    'sidebar-divider': string;
+    'border-strong': string;
+    'border-hover': string;
+    'border-focus': string;
 };
+export declare const CHART_LABEL_COLOR = "var(--muted-foreground)";

package/dist/src/ds/tokens/elevation-foundations.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const ElevationFoundations: Story;

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

@@ -1,27 +1,5 @@
-export declare const FontSizes: {
-    'ui-xs': string;
-    'ui-sm': string;
-    'ui-smd': string;
-    'ui-md': string;
-    'ui-lg': string;
-    'header-xs': string;
-    'header-sm': string;
-    'header-md': string;
-    'header-lg': string;
-    'header-xl': string;
-};
-export declare const LineHeights: {
-    'ui-xs': string;
-    'ui-sm': string;
-    'ui-smd': string;
-    'ui-md': string;
-    'ui-lg': string;
-    'header-xs': string;
-    'header-sm': string;
-    'header-md': string;
-    'header-lg': string;
-    'header-xl': string;
-};
-/** SVG/canvas text can't read CSS tokens; these mirror `ui-xs` (10px) and `ui-sm` (12px). */
+export declare const TextRoles: readonly ["display", "title", "heading", "subheading", "body", "label", "body-sm", "column", "caption", "meta"];
+export type TextRole = (typeof TextRoles)[number];
+/** SVG/canvas text can't read CSS tokens; these mirror `meta` (10px) and `caption` (12px). */
 export declare const CHART_TICK_FONT_SIZE = 10;
 export declare const CHART_LABEL_FONT_SIZE = 12;

package/dist/src/ds/tokens/foundations-layout.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+interface FoundationPageProps {
+    eyebrow: string;
+    title: string;
+    description: string;
+    aside?: ReactNode;
+    note?: string;
+    noteAside?: string;
+    children: ReactNode;
+}
+export declare const FoundationPage: ({ eyebrow, title, description, aside, note, noteAside, children, }: FoundationPageProps) => import("react").JSX.Element;
+interface FoundationSectionProps {
+    label: string;
+    description: string;
+    /** `sidebar` bleeds the section to the page edges and repaints it, so a rung can be read on a second surface. */
+    surface?: 'canvas' | 'sidebar';
+    children: ReactNode;
+}
+export declare const FoundationSection: ({ label, description, surface, children }: FoundationSectionProps) => import("react").JSX.Element;
+export declare const SpecimenGroup: ({ label, children }: {
+    label: string;
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const Specimen: ({ name, note, children }: {
+    name: string;
+    note?: string;
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export {};

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

@@ -4,4 +4,3 @@ export * from './colors';
 export * from './fonts';
 export * from './shadows';
 export * from './sizes';
-export * from './spacings';

package/dist/src/ds/tokens/motion-foundations.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const MotionFoundations: Story;

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

@@ -1,15 +1,5 @@
 export declare const Shadows: {
-    sm: string;
-    md: string;
-    lg: string;
-    inner: string;
-    card: string;
-    elevated: string;
-    dialog: string;
-    panel: string;
-};
-export declare const Glows: {
-    accent1: string;
-    accent2: string;
-    focusRing: string;
+    raised: string;
+    overlay: string;
+    'focus-ring': string;
 };

package/dist/src/ds/tokens/shape-foundations.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const ShapeFoundations: Story;

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

@@ -1,18 +1,17 @@
 export declare const Sizes: {
-    'icon-default': string;
-    'icon-lg': string;
+    'icon-xs': string;
     'icon-sm': string;
-    'form-xs': string;
-    'form-sm': string;
-    'form-md': string;
-    'form-lg': string;
+    'icon-md': string;
+    'icon-lg': string;
+    'control-sm': string;
+    'control-md': string;
+    'control-lg': string;
     'header-default': string;
     'table-header': string;
     'table-row': string;
     'table-row-small': string;
-    'badge-default': string;
     'avatar-sm': string;
     'avatar-md': string;
     'avatar-lg': string;
-    'dropdown-max-height': string;
+    dropdown: string;
 };

package/dist/src/ds/tokens/status-foundations.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const StatusFoundations: Story;

package/dist/src/ds/tokens/surface-foundations.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const SurfaceFoundations: Story;

package/dist/src/ds/tokens/utilities-foundations.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const UtilitiesFoundations: Story;

package/dist/src/lib/sort/sort-by.d.ts

@@ -0,0 +1,16 @@
+export type SortDirection = 'asc' | 'desc';
+export type ListSort<K extends string = string> = {
+    key: K;
+    direction: SortDirection;
+} | undefined;
+export type SortValue = string | number | Date | null | undefined;
+export type SortAccessors<T, K extends string = string> = Partial<Record<K, (item: T) => SortValue>>;
+/**
+ * Sorts `items` by the accessor registered under `sort.key`. Returns the input
+ * instance when there is nothing to sort by. Empty values (`undefined`/`null`)
+ * are always placed last; ties are broken by `id` so the order is stable.
+ */
+export declare function sortBy<T extends {
+    id: string;
+}, K extends string>(items: T[], sort: ListSort<K>, accessors: SortAccessors<T, K>): T[];
+export declare function toggleSort<K extends string>(current: ListSort<K>, key: K): ListSort<K>;

package/dist/src/lib/sort/use-url-sort.d.ts

@@ -0,0 +1,24 @@
+import { ListSort, SortDirection } from './sort-by';
+export declare const SORT_KEY_PARAM = "sort";
+export declare const SORT_DIR_PARAM = "dir";
+/** Minimal interface compatible with react-router's `setSearchParams`. */
+export type SetURLSearchParamsLike = (next: URLSearchParams | ((prev: URLSearchParams) => URLSearchParams), options?: {
+    replace?: boolean;
+    preventScrollReset?: boolean;
+    state?: unknown;
+}) => void;
+export interface UseUrlSortOptions<K extends string> {
+    searchParams: URLSearchParams;
+    setSearchParams: SetURLSearchParamsLike;
+    allowedKeys: readonly K[];
+    defaultSort?: ListSort<K>;
+}
+export declare function readUrlSort<K extends string>(searchParams: URLSearchParams, allowedKeys: readonly K[], defaultSort?: ListSort<K>): ListSort<K>;
+/**
+ * Reads/writes `?sort=<key>&dir=asc|desc`. Unknown keys are ignored. Changing
+ * the sort also drops `page` so paginated lists restart from the first page.
+ */
+export declare function useUrlSort<K extends string>({ searchParams, setSearchParams, allowedKeys, defaultSort, }: UseUrlSortOptions<K>): {
+    sort: ListSort<K>;
+    onSortChange: (direction: SortDirection, key: string) => void;
+};

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

@@ -0,0 +1 @@
+export declare function formatDuration(durationMs: number): string | undefined;