@usetheo/ui 0.12.0 → 0.13.1

package/dist/components/primitives/folder-context-card/folder-context-card.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { IconComponent } from "../../../lib/types.js";
+export interface FolderEntry {
+    id: string;
+    name: string;
+    kind: "folder" | "file";
+    /**
+     * If true, the entry is expanded (icons + nested children).
+     * Pure visual flag; toggling is the caller's job.
+     */
+    open?: boolean;
+    /**
+     * Optional nested entries when this is a folder.
+     */
+    children?: FolderEntry[];
+    /** Optional adornment after the name (badge, modified indicator). */
+    trailing?: ReactNode;
+    /** Override the icon. */
+    icon?: IconComponent;
+}
+interface FolderContextCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title?: ReactNode;
+    /**
+     * Root entries shown directly in the card.
+     */
+    entries: FolderEntry[];
+    /**
+     * Fires when an entry row is clicked.
+     */
+    onEntryClick?: (id: string) => void;
+}
+/**
+ * FolderContextCard — file/folder tree fragment for the right inspector.
+ *
+ * Visual: 1-level tree with chevron indicating expanded state. Renders nested
+ * children recursively, but does not manage open state — caller controls
+ * `entry.open` and reacts to `onEntryClick`.
+ */
+declare const FolderContextCard: import("react").ForwardRefExoticComponent<FolderContextCardProps & import("react").RefAttributes<HTMLElement>>;
+export { FolderContextCard };

package/dist/components/primitives/folder-context-card/index.d.ts

@@ -0,0 +1 @@
+export { FolderContextCard, type FolderEntry } from "./folder-context-card.js";

package/dist/components/primitives/folder-selector/folder-selector.d.ts

@@ -0,0 +1,18 @@
+import type { ButtonHTMLAttributes } from "react";
+interface FolderSelectorProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Currently selected absolute path. */
+    path: string;
+    /**
+     * Render in compact mode (smaller height, no chevron padding).
+     * Default is the full-width composer variant used in the Files panel.
+     */
+    compact?: boolean;
+}
+/**
+ * FolderSelector — chip showing the active working directory.
+ *
+ * Visual: folder icon + monospaced path (truncated middle) + chevron.
+ * Stateless: caller handles the actual folder-picker dialog.
+ */
+declare const FolderSelector: import("react").ForwardRefExoticComponent<FolderSelectorProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { FolderSelector };

package/dist/components/primitives/folder-selector/index.d.ts

@@ -0,0 +1 @@
+export { FolderSelector } from "./folder-selector.js";

package/dist/components/primitives/form-field/form-field.d.ts

@@ -0,0 +1,44 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import type { ComponentPropsWithoutRef, HTMLAttributes } from "react";
+/**
+ * FormField — composition wrapper for accessible form rows.
+ *
+ * Provides context with a generated `id`, so children (Label, Input, Hint,
+ * Error) wire themselves via `htmlFor` / `id` / `aria-describedby` without
+ * the consumer having to thread IDs manually.
+ *
+ * Composition:
+ *   <FormField>
+ *     <FormField.Label required>Email</FormField.Label>
+ *     <FormField.Control>
+ *       <Input type="email" placeholder="…" />
+ *     </FormField.Control>
+ *     <FormField.Hint>We never share your email.</FormField.Hint>
+ *     <FormField.Error>{error}</FormField.Error>
+ *   </FormField>
+ *
+ * Errors take precedence over hints (only one of them shows at once).
+ */
+type FormFieldSize = "sm" | "md" | "lg";
+interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** Optional explicit id override. */
+    id?: string;
+    /** Marks the field as invalid; switches Hint → Error and toggles aria. */
+    invalid?: boolean;
+    /**
+     * Size scale propagated to Label / Hint / Error subparts via Context.
+     * Default `md` preserves prior behavior. Subparts do NOT accept a `size`
+     * prop of their own — use `className` for granular tweaks (EC-8).
+     */
+    size?: FormFieldSize;
+}
+interface FormFieldLabelProps extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+    required?: boolean;
+}
+declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Label: import("react").ForwardRefExoticComponent<FormFieldLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Hint: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Error: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+};
+export { FormField };

