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

package/dist/src/ds/components/CodeDiff/code-diff.stories.d.ts

@@ -4,6 +4,9 @@ declare const meta: Meta<typeof CodeDiff>;
 export default meta;
 type Story = StoryObj<typeof CodeDiff>;
 export declare const Default: Story;
+export declare const GitPatch: Story;
+export declare const ObservationHistory: Story;
+export declare const RenameOnly: Story;
 /** Removed key (toolMocks), added key (requestContext), changed values. */
 export declare const AddedRemovedChanged: Story;
 export declare const Identical: Story;

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

@@ -71,5 +71,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";
     /** Error message */
-    readonly error: "text-caption text-accent2";
+    readonly error: "text-caption text-destructive-indicator";
 };

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

@@ -1,17 +1,18 @@
-import { Dialog } from '../Dialog';
+import { Dialog, DialogSize } from '../Dialog';
 import * as React from 'react';
 declare const Command: React.ForwardRefExoticComponent<any>;
 type CommandDialogProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'children'> & {
     children?: React.ReactNode;
     title?: string;
     description?: string;
+    size?: DialogSize;
     contentClassName?: string;
     commandClassName?: string;
     commandLabel?: string;
     showOverlay?: boolean;
     overlayClassName?: string;
 };
-declare const CommandDialog: ({ children, title, description, contentClassName, commandClassName, commandLabel, showOverlay, overlayClassName, ...props }: CommandDialogProps) => React.JSX.Element;
+declare const CommandDialog: ({ children, title, description, size, contentClassName, commandClassName, commandLabel, showOverlay, overlayClassName, ...props }: CommandDialogProps) => React.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/DataList/data-list-root.d.ts

@@ -18,7 +18,7 @@ export type DataListFit = 'content' | 'container';
  * - `light`: no panel behind the rows; rows sit directly on the page.
  */
 export type DataListVariant = 'default' | 'light';
