@usetheo/ui 0.13.0 → 0.13.2

package/dist/components/primitives/toast/toaster.d.ts

@@ -0,0 +1,38 @@
+import type { JSX, ReactNode } from "react";
+import { type ToastVariant } from "./toast.js";
+interface ToastDescriptor {
+    id: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    variant?: ToastVariant;
+    /** Auto-dismiss in ms. Default 5000. Pass `null` for sticky. */
+    duration?: number | null;
+    action?: {
+        label: ReactNode;
+        onClick: () => void;
+    };
+}
+interface ToastContextValue {
+    toast: (descriptor: Omit<ToastDescriptor, "id">) => string;
+    dismiss: (id: string) => void;
+}
+interface ToasterProps {
+    children: ReactNode;
+    /** Toast viewport position. Default bottom-right. */
+    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    className?: string;
+}
+/**
+ * Toaster — mount once at the app root. Wraps children in a Radix Toast
+ * Provider + Viewport and exposes the `useToast()` hook for descendants.
+ */
+declare function Toaster({ children, position, className }: ToasterProps): JSX.Element;
+/**
+ * useToast — fire toasts from anywhere inside <Toaster>.
+ *
+ * Example:
+ *   const { toast } = useToast();
+ *   toast({ title: "Deployed", variant: "success" });
+ */
+declare function useToast(): ToastContextValue;
+export { Toaster, useToast };

package/dist/components/primitives/token-usage-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { TokenUsageChart, type TokenUsagePoint } from "./token-usage-chart.js";
+export { splitUsagePoints, toUsageMetrics, type UsageMetrics, type UsageSeries, } from "./usage-metrics.js";

package/dist/components/primitives/token-usage-chart/token-usage-chart.d.ts

@@ -0,0 +1,44 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface TokenUsagePoint {
+    /** ISO date or friendly label for the x-axis tooltip. */
+    label: string;
+    /** Input tokens for this period (e.g. day). */
+    input: number;
+    /** Output tokens for this period. */
+    output: number;
+}
+interface TokenUsageChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    points: TokenUsagePoint[];
+    /** Title above the chart. */
+    title?: ReactNode;
+    /** Chart height in px. Default 160. */
+    height?: number;
+    /** Show legend below the chart. Default true. */
+    showLegend?: boolean;
+    /**
+     * Maximum number of bars to render. When `points.length` exceeds this, the
+     * series is binned (summed in equal-width windows) so the chart stays
+     * legible and SVG node count stays bounded. Default 60.
+     */
+    maxBars?: number;
+    /**
+     * Fix the y-axis maximum (the token value mapped to 100% height) so multiple
+     * charts share a scale. When omitted, the scale auto-fits the data. Bars whose
+     * value exceeds `maxScale` are clamped to 100% (the tooltip + a11y table still
+     * show the true number).
+     */
+    maxScale?: number;
+    /**
+     * Render input and output as two adjacent (grouped) bars per period instead of
+     * one stacked bar. Default false (stacked).
+     */
+    splitSeries?: boolean;
+}
+/**
+ * TokenUsageChart — stacked-bar chart of input vs output tokens over time.
+ *
+ * Pure SVG, no chart lib. Width is fluid; bars adjust to viewBox. Hover any
+ * bar to see the breakdown in the tooltip slot below.
+ */
+declare const TokenUsageChart: import("react").ForwardRefExoticComponent<TokenUsageChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export { TokenUsageChart };

package/dist/components/primitives/token-usage-chart/usage-metrics.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Pure aggregate + transpose helpers for `TokenUsagePoint[]` (M5-7).
+ * No React — usable to drive metric displays, fixed-scale comparisons, or
+ * other chart surfaces.
+ */
+import type { TokenUsagePoint } from "./token-usage-chart.js";
+export interface UsageMetrics {
+    totalInput: number;
+    totalOutput: number;
+    total: number;
+    /** The largest per-period total (`input + output`); 0 for an empty series. */
+    peak: number;
+    pointCount: number;
+}
+/** Aggregate totals + the peak per-period total. Pure. */
+export declare function toUsageMetrics(points: TokenUsagePoint[]): UsageMetrics;
+export interface UsageSeries {
+    labels: string[];
+    input: number[];
+    output: number[];
+}
+/** Transpose stacked points into parallel `labels`/`input`/`output` arrays. Pure. */
+export declare function splitUsagePoints(points: TokenUsagePoint[]): UsageSeries;

