@mastra/playground-ui 40.0.2-alpha.2 → 40.1.0-alpha.4

package/dist/src/ds/components/Command/command.d.ts

@@ -7,10 +7,11 @@ type CommandDialogProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'c
     description?: string;
     contentClassName?: string;
     commandClassName?: string;
+    commandLabel?: string;
     showOverlay?: boolean;
     overlayClassName?: string;
 };
-declare const CommandDialog: ({ children, title, description, contentClassName, commandClassName, showOverlay, overlayClassName, ...props }: CommandDialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const CommandDialog: ({ children, title, description, contentClassName, commandClassName, commandLabel, showOverlay, overlayClassName, ...props }: CommandDialogProps) => import("react/jsx-runtime").JSX.Element;
 declare const CommandInput: React.ForwardRefExoticComponent<any>;
 declare const CommandList: React.ForwardRefExoticComponent<any>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<any>;

package/dist/src/ds/components/ai/plan/index.d.ts

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

package/dist/src/ds/components/ai/plan/plan.d.ts

@@ -0,0 +1,48 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Badge } from '../../Badge';
+import { Button } from '../../Button';
+import { Txt } from '../../Txt';
+export interface PlanProps extends ComponentProps<'div'> {
+    collapsedHeight?: number;
+}
+export declare function Plan({ children, collapsedHeight, className, ...props }: PlanProps): import("react/jsx-runtime").JSX.Element;
+export type PlanHeaderProps = ComponentProps<'div'>;
+export declare function PlanHeader({ children, className, ...props }: PlanHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type PlanLabelProps = ComponentProps<'div'>;
+export declare function PlanLabel({ children, className, ...props }: PlanLabelProps): import("react/jsx-runtime").JSX.Element;
+export type PlanHeaderActionsProps = ComponentProps<'div'>;
+export declare function PlanHeaderActions({ children, className, ...props }: PlanHeaderActionsProps): import("react/jsx-runtime").JSX.Element;
+export type PlanStatusProps = Omit<ComponentProps<typeof Badge>, 'icon' | 'size'>;
+export declare function PlanStatus({ children, variant, ...props }: PlanStatusProps): import("react/jsx-runtime").JSX.Element;
+export interface PlanCopyButtonProps extends Omit<ComponentProps<typeof Button>, 'aria-label' | 'children' | 'onClick' | 'size' | 'tooltip' | 'type' | 'variant'> {
+    content: string;
+}
+export declare function PlanCopyButton({ content, ...props }: PlanCopyButtonProps): import("react/jsx-runtime").JSX.Element;
+export type PlanBodyProps = ComponentProps<'div'>;
+export declare function PlanBody({ children, className, ...props }: PlanBodyProps): import("react/jsx-runtime").JSX.Element;
+export type PlanIntroProps = ComponentProps<'div'>;
+export declare function PlanIntro({ children, className, ...props }: PlanIntroProps): import("react/jsx-runtime").JSX.Element;
+export interface PlanTitleProps extends Omit<ComponentProps<typeof Txt>, 'as' | 'children' | 'variant'> {
+    children: ReactNode;
+}
+export declare function PlanTitle({ children, className, ...props }: PlanTitleProps): import("react/jsx-runtime").JSX.Element;
+export interface PlanPathProps extends Omit<ComponentProps<typeof Txt>, 'as' | 'children' | 'font' | 'title' | 'variant'> {
+    children: string;
+}
+export declare function PlanPath({ children, className, ...props }: PlanPathProps): import("react/jsx-runtime").JSX.Element;
+export type PlanMainProps = ComponentProps<'div'>;
+export declare function PlanMain({ children, className, ...props }: PlanMainProps): import("react/jsx-runtime").JSX.Element;
+export interface PlanContentProps extends Omit<ComponentProps<'div'>, 'children'> {
+    children: string;
+}
+export declare function PlanContent({ children, className, style, ...props }: PlanContentProps): import("react/jsx-runtime").JSX.Element;
+export interface PlanFileProps extends Omit<ComponentProps<'div'>, 'children'> {
+    children: string;
+}
+export declare function PlanFile({ children, className, ...props }: PlanFileProps): import("react/jsx-runtime").JSX.Element;
+export type PlanControlsProps = ComponentProps<'div'>;
+export declare function PlanControls({ children, className, ...props }: PlanControlsProps): import("react/jsx-runtime").JSX.Element;
+export type PlanActionGroupProps = ComponentProps<'div'>;
+export declare function PlanActionGroup({ children, className, ...props }: PlanActionGroupProps): import("react/jsx-runtime").JSX.Element;
+export type PlanExpandButtonProps = Omit<ComponentProps<typeof Button>, 'aria-label' | 'children' | 'onClick' | 'size' | 'type' | 'variant'>;
+export declare function PlanExpandButton(props: PlanExpandButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/ai/plan/plan.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Plan } from './plan';
+declare const meta: Meta<typeof Plan>;
+export default meta;
+type Story = StoryObj<typeof Plan>;
+export declare const Default: Story;
+export declare const Collapsed: Story;
+export declare const FileUnavailable: Story;
+export declare const WithStatusAndActions: Story;

package/dist/style.css

@@ -150,6 +150,7 @@
     --color-white: #fff;
     --breakpoint-lg: 64rem;
     --container-xs: 20rem;
+    --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
     --container-2xl: 42rem;
@@ -1135,6 +1136,10 @@
     margin-bottom: var(--spacing-4);
   }
 
