@pcoi/components 0.1.1 → 1.0.0

package/dist/index.d.ts

@@ -1,666 +1,924 @@
-import { default as default_2 } from 'react';
-
-/**
- * PCOI Badge — Small label for status indicators, categories, and counts
- * Tokens: surface/accent-dim, text/accent, text/success, text/error,
- *         text/warning, text/info, radius-full, font-family/mono
- */
-export declare const Badge: default_2.ForwardRefExoticComponent<BadgeProps & default_2.RefAttributes<HTMLSpanElement>>;
-
-export declare interface BadgeProps extends default_2.HTMLAttributes<HTMLSpanElement> {
-    /** Badge content */
-    children: default_2.ReactNode;
-    /** Color variant */
-    variant?: BadgeVariant;
-}
-
-export declare type BadgeVariant = "default" | "success" | "error" | "warning" | "info";
-
-/**
- * PCOI Button Component
- *
- * Variants:
- *   - primary: Gold accent bg, dark text. Hero CTA, form submit.
- *   - ghost: Transparent bg, subtle border. Secondary actions.
- *   - nav-cta: Compact primary for navigation bar.
- *
- * Tokens consumed:
- *   - action/primary-bg, action/primary-bg-hover, action/primary-text
- *   - action/ghost-bg, action/ghost-border, action/ghost-text
- *   - radius-sm, transition/fast
- *   - shadow/btn-primary-hover, transform/hover-lift
- */
-export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
-
-export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Visual variant */
-    variant?: ButtonVariant;
-    /** Size preset */
-    size?: ButtonSize;
-    /** Content */
-    children: default_2.ReactNode;
-}
-
-export declare type ButtonSize = "default" | "large";
-
-export declare type ButtonVariant = "primary" | "ghost" | "nav-cta";
-
-/**
- * PCOI Callout / Blockquote
- * Tokens: spacing-40 (padding), text/secondary, text/accent (link)
- */
-export declare const Callout: default_2.ForwardRefExoticComponent<CalloutProps & default_2.RefAttributes<HTMLDivElement>>;
-
-export declare interface CalloutProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    /** Quote text */
+import { ChangeEvent } from 'react';
+import { CSSProperties } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+
+export declare function AgentCard({ name, status, badge, output, state, ...dataAttrs }: AgentCardProps): JSX.Element;
+
+export declare interface AgentCardProps extends DataAttributes {
+    name: string;
+    status: StatusDotStatus;
+    badge?: ReactNode;
+    output?: ReactNode;
+    state?: AgentCardState;
+}
+
+export declare type AgentCardState = "collapsed" | "expanded";
+
+export declare function AgentList({ agents, ariaLabel, ...dataAttrs }: AgentListProps): JSX.Element;
+
+export declare interface AgentListItem extends Omit<AgentCardProps, "state"> {
+    state?: AgentCardState;
+}
+
+export declare interface AgentListProps extends DataAttributes {
+    agents: AgentListItem[];
+    ariaLabel?: string;
+}
+
+export declare function Badge({ shape, variant, showIcon, label, number, ariaLabel, ...dataAttrs }: BadgeProps): JSX.Element;
+
+export declare interface BadgeProps extends DataAttributes {
+    shape: "pill" | "circle";
+    variant?: "default" | "success" | "error" | "warning" | "info";
+    showIcon?: boolean;
+    label?: string;
+    number?: string;
+    ariaLabel?: string;
+}
+
+export declare function Button({ style, size, state, disabled, focused, loading, loadingPosition, startIcon, endIcon, label, fullWidth, type, success, onClick, ...dataAttrs }: ButtonProps): JSX.Element;
+
+export declare interface ButtonProps extends DataAttributes {
+    style: "primary" | "ghost" | "destructive";
+    size?: "small" | "default" | "large";
+    state?: "default" | "hover" | "pressed" | "disabled";
+    disabled?: boolean;
+    focused?: boolean;
+    loading?: boolean;
+    loadingPosition?: "start" | "end" | "center";
+    startIcon?: ReactElement;
+    endIcon?: ReactElement;
+    label: string;
+    fullWidth?: boolean;
+    type?: "button" | "submit";
+    success?: boolean;
+    onClick?: (event: MouseEvent_2<HTMLButtonElement>) => void;
+}
+
+export declare function Callout({ quote, attribution, ...dataAttrs }: CalloutProps): JSX.Element;
+
+export declare interface CalloutProps extends DataAttributes {
     quote: string;
-    /** Attribution name */
     attribution?: string;
-    /** Attribution title/context */
-    attributionTitle?: string;
-    /** Link URL */
-    sourceUrl?: string;
-    /** Link label */
-    sourceLabel?: string;
-}
-
-/**
- * PCOI Card Component
- *
- * Three variants extracted from pcoi.ai:
- *   - problem: bg-card, icon box + title + description (Problem section)
- *   - who: surface bg, accent title (Who It's For section)
- *   - principle: bg-card, roman numeral + title + description (Principles section)
- *
- * Tokens consumed:
- *   - bg/card, bg/surface, border/default, border/hover
- *   - radius-md, spacing-36 (padding), spacing-20 (icon margin)
- *   - text/primary, text/secondary, text/accent
- *   - transition/medium, transform/hover-lift
- */
-export declare const Card: default_2.ForwardRefExoticComponent<CardProps & default_2.RefAttributes<HTMLDivElement>>;
-
-export declare interface CardProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    /** Card visual variant */
-    variant?: CardVariant;
-    /** Card title */
+}
+
+export declare function Card({ title, description, label, showIcon, showLabel, showAction, icon, onAction, accentTitle, state, actionLabel, actionStartIcon, actionEndIcon, ...dataAttrs }: CardProps): JSX.Element;
+
+export declare interface CardProps extends DataAttributes {
     title: string;
-    /** Card body text */
-    description: string;
-    /** Icon element (for problem cards) */
-    icon?: default_2.ReactNode;
-    /** Roman numeral or number (for principle cards) */
-    number?: string;
-    /** Heading level for the title (default: "h3") */
-    headingLevel?: HeadingLevel;
-}
-
-export declare type CardVariant = "problem" | "who" | "principle";
-
-/**
- * PCOI ChatInterface — Top-level chat composition
- * Empty state: suggestions + prompt. Active state: messages + prompt.
- * Tokens: bg/default, container/narrow, spacing-16/24
- */
-export declare const ChatInterface: default_2.ForwardRefExoticComponent<ChatInterfaceProps & default_2.RefAttributes<HTMLDivElement>>;
-
-export declare interface ChatInterfaceMessage {
-    id: string;
-    role: ChatMessageRole;
-    content: default_2.ReactNode;
-    citations?: Citation[];
-    timestamp?: string;
-}
-
-export declare interface ChatInterfaceProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    /** Conversation messages */
-    messages: ChatInterfaceMessage[];
-    /** Suggestion prompts for the empty state */
-    suggestions?: Suggestion[];
-    /** Current prompt textarea value */
-    promptValue: string;
-    /** Called when the prompt textarea changes */
-    onPromptChange: (value: string) => void;
-    /** Called when the user submits a prompt */
-    onPromptSubmit: (value: string) => void;
-    /** Called when a suggestion card is clicked */
-    onSuggestionSelect?: (suggestion: Suggestion) => void;
-    /** Called when a citation is clicked */
-    onCitationClick?: (citation: Citation) => void;
-    /** Textarea placeholder */
-    placeholder?: string;
-    /** Disable input while loading */
-    loading?: boolean;
+    description?: string;
+    label?: string;
+    showIcon?: boolean;
+    showLabel?: boolean;
+    showAction?: boolean;
+    icon?: ReactElement;
+    onAction?: () => void;
+    accentTitle?: boolean;
+    state?: "default" | "hover";
+    actionLabel?: string;
+    actionStartIcon?: ReactElement;
+    actionEndIcon?: ReactElement;
 }
 