package/dist/components/primitives/tool-call/index.d.ts

@@ -0,0 +1 @@
+export { ToolCall } from "./tool-call.js";

package/dist/components/primitives/tool-call/tool-call.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from "react";
+interface ToolCallProps extends HTMLAttributes<HTMLDivElement> {
+    /** Tool name e.g. "bash", "read_file", "edit_file". */
+    name?: string;
+    /**
+     * Summary label e.g. "Ran 2 commands", "Read 18 files".
+     */
+    summary: ReactNode;
+    /**
+     * Collapsible payload (e.g. command, stdout, file list).
+     */
+    detail?: ReactNode;
+    defaultOpen?: boolean;
+    /**
+     * If true, hides the wrench icon (useful when grouping by name elsewhere).
+     */
+    hideIcon?: boolean;
+}
+/**
+ * ToolCall — collapsible row representing an agent tool invocation.
+ *
+ * Visual: subtle muted container, wrench icon, summary in body text,
+ * chevron rotates on expand. Pairs with `<ToolResult>` for the rendered output.
+ *
+ * Typical usage inside a ChatMessage assistant body:
+ *
+ *   <ToolCall summary="Read 18 files" detail={<ToolResult>{output}</ToolResult>} />
+ */
+declare const ToolCall: import("react").ForwardRefExoticComponent<ToolCallProps & import("react").RefAttributes<HTMLDivElement>>;
+export { ToolCall };

package/dist/components/primitives/tool-call-card/index.d.ts

@@ -0,0 +1 @@
+export { ToolCallCard, type ToolCallStatus } from "./tool-call-card.js";

package/dist/components/primitives/tool-call-card/tool-call-card.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { IconComponent } from "../../../lib/types.js";
+/**
+ * ToolCallCard — single agent tool invocation rendered inside the stream.
+ *
+ * Visual: row with tool icon + tool name + target/command (mono) + status +
+ * optional chevron. Expandable: when `output` is provided the row becomes a
+ * `<details>` whose body renders the stdout/stderr/result block.
+ *
+ * Distinct from `AgentEvent` in the existing AgentTimeline by being a
+ * stand-alone card that lives inside an AgentStream alongside chat messages.
+ */
+export type ToolCallStatus = "running" | "success" | "failed" | "queued" | "skipped";
+interface ToolCallCardProps extends HTMLAttributes<HTMLElement> {
+    /** Tool name (matches Theo Code / Claude Code tool registry: Bash, Edit, Read, …). */
+    tool: ReactNode;
+    /** Optional icon for the tool. */
+    icon?: IconComponent;
+    /** Target / command shown in monospace next to the tool name. */
+    target?: ReactNode;
+    status: ToolCallStatus;
+    /** Optional stdout/stderr/result body. When present, the card becomes expandable. */
+    output?: ReactNode;
+    /** Default expanded state. Default: false (collapsed). */
+    defaultExpanded?: boolean;
+    /** Timestamp shown on the right. */
+    timestamp?: ReactNode;
+}
+export declare function ToolCallCard({ className, tool, icon: Icon, target, status, output, defaultExpanded, timestamp, ...props }: ToolCallCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/primitives/tool-result/index.d.ts

@@ -0,0 +1 @@
+export { ToolResult } from "./tool-result.js";

package/dist/components/primitives/tool-result/tool-result.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from "react";
+type Variant = "text" | "code" | "json";
+interface ToolResultProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: Variant;
+    /**
+     * Pre-formatted content. For `code`/`json`, the component uses mono font
+     * and preserves whitespace. For `text`, normal body font.
+     */
+    children: ReactNode;
+}
+/**
+ * ToolResult — formatted output of a tool invocation.
+ *
+ * Three quick variants: plain text, code (monospace), json (monospace, tinted).
+ * Always rendered as a `<div>` for predictable prop typing; code/json variants
+ * wrap children in `<pre>` internally.
+ */
+declare const ToolResult: import("react").ForwardRefExoticComponent<ToolResultProps & import("react").RefAttributes<HTMLDivElement>>;
+export { ToolResult };