-export type DataListRootProps = Omit<ScrollAreaProps, 'children' | 'orientation' | 'mask' | 'viewportRef'> & {
+export type DataListRootProps = Omit<ScrollAreaProps, 'children' | 'orientation' | 'mask'> & {
     children: ReactNode;
     columns: string;
     /** Grid width behavior; defaults to `content` (existing horizontal-scroll sizing). */

package/dist/src/ds/components/DataList/shared.d.ts

@@ -20,13 +20,13 @@ export declare const dataListRowOuterStyles: readonly ["group/data-list-row data
  * rung, the same rung a resting control carries, and error sits on the row
  * element itself so it reads on top of the highlight.
  */
-export declare const dataListRowStateStyles: readonly ["active:bg-fill", "focus-visible:bg-surface-panel has-focus-visible:bg-surface-panel", "data-featured:before:bg-surface-panel has-data-featured:before:bg-surface-panel has-data-selected:before:bg-surface-panel", "data-[variant=error]:bg-notice-destructive/10 has-data-[variant=error]:bg-notice-destructive/10 data-[variant=error]:active:bg-notice-destructive/20 has-data-[variant=error]:active:bg-notice-destructive/20"];
+export declare const dataListRowStateStyles: readonly ["active:bg-fill", "focus-visible:bg-surface-panel has-focus-visible:bg-surface-panel", "data-featured:before:bg-surface-panel has-data-featured:before:bg-surface-panel has-data-selected:before:bg-surface-panel", "data-[variant=error]:bg-destructive-subtle has-data-[variant=error]:bg-destructive-subtle data-[variant=error]:active:bg-destructive-subtle-active has-data-[variant=error]:active:bg-destructive-subtle-active"];
 /**
  * Layout and focus for the interactive element. The background lives on the
  * outer row element so it sits inside the root surface.
  */
-export declare const dataListRowInteractiveStyles: readonly ["grid grid-cols-subgrid gap-4 px-3 cursor-pointer", "outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1"];
-export declare const dataListRowStyles: readonly ["grid grid-cols-subgrid gap-4 px-3 cursor-pointer", "outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1", "group/data-list-row data-list-row col-span-full relative min-h-9", "before:absolute before:inset-0 before:-z-2 before:rounded-[inherit] before:bg-background before:content-['']", "active:bg-fill", "focus-visible:bg-surface-panel has-focus-visible:bg-surface-panel", "data-featured:before:bg-surface-panel has-data-featured:before:bg-surface-panel has-data-selected:before:bg-surface-panel", "data-[variant=error]:bg-notice-destructive/10 has-data-[variant=error]:bg-notice-destructive/10 data-[variant=error]:active:bg-notice-destructive/20 has-data-[variant=error]:active:bg-notice-destructive/20"];
+export declare const dataListRowInteractiveStyles: readonly ["grid grid-cols-subgrid gap-4 px-3 cursor-pointer", "focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus focus-visible:-outline-offset-1"];
+export declare const dataListRowStyles: readonly ["grid grid-cols-subgrid gap-4 px-3 cursor-pointer", "focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus focus-visible:-outline-offset-1", "group/data-list-row data-list-row col-span-full relative min-h-9", "before:absolute before:inset-0 before:-z-2 before:rounded-[inherit] before:bg-background before:content-['']", "active:bg-fill", "focus-visible:bg-surface-panel has-focus-visible:bg-surface-panel", "data-featured:before:bg-surface-panel has-data-featured:before:bg-surface-panel has-data-selected:before:bg-surface-panel", "data-[variant=error]:bg-destructive-subtle has-data-[variant=error]:bg-destructive-subtle data-[variant=error]:active:bg-destructive-subtle-active has-data-[variant=error]:active:bg-destructive-subtle-active"];
 export declare const dataListRowStaticStyles: readonly ["grid grid-cols-subgrid gap-4 px-3", "group/data-list-row data-list-row col-span-full relative min-h-9", "before:absolute before:inset-0 before:-z-2 before:rounded-[inherit] before:bg-background before:content-['']"];
 /**
  * Row actions that stay out of the way until the row is hovered or focused.

package/dist/src/ds/components/Dialog/dialog-action.d.ts

@@ -1,9 +1,20 @@
 import { ComponentProps } from 'react';
 import { Button, TextButtonSize } from '../Button';
-export type DialogActionProps = Omit<ComponentProps<typeof Button>, 'onClick' | 'variant' | 'as' | 'type' | 'size'> & {
+type DialogActionButtonProps = Omit<ComponentProps<typeof Button>, 'onClick' | 'variant' | 'as' | 'type' | 'size'> & {
     size?: TextButtonSize;
+};
+type DialogConfirmActionProps = DialogActionButtonProps & {
+    type?: 'button';
     onConfirm: () => void;
     confirmation?: 'click' | 'hold';
     holdSeconds?: number;
 };
-export declare const DialogAction: import('react').ForwardRefExoticComponent<Omit<DialogActionProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+type DialogSubmitActionProps = DialogActionButtonProps & {
+    type: 'submit';
+    onConfirm?: never;
+    confirmation?: never;
+    holdSeconds?: never;
+};
+export type DialogActionProps = DialogConfirmActionProps | DialogSubmitActionProps;
+export declare function DialogAction({ confirmation, holdSeconds, onConfirm, disabled, type, ...props }: DialogActionProps): import("react").JSX.Element;
+export {};

package/dist/src/ds/components/Dialog/dialog-confirmation.stories.d.ts

@@ -0,0 +1,63 @@
+import { StoryObj } from '@storybook/react-vite';
+import { TextButtonSize } from '../Button';
+declare function ConfirmationExample({ holdSeconds, buttonSize, intent, confirmation, title, description, actionLabel, cancelLabel, failFirst, longBody, }: {
+    holdSeconds?: number;
+    buttonSize?: TextButtonSize;
+    intent?: 'default' | 'destructive';
+    confirmation?: 'click' | 'hold';
+    title?: string;
+    description?: string;
+    actionLabel?: string;
+    cancelLabel?: string;
+    failFirst?: boolean;
+    longBody?: boolean;
+}): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof ConfirmationExample;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        holdSeconds: {
+            control: {
+                type: "number";
+                min: number;
+                step: number;
+            };
+        };
+        buttonSize: {
+            control: "inline-radio";
+            options: string[];
+        };
+        intent: {
+            control: "inline-radio";
+            options: string[];
+        };
+        confirmation: {
+            control: "inline-radio";
+            options: string[];
+        };
+    };
+    args: {
+        holdSeconds: number;
+        buttonSize: "md";
+        intent: "default";
+        confirmation: "click";
+        failFirst: false;
+        longBody: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Destructive: Story;
+export declare const PressAndHold: Story;
+export declare const LongTitleAndLabels: Story;
+export declare const ScrollingBody: Story;
+export declare const ErrorAndRetry: Story;

package/dist/src/ds/components/Dialog/dialog-context.d.ts

@@ -1,7 +1,5 @@
-export type DialogVariant = 'default' | 'new';
 export type DialogIntent = 'default' | 'destructive';
 export type DialogContextValue = {
-    variant: DialogVariant;
     intent: DialogIntent;
     pending: boolean;
 };

package/dist/src/ds/components/Dialog/dialog-shell.d.ts

@@ -0,0 +1,3 @@
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export declare const dialogPopupClassName: string;
+export declare const dialogContentSizeClasses: Record<DialogSize, string>;

package/dist/src/ds/components/Dialog/dialog.d.ts

@@ -1,54 +1,48 @@
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import { DialogAction } from './dialog-action';
-import { DialogIntent, DialogVariant } from './dialog-context';
+import { DialogIntent } from './dialog-context';
+import { DialogSize } from './dialog-shell';
 import { TextButtonSize } from '../Button';
 import * as React from 'react';
 export type DialogProps = DialogPrimitive.Root.Props & {
-    variant?: DialogVariant;
     intent?: DialogIntent;
     pending?: boolean;
 };
-declare function Dialog({ variant, intent, pending, onOpenChange, ...props }: DialogProps): React.JSX.Element;
-type DialogTriggerProps = DialogPrimitive.Trigger.Props & {
-    /** @deprecated Use Base UI's native `render` prop instead for stronger composition typing. */
-    asChild?: boolean;
-};
-declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare function Dialog({ intent, pending, onOpenChange, disablePointerDismissal, ...props }: DialogProps): React.JSX.Element;
+declare const DialogTrigger: DialogPrimitive.Trigger;
 declare const DialogPortal: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type DialogCloseProps = DialogPrimitive.Close.Props & {
-    /** @deprecated Use Base UI's native `render` prop instead for stronger composition typing. */
-    asChild?: boolean;
-};
-declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogClose: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 type DialogOverlayProps = Omit<DialogPrimitive.Backdrop.Props, 'className'> & {
     className?: string;
 };
-declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function DialogOverlay({ className, ...props }: DialogOverlayProps): React.JSX.Element;
+export type { DialogSize };
 type DialogContentProps = Omit<DialogPrimitive.Popup.Props, 'className'> & {
     className?: string;
+    size?: DialogSize;
     showOverlay?: boolean;
     overlayClassName?: string;
 };
-declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DialogHeader: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-    displayName: string;
-};
-declare const DialogFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-    displayName: string;
+declare function DialogContent({ className, children, size, showOverlay, overlayClassName, initialFocus, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export type DialogBodyProps = React.ComponentProps<'div'> & {
+    /** `scroll` fades and scrolls long content; `fill` takes the remaining height and leaves scrolling to its children. */
+    layout?: 'scroll' | 'fill';
+    /** Drops the inset so content such as split panes or code reaches the dialog's edges. */
+    flush?: boolean;
 };
-declare const DialogBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare function DialogBody({ className, layout, flush, children, ...props }: DialogBodyProps): React.JSX.Element;
 type DialogTitleProps = Omit<DialogPrimitive.Title.Props, 'className'> & {
     className?: string;
 };
-declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare function DialogTitle({ className, ...props }: DialogTitleProps): React.JSX.Element;
 type DialogDescriptionProps = Omit<DialogPrimitive.Description.Props, 'className'> & {
     className?: string;
 };
-declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare function DialogDescription({ className, ...props }: DialogDescriptionProps): React.JSX.Element;
 type DialogCancelProps = DialogPrimitive.Close.Props & {
     size?: TextButtonSize;
 };
-declare const DialogCancel: React.ForwardRefExoticComponent<Omit<DialogCancelProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare function DialogCancel({ disabled, size, ...props }: DialogCancelProps): React.JSX.Element;
 export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogBody, DialogTitle, DialogDescription, DialogCancel, DialogAction, };

package/dist/src/ds/components/Dialog/dialog.stories.d.ts

@@ -1,9 +1,51 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { Dialog } from './dialog';
-declare const meta: Meta<typeof Dialog>;
+import { StoryObj } from '@storybook/react-vite';
+import { DialogSize } from './dialog';
+type PlaygroundArgs = {
+    size: DialogSize;
+    paragraphCount: number;
+    withDescription: boolean;
+    withFooter: boolean;
+};
+declare function PlaygroundDialog({ size, paragraphCount, withDescription, withFooter }: PlaygroundArgs): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof PlaygroundDialog;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        size: {
+            control: "inline-radio";
+            options: DialogSize[];
+        };
+        paragraphCount: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+            };
+        };
+    };
+    args: {
+        size: "md";
+        paragraphCount: number;
+        withDescription: true;
+        withFooter: true;
+    };
+};
 export default meta;
