@usetheo/ui 0.12.0 → 0.13.1

package/dist/components/composites/confirm-dialog/confirm-dialog.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+/**
+ * ConfirmDialog — controlled confirmation modal built on `Dialog`.
+ *
+ * Focuses Cancel on open (deliberate — NOT the destructive button).
+ * `intent="destructive"` styles the confirm button with the destructive
+ * variant. `confirmationPhrase` enables typed-confirmation guard:
+ * the confirm button is disabled until the input value matches the
+ * phrase exactly (case-sensitive). An empty string phrase is treated
+ * as "no phrase required" (`!!confirmationPhrase`). Pressing Enter in
+ * the input triggers confirm when `canConfirm` is true.
+ *
+ * `onConfirm` can be async. While the returned promise is pending,
+ * both buttons are disabled and a `Loader2` spinner appears. On
+ * resolve, the dialog closes via `onOpenChange(false)`. On reject,
+ * the dialog stays open so the consumer can show their own error.
+ *
+ * @example
+ *   <ConfirmDialog
+ *     open={open} onOpenChange={setOpen}
+ *     title="Delete project"
+ *     description="This cannot be undone."
+ *     intent="destructive"
+ *     confirmationPhrase="my-project"
+ *     onConfirm={async () => api.deleteProject(id)}
+ *   />
+ */
+export interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description: ReactNode;
+    confirmLabel?: ReactNode;
+    cancelLabel?: ReactNode;
+    intent?: "default" | "destructive";
+    confirmationPhrase?: string;
+    onConfirm: () => void | Promise<void>;
+    loading?: boolean;
+}
+declare const ConfirmDialog: import("react").ForwardRefExoticComponent<ConfirmDialogProps & import("react").RefAttributes<HTMLDivElement>>;
+export { ConfirmDialog };

package/dist/components/composites/confirm-dialog/index.d.ts

@@ -0,0 +1 @@
+export { ConfirmDialog, type ConfirmDialogProps } from "./confirm-dialog.js";

package/dist/components/composites/confirm-prompt/confirm-prompt.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/**
+ * ConfirmPrompt — binary yes/no "ask the user" card for agent surfaces.
+ *
+ * The simplest member of the prompt family: a question with an optional header
+ * chip and two actions. Use `variant="destructive"` for dangerous confirmations
+ * (delete, drop, force-push) — it tones the confirm button red and exposes the
+ * card as an `alertdialog` so assistive tech announces the stakes.
+ *
+ * Renders one question at a time — sequencing is the consumer's responsibility.
+ */
+export interface ConfirmPromptProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+    /** The question being asked. */
+    question: ReactNode;
+    /** Optional secondary line under the question. */
+    description?: ReactNode;
+    /** Optional short header chip (rendered as a Badge). */
+    badge?: ReactNode;
+    /** Tone of the confirm action. `destructive` also exposes role=alertdialog. */
+    variant?: "primary" | "destructive";
+    /** Confirm button label. Defaults to "Confirm". */
+    confirmLabel?: ReactNode;
+    /** Cancel button label. Defaults to "Cancel". Omit `onCancel` to hide it. */
+    cancelLabel?: ReactNode;
+    /** Pressing Confirm. */
+    onConfirm?: () => void;
+    /** Pressing Cancel. */
+    onCancel?: () => void;
+}
+declare const ConfirmPrompt: import("react").ForwardRefExoticComponent<ConfirmPromptProps & import("react").RefAttributes<HTMLElement>>;
+export { ConfirmPrompt };

package/dist/components/composites/confirm-prompt/index.d.ts

@@ -0,0 +1 @@
+export { ConfirmPrompt, type ConfirmPromptProps } from "./confirm-prompt.js";

package/dist/components/composites/cron-jobs-list/cron-jobs-list.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { type CronJob } from "../../primitives/cron-job-card/index.js";
+interface CronJobsListProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onToggle"> {
+    jobs: CronJob[];
+    title?: ReactNode;
+    onAdd?: () => void;
+    onRunNow?: (id: string) => void;
+    onToggle?: (id: string, enabled: boolean) => void;
+    onRemove?: (id: string) => void;
+}
+/**
+ * CronJobsList — grid of CronJobCards with a sticky "new job" action.
+ */
+declare const CronJobsList: import("react").ForwardRefExoticComponent<CronJobsListProps & import("react").RefAttributes<HTMLDivElement>>;
+export { CronJobsList };

package/dist/components/composites/cron-jobs-list/index.d.ts

