@agentatom/design-system 1.4.78

package/dist/index.d.ts

@@ -0,0 +1,1057 @@
+import type {
+  ReactNode,
+  ReactElement,
+  MouseEvent,
+  CSSProperties,
+  HTMLAttributes,
+  ButtonHTMLAttributes,
+  InputHTMLAttributes,
+  TextareaHTMLAttributes,
+  AnchorHTMLAttributes,
+  ElementType,
+  ComponentPropsWithRef,
+} from 'react';
+
+// ─── Shared ───────────────────────────────────────────────────────────────
+
+type Size = 'xs' | 's' | 'sm' | 'm' | 'l';
+
+// ─── iconSizes ────────────────────────────────────────────────────────────
+
+export declare const iconSizes: { 1: 16; 2: 20; 3: 24; 4: 28; 5: 48 };
+
+// ─── Button ───────────────────────────────────────────────────────────────
+
+export interface ButtonProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
+  children?: ReactNode;
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+  size?: Size;
+  fullWidth?: boolean;
+  icon?: ReactNode;
+  disabled?: boolean;
+  state?: 'idle' | 'loading' | 'success' | 'error';
+  onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  type?: 'button' | 'submit' | 'reset';
+  href?: string;
+  target?: string;
+  rel?: string;
+  'aria-label'?: string;
+}
+
+export declare function Button(props: ButtonProps): JSX.Element;
+
+// ─── SegmentedControl ─────────────────────────────────────────────────────
+
+export interface SegmentedControlOption {
+  value: string;
+  label?: ReactNode;
+  icon?: ReactNode;
+}
+
+export interface SegmentedControlProps {
+  options: SegmentedControlOption[];
+  value: string;
+  onChange: (value: string) => void;
+  size?: 's' | 'sm' | 'm' | 'l';
+  disabled?: boolean;
+}
+
+export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;
+
+// ─── Tabs ─────────────────────────────────────────────────────────────────
+
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  size?: Size;
+  variant?: 'ghost' | 'underline';
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+export declare function Tabs(props: TabsProps): JSX.Element;
+
+export interface TabProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
+  children?: ReactNode;
+  selected?: boolean;
+  onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  size?: Size;
+  variant?: 'ghost' | 'underline';
+  disabled?: boolean;
+  icon?: ReactNode;
+  href?: string;
+  value?: string;
+}
+
+export declare function Tab(props: TabProps): JSX.Element;
+
+// ─── Input ────────────────────────────────────────────────────────────────
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  fullWidth?: boolean;
+  icon?: ReactNode;
+  iconRight?: ReactNode;
+  onIconRightClick?: () => void;
+  size?: Size;
+}
+
+export declare function Input(props: InputProps): JSX.Element;
+
+// ─── Textarea ─────────────────────────────────────────────────────────────
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  fullWidth?: boolean;
+  size?: 'xs' | 's' | 'm';
+  resize?: boolean;
+}
+
+export declare function Textarea(props: TextareaProps): JSX.Element;
+
+// ─── Select ───────────────────────────────────────────────────────────────
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectProps {
+  label?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  options?: SelectOption[];
+  placeholder?: string;
+  error?: string;
+  fullWidth?: boolean;
+  size?: Size;
+  disabled?: boolean;
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export declare function Select(props: SelectProps): JSX.Element;
+
+// ─── Stepper ──────────────────────────────────────────────────────────────
+
+export interface StepperProps {
+  label?: string;
+  value?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  size?: 'xs' | 's' | 'm';
+  disabled?: boolean;
+  hint?: string;
+  error?: string;
+}
+
+export declare function Stepper(props: StepperProps): JSX.Element;
+
+// ─── Toggle ───────────────────────────────────────────────────────────────
+
+export interface ToggleProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  size?: Size;
+  disabled?: boolean;
+  label?: string;
+  id?: string;
+}
+
+export declare function Toggle(props: ToggleProps): JSX.Element;
+
+// ─── Checkbox ─────────────────────────────────────────────────────────────
+
+export interface CheckboxProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  size?: Size;
+  disabled?: boolean;
+  label?: string;
+  id?: string;
+}
+
+export declare function Checkbox(props: CheckboxProps): JSX.Element;
+
+// ─── Radio ────────────────────────────────────────────────────────────────
+
+export interface RadioProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  size?: Size;
+  disabled?: boolean;
+  label?: string;
+  name?: string;
+  value?: string;
+  id?: string;
+}
+
+export declare function Radio(props: RadioProps): JSX.Element;
+
+// ─── Badge ────────────────────────────────────────────────────────────────
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  children?: ReactNode;
+  variant?: 'default' | 'info' | 'success' | 'warning' | 'error' | 'accent'
+          | 'data-1' | 'data-2' | 'data-3' | 'data-4' | 'data-5' | 'data-6' | 'data-7';
+  size?: 'xs' | 's' | 'm';
+}
+
+export declare function Badge(props: BadgeProps): JSX.Element;
+
+// ─── Alert ────────────────────────────────────────────────────────────────
+
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  title?: string;
+  onClose?: () => void;
+}
+
+export declare function Alert(props: AlertProps): JSX.Element;
+
+// ─── Modal ────────────────────────────────────────────────────────────────
+
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  title?: string;
+  onClose?: () => void;
+  size?: 's' | 'm' | 'l';
+  scrollable?: boolean;
+  subHeader?: ReactNode;
+}
+
+export declare function Modal(props: ModalProps): JSX.Element;
+
+export interface ModalFooterProps {
+  children?: ReactNode;
+}
+
+export declare function ModalFooter(props: ModalFooterProps): JSX.Element;
+
+// ─── BottomSheet ──────────────────────────────────────────────────────────────
+
+export interface BottomSheetProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  title?: string;
+  onClose?: () => void;
+  subHeader?: ReactNode;
+}
+
+export declare function BottomSheet(props: BottomSheetProps): JSX.Element;
+
+// ─── Card ─────────────────────────────────────────────────────────────────
+
+export interface CardProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  padding?: 's' | 'm' | 'l';
+  variant?: 'info' | 'interactive';
+  /** @deprecated use variant="interactive" */
+  hover?: boolean;
+  onClick?: (e: MouseEvent<HTMLElement>) => void;
+  href?: string;
+  disabled?: boolean;
+}
+
+export declare function Card(props: CardProps): JSX.Element;
+
+// ─── Typography ───────────────────────────────────────────────────────────
+
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  children?: ReactNode;
+}
+
+export interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
+  children?: ReactNode;
+  secondary?: boolean;
+}
+
+export declare function H1(props: HeadingProps): JSX.Element;
+export declare function H2(props: HeadingProps): JSX.Element;
+export declare function H3(props: HeadingProps): JSX.Element;
+export declare function H4(props: HeadingProps): JSX.Element;
+export declare function P1(props: ParagraphProps): JSX.Element;
+export declare function P2(props: ParagraphProps): JSX.Element;
+export declare function P3(props: ParagraphProps): JSX.Element;
+
+// ─── Accordion ────────────────────────────────────────────────────────────
+
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onChange'> {
+  children?: ReactNode;
+  title: ReactNode;
+  defaultExpanded?: boolean;
+  expanded?: boolean;
+  onToggle?: (expanded: boolean) => void;
+  onChange?: (expanded: boolean) => void;
+  padding?: 's' | 'm' | 'l';
+}
+
+export declare function Accordion(props: AccordionProps): JSX.Element;
+
+// ─── CodeAccordion ────────────────────────────────────────────────────────
+
+export interface CodeAccordionProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  title?: string;
+  defaultExpanded?: boolean;
+  expanded?: boolean;
+  onToggle?: (expanded: boolean) => void;
+  padding?: 's' | 'm' | 'l';
+}
+
+export declare function CodeAccordion(props: CodeAccordionProps): JSX.Element;
+
+// ─── Code ─────────────────────────────────────────────────────────────────
+
+export interface CodeProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  block?: boolean;
+  collapsible?: boolean;
+  title?: string;
+  defaultExpanded?: boolean;
+  language?: string;
+}
+
+export declare function Code(props: CodeProps): JSX.Element;
+
+// ─── Link ─────────────────────────────────────────────────────────────────
+
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  children?: ReactNode;
+}
+
+export declare function Link(props: LinkProps): JSX.Element;
+
+// ─── Tooltip ──────────────────────────────────────────────────────────────
+
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  content?: ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export declare function Tooltip(props: TooltipProps): JSX.Element;
+
+// ─── Spinner ──────────────────────────────────────────────────────────────
+
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+  size?: 'xs' | 's' | 'm' | 'l' | 'xl';
+  color?: 'default' | 'secondary' | 'on-accent';
+}
+
+export declare function Spinner(props: SpinnerProps): JSX.Element;
+
+// ─── Skeleton ─────────────────────────────────────────────────────────────
+
+export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+  width?: number | string;
+  height?: number | string;
+  shape?: 'rect' | 'circle' | 'pill' | 'text';
+  aspectRatio?: string;
+}
+
+export interface SkeletonTextProps extends HTMLAttributes<HTMLSpanElement> {
+  lines?: number;
+  lastLineWidth?: string | number;
+  gap?: string | number;
+}
+
+export declare const Skeleton: ((props: SkeletonProps) => JSX.Element) & {
+  Text: (props: SkeletonTextProps) => JSX.Element;
+};
+
+// ─── Avatar ───────────────────────────────────────────────────────────────
+
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  seed?: string;
+  icon?: ReactNode;
+  src?: string;
+  size?: number;
+}
+
+export declare function Avatar(props: AvatarProps): JSX.Element;
+
+// ─── Table ────────────────────────────────────────────────────────────────
+
+export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+  children?: ReactNode;
+  size?: 'compact' | 'comfortable';
+  stickyTop?: number | string;
+  maxHeight?: string;
+}
+
+export declare function Table(props: TableProps): JSX.Element;
+
+export interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+  children?: ReactNode;
+}
+
+export declare function TableHead(props: TableHeadProps): JSX.Element;
+
+export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+  children?: ReactNode;
+}
+
+export declare function TableBody(props: TableBodyProps): JSX.Element;
+
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  children?: ReactNode;
+  interactive?: boolean;
+  selected?: boolean;
+  subheader?: boolean;
+  exiting?: boolean;
+  updated?: boolean;
+  onClick?: () => void;
+}
+
+export declare function TableRow(props: TableRowProps): JSX.Element;
+
+export interface TableSubheaderRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  children?: ReactNode;
+  colSpan?: number;
+}
+
+export declare function TableSubheaderRow(props: TableSubheaderRowProps): JSX.Element;
+
+export interface ThProps extends HTMLAttributes<HTMLTableCellElement> {
+  children?: ReactNode;
+  align?: 'left' | 'center' | 'right';
+  sortDir?: 'asc' | 'desc' | null;
+  onSort?: () => void;
+  width?: number | string;
+}
+
+export declare function Th(props: ThProps): JSX.Element;
+
+export interface TdProps extends HTMLAttributes<HTMLTableCellElement> {
+  children?: ReactNode;
+  align?: 'left' | 'center' | 'right';
+  secondary?: boolean;
+  muted?: boolean;
+  truncate?: boolean;
+  nowrap?: boolean;
+  colSpan?: number;
+  rowSpan?: number;
+}
+
+export declare function Td(props: TdProps): JSX.Element;
+
+// ─── Banner ───────────────────────────────────────────────────────────────
+
+export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  action?: ReactNode;
+  onAction?: () => void;
+  onDismiss?: () => void;
+}
+
+export declare function Banner(props: BannerProps): JSX.Element;
+
+// ─── SidePage ─────────────────────────────────────────────────────────────
+
+export interface SidePageProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  title?: string;
+  onClose?: () => void;
+  subHeader?: ReactNode;
+  side?: 'left' | 'right';
+  size?: 'narrow' | 'medium' | 'wide';
+  offsetLeft?: number;
+  offsetRight?: number;
+  keepOpenRef?: React.RefObject<HTMLElement>;
+}
+
+export declare function SidePage(props: SidePageProps): JSX.Element;
+
+export interface SidePageFooterProps {
+  children?: ReactNode;
+}
+
+export declare function SidePageFooter(props: SidePageFooterProps): JSX.Element;
+
+// ─── Pagination ───────────────────────────────────────────────────────────
+
+export interface PaginationProps extends HTMLAttributes<HTMLElement> {
+  page: number;
+  total: number;
+  onChange?: (page: number) => void;
+  siblings?: number;
+}
+
+export declare function Pagination(props: PaginationProps): JSX.Element;
+
+// ─── Breadcrumb ───────────────────────────────────────────────────────────
+
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  separator?: ReactNode;
+}
+
+export declare function Breadcrumb(props: BreadcrumbProps): JSX.Element;
+
+// ─── Stat ─────────────────────────────────────────────────────────────────
+
+export interface StatProps extends HTMLAttributes<HTMLDivElement> {
+  label?: string;
+  value?: ReactNode;
+  delta?: string;
+  size?: 'xs' | 's' | 'm' | 'l';
+  inline?: boolean;
+}
+
+export declare function Stat(props: StatProps): JSX.Element;
+
+// ─── FormField ────────────────────────────────────────────────────────────
+
+export interface FormFieldProps {
+  label?: string;
+  hint?: string;
+  error?: string;
+  required?: boolean;
+  disabled?: boolean;
+  htmlFor?: string;
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export declare function FormField(props: FormFieldProps): JSX.Element;
+
+// ─── EmptyState ───────────────────────────────────────────────────────────
+
+export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  size?: 's' | 'm' | 'l';
+}
+
+export declare function EmptyState(props: EmptyStateProps): JSX.Element;
+
+// ─── Dropdown ─────────────────────────────────────────────────────────────
+
+export interface DropdownItem {
+  label?: string;
+  onClick?: () => void;
+  icon?: ReactNode;
+  shortcut?: string;
+  disabled?: boolean;
+  danger?: boolean;
+  href?: string;
+  separator?: boolean;
+  type?: 'section';
+  content?: ReactNode;
+}
+
+export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
+  trigger: ReactNode;
+  items?: DropdownItem[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  align?: 'left' | 'right';
+  fullWidth?: boolean;
+}
+
+export declare function Dropdown(props: DropdownProps): JSX.Element;
+
+// ─── Toast ────────────────────────────────────────────────────────────────
+
+export interface ToastOptions {
+  type?: 'default' | 'success' | 'warning' | 'error';
+  duration?: number;
+}
+
+export interface ToastFn {
+  (message: string, opts?: ToastOptions): void;
+  success(message: string, opts?: Omit<ToastOptions, 'type'>): void;
+  warning(message: string, opts?: Omit<ToastOptions, 'type'>): void;
+  error(message: string, opts?: Omit<ToastOptions, 'type'>): void;
+}
+
+export declare function useToast(): { toast: ToastFn };
+
+export interface ToastContainerProps {
+  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+}
+
+export declare function ToastContainer(props: ToastContainerProps): JSX.Element | null;
+
+// ─── ProgressBar ──────────────────────────────────────────────────────────────
+
+export interface ProgressBarProps {
+  value?: number;
+  size?: 'xs' | 's' | 'm' | 'l';
+  variant?: 'default' | 'success' | 'warning' | 'danger' | 'auto';
+  showValue?: boolean;
+  min?: number;
+  animate?: boolean;
+}
+
+export declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+
+// ─── AnimatedNumber ───────────────────────────────────────────────────────────
+
+export interface UseAnimatedNumberOptions {
+  duration?: number;
+}
+
+export declare function useAnimatedNumber(value: number, options?: UseAnimatedNumberOptions): number;
+
+export interface AnimatedNumberProps extends UseAnimatedNumberOptions {
+  value: number;
+  decimals?: number;
+  prefix?: string;
+  suffix?: string;
+}
+
+export declare function AnimatedNumber(props: AnimatedNumberProps): string;
+
+// ─── InView ───────────────────────────────────────────────────────────────────
+
+export interface UseInViewOptions {
+  threshold?: number;
+  rootMargin?: string;
+  once?: boolean;
+}
+
+export declare function useInView(options?: UseInViewOptions): { ref: React.RefObject<HTMLElement>; inView: boolean };
+
+export interface InViewProps extends UseInViewOptions {
+  children: React.ReactNode | ((inView: boolean) => React.ReactNode);
+  as?: keyof JSX.IntrinsicElements;
+  onEnter?: () => void;
+  onLeave?: () => void;
+  [key: string]: any;
+}
+
+export declare function InView(props: InViewProps): JSX.Element;
+
+// ─── ToolCallCard ─────────────────────────────────────────────────────────────
+
+export interface ToolCallCardProps extends HTMLAttributes<HTMLDivElement> {
+  label: string;
+  status?: 'idle' | 'running' | 'success' | 'error';
+  icon?: ReactNode;
+  badge?: ReactNode;
+  defaultExpanded?: boolean;
+  expanded?: boolean;
+  onToggle?: (value: boolean) => void;
+  children?: ReactNode;
+}
+
+export declare function ToolCallCard(props: ToolCallCardProps): JSX.Element;
+
+// ─── CopyButton ───────────────────────────────────────────────────────────────
+
+export interface CopyButtonProps {
+  text: string;
+  size?: Size;
+  timeout?: number;
+  'aria-label'?: string;
+}
+
+export declare function CopyButton(props: CopyButtonProps): JSX.Element;
+
+// ─── ReasoningBlock ───────────────────────────────────────────────────────────
+
+export interface ReasoningBlockProps {
+  content: string;
+  streaming?: boolean;
+}
+
+export declare function ReasoningBlock(props: ReasoningBlockProps): JSX.Element;
+
+// ─── StepIndicator ────────────────────────────────────────────────────────────
+
+export interface StepIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  count: number;
+  current?: number;
+  done?: number[];
+  onChange?: (index: number) => void;
+  showCounter?: boolean;
+}
+
+export declare function StepIndicator(props: StepIndicatorProps): JSX.Element;
+
+// ─── StreamingText ────────────────────────────────────────────────────────────
+
+export interface StreamingTextProps extends HTMLAttributes<HTMLSpanElement> {
+  content: string;
+  isStreaming?: boolean;
+  cursor?: 'line' | 'block' | 'none';
+  onChunk?: (content: string) => void;
+}
+
+export declare function StreamingText(props: StreamingTextProps): JSX.Element;
+
+// ─── ChatMessage ──────────────────────────────────────────────────────────────
+
+export interface ChatMessageProps extends HTMLAttributes<HTMLDivElement> {
+  role?: 'user' | 'assistant' | 'system' | 'tool';
+  header?: ReactNode;
+  footer?: ReactNode;
+  attachments?: ReactNode;
+  isStreaming?: boolean;
+  children?: ReactNode;
+}
+
+export declare function ChatMessage(props: ChatMessageProps): JSX.Element;
+
+// ─── useStreamScroll ──────────────────────────────────────────────────────────
+
+export interface UseStreamScrollOptions {
+  containerRef: React.RefObject<HTMLElement>;
+  smartPause?: boolean;
+}
+
+export declare function useStreamScroll(deps: any[], options?: UseStreamScrollOptions): void;
+
+// ─── PromptInput ──────────────────────────────────────────────────────────────
+
+export interface PromptAttachment {
+  filename: string;
+  uploading?: boolean;
+}
+
+export interface PromptImage {
+  preview: string;
+}
+
+export interface PromptInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onKeyDown'> {
+  value?: string;
+  onChange?: (value: string) => void;
+  onSubmit?: () => void;
+  onStop?: () => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  loading?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  animatedPlaceholders?: string[];
+  attachments?: PromptAttachment[];
+  images?: PromptImage[];
+  onAttachFiles?: (files: File[]) => void;
+  onAttachImages?: (files: File[]) => void;
+  onRemoveAttachment?: (index: number) => void;
+  onRemoveImage?: (index: number) => void;
+  acceptImage?: (file: File) => boolean;
+  acceptFile?: (file: File) => boolean;
+  maxImages?: number;
+  maxImageSize?: number;
+  leftSlot?: ReactNode;
+  rightSlot?: ReactNode;
+}
+
+export declare function PromptInput(props: PromptInputProps): JSX.Element;
+
+// ─── ModelPicker ──────────────────────────────────────────────────────────────
+
+export interface PickerModel {
+  name: string;
+  displayName?: string;
+  tier?: 'fast' | 'standard' | 'premium' | string;
+  icon?: ReactNode;
+}
+
+export interface ModelPickerProps extends HTMLAttributes<HTMLDivElement> {
+  models: PickerModel[];
+  value: string;
+  onChange?: (name: string) => void;
+  size?: 'xs' | 's' | 'm';
+  minTier?: 'fast' | 'standard' | 'premium';
+  showAutoOption?: boolean;
+  groupByTier?: boolean;
+}
+
+export declare function ModelPicker(props: ModelPickerProps): JSX.Element;
+
+// ─── useAnimatedPlaceholder ───────────────────────────────────────────────────
+
+export interface UseAnimatedPlaceholderOptions {
+  prompts: string[];
+  enabled: boolean;
+  typingSpeed?: number;
+  erasingSpeed?: number;
+  holdTime?: number;
+  betweenTime?: number;
+  manualPauseMs?: number;
+}
+
+export interface UseAnimatedPlaceholderResult {
+  displayed: string;
+  currentPrompt: string;
+  index: number;
+  next: () => void;
+  prev: () => void;
+}
+
+export declare function useAnimatedPlaceholder(options: UseAnimatedPlaceholderOptions): UseAnimatedPlaceholderResult;
+
+// ─── SourcesPanel ─────────────────────────────────────────────────────────────
+
+export interface Source {
+  filename: string;
+  page?: number | string;
+  snippet?: string;
+  url?: string;
+}
+
+export interface SourcesPanelProps {
+  sources?: Source[];
+  layout?: 'list' | 'compact';
+  title?: string;
+  maxVisible?: number;
+  onSourceClick?: (source: Source) => void;
+}
+
+export declare function SourcesPanel(props: SourcesPanelProps): JSX.Element;
+
+// ─── TokenCounter ─────────────────────────────────────────────────────────────
+
+export interface TokenCounterProps {
+  used: number;
+  limit: number;
+  size?: 's' | 'm';
+  showCount?: boolean;
+  showPercent?: boolean;
+  warningThreshold?: number;
+  errorThreshold?: number;
+}
+
+export declare function TokenCounter(props: TokenCounterProps): JSX.Element;
+
+// ─── ConfidenceBar ────────────────────────────────────────────────────────────
+
+export interface ConfidenceBarProps {
+  value: number;
+  size?: 'xs' | 's';
+  showLabel?: 'text' | 'none';
+  layout?: 'inline' | 'block';
+}
+
+export declare function ConfidenceBar(props: ConfidenceBarProps): JSX.Element;
+
+// ─── DiffView ─────────────────────────────────────────────────────────────────
+
+export interface DiffLine {
+  type: 'add' | 'remove' | 'context';
+  text: string;
+  lineNo?: number;
+}
+
+export interface DiffViewProps {
+  lines?: DiffLine[];
+  layout?: 'inline' | 'split';
+  wordWrap?: boolean;
+  lineNumbers?: boolean;
+  maxHeight?: number;
+  title?: string;
+}
+
+export declare function DiffView(props: DiffViewProps): JSX.Element;
+
+// ─── ToolCallBubble ───────────────────────────────────────────────────────────
+
+export declare function ToolCallBubble(props: ToolCallCardProps): JSX.Element;
+
+// ─── MessageFeedback ──────────────────────────────────────────────────────────
+
+export interface MessageFeedbackProps {
+  value?: 'idle' | 'liked' | 'disliked';
+  onLike?: () => void;
+  onDislike?: () => void;
+  className?: string;
+}
+
+export declare function MessageFeedback(props: MessageFeedbackProps): JSX.Element;
+
+// ─── MessageFooter ────────────────────────────────────────────────────────────
+
+export interface MessageFooterProps extends HTMLAttributes<HTMLDivElement> {
+  role?: 'user' | 'assistant';
+  text?: string;
+  timestamp?: Date | string | number;
+  feedbackValue?: 'idle' | 'liked' | 'disliked';
+  onLike?: () => void;
+  onDislike?: () => void;
+}
+
+export declare function MessageFooter(props: MessageFooterProps): JSX.Element | null;
+
+// ─── ThinkingDot ──────────────────────────────────────────────────────────────
+
+export interface ThinkingDotProps extends HTMLAttributes<HTMLSpanElement> {
+  label?: string;
+}
+
+export declare function ThinkingDot(props: ThinkingDotProps): JSX.Element;
+
+// ─── Scrollable ───────────────────────────────────────────────────────────────
+
+export interface ScrollableProps extends HTMLAttributes<HTMLDivElement> {
+  axis?: 'x' | 'y' | 'both';
+  children?: ReactNode;
+}
+
+export declare function Scrollable(props: ScrollableProps): JSX.Element;
+
+// ─── EngineerGrid ─────────────────────────────────────────────────────────────
+
+export interface EngineerGridProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'light' | 'dark';
+  glow?: boolean;
+  mask?: boolean;
+}
+
+export declare function EngineerGrid(props: EngineerGridProps): JSX.Element;
+
+// ─── NavRail ──────────────────────────────────────────────────────────────────
+
+export interface NavRailProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  collapsed?: boolean;
+  side?: 'left' | 'right';
+  onExpand?: () => void;
+  onCollapse?: () => void;
+}
+
+export declare function NavRail(props: NavRailProps): JSX.Element;
+
+export interface NavRailItemProps {
+  icon: ReactNode;
+  label: string;
+  selected?: boolean;
+  disabled?: boolean;
+  href?: string;
+  onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  count?: number;
+  updated?: boolean;
+  open?: boolean;
+  onboarding?: boolean;
+  className?: string;
+}
+
+export declare function NavRailItem(props: NavRailItemProps): JSX.Element;
+
+export interface NavRailBodyProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+export declare function NavRailBody(props: NavRailBodyProps): JSX.Element;
+
+export interface NavRailHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+export declare function NavRailHeader(props: NavRailHeaderProps): JSX.Element;
+
+export interface NavRailFooterProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+export declare function NavRailFooter(props: NavRailFooterProps): JSX.Element;
+
+export interface NavRailDividerProps extends HTMLAttributes<HTMLHRElement> {}
+
+export declare function NavRailDivider(props: NavRailDividerProps): JSX.Element;
+
+export interface NavRailRecentsProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  label?: string;
+  defaultOpen?: boolean;
+}
+
+export declare function NavRailRecents(props: NavRailRecentsProps): JSX.Element;
+
+export interface NavRailAgentProps {
+  avatar: ReactNode;
+  label: string;
+  selected?: boolean;
+  disabled?: boolean;
+  href?: string;
+  onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  className?: string;
+}
+
+export declare function NavRailAgent(props: NavRailAgentProps): JSX.Element;
+
+export interface NavRailFlyoutProps {
+  trigger: ReactNode;
+  title?: string;
+  children?: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+}
+export declare function NavRailFlyout(props: NavRailFlyoutProps): JSX.Element;
+
+export type NavRailCustomItemProps<T extends ElementType = 'button'> = {
+  as?: T;
+  avatar: ReactNode;
+  label: string;
+  className?: string;
+} & Omit<ComponentPropsWithRef<T>, 'as' | 'avatar' | 'label' | 'className'>;
+
+export declare const NavRailCustomItem: <T extends ElementType = 'button'>(
+  props: NavRailCustomItemProps<T>
+) => JSX.Element;
+
+// ─── Coachmark ────────────────────────────────────────────────────────────────
+
+export interface CoachmarkStep {
+  target: string | (() => Element | null);
+  title?: string;
+  content: ReactNode;
+  position?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+export interface CoachmarkProps {
+  steps: CoachmarkStep[];
+  currentStep: number;
+  onNext: () => void;
+  onBack: () => void;
+  onSkip: () => void;
+  onFinish: () => void;
+  overlay?: boolean;
+  ring?: boolean;
+  labelNext?: string;
+  labelBack?: string;
+  labelSkip?: string;
+  labelFinish?: string;
+  statePrimary?: 'idle' | 'loading' | 'success' | 'error';
+  stateBack?: 'idle' | 'loading' | 'success' | 'error';
+}
+
+export declare function Coachmark(props: CoachmarkProps): JSX.Element | null;
+
+export interface UseCoachmarkOptions {
+  storageKey?: string;
+}
+
+export interface UseCoachmarkReturn {
+  currentStep: number;
+  isActive: boolean;
+  start: () => void;
+  next: () => void;
+  back: () => void;
+  skip: () => void;
+  finish: () => void;
+}
+
+export declare function useCoachmark(steps: CoachmarkStep[], options?: UseCoachmarkOptions): UseCoachmarkReturn;
+
+// ─── useShake ─────────────────────────────────────────────────────────────────
+
+export interface UseShakeReturn {
+  ref: React.RefObject<any>;
+  shake: () => void;
+}
+
+export declare function useShake(): UseShakeReturn;