package/dist/components/primitives/form-field/index.d.ts

@@ -0,0 +1 @@
+export { FormField } from "./form-field.js";

package/dist/components/primitives/gateway-status-indicator/gateway-status-indicator.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes } from "react";
+/**
+ * GatewayStatusIndicator — live connection-status dot for a gateway/server.
+ *
+ * Variants:
+ *   - compact  : colored dot only (sidebar footer use)
+ *   - labeled  : dot + label + optional latency text
+ *
+ * `reconnecting` state animates with `animate-pulse` and respects
+ * `prefers-reduced-motion` automatically (Tailwind defaults).
+ */
+export type GatewayStatus = "online" | "offline" | "degraded" | "reconnecting";
+export interface GatewayStatusIndicatorProps extends Omit<HTMLAttributes<HTMLSpanElement>, "title"> {
+    status: GatewayStatus;
+    latencyMs?: number;
+    variant?: "compact" | "labeled";
+    "data-testid"?: string;
+}
+export declare const GatewayStatusIndicator: import("react").ForwardRefExoticComponent<GatewayStatusIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/primitives/gateway-status-indicator/index.d.ts

@@ -0,0 +1 @@
+export { GatewayStatusIndicator, type GatewayStatus, type GatewayStatusIndicatorProps, } from "./gateway-status-indicator.js";

package/dist/components/primitives/hook-config/hook-config.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type HookEvent = "PreToolUse" | "PostToolUse" | "UserPromptSubmit" | "Stop" | "SessionStart" | "SessionEnd";
+export interface HookEntry {
+    id: string;
+    event: HookEvent;
+    /** Tool matcher (e.g. "Bash", "Write", "*"). */
+    matcher: string;
+    /** Shell command to run. */
+    command: string;
+    enabled?: boolean;
+}
+declare const HOOK_EVENTS: HookEvent[];
+interface HookConfigProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onToggle"> {
+    hooks: HookEntry[];
+    onAdd?: (hook: Omit<HookEntry, "id">) => void;
+    onRemove?: (id: string) => void;
+    onToggle?: (id: string, enabled: boolean) => void;
+    title?: ReactNode;
+}
+/**
+ * HookConfig — editor for lifecycle hooks (PreToolUse, PostToolUse, Stop…).
+ *
+ * Mirrors Claude Code's settings.json hooks but visual. Each row is an
+ * { event × matcher × command } triple with on/off toggle.
+ */
+declare const HookConfig: import("react").ForwardRefExoticComponent<HookConfigProps & import("react").RefAttributes<HTMLDivElement>>;
+export { HookConfig, HOOK_EVENTS };

package/dist/components/primitives/hook-config/index.d.ts

@@ -0,0 +1 @@
+export { HookConfig, HOOK_EVENTS, type HookEntry, type HookEvent } from "./hook-config.js";

package/dist/components/primitives/hook-event-log/hook-event-log.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type HookEventResult = "ok" | "blocked" | "error";
+export interface HookEventEntry {
+    id: string;
+    /** Hook event (e.g. PreToolUse). */
+    event: string;
+    /** Hook matcher (e.g. Bash). */
+    matcher: string;
+    /** What the hook command was. */
+    command: string;
+    result: HookEventResult;
+    timestamp: string;
+    /** Optional stderr/stdout snippet. */
+    output?: string;
+    /** Optional duration label, e.g. "120ms". */
+    duration?: string;
+}
+interface HookEventLogProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    events: HookEventEntry[];
+    title?: ReactNode;
+}
+/**
+ * HookEventLog — chronological list of hook firings, with result tone, the
+ * command that ran, and an optional output preview.
+ */
+declare const HookEventLog: import("react").ForwardRefExoticComponent<HookEventLogProps & import("react").RefAttributes<HTMLDivElement>>;
+export { HookEventLog };

package/dist/components/primitives/hook-event-log/index.d.ts

@@ -0,0 +1 @@
+export { HookEventLog, type HookEventEntry, type HookEventResult, } from "./hook-event-log.js";