@@ -0,0 +1 @@
+export { CronJobsList } from "./cron-jobs-list.js";

package/dist/components/composites/data-table/data-table.d.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from "react";
+/**
+ * DataTable — generic, sortable, expandable composite over `<Table>`.
+ *
+ * Adds operator-grade entity-list patterns on top of the plain Table
+ * primitive: sortable headers, sticky header, expandable rows
+ * (multi-row by default), row action menus (Dropdown), client-side
+ * pagination, loading skeleton rows, empty state. Both sort and
+ * pagination support controlled OR uncontrolled mode (consumer
+ * passes onSortChange / onPageChange to take over state).
+ *
+ * @example
+ *   <DataTable
+ *     columns={[
+ *       { key: "name", label: "Name", sortable: true },
+ *       { key: "status", label: "Status" },
+ *     ]}
+ *     data={domains}
+ *     rowKey={(d) => d.id}
+ *     expandable={(d) => d.status === "pending" ? <DnsRecords domain={d} /> : null}
+ *     rowActions={(d) => (
+ *       <>
+ *         <DropdownMenu.Item onSelect={() => editDomain(d)}>Edit</DropdownMenu.Item>
+ *         <DropdownMenu.Item onSelect={() => deleteDomain(d)}>Delete</DropdownMenu.Item>
+ *       </>
+ *     )}
+ *   />
+ */
+export interface DataTableColumn<T> {
+    key: string;
+    label: ReactNode;
+    align?: "left" | "center" | "right";
+    sortable?: boolean;
+    width?: string;
+    render?: (row: T) => ReactNode;
+    className?: string;
+}
+export interface DataTableSort {
+    key: string;
+    direction: "asc" | "desc";
+}
+export interface DataTableProps<T> {
+    data: T[];
+    columns: DataTableColumn<T>[];
+    rowKey: (row: T) => string;
+    stickyHeader?: boolean;
+    expandable?: (row: T) => ReactNode | null;
+    expandMode?: "single" | "multiple";
+    rowActions?: (row: T) => ReactNode;
+    pagination?: {
+        pageSize: number;
+        controlledPage?: number;
+        onPageChange?: (page: number) => void;
+    } | null;
+    defaultSort?: DataTableSort;
+    sort?: DataTableSort | null;
+    onSortChange?: (sort: DataTableSort | null) => void;
+    loading?: boolean;
+    emptyState?: ReactNode;
+    className?: string;
+}
+declare function DataTable<T>(props: DataTableProps<T>): ReactNode;
+export { DataTable };

package/dist/components/composites/data-table/index.d.ts

@@ -0,0 +1 @@
+export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, } from "./data-table.js";

package/dist/components/composites/deployment-row/deployment-row.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type DeploymentStatus = "queued" | "building" | "deploying" | "live" | "failed" | "cancelled" | "idle";
+export interface Deployment {
+    id: string;
+    status: DeploymentStatus;
+    environment: string;
+    branch: string;
+    commitSha: string;
+    commitMessage: string;
+    author?: {
+        name: string;
+        avatarUrl?: string;
+    };
+    duration?: string;
+    timeAgo: string;
+}
+interface DeploymentRowProps extends HTMLAttributes<HTMLDivElement> {
+    deployment: Deployment;
+    actions?: ReactNode;
+}
+/**
+ * DeploymentRow — one row in a deployment list (table-ish layout).
+ *
+ * Inspired by Vercel/Railway deployment lists. Composes Badge + Badge.Dot for status,
+ * mono font for SHA/branch, muted-foreground for metadata.
+ */
+declare const DeploymentRow: import("react").ForwardRefExoticComponent<DeploymentRowProps & import("react").RefAttributes<HTMLDivElement>>;
+export { DeploymentRow };

package/dist/components/composites/deployment-row/index.d.ts

@@ -0,0 +1 @@
+export { DeploymentRow, type Deployment, type DeploymentStatus } from "./deployment-row.js";

