@mastra/playground-ui 66.1.0-alpha.2 → 67.0.0

package/dist/src/ds/components/Arrival/arrival.d.ts

@@ -16,6 +16,17 @@ import type { ReactNode } from 'react';
 export declare function ArrivalScope({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;
+/**
+ * Something the reader already sees, moved to a new place, such as the run's indicator stepping onto the line
+ * that now describes it. It mounts without fading in, and takes the entrance off any element around it.
+ */
+export declare function Continuing({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Content whose entrance its host plays: nothing inside fades in on its own, as if no scope were watching. */
+export declare function Unwatched({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
 /** An element that fades in when it lands, and hosts a scope for whatever lands inside it later. */
 export declare function Arriving({ children, className }: {
     children: ReactNode;

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

@@ -1,2 +1,2 @@
-export { ArrivalScope, Arriving } from './arrival';
+export { ArrivalScope, Arriving, Continuing, Unwatched } from './arrival';
 export { useArriving, useWatched } from './use-watched';

package/dist/src/ds/components/DataList/TracesDataList/traces-data-list-cells.d.ts

@@ -26,3 +26,15 @@ export interface TracesDataListStatusCellProps {
     status?: string | null;
 }
 export declare function TracesDataListStatusCell({ status }: TracesDataListStatusCellProps): import("react").JSX.Element;
+export interface TracesDataListOutcomeCellProps {
+    outcome?: string | null;
+    /** Error-based status, shown when no outcome was recorded. */
+    status?: string | null;
+}
+export declare function TracesDataListOutcomeCell({ outcome, status }: TracesDataListOutcomeCellProps): import("react").JSX.Element;
+export interface TracesDataListStopReasonCellProps {
+    stopReason?: string | null;
+    /** Listed as key/value pairs when hovering the stop reason. */
+    stopReasonContext?: Record<string, unknown> | null;
+}
+export declare function TracesDataListStopReasonCell({ stopReason, stopReasonContext }: TracesDataListStopReasonCellProps): import("react").JSX.Element;

package/dist/src/ds/components/DataList/TracesDataList/traces-data-list.d.ts

@@ -8,7 +8,7 @@ import { DataListSpacer } from '../data-list-spacer';
 import { DataListSubHeading } from '../data-list-subheading';
 import { DataListTop } from '../data-list-top';
 import { DataListTopCellWithTooltip } from '../data-list-top-cell';
-import { TracesDataListNameCell, TracesDataListInputCell, TracesDataListOutputCell, TracesDataListTypeCell, TracesDataListStatusCell } from './traces-data-list-cells';
+import { TracesDataListNameCell, TracesDataListInputCell, TracesDataListOutputCell, TracesDataListTypeCell, TracesDataListStatusCell, TracesDataListOutcomeCell, TracesDataListStopReasonCell } from './traces-data-list-cells';
 declare function TracesDataListRoot(props: ComponentProps<typeof DataListRoot>): import("react").JSX.Element;
 export declare const TracesDataList: typeof TracesDataListRoot & {
     Top: typeof DataListTop;
@@ -32,6 +32,8 @@ export declare const TracesDataList: typeof TracesDataListRoot & {
     OutputCell: typeof TracesDataListOutputCell;
     TypeCell: typeof TracesDataListTypeCell;
     StatusCell: typeof TracesDataListStatusCell;
+    OutcomeCell: typeof TracesDataListOutcomeCell;
+    StopReasonCell: typeof TracesDataListStopReasonCell;
     NextPageLoading: typeof DataListNextPageLoading;
 };
 export {};

package/dist/src/ds/components/FilterBar/types.d.ts

@@ -51,6 +51,8 @@ export type FilterBarField = {
     type?: FilterBarFieldType;
     /** Operator ids allowed for this field. Defaults to every root operator. */
     operators?: string[];
+    /** Field-specific labels for operators, keyed by operator id (e.g. `notExists` → `is not recorded`). */
+    operatorLabels?: Record<string, string>;
     /**
      * Optional value suggestions. Absent → free text.
      * - array: static list, filtered locally by the query.

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

@@ -1,3 +1,3 @@
 export { MetricsCard } from './metrics-card';
-export type { MetricsCardTabsProps } from './metrics-card-tabs';
 export type { MetricsCardTitleMenuProps } from './metrics-card-title-menu';
+export type { MetricsCardTotalPart } from './metrics-card-total';

package/dist/src/ds/components/MetricsCard/metrics-card-actions.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 /** Container for icon buttons / small actions in the top bar of a MetricsCard,
- *  placed between `TitleAndDescription` and `Summary` (which always renders last). */
+ *  placed between the title and `Total` (which always renders last). Small (28px) buttons sit
+ *  centered on the 20px title line without making the top bar taller. */
 export declare function MetricsCardActions({ children, reveal, className, }: {
     children: ReactNode;
     /**

package/dist/src/ds/components/MetricsCard/metrics-card-headline.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The header of a card with one large chart (an explorer, a detail page): the label over a large
+ * value, the change against the previous period beside it. Cards in a grid use the compact title
+ * and `MetricsCard.Total` instead. A skeleton while loading, in the value's own line box.
+ */
+export declare function MetricsCardHeadline({ label, value, change, isLoading, className, }: {
+    label: string;
+    value: string;
+    /** E.g. "+71.4%"; shown as "+71.4% vs previous". */
+    change?: string;
+    isLoading?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/src/ds/components/MetricsCard/metrics-card-title-menu.d.ts

@@ -11,5 +11,7 @@ export type MetricsCardTitleMenuProps<V extends string> = {
 /**
  * A card title that switches the card's view, as on Vercel's usage cards: the title is the
  * trigger, with a chevron. The hover fill bleeds past the text so the title stays aligned.
+ * Wrapped, so the top bar stretches the wrapper rather than the button, and the menu's open-state
+ * nodes next to the trigger don't become the top bar's first child.
  */
 export declare function MetricsCardTitleMenu<V extends string>({ title, value, onValueChange, options, className, }: MetricsCardTitleMenuProps<V>): import("react").JSX.Element;

package/dist/src/ds/components/MetricsCard/metrics-card-title.d.ts

@@ -1,7 +1,5 @@
-export declare function MetricsCardTitle({ children, className, as: Tag, weight, }: {
+export declare function MetricsCardTitle({ children, className, as: Tag, }: {
     children: string;
     className?: string;
     as?: 'h2' | 'h3' | 'h4';
-    /** `medium` for compact cards, where the title stands alone without a description. */
-    weight?: 'regular' | 'medium';
 }): import("react").JSX.Element;

package/dist/src/ds/components/MetricsCard/metrics-card-toolbar.d.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
 /**
- * One row under the top bar for a card's controls: small tabs, a legend, list column headers.
+ * One row under the top bar for a card's controls: a legend, list column headers.
  * The first child sits on the left, the last on the right; either side may be omitted. When
- * both don't fit (a narrow card), the right side wraps to its own line, still on the right. At least as
- * tall as `MetricsCard.Tabs`, so a legend-only toolbar matches a card with tabs in the same row.
+ * both don't fit (a narrow card), the right side wraps to its own line, still on the right. At least 24px
+ * tall, so toolbars line up across cards in the same row.
  */
 export declare function MetricsCardToolbar({ children, className }: {
     children: ReactNode;

package/dist/src/ds/components/MetricsCard/metrics-card-total.d.ts

@@ -1,9 +1,17 @@
+/** One of several totals in a card that charts a few series, marked with its series' color. */
+export type MetricsCardTotalPart = {
+    label: string;
+    value: string;
+    color: string;
+};
 /**
- * A compact card's total, right of the title in the same type (14px, medium). Always the top
- * bar's last item. A skeleton while loading, in the value's own line box.
+ * A card's total, right of the title in the same type (14px, medium). Always the top
+ * bar's last item. A skeleton while loading, in the value's own line box. A card charting a
+ * few series of different things (resources, threads) can give one total each, each after a
+ * marker in its series' color, like the legend.
  */
 export declare function MetricsCardTotal({ value, isLoading, className, }: {
-    value: string;
+    value: string | readonly MetricsCardTotalPart[];
     isLoading?: boolean;
     className?: string;
 }): import("react").JSX.Element;

package/dist/src/ds/components/MetricsCard/metrics-card.d.ts

@@ -1,14 +1,11 @@
 import { MetricsCardActions } from './metrics-card-actions';
 import { MetricsCardContent } from './metrics-card-content';
-import { MetricsCardDescription } from './metrics-card-description';
 import { MetricsCardError } from './metrics-card-error';
+import { MetricsCardHeadline } from './metrics-card-headline';
 import { MetricsCardLoading } from './metrics-card-loading';
 import { MetricsCardNoData } from './metrics-card-no-data';
 import { MetricsCardRoot } from './metrics-card-root';
-import { MetricsCardSummary } from './metrics-card-summary';
-import { MetricsCardTab, MetricsCardTabs } from './metrics-card-tabs';
 import { MetricsCardTitle } from './metrics-card-title';
-import { MetricsCardTitleAndDescription } from './metrics-card-title-and-description';
 import { MetricsCardTitleMenu } from './metrics-card-title-menu';
 import { MetricsCardToolbar } from './metrics-card-toolbar';
 import { MetricsCardTopBar } from './metrics-card-top-bar';
@@ -30,15 +27,11 @@ export declare const MetricsCard: typeof MetricsCardRoot & {
     };
     TopBar: typeof MetricsCardTopBar;
     Toolbar: typeof MetricsCardToolbar;
-    Tabs: typeof MetricsCardTabs;
-    Tab: typeof MetricsCardTab;
     Actions: typeof MetricsCardActions;
-    TitleAndDescription: typeof MetricsCardTitleAndDescription;
     Title: typeof MetricsCardTitle;
     TitleMenu: typeof MetricsCardTitleMenu;
-    Description: typeof MetricsCardDescription;
-    Summary: typeof MetricsCardSummary;
     Total: typeof MetricsCardTotal;
+    Headline: typeof MetricsCardHeadline;
     Loading: typeof MetricsCardLoading;
     Error: typeof MetricsCardError;
     Content: typeof MetricsCardContent;

package/dist/src/ds/components/MetricsCard/metrics-story-data.d.ts

@@ -28,45 +28,25 @@ export declare const requestsByHour: RequestsBucket[];
 export declare const ms: (value: number) => string;
 export declare const percent: (value: number) => string;
 export declare const count: (value: number) => string;
-/** Legend aggregate: sum of a numeric key across points. */
-export declare const sumOf: (key: string) => (points: Record<string, unknown>[]) => {
-    value: string;
-};
-/** Legend aggregate: mean of a numeric key, formatted. */
-export declare const meanOf: (key: string, format: (v: number) => string) => (points: Record<string, unknown>[]) => {
-    value: string;
-};
 export declare const statusSeries: {
     dataKey: string;
     label: string;
     color: string;
-    aggregate: (points: Record<string, unknown>[]) => {
-        value: string;
-    };
 }[];
 export declare const percentileSeries: {
     dataKey: string;
     label: string;
     color: string;
-    aggregate: (points: Record<string, unknown>[]) => {
-        value: string;
-    };
 }[];
 export declare const errorRateSeries: {
     dataKey: string;
     label: string;
     color: string;
-    aggregate: (points: Record<string, unknown>[]) => {
-        value: string;
-    };
 }[];
 export declare const coldStartSeries: {
     dataKey: string;
     label: string;
     color: string;
-    aggregate: (points: Record<string, unknown>[]) => {
-        value: string;
-    };
 }[];
 export declare const routes: {
     method: string;
@@ -81,9 +61,6 @@ export declare const requestsVsPreviousSeries: ({
     label: string;
     color: string;
     emphasis: boolean;
-    aggregate: (points: Record<string, unknown>[]) => {
-        value: string;
-    };
     dashed?: undefined;
 } | {
     emphasis?: undefined;
@@ -91,9 +68,6 @@ export declare const requestsVsPreviousSeries: ({
     label: string;
     color: string;
     dashed: boolean;
-    aggregate: (points: Record<string, unknown>[]) => {
-        value: string;
-    };
 })[];
 /** Hourly timestamps of the window (ms), for building other hourly fixtures on the same grid. */
 export declare const hourTs: (h: number) => number;

package/dist/src/ds/components/MetricsKpiCard/metrics-kpi-card-root.d.ts

@@ -1,5 +1,8 @@
 import type { ReactNode } from 'react';
-export declare function MetricsKpiCardRoot({ children, className }: {
+export type MetricsKpiCardRootProps = {
     children: ReactNode;
     className?: string;
-}): import("react").JSX.Element;
+    /** The reading is loading or being replaced. */
+    busy?: boolean;
+};
+export declare function MetricsKpiCardRoot({ children, className, busy }: MetricsKpiCardRootProps): import("react").JSX.Element;

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

@@ -1,7 +1,6 @@
 import type { MetricsLineChartSeries } from './metrics-line-chart';
-export declare function MetricsLineChartLegend({ data, series, className, }: {
-    /** Rows for each series' `aggregate`; omit when no series shows one. */
-    data?: Record<string, unknown>[];
-    series: MetricsLineChartSeries[];
+/** A marker and a label per series. Totals belong in the card's header, not here. */
+export declare function MetricsLineChartLegend({ series, className, }: {
+    series: Pick<MetricsLineChartSeries, 'dataKey' | 'label' | 'color' | 'dashed'>[];
     className?: string;
 }): import("react").JSX.Element;

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

@@ -4,10 +4,6 @@ export type MetricsLineChartSeries = {
     dataKey: string;
     label: string;
     color: string;
-    aggregate?: (data: Record<string, unknown>[]) => {
-        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. */
@@ -39,10 +35,10 @@ export type MetricsLineChartProps = {
     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. */
+    /** Render a visible dot on every point. A series with a single point gets one anyway. */
     showDots?: boolean;
     /**
-     * Point markers. `auto`: on every point of a sparse series (or all with `showDots`). `hover`:
+     * Point markers. `auto`: on a series' lone point (or every point with `showDots`). `hover`:
      * none at rest, only the hovered point's.
      */
     dots?: 'auto' | 'hover';

package/dist/src/ds/components/SavedViews/saved-view-editor.d.ts

@@ -2,7 +2,9 @@ import type { ReactNode } from 'react';
 import type { SavedViewsController } from './use-saved-views';
 export type SavedViewEditorProps<TSettings> = {
     views: SavedViewsController<TSettings>;
+    /** Shown next to the save button of a new view, e.g. where it is saved ("Saved in this browser"). */
+    saveCaption?: ReactNode;
     children?: ReactNode;
     className?: string;
 };
-export declare function SavedViewEditor<TSettings>({ views, children, className }: SavedViewEditorProps<TSettings>): import("react").JSX.Element;
+export declare function SavedViewEditor<TSettings>({ views, saveCaption, children, className, }: SavedViewEditorProps<TSettings>): import("react").JSX.Element;

package/dist/src/ds/components/SavedViews/saved-view-picker.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { SavedView } from './saved-view-schema';
+import type { SavedViewsController } from './use-saved-views';
+export type SavedViewPickerProps<TSettings> = {
+    views: SavedViewsController<TSettings>;
+    /** Names the page's unfiltered state, e.g. "All traces". */
+    defaultLabel: string;
+    newViewSettings: NoInfer<TSettings>;
+    /** Muted text after a view in the list, e.g. "Shared". */
+    describeView?: (view: SavedView<TSettings>) => ReactNode;
+    /** Whether a view can be renamed, deleted or overwritten. Others can still be applied and duplicated. */
+    canEdit?: (view: SavedView<TSettings>) => boolean;
+    'aria-label'?: string;
+    className?: string;
+};
+/**
+ * A compact saved-views control for a page header: a searchable view picker, the active view's
+ * actions, and save / reset once the page differs from the view. Driven by the same controller
+ * as `SavedViewTabs`.
+ */
+export declare function SavedViewPicker<TSettings>({ views, defaultLabel, newViewSettings, describeView, canEdit, 'aria-label': ariaLabel, className, }: SavedViewPickerProps<TSettings>): import("react").JSX.Element;

package/dist/src/ds/components/SavedViews/use-saved-views.d.ts

@@ -20,7 +20,10 @@ export type SavedViewsController<TSettings> = {
     activeView: SavedView<TSettings> | undefined;
     draft: SavedViewDraft<TSettings> | undefined;
     unsaved: boolean;
-    storageError: string | undefined;
+    /** A failed save, rename, duplicate or delete, shown under the tabs. */
+    error: string | undefined;
+    /** A change is being saved; the save actions are disabled until it settles. */
+    pending?: boolean;
     applied: SavedViewContent<TSettings> | undefined;
     select: (viewId: string | undefined) => void;
     create: (settings: TSettings, filters?: FilterBarItem[]) => void;
@@ -28,7 +31,8 @@ export type SavedViewsController<TSettings> = {
     change: (patch: SavedViewDraftChange<TSettings>) => void;
     save: () => void;
     discard: () => void;
-    rename: (viewId: string, name: string) => void;
+    /** Resolves true once the view has the new name; false leaves the error in `error`. */
+    rename: (viewId: string, name: string) => boolean | Promise<boolean>;
     duplicate: (viewId: string) => void;
     remove: (viewId: string) => void;
 };

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

@@ -17,12 +17,19 @@ export declare const ActivityTrigger: ({ className, children, ...props }: Compon
 export declare const ActivityHeader: ({ className, children, ...props }: ComponentProps<'span'>) => import("react").JSX.Element;
 export declare const ActivityLeading: ({ className, children, ...props }: ComponentProps<'span'>) => import("react").JSX.Element | null;
 export declare const ActivityIcon: ({ className, ...props }: ComponentProps<'span'>) => import("react").JSX.Element;
-export declare const ActivityLabel: ({ className, ...props }: ComponentProps<typeof Txt>) => import("react").JSX.Element;
+export interface ActivityLabelProps extends ComponentProps<typeof Txt> {
+    wrap?: boolean;
+}
+export declare const ActivityLabel: ({ wrap, className, ...props }: ActivityLabelProps) => import("react").JSX.Element;
+/** Paths under the agent's working directory read relative to it, the way the agent itself refers to them. */
+export declare function ActivityWorkingDirectory({ path, children }: {
+    path: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
 export interface ActivityDetailProps extends Omit<ComponentProps<typeof Txt>, 'font'> {
-    font?: 'mono' | 'sans';
     wrap?: boolean;
 }
-export declare const ActivityDetail: ({ font, wrap, className, ...props }: ActivityDetailProps) => import("react").JSX.Element;
+export declare const ActivityDetail: ({ wrap, className, children, ...props }: ActivityDetailProps) => import("react").JSX.Element;
 export declare const ActivitySummary: ({ className, ...props }: ComponentProps<'span'>) => import("react").JSX.Element;
 export interface ActivitySpacerProps extends ComponentProps<'span'> {
     rule?: boolean;
@@ -36,11 +43,10 @@ export interface ActivityHeadlineProps extends Omit<ComponentProps<typeof Activi
     label: ReactNode;
     detail?: string;
     description?: string;
-    detailFont?: ActivityDetailProps['font'];
     wrapDetail?: boolean;
     badges?: ReactNode;
 }
-export declare const ActivityHeadline: ({ leading, icon, label, detail, description, detailFont, wrapDetail, badges, ...props }: ActivityHeadlineProps) => import("react").JSX.Element;
+export declare const ActivityHeadline: ({ leading, icon, label, detail, description, wrapDetail, badges, ...props }: ActivityHeadlineProps) => import("react").JSX.Element;
 export interface ActivityContentProps extends ComponentProps<typeof CollapsibleContent> {
     /** Drop the rail and its indent, so the content lines up with the text around the line. */
     flush?: boolean;
@@ -50,11 +56,10 @@ export interface ActivityItemProps extends Omit<ActivityProps, 'children' | 'ope
     icon: ReactNode;
     label: string;
     detail?: string;
-    detailFont?: ActivityDetailProps['font'];
     badges?: ReactNode;
     collapsible?: boolean;
     children?: ReactNode;
     'aria-label': string;
 }
-export declare function ActivityItem({ icon, label, detail, detailFont, badges, collapsible, children, ...props }: ActivityItemProps): import("react").JSX.Element;
+export declare function ActivityItem({ icon, label, detail, badges, collapsible, children, ...props }: ActivityItemProps): import("react").JSX.Element;
 export type { ActivityAppearance, ActivityStatus };

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

@@ -4,3 +4,4 @@ export * from './presets/reasoning-activity';
 export * from './presets/reasoning-text';
 export * from './presets/reasoning-visibility';
 export * from './presets/signal-activity';
+export { useRelativePaths } from './use-relative-paths';

package/dist/src/ds/components/ai/activity/presets/signal-activity.d.ts

@@ -1,3 +1,4 @@
+import type { ActivityAppearance } from '../activity';
 export interface SignalActivityProps {
     kind: 'state' | 'reactive' | 'reminder';
     label: string;
@@ -5,5 +6,7 @@ export interface SignalActivityProps {
     detail?: string;
     mode?: string;
     defaultOpen?: boolean;
+    /** `inline` reads like the agent's own lines: their glyph, type and weight, the message as prose. */
+    appearance?: ActivityAppearance;
 }
-export declare function SignalActivity({ kind, label, message, detail, mode, defaultOpen }: SignalActivityProps): import("react").JSX.Element;
+export declare function SignalActivity({ appearance, ...signal }: SignalActivityProps): import("react").JSX.Element;

package/dist/src/ds/components/ai/activity/use-relative-paths.d.ts

@@ -0,0 +1,3 @@
+export declare const WorkingDirectoryContext: import("react").Context<string | undefined>;
+/** Rewrites text the way `ActivityDetail` shows it, for names that must say the same thing. */
+export declare function useRelativePaths(): (text: string) => string;

package/dist/src/ds/components/ai/message-reveal/message-reveal.d.ts

@@ -16,7 +16,8 @@ export declare function revealedParts(parts: MessagePart[], shown: string): Mess
  * A message's parts as far as the reveal has laid them down. Hand the result to
  * `MessageFactory` in place of the message's own parts and the whole reply — prose,
  * reasoning, tool rows, cards — arrives at the pace it was written, from one clock,
- * without a renderer having to know a reveal is running.
+ * without a renderer having to know a reveal is running. Once fully revealed it returns
+ * the caller's own `parts` array, so `result === parts` means the reveal has settled.
  */
 export declare function useRevealedParts(parts: MessagePart[], streaming: boolean): MessagePart[];
 export {};

package/dist/src/ds/components/ai/tool-call/tool-presentation.d.ts

@@ -1,5 +1,9 @@
 import type { LucideIcon } from 'lucide-react';
+import type { AgentIndicatorState } from '../../AgentIndicator';
 export interface ToolPresentation {
+    /** What the agent indicator turns into while this call runs. */
+    pose: AgentIndicatorState;
+    /** The pose held still, so the call's row and the live indicator draw the same thing. */
     icon: LucideIcon;
     /** Stable name of the kind of tool, e.g. "Run"; also groups calls by kind. */
     label: string;

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

@@ -63,6 +63,24 @@ export declare function chartYTickCount(height: number): number;
 export declare function niceYTicks(max: number, maxCount: number, integer?: boolean): number[] | undefined;
 /** Rough label width at the axis font size. */
 export declare const labelWidth: (text: string) => number;
+export type TimeTickPlacement = {
+    x: number;
+    anchor: 'start' | 'middle' | 'end';
+};
+/**
+ * Where a label goes: centred on its bucket, or pinned to the plot's edge when centring would
+ * push it out. A pinned label anchors on that edge, so it ends exactly there whatever the font's
+ * real widths (`labelWidth` is only an estimate).
+ */
+export declare function placeTimeTick({ x, index, offset, count, plotWidth, textWidth, }: {
+    x: number;
+    index: number;
+    /** Half a band (bars); 0 for points (lines). */
+    offset?: number;
+    count: number;
+    plotWidth: number;
+    textWidth: number;
+}): TimeTickPlacement;
 /**
  * Which buckets get a label: the smallest round step whose labels fit the width, on the first
  * bucket at or after each clock-aligned time (hours divisible by the step, days on local
@@ -71,3 +89,9 @@ export declare const labelWidth: (text: string) => number;
  * first and last bucket.
  */
 export declare function pickTimeTicks(timestamps: Array<number | undefined>, labels: string[], plotWidth: number, mode?: ChartXLabels): Set<number>;
+/**
+ * Date-only labels for the two ends of an `edges` axis when the hour on them says nothing: buckets
+ * shorter than a day whose first and last start at the same clock time on different days, as on
+ * rolling ranges (last 24 hours, 3 days, 7 days). Same-day or uneven ends keep their labels.
+ */
+export declare function edgeDateLabels(timestamps: Array<number | undefined>, mode: ChartXLabels): Map<number, string>;

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

@@ -16,7 +16,8 @@ export declare function timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth
 }): import("react").JSX.Element;
 /**
  * Room the y-axis labels take at most. The axis itself is as wide as its longest label, so the
- * labels line up with the card's content; this only sizes the plot for spacing the x labels.
+ * labels line up with the card's content; this only estimates the plot width for how many x
+ * labels fit. The labels themselves pin to the plot's real edges (Recharts' axis width).
  */
 export declare const Y_AXIS_WIDTH = 44;
 export declare function valueYAxis({ id, show, size, formatter, domain, max, integer, right, }: {

package/dist/src/ds/primitives/chart-time-tick.d.ts

@@ -1,6 +1,8 @@
 export type ChartTimeTickProps = {
     x?: number;
     y?: number;
+    /** The axis' drawn width, which Recharts passes to every tick: the plot's real width. */
+    width?: number;
     index?: number;
     payload?: {
         value: string;
@@ -9,11 +11,12 @@ export type ChartTimeTickProps = {
     };
     /** Buckets that print a label (from `pickTimeTicks`). */
     picked: Set<number>;
+    /** Labels that replace the bucket's own text, by index (e.g. date-only ends). */
+    labels?: Map<number, string>;
     count: number;
-    plotWidth: number;
 };
 /**
- * An x label on picked buckets only, centred on its bucket and nudged inward only as far as it
- * takes to stay inside the plot, so the chart needs no side margin.
+ * An x label on picked buckets only, centred on its bucket and pinned inside the plot at its
+ * edges, so the chart needs no side margin.
  */
-export declare function ChartTimeTick({ x, y, payload, picked, count, plotWidth }: ChartTimeTickProps): import("react").JSX.Element | null;
+export declare function ChartTimeTick({ x, y, width, payload, picked, labels, count }: ChartTimeTickProps): import("react").JSX.Element | null;

package/dist/src/lib/string.d.ts

@@ -1,2 +1,3 @@
 export declare const lodashTitleCase: (str: string) => string;
+export declare function humanize(name: string): string;
 export declare function pluralize(amount: number, singular: string, plural?: string): string;

package/dist/{string-OAgeMRQ5.js → string-CNKDIc_4.js}

@@ -2,11 +2,15 @@
 var lodashTitleCase = (str) => {
 	return str.replace(/[-_\s]+(.)?/g, (_, char) => char ? char.toUpperCase() : "").replace(/^(.)/, (char) => char.toLowerCase()).replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
 };
+function humanize(name) {
+	const words = name.replace(/[-_]+/g, " ").trim();
+	return words ? words.charAt(0).toUpperCase() + words.slice(1) : name;
+}
 var pluralRules = new Intl.PluralRules("en-US");
 var count = new Intl.NumberFormat("en-US");
 function pluralize(amount, singular, plural = `${singular}s`) {
 	return `${count.format(amount)} ${pluralRules.select(amount) === "one" ? singular : plural}`;
 }
-export { pluralize as n, lodashTitleCase as t };
+export { lodashTitleCase as n, pluralize as r, humanize as t };
 
-//# sourceMappingURL=string-OAgeMRQ5.js.map
+//# sourceMappingURL=string-CNKDIc_4.js.map

package/dist/string-CNKDIc_4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"string-CNKDIc_4.js","names":[],"sources":["../src/lib/string.ts"],"sourcesContent":["export const lodashTitleCase = (str: string): string => {\n  // First convert to camel case (handles various separators like spaces, hyphens, underscores)\n  const camelCased = str\n    .replace(/[-_\\s]+(.)?/g, (_, char) => (char ? char.toUpperCase() : ''))\n    .replace(/^(.)/, char => char.toLowerCase());\n\n  // Then convert to start case (capitalize first letter of each word)\n  return camelCased\n    .replace(/([A-Z])/g, ' $1')\n    .replace(/^./, str => str.toUpperCase())\n    .trim();\n};\n\nexport function humanize(name: string): string {\n  const words = name.replace(/[-_]+/g, ' ').trim();\n  return words ? words.charAt(0).toUpperCase() + words.slice(1) : name;\n}\n\nconst pluralRules = new Intl.PluralRules('en-US');\nconst count = new Intl.NumberFormat('en-US');\n\nexport function pluralize(amount: number, singular: string, plural = `${singular}s`): string {\n  return `${count.format(amount)} ${pluralRules.select(amount) === 'one' ? singular : plural}`;\n}\n"],"mappings":";AAAA,IAAa,mBAAmB,QAAwB;CAOtD,OALmB,IAChB,QAAQ,iBAAiB,GAAG,SAAU,OAAO,KAAK,YAAY,IAAI,EAAG,CAAC,CACtE,QAAQ,SAAQ,SAAQ,KAAK,YAAY,CAGrC,CAAA,CACJ,QAAQ,YAAY,KAAK,CAAC,CAC1B,QAAQ,OAAM,QAAO,IAAI,YAAY,CAAC,CAAC,CACvC,KAAK;AACV;AAEA,SAAgB,SAAS,MAAsB;CAC7C,MAAM,QAAQ,KAAK,QAAQ,UAAU,GAAG,CAAC,CAAC,KAAK;CAC/C,OAAO,QAAQ,MAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,MAAM,MAAM,CAAC,IAAI;AAClE;AAEA,IAAM,cAAc,IAAI,KAAK,YAAY,OAAO;AAChD,IAAM,QAAQ,IAAI,KAAK,aAAa,OAAO;AAE3C,SAAgB,UAAU,QAAgB,UAAkB,SAAS,GAAG,SAAS,IAAY;CAC3F,OAAO,GAAG,MAAM,OAAO,MAAM,EAAE,GAAG,YAAY,OAAO,MAAM,MAAM,QAAQ,WAAW;AACtF"}

package/dist/{string-CymY0aJ9.cjs → string-DdJJdCv2.cjs}

@@ -2,11 +2,21 @@
 var lodashTitleCase = (str) => {
 	return str.replace(/[-_\s]+(.)?/g, (_, char) => char ? char.toUpperCase() : "").replace(/^(.)/, (char) => char.toLowerCase()).replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
 };
+function humanize(name) {
+	const words = name.replace(/[-_]+/g, " ").trim();
+	return words ? words.charAt(0).toUpperCase() + words.slice(1) : name;
+}
 var pluralRules = new Intl.PluralRules("en-US");
 var count = new Intl.NumberFormat("en-US");
 function pluralize(amount, singular, plural = `${singular}s`) {
 	return `${count.format(amount)} ${pluralRules.select(amount) === "one" ? singular : plural}`;
 }
+Object.defineProperty(exports, "humanize", {
+	enumerable: true,
+	get: function() {
+		return humanize;
+	}
+});
 Object.defineProperty(exports, "lodashTitleCase", {
 	enumerable: true,
 	get: function() {
@@ -20,4 +30,4 @@ Object.defineProperty(exports, "pluralize", {
 	}
 });
 
-//# sourceMappingURL=string-CymY0aJ9.cjs.map
+//# sourceMappingURL=string-DdJJdCv2.cjs.map

package/dist/string-DdJJdCv2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"string-DdJJdCv2.cjs","names":[],"sources":["../src/lib/string.ts"],"sourcesContent":["export const lodashTitleCase = (str: string): string => {\n  // First convert to camel case (handles various separators like spaces, hyphens, underscores)\n  const camelCased = str\n    .replace(/[-_\\s]+(.)?/g, (_, char) => (char ? char.toUpperCase() : ''))\n    .replace(/^(.)/, char => char.toLowerCase());\n\n  // Then convert to start case (capitalize first letter of each word)\n  return camelCased\n    .replace(/([A-Z])/g, ' $1')\n    .replace(/^./, str => str.toUpperCase())\n    .trim();\n};\n\nexport function humanize(name: string): string {\n  const words = name.replace(/[-_]+/g, ' ').trim();\n  return words ? words.charAt(0).toUpperCase() + words.slice(1) : name;\n}\n\nconst pluralRules = new Intl.PluralRules('en-US');\nconst count = new Intl.NumberFormat('en-US');\n\nexport function pluralize(amount: number, singular: string, plural = `${singular}s`): string {\n  return `${count.format(amount)} ${pluralRules.select(amount) === 'one' ? singular : plural}`;\n}\n"],"mappings":";AAAA,IAAa,mBAAmB,QAAwB;CAOtD,OALmB,IAChB,QAAQ,iBAAiB,GAAG,SAAU,OAAO,KAAK,YAAY,IAAI,EAAG,CAAC,CACtE,QAAQ,SAAQ,SAAQ,KAAK,YAAY,CAGrC,CAAA,CACJ,QAAQ,YAAY,KAAK,CAAC,CAC1B,QAAQ,OAAM,QAAO,IAAI,YAAY,CAAC,CAAC,CACvC,KAAK;AACV;AAEA,SAAgB,SAAS,MAAsB;CAC7C,MAAM,QAAQ,KAAK,QAAQ,UAAU,GAAG,CAAC,CAAC,KAAK;CAC/C,OAAO,QAAQ,MAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,MAAM,MAAM,CAAC,IAAI;AAClE;AAEA,IAAM,cAAc,IAAI,KAAK,YAAY,OAAO;AAChD,IAAM,QAAQ,IAAI,KAAK,aAAa,OAAO;AAE3C,SAAgB,UAAU,QAAgB,UAAkB,SAAS,GAAG,SAAS,IAAY;CAC3F,OAAO,GAAG,MAAM,OAAO,MAAM,EAAE,GAAG,YAAY,OAAO,MAAM,MAAM,QAAQ,WAAW;AACtF"}