-type Story = StoryObj<typeof Dialog>;
-export declare const Default: Story;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Sizes: Story;
 export declare const WithForm: Story;
-export declare const LongContent: Story;
-export declare const MinimalDialog: Story;
+export declare const ScrollingBody: Story;
+export declare const FooterWithStatus: Story;
+export declare const FlushBody: Story;
+export declare const FillBody: Story;
+export declare const FullScreen: Story;
+export declare const WithoutFooter: Story;

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

@@ -1,3 +1,3 @@
 export * from './dialog';
 export type { DialogActionProps } from './dialog-action';
-export type { DialogIntent, DialogVariant } from './dialog-context';
+export type { DialogIntent } from './dialog-context';

package/dist/src/ds/components/Entity/entity.stories.d.ts

@@ -6,5 +6,4 @@ type Story = StoryObj<typeof Entity>;
 export declare const Default: Story;
 export declare const Clickable: Story;
 export declare const WithCustomContent: Story;
-export declare const EntityList: Story;
 export declare const MinimalEntity: Story;

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+import { Product } from './product-identity';
+export type ProductAvatarProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    product: Product;
+};
+export declare function ProductAvatar({ product, className, ...props }: ProductAvatarProps): import("react").JSX.Element;

package/dist/src/ds/components/ProductAvatar/ProductIcon.d.ts