package/dist/components/composites/domain-config/domain-config.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from "react";
+export type DomainStatus = "verified" | "pending" | "invalid";
+export interface Domain {
+    id: string;
+    hostname: string;
+    status: DomainStatus;
+    primary?: boolean;
+    /**
+     * TLS state. If true, certificate is provisioned & valid.
+     */
+    tls?: boolean;
+    /**
+     * DNS record the user must add to verify ownership.
+     */
+    verificationRecord?: {
+        type: "TXT" | "CNAME" | "A";
+        name: string;
+        value: string;
+    };
+}
+interface DomainConfigProps extends HTMLAttributes<HTMLDivElement> {
+    domains: Domain[];
+    onAdd?: (hostname: string) => void;
+    onRemove?: (id: string) => void;
+    onSetPrimary?: (id: string) => void;
+}
+/**
+ * DomainConfig — manage custom domains for a project.
+ *
+ * Shows: hostname, status, TLS, primary flag, and verification DNS record when pending.
+ * Common in every cloud dashboard (Vercel, Railway, Render).
+ */
+declare const DomainConfig: import("react").ForwardRefExoticComponent<DomainConfigProps & import("react").RefAttributes<HTMLDivElement>>;
+export { DomainConfig };

package/dist/components/composites/domain-config/index.d.ts

@@ -0,0 +1 @@
+export { DomainConfig, type Domain, type DomainStatus } from "./domain-config.js";

package/dist/components/composites/env-var-editor/env-var-editor.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLAttributes } from "react";
+export type EnvScope = "production" | "staging" | "preview" | "all" | string;
+export interface EnvVar {
+    id: string;
+    key: string;
+    /**
+     * Secret value. If `masked` is true, value is hidden by default.
+     */
+    value: string;
+    masked?: boolean;
+    scope?: EnvScope;
+    /**
+     * Read-only marker (e.g. system-managed vars like THEO_DEPLOY_ID).
+     */
+    readonly?: boolean;
+}
+interface EnvVarEditorProps extends HTMLAttributes<HTMLDivElement> {
+    vars: EnvVar[];
+    onAdd?: (entry: Omit<EnvVar, "id">) => void;
+    onRemove?: (id: string) => void;
+    /**
+     * Available scope options for the add form. Defaults to a sensible PaaS set.
+     */
+    scopeOptions?: EnvScope[];
+}
+/**
+ * EnvVarEditor — table-like editor for environment variables.
+ *
+ * Mono font on keys/values, mask toggle on secret values, scope badge,
+ * remove + copy actions. Add form sits above the list.
+ *
+ * Stateless: caller controls the list and reacts to onAdd / onRemove.
+ */
+declare const EnvVarEditor: import("react").ForwardRefExoticComponent<EnvVarEditorProps & import("react").RefAttributes<HTMLDivElement>>;
+export { EnvVarEditor };

package/dist/components/composites/env-var-editor/index.d.ts

@@ -0,0 +1 @@
+export { EnvVarEditor, type EnvScope, type EnvVar } from "./env-var-editor.js";

package/dist/components/composites/mcp-server-list/index.d.ts

@@ -0,0 +1 @@
+export { MCPServerList } from "./mcp-server-list.js";

package/dist/components/composites/mcp-server-list/mcp-server-list.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { type MCPServer } from "../../primitives/mcp-server-card/index.js";
+interface MCPServerListProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    servers: MCPServer[];
+    title?: ReactNode;
+    onAdd?: () => void;
+    onRestart?: (id: string) => void;
+    onDisconnect?: (id: string) => void;
+}
+/**
+ * MCPServerList — grouped MCP server inventory with status filter chips.
+ * Surfaces degraded/disconnected servers prominently so the user can act.
+ */
+declare const MCPServerList: import("react").ForwardRefExoticComponent<MCPServerListProps & import("react").RefAttributes<HTMLDivElement>>;
+export { MCPServerList };

package/dist/components/composites/metric-card/index.d.ts

@@ -0,0 +1,2 @@
+export { MetricCard } from "./metric-card.js";
+export type { MetricCardDelta, MetricCardProps, MetricCardTrend, } from "./metric-card.js";

package/dist/components/composites/metric-card/metric-card.d.ts

