@mastra/playground-ui 57.0.0 → 57.1.0-alpha.0

package/dist/src/ds/components/PageLayout/page-layout.d.ts

@@ -7,7 +7,12 @@ export interface PageLayoutProps {
     headerActions?: ReactNode;
     /** Controls pinned between the header and the scrollable body (search, filters, toggles…). */
     actionRow?: ReactNode;
-    /** `container` pads the body (default); `fit` lets the body fill the page edge to edge. */
-    variant?: 'container' | 'fit';
+    /** Page-level header (e.g. `PageHeader`) rendered inside the body container, above children. */
+    header?: ReactNode;
+    /**
+     * `container` pads the body (default); `narrow` centers the body in a max-width column;
+     * `fit` lets the body fill the page edge to edge.
+     */
+    variant?: 'container' | 'fit' | 'narrow';
 }
-export declare function PageLayout({ children, breadcrumbs, headerActions, actionRow, variant, }: PageLayoutProps): import("react").JSX.Element;
+export declare function PageLayout({ children, breadcrumbs, headerActions, actionRow, header, variant, }: PageLayoutProps): import("react").JSX.Element;

package/dist/src/ds/components/PageLayout/page-layout.stories.d.ts

@@ -3,5 +3,8 @@ import { PageLayout } from './index';
 declare const meta: Meta<typeof PageLayout>;
 export default meta;
 type Story = StoryObj<typeof PageLayout>;
+export declare const Container: Story;
+export declare const Narrow: Story;
+export declare const Fit: Story;
 export declare const FullPage: Story;
 export declare const Empty: Story;

package/dist/src/ds/components/Select/select.d.ts

@@ -29,12 +29,11 @@ declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectValueProps
 /**
  * A select is a form field, so it reuses the Button's size/shape recipe with
  * these looks: `default` (the Input's overlay surface — the default here too,
- * so a select sits next to an Input as the same kind of thing), `outline`
- * (bordered, transparent) and `ghost` (borderless, for dense toolbars/inline
- * pickers). The high-emphasis `primary` look is the only one intentionally NOT
+ * so a select sits next to an Input as the same kind of thing) and `ghost`
+ * (borderless, for dense toolbars/inline pickers). The high-emphasis `primary` look is the only one intentionally NOT
  * offered (a field is not a call-to-action).
  */
-export type SelectTriggerVariant = 'default' | 'outline' | 'ghost';
+export type SelectTriggerVariant = 'default' | 'ghost';
 type SelectTriggerLegacyVariant = 'primary';
 export type SelectTriggerProps = Omit<SelectPrimitive.Trigger.Props, 'className'> & {
     className?: string;

package/dist/src/ds/components/Select/select.stories.d.ts

@@ -8,8 +8,8 @@ export declare const Experimental: Story;
 export declare const Sizes: Story;
 /**
  * A select is a field, so it shares the Input's surface rather than the Button's:
- * `default` (the Input's overlay surface, the default here too), `outline`
- * (bordered, transparent) and `ghost` (borderless, for dense toolbars). It does
+ * `default` (the Input's overlay surface, the default here too) and `ghost`
+ * (borderless, for dense toolbars). It does
  * not expose the high-emphasis `primary` look.
  */
 export declare const Variants: Story;

package/dist/src/ds/new/layout/app-shell/index.d.ts

@@ -1 +1,2 @@
 export * from './app-shell';
+export * from './main-card';

package/dist/src/ds/new/layout/app-shell/main-card.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare function MainCard({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -1,4 +1,4 @@
 export { SettingsContainer } from './settings-container';
 export { SettingsDescription, SettingsGroup, SettingsHeader, SettingsTitle } from './settings-header';
 export { SettingsRow, type SettingsRowProps } from './settings-row';
-export { SettingsLayout, type SettingsLayoutProps } from '../../components/SettingsLayout';
+export { SettingsLayout, type SettingsLayoutProps } from './settings-layout';

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

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

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

@@ -3,6 +3,6 @@ export type ControlSize = 'sm' | 'md' | 'lg';
 export declare const ControlSizeContext: React.Context<ControlSize | undefined>;
 export declare const controlHeight: Record<ControlSize, string>;
 export declare const controlSizeClasses: Record<ControlSize, string>;
-export type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';
+export type ControlTriggerVisualVariant = 'default' | 'ghost';
 export declare const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string>;
 export declare function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined;

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

@@ -1,5 +1,4 @@
 export declare const sharedFormElementDisabledStyle = "disabled:cursor-not-allowed disabled:text-muted-foreground";
-export declare const disabledOutlineSurfaceStyle = "disabled:border-border disabled:bg-transparent";
 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";

package/dist/src/hooks/stories/browser/use-autoscroll.stories.d.ts

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

package/dist/src/hooks/stories/browser/use-copy-to-clipboard.stories.d.ts

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

package/dist/src/hooks/stories/browser/use-fluid-hover.stories.d.ts

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

package/dist/src/hooks/stories/browser/use-in-view.stories.d.ts

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

package/dist/src/hooks/stories/browser/use-is-apple-platform.stories.d.ts

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

package/dist/src/hooks/stories/browser/use-is-mobile.stories.d.ts

@@ -0,0 +1,32 @@
+import { StoryObj } from '@storybook/react-vite';
+declare function IsMobileDemo({ breakpoint }: {
+    breakpoint: number;
+}): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof IsMobileDemo;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        breakpoint: number;
+    };
+    argTypes: {
+        breakpoint: {
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/hooks/stories/browser/use-isomorphic-layout-effect.stories.d.ts

@@ -0,0 +1,32 @@
+import { StoryObj } from '@storybook/react-vite';
+declare function IsomorphicLayoutEffectDemo({ progress }: {
+    progress: number;
+}): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof IsomorphicLayoutEffectDemo;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        progress: number;
+    };
+    argTypes: {
+        progress: {
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/hooks/stories/browser/use-keyboard-shortcut-label.stories.d.ts

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

package/dist/src/hooks/stories/browser/use-register-fluid-hover-item.stories.d.ts

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

package/dist/src/hooks/stories/environment/use-custom-environment-variables-editor.stories.d.ts

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

package/dist/src/hooks/stories/environment/use-environment-variables-editor.stories.d.ts

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

package/dist/src/hooks/stories/state/use-debounced-value.stories.d.ts

@@ -0,0 +1,32 @@
+import { StoryObj } from '@storybook/react-vite';
+declare function DebouncedValueDemo({ delay }: {
+    delay: number;
+}): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof DebouncedValueDemo;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        delay: number;
+    };
+    argTypes: {
+        delay: {
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/hooks/stories/state/use-expiring-local-storage-state.stories.d.ts

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

package/dist/src/hooks/stories/state/use-local-storage-state.stories.d.ts

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

package/dist/src/hooks/stories/text/use-is-clamped.stories.d.ts

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

package/dist/src/hooks/stories/text/use-measured-auto-height.stories.d.ts

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

package/dist/src/hooks/stories/text/use-scroll-to-first-highlight.stories.d.ts

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

package/dist/src/hooks/stories/text/use-text-highlight.stories.d.ts

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

package/dist/src/lib/keyboard/use-keyboard-scope-depth.stories.d.ts

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

package/dist/src/lib/keyboard/use-keyboard-shortcuts-context.stories.d.ts

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

package/dist/src/lib/keyboard/use-table-keydown.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;