package/dist/components/primitives/input/index.d.ts

@@ -0,0 +1 @@
+export { Input, type InputProps } from "./input.js";

package/dist/components/primitives/input/input.d.ts

@@ -0,0 +1,24 @@
+import { type VariantProps } from "class-variance-authority";
+import type { InputHTMLAttributes } from "react";
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Input — text input primitive.
+ *
+ * Violet Forge specifics:
+ *   - height 40px (h-10) matching default Button md.
+ *   - rounded-md (6px) — slightly less than buttons to differentiate.
+ *   - focus uses violet ring (--ring).
+ *   - placeholder uses --muted-foreground.
+ *
+ * The `size` prop accepts `"sm" | "md" | "lg"`. Default `md` preserves the
+ * 40px tall input from before this prop existed. EC-1 (edge-case review):
+ * this overrides the native HTML `size` attribute (text-input columns) —
+ * use `{...{ size: 20 } as any}` if you genuinely need the HTML attribute,
+ * which is exceedingly rare.
+ */
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+}
+declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export { Input, inputVariants };

package/dist/components/primitives/intent-selector/index.d.ts

@@ -0,0 +1 @@
+export { IntentSelector, type IntentOption } from "./intent-selector.js";

package/dist/components/primitives/intent-selector/intent-selector.d.ts

@@ -0,0 +1,22 @@
+import type { ButtonHTMLAttributes } from "react";
+import type { IconComponent } from "../../../lib/types.js";
+export interface IntentOption {
+    id: string;
+    label: string;
+    /** Optional one-liner shown below the label in the menu. */
+    description?: string;
+    /** Optional icon — defaults to a pencil for the trigger if none. */
+    icon?: IconComponent;
+}
+interface IntentSelectorProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    value: string;
+    options: IntentOption[];
+    onChange?: (id: string) => void;
+}
+/**
+ * IntentSelector — chip dropdown for picking the agent's intent for the next
+ * turn (e.g. edit / plan / review). Mirrors ModelSelector: pill trigger +
+ * Radix DropdownMenu of options with description and a check on the active.
+ */
+declare const IntentSelector: import("react").ForwardRefExoticComponent<IntentSelectorProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { IntentSelector };

package/dist/components/primitives/label/index.d.ts

@@ -0,0 +1 @@
+export { Label } from "./label.js";

package/dist/components/primitives/label/label.d.ts

@@ -0,0 +1,15 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import type { ComponentPropsWithoutRef } from "react";
+/**
+ * Label — form field label built on Radix Label.
+ *
+ * Behaviors:
+ *   - Clicking the label focuses the associated `htmlFor` input.
+ *   - Adds a small red asterisk when `required` is set.
+ *   - Inherits disabled visuals from the wrapper (`peer-disabled`).
+ */
+interface LabelProps extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+    required?: boolean;
+}
+declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export { Label };

package/dist/components/primitives/lane-board/index.d.ts

@@ -0,0 +1 @@
+export { LaneBoard, type Lane, type LaneCard, type LaneState } from "./lane-board.js";

package/dist/components/primitives/lane-board/lane-board.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type LaneState = "started" | "blocked" | "failed" | "finished";
+export interface LaneCard {
+    id: string;
+    /** Card title (e.g. task name). */
+    title: ReactNode;
+    /** Optional description / preview. */
+    description?: ReactNode;
+    /** Optional footer / metadata row. */
+    footer?: ReactNode;
+}
+export interface Lane {
+    state: LaneState;
+    cards: LaneCard[];
+}
+interface LaneBoardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    lanes: Lane[];
+    title?: ReactNode;
+}
+/**
+ * LaneBoard — kanban-style task board with 4 lanes matching the claw-code
+ * lane event schema (started/blocked/failed/finished). Each card is a
+ * machine-readable task snapshot the agent emits.
+ */
+declare const LaneBoard: import("react").ForwardRefExoticComponent<LaneBoardProps & import("react").RefAttributes<HTMLDivElement>>;
+export { LaneBoard };

package/dist/components/primitives/login-split/index.d.ts