package/dist/components/primitives/tools-list/index.d.ts

@@ -0,0 +1 @@
+export { ToolsList, type ToolEnablement, type ToolEntry } from "./tools-list.js";

package/dist/components/primitives/tools-list/tools-list.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { IconComponent } from "../../../lib/types.js";
+export type ToolEnablement = "enabled" | "ask" | "denied";
+export interface ToolEntry {
+    id: string;
+    name: string;
+    description?: ReactNode;
+    icon?: IconComponent;
+    enablement?: ToolEnablement;
+    /**
+     * Source of the tool: built-in, plugin/skill, or MCP server name.
+     */
+    source?: string;
+    /** Optional badge text (e.g. "destructive", "experimental"). */
+    badge?: ReactNode;
+}
+interface ToolsListProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onChange"> {
+    tools: ToolEntry[];
+    /** Title above the list. */
+    title?: ReactNode;
+    /**
+     * Fires when the consumer toggles a tool's enablement state.
+     * Cycle: enabled → ask → denied → enabled.
+     */
+    onEnablementChange?: (id: string, next: ToolEnablement) => void;
+}
+/**
+ * ToolsList — surface every tool the agent could call, with its enablement
+ * state. Click the chip to cycle: Allowed → Ask → Denied.
+ */
+declare const ToolsList: import("react").ForwardRefExoticComponent<ToolsListProps & import("react").RefAttributes<HTMLDivElement>>;
+export { ToolsList };

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

@@ -0,0 +1 @@
+export { Tooltip } from "./tooltip.js";

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

@@ -0,0 +1,33 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+/**
+ * Tooltip — built on Radix Tooltip.
+ *
+ * Visual: dark surface in light mode (and inverse in dark) with rounded-md,
+ * shadow-md, text-body-sm. 8px delay-show default.
+ *
+ * Wrap your app in <Tooltip.Provider> once (or use the default delayDuration here).
+ */
+declare const Provider: import("react").FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Root: import("react").FC<TooltipPrimitive.TooltipProps>;
+declare const Trigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const Content: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+interface TooltipProps extends ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {
+    label: ReactNode;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+    children: ReactNode;
+}
+/**
+ * Shorthand: <Tooltip label="…"><Button>…</Button></Tooltip>
+ * Wraps Provider + Root + Trigger asChild + Content for the common case.
+ * For advanced usage (controlled state, custom content), use Tooltip.Root etc. directly.
+ */
+declare const Tooltip: ({ label, side, align, delayDuration, children, ...rootProps }: TooltipProps) => ReturnType<typeof Provider>;
+declare const TooltipWithStatics: typeof Tooltip & {
+    Provider: typeof Provider;
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+};
+export { TooltipWithStatics as Tooltip };

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

@@ -0,0 +1 @@
+export { TopNav } from "./topnav.js";

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

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from "react";
+interface BreadcrumbItem {
+    label: ReactNode;
+    href?: string;
+}
+interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItem[];
+}
+interface ModeSwitcherOption {
+    value: string;
+    label: ReactNode;
+}
+interface ModeSwitcherProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value: string;
+    options: ModeSwitcherOption[];
+    onChange?: (value: string) => void;
+    /**
+     * Accessible label for the radiogroup. Defaults to "Mode".
+     */
+    ariaLabel?: string;
+}
+declare const TopNav: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>> & {
+    Left: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Center: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Right: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Breadcrumbs: import("react").ForwardRefExoticComponent<BreadcrumbsProps & import("react").RefAttributes<HTMLElement>>;
+    ModeSwitcher: import("react").ForwardRefExoticComponent<ModeSwitcherProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { TopNav };

package/dist/components/primitives/update-banner/index.d.ts

@@ -0,0 +1 @@
+export { UpdateBanner, type UpdateBannerProps } from "./update-banner.js";

package/dist/components/primitives/update-banner/update-banner.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLAttributes } from "react";
+/**
+ * UpdateBanner — top-of-app alert when a newer version is available.
+ *
+ * Controlled. Dismiss persistence (localStorage/cookie/etc) is the consumer's
+ * responsibility (per EC-16 DOCUMENT). Component just fires `onDismiss`.
+ */
+export interface UpdateBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    currentVersion: string;
+    latestVersion: string;
+    onUpdate: () => void;
+    onDismiss?: () => void;
+    severity?: "info" | "warn";
+    "data-testid"?: string;
+}
+export declare const UpdateBanner: import("react").ForwardRefExoticComponent<UpdateBannerProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { Whiteboard, type WhiteboardData, type WhiteboardProps } from "./whiteboard.js";
+export { validateScene, type ValidationError, type ValidationResult } from "./validate.js";

