@skillkit/tui 1.6.4 → 1.8.1

package/dist/index.d.ts

@@ -1,265 +1,1214 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { ScoredSkill, ProjectProfile, Learning, Observation, MemoryStatus } from '@skillkit/core';
+import { AgentType, SkillMetadata } from '@skillkit/core';
+import * as _skillkit_agents from '@skillkit/agents';
+import { JSX } from 'solid-js';
 
-type Screen = 'home' | 'browse' | 'installed' | 'sync' | 'settings' | 'recommend' | 'translate' | 'context' | 'workflow' | 'execute' | 'history' | 'marketplace' | 'memory' | 'team' | 'plugins' | 'methodology' | 'plan';
-declare function App(): react_jsx_runtime.JSX.Element;
-
-interface SidebarProps {
+interface SkillItem {
+    name: string;
+    description?: string;
+    source?: string;
+    installs?: number;
+    enabled?: boolean;
+    quality?: number;
+    grade?: string;
+    warnings?: number;
+}
+interface RepoInfo {
+    source: string;
+    name: string;
+}
+interface FetchedSkill {
+    name: string;
+    source: string;
+    repoName: string;
+    description?: string;
+}
+type Screen = 'home' | 'browse' | 'installed' | 'marketplace' | 'recommend' | 'translate' | 'context' | 'memory' | 'team' | 'plugins' | 'methodology' | 'plan' | 'workflow' | 'execute' | 'history' | 'sync' | 'settings' | 'help' | 'mesh' | 'message';
+declare const NAV_KEYS: Record<string, Screen>;
+declare const STATUS_BAR_SHORTCUTS = "b browse  m market  i installed  s sync  / help  q quit";
+interface ScreenMeta {
+    key: string;
+    label: string;
     screen: Screen;
-    onNavigate: (screen: Screen) => void;
-    isCompact?: boolean;
 }
-declare function Sidebar({ screen }: SidebarProps): react_jsx_runtime.JSX.Element;
+interface SidebarSection {
+    section: string;
+    items: ScreenMeta[];
+}
+declare const SIDEBAR_NAV: SidebarSection[];
+
+interface AppProps {
+    onExit?: (code?: number) => void;
+}
+declare function App(props: AppProps): any;
+
+/**
+ * Monochromatic color palette for SkillKit TUI
+ * Inspired by OpenSync's elegant dark theme
+ */
+declare const colors: {
+    readonly background: "#0d0d0d";
+    readonly surface: "#1a1a1a";
+    readonly surfaceHover: "#262626";
+    readonly border: "#333333";
+    readonly borderDim: "#1f1f1f";
+    readonly text: "#ffffff";
+    readonly textSecondary: "#a0a0a0";
+    readonly textMuted: "#666666";
+    readonly accent: "#00ff88";
+    readonly accentDim: "#00cc6a";
+    readonly success: "#22c55e";
+    readonly warning: "#eab308";
+    readonly error: "#ef4444";
+    readonly info: "#3b82f6";
+    readonly sync: "#00d9ff";
+    readonly browse: "#22c55e";
+    readonly recommend: "#fbbf24";
+    readonly translate: "#a855f7";
+    readonly workflow: "#3b82f6";
+    readonly team: "#ffffff";
+    readonly private: "#ef4444";
+    readonly tag: "#fbbf24";
+    readonly export: "#22c55e";
+    readonly delete: "#ef4444";
+};
+type ColorName = keyof typeof colors;
+type ColorValue = (typeof colors)[ColorName];
+/**
+ * Get a color value by name
+ */
+declare function getColor(name: ColorName): ColorValue;
+/**
+ * Terminal-safe color names for OpenTUI
+ * Maps our design system colors to terminal-compatible values
+ */
+declare const terminalColors: {
+    readonly background: "black";
+    readonly surface: "black";
+    readonly text: "white";
+    readonly textSecondary: "gray";
+    readonly textMuted: "gray";
+    readonly accent: "green";
+    readonly success: "green";
+    readonly warning: "yellow";
+    readonly error: "red";
+    readonly info: "blue";
+    readonly sync: "cyan";
+    readonly browse: "green";
+    readonly recommend: "yellow";
+    readonly translate: "magenta";
+    readonly workflow: "blue";
+    readonly team: "white";
+    readonly border: "gray";
+};
+
+/**
+ * Unicode symbols and agent logos for SkillKit TUI
+ * Monochromatic design system for terminal display
+ */
+/**
+ * Agent logo definitions with monochromatic icons
+ */
+interface AgentLogo {
+    icon: string;
+    name: string;
+    company: string;
+}
+/**
+ * All 32 supported agents with monochromatic Unicode logos
+ */
+declare const AGENT_LOGOS: Record<string, AgentLogo>;
+/**
+ * UI symbols for status and navigation
+ */
+declare const symbols: {
+    readonly pointer: "▸";
+    readonly pointerInactive: " ";
+    readonly bullet: "●";
+    readonly bulletEmpty: "○";
+    readonly success: "✓";
+    readonly error: "✗";
+    readonly warning: "⚠";
+    readonly info: "ℹ";
+    readonly pending: "○";
+    readonly active: "●";
+    readonly synced: "●";
+    readonly progressFilled: "█";
+    readonly progressEmpty: "░";
+    readonly spinner: readonly ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+    readonly arrowUp: "↑";
+    readonly arrowDown: "↓";
+    readonly arrowLeft: "←";
+    readonly arrowRight: "→";
+    readonly diamond: "◆";
+    readonly diamondEmpty: "◇";
+    readonly star: "★";
+    readonly starEmpty: "☆";
+    readonly horizontalLine: "─";
+    readonly verticalLine: "│";
+    readonly topLeft: "┌";
+    readonly topRight: "┐";
+    readonly bottomLeft: "└";
+    readonly bottomRight: "┘";
+    readonly brandIcon: "◆";
+};
+type SymbolName = keyof typeof symbols;
+/**
+ * Get agent logo by agent type ID
+ */
+declare function getAgentLogo(agentType: string): AgentLogo | undefined;
+/**
+ * Get all agent types
+ */
+declare function getAgentTypes(): string[];
+/**
+ * Get formatted agent display string (icon + name)
+ */
+declare function formatAgentDisplay(agentType: string): string;
+
+/**
+ * Animation presets for SkillKit TUI
+ * Uses OpenTUI's useTimeline for smooth 60fps animations
+ */
+/**
+ * Animation easing functions available in OpenTUI
+ */
+type EasingFunction = 'linear' | 'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' | 'easeInQuart' | 'easeOutQuart' | 'easeInOutQuart';
+/**
+ * Animation preset configuration
+ */
+interface AnimationPreset {
+    duration: number;
+    ease: EasingFunction;
+    stagger?: number;
+}
+/**
+ * Predefined animation presets
+ */
+declare const animations: {
+    /**
+     * Staggered fade-in for entrance animations
+     * Used on home screen for progressive content reveal
+     */
+    readonly staggeredFadeIn: {
+        readonly duration: 800;
+        readonly ease: EasingFunction;
+        readonly stagger: 100;
+    };
+    /**
+     * Logo reveal with scramble effect
+     * Used for branding animation on startup
+     */
+    readonly logoReveal: {
+        readonly duration: 600;
+        readonly ease: EasingFunction;
+    };
+    /**
+     * Count-up animation for stats
+     * Used in StatsCard component
+     */
+    readonly countUp: {
+        readonly duration: 1200;
+        readonly ease: EasingFunction;
+    };
+    /**
+     * Screen transition animation
+     * Used when navigating between screens
+     */
+    readonly screenTransition: {
+        readonly duration: 200;
+        readonly ease: EasingFunction;
+    };
+    /**
+     * Quick fade for tooltips and hints
+     */
+    readonly quickFade: {
+        readonly duration: 150;
+        readonly ease: EasingFunction;
+    };
+    /**
+     * Pulse animation for active states
+     */
+    readonly pulse: {
+        readonly duration: 1000;
+        readonly ease: EasingFunction;
+    };
+};
+/**
+ * Scramble effect characters
+ * Used for text reveal animations
+ */
+declare const SCRAMBLE_CHARS = "\u2588\u2593\u2592\u2591\u25C6\u25C7\u25C8\u27C1\u25CE\u2726\u2B21\u25A3";
+/**
+ * Scramble animation configuration
+ */
+interface ScrambleConfig {
+    /** Animation duration in ms */
+    duration: number;
+    /** Progress increment per frame */
+    increment: number;
+    /** Frame interval in ms */
+    interval: number;
+}
+/**
+ * Default scramble animation config
+ */
+declare const DEFAULT_SCRAMBLE_CONFIG: ScrambleConfig;
+/**
+ * Generate scrambled text with progressive reveal
+ * @param target - The target text to reveal
+ * @param progress - Progress percentage (0-100)
+ * @param chars - Characters to use for scrambling
+ */
+declare function scrambleText(target: string, progress: number, chars?: string): string;
+/**
+ * Calculate staggered delay for an item in a list
+ * @param index - Item index
+ * @param stagger - Delay between items in ms
+ * @returns Delay in ms for this item
+ */
+declare function getStaggerDelay(index: number, stagger?: number): number;
+
+/**
+ * Navigation state management for SkillKit TUI
+ */
+
+/**
+ * Navigation state
+ */
+interface NavigationState {
+    currentScreen: Screen;
+    previousScreen: Screen | null;
+    history: Screen[];
+}
+/**
+ * Create initial navigation state
+ */
+declare function createNavigationState(): NavigationState;
+/**
+ * Navigate to a new screen
+ */
+declare function navigateTo(state: NavigationState, screen: Screen): NavigationState;
+/**
+ * Go back to previous screen (or home)
+ */
+declare function goBack(state: NavigationState): NavigationState;
+/**
+ * Get screen from key press
+ */
+declare function getScreenFromKey(key: string): Screen | undefined;
+/**
+ * Check if a key is a navigation key
+ */
+declare function isNavKey(key: string): boolean;
+
+/**
+ * Detailed skill info including path for translation
+ */
+interface SkillWithDetails {
+    name: string;
+    description?: string;
+    path: string;
+    source?: string;
+    enabled: boolean;
+}
+/**
+ * Skills store state
+ */
+interface SkillsState {
+    skills: SkillItem[];
+    loading: boolean;
+    error: string | null;
+}
+/**
+ * Create initial skills state
+ */
+declare function createSkillsState(): SkillsState;
+/**
+ * Load installed skills
+ * @param agentType - Optional agent type to load skills for
+ * @returns Updated skills state
+ */
+declare function loadSkills(agentType?: AgentType): SkillsState;
+/**
+ * Remove a skill by name
+ * @param skillName - Name of the skill to remove
+ * @param agentType - Optional agent type
+ * @returns true if removed, false otherwise
+ */
+declare function removeSkill(skillName: string, agentType?: AgentType): boolean;
+/**
+ * Filter skills by search query
+ */
+declare function filterSkills(skills: SkillItem[], query: string): SkillItem[];
+/**
+ * Load skills with full details including path for translation
+ * @param agentType - Optional agent type to load skills for
+ * @returns Array of skills with path details
+ */
+declare function loadSkillsWithDetails(agentType?: AgentType): SkillWithDetails[];
+
+/**
+ * Agent status information
+ */
+interface AgentStatus {
+    type: AgentType;
+    name: string;
+    detected: boolean;
+    configured: boolean;
+}
+/**
+ * Agents state
+ */
+interface AgentsState {
+    agents: AgentStatus[];
+    currentAgent: AgentType;
+    loading: boolean;
+    error: string | null;
+}
+/**
+ * Create initial agents state
+ */
+declare function createAgentsState(): AgentsState;
+/**
+ * Load all agents with their detection status
+ */
+declare function loadAgents(): Promise<AgentsState>;
+/**
+ * Get count of detected agents
+ */
+declare function getDetectedAgentCount(state: AgentsState): number;
+/**
+ * Get list of detected agents
+ */
+declare function getDetectedAgents(state: AgentsState): AgentStatus[];
+/**
+ * Get agent adapter by type
+ */
+declare function getAgentAdapter(type: AgentType): _skillkit_agents.AgentAdapter;
+/**
+ * Total number of supported agents (derived from adapters)
+ */
+declare const TOTAL_AGENTS: number;
+
+declare const DEFAULT_REPOS: RepoInfo[];
+/**
+ * Marketplace state
+ */
+interface MarketplaceState {
+    allSkills: FetchedSkill[];
+    filteredSkills: FetchedSkill[];
+    loading: boolean;
+    error: string | null;
+    currentRepo: string | null;
+    fetchedRepos: Set<string>;
+    failedRepos: string[];
+    repos: RepoInfo[];
+}
+/**
+ * Get marketplace repos from config or use defaults
+ */
+declare function getMarketplaceRepos(): RepoInfo[];
+/**
+ * Create initial marketplace state
+ */
+declare function createMarketplaceState(): MarketplaceState;
+/**
+ * Try to read skill description from frontmatter
+ */
+declare function readSkillDescription(skillPath: string): string | undefined;
+/**
+ * Fetch skills from a single repository
+ */
+declare function fetchRepoSkills(source: string, repos: RepoInfo[]): Promise<{
+    skills: FetchedSkill[];
+    tempRoot?: string;
+    error?: string;
+}>;
+/**
+ * Clean up temp directory from fetch
+ */
+declare function cleanupTempRoot(tempRoot: string): void;
+/**
+ * Filter skills by search query
+ */
+declare function filterMarketplaceSkills(skills: FetchedSkill[], query: string): FetchedSkill[];
+/**
+ * Convert fetched skills to skill items for display
+ */
+declare function toSkillItems(skills: FetchedSkill[]): SkillItem[];
+/**
+ * Sort skills alphabetically by name
+ */
+declare function sortSkillsByName(skills: FetchedSkill[]): FetchedSkill[];
+
+/**
+ * Get search directories for skills based on agent type
+ * @param agentType - Optional agent type (defaults to configured agent)
+ * @returns Array of directories to search for skills
+ */
+declare function getSearchDirs(agentType?: AgentType): string[];
+/**
+ * Get installation directory for skills
+ * @param global - Whether to get global or project-local directory
+ * @param agentType - Optional agent type (defaults to configured agent)
+ * @returns Installation directory path
+ */
+declare function getInstallDir(global?: boolean, agentType?: AgentType): string;
+/**
+ * Save skill metadata to a skill directory
+ * @param skillDir - Directory containing the skill
+ * @param metadata - Metadata to save
+ */
+declare function saveSkillMetadata(skillDir: string, metadata: SkillMetadata): void;
+/**
+ * Get version from package.json
+ * @returns Version string
+ */
+declare function getVersion(): string;
+
+/**
+ * List navigation and pagination utilities
+ */
+/**
+ * Calculate visible items for paginated list display
+ * Centers the selected item in the visible window
+ */
+interface PaginationResult {
+    /** Starting index in the full list */
+    start: number;
+    /** Ending index (exclusive) in the full list */
+    end: number;
+    /** Number of items above the visible window */
+    itemsAbove: number;
+    /** Number of items below the visible window */
+    itemsBelow: number;
+}
+/**
+ * Calculate pagination for a list with a selected index
+ * @param totalItems - Total number of items in the list
+ * @param selectedIndex - Currently selected item index
+ * @param maxVisible - Maximum number of items to show at once
+ * @returns Pagination information
+ */
+declare function calculatePagination(totalItems: number, selectedIndex: number, maxVisible: number): PaginationResult;
+/**
+ * Move selection up in a list
+ * @param currentIndex - Current selected index
+ * @param minIndex - Minimum allowed index (default: 0)
+ * @returns New index after moving up
+ */
+declare function moveUp(currentIndex: number, minIndex?: number): number;
+/**
+ * Move selection down in a list
+ * @param currentIndex - Current selected index
+ * @param maxIndex - Maximum allowed index
+ * @returns New index after moving down
+ */
+declare function moveDown(currentIndex: number, maxIndex: number): number;
+/**
+ * Clamp an index within valid bounds
+ * @param index - Index to clamp
+ * @param listLength - Length of the list
+ * @returns Clamped index
+ */
+declare function clampIndex(index: number, listLength: number): number;
+/**
+ * Calculate max visible items based on available rows
+ * @param availableRows - Total available rows
+ * @param reservedRows - Rows reserved for headers, footers, etc.
+ * @param minVisible - Minimum visible items (default: 5)
+ * @returns Maximum visible items
+ */
+declare function calculateMaxVisible(availableRows: number, reservedRows: number, minVisible?: number): number;
+
+interface AgentGridProps {
+    maxVisible?: number;
+    showStatus?: boolean;
+    detectedAgents?: string[];
+    columns?: number;
+}
+declare function AgentGrid(props: AgentGridProps): any;
+
+interface StatItem {
+    label: string;
+    value: number;
+    color?: keyof typeof terminalColors;
+}
+interface StatsCardProps {
+    items: StatItem[];
+    animated?: boolean;
+}
+declare function StatsCard(props: StatsCardProps): any;
 
 interface HeaderProps {
     title: string;
     subtitle?: string;
     count?: number;
+    badge?: string;
+    icon?: string;
 }
-declare function Header({ title, subtitle, count }: HeaderProps): react_jsx_runtime.JSX.Element;
+declare function Header(props: HeaderProps): any;
 
-interface SkillItem {
-    name: string;
-    description?: string;
-    source?: string;
-    installs?: number;
-    enabled?: boolean;
+interface SidebarProps {
+    screen: Screen;
+    onNavigate: (screen: Screen) => void;
+}
+declare function Sidebar(props: SidebarProps): any;
+
+interface RightSidebarProps {
+    width: number;
+    rows: number;
 }
+declare function RightSidebar(props: RightSidebarProps): any;
+
+interface BottomStatusBarProps {
+    currentScreen: Screen;
+}
+declare function BottomStatusBar(props: BottomStatusBarProps): any;
+
+interface StatusBarProps {
+    message?: string;
+    messageType?: 'info' | 'success' | 'error' | 'warning';
+    shortcuts?: string;
+}
+declare function StatusBar(props: StatusBarProps): any;
+
 interface SkillListProps {
     skills: SkillItem[];
     selectedIndex: number;
-    showInstalls?: boolean;
-    showRank?: boolean;
-    showSource?: boolean;
     maxVisible?: number;
+    onSelect?: (skill: SkillItem) => void;
 }
-declare function SkillList({ skills, selectedIndex, showInstalls, showRank, showSource, maxVisible, }: SkillListProps): react_jsx_runtime.JSX.Element;
+declare function SkillList(props: SkillListProps): any;
 
-interface Shortcut {
+interface SearchInputProps {
+    value: string;
+    placeholder?: string;
+    focused?: boolean;
+    onChange?: (value: string) => void;
+}
+declare function SearchInput(props: SearchInputProps): any;
+
+interface SpinnerProps {
+    label?: string;
+    color?: keyof typeof terminalColors;
+}
+declare function Spinner(props: SpinnerProps): any;
+
+interface ProgressBarProps {
+    progress: number;
+    width?: number;
+    showPercentage?: boolean;
+    color?: keyof typeof terminalColors;
+}
+declare function ProgressBar(props: ProgressBarProps): any;
+
+interface Feature {
     key: string;
     label: string;
+    description: string;
+    color: keyof typeof terminalColors;
 }
-interface StatusBarProps {
-    shortcuts: Shortcut[];
+declare const FEATURES: Feature[];
+interface FeatureListProps {
+    features?: Feature[];
+}
+declare function FeatureList(props: FeatureListProps): any;
+
+interface SplashProps {
+    onComplete: () => void;
+    duration?: number;
+}
+declare function Splash(props: SplashProps): any;
+
+/**
+ * SelectList Component
+ * Reusable list with j/k + mouse navigation
+ */
+interface SelectListItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    meta?: string;
+    disabled?: boolean;
+}
+interface SelectListProps {
+    items: SelectListItem[];
+    selectedIndex: number;
+    hoveredIndex?: number | null;
+    onSelect?: (item: SelectListItem, index: number) => void;
+    onHover?: (index: number) => void;
+    maxVisible?: number;
+    showIndex?: boolean;
+    emptyText?: string;
+    compact?: boolean;
+}
+declare function SelectList(props: SelectListProps): any;
+
+/**
+ * DetailPane Component
+ * Right-side detail panel with animated slide-in
+ */
+
+interface DetailField {
+    label: string;
+    value: string | string[];
+    color?: string;
+}
+interface DetailPaneProps {
+    title: string;
+    subtitle?: string;
+    icon?: string;
+    fields?: DetailField[];
+    content?: string;
+    actions?: Array<{
+        key: string;
+        label: string;
+    }>;
+    width?: number;
+    visible?: boolean;
+    onClose?: () => void;
+    children?: JSX.Element;
+}
+declare function DetailPane(props: DetailPaneProps): any;
+
+/**
+ * SplitPane Component
+ * Horizontal/vertical split layout
+ */
+
+interface SplitPaneProps {
+    direction?: 'horizontal' | 'vertical';
+    primarySize?: number | string;
+    secondarySize?: number | string;
+    showDivider?: boolean;
+    dividerChar?: string;
+    primary: JSX.Element;
+    secondary?: JSX.Element;
+    gap?: number;
+}
+declare function SplitPane(props: SplitPaneProps): any;
+interface ThreePaneLayoutProps {
+    left?: JSX.Element;
+    center: JSX.Element;
+    right?: JSX.Element;
+    leftWidth?: number;
+    rightWidth?: number;
+    showLeftDivider?: boolean;
+    showRightDivider?: boolean;
+}
+declare function ThreePaneLayout(props: ThreePaneLayoutProps): any;
+
+/**
+ * EmptyState Component
+ * Consistent "no data" display
+ */
+interface EmptyStateProps {
+    icon?: string;
+    title: string;
+    description?: string;
+    action?: {
+        label: string;
+        key?: string;
+    };
+    compact?: boolean;
+}
+declare function EmptyState(props: EmptyStateProps): any;
+interface LoadingStateProps {
     message?: string;
+    compact?: boolean;
 }
-declare function StatusBar({ shortcuts, message }: StatusBarProps): react_jsx_runtime.JSX.Element;
+declare function LoadingState(props: LoadingStateProps): any;
+interface ErrorStateProps {
+    title?: string;
+    message: string;
+    action?: {
+        label: string;
+        key?: string;
+    };
+    compact?: boolean;
+}
+declare function ErrorState(props: ErrorStateProps): any;
 
-interface SearchInputProps {
+/**
+ * StatusIndicator Component
+ * Loading/success/error/warning indicator
+ */
+type StatusType = 'loading' | 'success' | 'error' | 'warning' | 'info' | 'pending';
+interface StatusIndicatorProps {
+    status: StatusType;
+    label?: string;
+    showLabel?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    animated?: boolean;
+}
+declare function StatusIndicator(props: StatusIndicatorProps): any;
+interface InlineStatusProps {
+    status: StatusType;
+    compact?: boolean;
+}
+declare function InlineStatus(props: InlineStatusProps): any;
+interface StatusBadgeProps {
+    status: StatusType;
+    label: string;
+}
+declare function StatusBadge(props: StatusBadgeProps): any;
+
+/**
+ * CodeBlock Component
+ * Basic syntax highlighting for code display
+ */
+interface CodeBlockProps {
+    code: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    maxLines?: number;
+    highlightLines?: number[];
+    title?: string;
+}
+declare function CodeBlock(props: CodeBlockProps): any;
+interface InlineCodeProps {
+    children: string;
+}
+declare function InlineCode(props: InlineCodeProps): any;
+
+/**
+ * FormField Component
+ * Input with label and validation
+ */
+interface FormFieldProps {
+    label: string;
+    value: string;
+    placeholder?: string;
+    error?: string;
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+    focused?: boolean;
+    type?: 'text' | 'password' | 'search';
+    width?: number;
+}
+declare function FormField(props: FormFieldProps): any;
+interface TextAreaFieldProps {
+    label: string;
     value: string;
-    onChange: (value: string) => void;
     placeholder?: string;
+    error?: string;
+    rows?: number;
+    width?: number;
+    focused?: boolean;
+}
+declare function TextAreaField(props: TextAreaFieldProps): any;
+interface SelectFieldProps {
+    label: string;
+    value: string;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    focused?: boolean;
+    expanded?: boolean;
+    selectedOptionIndex?: number;
+}
+declare function SelectField(props: SelectFieldProps): any;
+
+/**
+ * ErrorBoundary Component
+ * Catch and display errors gracefully
+ */
+
+interface ErrorBoundaryProps {
+    children: JSX.Element;
+    fallback?: JSX.Element | ((error: Error, reset: () => void) => JSX.Element);
+    onError?: (error: Error) => void;
+}
+declare function ErrorBoundary(props: ErrorBoundaryProps): any;
+interface TryProps {
+    children: JSX.Element;
+    catch?: JSX.Element;
+}
+declare function Try(props: TryProps): any;
+
+/**
+ * Button Component
+ * Clickable button with hover/active states
+ */
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps {
+    label: string;
+    shortcut?: string;
+    icon?: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    focused?: boolean;
+    pressed?: boolean;
+    hovered?: boolean;
+    onClick?: () => void;
+}
+declare function Button(props: ButtonProps): any;
+interface ButtonGroupProps {
+    buttons: Array<{
+        id: string;
+        label: string;
+        shortcut?: string;
+        icon?: string;
+        variant?: ButtonVariant;
+        disabled?: boolean;
+        onClick?: () => void;
+    }>;
+    selectedId?: string;
+    focusedId?: string;
+    direction?: 'horizontal' | 'vertical';
+    gap?: number;
+}
+declare function ButtonGroup(props: ButtonGroupProps): any;
+interface IconButtonProps {
+    icon: string;
+    label?: string;
+    disabled?: boolean;
+    focused?: boolean;
+    hovered?: boolean;
+    onClick?: () => void;
+}
+declare function IconButton(props: IconButtonProps): any;
+
+/**
+ * Clickable Component
+ * Wrapper to make any element clickable with hover effects
+ */
+
+interface ClickableProps {
+    children: JSX.Element;
+    onClick?: () => void;
+    onDoubleClick?: () => void;
+    onRightClick?: () => void;
+    disabled?: boolean;
+    hovered?: boolean;
+    pressed?: boolean;
+    focusable?: boolean;
+    focused?: boolean;
+    cursor?: string;
+    hoverEffect?: 'highlight' | 'underline' | 'pointer' | 'none';
+}
+declare function Clickable(props: ClickableProps): any;
+interface ClickableTextProps {
+    children: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    hovered?: boolean;
+    color?: string;
+    hoverColor?: string;
+    underlineOnHover?: boolean;
+}
+declare function ClickableText(props: ClickableTextProps): any;
+interface ClickableRowProps {
+    children: JSX.Element;
+    selected?: boolean;
+    hovered?: boolean;
+    disabled?: boolean;
+    showIndicator?: boolean;
+    indicatorChar?: string;
+    onClick?: () => void;
+}
+declare function ClickableRow(props: ClickableRowProps): any;
+interface InteractiveAreaProps {
+    children: JSX.Element;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    onMouseOver?: () => void;
+    onMouseOut?: () => void;
+    onClick?: () => void;
+    onMouseDown?: () => void;
+    onMouseUp?: () => void;
+}
+declare function InteractiveArea(props: InteractiveAreaProps): any;
+
+/**
+ * HoverHighlight Component
+ * Hover highlight effect for list items and buttons
+ * Note: Terminal background colors are limited, so we use text color changes for highlighting
+ */
+
+interface HoverHighlightProps {
+    children: JSX.Element;
+    isHovered?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    highlightColor?: string;
+    selectedColor?: string;
+    transitionMs?: number;
+}
+declare function HoverHighlight(props: HoverHighlightProps): any;
+interface HighlightableListItemProps {
+    children: JSX.Element;
+    index: number;
+    selectedIndex?: number;
+    hoveredIndex?: number | null;
+    showPrefix?: boolean;
+    prefixWidth?: number;
+}
+declare function HighlightableListItem(props: HighlightableListItemProps): any;
+interface FocusRingProps {
+    children: JSX.Element;
     isFocused?: boolean;
+    ringColor?: string;
 }
-declare function SearchInput({ value, onChange, placeholder, isFocused, }: SearchInputProps): react_jsx_runtime.JSX.Element;
+declare function FocusRing(props: FocusRingProps): any;
+interface PressEffectProps {
+    children: JSX.Element;
+    isPressed?: boolean;
+    pressColor?: string;
+}
+declare function PressEffect(props: PressEffectProps): any;
+
+/**
+ * AnimatedText Component
+ * Text with fade/slide animations
+ */
+interface AnimatedTextProps {
+    text: string;
+    animation?: 'fadeIn' | 'typewriter' | 'scramble' | 'countUp' | 'none';
+    duration?: number;
+    delay?: number;
+    color?: string;
+    onComplete?: () => void;
+}
+declare function AnimatedText(props: AnimatedTextProps): any;
+interface CountUpTextProps {
+    value: number;
+    duration?: number;
+    delay?: number;
+    prefix?: string;
+    suffix?: string;
+    color?: string;
+    formatter?: (value: number) => string;
+}
+declare function CountUpText(props: CountUpTextProps): any;
+interface BlinkingTextProps {
+    text: string;
+    interval?: number;
+    color?: string;
+    blinkColor?: string;
+}
+declare function BlinkingText(props: BlinkingTextProps): any;
+interface PulsingTextProps {
+    text: string;
+    color?: string;
+    pulseColor?: string;
+    interval?: number;
+}
+declare function PulsingText(props: PulsingTextProps): any;
+
+/**
+ * TabBar Component
+ * Clickable tab navigation
+ */
+interface Tab {
+    id: string;
+    label: string;
+    icon?: string;
+    badge?: string | number;
+    disabled?: boolean;
+}
+interface TabBarProps {
+    tabs: Tab[];
+    activeId: string;
+    hoveredId?: string | null;
+    onSelect?: (id: string) => void;
+    variant?: 'default' | 'pills' | 'underline';
+    size?: 'sm' | 'md' | 'lg';
+    showShortcuts?: boolean;
+}
+declare function TabBar(props: TabBarProps): any;
+interface VerticalTabBarProps {
+    tabs: Tab[];
+    activeId: string;
+    hoveredId?: string | null;
+    onSelect?: (id: string) => void;
+    width?: number;
+}
+declare function VerticalTabBar(props: VerticalTabBarProps): any;
+
+/**
+ * Breadcrumb Component
+ * Clickable breadcrumb navigation
+ */
+interface BreadcrumbItem {
+    id: string;
+    label: string;
+    icon?: string;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    separator?: string;
+    hoveredId?: string | null;
+    onNavigate?: (id: string) => void;
+}
+declare function Breadcrumb(props: BreadcrumbProps): any;
+interface PathBreadcrumbProps {
+    path: string;
+    separator?: string;
+    maxSegments?: number;
+    hoveredSegment?: number | null;
+    onNavigate?: (path: string, segmentIndex: number) => void;
+}
+declare function PathBreadcrumb(props: PathBreadcrumbProps): any;
+interface NavigationTrailProps {
+    items: Array<{
+        screen: string;
+        label: string;
+    }>;
+    currentIndex: number;
+    hoveredIndex?: number | null;
+}
+declare function NavigationTrail(props: NavigationTrailProps): any;
 
 interface HomeProps {
     onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Home({ cols, rows }: HomeProps): react_jsx_runtime.JSX.Element;
+declare function Home(props: HomeProps): any;
 
-interface Props$f {
+interface BrowseProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Browse({ rows }: Props$f): react_jsx_runtime.JSX.Element;
+declare function Browse(props: BrowseProps): any;
 
-interface Props$e {
+interface InstalledProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Installed({ rows }: Props$e): react_jsx_runtime.JSX.Element;
+declare function Installed(props: InstalledProps): any;
 
-interface Props$d {
+interface MarketplaceProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Sync({ rows }: Props$d): react_jsx_runtime.JSX.Element;
+declare function Marketplace(props: MarketplaceProps): any;
 
-interface Props$c {
+interface RecommendProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Settings(_props: Props$c): react_jsx_runtime.JSX.Element;
+declare function Recommend(props: RecommendProps): any;
 
-interface Props$b {
+interface TranslateProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Recommend({ rows }: Props$b): react_jsx_runtime.JSX.Element;
+declare function Translate(props: TranslateProps): any;
 
-interface Props$a {
+interface ContextProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Translate({ rows }: Props$a): react_jsx_runtime.JSX.Element;
+declare function Context(props: ContextProps): any;
 
-interface Props$9 {
+interface SyncProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Context({ rows }: Props$9): react_jsx_runtime.JSX.Element;
+declare function Sync(props: SyncProps): any;
 
-interface Props$8 {
+interface MemoryProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Memory({ rows }: Props$8): react_jsx_runtime.JSX.Element;
+declare function Memory(props: MemoryProps): any;
 
-interface Props$7 {
+interface WorkflowProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Workflow({ rows }: Props$7): react_jsx_runtime.JSX.Element;
+declare function Workflow(props: WorkflowProps): any;
 
-interface Props$6 {
+interface ExecuteProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Execute({ rows }: Props$6): react_jsx_runtime.JSX.Element;
+declare function Execute(props: ExecuteProps): any;
 
-interface Props$5 {
+interface HistoryProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function History({ rows }: Props$5): react_jsx_runtime.JSX.Element;
+declare function History(props: HistoryProps): any;
 
-interface Props$4 {
+interface TeamProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Marketplace({ rows }: Props$4): react_jsx_runtime.JSX.Element;
+declare function Team(props: TeamProps): any;
 
-interface Props$3 {
+interface PluginsProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Team({ rows }: Props$3): react_jsx_runtime.JSX.Element;
+declare function Plugins(props: PluginsProps): any;
 
-interface Props$2 {
+interface MethodologyProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Plugins({ rows }: Props$2): react_jsx_runtime.JSX.Element;
+declare function Methodology(props: MethodologyProps): any;
 
-interface Props$1 {
+interface PlanProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Methodology({ rows }: Props$1): react_jsx_runtime.JSX.Element;
+declare function Plan(props: PlanProps): any;
 
-interface Props {
+interface SettingsProps {
+    onNavigate: (screen: Screen) => void;
     cols?: number;
     rows?: number;
 }
-declare function Plan({ rows }: Props): react_jsx_runtime.JSX.Element;
+declare function Settings(props: SettingsProps): any;
 
-interface UseSkillsResult {
-    skills: SkillItem[];
-    loading: boolean;
-    error: string | null;
-    refresh: () => void;
-    remove: (name: string) => Promise<void>;
+interface HelpProps {
+    onNavigate: (screen: Screen) => void;
+    cols?: number;
+    rows?: number;
 }
-declare function useSkills(): UseSkillsResult;
+declare function Help(props: HelpProps): any;
 
-interface RepoInfo {
-    source: string;
-    name: string;
-}
-interface UseMarketplaceResult {
-    skills: SkillItem[];
-    loading: boolean;
-    error: string | null;
-    totalCount: number;
-    repos: RepoInfo[];
-    currentRepo: string | null;
-    failedRepos: string[];
-    refresh: () => void;
-    search: (query: string) => void;
-    fetchRepo: (source: string) => Promise<void>;
-    fetchAllRepos: () => Promise<void>;
-}
-declare function useMarketplace(): UseMarketplaceResult;
-
-interface UseKeyboardOptions {
-    onNavigate?: (screen: Screen) => void;
-    onSelect?: () => void;
-    onSearch?: () => void;
-    onInstall?: () => void;
-    onBack?: () => void;
-    onUp?: () => void;
-    onDown?: () => void;
-    disabled?: boolean;
+interface MeshProps {
+    onNavigate: (screen: Screen) => void;
+    cols?: number;
+    rows?: number;
 }
-declare function useKeyboard(options?: UseKeyboardOptions): void;
-declare function useListNavigation(listLength: number, initialIndex?: number): {
-    selectedIndex: number;
-    setSelectedIndex: react.Dispatch<react.SetStateAction<number>>;
-    moveUp: () => void;
-    moveDown: () => void;
-    reset: () => void;
-};
+declare function Mesh(props: MeshProps): any;
 
-interface UseRecommendResult {
-    recommendations: ScoredSkill[];
-    profile: ProjectProfile | null;
-    loading: boolean;
-    error: string | null;
-    totalScanned: number;
-    indexStatus: 'missing' | 'stale' | 'fresh';
-    refresh: () => void;
-    updateIndex: () => void;
-    search: (query: string) => void;
-    searchResults: ScoredSkill[];
-}
-declare function useRecommend(projectPath?: string): UseRecommendResult;
-
-interface UseMemoryResult {
-    learnings: Learning[];
-    observations: Observation[];
-    status: MemoryStatus | null;
-    loading: boolean;
-    error: string | null;
-    isGlobal: boolean;
-    setIsGlobal: (isGlobal: boolean) => void;
-    refresh: () => void;
-    search: (query: string) => Learning[];
-    deleteLearning: (id: string) => boolean;
-    deleteObservation: (id: string) => boolean;
+interface MessageProps {
+    onNavigate: (screen: Screen) => void;
+    cols?: number;
+    rows?: number;
 }
-declare function useMemory(): UseMemoryResult;
-
-declare const colors: {
-    primary: string;
-    secondary: string;
-    secondaryDim: string;
-    success: string;
-    danger: string;
-    warning: string;
-    background: string;
-    borderDim: string;
-};
-declare const symbols: {
-    pointer: string;
-    bullet: string;
-    checkboxOn: string;
-    checkboxOff: string;
-    check: string;
-    star: string;
-    spinner: string[];
-    arrowUp: string;
-    arrowDown: string;
-    success: string;
-    error: string;
-    warning: string;
-    info: string;
-};
-declare const logo = "\n\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557  \u2588\u2588\u2557\u2588\u2588\u2557\u2588\u2588\u2557     \u2588\u2588\u2557     \u2588\u2588\u2557  \u2588\u2588\u2557\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\n\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551 \u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2551     \u2588\u2588\u2551 \u2588\u2588\u2554\u255D\u2588\u2588\u2551\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\n\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2554\u255D \u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2551     \u2588\u2588\u2588\u2588\u2588\u2554\u255D \u2588\u2588\u2551   \u2588\u2588\u2551\n\u255A\u2550\u2550\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2588\u2588\u2557 \u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2588\u2588\u2557 \u2588\u2588\u2551   \u2588\u2588\u2551\n\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2551  \u2588\u2588\u2557\u2588\u2588\u2551   \u2588\u2588\u2551\n\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u255D\u255A\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u255D\u255A\u2550\u255D   \u255A\u2550\u255D\n";
+declare function Message(props: MessageProps): any;
 
-declare function startTUI(): Promise<void>;
+declare function exitTUI(code?: number): void;
+declare function startTUI(): Promise<never>;
 
-export { App, Browse, Context, Execute, Header, History, Home, Installed, Marketplace, Memory, Methodology, Plan, Plugins, Recommend, type Screen, SearchInput, Settings, Sidebar, type SkillItem, SkillList, StatusBar, Sync, Team, Translate, Workflow, colors, logo, startTUI, symbols, useKeyboard, useListNavigation, useMarketplace, useMemory, useRecommend, useSkills };
+export { AGENT_LOGOS, AgentGrid, type AgentLogo, type AgentStatus, type AgentsState, AnimatedText, type AnimationPreset, App, BlinkingText, BottomStatusBar, Breadcrumb, type BreadcrumbItem, Browse, Button, ButtonGroup, type ButtonSize, type ButtonVariant, Clickable, ClickableRow, ClickableText, CodeBlock, type ColorName, type ColorValue, Context, CountUpText, DEFAULT_REPOS, DEFAULT_SCRAMBLE_CONFIG, type DetailField, DetailPane, type EasingFunction, EmptyState, ErrorBoundary, ErrorState, Execute, FEATURES, type Feature, FeatureList, type FetchedSkill, FocusRing, FormField, Header, Help, HighlightableListItem, History, Home, HoverHighlight, IconButton, InlineCode, InlineStatus, Installed, InteractiveArea, LoadingState, Marketplace, type MarketplaceState, Memory, Mesh, Message, Methodology, NAV_KEYS, type NavigationState, NavigationTrail, type PaginationResult, PathBreadcrumb, Plan, Plugins, PressEffect, ProgressBar, PulsingText, Recommend, type RepoInfo, RightSidebar, SCRAMBLE_CHARS, SIDEBAR_NAV, STATUS_BAR_SHORTCUTS, type ScrambleConfig, type Screen, type ScreenMeta, SearchInput, SelectField, SelectList, type SelectListItem, Settings, Sidebar, type SidebarSection, type SkillItem, SkillList, type SkillWithDetails, type SkillsState, Spinner, Splash, SplitPane, StatsCard, StatusBadge, StatusBar, StatusIndicator, type StatusType, type SymbolName, Sync, TOTAL_AGENTS, type Tab, TabBar, Team, TextAreaField, ThreePaneLayout, Translate, Try, VerticalTabBar, Workflow, animations, calculateMaxVisible, calculatePagination, clampIndex, cleanupTempRoot, colors, createAgentsState, createMarketplaceState, createNavigationState, createSkillsState, exitTUI, fetchRepoSkills, filterMarketplaceSkills, filterSkills, formatAgentDisplay, getAgentAdapter, getAgentLogo, getAgentTypes, getColor, getDetectedAgentCount, getDetectedAgents, getInstallDir, getMarketplaceRepos, getScreenFromKey, getSearchDirs, getStaggerDelay, getVersion, goBack, isNavKey, loadAgents, loadSkills, loadSkillsWithDetails, moveDown, moveUp, navigateTo, readSkillDescription, removeSkill, saveSkillMetadata, scrambleText, sortSkillsByName, startTUI, symbols, terminalColors, toSkillItems };