@@ -0,0 +1 @@
+export { LoginSplit } from "./login-split.js";

package/dist/components/primitives/login-split/login-split.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+interface LoginSplitProps extends HTMLAttributes<HTMLDivElement> {
+    /** Left pane content — form, brand, etc. */
+    left: ReactNode;
+    /** Right pane content — illustration, marketing, social proof. */
+    right: ReactNode;
+    /**
+     * Optional footer rendered below both panes.
+     */
+    footer?: ReactNode;
+    /**
+     * Reverse the split (form on the right). Default = form left.
+     */
+    reverse?: boolean;
+}
+/**
+ * LoginSplit — 50/50 split layout shell.
+ *
+ * Used for the auth flow. Two slots (`left`, `right`); the right pane has a
+ * subtle violet wash so the illustration sits inside Theo identity. Mobile
+ * collapses to single column.
+ */
+declare const LoginSplit: import("react").ForwardRefExoticComponent<LoginSplitProps & import("react").RefAttributes<HTMLDivElement>>;
+export { LoginSplit };

package/dist/components/primitives/mcp-server-card/index.d.ts

@@ -0,0 +1 @@
+export { MCPServerCard, type MCPServer, type MCPServerStatus } from "./mcp-server-card.js";

package/dist/components/primitives/mcp-server-card/mcp-server-card.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type MCPServerStatus = "connected" | "degraded" | "disconnected" | "starting";
+export interface MCPServer {
+    id: string;
+    /** Friendly name, e.g. "postgres". */
+    name: string;
+    /** Transport endpoint (stdio command or URL). */
+    endpoint: string;
+    status: MCPServerStatus;
+    /** Tools exposed by the server. */
+    tools: string[];
+    /** Optional resources exposed. */
+    resources?: string[];
+    /** Diagnostic message when degraded/disconnected. */
+    message?: ReactNode;
+    /** Auto-restart toggle hint. */
+    autoRestart?: boolean;
+}
+interface MCPServerCardProps extends HTMLAttributes<HTMLElement> {
+    server: MCPServer;
+    onRestart?: (id: string) => void;
+    onDisconnect?: (id: string) => void;
+}
+/**
+ * MCPServerCard — one MCP server entry showing connection status, the tools
+ * it exposes, and inline controls (restart, disconnect).
+ *
+ * Pairs with claw-code's "degraded startup reporting" — failed servers can
+ * still appear here with a recovery message.
+ */
+declare const MCPServerCard: import("react").ForwardRefExoticComponent<MCPServerCardProps & import("react").RefAttributes<HTMLElement>>;
+export { MCPServerCard };

package/dist/components/primitives/memory-editor/index.d.ts

@@ -0,0 +1 @@
+export { MemoryEditor, type MemoryLayer, type MemoryScope } from "./memory-editor.js";

package/dist/components/primitives/memory-editor/memory-editor.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type MemoryScope = "global" | "project" | "session";
+export interface MemoryLayer {
+    scope: MemoryScope;
+    /** File path on disk for transparency. */
+    path: string;
+    /** Markdown content. */
+    content: string;
+    /** Last modified label, e.g. "2m ago". */
+    modifiedAt?: string;
+}
+interface MemoryEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    layers: MemoryLayer[];
+    /** Currently active layer for editing. */
+    activeScope: MemoryScope;
+    onScopeChange: (scope: MemoryScope) => void;
+    onContentChange: (scope: MemoryScope, next: string) => void;
+    title?: ReactNode;
+}
+/**
+ * MemoryEditor — three-layer Markdown memory editor (global / project /
+ * session) mirroring Claude Code's CLAUDE.md hierarchy.
+ *
+ * Each scope keeps its own file. Switching scopes via tab updates which
+ * layer is being edited. Path is shown explicitly so users know where the
+ * content lives on disk.
+ */
+declare const MemoryEditor: import("react").ForwardRefExoticComponent<MemoryEditorProps & import("react").RefAttributes<HTMLDivElement>>;
+export { MemoryEditor };

package/dist/components/primitives/mention-menu/index.d.ts