+  .mb-5 {
+    margin-bottom: var(--spacing-5);
+  }
+
   .mb-6 {
     margin-bottom: var(--spacing-6);
   }
@@ -1246,6 +1251,11 @@
     display: table-row;
   }
 
+  .size-1 {
+    width: var(--spacing-1);
+    height: var(--spacing-1);
+  }
+
   .size-1\.5 {
     width: var(--spacing-1_5);
     height: var(--spacing-1_5);
@@ -1671,6 +1681,10 @@
     min-height: var(--spacing-9);
   }
 
+  .min-h-10 {
+    min-height: var(--spacing-10);
+  }
+
   .min-h-14 {
     min-height: var(--spacing-14);
   }
@@ -2208,6 +2222,10 @@
     max-width: var(--breakpoint-lg);
   }
 
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
+
   .max-w-xs {
     max-width: var(--container-xs);
   }
@@ -2520,6 +2538,10 @@
     grid-template-columns: 1fr auto;
   }
 
+  .grid-cols-\[1fr_auto_1fr\] {
+    grid-template-columns: 1fr auto 1fr;
+  }
+
   .grid-cols-\[5rem_repeat\(4\,minmax\(0\,1fr\)\)\] {
     grid-template-columns: 5rem repeat(4, minmax(0, 1fr));
   }
@@ -4184,6 +4206,10 @@
     padding-inline: var(--spacing-8);
   }
 
+  .px-10 {
+    padding-inline: var(--spacing-10);
+  }
+
   .px-12 {
     padding-inline: var(--spacing-12);
   }
@@ -4392,6 +4418,10 @@
     padding-bottom: var(--spacing-4);
   }
 
+  .pb-5 {
+    padding-bottom: var(--spacing-5);
+  }
+
   .pb-6 {
     padding-bottom: var(--spacing-6);
   }
@@ -6097,6 +6127,10 @@
     margin-top: var(--spacing-3);
   }
 
+  .empty\:hidden:empty {
+    display: none;
+  }
+
   .empty\:before\:text-neutral2:empty:before {
     content: var(--tw-content);
     color: var(--color-neutral2);
@@ -8267,6 +8301,37 @@
     width: var(--spacing-5);
   }
 
+  .\[\&_code\]\:bg-surface4 code {
+    background-color: var(--color-surface4);
+  }
+
+  .\[\&_h1\]\:text-header-md h1 {
+    font-size: var(--text-header-md);
+  }
+
+  .\[\&_h1\]\:leading-header-md h1 {
+    --tw-leading: var(--leading-header-md);
+    line-height: var(--leading-header-md);
+  }
+
+  .\[\&_h2\]\:text-header-sm h2 {
+    font-size: var(--text-header-sm);
+  }
+
+  .\[\&_h2\]\:leading-header-sm h2 {
+    --tw-leading: var(--leading-header-sm);
+    line-height: var(--leading-header-sm);
+  }
+
+  .\[\&_h3\]\:text-ui-lg h3 {
+    font-size: var(--text-ui-lg);
+  }
+
+  .\[\&_h3\]\:leading-ui-lg h3 {
+    --tw-leading: var(--leading-ui-lg);
+    line-height: var(--leading-ui-lg);
+  }
+
   .\[\&_img\]\:h-\[1\.2em\] img {
     height: 1.2em;
   }
@@ -8283,6 +8348,15 @@
     opacity: .5;
   }
 
+  .\[\&_p\]\:text-ui-md p {
+    font-size: var(--text-ui-md);
+  }
+
+  .\[\&_p\]\:leading-6 p {
+    --tw-leading: var(--spacing-6);
+    line-height: var(--spacing-6);
+  }
+
   .\[\&_svg\]\:pointer-events-none svg {
     pointer-events: none;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "40.0.2-alpha.2",
+  "version": "40.1.0-alpha.4",
   "description": "Mastra Playground components",
   "sideEffects": [
     "**/*.css"
@@ -150,8 +150,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.31.2-alpha.2",
-    "@mastra/react": "1.2.5-alpha.2"
+    "@mastra/client-js": "^1.31.2-alpha.4",
+    "@mastra/react": "1.2.5-alpha.4"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.4.1",
@@ -189,10 +189,10 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.9",
     "@internal/lint": "0.0.113",
-    "@mastra/client-js": "^1.31.2-alpha.2",
-    "@mastra/core": "1.51.0-alpha.2",
-    "@mastra/memory": "1.23.0-alpha.2",
-    "@mastra/react": "1.2.5-alpha.2"
+    "@mastra/client-js": "^1.31.2-alpha.4",
+    "@mastra/core": "1.51.0-alpha.4",
+    "@mastra/memory": "1.23.0-alpha.3",
+    "@mastra/react": "1.2.5-alpha.4"
   },
   "homepage": "https://mastra.ai",
   "repository": {