@@ -0,0 +1,46 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/**
+ * MetricCard — dashboard metric tile (composite).
+ *
+ * Pattern recurrente "Card + CardHeader + value + delta + trend icon" promoted
+ * to a first-class composite per ADR-0007 community-best-practices plan.
+ *
+ * Trend → token mapping (default `invertTrend=false`):
+ *   up    → text-success     (positive growth)
+ *   down  → text-destructive (negative growth)
+ *   neutral → text-muted-foreground
+ *
+ * EC-17 absorbed: pass `invertTrend` for metrics where "up is bad" (cost,
+ * churn, latency). The mapping inverts cleanly:
+ *   up    → text-destructive (cost growing = bad)
+ *   down  → text-success     (cost dropping = good)
+ *
+ * @example
+ *   <MetricCard title="Revenue" value="$12,345" delta={{ value: "+12%", trend: "up" }} />
+ *   <MetricCard title="Monthly Cost" value="$3,200" delta={{ value: "+18%", trend: "up" }} invertTrend />
+ */
+export type MetricCardTrend = "up" | "down" | "neutral";
+export interface MetricCardDelta {
+    /** Display text (e.g., `"+12%"`, `"-3.4 pp"`, `"unchanged"`). */
+    value: string;
+    /** Trend direction — drives icon and color (subject to `invertTrend`). */
+    trend: MetricCardTrend;
+}
+export interface MetricCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Metric label (e.g., "Revenue", "Active Users"). */
+    title: string;
+    /** Headline value (e.g., "$12,345", "1,234"). */
+    value: ReactNode;
+    /** Optional delta with trend direction. */
+    delta?: MetricCardDelta;
+    /** Optional subtle context line below the value (e.g., "vs last month"). */
+    hint?: ReactNode;
+    /** Optional icon rendered top-right (e.g., `<DollarSign />`). */
+    icon?: ReactNode;
+    /**
+     * EC-17: invert default trend semantics. Use for Cost / Churn / Latency
+     * metrics where "up" is bad. Default `false` (Revenue / Users / Conversions).
+     */
+    invertTrend?: boolean;
+}
+export declare const MetricCard: import("react").ForwardRefExoticComponent<MetricCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/composites/multi-select-prompt/index.d.ts

@@ -0,0 +1 @@
+export { MultiSelectPrompt, type MultiSelectPromptProps, type MultiSelectPromptResult, } from "./multi-select-prompt.js";

package/dist/components/composites/multi-select-prompt/multi-select-prompt.d.ts

@@ -0,0 +1,61 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { type PromptOption } from "../../../lib/prompt.js";
+/**
+ * MultiSelectPrompt — multi-select "ask the user" card for agent surfaces.
+ *
+ * The checkbox sibling of `ChoicePrompt`: same question + header chip + option
+ * shape + `1`..`9` number-key toggles + injectable free-text "Other" +
+ * side-by-side preview, but the user may select any number of options.
+ *
+ * Renders one question at a time — sequencing is the consumer's responsibility.
+ * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ */
+/** Payload handed to `onConfirm`. */
+export interface MultiSelectPromptResult {
+    /** The selected option values (includes the reserved Other value when checked). */
+    values: string[];
+    /** Present only when the Other option is among the selected values. */
+    otherText?: string;
+}
+export interface MultiSelectPromptProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+    /** The question being asked. */
+    question: ReactNode;
+    /** Optional secondary line under the question. */
+    description?: ReactNode;
+    /** Optional short header chip (rendered as a Badge). */
+    badge?: ReactNode;
+    /** The selectable options. */
+    options: PromptOption[];
+    /** Controlled selected values. */
+    value?: string[];
+    /** Initial selected values when uncontrolled. */
+    defaultValue?: string[];
+    /** Fired with the full value array whenever the selection changes. */
+    onValueChange?: (values: string[]) => void;
+    /** Inject a free-text "Other" option as the last row. */
+    allowOther?: boolean;
+    /** Label for the Other row. Defaults to "Other". */
+    otherLabel?: ReactNode;
+    /** Placeholder for the Other text field. */
+    otherPlaceholder?: string;
+    /** Controlled Other text. */
+    otherText?: string;
+    /** Fired with the Other text on every keystroke. */
+    onOtherTextChange?: (text: string) => void;
+    /** Enable `1`..`9` number-key toggling. Default true. */
+    enableKeyboardShortcuts?: boolean;
+    /** Show the `1`..`9` hint chips next to options. Defaults to the shortcut flag. */
+    showNumbers?: boolean;
+    /** Minimum selections required before Confirm enables. Default 1. */
+    minSelected?: number;
+    /** Confirm button label. Defaults to "Confirm". Omit `onConfirm` to hide it. */
+    confirmLabel?: ReactNode;
+    /** Cancel button label. Defaults to "Cancel". Omit `onCancel` to hide it. */
+    cancelLabel?: ReactNode;
+    /** Pressing Confirm. Receives the selection (and Other text when relevant). */
+    onConfirm?: (result: MultiSelectPromptResult) => void;
+    /** Pressing Cancel. */
+    onCancel?: () => void;
+}
+declare const MultiSelectPrompt: import("react").ForwardRefExoticComponent<MultiSelectPromptProps & import("react").RefAttributes<HTMLElement>>;
+export { MultiSelectPrompt };