-/**
- * PCOI ChatMessage — User or assistant message bubble
- * Tokens: surface/elevated (user), bg/card (assistant), border/card,
- *         radius-md, text/primary, text/muted, type/body-size
- */
-export declare const ChatMessage: default_2.ForwardRefExoticComponent<ChatMessageProps & default_2.RefAttributes<HTMLDivElement>>;
-
-/**
- * PCOI ChatMessageList — Scrollable container that auto-scrolls to newest message
- * Tokens: spacing-16/20 (gap), spacing-16/24 (padding)
- */
-export declare const ChatMessageList: default_2.ForwardRefExoticComponent<ChatMessageListProps & default_2.RefAttributes<HTMLDivElement>>;
-
-export declare interface ChatMessageListProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    /** ChatMessage elements */
-    children: default_2.ReactNode;
-}
-
-export declare interface ChatMessageProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    /** Message sender role */
-    role: ChatMessageRole;
-    /** Message body content */
-    children: default_2.ReactNode;
-    /** Citations referenced in the message */
-    citations?: Citation[];
-    /** Displayed below the message body */
-    timestamp?: string;
-    /** Called when a citation marker or source link is clicked */
-    onCitationClick?: (citation: Citation) => void;
-}
-
-/** Chat message sender role */
-export declare type ChatMessageRole = "user" | "assistant";
-
-/**
- * PCOI Checkbox — Custom styled checkbox with label
- * Tokens: bg/default, border/default, border/error, focus/border, focus/glow,
- *         action/primary-bg, action/primary-text, text/primary, text/error, radius-sm
- */
-export declare const Checkbox: default_2.ForwardRefExoticComponent<CheckboxProps & default_2.RefAttributes<HTMLInputElement>>;
-
-export declare interface CheckboxProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
-    /** Visible label text */
+export declare function CardShell({ children, style, className, ...dataAttrs }: CardShellProps): JSX.Element;
+
+export declare interface CardShellProps extends DataAttributes {
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+}
+
+export declare function ChatInterface({ messages, suggestions, typingSenderLabel, inputValue, inputPlaceholder, onInputChange, onSubmit, onSuggestionSelect, state, ...dataAttrs }: ChatInterfaceProps): JSX.Element;
+
+export declare interface ChatInterfaceProps extends DataAttributes {
+    messages?: ChatMessageListMessage[];
+    suggestions?: [SuggestionCardsItem, SuggestionCardsItem, SuggestionCardsItem];
+    typingSenderLabel?: string;
+    inputValue?: string;
+    inputPlaceholder?: string;
+    onInputChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    onSuggestionSelect?: (label: string) => void;
+    state?: ChatInterfaceState;
+}
+
+export declare type ChatInterfaceState = "empty" | "active" | "loading";
+
+export declare function ChatMessage({ sender, message, senderLabel, citation, ...dataAttrs }: ChatMessageProps): JSX.Element;
+
+export declare function ChatMessageList({ messages, maxWidthFraction, ariaLabel, emptyState, ...dataAttrs }: ChatMessageListProps): JSX.Element;
+
+export declare interface ChatMessageListMessage extends Omit<ChatMessageProps, "sender"> {
+    sender: ChatMessageProps["sender"];
+}
+
+export declare interface ChatMessageListProps extends DataAttributes {
+    messages: ChatMessageListMessage[];
+    maxWidthFraction?: number;
+    ariaLabel?: string;
+    emptyState?: ReactNode;
+}
+
+export declare interface ChatMessageProps extends DataAttributes {
+    sender: ChatMessageSender;
+    message: ReactNode;
+    senderLabel?: string;
+    citation?: ReactNode;
+}
+
+export declare type ChatMessageSender = "user" | "ai";
+
+export declare function Checkbox({ label, checked, defaultChecked, indeterminate, disabled, error, errorMessage, showError, focused, onChange, name, id, value, ...dataAttrs }: CheckboxProps): JSX.Element;
+
+export declare function CheckboxGroup({ label, options, values, defaultValues, disabled, error, errorMessage, onChange, name, children, ...dataAttrs }: CheckboxGroupProps): JSX.Element;
+
+export declare interface CheckboxGroupOption extends DataAttributes {
+    value: string;
     label: string;
-    /** Unique field name, also used to generate id */
-    name: string;
-    /** Error message — when truthy, field enters error state */
-    error?: string;
+    disabled?: boolean;
 }
 