@@ -0,0 +1,4 @@
+import { Product } from './product-identity';
+export declare function ProductIcon({ product }: {
+    product: Product;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+export { ProductAvatar } from './ProductAvatar';
+export type { ProductAvatarProps } from './ProductAvatar';
+export type { Product } from './product-identity';

package/dist/src/ds/components/ProductAvatar/product-avatar.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ProductAvatar } from './ProductAvatar';
+declare const meta: {
+    title: string;
+    component: typeof ProductAvatar;
+    args: {
+        product: "studio";
+    };
+    argTypes: {
+        product: {
+            control: "select";
+            options: ("studio" | "server" | "observability" | "factory" | "workers" | "persistent-server")[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllProducts: Story;

package/dist/src/ds/components/ProductAvatar/product-identity.d.ts

@@ -0,0 +1,11 @@
+export declare const productNames: {
+    studio: string;
+    server: string;
+    observability: string;
+    factory: string;
+    workers: string;
+    'persistent-server': string;
+};
+export type Product = keyof typeof productNames;
+export declare const productSubtleColors: Record<Product, string>;
+export declare const productColors: Record<Product, string>;

package/dist/src/ds/components/ProductAvatar/products.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Overview: Story;

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+import { Product } from '../ProductAvatar/product-identity';
+export type ProductBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    product: Product;
+};
+export declare function ProductBadge({ product, className, ...props }: ProductBadgeProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { ProductBadge } from './ProductBadge';
+export type { ProductBadgeProps } from './ProductBadge';

package/dist/src/ds/components/ProductBadge/product-badge.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ProductBadge } from './ProductBadge';
+declare const meta: {
+    title: string;
+    component: typeof ProductBadge;
+    args: {
+        product: "studio";
+    };
+    argTypes: {
+        product: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -2,6 +2,6 @@ export { Sankey, useSankey } from './sankey-context';
 export type { SankeyControlColumn, SankeyControls, SankeyProps } from './sankey-context';
 export { SankeyChart } from './sankey-chart';
 export type { SankeyChartProps } from './sankey-chart';
-export { buildSankeyHueMap, hashHue, nodeColor, nodeColorVivid } from './sankeyColor';
+export { buildSankeyColorMap, sankeySeriesColors } from './sankeyColor';
 export { buildSankeyChartGraph, getSankeyChartCurveSelection, getSankeyChartNodeSelection, getSankeyChartNodeWeights, getSankeyChartValue, reorderSankeyChartColumns, } from './sankey-chart-utils';
 export type { SankeyChartColumn, SankeyChartCurveSelection, SankeyChartGraph, SankeyChartLink, SankeyChartNode, SankeyChartNodeSelection, SankeyChartRecord, } from './sankey-chart-utils';

package/dist/src/ds/components/SankeyChart/sankey-chart.d.ts

@@ -3,6 +3,8 @@ import { Sankey as RechartsSankey } from 'recharts';
 import { SankeyChartColumn, SankeyChartCurveSelection, SankeyChartNodeSelection } from './sankey-chart-utils';
 export type SankeyChartProps = {
     height?: CSSProperties['height'];
+    getNodeColor?: (selection: SankeyChartNodeSelection) => string;
+    getLinkColor?: (selection: SankeyChartCurveSelection) => string;
     className?: string;
     margin?: ComponentProps<typeof RechartsSankey>['margin'];
     onCurveClick?: (selection: SankeyChartCurveSelection) => void;
@@ -14,4 +16,4 @@ export type SankeyChartProps = {
     /** Animate fixed node and ribbon geometry when this perspective key changes. */
     geometryTransitionKey?: string;
 };
-export declare function SankeyChart({ height, className, margin, onCurveClick, onNodeClick, isNodeClickable, getColumnDescription, hideColumnLabels, geometryTransitionKey, }: SankeyChartProps): import("react").JSX.Element;
+export declare function SankeyChart({ height, className, margin, onCurveClick, onNodeClick, isNodeClickable, getColumnDescription, hideColumnLabels, geometryTransitionKey, getNodeColor, getLinkColor, }: SankeyChartProps): import("react").JSX.Element;

package/dist/src/ds/components/SankeyChart/sankey-chart.stories.d.ts

@@ -8,3 +8,4 @@ export declare const Interactive: Story;
 export declare const ClickableCurves: Story;
 export declare const SignalColumnHeaders: Story;
 export declare const Empty: Story;
+export declare const SemanticColors: Story;

package/dist/src/ds/components/SankeyChart/sankey-context.d.ts

@@ -13,7 +13,7 @@ export type SankeyProps = {
     getRecordNodeId?: (record: SankeyChartRecord, column: SankeyChartColumn) => string;
     getRecordNodeLabel?: (record: SankeyChartRecord, column: SankeyChartColumn) => string;
     getRecordNodeValue?: (record: SankeyChartRecord, column: SankeyChartColumn) => number;
-    getColumnHue?: (column: SankeyChartColumn) => number;
+    getColumnColor?: (column: SankeyChartColumn) => string;
 };
 export type SankeyControlColumn = SankeyChartColumn & {
     visible: boolean;
@@ -26,11 +26,11 @@ export type SankeyControls = {
 type SankeyRenderContext = {
     graph: SankeyChartGraph;
     enabledColumns: Array<SankeyChartColumn>;
-    hueMap: Record<string, number>;
+    colorMap: Record<string, string>;
     usesFixedGeometry: boolean;
 };
 declare const SankeyRenderContext: import('react').Context<SankeyRenderContext | undefined>;
-export declare function Sankey({ data, columns, children, columnOrder, onColumnOrderChange, visibleColumnIds, onVisibleColumnIdsChange, getRecordWeight, getRecordLayoutWeight, getRecordNodeId, getRecordNodeLabel, getRecordNodeValue, getColumnHue, }: SankeyProps): import("react").JSX.Element;
+export declare function Sankey({ data, columns, children, columnOrder, onColumnOrderChange, visibleColumnIds, onVisibleColumnIdsChange, getRecordWeight, getRecordLayoutWeight, getRecordNodeId, getRecordNodeLabel, getRecordNodeValue, getColumnColor, }: SankeyProps): import("react").JSX.Element;
 export declare function useSankey(): SankeyControls;
 export declare function useSankeyRenderContext(): SankeyRenderContext;
 export {};

package/dist/src/ds/components/SankeyChart/sankeyColor.d.ts

@@ -1,6 +1,2 @@
-export declare function hashHue(value: string): number;
-export declare function nodeColor(hue: number): string;
-export declare function nodeColorVivid(hue: number): string;
-export declare function buildSankeyHueMap(names: string[]): {
-    [k: string]: number;
-};
+export declare const sankeySeriesColors: readonly string[];
+export declare function buildSankeyColorMap(names: string[]): Record<string, string>;

package/dist/src/ds/components/ScrollArea/scroll-area.d.ts

@@ -1,20 +1,24 @@
 import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
 import * as React from 'react';
 type Orientation = 'vertical' | 'horizontal' | 'both';
+type MaskFadeDepth = `${number}${'rem' | 'px'}`;
+type MaskSide = boolean | MaskFadeDepth;
 export type MaskSides = {
-    top?: boolean;
-    bottom?: boolean;
-    left?: boolean;
-    right?: boolean;
+    top?: MaskSide;
+    bottom?: MaskSide;
+    left?: MaskSide;
+    right?: MaskSide;
     /** Shorthand: sets both `left` and `right`. Per-side keys override. */
-    x?: boolean;
+    x?: MaskSide;
     /** Shorthand: sets both `top` and `bottom`. Per-side keys override. */
-    y?: boolean;
+    y?: MaskSide;
 };
 /**
- * - `true` / omitted: fade the edges that match `orientation`.
+ * - `true` / omitted: fade the edges that match `orientation`, 2rem deep.
  * - `false`: no fade.
- * - object: per-side override on top of the orientation default.
+ * - object: per-side override on top of the orientation default; a length (`'5rem'`) sets that side's fade depth.
+ *
+ * A fade grows with the distance scrolled from its edge, up to its depth.
  */
 export type ScrollAreaMask = boolean | MaskSides;
 export type ScrollAreaScrollButtons = boolean | {
@@ -25,8 +29,7 @@ export type ScrollAreaScrollButtons = boolean | {
     leftLabel?: string;
     rightLabel?: string;
 };
-export type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
-    viewPortClassName?: string;
+export type ScrollAreaProps = React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
     maxHeight?: string;
     autoScroll?: boolean;
     orientation?: Orientation;
@@ -34,44 +37,21 @@ export type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPr
     scrollButtons?: ScrollAreaScrollButtons;
     /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */
     mask?: ScrollAreaMask;
-    /** @deprecated Use `mask` instead. Retained for backward compatibility. */
-    showMask?: boolean;
     /**
      * Reveal the overlay scrollbar when the pointer hovers the area. When `false`,
      * the scrollbar only appears while actively scrolling. Defaults to `true`.
      */
     revealScrollbarOnHover?: boolean;
-    /**
-     * Ref to the scrolling viewport element. Use this as the scroll element for a
-     * virtualizer (`getScrollElement: () => viewportRef.current`) so the list can
-     * virtualize while still using the ScrollArea's overlay scrollbar + masks.
-     */
-    viewportRef?: React.Ref<HTMLDivElement>;
 };
-declare const ScrollArea: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    viewPortClassName?: string;
-    maxHeight?: string;
-    autoScroll?: boolean;
-    orientation?: Orientation;
-    /** Show left/right controls for horizontal overflow. Only applies to `horizontal` and `both` orientations. */
-    scrollButtons?: ScrollAreaScrollButtons;
-    /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */
-    mask?: ScrollAreaMask;
-    /** @deprecated Use `mask` instead. Retained for backward compatibility. */
-    showMask?: boolean;
-    /**
-     * Reveal the overlay scrollbar when the pointer hovers the area. When `false`,
-     * the scrollbar only appears while actively scrolling. Defaults to `true`.
-     */
-    revealScrollbarOnHover?: boolean;
-    /**
-     * Ref to the scrolling viewport element. Use this as the scroll element for a
-     * virtualizer (`getScrollElement: () => viewportRef.current`) so the list can
-     * virtualize while still using the ScrollArea's overlay scrollbar + masks.
-     */
-    viewportRef?: React.Ref<HTMLDivElement>;
-} & React.RefAttributes<HTMLDivElement>>;
-declare const ScrollBar: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+export type ScrollAreaViewportProps = {
+    className?: string;
+    children?: React.ReactNode;
+    /** The scrolling element, e.g. a virtualizer's `getScrollElement`. */
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function ScrollAreaViewport({ className, children, ref }: ScrollAreaViewportProps): React.JSX.Element;
+declare function ScrollArea({ className, children, maxHeight, autoScroll, orientation, scrollButtons, mask, revealScrollbarOnHover, ...props }: ScrollAreaProps): React.JSX.Element;
+declare function ScrollBar({ className, orientation, revealOnHover, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar> & {
     revealOnHover?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
-export { ScrollArea, ScrollBar };
+}): React.JSX.Element;
+export { ScrollArea, ScrollAreaViewport, ScrollBar };

package/dist/src/ds/components/ScrollArea/scroll-area.stories.d.ts

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof ScrollArea>;
 export declare const Default: Story;
 export declare const WithMaxHeight: Story;
+export declare const CustomViewport: Story;
 export declare const HorizontalScroll: Story;
 export declare const HorizontalScrollButtons: Story;
 export declare const Badges: Story;

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

@@ -16,7 +16,7 @@ export type TabListProps = Omit<TabListVariantsProps, 'variant'> & {
     /**
      * 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(--accent5)' } as React.CSSProperties}`.
+     * CSS variable, e.g. `style={{ '--tab-indicator-color': 'var(--info-indicator)' } as React.CSSProperties}`.
      */
     style?: React.CSSProperties;
 };

package/dist/src/ds/components/ThreadList/thread-list.d.ts

@@ -28,10 +28,12 @@ export interface ThreadListItemProps {
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     onDelete?: () => void;
     deleteLabel?: string;
+    /** Trailing controls (e.g. a menu trigger) shown on hover/focus, and kept visible while a popup they own is open. */
+    actions?: ReactNode;
     className?: string;
     children: ReactNode;
 }
-export declare const ThreadListItem: ({ as, href, to, isActive, onClick, onDelete, deleteLabel, className, children, }: ThreadListItemProps) => import("react").JSX.Element;
+export declare const ThreadListItem: ({ as, href, to, isActive, onClick, onDelete, deleteLabel, actions, className, children, }: ThreadListItemProps) => import("react").JSX.Element;
 export interface ThreadListEmptyProps {
     children: ReactNode;
 }

package/dist/src/ds/components/ThreadList/thread-list.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof ThreadList>;
 export declare const Default: Story;
 export declare const Embedded: Story;
 export declare const Empty: Story;
+export declare const WithActions: Story;