@usetheo/ui 0.26.0 → 0.27.0

package/dist/components/composites/annotation-summary-group/annotation-summary-group.d.ts

@@ -0,0 +1,28 @@
+import type { AnnotationConfig } from "../annotation-input/types.js";
+/**
+ * AnnotationSummaryGroup — a collapsible group showing AGGREGATE stats over a
+ * list of annotation values for one `AnnotationConfig` (M18). Reuses the M12
+ * `AnnotationConfig` contract (DRY, ADR D2) and dispatches on `config.type`:
+ *   - continuous  → mean of the finite numeric values + count.
+ *   - categorical → count per option label + total count.
+ *   - freeform    → count of non-empty values.
+ *
+ * Controlled and pure — the consumer owns `values` (fixture or backend store);
+ * this component only summarizes. Uses a native `<details>`/`<summary>` for
+ * zero-JS collapsibility; composes `Card`/`Badge`. Zero new dependency.
+ *
+ *   <AnnotationSummaryGroup config={cfg} values={vals} label="Quality" />
+ */
+export interface AnnotationSummaryGroupProps {
+    /** The annotation config the values were collected against (reused from M12). */
+    config: AnnotationConfig;
+    /** The collected annotation values to aggregate. */
+    values: (string | number)[];
+    /** Group heading; falls back to the config type when omitted. */
+    label?: string;
+    /** Whether the group starts expanded. */
+    defaultOpen?: boolean;
+    className?: string;
+}
+declare const AnnotationSummaryGroup: import("react").ForwardRefExoticComponent<AnnotationSummaryGroupProps & import("react").RefAttributes<HTMLDetailsElement>>;
+export { AnnotationSummaryGroup };

package/dist/components/composites/annotation-summary-group/index.d.ts

@@ -0,0 +1 @@
+export { AnnotationSummaryGroup, type AnnotationSummaryGroupProps, } from "./annotation-summary-group.js";

package/dist/components/composites/chat-message-card/chat-message-card.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "react";
+import type { ToolCall } from "../../../lib/trace/types.js";
+export interface ChatMessageCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** ChatML role — user / assistant / tool / system (or any string). */
+    role: string;
+    /** Text body of the message. */
+    content?: string;
+    /** Structured tool calls attached to the message (assistant turns). */
+    toolCalls?: ToolCall[];
+    /** Structured tool results (tool turns). Serialized to JSON for display. */
+    toolResults?: unknown[];
+}
+declare const ChatMessageCard: import("react").ForwardRefExoticComponent<ChatMessageCardProps & import("react").RefAttributes<HTMLDivElement>>;
+export { ChatMessageCard };

package/dist/components/composites/chat-message-card/index.d.ts

@@ -0,0 +1 @@
+export { ChatMessageCard, type ChatMessageCardProps } from "./chat-message-card.js";

