@mastra/playground-ui 61.0.0 → 62.0.0-alpha.0

package/dist/src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.d.ts

@@ -1,11 +1,19 @@
-export declare function MetricsLineChartTooltip({ active, payload, label, suffix, formatValue, }: {
+export declare function MetricsLineChartTooltip({ active, payload, label, suffix, formatValue, showTotal, labelKey, formatByKey, }: {
     active?: boolean;
     payload?: Array<{
         name: string;
         value: number;
         color: string;
+        dataKey?: string | number;
+        payload?: Record<string, unknown>;
     }>;
     label?: string;
     suffix?: string;
     formatValue?: (value: number) => string;
+    /** Adds a "Total" row under a hairline: the sum of every row, e.g. a stacked column's height. */
+    showTotal?: boolean;
+    /** Read the heading from this field of the hovered row instead of the x-axis label. */
+    labelKey?: string;
+    /** Per-series formatters, by data key, for charts that mix units (counts and durations). */
+    formatByKey?: Record<string, (value: number) => string>;
 }): import("react").JSX.Element | null;

package/dist/src/ds/components/MetricsLineChart/metrics-line-chart.d.ts

@@ -1,3 +1,5 @@
+import { ChartXLabels } from '../../primitives/chart-axes';
+import { ChartHeight } from '../../primitives/chart-frame';
 export type MetricsLineChartSeries = {
     dataKey: string;
     label: string;
@@ -6,21 +8,45 @@ export type MetricsLineChartSeries = {
         value: string;
         suffix?: string;
     };
+    /** A secondary reading (e.g. an average next to counts): dashed, no fill under it. */
+    dashed?: boolean;
+    /** The series to read first (e.g. P95 among percentiles): a slightly heavier line. */
+    emphasis?: boolean;
 };
 export type MetricsLineChartPointClickHandler = (point: Record<string, unknown>, seriesKey: string) => void;
-export declare function MetricsLineChart({ data, series, height, yDomain, onPointClick, xAxisInterval, xAxisMinTickGap, showDots, showLegend, }: {
+export type MetricsLineChartProps = {
     data: Record<string, unknown>[];
     series: MetricsLineChartSeries[];
-    height?: number;
+    /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */
+    height?: ChartHeight;
     yDomain?: [number, number];
+    /** Click on a series' active dot. */
     onPointClick?: MetricsLineChartPointClickHandler;
-    /** X-axis tick density. Defaults to `"preserveStartEnd"`, which drops labels
-     * to fit the chart width. Pass a number for a fixed step instead. */
-    xAxisInterval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
-    /** Minimum px gap between rendered ticks; recharts drops labels to honor it. Default `28`. */
-    xAxisMinTickGap?: number;
-    /** Render a visible dot on every point (needed for single-point series). */
+    /** Click anywhere on a bucket (e.g. to open its traces); the plot shows a pointer cursor. */
+    onBucketClick?: (row: Record<string, unknown>, index: number) => void;
+    /** Row field printed under the x-axis. */
+    xKey?: string;
+    /** Row field with the bucket's start time (ms), which places labels on round clock times. */
+    timestampKey?: string;
+    /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */
+    xLabels?: ChartXLabels;
+    /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */
+    tooltipLabelKey?: string;
+    /** Render a visible dot on every point. Series with few points get them anyway. */
     showDots?: boolean;
     /** Set to `false` to render `MetricsLineChartLegend` elsewhere, e.g. next to tabs. */
     showLegend?: boolean;
-}): import("react").JSX.Element;
+    /** Formats tooltip values (e.g. `ms`, `%`), and y-axis ticks unless `axisFormatter` is set. */
+    valueFormatter?: (value: number) => string;
+    /** Formats y-axis ticks, when they need a shorter form than the tooltip. */
+    axisFormatter?: (value: number) => string;
+    /**
+     * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay
+     * for relative scale; exact values come from the tooltip and the card's summary.
+     */
+    showYAxis?: boolean;
+    /** Show a ghost of the chart while data loads, in the chart's own footprint. */
+    isLoading?: boolean;
+    className?: string;
+};
+export declare function MetricsLineChart(props: MetricsLineChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+export * from './metrics-share-list';
+export * from './metrics-share-list-header';
+export * from './metrics-share-list-types';

package/dist/src/ds/components/MetricsShareList/metrics-share-list-classes.d.ts

@@ -0,0 +1,2 @@
+export declare const ROW = "-mx-2 flex w-[calc(100%+1rem)] items-center gap-3 rounded-md px-2 py-1 text-left";
+export declare const NUM = "shrink-0 text-right text-body-sm tabular-nums";

package/dist/src/ds/components/MetricsShareList/metrics-share-list-header.d.ts

@@ -0,0 +1,3 @@
+import { MetricsShareListHeaderProps } from './metrics-share-list-types';
+/** Column headers, right-aligned to the list's number columns. */
+export declare function MetricsShareListHeader({ columns, valueLabel, valueWidth, className, }: MetricsShareListHeaderProps): import("react").JSX.Element;

package/dist/src/ds/components/MetricsShareList/metrics-share-list-row.d.ts

@@ -0,0 +1,16 @@
+import { ElementType } from 'react';
+import { ShownRow } from './metrics-share-list-rows';
+import { MetricsShareListColumn } from './metrics-share-list-types';
+export type ShareListRowProps = {
+    row: ShownRow;
+    columns: MetricsShareListColumn[];
+    valueWidth: string;
+    /** The row's share, formatted. */
+    share: string;
+    highlighted: boolean;
+    dimmed: boolean;
+    onHover: () => void;
+    LinkComponent?: ElementType;
+};
+/** One ranked row: swatch, label, extra cells, share and value. */
+export declare function ShareListRow({ row, columns, valueWidth, share, highlighted, dimmed, onHover, LinkComponent, }: ShareListRowProps): import("react").JSX.Element;

package/dist/src/ds/components/MetricsShareList/metrics-share-list-rows.d.ts

@@ -0,0 +1,69 @@
+import { MetricsShareListProps, MetricsShareListRow } from './metrics-share-list-types';
+/** A row's color and how strongly it shows: fainter rows fade toward the card, not to gray. */
+export type Paint = {
+    color: string;
+    alpha: number;
+};
+/** A listed row with its color and the strip segment it highlights. */
+export type ShownRow = MetricsShareListRow & {
+    paint: Paint;
+    segment: string;
+};
+export type StripSegment = {
+    key: string;
+    paint: Paint; /** flex-grow, in percent of the strip. */
+    grow: number;
+};
+type Palette = NonNullable<MetricsShareListProps['palette']>;
+/** Brand green, toned down for large fills. Theme token: tuned for dark and light. */
+export declare const DEFAULT_COLOR = "var(--chart-share-1)";
+export declare const REST_KEY = "__rest";
+export declare const sumShares: (rows: MetricsShareListRow[]) => number;
+/**
+ * Largest first, so the strongest color is always the biggest share. A missing, negative or
+ * infinite share counts as zero, so one bad row can't break the order or the percentages.
+ */
+export declare function rankRows(rows: MetricsShareListRow[]): MetricsShareListRow[];
+type Colors = {
+    color: string;
+    palette: Palette;
+};
+/** The top rows, then one "Other" row folding the tail, unless that would hide a single row. */
+export declare function foldRows(ranked: MetricsShareListRow[], { limit, other, color, palette }: Colors & Pick<MetricsShareListProps, 'other'> & {
+    limit: number;
+}): {
+    shown: ShownRow[];
+    rest: MetricsShareListRow[];
+};
+/**
+ * The first `count` rows, plus the active row when it ranks past them. Rows past the strip's
+ * own segments are gray and share its "everything else" segment.
+ */
+export declare function pageRows(ranked: MetricsShareListRow[], { count, activeKey, color, palette }: Colors & {
+    count: number;
+    activeKey?: string;
+}): {
+    shown: {
+        paint: Paint;
+        segment: string;
+        key: string;
+        label: import('react').ReactNode;
+        title?: string;
+        share: number;
+        value: import('react').ReactNode;
+        cells?: import('react').ReactNode[];
+        href?: string;
+        onClick?: () => void;
+    }[];
+    rest: MetricsShareListRow[];
+};
+/** One segment per row with its own color, then everything else in one gray segment. */
+export declare function stripSegments(shown: ShownRow[], rest: MetricsShareListRow[]): StripSegment[];
+/** The strip segment a hovered row (or segment) lights up. */
+export declare function hoveredSegment(shown: ShownRow[], hover?: string): string | undefined;
+/** Dim every segment but the lit one, while one is. */
+export declare const isSegmentDimmed: (key: string, lit?: string) => boolean;
+/** Dim every row but the hovered one; hovering the gray segment keeps all its rows lit. */
+export declare function isRowDimmed(row: ShownRow, hover?: string): boolean;
+export declare const fmtShare: (n: number, total: number) => string;
+export {};

package/dist/src/ds/components/MetricsShareList/metrics-share-list-show-more.d.ts

@@ -0,0 +1,9 @@
+/** The list's last row: pages more rows in, or collapses back to the top rows. */
+export declare function ShowMore({ shown, total, limit, pageSize, onMore, onLess, }: {
+    shown: number;
+    total: number;
+    limit: number;
+    pageSize: number;
+    onMore: () => void;
+    onLess: () => void;
+}): import("react").JSX.Element | null;

package/dist/src/ds/components/MetricsShareList/metrics-share-list-skeleton.d.ts

@@ -0,0 +1,7 @@
+import { MetricsShareListColumn } from './metrics-share-list-types';
+/** The list while loading, in the real rows' markup (line boxes, paddings, columns). */
+export declare function ShareListSkeleton({ rows, columns, valueWidth, }: {
+    rows: number;
+    columns: MetricsShareListColumn[];
+    valueWidth: string;
+}): import("react").JSX.Element;

package/dist/src/ds/components/MetricsShareList/metrics-share-list-types.d.ts

@@ -0,0 +1,67 @@
+import { ElementType, ReactNode } from 'react';
+export type MetricsShareListRow = {
+    /** Stable id, also used to link a row to its strip segment. */
+    key: string;
+    /** Row label: plain text, or richer content (e.g. a method and a path). */
+    label: ReactNode;
+    /** Full text of a label that may truncate, shown on hover. Defaults to `label` when it's a string. */
+    title?: string;
+    /** The measure the strip divides (requests, cost, time spent). Rows rank by it, largest first. */
+    share: number;
+    /** The main, right-most column, usually `share` formatted. */
+    value: ReactNode;
+    /** Extra columns before Share, in `columns` order. */
+    cells?: ReactNode[];
+    /** Drill-down for the whole row. */
+    href?: string;
+    /** Row action (e.g. filter the page to this row); the row renders as a button. */
+    onClick?: () => void;
+};
+export type MetricsShareListColumn = {
+    label: string;
+    /** Tailwind width class, shared by the header and the cells. Default `w-16`. */
+    width?: string;
+};
+export type MetricsShareListHeaderProps = {
+    /** Extra columns before Share, in the rows' `cells` order. */
+    columns?: MetricsShareListColumn[];
+    /** Header of the main column. */
+    valueLabel: string;
+    /** Tailwind width class of the main column. Default `w-14`. */
+    valueWidth?: string;
+    className?: string;
+};
+export type MetricsShareListProps = MetricsShareListHeaderProps & {
+    rows: MetricsShareListRow[];
+    /**
+     * Row colors, from `color` (the first row) on.
+     * - `shades`: one hue fading down the ranking. Reads well up to about six rows.
+     * - `hues`: five cool hues, lighter each round. For long lists.
+     */
+    palette?: 'shades' | 'hues';
+    /** Color of the first row. Default: brand green. */
+    color?: string;
+    /** Rows shown before the rest folds or pages. Default 5. */
+    limit?: number;
+    /**
+     * What happens to rows past `limit`.
+     * - `other`: one gray "Other (N)" row sums them (a summary card).
+     * - `more`: a "Show more" row pages them in (a list to scan, e.g. every route).
+     */
+    overflow?: 'other' | 'more';
+    /** Rows each "Show more" adds. Default 50. */
+    pageSize?: number;
+    /** Main value and extra cells of the "Other" row, from the rows folded into it. */
+    other?: (rest: MetricsShareListRow[]) => Pick<MetricsShareListRow, 'value' | 'cells'>;
+    /** Key of the row the page is filtered to: highlighted, and kept listed when it ranks past the shown rows. */
+    activeKey?: string;
+    /** Header row above the strip. Off when the card shows `MetricsShareList.Header` elsewhere (e.g. beside tabs). */
+    showHeader?: boolean;
+    /** Shown when there are no rows. */
+    emptyState?: ReactNode;
+    /** Skeleton rows in the list's own markup, so the card keeps its height when data lands. */
+    isLoading?: boolean;
+    /** Router-aware link for `href` rows; plain `<a>` when omitted. */
+    LinkComponent?: ElementType;
+    className?: string;
+};

package/dist/src/ds/components/MetricsShareList/metrics-share-list.d.ts

@@ -0,0 +1,11 @@
+import { MetricsShareListHeader } from './metrics-share-list-header';
+import { MetricsShareListProps } from './metrics-share-list-types';
+/**
+ * Each row's share of a total: one 100% strip on top, the ranked rows below with their share
+ * and values. Hovering a segment or a row highlights the pair; every segment has its row, so
+ * there is no tooltip. A non-zero share always gets a visible segment; a zero gets none.
+ */
+export declare function MetricsShareList({ showHeader, className, ...props }: MetricsShareListProps): import("react").JSX.Element;
+export declare namespace MetricsShareList {
+    var Header: typeof MetricsShareListHeader;
+}

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

@@ -1 +1 @@
-export { MetricsStackedBarChart } from './metrics-stacked-bar-chart';
+export { MetricsStackedBarChart, type MetricsStackedBarChartOverlay } from './metrics-stacked-bar-chart';

package/dist/src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.d.ts

@@ -1,14 +1,53 @@
 import { MetricsLineChartSeries } from '../MetricsLineChart';
-export declare function MetricsStackedBarChart({ data, series, height, yDomain, valueFormatter, showLegend, referenceLine, }: {
+import { ChartXLabels } from '../../primitives/chart-axes';
+import { ChartHeight } from '../../primitives/chart-frame';
+/** A line drawn over the bars on its own scale, e.g. average wake time over cold starts. */
+export type MetricsStackedBarChartOverlay = MetricsLineChartSeries & {
+    valueFormatter?: (value: number) => string;
+};
+export type MetricsStackedBarChartProps = {
     data: Record<string, unknown>[];
     series: MetricsLineChartSeries[];
-    height?: number;
+    /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */
+    height?: ChartHeight;
     yDomain?: [number, number];
+    /** Formats tooltip values, and y-axis ticks unless `axisFormatter` is set. */
     valueFormatter?: (value: number) => string;
+    /** Formats y-axis ticks, when they need a shorter form than the tooltip. */
+    axisFormatter?: (value: number) => string;
     showLegend?: boolean;
     referenceLine?: {
         value: number;
         label: string;
         color: string;
     };
-}): import("react").JSX.Element;
+    /**
+     * `gradient`: segments fade gently toward the base. Reads best for stacks.
+     * `capped`: a translucent body under a solid cap that marks the value. Reads best for one
+     * value per column.
+     */
+    variant?: 'gradient' | 'capped';
+    /**
+     * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay
+     * for relative scale; exact values come from the tooltip and the card's summary.
+     */
+    showYAxis?: boolean;
+    /** Adds a "Total" row (the column's height) to the tooltip. Defaults to on for stacks. */
+    showTotal?: boolean;
+    /** Row field printed under the x-axis. */
+    xKey?: string;
+    /** Row field with the bucket's start time (ms), which places labels on round clock times. */
+    timestampKey?: string;
+    /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */
+    xLabels?: ChartXLabels;
+    /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */
+    tooltipLabelKey?: string;
+    /** Click a column (e.g. to open its traces); the plot shows a pointer cursor. */
+    onBucketClick?: (row: Record<string, unknown>, index: number) => void;
+    /** One dashed line over the bars, on its own hidden scale (e.g. a duration over counts). */
+    overlay?: MetricsStackedBarChartOverlay;
+    /** Show a ghost of the chart while data loads, in the chart's own footprint. */
+    isLoading?: boolean;
+    className?: string;
+};
+export declare function MetricsStackedBarChart(props: MetricsStackedBarChartProps): import("react").JSX.Element;

package/dist/src/ds/components/Notice/notice-button.d.ts

@@ -1,2 +1,6 @@
-import { ButtonProps } from '../Button';
-export declare function NoticeButton(props: ButtonProps): import("react").JSX.Element;
+import { useRender } from '@base-ui/react/use-render';
+import { ReactNode } from 'react';
+export interface NoticeButtonProps extends useRender.ComponentProps<'button'> {
+    icon?: ReactNode;
+}
+export declare function NoticeButton({ render, icon, className, children, ...props }: NoticeButtonProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/src/ds/components/Notice/notice-root.d.ts

@@ -1,11 +1,11 @@
-import { default as React } from 'react';
+import { ReactNode } from 'react';
 export type NoticeVariant = 'warning' | 'destructive' | 'success' | 'info' | 'note';
 export interface NoticeRootProps {
     variant: NoticeVariant;
-    title?: React.ReactNode;
-    icon?: React.ReactNode;
-    action?: React.ReactNode;
-    children?: React.ReactNode;
+    title?: ReactNode;
+    icon?: ReactNode;
+    action?: ReactNode;
+    children?: ReactNode;
     className?: string;
 }
-export declare function NoticeRoot({ variant, title, icon, action, children, className }: NoticeRootProps): React.JSX.Element;
+export declare function NoticeRoot({ variant, title, icon, action, children, className }: NoticeRootProps): import("react").JSX.Element;

package/dist/src/ds/components/SegmentedControl/segmented-control.d.ts

@@ -20,6 +20,9 @@ export type SegmentedControlProps<T extends string = string> = RadioGroupPassthr
  * one tab stop, arrow keys move the selection. The selected item is marked by a thumb that
  * slides between items, so items keep their natural width.
  *
+ * Use it to set a value (a policy, a theme, on/off), where the layout around it stays the same.
+ * When the choice swaps what is shown below it (Form vs JSON, Overview vs Playground), use `Tabs`.
+ *
  * ```tsx
  * <SegmentedControl aria-label="Permission" value={policy} onValueChange={setPolicy}>
  *   <SegmentedControlItem value="allow">Allow</SegmentedControlItem>

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

@@ -1 +1,2 @@
 export * from './skeleton';
+export * from './skeleton-text';

package/dist/src/ds/components/Skeleton/skeleton-text.d.ts

@@ -0,0 +1,11 @@
+export type SkeletonTextProps = {
+    /** Type style of the text it stands in for (e.g. `text-body-sm`), which sets the line's height. */
+    line?: string;
+    /** Size of the bar itself, e.g. `h-3.5 w-24`. */
+    className?: string;
+};
+/**
+ * A skeleton bar inside a line of text: the line takes the real text's height, the bar sits
+ * centred in it, so nothing moves when the text arrives.
+ */
+export declare function SkeletonText({ line, className }: SkeletonTextProps): import("react").JSX.Element;

package/dist/src/ds/components/Skeleton/skeleton.d.ts

@@ -1,2 +1,2 @@
-declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function Skeleton({ className, style, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 export { Skeleton };

package/dist/src/ds/components/ai/ask-user/ask-user-card.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps, ReactNode } from 'react';
+import { AskUserContainer } from './ask-user-layout';
+import { AskUserAnswer, AskUserPayload, AskUserResult } from './ask-user-types';
+export interface AskUserProps extends Omit<ComponentProps<typeof AskUserContainer>, 'children' | 'onSubmit'> {
+    payload: AskUserPayload;
+    result?: AskUserResult;
+    isAnswered?: boolean;
+    isSubmitting?: boolean;
+    onSubmit: (answer: AskUserAnswer) => void;
+    footer?: ReactNode;
+}
+export declare function AskUser({ payload, result, isAnswered, isSubmitting, onSubmit, footer, ...props }: AskUserProps): import("react").JSX.Element;

package/dist/src/ds/components/ai/ask-user/ask-user-context.d.ts

@@ -0,0 +1,19 @@
+import { AskUserSelectionMode } from './ask-user-types';
+interface AskUserContextValue {
+    questionId: string;
+    selectionMode: AskUserSelectionMode;
+    disabled: boolean;
+    answerText: string;
+    selectedOptionLabels: string[];
+    isCustomAnswerSelected: boolean;
+    canSubmitAnswer: boolean;
+    selectOption: (optionLabel: string) => void;
+    setCustomAnswerSelected: (selected: boolean) => void;
+    changeAnswerText: (text: string) => void;
+    unselectEmptyCustomAnswer: () => void;
+    submitAnswer: () => void;
+}
+export declare const AskUserContext: import('react').Context<AskUserContextValue | undefined>;
+export declare function useOptionalAskUserContext(): AskUserContextValue | undefined;
+export declare function useAskUserContext(): AskUserContextValue;
+export {};

package/dist/src/ds/components/ai/ask-user/ask-user-controls.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps, ReactNode } from 'react';
+import { AskUserSubmitButton } from './ask-user-layout';
+import { Fieldset } from '../../Field';
+import { Input } from '../../Input';
+export declare function AskUserOptions({ children, className, ...props }: ComponentProps<typeof Fieldset>): import("react").JSX.Element;
+export interface AskUserOptionItemProps {
+    value: string;
+    children: ReactNode;
+    description?: string;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function AskUserOptionItem({ value, children, description, disabled, className, }: AskUserOptionItemProps): import("react").JSX.Element;
+export type AskUserTextAnswerProps = Omit<ComponentProps<typeof Input>, 'value' | 'defaultValue' | 'onChange' | 'onKeyDown'>;
+export declare function AskUserTextAnswer({ disabled, ...props }: AskUserTextAnswerProps): import("react").JSX.Element;
+export interface AskUserCustomAnswerProps {
+    className?: string;
+    label?: string;
+    inputLabel?: string;
+}
+export declare function AskUserCustomAnswer({ className, label, inputLabel, }: AskUserCustomAnswerProps): import("react").JSX.Element;
+export type AskUserSubmitProps = ComponentProps<typeof AskUserSubmitButton> & {
+    when?: 'always' | 'custom-answer';
+};
+export declare function AskUserSubmit({ when, disabled, onClick, ...props }: AskUserSubmitProps): import("react").JSX.Element | null;

package/dist/src/ds/components/ai/ask-user/ask-user-layout.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps, ReactNode } from 'react';
+import { AskUserResult } from './ask-user-types';
+import { Button } from '../../Button';
+import { FieldLabelProps } from '../../Field';
+import { Txt } from '../../Txt';
+export declare const AskUserContainer: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+export declare const AskUserLabel: ({ children, className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+export declare const AskUserBody: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+export declare const AskUserQuestion: ({ children, className, ...props }: ComponentProps<typeof Txt>) => import("react").JSX.Element;
+export interface AskUserOptionRowProps extends Omit<FieldLabelProps, 'children'> {
+    control: ReactNode;
+    label: ReactNode;
+    description?: string;
+    disabled?: boolean;
+}
+export declare const AskUserOptionRow: ({ control, label, description, disabled, className, ...props }: AskUserOptionRowProps) => import("react").JSX.Element;
+export type AskUserSubmitButtonProps = Omit<ComponentProps<typeof Button>, 'children'> & {
+    children?: ReactNode;
+};
+export declare const AskUserSubmitButton: ({ children, ...props }: AskUserSubmitButtonProps) => import("react").JSX.Element;
+export declare const AskUserPending: ({ children, ...props }: ComponentProps<typeof Txt>) => import("react").JSX.Element;
+export interface AskUserOutputProps extends ComponentProps<'div'> {
+    result: AskUserResult;
+}
+export declare const AskUserOutput: ({ result, className, ...props }: AskUserOutputProps) => import("react").JSX.Element;

package/dist/src/ds/components/ai/ask-user/ask-user-root.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { AskUserContainer } from './ask-user-layout';
+import { AskUserAnswer, AskUserSelectionMode } from './ask-user-types';
+export interface AskUserRootProps extends Omit<ComponentProps<typeof AskUserContainer>, 'onSubmit'> {
+    selectionMode?: AskUserSelectionMode;
+    disabled?: boolean;
+    onSubmit: (answer: AskUserAnswer) => void;
+}
+export declare function AskUserRoot({ selectionMode, disabled, onSubmit, children, ...props }: AskUserRootProps): import("react").JSX.Element;

package/dist/src/ds/components/ai/ask-user/ask-user-types.d.ts

@@ -0,0 +1,15 @@
+export type AskUserSelectionMode = 'single_select' | 'multi_select';
+export type AskUserAnswer = string | string[];
+export interface AskUserOption {
+    label: string;
+    description?: string;
+}
+export interface AskUserPayload {
+    question: string;
+    options?: AskUserOption[];
+    selectionMode?: AskUserSelectionMode;
+}
+export interface AskUserResult {
+    content: string;
+    isError?: boolean;
+}

package/dist/src/ds/components/ai/ask-user/ask-user.d.ts

@@ -1,48 +1,9 @@
-import { ComponentProps, ReactNode } from 'react';
-import { Button } from '../../Button';
-import { FieldLabelProps } from '../../Field';
-import { Txt } from '../../Txt';
-export type AskUserSelectionMode = 'single_select' | 'multi_select';
-export type AskUserAnswer = string | string[];
-export interface AskUserOption {
-    label: string;
-    description?: string;
-}
-export interface AskUserPayload {
-    question: string;
-    options?: AskUserOption[];
-    selectionMode?: AskUserSelectionMode;
-}
-export interface AskUserResult {
-    content: string;
-    isError?: boolean;
-}
-export declare const AskUserContainer: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
-export declare const AskUserLabel: ({ children, className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
-export declare const AskUserBody: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
-export declare const AskUserQuestion: ({ className, ...props }: ComponentProps<typeof Txt>) => import("react").JSX.Element;
-export interface AskUserOptionRowProps extends Omit<FieldLabelProps, 'children'> {
-    control: ReactNode;
-    label: string;
-    description?: string;
-    disabled?: boolean;
-}
-export declare const AskUserOptionRow: ({ control, label, description, disabled, className, ...props }: AskUserOptionRowProps) => import("react").JSX.Element;
-export type AskUserSubmitProps = Omit<ComponentProps<typeof Button>, 'children'> & {
-    children?: ReactNode;
-};
-export declare const AskUserSubmit: ({ children, ...props }: AskUserSubmitProps) => import("react").JSX.Element;
-export declare const AskUserPending: ({ children, ...props }: ComponentProps<typeof Txt>) => import("react").JSX.Element;
-export interface AskUserOutputProps extends ComponentProps<'div'> {
-    result: AskUserResult;
-}
-export declare const AskUserOutput: ({ result, className, ...props }: AskUserOutputProps) => import("react").JSX.Element;
-export interface AskUserProps extends Omit<ComponentProps<typeof AskUserContainer>, 'children' | 'onSubmit'> {
-    payload: AskUserPayload;
-    result?: AskUserResult;
-    isAnswered?: boolean;
-    isSubmitting?: boolean;
-    onSubmit: (answer: AskUserAnswer) => void;
-    footer?: ReactNode;
-}
-export declare const AskUser: ({ payload, ...props }: AskUserProps) => import("react").JSX.Element;
+export { AskUser } from './ask-user-card';
+export type { AskUserProps } from './ask-user-card';
+export { AskUserRoot, AskUserRoot as Root } from './ask-user-root';
+export type { AskUserRootProps } from './ask-user-root';
+export { AskUserCustomAnswer, AskUserCustomAnswer as CustomAnswer, AskUserOptionItem, AskUserOptionItem as Option, AskUserOptions, AskUserOptions as Options, AskUserSubmit, AskUserSubmit as Submit, AskUserTextAnswer, AskUserTextAnswer as TextAnswer, } from './ask-user-controls';
+export type { AskUserCustomAnswerProps, AskUserOptionItemProps, AskUserSubmitProps, AskUserTextAnswerProps, } from './ask-user-controls';
+export { AskUserBody, AskUserBody as Body, AskUserContainer, AskUserLabel, AskUserOptionRow, AskUserOutput, AskUserOutput as Output, AskUserPending, AskUserPending as Pending, AskUserQuestion, AskUserQuestion as Question, } from './ask-user-layout';
+export type { AskUserOptionRowProps, AskUserOutputProps } from './ask-user-layout';
+export type { AskUserAnswer, AskUserOption, AskUserPayload, AskUserResult, AskUserSelectionMode, } from './ask-user-types';

package/dist/src/ds/primitives/chart-axes.d.ts

@@ -0,0 +1,45 @@
+/** Horizontal rulers: short dashes on the border color at half strength. */
+export declare const CHART_GRID_PROPS: {
+    readonly vertical: false;
+    readonly stroke: "var(--border)";
+    readonly strokeDasharray: "3 3";
+    readonly strokeOpacity: 0.5;
+};
+/** Hover line of line charts: dashed like the grid, full border color, a hair thinner than a series. */
+export declare const CHART_CURSOR_PROPS: {
+    readonly stroke: "var(--border)";
+    readonly strokeDasharray: "3 3";
+    readonly strokeWidth: 0.8;
+};
+/**
+ * How x-axis labels are placed.
+ * - `auto`: as many labels as fit the width, on round clock times (12 AM, 6 AM, ...) when the
+ *   rows carry timestamps, so every chart on a page shares one time grid.
+ * - `edges`: only the first and last bucket, pinned to the plot's edges (small cards).
+ */
+export type ChartXLabels = 'auto' | 'edges';
+export type ChartSize = {
+    width: number;
+    height: number;
+};
+/**
+ * The chart's size, read before the first paint (so labels and the y tick count are right on
+ * the first frame, no jump) and kept current by ResponsiveContainer's `onResize`.
+ */
+export declare function useChartSize(): {
+    size: ChartSize;
+    onResize: (width: number, height: number) => void;
+    ref: import('react').RefObject<HTMLDivElement | null>;
+};
+/** About one gridline per 48px of plot, 3 to 5 ticks, on Recharts' round values. */
+export declare function chartYTickCount(height: number): number;
+/** Rough label width at the axis font size. */
+export declare const labelWidth: (text: string) => number;
+/**
+ * Which buckets get a label: the smallest round step whose labels fit the width, on
+ * clock-aligned times (hours divisible by the step, days on local midnight or, for daily
+ * buckets, on their local date). Without
+ * timestamps, evenly spaced buckets that fit; when fewer than three would show, just the
+ * first and last bucket.
+ */
+export declare function pickTimeTicks(timestamps: Array<number | undefined>, labels: string[], plotWidth: number, mode?: ChartXLabels): Set<number>;