package/dist/components/composites/page-shell/index.d.ts

@@ -0,0 +1 @@
+export { PageShell, type PageShellProps } from "./page-shell.js";

package/dist/components/composites/page-shell/page-shell.d.ts

@@ -0,0 +1,68 @@
+import type { ElementType, ReactNode } from "react";
+/**
+ * PageShell — page-level scaffold composite.
+ *
+ * Renders title + optional description + optional ActionBar, then
+ * one of four mutually-exclusive content states:
+ *   1. loading (highest precedence)
+ *   2. error
+ *   3. empty
+ *   4. children (default)
+ *
+ * Scope-narrowed per Brief #5 D3: PageShell does NOT manage
+ * `document.title`. Use the optional `onTitleChange` callback to
+ * wire your own hook (e.g. useSetPageTitle, react-helmet,
+ * next/head).
+ *
+ * @example
+ *   <PageShell
+ *     title="Domains"
+ *     description="Custom domains and DNS verification."
+ *     search={{ placeholder: "Search…", value: q, onChange: setQ }}
+ *     primaryAction={{ label: "Add domain", icon: Plus, onClick: openModal }}
+ *     loading={isLoading}
+ *     error={error ? { message: error.message, onRetry: refetch } : undefined}
+ *     empty={data?.length === 0 ? { title: "No domains yet" } : undefined}
+ *   >
+ *     <DataTable columns={…} data={data} />
+ *   </PageShell>
+ */
+export interface PageShellProps {
+    title: string;
+    description?: ReactNode;
+    /** Optional callback invoked when `title` changes — wire to your own document.title hook. */
+    onTitleChange?: (title: string) => void;
+    primaryAction?: {
+        label: ReactNode;
+        icon?: ElementType;
+        onClick: () => void;
+        loading?: boolean;
+    };
+    search?: {
+        placeholder: string;
+        value: string;
+        onChange: (v: string) => void;
+    };
+    onFilterClick?: () => void;
+    loading?: boolean;
+    /** Custom loading UI. Defaults to a centered spinner card. */
+    loadingNode?: ReactNode;
+    error?: {
+        message: string;
+        onRetry?: () => void;
+        docsHref?: string;
+    };
+    empty?: {
+        icon?: ElementType;
+        title: string;
+        description?: ReactNode;
+        action?: {
+            label: string;
+            onClick: () => void;
+        };
+    };
+    children?: ReactNode;
+    className?: string;
+}
+declare const PageShell: import("react").ForwardRefExoticComponent<PageShellProps & import("react").RefAttributes<HTMLElement>>;
+export { PageShell };

package/dist/components/composites/permission-modal/index.d.ts

@@ -0,0 +1 @@
+export { PermissionModal } from "./permission-modal.js";

package/dist/components/composites/permission-modal/permission-modal.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+import type { PermissionDecision, PermissionOperation, PermissionRequest } from "../../../types/permission.js";
+/**
+ * Friendly operation labels used by the default copy. Override with the
+ * `operationLabels` prop to localize or rephrase per project.
+ */
+export declare const defaultOperationLabels: Record<PermissionOperation, string>;
+interface PermissionModalLabels {
+    /** "Cancel" button. */
+    cancel: ReactNode;
+    /** "Always allow" tertiary button. */
+    always: ReactNode;
+    /** "Allow once" primary button. */
+    allow: ReactNode;
+    /** Inline label rendered before the operation list inside the body card. */
+    requestedOps: ReactNode;
+}
+interface PermissionModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    request: PermissionRequest;
+    /**
+     * Fires when the user picks a decision. The modal does NOT auto-close;
+     * caller decides whether the decision should dismiss the modal.
+     */
+    onDecide: (decision: PermissionDecision) => void;
+    /** Override the modal title. Defaults to "Allow Theo to {ops} files in {path}?". */
+    title?: ReactNode;
+    /** Override the modal description (body lead text). */
+    description?: ReactNode;
+    /** Override the verb used for each operation in the default copy. */
+    operationLabels?: Partial<Record<PermissionOperation, string>>;
+    /** Override button text + inline labels. Useful for i18n. */
+    labels?: Partial<PermissionModalLabels>;
+}
+/**
+ * PermissionModal — local-files access prompt built on Dialog.
+ *
+ * Three actions: Cancel (denied), Always allow, Allow once. Per WIREMOCKS §5,
+ * the path is shown in the title (not hidden in body) and destructive
+ * operations are listed inline.
+ *
+ * All visible text can be overridden via `title`, `description`,
+ * `operationLabels`, and `labels`. Defaults are English; pass overrides for
+ * other locales.
+ */
+declare function PermissionModal({ open, onOpenChange, request, onDecide, title, description, operationLabels, labels, }: PermissionModalProps): import("react/jsx-runtime").JSX.Element;
+export { PermissionModal };