package/dist/components/composites/comment-thread/comment-thread.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A single comment in a {@link CommentThread}. The `id` keys the list; the
+ * consumer owns id assignment (backend or fixture).
+ */
+export interface Comment {
+    id: string;
+    author: string;
+    body: string;
+    /** ISO string OR Unix **ms** (Timestamp contract) — NOT seconds. */
+    createdAt: string | number;
+    avatarUrl?: string;
+}
+export interface CommentThreadProps {
+    /** The rendered thread (controlled — the consumer brings/persists it). */
+    comments: Comment[];
+    /** Called with the trimmed draft when the composer submits a non-empty body. */
+    onSubmit: (body: string) => void;
+    /** Name of the person composing — surfaced as the composer avatar/context. */
+    currentUser?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const CommentThread: import("react").ForwardRefExoticComponent<CommentThreadProps & import("react").RefAttributes<HTMLDivElement>>;
+export { CommentThread };

package/dist/components/composites/comment-thread/index.d.ts

@@ -0,0 +1,2 @@
+export { CommentThread } from "./comment-thread.js";
+export type { Comment, CommentThreadProps } from "./comment-thread.js";

package/dist/components/composites/dataset-item-diff/dataset-item-diff.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from "react";
+import { type DiffSectionCommon } from "../diff-view/diff-section.js";
+import { type DatasetItemSnapshot } from "./to-diff-text.js";
+/**
+ * DatasetItemDiff — diffs two dataset-item versions (M14 ADR D3). Stringifies
+ * each field (input / expectedOutput / metadata) and composes a labeled
+ * `DiffView` per field. Zero new dependency — reuses the DS diff primitive.
+ *
+ * A field absent in BOTH items is omitted honestly (no empty "No changes"
+ * table); a field present on either side is rendered so an add/remove shows.
+ *
+ *   <DatasetItemDiff oldItem={v1} newItem={v2} />
+ */
+export type DatasetItemDiffProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & DiffSectionCommon & {
+    oldItem: DatasetItemSnapshot;
+    newItem: DatasetItemSnapshot;
+};
+declare function DatasetItemDiff(props: DatasetItemDiffProps): import("react").JSX.Element;
+export { DatasetItemDiff };

package/dist/components/composites/dataset-item-diff/index.d.ts

@@ -0,0 +1,4 @@
+export { DatasetItemDiff } from "./dataset-item-diff.js";
+export type { DatasetItemDiffProps } from "./dataset-item-diff.js";
+export type { DatasetItemSnapshot } from "./to-diff-text.js";
+export { fieldToText, fieldPresent } from "./to-diff-text.js";

package/dist/components/composites/dataset-item-diff/to-diff-text.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Pure normalizers for dataset-item snapshots (M14 ADR D3). Turns each field
+ * (input / expectedOutput / metadata), whose value is `unknown`, into the plain
+ * text a `DiffView` diffs. No React, no I/O; total and deterministic.
+ */
+/** A dataset item version. Fields are optional so absent ones can be omitted. */
+export interface DatasetItemSnapshot {
+    input: unknown;
+    expectedOutput?: unknown;
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Stringify a field value for diffing: a string passes through unchanged;
+ * `undefined`/`null` become ""; anything else is pretty-printed JSON. Keeping
+ * strings raw avoids wrapping user text in quotes/escapes in the diff.
+ */
+export declare function fieldToText(value: unknown): string;
+/**
+ * True when a field is present on either side — the caller renders a section
+ * only for present fields, omitting one absent in BOTH items honestly.
+ */
+export declare function fieldPresent(a: unknown, b: unknown): boolean;

package/dist/components/composites/diff-view/diff-section.d.ts

@@ -0,0 +1,19 @@
+import { type DiffViewMode } from "./diff-view.js";
+/**
+ * DiffSection — a labeled `DiffView` (a heading + the diff table). Shared by the
+ * domain composites (PromptVersionDiff, DatasetItemDiff) so each labeled diff is
+ * a single call instead of a repeated heading+DiffView block (DRY).
+ */
+/** The DiffView pass-through props the composites forward to every section. */
+export interface DiffSectionCommon {
+    /** Layout mode, forwarded to DiffView. */
+    mode?: DiffViewMode;
+    oldLabel?: string;
+    newLabel?: string;
+}
+export type DiffSectionProps = DiffSectionCommon & {
+    title: string;
+    oldText: string;
+    newText: string;
+};
+export declare function DiffSection({ title, oldText, newText, ...rest }: DiffSectionProps): import("react").JSX.Element;

package/dist/components/composites/diff-view/diff-view.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from "react";
+/**
+ * DiffView — a controlled, line-level text diff rendered as a semantic table
+ * (M14 ADR D2). Runs the pure `diffLines` LCS over `oldText`/`newText`; zero
+ * new dependency (registry stays copy-pasteable — M14 ADR D1).
+ *
+ * `mode="split"` (default) shows two columns — old on the left, new on the
+ * right, aligning `del` rows on the left and `add` rows on the right; `eq` on
+ * both. `mode="unified"` shows a single inline column with `+`/`-` prefixes.
+ *
+ * A11y is not color-alone: every changed row carries a TEXTUAL marker
+ * (`+`/`-`/` `) plus `data-diff`, and the whole thing is a `<table>` with an
+ * sr-only `<caption>` so screen readers announce a data table. Identical input
+ * reads as an honest "No changes" state, never an empty table.
+ *
+ *   <DiffView oldText={v1} newText={v2} oldLabel="v1" newLabel="v2" />
+ */
+export type DiffViewMode = "split" | "unified";
+export type DiffViewProps = Omit<HTMLAttributes<HTMLTableElement>, "children"> & {
+    oldText: string;
+    newText: string;
+    /** Layout: two-column split (default) or inline unified. */
+    mode?: DiffViewMode;
+    /** Column header for the old text (split) / caption context. */
+    oldLabel?: string;
+    /** Column header for the new text (split) / caption context. */
+    newLabel?: string;
+};
+declare const DiffView: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLTableElement>, "children"> & {
+    oldText: string;
+    newText: string;
+    /** Layout: two-column split (default) or inline unified. */
+    mode?: DiffViewMode;
+    /** Column header for the old text (split) / caption context. */
+    oldLabel?: string;
+    /** Column header for the new text (split) / caption context. */
+    newLabel?: string;
+} & import("react").RefAttributes<HTMLTableElement>>;
+export { DiffView };

package/dist/components/composites/diff-view/index.d.ts

@@ -0,0 +1,2 @@
+export { DiffView } from "./diff-view.js";
+export type { DiffViewProps, DiffViewMode } from "./diff-view.js";

package/dist/components/composites/evaluator-form/evaluator-form.d.ts

@@ -0,0 +1,25 @@
+import { type EvaluatorConfig } from "./types.js";
+/**
+ * EvaluatorForm — a controlled, config-driven builder for a built-in evaluator
+ * (M18). Dispatches on `value.type` (Phoenix's code-evaluator model): a
+ * `<select>` switches the evaluator type; the fields below it edit the config
+ * for the current type — exact_match/contains → a target string; regex →
+ * pattern + optional flags; levenshtein/json_distance → a numeric threshold.
+ * Switching type emits a FRESH config of that type with sensible defaults.
+ *
+ * Fully controlled (`value` + `onChange`); the consumer owns the config and its
+ * persistence. The form only EDITS — execution/sandboxing of the evaluator is a
+ * platform concern (ADR D3). Composes DS primitives; zero new dependency.
+ *
+ *   <EvaluatorForm value={cfg} onChange={setCfg} />
+ */
+export interface EvaluatorFormProps {
+    /** The evaluator config being edited (discriminated by `type`). */
+    value: EvaluatorConfig;
+    /** Emitted with the new config on any edit — always fully typed. */
+    onChange: (value: EvaluatorConfig) => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare const EvaluatorForm: import("react").ForwardRefExoticComponent<EvaluatorFormProps & import("react").RefAttributes<HTMLDivElement>>;
+export { EvaluatorForm };

package/dist/components/composites/evaluator-form/index.d.ts

@@ -0,0 +1,3 @@
+export { EvaluatorForm, type EvaluatorFormProps } from "./evaluator-form.js";
+export type { EvaluatorConfig, EvaluatorType, ExactMatchEvaluatorConfig, ContainsEvaluatorConfig, RegexEvaluatorConfig, LevenshteinEvaluatorConfig, JsonDistanceEvaluatorConfig, } from "./types.js";
+export { defaultEvaluatorConfig, isTargetEvaluator, isRegexEvaluator, isThresholdEvaluator, } from "./types.js";

package/dist/components/composites/evaluator-form/types.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Evaluator config types — the discriminated-union contract for EvaluatorForm
+ * (M18). Follows Phoenix's built-in code-evaluator model: each evaluator has a
+ * `type` discriminant plus the fields that type needs. The config is a plain
+ * descriptor the consumer owns (fixture or backend store) — EvaluatorForm only
+ * EDITS it; execution/sandboxing of the evaluator is a platform concern (ADR
+ * D3). Same union + Extract narrowing pattern as AnnotationInput (M12), which
+ * side-steps the TS#30581 correlated-union limitation.
+ */
+/** A string-target evaluator: the produced output is matched against `target`. */
+export interface ExactMatchEvaluatorConfig {
+    type: "exact_match";
+    target: string;
+}
+export interface ContainsEvaluatorConfig {
+    type: "contains";
+    target: string;
+}
+/** A regex evaluator: `pattern` is the source, `flags` the optional RegExp flags. */
+export interface RegexEvaluatorConfig {
+    type: "regex";
+    pattern: string;
+    flags?: string;
+}
+/** A Levenshtein-distance evaluator: passes when distance ≤ `threshold`. */
+export interface LevenshteinEvaluatorConfig {
+    type: "levenshtein";
+    threshold: number;
+}
+/** A JSON-structural-distance evaluator: passes when distance ≤ `threshold`. */
+export interface JsonDistanceEvaluatorConfig {
+    type: "json_distance";
+    threshold: number;
+}
+export type EvaluatorType = EvaluatorConfig["type"];
+export type EvaluatorConfig = ExactMatchEvaluatorConfig | ContainsEvaluatorConfig | RegexEvaluatorConfig | LevenshteinEvaluatorConfig | JsonDistanceEvaluatorConfig;
+export declare function isTargetEvaluator(c: EvaluatorConfig): c is ExactMatchEvaluatorConfig | ContainsEvaluatorConfig;
+export declare function isRegexEvaluator(c: EvaluatorConfig): c is RegexEvaluatorConfig;
+export declare function isThresholdEvaluator(c: EvaluatorConfig): c is LevenshteinEvaluatorConfig | JsonDistanceEvaluatorConfig;
+/** A fresh config of `type` with sensible defaults — emitted on a type switch. */
+export declare function defaultEvaluatorConfig(type: EvaluatorType): EvaluatorConfig;

package/dist/components/composites/message-branch-selector/index.d.ts

@@ -0,0 +1 @@
+export { MessageBranchSelector, type MessageBranchSelectorProps, } from "./message-branch-selector.js";

package/dist/components/composites/message-branch-selector/message-branch-selector.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from "react";
+/**
+ * MessageBranchSelector — controlled navigator across alternative message
+ * branches (e.g. regenerated responses): "‹ 2 / 5 ›" with prev/next buttons.
+ *
+ * Fully controlled (M19 ADR D3): the consumer owns `index` and reacts to
+ * `onPrev` / `onNext`; regenerate / streaming is a platform concern, not the DS.
+ * Prev is disabled at the first branch, next at the last. With a single branch
+ * (`count <= 1`) there is nothing to navigate, so it renders nothing.
+ *
+ *   <MessageBranchSelector index={i} count={branches.length}
+ *     onPrev={() => setI(i - 1)} onNext={() => setI(i + 1)} />
+ */
+export interface MessageBranchSelectorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Zero-based index of the active branch. */
+    index: number;
+    /** Total number of branches. */
+    count: number;
+    /** Navigate to the previous branch. */
+    onPrev: () => void;
+    /** Navigate to the next branch. */
+    onNext: () => void;
+    /** Disable both controls (e.g. while a branch is loading). */
+    disabled?: boolean;
+}
+declare const MessageBranchSelector: import("react").ForwardRefExoticComponent<MessageBranchSelectorProps & import("react").RefAttributes<HTMLDivElement>>;
+export { MessageBranchSelector };

package/dist/components/composites/price-breakdown/index.d.ts

@@ -0,0 +1,2 @@
+export { PriceBreakdown } from "./price-breakdown.js";
+export type { PriceBreakdownProps } from "./price-breakdown.js";

package/dist/components/composites/price-breakdown/price-breakdown.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from "react";
+/**
+ * PriceBreakdown — a `<table>` of unit prices scaled to per-unit, per-1K, and
+ * per-1M columns. Controlled and pure — the consumer supplies a `prices` map of
+ * usage-type label → price per unit; each scale is a plain multiplication
+ * (`price`, `price × 1000`, `price × 1_000_000`).
+ *
+ * An empty `prices` map renders an honest empty state, not an empty table. A
+ * visually-hidden caption gives screen readers the table's purpose.
+ *
+ *   <PriceBreakdown prices={{ input: 0.000003, output: 0.000015 }} unit="token" />
+ */
+export interface PriceBreakdownProps extends HTMLAttributes<HTMLTableElement> {
+    /** Usage-type label → price per unit. */
+    prices: Record<string, number>;
+    /** The unit each price is quoted per. Default `"token"`. */
+    unit?: string;
+    className?: string;
+}
+declare const PriceBreakdown: import("react").ForwardRefExoticComponent<PriceBreakdownProps & import("react").RefAttributes<HTMLTableElement>>;
+export { PriceBreakdown };

package/dist/components/composites/prompt-template-editor/extract-vars.d.ts

@@ -0,0 +1 @@
+export declare function extractVars(template: string): string[];

package/dist/components/composites/prompt-template-editor/index.d.ts

@@ -0,0 +1,2 @@
+export { PromptTemplateEditor, type PromptTemplateEditorProps, } from "./prompt-template-editor.js";
+export { extractVars } from "./extract-vars.js";

package/dist/components/composites/prompt-template-editor/prompt-template-editor.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from "react";
+/**
+ * PromptTemplateEditor — a controlled template editor: a `Textarea` plus a
+ * simple hint area listing available variables and which are used vs missing.
+ *
+ * The hint is a lightweight overlay over the plain textarea (M19 ADR D1 —
+ * parsimony rung 5): variable detection uses the pure `extractVars` helper;
+ * NO CodeMirror / editor library. "Used" = the variable appears in the current
+ * value; "missing" = it is used in the value but not declared in `variables`.
+ *
+ *   <PromptTemplateEditor value={t} onChange={setT} variables={["name","city"]} />
+ */
+export interface PromptTemplateEditorProps extends Omit<HTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+    /** The template text. */
+    value: string;
+    /** Emits the new template text on each edit. */
+    onChange: (value: string) => void;
+    /** Variables the caller declares available to this template. */
+    variables?: string[];
+    /** Disable editing. */
+    disabled?: boolean;
+}
+declare const PromptTemplateEditor: import("react").ForwardRefExoticComponent<PromptTemplateEditorProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export { PromptTemplateEditor };

package/dist/components/composites/prompt-version-diff/index.d.ts

@@ -0,0 +1,4 @@
+export { PromptVersionDiff } from "./prompt-version-diff.js";
+export type { PromptVersionDiffProps } from "./prompt-version-diff.js";
+export type { PromptSnapshot, ChatMessage } from "./to-diff-text.js";
+export { templateToText, configToText } from "./to-diff-text.js";

package/dist/components/composites/prompt-version-diff/prompt-version-diff.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from "react";
+import { type DiffSectionCommon } from "../diff-view/diff-section.js";
+import { type PromptSnapshot } from "./to-diff-text.js";
+/**
+ * PromptVersionDiff — diffs two prompt versions (M14 ADR D3). Normalizes each
+ * snapshot's template (string passthrough; chat array → `role: content` text)
+ * and config (pretty JSON) to plain text, then composes `DiffView` for content
+ * and, when present, config. Zero new dependency — reuses the DS diff primitive.
+ *
+ * The config diff is omitted honestly when both versions have no config, rather
+ * than rendering an empty "No changes" table nobody asked for.
+ *
+ *   <PromptVersionDiff oldPrompt={v1} newPrompt={v2} />
+ */
+export type PromptVersionDiffProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & DiffSectionCommon & {
+    oldPrompt: PromptSnapshot;
+    newPrompt: PromptSnapshot;
+};
+declare function PromptVersionDiff(props: PromptVersionDiffProps): import("react").JSX.Element;
+export { PromptVersionDiff };

package/dist/components/composites/prompt-version-diff/to-diff-text.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Pure normalizers that turn a prompt snapshot's domain shape into the plain
+ * text `DiffView` diffs (M14 ADR D3 — composites normalize, DiffView diffs).
+ * No React, no I/O; total and deterministic.
+ */
+/** A single chat message in an array-shaped (ChatML-style) template. */
+export interface ChatMessage {
+    role: string;
+    content: string;
+}
+/** A prompt version: either a raw string template or a chat-message array. */
+export interface PromptSnapshot {
+    template: string | ChatMessage[];
+    config?: Record<string, unknown>;
+}
+/**
+ * Normalize a template to readable text. A string passes through unchanged; a
+ * chat array becomes one `role: content` line per message (blank line between
+ * messages so multi-line contents stay legible in the diff).
+ */
+export declare function templateToText(template: string | ChatMessage[]): string;
+/**
+ * Pretty-print a config object to JSON. Absent/empty → "" (the caller omits the
+ * config diff entirely when both sides are empty).
+ */
+export declare function configToText(config?: Record<string, unknown>): string;

package/dist/components/composites/severity-badge/index.d.ts

@@ -0,0 +1,2 @@
+export { SeverityBadge } from "./severity-badge.js";
+export type { Severity, BadgeVariant, SeverityBadgeProps } from "./severity-badge.js";

package/dist/components/composites/severity-badge/severity-badge.d.ts

@@ -0,0 +1,33 @@
+import { type HTMLAttributes } from "react";
+import { type BadgeProps } from "../../primitives/badge/index.js";
+/**
+ * SeverityBadge — labeled, multi-level severity indicator (composite).
+ *
+ * Composes the `Badge` primitive: maps a `Severity` level (langfuse's
+ * MonitorSeverity vocabulary, lowercased) to a Badge `variant`, rendering a
+ * human-readable label.
+ *
+ * NOT a duplicate of `StatusIndicator`: StatusIndicator is a small colored
+ * *status dot* (online/offline/degraded/info) conveying component liveness.
+ * SeverityBadge is a *labeled Badge* conveying a multi-level severity grade
+ * (ok/warning/alert/no_data/unknown/paused) — different semantics, different
+ * surface (bordered pill with text, not a dot). See plan ADR D2.
+ *
+ * @example
+ *   <SeverityBadge severity="alert" />                    // "Alert", destructive
+ *   <SeverityBadge severity="ok" label="Healthy" />       // custom label
+ *   <SeverityBadge severity="warning" variantMap={{ warning: "accent" }} />
+ */
+/** Severity level. langfuse MonitorSeverity vocabulary, lowercased. */
+export type Severity = "ok" | "warning" | "alert" | "no_data" | "unknown" | "paused";
+/** A Badge visual variant (derived from the Badge primitive). */
+export type BadgeVariant = NonNullable<BadgeProps["variant"]>;
+export interface SeverityBadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** Severity level to convey. */
+    severity: Severity;
+    /** Overrides the default human-readable label derived from the severity. */
+    label?: string;
+    /** Per-severity overrides of the default severity → Badge variant map. */
+    variantMap?: Partial<Record<Severity, BadgeVariant>>;
+}
+export declare const SeverityBadge: import("react").ForwardRefExoticComponent<SeverityBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/composites/tag-input/index.d.ts