-/** Citation reference from an assistant response */
-export declare interface Citation {
-    /** Unique citation index (1-based) */
-    index: number;
-    /** Short excerpt from the source document */
-    excerpt: string;
-    /** Source document title */
-    sourceTitle: string;
-    /** Source document identifier (e.g. URL or document ID) */
-    sourceId: string;
+export declare interface CheckboxGroupProps extends DataAttributes {
+    label: string;
+    options: CheckboxGroupOption[];
+    values?: string[];
+    defaultValues?: string[];
+    disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    onChange?: (values: string[], event: ChangeEvent<HTMLInputElement>) => void;
+    name?: string;
+    children?: ReactNode;
+}
+
+export declare interface CheckboxProps extends DataAttributes {
+    label: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    showError?: boolean;
+    focused?: boolean;
+    onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    name?: string;
+    id?: string;
+    value?: string;
+}
+
+export declare function CitationMark({ number, href, onClick, ariaLabel, ...dataAttrs }: CitationMarkProps): JSX.Element;
+
+export declare interface CitationMarkProps extends DataAttributes {
+    number: number | string;
+    href?: string;
+    onClick?: (event: MouseEvent_2<HTMLElement>) => void;
+    ariaLabel?: string;
 }
 
-/**
- * PCOI CitedExcerpt — Blockquote with excerpt text above, clickable index + source below
- * Tokens: surface/accent-dim, border/accent-dim, accent-border-w,
- *         radius-sm, text/secondary, text/accent, type/body-compact-size
- */
-export declare const CitedExcerpt: default_2.ForwardRefExoticComponent<CitedExcerptProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function CitedExcerpt({ index, excerpt, sourceTitle, showSourceTitle, onOpenSource, ...dataAttrs }: CitedExcerptProps): JSX.Element;
 
-export declare interface CitedExcerptProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    /** 1-based citation index */
+export declare interface CitedExcerptProps extends DataAttributes {
     index: number;
-    /** Short excerpt from the source document */
     excerpt: string;
-    /** Source document title */
-    sourceTitle: string;
-    /** Called when the source link is clicked */
-    onSourceClick?: () => void;
+    sourceTitle?: string;
+    showSourceTitle?: boolean;
+    onOpenSource?: () => void;
 }
 
-export declare interface ComparisonRow {
-    label: string;
-    competitor: string;
-    pcoi: string;
+export declare function CodeBlock({ code, preview, view, defaultView, onViewChange, layout, codeHeight, previewHeight, hideViewSwitcher, ariaLabel, copyButtonData, ...dataAttrs }: CodeBlockProps): JSX.Element;
+
+export declare type CodeBlockLayout = "centered" | "padded" | "fullscreen";
+
+export declare interface CodeBlockProps extends DataAttributes {
+    code: string;
+    preview?: ReactNode;
+    view?: CodeBlockView;
+    defaultView?: CodeBlockView;
+    onViewChange?: (view: CodeBlockView) => void;
+    layout?: CodeBlockLayout;
+    codeHeight?: string;
+    previewHeight?: string;
+    hideViewSwitcher?: boolean;
+    ariaLabel?: string;
+    copyButtonData?: DataAttributes;
 }
 
-/**
- * PCOI Comparison Table
- * Semantic <table> with 3 columns: label | competitor | PCOI (highlighted)
- * Tokens: radius-md, border/default, bg/alt, surface/accent-dim, text/accent
- */
-export declare const ComparisonTable: default_2.ForwardRefExoticComponent<ComparisonTableProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare type CodeBlockView = "code" | "preview" | "split";
+
+export declare function CodeInline({ code, children, ...dataAttrs }: CodeInlineProps): JSX.Element;
 
-export declare interface ComparisonTableProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    competitorName?: string;
-    pcoiName?: string;
+export declare interface CodeInlineProps extends DataAttributes {
+    code?: string;
+    children?: ReactNode;
+}
+
+export declare interface ComparisonRow extends DataAttributes {
+    feature: string;
+    competitor: string | React.ReactNode;
+    pcoi: string | React.ReactNode;
+    selected?: boolean;
+}
+
+export declare function ComparisonTable({ headers, rows, caption, loading, density, onRowSelectionChange, staticRows, ...dataAttrs }: ComparisonTableProps): JSX.Element;
+
+export declare interface ComparisonTableProps extends DataAttributes {
+    headers: {
+        feature: string;
+        competitor: string;
+        pcoi: string;
+    };
     rows: ComparisonRow[];
+    caption?: string;
+    loading?: boolean;
+    density?: "default" | "compact";
+    onRowSelectionChange?: (rowIndex: number, selected: boolean) => void;
+    staticRows?: boolean;
 }
 
-/**
- * PCOI Contact Form
- * Composes: FormField (atom), Button (atom)
- * Tokens: bg/surface, border/default, radius-lg, spacing-40 (padding), spacing-20 (gap)
- */
-export declare const ContactForm: default_2.ForwardRefExoticComponent<ContactFormProps & default_2.RefAttributes<HTMLFormElement>>;
+export declare function ContactForm({ layout, onSubmit, submitting, disabled, success, successDurationMs, ...dataAttrs }: ContactFormProps): JSX.Element;
+
+export declare interface ContactFormProps extends DataAttributes {
+    layout?: "default" | "stacked";
+    onSubmit: (values: ContactFormValues) => void | Promise<void>;
+    submitting?: boolean;
+    disabled?: boolean;
+    success?: boolean;
+    successDurationMs?: number;
+}
 
-export declare interface ContactFormProps extends Omit<default_2.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
-    onSubmit?: (data: Record<string, string>) => void;
+export declare interface ContactFormValues {
+    name: string;
+    company: string;
+    role?: string;
+    email: string;
+    message: string;
 }
 
-/**
- * PCOI DataTable — Presentational data table for dashboards
- * Tokens: bg/card-hover, border/default, text/primary, text/secondary,
- *         font-size/caption/body-default, spacing-12/16
- */
-export declare const DataTable: default_2.ForwardRefExoticComponent<DataTableProps<Record<string, unknown>> & default_2.RefAttributes<HTMLDivElement>>;
+export declare type DataAttributes = {
+    [key: `data-${string}`]: string | undefined;
+};
+
+export declare function DataTable<T extends Record<string, unknown>>({ columns, rows, mode, state, density, sortColumn, sortDirection, onSort, selectedRowIds, getRowId, onRowSelectionChange, page, pageSize, totalRows, rowsPerPageOptions, onPageChange, onPageSizeChange, onLoadMore, emptyTitle, noResultsTitle, errorTitle, errorMessage, skeletonRows, ariaLabel, getRowData, ...dataAttrs }: DataTableProps<T>): JSX.Element;
 
-export declare interface DataTableColumn<T = Record<string, unknown>> {
-    /** Unique key matching a property on the row data */
-    key: string;
-    /** Column header text */
-    header: string;
-    /** Text alignment (default: "left") */
-    align?: "left" | "center" | "right";
-    /** Custom cell renderer */
-    render?: (value: unknown, row: T) => default_2.ReactNode;
+export declare type DataTableAlign = "left" | "center" | "right";
+
+export declare interface DataTableColumn<T> {
+    id: keyof T & string;
+    label: ReactNode;
+    align?: DataTableAlign;
+    sortable?: boolean;
+    width?: number | string;
+    render?: (row: T) => ReactNode;
 }
 
-export declare interface DataTableProps<T = Record<string, unknown>> extends default_2.HTMLAttributes<HTMLDivElement> {
-    /** Column definitions */
+export declare type DataTableDensity = "default" | "compact";
+
+export declare type DataTableMode = "static" | "paginated" | "scroll";
+
+export declare interface DataTableProps<T> extends DataAttributes {
     columns: DataTableColumn<T>[];
-    /** Row data */
     rows: T[];
-    /** Key extractor for row identity */
-    rowKey?: keyof T | ((row: T, index: number) => string);
-    /** Empty state message */
-    emptyText?: string;
-    /** Accessible label for the table (describes its content for screen readers) */
+    mode?: DataTableMode;
+    state?: DataTableState;
+    density?: DataTableDensity;
+    sortColumn?: string;
+    sortDirection?: DataTableSort;
+    onSort?: (column: string, direction: DataTableSort) => void;
+    selectedRowIds?: ReadonlyArray<string>;
+    getRowId?: (row: T, index: number) => string;
+    onRowSelectionChange?: (rowId: string, selected: boolean) => void;
+    page?: number;
+    pageSize?: number;
+    totalRows?: number;
+    rowsPerPageOptions?: number[];
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    onLoadMore?: () => void;
+    emptyTitle?: string;
+    noResultsTitle?: string;
+    errorTitle?: string;
+    errorMessage?: string;
+    skeletonRows?: number;
     ariaLabel?: string;
+    getRowData?: (row: T, index: number) => DataAttributes;
+}
+
+export declare type DataTableSort = "none" | "asc" | "desc";
+
+export declare type DataTableState = "default" | "no-data" | "no-results" | "error" | "loading" | "loading-more" | "error-loading-more";
+
+export declare function Divider({ variant, label, ...dataAttrs }: DividerProps): JSX.Element;
+
+export declare interface DividerProps extends DataAttributes {
+    variant?: "horizontal" | "vertical" | "withLabel";
+    label?: string;
 }
 
-/**
- * PCOI DocumentOverlay — Wide modal for viewing source documents with highlighted citations
- * Composes Modal (size="wide") + Badge
- * Tokens: surface/highlight, border/accent-subtle, container/document
- */
-export declare const DocumentOverlay: default_2.ForwardRefExoticComponent<DocumentOverlayProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function DocumentOverlay({ sourceLabel, title, children, onClose, onDownload, width, height, closeButtonData, downloadButtonData, ...dataAttrs }: DocumentOverlayProps): JSX.Element;
 
-export declare interface DocumentOverlayProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** Whether the overlay is visible */
-    open: boolean;
-    /** Called when the overlay should close */
+export declare interface DocumentOverlayProps extends DataAttributes {
+    sourceLabel: string;
+    title: string;
+    children?: ReactNode;
     onClose: () => void;
-    /** Document title shown in the header */
+    onDownload?: () => void;
+    width?: number | string;
+    height?: number | string;
+    closeButtonData?: DataAttributes;
+    downloadButtonData?: DataAttributes;
+}
+
+export declare function DocumentOverlayScreen(props: DocumentOverlayScreenProps): JSX.Element;
+
+export declare type DocumentOverlayScreenProps = DocumentOverlayProps;
+
+export declare function Dropdown({ label, showLabel, required, options, value, defaultValue, placeholder, density, helperText, error, errorMessage, disabled, hovered, focused, open: openProp, onChange, name, id, ...dataAttrs }: DropdownProps): JSX.Element;
+
+export declare type DropdownDensity = "default" | "compact";
+
+export declare function DropdownMenu({ items, density, selectedValue, onSelect, ariaLabel, autoFocus, id, ...dataAttrs }: DropdownMenuProps): JSX.Element;
+
+export declare type DropdownMenuDensity = "default" | "compact";
+
+export declare interface DropdownMenuItem extends DataAttributes {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    divider?: boolean;
+}
+
+export declare interface DropdownMenuProps extends DataAttributes {
+    items: DropdownMenuItem[];
+    density?: DropdownMenuDensity;
+    selectedValue?: string;
+    onSelect?: (value: string) => void;
+    ariaLabel: string;
+    autoFocus?: boolean;
+    id?: string;
+}
+
+export declare interface DropdownOption extends DataAttributes {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare interface DropdownProps extends DataAttributes {
+    label: string;
+    showLabel?: boolean;
+    required?: boolean;
+    options: DropdownOption[];
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    density?: DropdownDensity;
+    helperText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    open?: boolean;
+    onChange?: (value: string) => void;
+    name?: string;
+    id?: string;
+}
+
+export declare function FeedbackState({ type, title, description, action, ...dataAttrs }: FeedbackStateProps): JSX.Element;
+
+export declare interface FeedbackStateProps extends DataAttributes {
+    type?: FeedbackStateType;
     title: string;
-    /** Optional source label shown as a badge */
-    sourceLabel?: string;
-    /** Document body content */
-    children: default_2.ReactNode;
-    /** Element ID to scroll to and highlight on open */
-    highlightId?: string;
-    /** Citation index to display beside the highlighted element */
-    highlightIndex?: number;
-}
-
-/**
- * PCOI Footer
- * Tokens: border/default, spacing-60/40/24, text/secondary, text/muted
- */
-export declare const Footer: default_2.ForwardRefExoticComponent<FooterProps & default_2.RefAttributes<HTMLElement>>;
-
-/** @deprecated Use `LinkItem` from `@pcoi/components` instead */
-export declare type FooterLink = LinkItem;
-
-export declare interface FooterProps extends default_2.HTMLAttributes<HTMLElement> {
-    links?: LinkItem[];
+    description?: string;
+    action?: ReactNode;
+}
+
+export declare type FeedbackStateType = "empty" | "no-results" | "error";
+
+export declare function FocusGlow({ visible, ...dataAttrs }: FocusGlowProps): JSX.Element;
+
+export declare interface FocusGlowProps extends DataAttributes {
+    visible?: boolean;
+}
+
+export declare function Footer({ breakpoint, tagline, links, copyright, ...dataAttrs }: FooterProps): JSX.Element;
+
+export declare interface FooterLink extends DataAttributes {
+    label: string;
+    href: string;
+}
+
+export declare interface FooterProps extends DataAttributes {
+    breakpoint?: "desktop" | "mobile";
     tagline?: string;
-    copyright?: string;
+    links: FooterLink[];
+    copyright: string;
 }
 
-/**
- * PCOI FormField — Label + input/textarea atom
- * Tokens: bg/default, border/default, border/error, focus/border, focus/glow,
- *         text/primary, text/secondary, text/muted, text/error,
- *         radius-sm, spacing-6/12/14, font-size/caption/body-default
- */
-export declare const FormField: default_2.ForwardRefExoticComponent<FormFieldProps & default_2.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export declare function FormField({ label, showLabel, required, error, errorMessage, helperText, disabled, hovered, focused, value, defaultValue, placeholder, onChange, name, id, type, inputMode, autoComplete, ...dataAttrs }: FormFieldProps): JSX.Element;
+
+export declare function FormFieldArea({ label, showLabel, required, error, errorMessage, helperText, disabled, hovered, focused, value, defaultValue, placeholder, rows, onChange, name, id, maxLength, resize, ...dataAttrs }: FormFieldAreaProps): JSX.Element;
 
-export declare interface FormFieldProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "size"> {
-    /** Visible label text */
+export declare interface FormFieldAreaProps extends DataAttributes {
     label: string;
-    /** Unique field name, also used to generate id */
-    name: string;
-    /** Render as textarea instead of input */
-    multiline?: boolean;
-    /** Number of visible text rows when multiline (default 3) */
+    showLabel?: boolean;
+    required?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    disabled?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
     rows?: number;
-    /** Error message — when truthy, field enters error state */
-    error?: string;
+    onChange?: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;
+    name?: string;
+    id?: string;
+    maxLength?: number;
+    resize?: "none" | "vertical" | "horizontal" | "both";
 }
 
-/** Semantic heading level for document outline (h1–h6) */
-export declare type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export declare interface FormFieldProps extends DataAttributes {
+    label: string;
+    showLabel?: boolean;
+    required?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    disabled?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
+    name?: string;
+    id?: string;
+    type?: InputHTMLAttributes<HTMLInputElement>["type"];
+    inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
+    autoComplete?: string;
+}
 
-/**
- * PCOI How-It-Works Step
- * Tokens: spacing-32 (gap), spacing-40 (padding-y), border/default, radius-full (number circle)
- */
-export declare const HowStep: default_2.ForwardRefExoticComponent<HowStepProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function HeroBadge({ label, ariaLabel, ...dataAttrs }: HeroBadgeProps): JSX.Element;
 
-export declare interface HowStepProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    /** Step number displayed in circle (e.g., "01") */
-    number: string;
-    /** Step title */
+export declare interface HeroBadgeProps extends DataAttributes {
+    label: string;
+    ariaLabel?: string;
+}
+
+export declare function HeroVisual({ breakpoint, innerNodes, outerNodes, animated, ...dataAttrs }: HeroVisualProps): JSX.Element;
+
+export declare interface HeroVisualProps extends DataAttributes {
+    breakpoint?: "desktop" | "tablet" | "mobile";
+    innerNodes?: string[];
+    outerNodes?: string[];
+    animated?: boolean;
+}
+
+export declare function HowStep({ stepNumber, title, description, showDivider, ...dataAttrs }: HowStepProps): JSX.Element;
+
+export declare interface HowStepProps extends DataAttributes {
+    stepNumber: string;
     title: string;
-    /** Step description */
-    description: string;
-    /** Whether this is the last step (no bottom border) */
-    isLast?: boolean;
-    /** Heading level for the title (default: "h3") */
-    headingLevel?: HeadingLevel;
+    description?: string;
+    showDivider?: boolean;
 }
 
-/** Navigation link used by Nav, Footer, and any link-list component */
-export declare interface LinkItem {
+export declare function IconButton({ ariaLabel, icon, state, disabled, focused, onClick, type, ...dataAttrs }: IconButtonProps): JSX.Element;
+
+export declare interface IconButtonProps extends DataAttributes {
+    ariaLabel: string;
+    icon: ReactNode;
+    state?: "default" | "hover" | "pressed" | "disabled";
+    disabled?: boolean;
+    focused?: boolean;
+    onClick?: (event: MouseEvent_2<HTMLButtonElement>) => void;
+    type?: "button" | "submit" | "reset";
+}
+
+export declare function LearningCurveChart({ humanLabel, systemLabel, ...dataAttrs }: LearningCurveChartProps): JSX.Element;
+
+export declare interface LearningCurveChartProps extends DataAttributes {
+    humanLabel?: string;
+    systemLabel?: string;
+}
+
+export declare function LogoMark({ mode, ...dataAttrs }: LogoMarkProps): JSX.Element;
+
+export declare function LogoMarkP({ mode, ...dataAttrs }: LogoMarkPProps): JSX.Element;
+
+export declare type LogoMarkPMode = "Dark" | "Light" | "On Accent";
+
+export declare interface LogoMarkPProps extends DataAttributes {
+    mode?: LogoMarkPMode;
+}
+
+export declare interface LogoMarkProps extends DataAttributes {
+    mode?: "Dark" | "Light";
+}
+
+export declare function MetricBlock({ value, label, ...dataAttrs }: MetricBlockProps): JSX.Element;
+
+export declare interface MetricBlockProps extends DataAttributes {
+    value: string;
     label: string;
-    href: string;
-    /** Optional tracking identifier rendered as data-track-id on the anchor */
-    trackingId?: string;
-}
-
-/**
- * PCOI Logo Mark — Atom
- *
- * Renders the brand mark: accent-colored "P" + "COI" text wrapped in an anchor.
- * Single-sourced so Nav, Footer, and any future component share one implementation.
- *
- * Tokens consumed:
- *   - font-family/sans, font-size/logo, letterSpacing/logo
- *   - text/primary, text/accent
- */
-export declare const LogoMark: default_2.ForwardRefExoticComponent<LogoMarkProps & default_2.RefAttributes<HTMLAnchorElement>>;
-
-export declare type LogoMarkProps = default_2.AnchorHTMLAttributes<HTMLAnchorElement>;
-
-/**
- * PCOI Modal — Dialog overlay with focus trap
- * Tokens: bg/overlay, surface/elevated, border/default, shadow/elevated,
- *         zIndex/modal, radius-lg, text/primary, text/secondary
- */
-export declare const Modal: default_2.FC<ModalProps>;
-
-export declare interface ModalProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** Whether the modal is visible */
-    open: boolean;
-    /** Called when the modal should close */
+}
+
+export declare function MetricsRow({ metrics, ...dataAttrs }: MetricsRowProps): JSX.Element;
+
+export declare interface MetricsRowMetric {
+    value: string;
+    label: string;
+}
+
+export declare interface MetricsRowProps extends DataAttributes {
+    metrics: [MetricsRowMetric, MetricsRowMetric, MetricsRowMetric];
+}
+
+export declare function Modal({ title, children, actions, onClose, width, closeButtonData, specimen, ...dataAttrs }: ModalProps): JSX.Element;
+
+export declare function ModalOverlay({ children, onClick, zIndex, ...dataAttrs }: ModalOverlayProps): JSX.Element;
+
+export declare interface ModalOverlayProps extends DataAttributes {
+    children?: ReactNode;
+    onClick?: () => void;
+    zIndex?: number;
+}
+
+export declare interface ModalProps extends DataAttributes {
+    title: string;
+    children?: ReactNode;
+    actions?: ReactNode;
     onClose: () => void;
-    /** Modal title */
-    title?: string;
-    /** Heading level for the title (default: "h2") */
-    headingLevel?: HeadingLevel;
-    /** Dialog width: "default" (520px) or "wide" (900px) */
-    size?: "default" | "wide";
-    /** Modal body content */
-    children?: default_2.ReactNode;
-    /** Footer content (e.g. action buttons) */
-    footer?: default_2.ReactNode;
-}
-
-/**
- * PCOI Navigation Bar
- *
- * Fixed navbar with scroll-triggered backdrop, responsive hamburger menu.
- * Tokens: bg/nav-scrolled, blur/nav-backdrop, border/nav, spacing-72 (height)
- */
-export declare const Nav: default_2.ForwardRefExoticComponent<NavProps & default_2.RefAttributes<HTMLElement>>;
-
-/** @deprecated Use `LinkItem` from `@pcoi/components` instead */
-export declare type NavLink = LinkItem;
-
-export declare interface NavProps extends default_2.HTMLAttributes<HTMLElement> {
-    links?: LinkItem[];
-    ctaLabel?: string;
-    ctaHref?: string;
-    onCtaClick?: () => void;
-}
-
-/** Option item used by Select, RadioGroup */
-export declare interface OptionItem {
+    width?: number | string;
+    closeButtonData?: DataAttributes;
+    specimen?: boolean;
+}
+
+export declare function Nav({ breakpoint, links, cta, scrolled, onHamburgerToggle, menuOpen, menuPanelId, ...dataAttrs }: NavProps): JSX.Element;
+
+export declare interface NavLink extends DataAttributes {
     label: string;
-    value: string;
-    disabled?: boolean;
+    href: string;
 }
 
-/**
- * PCOI Panel — Dashboard section container with optional header
- * Tokens: bg/card, border/default, radius-md, spacing-16/24, text/primary
- */
-export declare const Panel: default_2.ForwardRefExoticComponent<PanelProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare interface NavProps extends DataAttributes {
+    breakpoint?: "desktop" | "mobile";
+    links: NavLink[];
+    cta?: {
+        label: string;
+        href: string;
+    };
+    scrolled?: boolean;
+    onHamburgerToggle?: () => void;
+    menuOpen?: boolean;
+    menuPanelId?: string;
+}
 
-export declare interface PanelProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    /** Panel title rendered in a header bar */
+export declare function NotificationBadge({ count, max, ariaLabel, ...dataAttrs }: NotificationBadgeProps): JSX.Element;
+
+export declare interface NotificationBadgeProps extends DataAttributes {
+    count: number | string;
+    max?: number;
+    ariaLabel?: string;
+}
+
+export declare function PipelineCard({ state, selected, taskName, description, timestamp, statusBadge, onClick, ...dataAttrs }: PipelineCardProps): JSX.Element;
+
+export declare interface PipelineCardProps extends DataAttributes {
+    state?: "default" | "hover" | "selected" | "selected-hover";
+    selected?: boolean;
+    taskName: string;
+    description: string;
+    timestamp: string;
+    statusBadge?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+export declare interface PipelineStage {
+    label: string;
+    state?: PipelineStageState;
+}
+
+export declare function PipelineStageChip({ label, state, ...dataAttrs }: PipelineStageChipProps): JSX.Element;
+
+export declare interface PipelineStageChipProps extends DataAttributes {
+    label: string;
+    state?: PipelineStageState;
+}
+
+export declare function PipelineStages({ stages, ariaLabel, ...dataAttrs }: PipelineStagesProps): JSX.Element;
+
+export declare interface PipelineStagesProps extends DataAttributes {
+    stages?: PipelineStage[];
+    ariaLabel: string;
+}
+
+export declare type PipelineStageState = "inactive" | "active" | "complete" | "error";
+
+export declare function Popover({ children, title, placement, onClose, ariaLabel, closeButtonData, ...dataAttrs }: PopoverProps): JSX.Element;
+
+export declare type PopoverPlacement = "top" | "bottom" | "left" | "right" | "none";
+
+export declare interface PopoverProps extends DataAttributes {
+    children: ReactNode;
     title?: string;
-    /** Heading level for the title (default: "h3") */
-    headingLevel?: HeadingLevel;
-    /** Action slot in the header (e.g. a Button or filter) */
-    action?: default_2.ReactNode;
-    /** Panel body content */
-    children: default_2.ReactNode;
-    /** Remove default body padding (for tables/charts that need edge-to-edge content) */
-    flush?: boolean;
-}
-
-/**
- * PCOI PromptBar — Textarea + send button for chat input
- * Tokens: bg/card, border/default, focus-border, radius-md,
- *         text/primary, text/muted, transition-fast
- */
-export declare const PromptBar: default_2.ForwardRefExoticComponent<PromptBarProps & default_2.RefAttributes<HTMLDivElement>>;
-
-export declare interface PromptBarProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "onChange" | "onSubmit"> {
-    /** Current textarea value */
-    value: string;
-    /** Called when the textarea value changes */
-    onChange: (value: string) => void;
-    /** Called when the user submits (Enter or send button) */
-    onSubmit: (value: string) => void;
-    /** Placeholder text */
+    placement?: PopoverPlacement;
+    onClose?: () => void;
+    ariaLabel?: string;
+    closeButtonData?: DataAttributes;
+}
+
+export declare function ProgressBar({ segments, ariaLabel, value, ...dataAttrs }: ProgressBarProps): JSX.Element;
+
+export declare interface ProgressBarProps extends DataAttributes {
+    segments?: ProgressSegmentStatus[];
+    ariaLabel: string;
+    value?: number;
+}
+
+export declare type ProgressSegmentStatus = "active" | "success" | "error" | "warning" | "info" | "inactive";
+
+export declare function ProjectHeader({ title, identifier, badges, ...dataAttrs }: ProjectHeaderProps): JSX.Element;
+
+export declare interface ProjectHeaderProps extends DataAttributes {
+    title: string;
+    identifier: string;
+    badges?: ReactNode[];
+}
+
+export declare function ProjectIdentifier({ identifier, maxWidth, ...dataAttrs }: ProjectIdentifierProps): JSX.Element;
+
+export declare interface ProjectIdentifierProps extends DataAttributes {
+    identifier: string;
+    maxWidth?: number | string;
+}
+
+export declare function ProjectIdentity({ title, identifier, layout, ...dataAttrs }: ProjectIdentityProps): JSX.Element;
+
+export declare type ProjectIdentityLayout = "stacked" | "inline";
+
+export declare interface ProjectIdentityProps extends DataAttributes {
+    title: string;
+    identifier: string;
+    layout?: ProjectIdentityLayout;
+}
+
+export declare function PromptBar({ value, defaultValue, placeholder, showSend, disabled, focused, state, onChange, onSubmit, ariaLabel, ...dataAttrs }: PromptBarProps): JSX.Element;
+
+export declare interface PromptBarProps extends DataAttributes {
+    value?: string;
+    defaultValue?: string;
     placeholder?: string;
-    /** Disable input and send */
+    showSend?: boolean;
     disabled?: boolean;
-    /** Show loading state on send button */
-    loading?: boolean;
+    focused?: boolean;
+    state?: "default" | "hover" | "focus";
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    ariaLabel?: string;
 }
 
-/**
- * PCOI RadioGroup — Accessible radio button group using fieldset/legend
- * Tokens: bg/default, border/default, border/error, focus/border, focus/glow,
- *         action/primary-bg, text/primary, text/secondary, text/error, radius-full
- */
-export declare const RadioGroup: default_2.ForwardRefExoticComponent<RadioGroupProps & default_2.RefAttributes<HTMLFieldSetElement>>;
+export declare function Radio({ label, value, checked, defaultChecked, disabled, error, errorMessage, showError, focused, onChange, name, id, ...dataAttrs }: RadioProps): JSX.Element;
+
+export declare function RadioGroup({ label, options, name, value, defaultValue, disabled, error, errorMessage, onChange, children, ...dataAttrs }: RadioGroupProps): JSX.Element;
 
-export declare interface RadioGroupProps extends Omit<default_2.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange"> {
-    /** Group label rendered as a fieldset legend */
+export declare interface RadioGroupOption extends DataAttributes {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare interface RadioGroupProps extends DataAttributes {
     label: string;
-    /** Shared name for all radio inputs */
+    options: RadioGroupOption[];
     name: string;
-    /** List of radio options */
-    options: OptionItem[];
-    /** Pre-selected value */
+    value?: string;
     defaultValue?: string;
-    /** Error message — when truthy, group enters error state */
-    error?: string;
-    /** Marks the group as required */
-    required?: boolean;
-    /** Disables all radio inputs */
     disabled?: boolean;
-    /** Called with the selected value when it changes */
-    onChange?: (value: string) => void;
+    error?: boolean;
+    errorMessage?: string;
+    onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
+    children?: ReactNode;
 }
 
-/**
- * PCOI Section Header
- *
- * Centered header pattern used across all major sections.
- * Label + H2 + optional description, max-width 800px.
- *
- * Tokens consumed:
- *   - text/accent (label), text/primary (h2), text/secondary (desc)
- *   - font-mono (label), font-sans (h2, desc)
- *   - spacing-16 (label mb, h2 mb), spacing-64 (section mb)
- *   - container-narrow (800px max-width)
- */
-export declare const SectionHeader: default_2.ForwardRefExoticComponent<SectionHeaderProps & default_2.RefAttributes<HTMLDivElement>>;
-
-export declare interface SectionHeaderProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    /** Section label (mono, uppercase, accent) e.g. "The Problem" */
+export declare interface RadioProps extends DataAttributes {
     label: string;
-    /** Main heading */
-    title: string;
-    /** Emphasized portion of title (renders in accent color) */
-    titleEmphasis?: string;
-    /** Optional subtitle/description */
-    description?: string;
-    /** Heading level for the title (default: "h2") */
-    headingLevel?: HeadingLevel;
+    value: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    showError?: boolean;
+    focused?: boolean;
+    onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
+    name?: string;
+    id?: string;
+}
+
+export declare function SectionHeader({ align, showLabel, label, showTitle, title, paragraphs, paragraph1, paragraph2, paragraph3, paragraph4, headingLevel, ...dataAttrs }: SectionHeaderProps): JSX.Element;
+
+export declare type SectionHeaderAlign = "center" | "left";
+
+export declare type SectionHeaderHeadingLevel = 1 | 2 | 3 | 4;
+
+export declare type SectionHeaderParagraphCount = 0 | 1 | 2 | 3 | 4;
+
+export declare interface SectionHeaderProps extends DataAttributes {
+    align?: SectionHeaderAlign;
+    showLabel?: boolean;
+    label?: string;
+    showTitle?: boolean;
+    title?: string;
+    paragraphs?: SectionHeaderParagraphCount | string[];
+    paragraph1?: string;
+    paragraph2?: string;
+    paragraph3?: string;
+    paragraph4?: string;
+    headingLevel?: SectionHeaderHeadingLevel;
 }
 
-/**
- * PCOI Select — Native dropdown with custom styling
- * Tokens: bg/default, border/default, border/error, focus/border, focus/glow,
- *         text/primary, text/secondary, text/muted, text/error, radius-sm
- */
-export declare const Select: default_2.ForwardRefExoticComponent<SelectProps & default_2.RefAttributes<HTMLSelectElement>>;
+export declare function SidebarNav({ dashboard, items, actions, ariaLabel, ...dataAttrs }: SidebarNavProps): JSX.Element;
 
-export declare interface SelectProps extends Omit<default_2.SelectHTMLAttributes<HTMLSelectElement>, "size"> {
-    /** Visible label text */
+export declare interface SidebarNavItem extends DataAttributes {
     label: string;
-    /** Unique field name, also used to generate id */
-    name: string;
-    /** List of options */
-    options: OptionItem[];
-    /** Placeholder text shown as first disabled option */
-    placeholder?: string;
-    /** Error message — when truthy, field enters error state */
-    error?: string;
+    active?: boolean;
+    notificationCount?: number | string;
+    ariaLabel?: string;
+    onClick?: () => void;
+}
+
+export declare interface SidebarNavProps extends DataAttributes {
+    dashboard?: {
+        notificationCount?: number | string;
+        ariaLabel?: string;
+        onClick?: () => void;
+    };
+    items: SidebarNavItem[];
+    actions?: Array<{
+        ariaLabel: string;
+        icon: ReactNode;
+        onClick?: () => void;
+    } & DataAttributes>;
+    ariaLabel?: string;
 }
 
-/**
- * PCOI Signals Panel — "You'll know this is for you if:" section
- * Tokens: bg/surface, border/default, radius-md, spacing-40/48, text/accent
- */
-export declare const SignalsPanel: default_2.ForwardRefExoticComponent<SignalsPanelProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function Skeleton({ variant, width, height, ...dataAttrs }: SkeletonProps): JSX.Element;
 
-export declare interface SignalsPanelProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    title?: string;
-    signals: string[];
-    /** Heading level for the title (default: "h3") */
-    headingLevel?: HeadingLevel;
+export declare interface SkeletonProps extends DataAttributes {
+    variant?: SkeletonVariant;
+    width?: number | string;
+    height?: number | string;
+}
+
+export declare type SkeletonVariant = "text" | "rectangular" | "rounded" | "circular";
+
+export declare function StatusDot({ status, ariaLabel, ...dataAttrs }: StatusDotProps): JSX.Element;
+
+export declare interface StatusDotProps extends DataAttributes {
+    status?: StatusDotStatus;
+    ariaLabel?: string;
+}
+
+export declare type StatusDotStatus = "active" | "success" | "error" | "warning" | "info" | "muted";
+
+export declare function Stepper({ steps, ariaLabel, ...dataAttrs }: StepperProps): JSX.Element;
+
+export declare interface StepperProps extends DataAttributes {
+    steps: StepperStep[];
+    ariaLabel: string;
 }
 
-/** Suggestion prompt for the chat empty state */
-export declare interface Suggestion {
-    /** Unique identifier */
-    id: string;
-    /** Display text */
+export declare type StepperState = "complete" | "active" | "pending" | "error";
+
+export declare interface StepperStep {
     label: string;
-    /** Optional icon rendered before the label */
-    icon?: React.ReactNode;
+    state: StepperState;
 }
 
-/**
- * PCOI SuggestionCard — Clickable FAQ card for chat empty state
- * Tokens: bg/card, bg/card-hover, border/card, border/card-hover,
- *         text/secondary, text/accent, radius-md, transition-medium,
- *         transform/hover-lift-sm, transform/press-scale, shadow/focus-ring
- */
-export declare const SuggestionCard: default_2.ForwardRefExoticComponent<SuggestionCardProps & default_2.RefAttributes<HTMLButtonElement>>;
+export declare function SuggestionCard({ label, icon, showIcon, state, focused, onClick, ariaLabel, ...dataAttrs }: SuggestionCardProps): JSX.Element;
 
-export declare interface SuggestionCardProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Display text */
+export declare interface SuggestionCardProps extends DataAttributes {
     label: string;
-    /** Optional icon rendered before the label */
-    icon?: default_2.ReactNode;
+    icon?: ReactNode;
+    showIcon?: boolean;
+    state?: "default" | "hover" | "pressed";
+    focused?: boolean;
+    onClick?: (event: MouseEvent_2<HTMLButtonElement>) => void;
+    ariaLabel?: string;
 }
 
-/**
- * PCOI SuggestionCards — 3-column grid of suggestion cards for chat empty state
- * Tokens: spacing-16 (gap), grid/suggestions
- */
-export declare const SuggestionCards: default_2.ForwardRefExoticComponent<SuggestionCardsProps & default_2.RefAttributes<HTMLDivElement>>;
+export declare function SuggestionCards({ cards, onSelect, ...dataAttrs }: SuggestionCardsProps): JSX.Element;
 
-export declare interface SuggestionCardsProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "onSelect"> {
-    /** Array of suggestion prompts */
-    suggestions: Suggestion[];
-    /** Called when a suggestion card is clicked */
-    onSelect: (suggestion: Suggestion) => void;
+export declare interface SuggestionCardsItem extends DataAttributes {
+    label: string;
+    showIcon?: boolean;
 }
 
-/**
- * PCOI Toast — Non-blocking notification
- * Tokens: surface/elevated, border/success|error|warning|info,
- *         text/primary, text/success|error|warning|info,
- *         shadow/elevated, zIndex/toast, radius-md
- */
-export declare const Toast: default_2.FC<ToastProps>;
+export declare interface SuggestionCardsProps extends DataAttributes {
+    cards: [SuggestionCardsItem, SuggestionCardsItem, SuggestionCardsItem];
+    onSelect?: (label: string, event: MouseEvent_2<HTMLButtonElement>) => void;
+}
 
-export declare interface ToastProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    /** Toast message */
-    message: string;
-    /** Visual variant determining color */
+export declare function TabToggle({ tabs, value, defaultValue, ariaLabel, onChange, focused, ...dataAttrs }: TabToggleProps): JSX.Element;
+
+export declare interface TabToggleProps extends DataAttributes {
+    tabs: [TabToggleTab, TabToggleTab];
+    value?: string;
+    defaultValue?: string;
+    ariaLabel: string;
+    onChange?: (value: string) => void;
+    focused?: boolean;
+}
+
+export declare interface TabToggleTab extends DataAttributes {
+    value: string;
+    label: ReactNode;
+    controls?: string;
+}
+
+export declare function TaskDetailPanel({ projectTitle, projectIdentifier, tabs, activeTab, onTabChange, onClose, taskLabel, taskDescription, taskStatus, taskSeverity, actions, metrics, agents, closeButtonData, ...dataAttrs }: TaskDetailPanelProps): JSX.Element;
+
+export declare interface TaskDetailPanelProps extends DataAttributes {
+    projectTitle: string;
+    projectIdentifier: string;
+    tabs?: [TabToggleTab, TabToggleTab];
+    activeTab?: string;
+    onTabChange?: (value: string) => void;
+    onClose: () => void;
+    taskLabel: string;
+    taskDescription: string;
+    taskStatus?: string;
+    taskSeverity?: TaskDetailPanelSeverity;
+    actions?: ReactNode;
+    metrics?: [MetricsRowMetric, MetricsRowMetric, MetricsRowMetric];
+    agents?: AgentListItem[];
+    closeButtonData?: DataAttributes;
+}
+
+export declare type TaskDetailPanelSeverity = "success" | "warning" | "error" | "info" | "none";
+
+export declare function TextLink({ label, color, state, focused, href, onClick, ...dataAttrs }: TextLinkProps): JSX.Element;
+
+export declare interface TextLinkProps extends DataAttributes {
+    label: string;
+    color?: "accent" | "neutral";
+    state?: "default" | "hover";
+    focused?: boolean;
+    href?: string;
+    onClick?: (event: MouseEvent_2<HTMLAnchorElement>) => void;
+}
+
+export declare function Toast({ message, variant, action, onClose, closeButtonData, ...dataAttrs }: ToastProps): JSX.Element;
+
+export declare interface ToastProps extends DataAttributes {
+    message: ReactNode;
     variant?: ToastVariant;
-    /** Whether the toast is visible */
-    open: boolean;
-    /** Called when the toast should dismiss */
+    action?: ReactNode;
     onClose?: () => void;
-    /** Auto-dismiss duration in ms (default 5000, 0 = no auto-dismiss) */
-    duration?: number;
+    closeButtonData?: DataAttributes;
 }
 
 export declare type ToastVariant = "success" | "error" | "warning" | "info";
 
-/**
- * PCOI Toggle — Switch-style boolean control
- * Tokens: action/toggle-bg, action/toggle-bg-on, action/toggle-thumb,
- *         focus/border, focus/glow, text/primary, text/error, radius-full
- */
-export declare const Toggle: default_2.ForwardRefExoticComponent<ToggleProps & default_2.RefAttributes<HTMLInputElement>>;
+export declare function Toggle({ label, checked, defaultChecked, disabled, error, errorMessage, focused, onChange, name, id, ...dataAttrs }: ToggleProps): JSX.Element;
 
-export declare interface ToggleProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
-    /** Visible label text */
+export declare interface ToggleProps extends DataAttributes {
     label: string;
-    /** Unique field name, also used to generate id */
-    name: string;
-    /** Error message — when truthy, field enters error state */
-    error?: string;
-}
-
-/**
- * Standard data-track-* attributes for analytics integration.
- * Supported on all components via HTML attribute pass-through.
- * Exported for documentation and IDE discoverability.
- *
- * @example
- * <Button data-track-id="hero-cta" data-track-action="click" data-track-category="engagement">
- *   Get Started
- * </Button>
- */
-export declare interface TrackingProps {
-    /** Unique identifier for the tracked element */
-    "data-track-id"?: string;
-    /** Action type (e.g. "click", "submit", "view", "toggle") */
-    "data-track-action"?: string;
-    /** Category grouping (e.g. "navigation", "form", "engagement") */
-    "data-track-category"?: string;
-    /** Human-readable label for analytics dashboards */
-    "data-track-label"?: string;
-}
-
-/**
- * PCOI TypingIndicator — Three bouncing dots indicating the assistant is composing a response
- * Tokens: bg/card, border/card, radius-md, text/accent
- */
-export declare const TypingIndicator: default_2.ForwardRefExoticComponent<TypingIndicatorProps & default_2.RefAttributes<HTMLDivElement>>;
-
-export declare interface TypingIndicatorProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    /** Label shown in the badge (default: "PCOI") */
-    label?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    focused?: boolean;
+    onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    name?: string;
+    id?: string;
+}
+
+export declare function Tooltip({ content, placement, id, ...dataAttrs }: TooltipProps): JSX.Element;
+
+export declare type TooltipPlacement = "top" | "bottom" | "left" | "right" | "none";
+
+export declare interface TooltipProps extends DataAttributes {
+    content: ReactNode;
+    placement?: TooltipPlacement;
+    id?: string;
+}
+
+export declare function TypingIndicator({ sender, visible, ...dataAttrs }: TypingIndicatorProps): JSX.Element;
+
+export declare interface TypingIndicatorProps extends DataAttributes {
+    sender?: string;
+    visible?: boolean;
 }
 
 export { }