@mastra/playground-ui 58.1.0-alpha.0 → 59.0.0

package/dist/src/domains/metrics/components/kpi-card-view.d.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 export interface KpiCardViewProps {
     label: string;
-    value: string | null;
+    value: ReactNode;
     prevValue?: string;
     changePct?: number | null;
     isLoading: boolean;

package/dist/src/domains/metrics/components/metrics-utils.d.ts

@@ -1,5 +1,3 @@
-export declare function formatCompact(n: number): string;
-export declare function formatCost(value: number, unit?: string | null): string;
 export declare const METRICS_DATA_LIST_PROPS: {
     className: string;
     mask: {

package/dist/src/domains/traces/components/trace-columns-menu.d.ts

@@ -4,6 +4,8 @@ type TraceColumnsMenuProps = {
     /** Top-level metadata keys observed on traces in the current time range, offered in the picker. */
     availableMetadataKeys?: readonly string[];
     usageDisabledReason?: string;
+    /** When false (server without the trace-query API), metadata columns can't be added. Defaults to true. */
+    withQueryTrace?: boolean;
     onToggleColumn: (column: TraceOptionalColumn) => void;
     onAddCustomColumn: (field: TraceCustomColumn) => void;
     onRemoveCustomColumn: (field: TraceCustomColumn) => void;
@@ -11,5 +13,5 @@ type TraceColumnsMenuProps = {
     onRemoveMetadataColumn: (key: string) => void;
     onReset: () => void;
 };
-export declare function TraceColumnsMenu({ preferences, availableMetadataKeys, usageDisabledReason, onToggleColumn, onAddCustomColumn, onRemoveCustomColumn, onAddMetadataColumn, onRemoveMetadataColumn, onReset, }: TraceColumnsMenuProps): import("react").JSX.Element;
+export declare function TraceColumnsMenu({ preferences, availableMetadataKeys, usageDisabledReason, withQueryTrace, onToggleColumn, onAddCustomColumn, onRemoveCustomColumn, onAddMetadataColumn, onRemoveMetadataColumn, onReset, }: TraceColumnsMenuProps): import("react").JSX.Element;
 export {};

package/dist/src/domains/traces/components/trace-data-panel-view.stories.d.ts

@@ -20,7 +20,7 @@ declare const meta: {
         initialSpanId?: string | null | undefined;
         onPrevious?: (() => void) | undefined;
         onNext?: (() => void) | undefined;
-        size?: "md" | "full" | "half" | "wide" | undefined;
+        size?: "md" | "half" | "wide" | "full" | undefined;
         depth?: 3 | 1 | 2 | undefined;
         headerSlot?: import('react').ReactNode;
         title?: string | undefined;

package/dist/src/domains/traces/hooks/index.d.ts

@@ -8,6 +8,7 @@ export { useTraceSearch, type UseTraceSearchResult } from './use-trace-search';
 export { useTraceSpans } from './use-trace-spans';
 export { useTraces } from './use-traces';
 export { useTraceQuery, type UseTraceQueryArgs, type UseTraceQueryReturn, type TraceQueryArgs, } from './use-trace-query';
+export { useTracesListSource, type UseTracesListSourceArgs } from './use-traces-list-source';
 export { useTags } from './use-tags';
 export { useTraceMetadataFilterFields, type TraceMetadataFilterField, type TraceQueryDiscoveryTimeRange, } from './use-trace-metadata-filter-fields';
 export { useEntityNames } from './use-entity-names';

package/dist/src/domains/traces/hooks/use-trace-query.d.ts

@@ -1,6 +1,10 @@
-import { QueryTracesKeysetInput, TraceQueryKeysetTraceResponse } from '@mastra/client-js';
+import { MastraClient, QueryTracesKeysetInput, TraceQueryKeysetTraceResponse } from '@mastra/client-js';
+import { buildTraceListFilters } from '../trace-filters';
 export declare const TRACE_QUERY_PER_PAGE = 25;
 type TraceQueryTrace = TraceQueryKeysetTraceResponse['traces'][number];
+type LegacyTraceListFilters = ReturnType<typeof buildTraceListFilters>;
+type ListTracesLightResponse = Awaited<ReturnType<MastraClient['listTracesLight']>>;
+type LightSpanRecord = ListTracesLightResponse['spans'][number];
 export type TraceQueryArgs = Omit<QueryTracesKeysetInput, 'page' | 'pagination'>;
 export interface UseTraceQueryArgs {
     query: TraceQueryArgs | undefined;
@@ -8,6 +12,10 @@ export interface UseTraceQueryArgs {
     enabled?: boolean;
     refetchInterval?: number | false;
     refetchOnWindowFocus?: boolean;
+    /** When false, lists traces through the legacy `listTracesLight` endpoint instead of the trace-query API. */
+    withQueryTrace?: boolean;
+    /** Filters for the legacy endpoint, as built by `buildTraceListFilters`. Only read when `withQueryTrace` is false. */
+    legacyFilters?: LegacyTraceListFilters;
 }
 export interface UseTraceQueryReturn {
     data: TraceQueryTrace[] | undefined;
@@ -27,6 +35,15 @@ export declare function getTraceQueryNextPageParam(lastPage: TraceQueryKeysetTra
 export declare function selectTraceQueryTraces(data: {
     pages: TraceQueryKeysetTraceResponse[];
 }): TraceQueryTrace[];
+/** Maps a legacy light root span to a trace-query row. The light record carries no
+ *  thread/resource/environment, so those stay null. Running spans have no `endedAt` and may carry a
+ *  status outside the query API's enum; both are kept as-is (the list view handles them), hence the
+ *  assertion at this compatibility boundary. */
+export declare function lightSpanToTraceQueryTrace(span: LightSpanRecord): TraceQueryTrace;
+export declare function selectLegacyTraceQueryTraces(data: {
+    pages: ListTracesLightResponse[];
+}): TraceQueryTrace[];
+export declare function getLegacyTraceQueryNextPageParam(lastPage: ListTracesLightResponse): number | undefined;
 /** Queries traces with cursor pagination and viewport-driven loading. */
-export declare function useTraceQuery({ query, limit, enabled, refetchInterval, refetchOnWindowFocus, }: UseTraceQueryArgs): UseTraceQueryReturn;
+export declare function useTraceQuery({ query, limit, enabled, refetchInterval, refetchOnWindowFocus, withQueryTrace, legacyFilters, }: UseTraceQueryArgs): UseTraceQueryReturn;
 export {};

package/dist/src/domains/traces/hooks/use-traces-list-source.d.ts

@@ -0,0 +1,46 @@
+import { TraceQueryArgs, UseTraceQueryArgs } from './use-trace-query';
+export interface UseTracesListSourceArgs {
+    query: (now: Date) => TraceQueryArgs;
+    orderBy?: TraceQueryArgs['orderBy'];
+    rolling?: boolean;
+    initialAutoRefetch?: boolean;
+    withQueryTrace?: boolean;
+    legacyFilters?: UseTraceQueryArgs['legacyFilters'];
+    enabled?: boolean;
+}
+export declare function useTracesListSource({ query: buildQuery, orderBy, rolling, initialAutoRefetch, withQueryTrace, legacyFilters, enabled, }: UseTracesListSourceArgs): {
+    rows: import('..').TracesListViewTrace[];
+    autoRefetch: boolean;
+    setAutoRefetch: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    data: {
+        traceId: string;
+        rootSpanId: string;
+        name: string;
+        entityId: string | null;
+        parentSpanId: string | null;
+        createdAt: string;
+        metadata: {
+            [x: string]: unknown;
+        } | null;
+        inputPreview: string | null;
+        threadId: string | null;
+        resourceId: string | null;
+        startedAt: string;
+        endedAt: string;
+        entityName: string | null;
+        entityType: string | null;
+        environment: string | null;
+        status: "success" | "error";
+    }[] | undefined;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+    fetchNextPage: () => void;
+    isLoading: boolean;
+    isFetching: boolean;
+    isRefetching: boolean;
+    fetchStatus: "idle" | "fetching" | "paused";
+    isError: boolean;
+    error: Error | null;
+    refetch: () => void;
+    setEndOfListElement: (node: HTMLDivElement | null) => void;
+};

package/dist/src/domains/traces/trace-filters.d.ts

@@ -136,7 +136,7 @@ export declare const traceFilterFieldColor: (fieldId: string) => string;
  *  `running` status, so no chip advertises a filter that has no effect. Hidden
  *  fields are never offered in the input's field step but still label existing
  *  (e.g. scoped, read-only) chips. */
-export declare function createTraceFilterBarFields({ availableRootEntityNames, availableEnvironments, hiddenFieldIds, metadataFields, valueSuggestions, }: {
+export declare function createTraceFilterBarFields({ availableRootEntityNames, availableEnvironments, hiddenFieldIds, metadataFields, valueSuggestions, withQueryTrace, }: {
     availableRootEntityNames: string[];
     availableEnvironments: string[];
     hiddenFieldIds?: readonly string[];
@@ -144,6 +144,11 @@ export declare function createTraceFilterBarFields({ availableRootEntityNames, a
     metadataFields?: readonly TraceMetadataFilterField[];
     /** Builds a lazy value resolver for a related-scope field (`spans.model`, …). Absent → free text. */
     valueSuggestions?: (scope: TraceQueryRelatedScope, path: string) => FilterBarSuggestionsResolver;
+    /**
+     * When false, only fields the legacy list endpoint (`buildTraceListFilters`) can express are offered, each with
+     * the `is` operator only: no related-scope (`spans.*`, `scores.*`, `feedback.*`) or metadata fields.
+     */
+    withQueryTrace?: boolean;
 }): FilterBarField[];
 /** One FilterBar item per token, keyed by field id so chip order == URL order.
  *  Empty values ('' / []) are kept: that's a pending chip whose field was just

package/dist/src/domains/traces/utils/index.d.ts

@@ -2,4 +2,4 @@ export { filterSpansKeepingAncestors } from './filter-spans-keeping-ancestors';
 export { flattenToSearchText } from './flatten-to-search-text';
 export { selectSearchableSpans, toSearchableSpans } from './to-searchable-spans';
 export { getSpanTimingLayout, type SpanTimingLayout } from './span-timing';
-export { formatSpanDuration, getInputPreview, isTokenLimitExceeded, getTokenLimitMessage } from './span-utils';
+export { getSpanDurationMs, getInputPreview, isTokenLimitExceeded, getTokenLimitMessage } from './span-utils';

package/dist/src/domains/traces/utils/span-utils.d.ts

@@ -1,10 +1,5 @@
 import { SpanRecord } from '../types';
-export declare function formatSpanDuration(startedAt: Date | string | null | undefined, endedAt: Date | string | null | undefined): string | undefined;
-export declare function formatSpanDurationExact(startedAt: Date | string | null | undefined, endedAt: Date | string | null | undefined): string | undefined;
-/** `X.XXX s`, matching the timeline timing column. */
-export declare function formatSpanDurationSeconds(startedAt: Date | string | null | undefined, endedAt: Date | string | null | undefined): string | undefined;
-export declare function formatSpanTimestamp(value: Date | string | null | undefined): string | undefined;
-export declare function formatSpanTimestampExact(value: Date | string | null | undefined): string | undefined;
+export declare function getSpanDurationMs(startedAt: Date | string | null | undefined, endedAt: Date | string | null | undefined): number | undefined;
 /**
  * Extract a truncated text preview from a span's input field.
  * Agent traces store `input` as an array of message objects.

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

@@ -26,11 +26,11 @@ export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps &
 export type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
 export declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
 declare const cardContentVariants: (props?: ({
-    density?: "default" | "compact" | null | undefined;
+    density?: "compact" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type CardContentProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardContentVariants>;
 export declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    density?: "default" | "compact" | null | undefined;
+    density?: "compact" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
 export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
 export declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/ds/components/CompactNumber/compact-number.d.ts

@@ -0,0 +1,6 @@
+import { CompactNumberFormatOptions } from '../../../lib/cost';
+export interface CompactNumberProps extends CompactNumberFormatOptions {
+    value: number;
+    className?: string;
+}
+export declare function CompactNumber({ value, currency, className }: CompactNumberProps): import("react").JSX.Element;

package/dist/src/ds/components/CompactNumber/compact-number.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { CompactNumber } from './compact-number';
+declare const meta: Meta<typeof CompactNumber>;
+export default meta;
+type Story = StoryObj<typeof CompactNumber>;
+export declare const Default: Story;
+export declare const Money: Story;

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

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

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

@@ -39,12 +39,13 @@ export type DataListNumberCellProps = DataListCellProps & {
      * primary metric in a row (e.g. a total or headline number).
      */
     highlight?: boolean;
+    font?: 'sans' | 'mono';
 };
 /**
  * Right-aligned numeric cell with tabular figures, for metric and summary
  * tables. Pass `highlight` for the emphasized column.
  */
-export declare function DataListNumberCell({ children, className, highlight, ...rest }: DataListNumberCellProps): import("react").JSX.Element;
+export declare function DataListNumberCell({ children, className, highlight, font, ...rest }: DataListNumberCellProps): import("react").JSX.Element;
 export interface DataListIdCellProps {
     id: string;
 }
@@ -65,12 +66,12 @@ export declare function DataListSelectCell({ checked, onToggle, disabled, ...res
 export interface DataListDateCellProps {
     timestamp: Date | string;
 }
-/** Compact date cell — `Today` or `MMM dd` (e.g. `May 19`). */
+/** Compact date cell — `Today`, `May 19` or `May 19, 2025`. */
 export declare function DataListDateCell({ timestamp }: DataListDateCellProps): import("react").JSX.Element;
 export interface DataListCreatedCellProps {
     timestamp: Date | string;
 }
-/** Compact date + time cell — always `MMM d HH:mm:ss` (e.g. `Aug 31 13:07:47`), 24h, no milliseconds. */
+/** Locale-aware date and time cell with second precision. */
 export declare function DataListCreatedCell({ timestamp }: DataListCreatedCellProps): import("react").JSX.Element;
 export interface DataListTimeCellProps {
     timestamp: Date | string;

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

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

package/dist/src/ds/components/InlineCode/inline-code.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export type InlineCodeProps = HTMLAttributes<HTMLElement>;
+export declare const InlineCode: ({ className, ...props }: InlineCodeProps) => import("react").JSX.Element;

package/dist/src/ds/components/InlineCode/inline-code.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { InlineCode } from './inline-code';
+declare const meta: Meta<typeof InlineCode>;
+export default meta;
+type Story = StoryObj<typeof InlineCode>;
+export declare const Default: Story;
+/**
+ * Inline code takes the size of the text around it, so one component works in body copy,
+ * captions, and table cells.
+ */
+export declare const InText: Story;
+/** Code that runs past one line is a highlighted `CodeBlock`, not inline code. */
+export declare const WithCodeBlock: Story;

package/dist/src/ds/components/ItemList/item-list-date-cell.d.ts

@@ -1,6 +1,7 @@
+import { DatePreset } from '../../../utils/date-format';
 export type ItemListDateCellProps = {
     date: Date | string | null;
     className?: string;
-    withTime?: boolean;
+    preset?: DatePreset;
 };
-export declare function ItemListDateCell({ date, className, withTime }: ItemListDateCellProps): import("react").JSX.Element;
+export declare function ItemListDateCell({ date, className, preset }: ItemListDateCellProps): import("react").JSX.Element;

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

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

package/dist/src/ds/components/RelativeTimestamp/relative-timestamp.d.ts

@@ -0,0 +1,6 @@
+import { DateInput } from '../../../utils/date-format';
+export interface RelativeTimestampProps {
+    value: DateInput;
+    className?: string;
+}
+export declare function RelativeTimestamp({ value, className }: RelativeTimestampProps): import("react").JSX.Element | null;

package/dist/src/ds/components/RelativeTimestamp/relative-timestamp.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { RelativeTimestamp } from './relative-timestamp';
+declare const meta: Meta<typeof RelativeTimestamp>;
+export default meta;
+type Story = StoryObj<typeof RelativeTimestamp>;
+export declare const Default: Story;
+export declare const Scale: Story;

package/dist/src/ds/components/StatusIndicators/status-dot-styles.d.ts

@@ -1,5 +1,5 @@
-export type StatusTone = 'success' | 'progress' | 'error' | 'idle' | 'neutral';
-export type StatusDotGlyph = 'circle' | 'square' | 'dashed';
+export type StatusTone = 'success' | 'progress' | 'error' | 'neutral';
+export type StatusDotGlyph = 'filled' | 'ring';
 export type StatusPresentation = {
     label: string;
     tone: StatusTone;
@@ -7,5 +7,34 @@ export type StatusPresentation = {
     description: string;
 };
 export type StatusPresentationFn<T> = (status: T | null) => StatusPresentation;
+export type DeployState = 'ready' | 'building' | 'idle' | 'queued' | 'stopped' | 'error';
+export declare const deployStates: {
+    ready: {
+        label: string;
+        tone: "success";
+    };
+    building: {
+        label: string;
+        tone: "progress";
+    };
+    idle: {
+        label: string;
+        tone: "neutral";
+        glyph: "ring";
+    };
+    queued: {
+        label: string;
+        tone: "neutral";
+        glyph: "ring";
+    };
+    stopped: {
+        label: string;
+        tone: "neutral";
+    };
+    error: {
+        label: string;
+        tone: "error";
+    };
+};
 export declare function statusToneFill(tone: StatusTone): string;
 export declare function statusDotClass({ tone, glyph }: Pick<StatusPresentation, 'tone' | 'glyph'>, className?: string): string;

package/dist/src/ds/components/StatusIndicators/status-dot.stories.d.ts

@@ -1,9 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { StatusDot } from './status-dot';
-declare const STATUSES: readonly ["success", "progress", "error", "idle", "stopped", "unknown"];
-type StoryStatus = (typeof STATUSES)[number];
-declare const meta: Meta<typeof StatusDot<StoryStatus>>;
+import { DeployState } from './status-dot-styles';
+declare const meta: Meta<typeof StatusDot<DeployState>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Tones: Story;
+export declare const States: Story;

package/dist/src/ds/components/StatusIndicators/status.d.ts

@@ -1,7 +1,6 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { StatusPresentation } from './status-dot-styles';
 export type StatusProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {
     presentation: StatusPresentation;
-    children?: ReactNode;
 };
-export declare function Status({ presentation, children, className, ...props }: StatusProps): import("react").JSX.Element;
+export declare function Status({ presentation, className, ...props }: StatusProps): import("react").JSX.Element;

package/dist/src/ds/components/StatusIndicators/status.stories.d.ts

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof Status>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const TextSlot: Story;
+export declare const Inherited: Story;
+export declare const InContext: Story;

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

@@ -5,12 +5,16 @@ export interface TxtProps extends HTMLAttributes<HTMLDivElement | HTMLLabelEleme
     ref?: Ref<HTMLElement>;
     variant?: TextRole;
     tone?: keyof typeof tones;
-    font?: 'mono';
+    font?: keyof typeof fonts;
     htmlFor?: string;
     className?: string;
     title?: string;
     children?: ReactNode;
 }
+declare const fonts: {
+    body: string;
+    mono: string;
+};
 declare const tones: {
     ink: string;
     muted: string;

package/dist/src/ds/new/settings/settings-row.d.ts

@@ -6,10 +6,12 @@ export type SettingsRowProps = Omit<ComponentProps<'div'>, 'children'> & {
     children?: ReactNode;
     tone?: 'default' | 'destructive';
     viewOnly?: boolean;
+    required?: boolean;
+    errorMsg?: ReactNode;
 };
 type SettingsRowLayoutProps = SettingsRowProps & {
     layout: 'factory' | 'standalone' | 'section';
 };
-export declare function SettingsRowLayout({ label, description, htmlFor, children, className, layout, tone, viewOnly, ...props }: SettingsRowLayoutProps): import("react").JSX.Element;
+export declare function SettingsRowLayout({ label, description, htmlFor, children, className, layout, tone, viewOnly, required, errorMsg, ...props }: SettingsRowLayoutProps): import("react").JSX.Element;
 export declare function SettingsRow(props: SettingsRowProps): import("react").JSX.Element;
 export {};

package/dist/src/ds/new/settings/settings.stories.d.ts

@@ -296,5 +296,6 @@ type Story = StoryObj<typeof meta>;
 export declare const General: Story;
 export declare const Connection: Story;
 export declare const Permissions: Story;
+export declare const Validation: Story;
 export declare const Page: Story;
 export declare const PageHeaderOnly: Story;

package/dist/src/hooks/stories/state/use-elapsed-time.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+declare function ElapsedTimeDemo(): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof ElapsedTimeDemo;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/hooks/use-elapsed-time.d.ts

@@ -0,0 +1,2 @@
+/** Milliseconds elapsed since `isActive` became true (or since `startTime`), refreshed every 100ms. */
+export declare function useElapsedTime(isActive: boolean, startTime?: number): number;

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

@@ -0,0 +1,6 @@
+export interface CompactNumberFormatOptions {
+    currency?: string;
+}
+export declare function formatCompactNumber(value: number, { currency }?: CompactNumberFormatOptions): string;
+export declare function formatFullNumber(value: number, { currency }?: CompactNumberFormatOptions): string;
+export declare function formatCost(value: number, unit?: string | null): string;

package/dist/src/utils/cost.d.ts

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

package/dist/src/utils/date-format.d.ts

@@ -0,0 +1,28 @@
+export type DateInput = Date | string | number | null | undefined;
+export type DatePreset = 'date' | 'date-time' | 'date-time-seconds' | 'time' | 'time-seconds' | 'relative-time';
+type FormatOptions = {
+    locale?: string;
+    now?: Date | number;
+    timeZone?: string;
+};
+export declare function toDate(value: DateInput): Date | undefined;
+/** Short absolute date without time: `Sep 24` this year, `Sep 24, 2025` otherwise. */
+export declare function formatShortDate(value: DateInput, { locale, now, timeZone }?: FormatOptions): string | undefined;
+/**
+ * Uses the browser locale unless `locale` is given.
+ * - `date`: date only; omits the year when it matches `now` in the requested timezone
+ * - `date-time`: date, year and time to minutes, including historical dates
+ * - `date-time-seconds`: date, year and time to seconds
+ * - `time`: time to minutes, without a date
+ * - `time-seconds`: time to seconds, without a date
+ * - `relative-time`: short relative label; delegates to `date` at seven days
+ */
+export declare function formatDate(value: DateInput, preset: DatePreset, options?: FormatOptions): string | undefined;
+/** Locale-aware compact date range, e.g. `Sep 2 – 5, 2026`. */
+export declare function formatDateRange(start: DateInput, end: DateInput, options?: Omit<FormatOptions, 'now'>): string | undefined;
+/** Date and time down to milliseconds, for trace debugging. `withDate: false` keeps only the time. */
+export declare function formatTimestampPrecise(value: DateInput, { locale, withDate }?: {
+    locale?: string;
+    withDate?: boolean;
+}): string | undefined;
+export {};

package/dist/src/utils/duration.d.ts

@@ -1 +1,7 @@
-export declare function formatDuration(durationMs: number): string | undefined;
+export declare function formatDuration(durationMs: number | null | undefined, { signed }?: {
+    signed?: boolean;
+}): string | undefined;
+/** Millisecond-precise duration for span timelines: `123 ms`, `1.234 s`. */
+export declare function formatDurationPrecise(durationMs: number | null | undefined): string | undefined;
+/** Live counter label with a fixed decimal so the width stays stable: `3.2s`. */
+export declare function formatElapsed(elapsedMs: number): string;

package/dist/src/utils/relative-time.d.ts

@@ -0,0 +1,7 @@
+import { DateInput } from './date-format';
+/** Short relative label (`5m ago`, `in 5m`); falls back to an absolute date beyond 7 days. */
+export declare function formatRelativeTime(value: DateInput, options?: {
+    now?: Date | number;
+    locale?: string;
+    timeZone?: string;
+}): string | undefined;

package/dist/style.css

@@ -561,6 +561,14 @@
     border-color: var(--border);
   }
 
+  :where(code, samp, pre, .font-mono) {
+    font-size-adjust: var(--font-mono-size-adjust, none);
+  }
+
+  kbd {
+    font-size-adjust: none;
+  }
+
   body {
     background-color: var(--sidebar);
     color: var(--foreground);
@@ -1643,6 +1651,10 @@
     margin-top: calc(var(--spacing) * .5);
   }
 
+  .mt-0\.75 {
+    margin-top: calc(var(--spacing) * .75);
+  }
+
   .mt-1 {
     margin-top: var(--spacing);
   }
@@ -4565,7 +4577,7 @@
     }
   }
 
-  .border-notice-destructive\/20 {
+  .border-notice-destructive, .border-notice-destructive\/20 {
     border-color: var(--color-notice-destructive);
   }
 
@@ -4585,7 +4597,7 @@
     }
   }
 
-  .border-notice-success\/20 {
+  .border-notice-success, .border-notice-success\/20 {
     border-color: var(--color-notice-success);
   }
 
@@ -4595,7 +4607,7 @@
     }
   }
 
-  .border-notice-warning\/20 {
+  .border-notice-warning, .border-notice-warning\/20 {
     border-color: var(--color-notice-warning);
   }
 
@@ -5365,7 +5377,7 @@
     }
   }
 
-  .bg-notice-info, .bg-notice-info\/20 {
+  .bg-notice-info\/20 {
     background-color: var(--color-notice-info);
   }
 
@@ -5680,6 +5692,11 @@
     mask-image: linear-gradient(#000, #000), linear-gradient(#000 40%, #0000), linear-gradient(to top, #000 40%, #0000);
   }
 
+  .box-decoration-clone {
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+
   .bg-size-\[0\%_1px\] {
     background-size: 0% 1px;
   }
@@ -10582,6 +10599,10 @@
       display: none;
     }
 
+    .sm\:inline {
+      display: inline;
+    }
+
     .sm\:inline-flex {
       display: inline-flex;
     }

package/dist/{text-field-block-DGIM1i3Z.js → text-field-block-BYPiO9h4.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { I as Input } from './input-CHghVv3k.js';
-import { F as FieldBlock, f as fieldErrorId } from './field-error-id-DyWx33Fu.js';
+import { F as FieldBlock, f as fieldErrorId } from './field-error-id-DD7OARLU.js';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 
 function TextFieldBlock({
@@ -52,4 +52,4 @@ function TextFieldBlock({
 }
 
 export { TextFieldBlock as T };
-//# sourceMappingURL=text-field-block-DGIM1i3Z.js.map
+//# sourceMappingURL=text-field-block-BYPiO9h4.js.map

package/dist/{text-field-block-DGIM1i3Z.js.map → text-field-block-BYPiO9h4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"text-field-block-DGIM1i3Z.js","sources":["../src/ds/components/FormFieldBlocks/fields/text-field-block.tsx"],"sourcesContent":["import { Input } from '../../Input';\nimport type { InputProps } from '../../Input';\nimport { FieldBlock } from '../block/field-block';\nimport type { FieldBlockErrorMsgProps } from '../block/field-block-error-msg';\nimport type { FieldBlockHelpTextProps } from '../block/field-block-help-text';\nimport type { FieldBlockLabelProps } from '../block/field-block-label';\nimport type { FieldBlockLayoutProps } from '../block/field-block-layout';\nimport { fieldErrorId } from '../block/field-error-id';\nimport { VisuallyHidden } from '@/ds/primitives/visually-hidden';\n\nexport type TextFieldBlockProps = Pick<FieldBlockLayoutProps, 'layout' | 'labelColumnWidth'> &\n  Omit<InputProps, 'name' | 'size'> & {\n    name: string;\n    labelIsHidden?: boolean;\n    label?: FieldBlockLabelProps['children'];\n    labelSize?: FieldBlockLabelProps['size'];\n    helpText?: FieldBlockHelpTextProps['children'];\n    errorMsg?: FieldBlockErrorMsgProps['children'];\n    size?: InputProps['size'];\n  };\n\nexport function TextFieldBlock({\n  name,\n  value,\n  label,\n  labelIsHidden = false,\n  labelColumnWidth,\n  helpText,\n  error,\n  errorMsg,\n  required = false,\n  disabled = false,\n  labelSize,\n  layout = 'vertical',\n  placeholder,\n  size = 'md',\n  testId,\n  className,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: TextFieldBlockProps) {\n  const describedBy =\n    [ariaDescribedBy, errorMsg ? fieldErrorId(name) : undefined].filter(Boolean).join(' ') || undefined;\n\n  return (\n    <FieldBlock.Layout layout={layout} labelColumnWidth={labelColumnWidth} className={className}>\n      {layout === 'horizontal' ? (\n        <FieldBlock.Column>\n          <FieldBlock.Label name={name} required={required} disabled={disabled} size={labelSize || 'bigger'}>\n            {labelIsHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n          </FieldBlock.Label>\n        </FieldBlock.Column>\n      ) : null}\n      <FieldBlock.Column>\n        {!labelIsHidden && layout === 'vertical' ? (\n          <FieldBlock.Label name={name} required={required} disabled={disabled} size={labelSize || 'default'}>\n            {label}\n          </FieldBlock.Label>\n        ) : null}\n        <FieldBlock.Column className=\"gap-1\">\n          <Input\n            id={`input-${name}`}\n            name={name}\n            disabled={disabled}\n            required={required}\n            value={value}\n            placeholder={placeholder}\n            data-testid={testId}\n            size={size}\n            error={error || Boolean(errorMsg)}\n            aria-describedby={describedBy}\n            {...props}\n          />\n          {helpText || errorMsg ? <FieldBlock.Message name={name} helpText={helpText} errorMsg={errorMsg} /> : null}\n        </FieldBlock.Column>\n      </FieldBlock.Column>\n    </FieldBlock.Layout>\n  );\n}\n"],"names":[],"mappings":";;;;;AAqBO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,MAAA,GAAS,UAAA;AAAA,EACT,WAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,MAAA;AAAA,EACA,SAAA;AAAA,EACA,kBAAA,EAAoB,eAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,MAAM,WAAA,GACJ,CAAC,eAAA,EAAiB,QAAA,GAAW,aAAa,IAAI,CAAA,GAAI,MAAS,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA,IAAK,MAAA;AAE5F,EAAA,4BACG,UAAA,CAAW,MAAA,EAAX,EAAkB,MAAA,EAAgB,kBAAoC,SAAA,EACpE,QAAA,EAAA;AAAA,IAAA,MAAA,KAAW,YAAA,uBACT,UAAA,CAAW,MAAA,EAAX,EACC,QAAA,kBAAA,GAAA,CAAC,UAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAAoB,UAAoB,IAAA,EAAM,SAAA,IAAa,UACtF,QAAA,EAAA,aAAA,mBAAgB,GAAA,CAAC,kBAAgB,QAAA,EAAA,KAAA,EAAM,CAAA,GAAoB,KAAA,EAC9D,CAAA,EACF,CAAA,GACE,IAAA;AAAA,oBACJ,IAAA,CAAC,UAAA,CAAW,MAAA,EAAX,EACE,QAAA,EAAA;AAAA,MAAA,CAAC,aAAA,IAAiB,MAAA,KAAW,UAAA,mBAC5B,GAAA,CAAC,WAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAAoB,QAAA,EAAoB,IAAA,EAAM,SAAA,IAAa,SAAA,EACtF,iBACH,CAAA,GACE,IAAA;AAAA,sBACJ,IAAA,CAAC,UAAA,CAAW,MAAA,EAAX,EAAkB,WAAU,OAAA,EAC3B,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,SAAS,IAAI,CAAA,CAAA;AAAA,YACjB,IAAA;AAAA,YACA,QAAA;AAAA,YACA,QAAA;AAAA,YACA,KAAA;AAAA,YACA,WAAA;AAAA,YACA,aAAA,EAAa,MAAA;AAAA,YACb,IAAA;AAAA,YACA,KAAA,EAAO,KAAA,IAAS,OAAA,CAAQ,QAAQ,CAAA;AAAA,YAChC,kBAAA,EAAkB,WAAA;AAAA,YACjB,GAAG;AAAA;AAAA,SACN;AAAA,QACC,QAAA,IAAY,2BAAW,GAAA,CAAC,UAAA,CAAW,SAAX,EAAmB,IAAA,EAAY,QAAA,EAAoB,QAAA,EAAoB,CAAA,GAAK;AAAA,OAAA,EACvG;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"text-field-block-BYPiO9h4.js","sources":["../src/ds/components/FormFieldBlocks/fields/text-field-block.tsx"],"sourcesContent":["import { Input } from '../../Input';\nimport type { InputProps } from '../../Input';\nimport { FieldBlock } from '../block/field-block';\nimport type { FieldBlockErrorMsgProps } from '../block/field-block-error-msg';\nimport type { FieldBlockHelpTextProps } from '../block/field-block-help-text';\nimport type { FieldBlockLabelProps } from '../block/field-block-label';\nimport type { FieldBlockLayoutProps } from '../block/field-block-layout';\nimport { fieldErrorId } from '../block/field-error-id';\nimport { VisuallyHidden } from '@/ds/primitives/visually-hidden';\n\nexport type TextFieldBlockProps = Pick<FieldBlockLayoutProps, 'layout' | 'labelColumnWidth'> &\n  Omit<InputProps, 'name' | 'size'> & {\n    name: string;\n    labelIsHidden?: boolean;\n    label?: FieldBlockLabelProps['children'];\n    labelSize?: FieldBlockLabelProps['size'];\n    helpText?: FieldBlockHelpTextProps['children'];\n    errorMsg?: FieldBlockErrorMsgProps['children'];\n    size?: InputProps['size'];\n  };\n\nexport function TextFieldBlock({\n  name,\n  value,\n  label,\n  labelIsHidden = false,\n  labelColumnWidth,\n  helpText,\n  error,\n  errorMsg,\n  required = false,\n  disabled = false,\n  labelSize,\n  layout = 'vertical',\n  placeholder,\n  size = 'md',\n  testId,\n  className,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: TextFieldBlockProps) {\n  const describedBy =\n    [ariaDescribedBy, errorMsg ? fieldErrorId(name) : undefined].filter(Boolean).join(' ') || undefined;\n\n  return (\n    <FieldBlock.Layout layout={layout} labelColumnWidth={labelColumnWidth} className={className}>\n      {layout === 'horizontal' ? (\n        <FieldBlock.Column>\n          <FieldBlock.Label name={name} required={required} disabled={disabled} size={labelSize || 'bigger'}>\n            {labelIsHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n          </FieldBlock.Label>\n        </FieldBlock.Column>\n      ) : null}\n      <FieldBlock.Column>\n        {!labelIsHidden && layout === 'vertical' ? (\n          <FieldBlock.Label name={name} required={required} disabled={disabled} size={labelSize || 'default'}>\n            {label}\n          </FieldBlock.Label>\n        ) : null}\n        <FieldBlock.Column className=\"gap-1\">\n          <Input\n            id={`input-${name}`}\n            name={name}\n            disabled={disabled}\n            required={required}\n            value={value}\n            placeholder={placeholder}\n            data-testid={testId}\n            size={size}\n            error={error || Boolean(errorMsg)}\n            aria-describedby={describedBy}\n            {...props}\n          />\n          {helpText || errorMsg ? <FieldBlock.Message name={name} helpText={helpText} errorMsg={errorMsg} /> : null}\n        </FieldBlock.Column>\n      </FieldBlock.Column>\n    </FieldBlock.Layout>\n  );\n}\n"],"names":[],"mappings":";;;;;AAqBO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,MAAA,GAAS,UAAA;AAAA,EACT,WAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,MAAA;AAAA,EACA,SAAA;AAAA,EACA,kBAAA,EAAoB,eAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,MAAM,WAAA,GACJ,CAAC,eAAA,EAAiB,QAAA,GAAW,aAAa,IAAI,CAAA,GAAI,MAAS,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA,IAAK,MAAA;AAE5F,EAAA,4BACG,UAAA,CAAW,MAAA,EAAX,EAAkB,MAAA,EAAgB,kBAAoC,SAAA,EACpE,QAAA,EAAA;AAAA,IAAA,MAAA,KAAW,YAAA,uBACT,UAAA,CAAW,MAAA,EAAX,EACC,QAAA,kBAAA,GAAA,CAAC,UAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAAoB,UAAoB,IAAA,EAAM,SAAA,IAAa,UACtF,QAAA,EAAA,aAAA,mBAAgB,GAAA,CAAC,kBAAgB,QAAA,EAAA,KAAA,EAAM,CAAA,GAAoB,KAAA,EAC9D,CAAA,EACF,CAAA,GACE,IAAA;AAAA,oBACJ,IAAA,CAAC,UAAA,CAAW,MAAA,EAAX,EACE,QAAA,EAAA;AAAA,MAAA,CAAC,aAAA,IAAiB,MAAA,KAAW,UAAA,mBAC5B,GAAA,CAAC,WAAW,KAAA,EAAX,EAAiB,IAAA,EAAY,QAAA,EAAoB,QAAA,EAAoB,IAAA,EAAM,SAAA,IAAa,SAAA,EACtF,iBACH,CAAA,GACE,IAAA;AAAA,sBACJ,IAAA,CAAC,UAAA,CAAW,MAAA,EAAX,EAAkB,WAAU,OAAA,EAC3B,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,SAAS,IAAI,CAAA,CAAA;AAAA,YACjB,IAAA;AAAA,YACA,QAAA;AAAA,YACA,QAAA;AAAA,YACA,KAAA;AAAA,YACA,WAAA;AAAA,YACA,aAAA,EAAa,MAAA;AAAA,YACb,IAAA;AAAA,YACA,KAAA,EAAO,KAAA,IAAS,OAAA,CAAQ,QAAQ,CAAA;AAAA,YAChC,kBAAA,EAAkB,WAAA;AAAA,YACjB,GAAG;AAAA;AAAA,SACN;AAAA,QACC,QAAA,IAAY,2BAAW,GAAA,CAAC,UAAA,CAAW,SAAX,EAAmB,IAAA,EAAY,QAAA,EAAoB,QAAA,EAAoB,CAAA,GAAK;AAAA,OAAA,EACvG;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}