package/dist/components/composites/preview-env-card/index.d.ts

@@ -0,0 +1 @@
+export { PreviewEnvCard, type PreviewEnv, type PreviewService } from "./preview-env-card.js";

package/dist/components/composites/preview-env-card/preview-env-card.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { DeploymentStatus } from "../deployment-row/deployment-row.js";
+export interface PreviewService {
+    /** Service name e.g. "api", "web", "worker". */
+    name: string;
+    /** Live URL or null if not exposed (worker). */
+    url?: string;
+    status: DeploymentStatus;
+}
+export interface PreviewEnv {
+    id: string;
+    prNumber: number;
+    prTitle: string;
+    branch: string;
+    author?: {
+        name: string;
+        avatarUrl?: string;
+    };
+    services: PreviewService[];
+    createdAt: string;
+}
+interface PreviewEnvCardProps extends HTMLAttributes<HTMLDivElement> {
+    env: PreviewEnv;
+    actions?: ReactNode;
+}
+/**
+ * PreviewEnvCard — preview environment card surfacing all services from one PR.
+ *
+ * Theo's killer feature: full-stack preview environments. The card shows:
+ *   - PR number + title at the top
+ *   - branch + author in the metadata row
+ *   - one badge per service with its own status + URL
+ *   - bottom action row (Open, Promote, Delete)
+ */
+declare const PreviewEnvCard: import("react").ForwardRefExoticComponent<PreviewEnvCardProps & import("react").RefAttributes<HTMLDivElement>>;
+export { PreviewEnvCard };

package/dist/components/composites/preview-panel/index.d.ts

@@ -0,0 +1 @@
+export { PreviewPanel } from "./preview-panel.js";

package/dist/components/composites/preview-panel/preview-panel.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+interface PreviewPanelProps extends Omit<HTMLAttributes<HTMLElement>, "content"> {
+    url: string;
+    onUrlChange?: (next: string) => void;
+    onBack?: () => void;
+    onForward?: () => void;
+    onReload?: () => void;
+    /**
+     * Region rendered as the preview body. Typically an <iframe>.
+     */
+    content: ReactNode;
+    /**
+     * Optional logs section rendered below the preview (e.g. dev server output).
+     */
+    logsSlot?: ReactNode;
+}
+/**
+ * PreviewPanel — browser preview with controls + integrated logs slot.
+ *
+ * The Code workspace shows live dev-server URL + HMR logs side-by-side; this
+ * panel keeps both in a single card so the user doesn't switch contexts.
+ */
+declare const PreviewPanel: import("react").ForwardRefExoticComponent<PreviewPanelProps & import("react").RefAttributes<HTMLElement>>;
+export { PreviewPanel };

package/dist/components/composites/project-card/index.d.ts

@@ -0,0 +1 @@
+export { ProjectCard, type Project } from "./project-card.js";

package/dist/components/composites/project-card/project-card.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { DeploymentStatus } from "../deployment-row/deployment-row.js";
+export interface Project {
+    id: string;
+    name: string;
+    description?: string;
+    framework?: string;
+    branch: string;
+    commitSha: string;
+    commitMessage?: string;
+    status: DeploymentStatus;
+    url?: string;
+    region?: string;
+    lastDeployedAt: string;
+}
+interface ProjectCardProps extends HTMLAttributes<HTMLAnchorElement | HTMLDivElement> {
+    project: Project;
+    href?: string;
+    actions?: ReactNode;
+    /**
+     * Show the project description and commit message. Default true.
+     */
+    detailed?: boolean;
+}
+/**
+ * ProjectCard — surface for a project in a project listing.
+ *
+ * Light hover lift (no shadow inflation), violet ring on focus,
+ * status badge with optional pulse, framework + region in muted footer.
+ */
+declare const ProjectCard: import("react").ForwardRefExoticComponent<ProjectCardProps & import("react").RefAttributes<HTMLElement>>;
+export { ProjectCard };

package/dist/components/composites/rollback-ui/index.d.ts

@@ -0,0 +1 @@
+export { RollbackUI, type RollbackTarget } from "./rollback-ui.js";