@@ -0,0 +1 @@
+export { MentionMenu, type MentionItem, type MentionTrigger, } from "./mention-menu.js";

package/dist/components/primitives/mention-menu/mention-menu.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+import type { IconComponent } from "../../../lib/types.js";
+export interface MentionItem {
+    id: string;
+    /** Primary label shown on the row. */
+    label: ReactNode;
+    /** Secondary one-line description (optional). */
+    description?: ReactNode;
+    /** Optional per-row icon override. */
+    icon?: IconComponent;
+}
+/** Trigger character — drives the default header + icon if not overridden. */
+export type MentionTrigger = "/" | "@" | "#";
+interface MentionMenuProps {
+    /** Whether the panel is open. The consumer (composer) controls this. */
+    open: boolean;
+    /** Trigger character that opened the menu — used for default title + icon. */
+    trigger: MentionTrigger;
+    /** Items to display (already filtered by the consumer). */
+    items: MentionItem[];
+    /** Fires when the user selects an item via click or Enter. */
+    onSelect: (item: MentionItem) => void;
+    /** Fires when the user dismisses (Esc, click outside). */
+    onClose: () => void;
+    /** Title above the list. Defaults to the trigger's domain ("Commands", "Files", "Memories"). */
+    title?: ReactNode;
+    /** Empty-state message when items is empty. */
+    emptyLabel?: ReactNode;
+    /** Override the alignment relative to its anchor. Default: above-left. */
+    className?: string;
+}
+/**
+ * MentionMenu — keyboard-navigable popover for slash-command / @file / #memory
+ * triggers inside an agent composer.
+ *
+ * Generic by design: the consumer decides what items appear for each trigger
+ * (commands list, file search, memory lookup, …). MentionMenu owns the visual
+ * presentation, selection highlight, Esc/Enter/Arrow keys.
+ *
+ * Position: absolute, anchored to the closest positioned ancestor — usually
+ * the composer wrapper. Default `bottom-full left-0` (above the composer).
+ */
+export declare function MentionMenu({ open, trigger, items, onSelect, onClose, title, emptyLabel, className, }: MentionMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/primitives/metrics-panel/index.d.ts

@@ -0,0 +1 @@
+export { MetricsPanel, type Metric } from "./metrics-panel.js";

package/dist/components/primitives/metrics-panel/metrics-panel.d.ts

@@ -0,0 +1,62 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Metric {
+    /**
+     * Short label, e.g. "Requests/s", "p95 latency", "Error rate".
+     */
+    label: string;
+    /**
+     * Pre-formatted value string, e.g. "1.2k", "182ms", "0.03%".
+     * Consumer formats; the component does not parse.
+     */
+    value: string;
+    /**
+     * Optional unit suffix appended after value with .9 opacity.
+     */
+    unit?: string;
+    /**
+     * Optional change vs comparison period, e.g. "+12%", "-4ms", "+0.01pp".
+     */
+    delta?: string;
+    /**
+     * If true, delta is "good" (success color); if false, "bad" (destructive).
+     * If omitted, delta is rendered in muted (neutral).
+     *
+     * Caller decides semantics — "more requests" is good but "more errors" is bad.
+     */
+    deltaGood?: boolean;
+    /**
+     * Optional sparkline data, 0..1 normalized. Consumer is responsible for normalization.
+     */
+    sparkline?: number[];
+    /**
+     * Optional onClick to drill into the metric.
+     */
+    onClick?: () => void;
+    /**
+     * Optional override for the clickable tile's accessible name. When the
+     * tile is interactive (`onClick` set), defaults to `View <label> details`.
+     * Has no effect when `onClick` is absent (tile is rendered as a non-link
+     * `<div>` with no button semantics). T4.3.
+     */
+    actionLabel?: string;
+}
+interface MetricsPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    metrics: Metric[];
+    /**
+     * Grid columns. Defaults to auto-fit ~180px min.
+     */
+    columns?: number;
+}
+/**
+ * MetricsPanel — grid of metric tiles for observability dashboards.
+ *
+ * Visual: each tile is a soft surface with a big value (font-display),
+ * label uppercase muted, optional delta with arrow icon + tone color,
+ * optional CSS-only sparkline drawn as flexed bars.
+ *
+ * No external chart lib — keeps the registry copy-pasteable.
+ */
+declare const MetricsPanel: import("react").ForwardRefExoticComponent<MetricsPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export { MetricsPanel };

