@mastra/playground-ui 60.2.1-alpha.0 → 61.0.0-alpha.2

package/dist/src/domains/workspace/components/workspace-markdown-preview.d.ts

@@ -0,0 +1,4 @@
+/** Renders a markdown file, showing any leading YAML frontmatter as a code block above the body. */
+export declare function WorkspaceMarkdownPreview({ content }: {
+    content: string;
+}): import("react").JSX.Element;

package/dist/src/domains/workspace/components/workspace-parts.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { WorkspacePreviewFactory } from './workspace-active-file';
+import { WorkspaceProviderProps } from './workspace-context';
+export type WorkspaceRootProps = WorkspaceProviderProps;
+export declare function WorkspaceRoot({ children, ...props }: WorkspaceRootProps): import("react").JSX.Element;
+export declare function WorkspaceAside({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface WorkspaceAsideHeaderProps {
+    children: ReactNode;
+    /** Slot for icon buttons (e.g. create directory), rendered after the children. */
+    actions?: ReactNode;
+}
+export declare function WorkspaceAsideHeader({ children, actions }: WorkspaceAsideHeaderProps): import("react").JSX.Element;
+/** Shows the file tree, or search results while the search is open. */
+export declare function WorkspaceTree(): import("react").JSX.Element;
+export declare function WorkspaceActiveFile({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function WorkspaceActiveFileHeader({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function WorkspaceActiveFileContent({ renderPreview }: {
+    renderPreview?: WorkspacePreviewFactory;
+}): import("react").JSX.Element;

package/dist/src/domains/workspace/components/workspace-search.d.ts

@@ -0,0 +1,5 @@
+/** Icon button that swaps the tree for the search panel, like VS Code's search view. */
+export declare function WorkspaceSearchToggle(): import("react").JSX.Element | null;
+/** The search input while searching, the aside title otherwise. */
+export declare function WorkspaceSearch(): import("react").JSX.Element;
+export declare function WorkspaceSearchResults(): import("react").JSX.Element;

package/dist/src/domains/workspace/components/workspace-tree-view.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { WorkspaceCreateDirectoryHandler, WorkspaceDeleteHandler } from './use-workspace-context';
+import { WorkspacePreviewFactory } from './workspace-active-file';
+import { WorkspaceAddSkillOptions } from './workspace-add-skill';
+export interface WorkspaceTreeViewProps {
+    workspaceId: string;
+    /** Workspace-relative path of the open file (e.g. `src/index.ts`), or `undefined`. Controlled by the parent. */
+    activeFilePath?: string;
+    /** Called when the user opens a file, or with `undefined` when a delete closes it. */
+    onActiveFileChange: (path: string | undefined) => void;
+    /** Enables the delete action on tree rows. Omit to hide it. For directories, delete recursively. */
+    onDelete?: WorkspaceDeleteHandler;
+    /** Enables the "New folder" action. Receives a workspace-relative path. Omit to hide it. */
+    onCreateDirectory?: WorkspaceCreateDirectoryHandler;
+    /** Folders (and their contents) where delete and new folder are unavailable. Use `.` for the whole workspace. */
+    readOnlyPaths?: string[];
+    /** Include file search. Defaults to true. */
+    searchFiles?: boolean;
+    /** Include skill search. Defaults to true. The search action hides when both are false. */
+    searchSkills?: boolean;
+    /** Total files, shown as `N Files` in the aside title. Omit to show a plain `Files`. */
+    fileCount?: number;
+    /** Total skills, shown as `N Skills` next to the files. Omit to hide. */
+    skillCount?: number;
+    /** Extra icon buttons rendered in the aside header, after search and new folder. */
+    asideActions?: ReactNode;
+    /** Enables the "Add skill" action (aside header and empty state) with its skills.sh dialog. Omit to hide it. */
+    addSkill?: WorkspaceAddSkillOptions;
+    /** Custom preview for a file; return `undefined` to keep the built-in rendering. */
+    renderPreview?: WorkspacePreviewFactory;
+}
+export declare function WorkspaceTreeView({ asideActions, renderPreview, ...rootProps }: WorkspaceTreeViewProps): import("react").JSX.Element;

package/dist/src/domains/workspace/components/workspace-tree.d.ts

@@ -0,0 +1 @@
+export declare function WorkspaceTree(): import("react").JSX.Element;

package/dist/src/domains/workspace/components/workspace.d.ts

@@ -0,0 +1,18 @@
+import { WorkspaceFilePath } from './workspace-active-file';
+import { WorkspaceCreateDirectory } from './workspace-create-directory';
+import { WorkspaceActiveFile, WorkspaceActiveFileContent, WorkspaceActiveFileHeader, WorkspaceAside, WorkspaceAsideHeader, WorkspaceRoot, WorkspaceTree } from './workspace-parts';
+import { WorkspaceSearch, WorkspaceSearchToggle } from './workspace-search';
+export type { WorkspaceRootProps } from './workspace-parts';
+export declare const Workspace: {
+    Root: typeof WorkspaceRoot;
+    Aside: typeof WorkspaceAside;
+    AsideHeader: typeof WorkspaceAsideHeader;
+    Search: typeof WorkspaceSearch;
+    SearchToggle: typeof WorkspaceSearchToggle;
+    CreateDirectory: typeof WorkspaceCreateDirectory;
+    Tree: typeof WorkspaceTree;
+    ActiveFile: typeof WorkspaceActiveFile;
+    ActiveFileHeader: typeof WorkspaceActiveFileHeader;
+    FilePath: typeof WorkspaceFilePath;
+    ActiveFileContent: typeof WorkspaceActiveFileContent;
+};

package/dist/src/domains/workspace/file-type.d.ts

@@ -0,0 +1,6 @@
+export declare const isImageFile: (path: string, mimeType?: string) => boolean;
+export declare const isVideoFile: (path: string, mimeType?: string) => boolean;
+/** Media must be read as base64: reading it as utf-8 corrupts the bytes. */
+export declare const isMediaFile: (path: string) => boolean;
+export declare const videoMimeType: (path: string, mimeType?: string) => string;
+export declare const isMarkdownFile: (path: string) => boolean;

package/dist/src/domains/workspace/hooks/use-skills-sh.d.ts

@@ -0,0 +1,51 @@
+import { SkillsShSkill } from '@mastra/client-js';
+export type { SkillsShSkill };
+/**
+ * Search skills on skills.sh (via server proxy)
+ */
+export declare const useSearchSkillsSh: (workspaceId: string | undefined) => import('@tanstack/react-query').UseMutationResult<{
+    query: string;
+    searchType: string;
+    skills: {
+        id: string;
+        name: string;
+        installs: number;
+        topSource: string;
+    }[];
+    count: number;
+}, Error, string, unknown>;
+/**
+ * Get popular skills from skills.sh (via server proxy, cached for 5 minutes)
+ */
+export declare const usePopularSkillsSh: (workspaceId: string | undefined) => import('@tanstack/react-query').UseQueryResult<{
+    skills: {
+        id: string;
+        name: string;
+        installs: number;
+        topSource: string;
+    }[];
+    count: number;
+    limit: number;
+    offset: number;
+}, Error>;
+/**
+ * Preview a skill by fetching its SKILL.md (via server proxy to avoid CORS)
+ */
+export declare const useSkillPreview: (workspaceId: string | undefined, owner: string | undefined, repo: string | undefined, skillPath: string | undefined, options?: {
+    enabled?: boolean;
+}) => import('@tanstack/react-query').UseQueryResult<string, Error>;
+/**
+ * Parse a skill's topSource field to extract GitHub repository info
+ *
+ * skills.sh topSource formats:
+ * - "owner/repo" (e.g., "vercel-labs/agent-skills")
+ * - "owner/repo/path" (e.g., "anthropics/skills/frontend-design")
+ * - "github.com/owner/repo/path" (full URL format)
+ *
+ * The skill name is used as the path within the repo when not specified
+ */
+export declare function parseSkillSource(topSource: string, skillName?: string): {
+    owner: string;
+    repo: string;
+    skillPath: string;
+} | null;

package/dist/src/domains/workspace/hooks/use-workspace-directory.d.ts

@@ -0,0 +1,17 @@
+export declare const WORKSPACE_REFETCH_INTERVAL = 10000;
+/** Lists a single directory level and polls it. Callers enable it only once the folder is expanded. */
+export declare function useWorkspaceDirectory(workspaceId: string, path: string, { enabled }?: {
+    enabled?: boolean | undefined;
+}): import('@tanstack/react-query').UseQueryResult<{
+    name: string;
+    type: "file" | "directory";
+    size?: number | undefined | undefined;
+    mount?: {
+        provider: string;
+        icon?: string | undefined | undefined;
+        displayName?: string | undefined | undefined;
+        description?: string | undefined | undefined;
+        status?: ("pending" | "initializing" | "ready" | "starting" | "running" | "stopping" | "stopped" | "destroying" | "destroyed" | "error") | undefined | undefined;
+        error?: string | undefined | undefined;
+    } | undefined;
+}[], Error>;

package/dist/src/domains/workspace/hooks/use-workspace-file-content.d.ts

@@ -0,0 +1,8 @@
+/** Reads a file (base64 for images/videos) and polls it so the viewer follows external edits. */
+export declare function useWorkspaceFileContent(workspaceId: string, path?: string): import('@tanstack/react-query').UseQueryResult<{
+    path: string;
+    content: string;
+    type: "file" | "directory";
+    size?: number | undefined | undefined;
+    mimeType?: string | undefined | undefined;
+}, Error>;

package/dist/src/domains/workspace/hooks/use-workspace-search.d.ts

@@ -0,0 +1,11 @@
+export interface WorkspaceSearchHit {
+    kind: 'file' | 'skill';
+    path: string;
+    label: string;
+    score: number;
+}
+/** Searches files and skills in parallel; one failing source (e.g. 501 not configured) keeps the other's hits. */
+export declare function useWorkspaceSearch(workspaceId: string, query: string, { files: searchFiles, skills: searchSkills }?: {
+    files?: boolean;
+    skills?: boolean;
+}): import('@tanstack/react-query').UseQueryResult<WorkspaceSearchHit[], Error>;

package/dist/src/domains/workspace/index.d.ts

@@ -0,0 +1,14 @@
+export { WorkspaceTreeView } from './components/workspace-tree-view';
+export type { WorkspaceTreeViewProps } from './components/workspace-tree-view';
+export { Workspace } from './components/workspace';
+export type { WorkspaceRootProps } from './components/workspace';
+export { useWorkspaceContext } from './components/use-workspace-context';
+export { useWorkspaceDirectory } from './hooks/use-workspace-directory';
+export { useWorkspaceFileContent } from './hooks/use-workspace-file-content';
+export { useWorkspaceSearch } from './hooks/use-workspace-search';
+export type { WorkspaceCreateDirectoryHandler, WorkspaceDeleteHandler, WorkspaceEntryRef, } from './components/use-workspace-context';
+export type { WorkspaceFilePreview, WorkspacePreviewFactory } from './components/workspace-active-file';
+export { WorkspaceMarkdownPreview } from './components/workspace-markdown-preview';
+export type { WorkspaceAddSkillOptions, WorkspaceSkillInstallParams } from './components/workspace-add-skill';
+export type { WritableMount } from './components/workspace-add-skill-dialog';
+export { splitFrontmatter } from './components/frontmatter';

package/dist/src/domains/workspace/path.d.ts

@@ -0,0 +1,6 @@
+/** Workspace paths follow the server convention: `.` is the root, everything else is relative. */
+export declare const ROOT_PATH = ".";
+export declare const joinPath: (parent: string, name: string) => string;
+/** Folders containing `path`, outermost first: `a/b/c.md` → `['a', 'a/b']`. */
+export declare const ancestorsOf: (path: string) => string[];
+export declare const parentOf: (path: string) => string;

package/dist/src/ds/components/Button/button.stories.d.ts

@@ -16,3 +16,4 @@ export declare const IconButtonVariants: Story;
 export declare const IconButtonSizes: Story;
 export declare const IconButtonDisabled: Story;
 export declare const VariantSizeMatrix: Story;
+export declare const OnDifferentSurfaces: Story;

package/dist/src/ds/components/ChatShell/chat-shell.d.ts

@@ -11,9 +11,10 @@ export type ChatShellProps = ComponentPropsWithoutRef<'div'> & {
  * width), `--chat-surface` (the colour the composer veil ramps to — the shell
  * paints no fill of its own and inherits whatever surface hosts it, so this has
  * to name that same surface), `--chat-fade` (the band the veil ramps in
- * across, above the composer), `--chat-veil` (strongest it ever gets — the
- * transcript keeps showing through), `--chat-gutter` (room below the composer),
- * `--chat-inset-end` (room an overlay panel claims on the end edge).
+ * across, above the composer), `--chat-veil` (strongest it gets, opaque by
+ * default so nothing reads under the composer), `--chat-gutter` (room below the
+ * composer), `--chat-edge` (room on both sides, so the scrollbar never overlaps
+ * the composer), `--chat-inset-end` (room an overlay panel claims on the end edge).
  */
 export declare function ChatShellRoot({ className, scroller, ...props }: ChatShellProps): import("react").JSX.Element;
 /**
@@ -25,7 +26,12 @@ export declare function ChatShellBar({ className, ...props }: ComponentPropsWith
 export declare function ChatShellStage({ className, ...props }: ComponentPropsWithoutRef<'div'>): import("react").JSX.Element;
 /**
  * The one scroll container. It takes the end inset itself — on an ancestor the
- * same room would drag the scrollbar inward, off the true edge.
+ * same room would drag the scrollbar inward, off the true edge. No overscroll
+ * bounce on either axis: the dock is sticky inside this box, so the rubber band
+ * would carry the composer off its edge along with the transcript.
+ *
+ * The same edge room on both sides keeps the scrollbar clear of the composer and
+ * the column centred, with a matching gutter for classic scrollbars.
  */
 export declare function ChatShellViewport({ className, children, ...props }: MessageScrollerViewportProps): import("react").JSX.Element;
 /** Scrolling content. The air above the composer belongs to the dock's fade band. */
@@ -54,10 +60,9 @@ export declare function ChatShellTurn({ opensTurn, holdsRoom, restored, classNam
  * transcript scrolls behind, so nothing measures it and a composer growing under
  * the cursor resizes no box the scroller watches.
  *
- * Behind it, one sheet of the page masked in over `--chat-fade` of air and never
- * past `--chat-veil`, so the transcript dims as it slides under but stays
- * readable through the card's surroundings. The ramp runs three times the air, so
- * it tops out behind the card and its end never shows.
+ * Behind it, one sheet of the page masked in over `--chat-fade` of air, reaching
+ * `--chat-veil` at the dock's top edge. The transcript fades out above the
+ * composer and nothing shows through around or under the card.
  */
 export declare function ChatShellDock({ className, ...props }: ComponentPropsWithoutRef<'div'>): import("react").JSX.Element;
 /**

package/dist/src/ds/components/Code/code.d.ts

@@ -13,7 +13,7 @@ export interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {
  * required. Renders plain text while highlighting is pending or when the
  * language is missing/unknown.
  *
- * A streaming fence re-renders on every delta while highlighting stays a frame
+ * A streaming fence re-renders on every delta while highlighting stays a sample
  * behind. Dropping the previous tokens each time would strobe the whole block
  * between colored and plain, so the settled prefix keeps its colors and only
  * the newly arrived tail waits, uncolored, for the next pass.

package/dist/src/ds/components/CollapsibleBox/collapsible-box.d.ts

@@ -2,9 +2,12 @@ import { ComponentProps } from 'react';
 import { CollapsibleBoxState } from './use-collapsible-box';
 export interface CollapsibleBoxProps extends ComponentProps<'div'> {
     state: CollapsibleBoxState;
+    /** When set, an expand button with this label sits at the bottom of the fade. */
+    expandLabel?: string;
 }
 /**
  * Clips its content to `state.collapsedHeight` and fades the bottom when it overflows.
- * The overflow is measured on the rendered content, so it tracks resizes and late content.
+ * While clipped, clicking anywhere on the box expands it; the content is not interactive until then. The overflow is measured on the rendered
+ * content, so it tracks resizes and late content.
  */
-export declare function CollapsibleBox({ state, children, className, style, ...props }: CollapsibleBoxProps): import("react").JSX.Element;
+export declare function CollapsibleBox({ state, expandLabel, children, className, style, ...props }: CollapsibleBoxProps): import("react").JSX.Element;

package/dist/src/ds/components/CollapsibleBox/collapsible-box.stories.d.ts

@@ -9,3 +9,4 @@ type Story = StoryObj<typeof Demo>;
 export declare const Overflowing: Story;
 export declare const Fits: Story;
 export declare const CustomHeight: Story;
+export declare const WithExpandButton: Story;

package/dist/src/ds/components/Combobox/combobox-styles.d.ts

@@ -70,5 +70,5 @@ export declare const comboboxStyles: {
     /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */
     readonly optionEnd: "ml-auto flex items-center shrink-0";
     /** @deprecated A `FieldError` colors the error. */
-    readonly error: "text-caption text-destructive-foreground";
+    readonly error: "text-body-sm text-destructive-foreground";
 };

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

@@ -9,3 +9,4 @@ export declare const WithDialog: Story;
 export declare const Empty: Story;
 export declare const WithShortcuts: Story;
 export declare const SearchOnly: Story;
+export declare const InDialogWithDisabledRows: Story;

package/dist/src/ds/components/InputGroup/input-group.d.ts

@@ -3,6 +3,7 @@ import { Button } from '../Button';
 import { ButtonProps } from '../Button/Button';
 import { ControlSize } from '../../primitives/control-size';
 import * as React from 'react';
+export declare const inputGroupClassName: string;
 export type InputGroupProps = React.ComponentProps<'div'> & {
     size?: ControlSize;
 };
@@ -12,6 +13,7 @@ declare const inputGroupAddonVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type InputGroupAddonProps = React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>;
 declare function InputGroupAddon({ className, align, onClick, ...props }: InputGroupAddonProps): React.JSX.Element;
+export declare const inputGroupControlClassName: string;
 export type InputGroupInputProps = Omit<React.ComponentProps<'input'>, 'size'> & {
     testId?: string;
     /** @deprecated Wrap the group in `<Field invalid>`, or set `aria-invalid` on a control outside a `Field`. */

package/dist/src/ds/components/InputGroup/input-group.stories.d.ts

@@ -16,5 +16,4 @@ export declare const Sizes: Story;
 export declare const Disabled: Story;
 export declare const Invalid: Story;
 export declare const Textarea: Story;
-export declare const NumberWithStepper: Story;
 export declare const OnDifferentSurfaces: Story;

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

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

package/dist/src/ds/components/InputNumber/input-number.d.ts

@@ -0,0 +1,26 @@
+import { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';
+import { ControlSize } from '../../primitives/control-size';
+import * as React from 'react';
+type InputNumberProps = Omit<NumberFieldPrimitive.Root.Props, 'className'> & {
+    className?: string;
+};
+declare function InputNumber({ className, ...props }: InputNumberProps): React.JSX.Element;
+type InputNumberGroupProps = Omit<NumberFieldPrimitive.Group.Props, 'className'> & {
+    className?: string;
+    size?: ControlSize;
+};
+declare function InputNumberGroup({ className, size, ...props }: InputNumberGroupProps): React.JSX.Element;
+type InputNumberInputProps = Omit<NumberFieldPrimitive.Input.Props, 'className'> & {
+    className?: string;
+};
+declare function InputNumberInput({ className, ...props }: InputNumberInputProps): React.JSX.Element;
+type InputNumberDecrementProps = Omit<NumberFieldPrimitive.Decrement.Props, 'className'> & {
+    className?: string;
+};
+declare function InputNumberDecrement({ className, children, ...props }: InputNumberDecrementProps): React.JSX.Element;
+type InputNumberIncrementProps = Omit<NumberFieldPrimitive.Increment.Props, 'className'> & {
+    className?: string;
+};
+declare function InputNumberIncrement({ className, children, ...props }: InputNumberIncrementProps): React.JSX.Element;
+export { InputNumber, InputNumberGroup, InputNumberInput, InputNumberDecrement, InputNumberIncrement };
+export type { InputNumberProps, InputNumberGroupProps, InputNumberInputProps, InputNumberDecrementProps, InputNumberIncrementProps, };

package/dist/src/ds/components/InputNumber/input-number.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { InputNumber } from './input-number';
+declare const meta: Meta<typeof InputNumber>;
+export default meta;
+type Story = StoryObj<typeof InputNumber>;
+export declare const Default: Story;
+export declare const WithField: Story;
+export declare const MinMaxStep: Story;
+export declare const Sizes: Story;
+export declare const Disabled: Story;
+export declare const Invalid: Story;

package/dist/src/ds/components/Tabs/tabs-context.d.ts

@@ -10,7 +10,6 @@ export type TabMeasurement = {
 };
 export declare const TabsContext: import('react').Context<{
     appearance: "default" | "contained";
-    frame: "stroke" | "inset";
     value: string;
     select(value: string): void;
 } | null>;

package/dist/src/ds/components/Tabs/tabs-list.d.ts

@@ -9,15 +9,8 @@ export type TabListProps = Omit<TabListVariantsProps, 'variant'> & {
     children: React.ReactNode;
     className?: string;
     sticky?: boolean;
-    /** Control height of each tab; `sm` lines up with `size="sm"` buttons (e.g. inside a `DataPanel.Header`). */
     size?: TabListSize;
-    /** `pill` sits the selected tab on a track; `pill-ghost` drops the track. */
     variant?: TabListVariant | null;
-    /**
-     * Optional inline styles applied to the underlying tab list element.
-     * To override the active tab indicator color, set the `--tab-indicator-color`
-     * CSS variable, e.g. `style={{ '--tab-indicator-color': 'var(--info-indicator)' } as React.CSSProperties}`.
-     */
     style?: React.CSSProperties;
 };
 export declare const TabList: ({ children, className, variant, size, sticky, style }: TabListProps) => import("react").JSX.Element;

package/dist/src/ds/components/Tabs/tabs-root.d.ts

@@ -5,7 +5,7 @@ export type TabsRootProps<T extends string> = Omit<ComponentProps<'div'>, 'child
     value?: T;
     onValueChange?: (value: T) => void;
     appearance?: 'default' | 'contained';
-    frame?: 'stroke' | 'inset';
+    frame?: 'inset';
     className?: string;
 };
 export declare const Tabs: <T extends string>({ children, defaultTab, value, onValueChange, appearance, frame, className, ...props }: TabsRootProps<T>) => import("react").JSX.Element;

package/dist/src/ds/components/Tabs/tabs-tab.d.ts

@@ -6,6 +6,8 @@ export type TabProps = {
     disabled?: boolean;
     attention?: boolean;
     disabledTooltip?: React.ReactNode;
+    /** Tooltip shown on hover and keyboard focus of an enabled tab (e.g. when its label is collapsed to an icon). */
+    tooltip?: React.ReactNode;
     className?: string;
 };
-export declare const Tab: ({ children, value, onClick, onClose, disabled, disabledTooltip, attention, className, }: TabProps) => import("react").JSX.Element;
+export declare const Tab: ({ children, value, onClick, onClose, disabled, disabledTooltip, tooltip, attention, className, }: TabProps) => import("react").JSX.Element;

package/dist/src/ds/components/Tabs/tabs.stories.d.ts

@@ -11,7 +11,6 @@ type ContainedArgs = ComponentProps<typeof Tabs> & {
     attention: boolean;
 };
 type ContainedStory = StoryObj<ContainedArgs>;
-export declare const Contained: ContainedStory;
 export declare const InsetFrame: ContainedStory;
 export declare const LegacyLineFallback: Story;
 export declare const TwoTabs: Story;

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

@@ -0,0 +1,4 @@
+export type { ThinkingLevelOption } from './use-thinking-level-stop';
+export * from './thinking-level-slider';
+export * from './thinking-level-ramp';
+export * from './thinking-level-picker';

package/dist/src/ds/components/ThinkingLevel/thinking-level-picker.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { ThinkingLevelOption } from './use-thinking-level-stop';
+export interface ThinkingLevelBarsProps<T extends string> {
+    options: readonly ThinkingLevelOption<T>[];
+    value: T | undefined;
+}
+export declare function ThinkingLevelBars<T extends string>({ options, value }: ThinkingLevelBarsProps<T>): import("react").JSX.Element;
+export interface ThinkingLevelPickerProps<T extends string> {
+    options: readonly ThinkingLevelOption<T>[];
+    value: T;
+    label: string;
+    /** Disables the trigger and explains why in its tooltip, e.g. when the model cannot think. */
+    unavailableReason?: string;
+    description?: ReactNode;
+    onChange: (value: T) => void | Promise<unknown>;
+}
+export declare function ThinkingLevelPicker<T extends string>({ options, value, label, unavailableReason, description, onChange, }: ThinkingLevelPickerProps<T>): import("react").JSX.Element;

package/dist/src/ds/components/ThinkingLevel/thinking-level-ramp.d.ts

@@ -0,0 +1,9 @@
+import { ThinkingLevelOption } from './use-thinking-level-stop';
+export interface ThinkingLevelRampProps<T extends string> {
+    options: readonly ThinkingLevelOption<T>[];
+    value: T;
+    label: string;
+    /** Returning the write lets the ramp hold the dropped stop until it lands. */
+    onChange: (value: T) => void | Promise<unknown>;
+}
+export declare function ThinkingLevelRamp<T extends string>({ options, value, label, onChange }: ThinkingLevelRampProps<T>): import("react").JSX.Element;

package/dist/src/ds/components/ThinkingLevel/thinking-level-slider.d.ts

@@ -0,0 +1,13 @@
+import { ThinkingLevelOption } from './use-thinking-level-stop';
+export interface ThinkingLevelSliderProps<T extends string> {
+    options: readonly ThinkingLevelOption<T>[];
+    value: T;
+    ariaLabel: string;
+    disabled?: boolean;
+    /** Appended to the announced value, e.g. ` · follows base` when the level is inherited. */
+    valueTextSuffix?: string;
+    /** Returning the write lets the thumb hold the dropped stop until it lands. */
+    onChange: (value: T) => void | Promise<unknown>;
+    className?: string;
+}
+export declare function ThinkingLevelSlider<T extends string>({ options, value, ariaLabel, disabled, valueTextSuffix, onChange, className, }: ThinkingLevelSliderProps<T>): import("react").JSX.Element;

package/dist/src/ds/components/ThinkingLevel/thinking-level.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ThinkingLevelPicker } from './thinking-level-picker';
+declare const meta: Meta<typeof ThinkingLevelPicker>;
+export default meta;
+type Story = StoryObj<typeof ThinkingLevelPicker>;
+export declare const Picker: Story;
+export declare const PickerForModelWithFewerLevels: Story;
+export declare const PickerUnavailable: Story;
+export declare const Ramp: Story;
+export declare const GroupedWithModelPicker: Story;
+export declare const Slider: Story;
+export declare const SliderHoldsUntilWriteLands: Story;
+export declare const SliderInherited: Story;
+export declare const SliderDisabled: Story;

package/dist/src/ds/components/ThinkingLevel/use-thinking-level-stop.d.ts

@@ -0,0 +1,29 @@
+import { ChangeEvent } from 'react';
+export interface ThinkingLevelOption<T extends string = string> {
+    value: T;
+    label: string;
+    /** `muted` means no thinking at all; `warning` marks a level whose cost climbs. */
+    emphasis?: 'muted' | 'warning';
+}
+export declare const invisibleRangeInputClassName: string;
+export declare function useThinkingLevelStop<T extends string>({ options, value, onChange, }: {
+    options: readonly ThinkingLevelOption<T>[];
+    value: T;
+    onChange: (value: T) => void | Promise<unknown>;
+}): {
+    shownStop: number;
+    shownOption: ThinkingLevelOption<T> | undefined;
+    isPending: boolean;
+    rangeInputProps: {
+        type: string;
+        min: number;
+        max: number;
+        step: number;
+        value: number;
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+        onPointerUp: () => undefined;
+        onPointerCancel: () => undefined;
+        onKeyUp: () => undefined;
+        onBlur: () => undefined;
+    };
+};

package/dist/src/ds/components/ai/transcript-divider/stories/transcript-divider.stories.d.ts

@@ -10,6 +10,8 @@ declare const meta: {
     decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react-vite').ReactRenderer, {
         label: string;
         title?: string | undefined;
+        children?: import('react').ReactNode;
+        hideLabel?: boolean | undefined;
     }>) => import("react").JSX.Element)[];
     parameters: {
         docs: {
@@ -23,3 +25,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const TimeGap: Story;
 export declare const WithoutTimestamp: Story;
+export declare const WithActions: Story;

package/dist/src/ds/components/ai/transcript-divider/transcript-divider.d.ts

@@ -1,5 +1,10 @@
+import { ReactNode } from 'react';
 export interface TranscriptDividerProps {
     label: string;
     title?: string;
+    /** Trailing content (e.g. tabs or actions), shown after the label behind a `·` separator. */
+    children?: ReactNode;
+    /** Hides the visible label (and its separator); it stays the accessible name. */
+    hideLabel?: boolean;
 }
-export declare function TranscriptDivider({ label, title }: TranscriptDividerProps): import("react").JSX.Element | null;
+export declare function TranscriptDivider({ label, title, children, hideLabel }: TranscriptDividerProps): import("react").JSX.Element | null;

package/dist/src/ds/icons/FileIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const FileIcon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/dist/src/ds/icons/SearchIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const SearchIcon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/dist/src/ds/icons/TrashIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const TrashIcon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

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

@@ -39,6 +39,8 @@ export * from './WorkflowCoinIcon';
 export * from './LatencyIcon';
 export * from './McpServerIcon';
 export * from './FolderIcon';
+export * from './FileIcon';
+export * from './TrashIcon';
 export * from './McpCoinIcon';
 export * from './ToolCoinIcon';
 export * from './AgentNetworkCoinIcon';
@@ -62,3 +64,4 @@ export * from './ExperimentsIcon';
 export * from './MetricsIcon';
 export * from './LinearIcon';
 export * from './SlackIcon';
+export * from './SearchIcon';

package/dist/src/ds/layout/tabbed-container/tabbed-container-root.d.ts

@@ -2,6 +2,7 @@ import { ReactElement, ReactNode } from 'react';
 import { ComboboxProps } from '../../components/Combobox/combobox';
 import { DataListFit } from '../../components/DataList/data-list-root';
 import { ListSearchProps } from '../../components/ListSearch/list-search';
+import { TabsRootProps } from '../../components/Tabs/tabs-root';
 import { TabProps } from '../../components/Tabs/tabs-tab';
 export type TabbedContainerSearchProps = Pick<ListSearchProps, 'debounceMs' | 'label' | 'onSearch' | 'placeholder' | 'value'>;
 export type TabbedContainerFilterProps = ComboboxProps & {
@@ -30,7 +31,7 @@ export type TabbedContainerProps<T extends string> = {
     defaultTab: T;
     value?: T;
     onValueChange?: (value: T) => void;
-    frame?: 'stroke' | 'inset';
+    frame?: TabsRootProps<T>['frame'];
     className?: string;
 };
 export declare function TabbedContainerRoot<T extends string>({ children, defaultTab, value, onValueChange, frame, className, }: TabbedContainerProps<T>): import("react").JSX.Element;

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

@@ -1,4 +1,4 @@
-export declare const TextRoles: readonly ["display", "title", "heading", "subheading", "body", "label", "body-sm", "column", "caption", "meta"];
+export declare const TextRoles: readonly ["display", "title", "heading", "subheading", "body", "label", "card-title", "card-title-tight", "card-title-strong", "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;