@@ -0,0 +1,2 @@
+export { TagInput } from "./tag-input.js";
+export type { TagInputProps } from "./tag-input.js";

package/dist/components/composites/tag-input/tag-input.d.ts

@@ -0,0 +1,32 @@
+/**
+ * TagInput — controlled multi-value tag editor (M17).
+ *
+ * Renders one removable chip per tag (`Badge` + a per-tag "×" button) plus a
+ * text input to add a new tag on Enter. Fully controlled: the consumer owns
+ * `value: string[]` and handles `onChange`. Adding calls
+ * `onChange([...value, tag])`; removing calls `onChange` without that tag.
+ * Dedup is built-in — adding an existing (trimmed) tag is a no-op, and so is
+ * an empty/whitespace tag. `disabled` blocks both add and remove.
+ *
+ * Design (ADR D2 + parsimony ladder rung 5): composes `Input` + `Badge` with
+ * Enter-to-add rather than the single-select `Combobox`. `Combobox` is a
+ * typeahead that selects ONE value from a fixed list and closes its own
+ * listbox on select — it has no "create arbitrary tag" affordance, so a plain
+ * input is both simpler and a better fit for free-text multi-value tags.
+ * `suggestions` power a native `<datalist>` (zero-dep autocomplete).
+ *
+ *   <TagInput value={tags} onChange={setTags} suggestions={["bug", "feat"]} />
+ */
+export interface TagInputProps {
+    /** Current tags (controlled). */
+    value: string[];
+    /** Called with the next tag list on add/remove. */
+    onChange: (value: string[]) => void;
+    /** Optional autocomplete suggestions surfaced via a native datalist. */
+    suggestions?: string[];
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const TagInput: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<HTMLDivElement>>;
+export { TagInput };

package/dist/components/composites/token-cost-breakdown/index.d.ts

@@ -0,0 +1,2 @@
+export { TokenCostBreakdown } from "./token-cost-breakdown.js";
+export type { TokenCostBreakdownProps } from "./token-cost-breakdown.js";

package/dist/components/composites/token-cost-breakdown/token-cost-breakdown.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from "react";
+/**
+ * TokenCostBreakdown — a `<dl>` breakdown of a request's/span's/trace's token
+ * usage and USD cost: input, output, cache tokens, total, and cost. Controlled
+ * and pure — the consumer supplies the numbers; nothing is fetched.
+ *
+ * Honest zeros (M9 SessionSummary convention): a real `0` renders `0` /
+ * `$0.0000`; an ABSENT (undefined) field renders `—` (em-dash) — it is never
+ * fabricated as a zero. When EVERY field is absent, an honest empty state
+ * renders instead of a table of em-dashes.
+ *
+ *   <TokenCostBreakdown inputTokens={1200} outputTokens={340}
+ *                       cacheTokens={80} totalTokens={1620} costUsd={0.0234} />
+ */
+export interface TokenCostBreakdownProps extends HTMLAttributes<HTMLDListElement> {
+    inputTokens?: number;
+    outputTokens?: number;
+    cacheTokens?: number;
+    totalTokens?: number;
+    costUsd?: number;
+    /** USD cost formatter. Default `$0.0000`. */
+    formatCostUsd?: (usd: number) => string;
+    className?: string;
+}
+declare const TokenCostBreakdown: import("react").ForwardRefExoticComponent<TokenCostBreakdownProps & import("react").RefAttributes<HTMLDListElement>>;
+export { TokenCostBreakdown };

package/dist/index.d.ts

@@ -3,12 +3,12 @@ export { aggregateCost, asChat, contentText, isRedactedThinking, buildLayeredGra
 export type { AlignDelta, AlignRow, AttributeGroup, AxisTick, BarLayout, ChatMessage, FlatSpan, GraphEdge, GraphNode, LayeredGraph, SpanKind, SpanStatus, ToolCall, TraceSpan, TranscriptRow, TranscriptRowStats, } from "./lib/trace/index.js";
 export { Button, buttonVariants, type ButtonProps } from "./components/primitives/button/index.js";
 export { Badge, badgeVariants, type BadgeProps } from "./components/primitives/badge/index.js";
-export { Breadcrumb, type BreadcrumbLinkProps, } from "./components/primitives/breadcrumb/index.js";
-export { DescriptionList, type DescriptionListProps, } from "./components/primitives/description-list/index.js";
+export { Breadcrumb, type BreadcrumbLinkProps } from "./components/primitives/breadcrumb/index.js";
+export { DescriptionList, type DescriptionListProps } from "./components/primitives/description-list/index.js";
 export { JsonViewer, type JsonViewerProps } from "./components/primitives/json-viewer/index.js";
 export { Combobox, type ComboboxContentProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxProps, } from "./components/primitives/combobox/index.js";
-export { Slider, type SliderMark, type SliderProps, } from "./components/primitives/slider/index.js";
-export { UpdateBanner, type UpdateBannerProps, } from "./components/primitives/update-banner/index.js";
+export { Slider, type SliderMark, type SliderProps } from "./components/primitives/slider/index.js";
+export { UpdateBanner, type UpdateBannerProps } from "./components/primitives/update-banner/index.js";
 export { Card } from "./components/primitives/card/index.js";
 export { Input, type InputProps } from "./components/primitives/input/index.js";
 export { Dialog } from "./components/primitives/dialog/index.js";
@@ -33,14 +33,15 @@ export { Progress, type ProgressProps } from "./components/primitives/progress/i
 export { PlanBadge, type PlanBadgeProps, type PlanTier, } from "./components/primitives/plan-badge/index.js";
 export { AccountMenu, type AccountMenuProps, } from "./components/composites/account-menu/index.js";
 export { Table, type TableProps, type TableCellProps, type TableHeaderCellProps, } from "./components/primitives/table/index.js";
-export { StatusDot, type StatusDotProps, type StatusKind, } from "./components/primitives/status-dot/index.js";
+export { StatusDot, type StatusDotProps, type StatusKind } from "./components/primitives/status-dot/index.js";
 export { CopyButton, type CopyButtonProps, } from "./components/primitives/copy-button/index.js";
 export { Timestamp, type TimestampProps } from "./components/primitives/timestamp/index.js";
 export { StatTile, type StatTileProps } from "./components/primitives/stat-tile/index.js";
 export { DangerZone, type DangerZoneProps, type DangerZoneActionProps, } from "./components/primitives/danger-zone/index.js";
 export { ConfirmDialog, type ConfirmDialogProps, } from "./components/composites/confirm-dialog/index.js";
 export { CodeBlock, type CodeBlockProps } from "./components/composites/code-block/index.js";
-export { StatusIndicator, type StatusIndicatorKind, type StatusIndicatorProps, type StatusIndicatorSize, } from "./components/composites/status-indicator/index.js";
+export { StatusIndicator } from "./components/composites/status-indicator/index.js";
+export type { StatusIndicatorKind, StatusIndicatorProps, StatusIndicatorSize } from "./components/composites/status-indicator/index.js";
 export { MetricCard, type MetricCardDelta, type MetricCardProps, type MetricCardTrend, } from "./components/composites/metric-card/index.js";
 export { Alert, type AlertProps, type AlertIntent } from "./components/primitives/alert/index.js";
 export { Pagination, computePageRange, type PaginationProps, } from "./components/primitives/pagination/index.js";
@@ -85,9 +86,31 @@ export { SessionTimeline } from "./components/composites/session-timeline/index.
 export type { SessionTimelineProps } from "./components/composites/session-timeline/index.js";
 export { computeHistogram } from "./lib/chart/index.js";
 export type { HistogramBin } from "./lib/chart/index.js";
+export { diffLines } from "./lib/diff/index.js";
+export type { DiffRow, DiffRowKind } from "./lib/diff/index.js";
+export { DiffView } from "./components/composites/diff-view/index.js";
+export type { DiffViewProps, DiffViewMode } from "./components/composites/diff-view/index.js";
+export { PromptVersionDiff, templateToText, configToText } from "./components/composites/prompt-version-diff/index.js";
+export type { PromptVersionDiffProps, PromptSnapshot } from "./components/composites/prompt-version-diff/index.js";
+export { DatasetItemDiff, fieldToText, fieldPresent } from "./components/composites/dataset-item-diff/index.js";
+export type { DatasetItemDiffProps, DatasetItemSnapshot } from "./components/composites/dataset-item-diff/index.js";
 export { Histogram } from "./components/composites/histogram/index.js";
 export type { HistogramProps } from "./components/composites/histogram/index.js";
 export { PercentileChart } from "./components/composites/percentile-chart/index.js";
-export type { PercentileBucket, PercentileChartProps, } from "./components/composites/percentile-chart/index.js";
-export { AnnotationInput, isCategoricalConfig, isContinuousConfig, isFreeformConfig, } from "./components/composites/annotation-input/index.js";
-export type { AnnotationInputProps, CategoricalOption, AnnotationCategoricalConfig, AnnotationContinuousConfig, AnnotationFreeformConfig, AnnotationConfig, } from "./components/composites/annotation-input/index.js";
+export type { PercentileBucket, PercentileChartProps } from "./components/composites/percentile-chart/index.js";
+export { AnnotationInput, isCategoricalConfig, isContinuousConfig, isFreeformConfig } from "./components/composites/annotation-input/index.js";
+export type { AnnotationInputProps, CategoricalOption, AnnotationCategoricalConfig, AnnotationContinuousConfig, AnnotationFreeformConfig, AnnotationConfig } from "./components/composites/annotation-input/index.js";
+export { EvaluatorForm, defaultEvaluatorConfig, isTargetEvaluator, isRegexEvaluator, isThresholdEvaluator } from "./components/composites/evaluator-form/index.js";
+export type { EvaluatorFormProps, EvaluatorConfig, EvaluatorType, ExactMatchEvaluatorConfig, ContainsEvaluatorConfig, RegexEvaluatorConfig, LevenshteinEvaluatorConfig, JsonDistanceEvaluatorConfig } from "./components/composites/evaluator-form/index.js";
+export { AnnotationSummaryGroup, type AnnotationSummaryGroupProps } from "./components/composites/annotation-summary-group/index.js";
+export { TokenCostBreakdown } from "./components/composites/token-cost-breakdown/index.js";
+export type { TokenCostBreakdownProps } from "./components/composites/token-cost-breakdown/index.js";
+export { PriceBreakdown } from "./components/composites/price-breakdown/index.js";
+export type { PriceBreakdownProps } from "./components/composites/price-breakdown/index.js";
+export { SeverityBadge } from "./components/composites/severity-badge/index.js";
+export type { Severity, BadgeVariant, SeverityBadgeProps } from "./components/composites/severity-badge/index.js";
+export { TagInput, type TagInputProps } from "./components/composites/tag-input/index.js";
+export { CommentThread, type Comment, type CommentThreadProps } from "./components/composites/comment-thread/index.js";
+export { ChatMessageCard, type ChatMessageCardProps } from "./components/composites/chat-message-card/index.js";
+export { MessageBranchSelector, type MessageBranchSelectorProps } from "./components/composites/message-branch-selector/index.js";
+export { PromptTemplateEditor, extractVars, type PromptTemplateEditorProps } from "./components/composites/prompt-template-editor/index.js";