package/dist/components/primitives/model-card/index.d.ts

@@ -0,0 +1 @@
+export { ModelCard, modelCapabilityPresets, type ModelCapabilityFlag, type ModelInfo, } from "./model-card.js";

package/dist/components/primitives/model-card/model-card.d.ts

@@ -0,0 +1,72 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { IconComponent } from "../../../lib/types.js";
+export interface ModelCapabilityFlag {
+    id: string;
+    label: string;
+    icon?: IconComponent;
+    enabled: boolean;
+}
+export interface ModelInfo {
+    id: string;
+    /** Display name (e.g. "Opus 4.7"). */
+    name: string;
+    /** Vendor (Anthropic, OpenAI, …). */
+    vendor: string;
+    /** Optional tag (default, fast, smart, beta). */
+    tag?: ReactNode;
+    /** Total context window in tokens. */
+    contextWindow: number;
+    /** Max output tokens per turn. */
+    maxOutput: number;
+    /** USD per million input tokens. */
+    pricePerMInput?: number;
+    /** USD per million output tokens. */
+    pricePerMOutput?: number;
+    /** Knowledge cutoff date label (e.g. "Jan 2026"). */
+    cutoff?: string;
+    /** Capability flags shown as chips. */
+    capabilities?: ModelCapabilityFlag[];
+    /** Short description / positioning. */
+    description?: ReactNode;
+}
+interface ModelCardProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+    model: ModelInfo;
+    /** Render as the currently-selected variant (violet ring). */
+    selected?: boolean;
+    /** Fires when user clicks to select. */
+    onSelect?: (id: string) => void;
+}
+/**
+ * ModelCard — full info on a model: vendor, context, output cap, pricing,
+ * capabilities, knowledge cutoff. Used in the "switch model" surface.
+ */
+declare const ModelCard: import("react").ForwardRefExoticComponent<ModelCardProps & import("react").RefAttributes<HTMLElement>>;
+/** Pre-canned capability flags. */
+export declare const modelCapabilityPresets: {
+    vision: {
+        readonly id: "vision";
+        readonly label: "Vision";
+        readonly icon: IconComponent;
+    };
+    tools: {
+        readonly id: "tools";
+        readonly label: "Tool use";
+        readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    };
+    reasoning: {
+        readonly id: "reasoning";
+        readonly label: "Reasoning";
+        readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    };
+    fineTuning: {
+        readonly id: "ft";
+        readonly label: "Fine-tuning";
+        readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    };
+    multimodal: {
+        readonly id: "multimodal";
+        readonly label: "Multimodal";
+        readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    };
+};
+export { ModelCard };

package/dist/components/primitives/model-selector/index.d.ts

@@ -0,0 +1 @@
+export { ModelSelector, type ModelOption } from "./model-selector.js";

package/dist/components/primitives/model-selector/model-selector.d.ts

@@ -0,0 +1,21 @@
+import type { ButtonHTMLAttributes } from "react";
+export interface ModelOption {
+    id: string;
+    label: string;
+    /** Optional vendor hint shown small below the label. */
+    vendor?: string;
+    /** Optional tag e.g. "default", "fast", "smart". */
+    tag?: string;
+}
+interface ModelSelectorProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    value: string;
+    options: ModelOption[];
+    onChange?: (id: string) => void;
+}
+/**
+ * ModelSelector — chip dropdown for picking the active LLM.
+ *
+ * Visual: pill with violet dot + label + chevron. Dropdown uses Radix Menu.
+ */
+declare const ModelSelector: import("react").ForwardRefExoticComponent<ModelSelectorProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { ModelSelector };

package/dist/components/primitives/pagination/index.d.ts

@@ -0,0 +1 @@
+export { Pagination, computePageRange, type PaginationProps, } from "./pagination.js";