package/dist/components/primitives/whiteboard/render/freedraw.d.ts

@@ -0,0 +1,2 @@
+import type { FreedrawElement } from "../schema.js";
+export declare function renderFreedraw(el: FreedrawElement): React.ReactNode;

package/dist/components/primitives/whiteboard/render/line.d.ts

@@ -0,0 +1,4 @@
+import type { RoughGenerator } from "roughjs/bin/generator.js";
+import type { ArrowElement, LineElement } from "../schema.js";
+export declare function renderLine(gen: RoughGenerator, el: LineElement): React.ReactNode;
+export declare function renderArrow(gen: RoughGenerator, el: ArrowElement): React.ReactNode;

package/dist/components/primitives/whiteboard/render/rough-paths.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Thin adapter over `roughjs` — converts a `Drawable` into the array of
+ * `<path>` descriptors we render in SVG. The actual `rough.generator()`
+ * instance is created once per scene and reused across elements.
+ */
+import type { Drawable, Options } from "roughjs/bin/core.js";
+import type { RoughGenerator } from "roughjs/bin/generator.js";
+export interface RoughPath {
+    d: string;
+    stroke: string;
+    strokeWidth: number;
+    fill?: string;
+}
+export type RoughOptions = Options;
+/** Convert a rough.js Drawable into renderable SVG path descriptors. */
+export declare function toRoughPaths(generator: RoughGenerator, drawable: Drawable): RoughPath[];

package/dist/components/primitives/whiteboard/render/scene.d.ts

@@ -0,0 +1,3 @@
+import type { RoughGenerator } from "roughjs/bin/generator.js";
+import type { WhiteboardScene } from "../schema.js";
+export declare function renderScene(scene: WhiteboardScene, gen: RoughGenerator): React.ReactNode;

package/dist/components/primitives/whiteboard/render/shape.d.ts

@@ -0,0 +1,5 @@
+import type { RoughGenerator } from "roughjs/bin/generator.js";
+import type { DiamondElement, EllipseElement, RectElement } from "../schema.js";
+export declare function renderRect(gen: RoughGenerator, el: RectElement): React.ReactNode;
+export declare function renderEllipse(gen: RoughGenerator, el: EllipseElement): React.ReactNode;
+export declare function renderDiamond(gen: RoughGenerator, el: DiamondElement): React.ReactNode;

package/dist/components/primitives/whiteboard/render/style.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Maps a `WhiteboardElement` style props onto rough.js `Options`.
+ */
+import type { Options } from "roughjs/bin/core.js";
+interface StyleSource {
+    stroke?: string;
+    strokeWidth?: number;
+    strokeStyle?: "solid" | "dashed" | "dotted";
+    fill?: string;
+    fillStyle?: "hachure" | "solid" | "cross-hatch" | "zigzag";
+    opacity?: number;
+    roughness?: number;
+}
+declare const DEFAULT_STROKE = "currentColor";
+export declare function buildOptions(src: StyleSource, seed: number): Options;
+/**
+ * SVG `stroke-dasharray` value for a logical strokeStyle. rough.js's
+ * `RoughGenerator.toPaths()` does NOT propagate `strokeLineDash` into the
+ * returned `PathInfo` — only the canvas / direct-SVG backends apply it. We
+ * must set the attribute ourselves on the rendered `<path>`. Returns
+ * `undefined` for `solid` and any unknown value.
+ */
+export declare function strokeDashArray(strokeStyle: StyleSource["strokeStyle"], strokeWidth: number): string | undefined;
+export { DEFAULT_STROKE };

package/dist/components/primitives/whiteboard/render/text.d.ts

@@ -0,0 +1,2 @@
+import type { TextElement } from "../schema.js";
+export declare function renderText(el: TextElement): React.ReactNode;