@agentiffai/design 1.3.26 → 1.3.27

package/dist/index.d.cts

@@ -5,7 +5,7 @@ import React__default, { ReactNode } from 'react';
 export { ActionButtons, ActionButtonsProps, BrandType, CategoryItem, CategoryNav, CategoryNavProps, CategorySubItem, Icon, IconName, IconNames, IconProps, Layout, LayoutProps, NavHorizontal, NavHorizontalProps, NavVertical, NavVerticalProps, OAuthConnectionData, PaneMenus, PaneMenusProps, PaneSectionHeader, PaneSectionHeaderProps, ServiceBrand, ServiceIcon, ServiceIconProps, WorkflowStatusCard, WorkflowStatusCardProps } from './layout/index.cjs';
 import { AriaButtonProps } from '@react-aria/button';
 export { GlobalStyle, darkTheme, lightTheme, tokens } from './theme/index.cjs';
-export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, t as AssistantMessage, o as AssistantMessageProps, k as Button, B as ButtonProps, i as ButtonSize, j as ButtonVariant, z as CopilotUserMessage, U as CopilotUserMessageProps, u as FileAttachment, p as FileAttachmentProps, l as Footer, F as FooterProps, m as Header, H as HeaderProps, n as Input, I as InputProps, M as Message, v as Messages, w as MessagesList, x as MessagesListContainer, y as MessagesListContent, q as MessagesListProps, s as MessagesProps, D as Response, C as ResponseProps, G as StreamErrorMessage, S as StreamErrorMessageProps, N as StreamStatusIndicator, L as StreamStatusIndicatorProps, K as StreamingText, J as StreamingTextProps, P as Suggestions, O as SuggestionsProps, Q as Window, W as WindowProps, h as clearToolCalls, r as registerToolCall } from './Window-DyRP81dS.cjs';
+export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, t as AssistantMessage, o as AssistantMessageProps, k as Button, B as ButtonProps, i as ButtonSize, j as ButtonVariant, z as CopilotUserMessage, U as CopilotUserMessageProps, u as FileAttachment, p as FileAttachmentProps, l as Footer, F as FooterProps, m as Header, H as HeaderProps, n as Input, I as InputProps, M as Message, v as Messages, w as MessagesList, x as MessagesListContainer, y as MessagesListContent, q as MessagesListProps, s as MessagesProps, D as Response, C as ResponseProps, G as StreamErrorMessage, S as StreamErrorMessageProps, N as StreamStatusIndicator, L as StreamStatusIndicatorProps, K as StreamingText, J as StreamingTextProps, P as Suggestions, O as SuggestionsProps, Q as Window, W as WindowProps, h as clearToolCalls, r as registerToolCall } from './Window-Dm_I5m8i.cjs';
 export { FacebookIcon, FacebookIconProps, FacebookIconVariant, GmailIcon, GmailIconProps, GmailIconVariant, InstagramIcon, InstagramIconProps, InstagramVariant, LinkedInIcon, LinkedInIconProps, LinkedInIconVariant, PostizIcon, PostizIconProps, PostizIconVariant, RedditIcon, RedditIconProps, RedditIconVariant, SlackIcon, SlackIconProps, SlackIconVariant, TelegramIcon, TelegramIconProps, TelegramIconVariant, WhatsAppIcon, WhatsAppIconProps, WhatsAppIconVariant, XIcon, XIconProps, XIconVariant, YouTubeIcon, YouTubeIconProps, YouTubeIconVariant } from './icons/index.cjs';
 export { WorkflowCard, WorkflowCardProps, WorkflowErrorAlert, WorkflowErrorAlertProps, WorkflowIntegration, WorkflowProgressBar, WorkflowProgressBarProps, WorkflowResultPanel, WorkflowResultPanelProps, WorkflowStatusBadge, WorkflowStatusBadgeProps } from './workflow/index.cjs';
 import '@react-types/button';
@@ -99,6 +99,179 @@ interface ChatInputProps extends Omit<AriaTextFieldProps, 'onChange'> {
  */
 declare const ChatInput: React__default.FC<ChatInputProps>;
 
+/**
+ * TagInput Component
+ *
+ * A pill-based input for array values using React Aria's TagGroup.
+ * Users can add/remove items as interactive pills instead of comma-separated text.
+ */
+
+interface TagInputProps {
+    /** Current array of values */
+    value: string[];
+    /** Callback when values change */
+    onChange: (values: string[]) => void;
+    /** Field label */
+    label: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Helper text / description */
+    description?: string;
+    /** Placeholder for the input */
+    placeholder?: string;
+    /** Default values to show as hint */
+    defaultHint?: string[];
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string | null;
+    /** Minimum number of items required */
+    minItems?: number;
+    /** Test ID prefix */
+    testId?: string;
+}
+/**
+ * TagInput - A pill-based array input component
+ *
+ * Features:
+ * - Add items by typing and pressing Enter or clicking Add
+ * - Remove items by clicking the X on each pill
+ * - Visual feedback for selected/hover states
+ * - Keyboard accessible
+ */
+declare const TagInput: React__default.FC<TagInputProps>;
+
+/**
+ * WorkflowLoadingSkeleton Component
+ *
+ * Shows persistent skeleton during INITIALIZING and PROCESSING phases.
+ * Features:
+ * - Indeterminate progress bar for INITIALIZING phase
+ * - Determinate progress bar for PROCESSING phase (when steps are known)
+ * - Current activity message display
+ * - Step counter when totalSteps > 0
+ * - Divide-by-zero protection for percentage calculation
+ * - Minimum display duration (100ms delay) to prevent flash
+ */
+interface WorkflowLoadingSkeletonProps {
+    /** Current workflow phase (e.g. "INITIALIZING", "PROCESSING") */
+    phase: string;
+    /** Progress state with step tracking and percentage */
+    progress: {
+        currentStep: number;
+        totalSteps: number;
+        currentActivity: string;
+        percentage: number;
+    };
+}
+/**
+ * WorkflowLoadingSkeleton shows a persistent loading state during workflow execution.
+ * Adapts visual presentation based on current phase and available progress data.
+ */
+declare function WorkflowLoadingSkeleton({ phase, progress, }: WorkflowLoadingSkeletonProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * AuthButton Component
+ *
+ * Button component with primary/secondary variants, loading states, and disabled states
+ */
+
+interface AuthButtonProps {
+    children: React__default.ReactNode;
+    onClick?: () => void;
+    type?: "button" | "submit" | "reset";
+    variant?: "primary" | "secondary";
+    loading?: boolean;
+    loadingText?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    icon?: React__default.ReactNode;
+    className?: string;
+    "data-testid"?: string;
+}
+declare const AuthButton: React__default.FC<AuthButtonProps>;
+
+/**
+ * AuthInput Component
+ *
+ * Reusable input field with validation states and error display
+ * Uses react-aria for accessibility and styled-components for styling
+ */
+
+interface AuthInputProps {
+    label: string;
+    name: string;
+    type?: "text" | "email" | "tel" | "password";
+    value?: string;
+    placeholder?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    /** Prevents browser autofill using readonly workaround (for OTP/verification codes) */
+    disableAutofill?: boolean;
+    /** Maximum number of characters allowed */
+    maxLength?: number;
+    /** Input mode for mobile keyboard (e.g., "numeric" for number pad) */
+    inputMode?: "text" | "numeric" | "tel" | "email" | "decimal";
+    className?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    onValidate?: () => void;
+    validateOnBlur?: boolean;
+    "data-testid"?: string;
+}
+declare const AuthInput: React__default.FC<AuthInputProps>;
+
+/**
+ * PasswordInput Component
+ *
+ * Password input with show/hide toggle icon
+ * Inherits from AuthInput with additional password-specific features
+ */
+
+interface PasswordInputProps extends Omit<AuthInputProps, "type"> {
+    clearOnError?: boolean;
+    minLength?: number;
+    hintText?: string;
+}
+declare const PasswordInput: React__default.FC<PasswordInputProps>;
+
+/**
+ * SuccessToast Component
+ *
+ * Displays success notifications with auto-dismiss functionality
+ * Styled with green colors for positive feedback
+ */
+
+interface SuccessToastProps {
+    message: string | null;
+    onDismiss: () => void;
+    autoDismiss?: boolean;
+    autoDismissDelay?: number;
+}
+declare const SuccessToast: React__default.FC<SuccessToastProps>;
+
+/**
+ * ErrorBanner Component
+ *
+ * Global connectivity error banner that appears at the top of the viewport
+ * Displays when the app is offline and automatically dismisses on reconnect
+ */
+
+interface ErrorBannerProps {
+    isOnline: boolean;
+    message?: string;
+}
+/**
+ * ErrorBanner component displays connectivity errors
+ *
+ * @param isOnline - Network connectivity status
+ * @param message - Optional custom error message (defaults to "No internet connection")
+ */
+declare const ErrorBanner: React__default.FC<ErrorBannerProps>;
+
 interface NotificationItem {
     /** Unique identifier for the item */
     id: string;
@@ -739,4 +912,56 @@ interface TokenUsageCardProps {
 }
 declare function TokenUsageCard({ currentUsage, maxLimit, transactions, periodLabel, onViewAll, className, loading, }: TokenUsageCardProps): React__default.ReactElement;
 
-export { type ApprovalStatus, AssistantThinking, type AssistantThinkingProps, type BillingPeriod, BillingToggle, type BillingToggleProps, CATEGORY_CONFIGS, type CategoryConfig, ChatInput, type ChatInputProps, ConnectionStatusBadge, type ConnectionStatusBadgeProps, DarkNotificationCard, type EngagementOpportunity, type EngagementStatus, IntegrationCard, type IntegrationCardProps, NotificationCard, type NotificationCardProps, type NotificationItem, type NotificationSection, PLATFORM_CONFIGS, type Platform, PlatformCarousel, type PlatformCarouselProps, type PlatformConfig, PlatformGrid, type PlatformGridProps, PostApprovalControls, type PostApprovalControlsProps, PostPreviewCard, type PostPreviewCardProps, type PostViewMode, type ProgressCategory, type ProposedPost, RedditEngagementControls, type RedditEngagementControlsProps, RedditOpportunityCard, type RedditOpportunityCardProps, type ReplyTone, SecretInput, type SecretInputProps, SocialMediaCanvas, type SocialMediaCanvasProps, type TokenTransaction, TokenUsageCard, type TokenUsageCardProps, TrialPlanCard, type TrialPlanCardProps, UserMessage, type UserMessageProps, categorizeProgress, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, normalizePlatform };
+/**
+ * useLocalStorage Hook
+ *
+ * Generic hook for localStorage persistence with type safety
+ * Provides state management with automatic localStorage sync
+ */
+/**
+ * Custom hook for managing state with localStorage persistence
+ * @param key - localStorage key to store the value under
+ * @param initialValue - initial value to use if no stored value exists
+ * @returns tuple of [value, setValue] similar to useState
+ */
+declare function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void];
+
+/**
+ * useNetworkStatus Hook - Detects network connectivity changes
+ *
+ * Uses two detection methods:
+ * 1. Browser online/offline events (instant, works on desktop)
+ * 2. Ping-based check (fallback for Android WebView where browser events don't fire)
+ *
+ * @param healthEndpoint - Optional URL to ping for connectivity checks (used in Tauri/WebView environments)
+ */
+declare function useNetworkStatus(healthEndpoint?: string): boolean;
+
+/**
+ * Hook to detect mobile landscape orientation
+ * Returns true when device is in landscape mode with limited height (mobile)
+ */
+declare function useIsLandscape(): boolean;
+
+/**
+ * Keyboard Detection Hook
+ * Implements keyboard visibility detection and height calculation
+ * Per spec section 3.3: Keyboard Detection & Override
+ */
+interface KeyboardState {
+    isVisible: boolean;
+    height: number;
+    viewportOffsetTop: number;
+}
+/**
+ * Hook to detect virtual keyboard visibility and height on mobile devices
+ * Uses Visual Viewport API where available, with fallback methods
+ */
+declare const useKeyboardDetection: () => KeyboardState;
+/**
+ * Utility function to check if the device is mobile
+ * Checks for touch capability and mobile user agents
+ */
+declare const isMobileDevice: () => boolean;
+
+export { type ApprovalStatus, AssistantThinking, type AssistantThinkingProps, AuthButton, type AuthButtonProps, AuthInput, type AuthInputProps, type BillingPeriod, BillingToggle, type BillingToggleProps, CATEGORY_CONFIGS, type CategoryConfig, ChatInput, type ChatInputProps, ConnectionStatusBadge, type ConnectionStatusBadgeProps, DarkNotificationCard, type EngagementOpportunity, type EngagementStatus, ErrorBanner, type ErrorBannerProps, IntegrationCard, type IntegrationCardProps, NotificationCard, type NotificationCardProps, type NotificationItem, type NotificationSection, PLATFORM_CONFIGS, PasswordInput, type PasswordInputProps, type Platform, PlatformCarousel, type PlatformCarouselProps, type PlatformConfig, PlatformGrid, type PlatformGridProps, PostApprovalControls, type PostApprovalControlsProps, PostPreviewCard, type PostPreviewCardProps, type PostViewMode, type ProgressCategory, type ProposedPost, RedditEngagementControls, type RedditEngagementControlsProps, RedditOpportunityCard, type RedditOpportunityCardProps, type ReplyTone, SecretInput, type SecretInputProps, SocialMediaCanvas, type SocialMediaCanvasProps, SuccessToast, type SuccessToastProps, TagInput, type TagInputProps, type TokenTransaction, TokenUsageCard, type TokenUsageCardProps, TrialPlanCard, type TrialPlanCardProps, UserMessage, type UserMessageProps, WorkflowLoadingSkeleton, type WorkflowLoadingSkeletonProps, categorizeProgress, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isMobileDevice, isWithinCharLimit, normalizePlatform, useIsLandscape, useKeyboardDetection, useLocalStorage, useNetworkStatus };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import React__default, { ReactNode } from 'react';
 export { ActionButtons, ActionButtonsProps, BrandType, CategoryItem, CategoryNav, CategoryNavProps, CategorySubItem, Icon, IconName, IconNames, IconProps, Layout, LayoutProps, NavHorizontal, NavHorizontalProps, NavVertical, NavVerticalProps, OAuthConnectionData, PaneMenus, PaneMenusProps, PaneSectionHeader, PaneSectionHeaderProps, ServiceBrand, ServiceIcon, ServiceIconProps, WorkflowStatusCard, WorkflowStatusCardProps } from './layout/index.js';
 import { AriaButtonProps } from '@react-aria/button';
 export { GlobalStyle, darkTheme, lightTheme, tokens } from './theme/index.js';
-export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, t as AssistantMessage, o as AssistantMessageProps, k as Button, B as ButtonProps, i as ButtonSize, j as ButtonVariant, z as CopilotUserMessage, U as CopilotUserMessageProps, u as FileAttachment, p as FileAttachmentProps, l as Footer, F as FooterProps, m as Header, H as HeaderProps, n as Input, I as InputProps, M as Message, v as Messages, w as MessagesList, x as MessagesListContainer, y as MessagesListContent, q as MessagesListProps, s as MessagesProps, D as Response, C as ResponseProps, G as StreamErrorMessage, S as StreamErrorMessageProps, N as StreamStatusIndicator, L as StreamStatusIndicatorProps, K as StreamingText, J as StreamingTextProps, P as Suggestions, O as SuggestionsProps, Q as Window, W as WindowProps, h as clearToolCalls, r as registerToolCall } from './Window-DyRP81dS.js';
+export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, t as AssistantMessage, o as AssistantMessageProps, k as Button, B as ButtonProps, i as ButtonSize, j as ButtonVariant, z as CopilotUserMessage, U as CopilotUserMessageProps, u as FileAttachment, p as FileAttachmentProps, l as Footer, F as FooterProps, m as Header, H as HeaderProps, n as Input, I as InputProps, M as Message, v as Messages, w as MessagesList, x as MessagesListContainer, y as MessagesListContent, q as MessagesListProps, s as MessagesProps, D as Response, C as ResponseProps, G as StreamErrorMessage, S as StreamErrorMessageProps, N as StreamStatusIndicator, L as StreamStatusIndicatorProps, K as StreamingText, J as StreamingTextProps, P as Suggestions, O as SuggestionsProps, Q as Window, W as WindowProps, h as clearToolCalls, r as registerToolCall } from './Window-Dm_I5m8i.js';
 export { FacebookIcon, FacebookIconProps, FacebookIconVariant, GmailIcon, GmailIconProps, GmailIconVariant, InstagramIcon, InstagramIconProps, InstagramVariant, LinkedInIcon, LinkedInIconProps, LinkedInIconVariant, PostizIcon, PostizIconProps, PostizIconVariant, RedditIcon, RedditIconProps, RedditIconVariant, SlackIcon, SlackIconProps, SlackIconVariant, TelegramIcon, TelegramIconProps, TelegramIconVariant, WhatsAppIcon, WhatsAppIconProps, WhatsAppIconVariant, XIcon, XIconProps, XIconVariant, YouTubeIcon, YouTubeIconProps, YouTubeIconVariant } from './icons/index.js';
 export { WorkflowCard, WorkflowCardProps, WorkflowErrorAlert, WorkflowErrorAlertProps, WorkflowIntegration, WorkflowProgressBar, WorkflowProgressBarProps, WorkflowResultPanel, WorkflowResultPanelProps, WorkflowStatusBadge, WorkflowStatusBadgeProps } from './workflow/index.js';
 import '@react-types/button';
@@ -99,6 +99,179 @@ interface ChatInputProps extends Omit<AriaTextFieldProps, 'onChange'> {
  */
 declare const ChatInput: React__default.FC<ChatInputProps>;
 
+/**
+ * TagInput Component
+ *
+ * A pill-based input for array values using React Aria's TagGroup.
+ * Users can add/remove items as interactive pills instead of comma-separated text.
+ */
+
+interface TagInputProps {
+    /** Current array of values */
+    value: string[];
+    /** Callback when values change */
+    onChange: (values: string[]) => void;
+    /** Field label */
+    label: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Helper text / description */
+    description?: string;
+    /** Placeholder for the input */
+    placeholder?: string;
+    /** Default values to show as hint */
+    defaultHint?: string[];
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string | null;
+    /** Minimum number of items required */
+    minItems?: number;
+    /** Test ID prefix */
+    testId?: string;
+}
+/**
+ * TagInput - A pill-based array input component
+ *
+ * Features:
+ * - Add items by typing and pressing Enter or clicking Add
+ * - Remove items by clicking the X on each pill
+ * - Visual feedback for selected/hover states
+ * - Keyboard accessible
+ */
+declare const TagInput: React__default.FC<TagInputProps>;
+
+/**
+ * WorkflowLoadingSkeleton Component
+ *
+ * Shows persistent skeleton during INITIALIZING and PROCESSING phases.
+ * Features:
+ * - Indeterminate progress bar for INITIALIZING phase
+ * - Determinate progress bar for PROCESSING phase (when steps are known)
+ * - Current activity message display
+ * - Step counter when totalSteps > 0
+ * - Divide-by-zero protection for percentage calculation
+ * - Minimum display duration (100ms delay) to prevent flash
+ */
+interface WorkflowLoadingSkeletonProps {
+    /** Current workflow phase (e.g. "INITIALIZING", "PROCESSING") */
+    phase: string;
+    /** Progress state with step tracking and percentage */
+    progress: {
+        currentStep: number;
+        totalSteps: number;
+        currentActivity: string;
+        percentage: number;
+    };
+}
+/**
+ * WorkflowLoadingSkeleton shows a persistent loading state during workflow execution.
+ * Adapts visual presentation based on current phase and available progress data.
+ */
+declare function WorkflowLoadingSkeleton({ phase, progress, }: WorkflowLoadingSkeletonProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * AuthButton Component
+ *
+ * Button component with primary/secondary variants, loading states, and disabled states
+ */
+
+interface AuthButtonProps {
+    children: React__default.ReactNode;
+    onClick?: () => void;
+    type?: "button" | "submit" | "reset";
+    variant?: "primary" | "secondary";
+    loading?: boolean;
+    loadingText?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    icon?: React__default.ReactNode;
+    className?: string;
+    "data-testid"?: string;
+}
+declare const AuthButton: React__default.FC<AuthButtonProps>;
+
+/**
+ * AuthInput Component
+ *
+ * Reusable input field with validation states and error display
+ * Uses react-aria for accessibility and styled-components for styling
+ */
+
+interface AuthInputProps {
+    label: string;
+    name: string;
+    type?: "text" | "email" | "tel" | "password";
+    value?: string;
+    placeholder?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    /** Prevents browser autofill using readonly workaround (for OTP/verification codes) */
+    disableAutofill?: boolean;
+    /** Maximum number of characters allowed */
+    maxLength?: number;
+    /** Input mode for mobile keyboard (e.g., "numeric" for number pad) */
+    inputMode?: "text" | "numeric" | "tel" | "email" | "decimal";
+    className?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    onValidate?: () => void;
+    validateOnBlur?: boolean;
+    "data-testid"?: string;
+}
+declare const AuthInput: React__default.FC<AuthInputProps>;
+
+/**
+ * PasswordInput Component
+ *
+ * Password input with show/hide toggle icon
+ * Inherits from AuthInput with additional password-specific features
+ */
+
+interface PasswordInputProps extends Omit<AuthInputProps, "type"> {
+    clearOnError?: boolean;
+    minLength?: number;
+    hintText?: string;
+}
+declare const PasswordInput: React__default.FC<PasswordInputProps>;
+
+/**
+ * SuccessToast Component
+ *
+ * Displays success notifications with auto-dismiss functionality
+ * Styled with green colors for positive feedback
+ */
+
+interface SuccessToastProps {
+    message: string | null;
+    onDismiss: () => void;
+    autoDismiss?: boolean;
+    autoDismissDelay?: number;
+}
+declare const SuccessToast: React__default.FC<SuccessToastProps>;
+
+/**
+ * ErrorBanner Component
+ *
+ * Global connectivity error banner that appears at the top of the viewport
+ * Displays when the app is offline and automatically dismisses on reconnect
+ */
+
+interface ErrorBannerProps {
+    isOnline: boolean;
+    message?: string;
+}
+/**
+ * ErrorBanner component displays connectivity errors
+ *
+ * @param isOnline - Network connectivity status
+ * @param message - Optional custom error message (defaults to "No internet connection")
+ */
+declare const ErrorBanner: React__default.FC<ErrorBannerProps>;
+
 interface NotificationItem {
     /** Unique identifier for the item */
     id: string;
@@ -739,4 +912,56 @@ interface TokenUsageCardProps {
 }
 declare function TokenUsageCard({ currentUsage, maxLimit, transactions, periodLabel, onViewAll, className, loading, }: TokenUsageCardProps): React__default.ReactElement;
 
-export { type ApprovalStatus, AssistantThinking, type AssistantThinkingProps, type BillingPeriod, BillingToggle, type BillingToggleProps, CATEGORY_CONFIGS, type CategoryConfig, ChatInput, type ChatInputProps, ConnectionStatusBadge, type ConnectionStatusBadgeProps, DarkNotificationCard, type EngagementOpportunity, type EngagementStatus, IntegrationCard, type IntegrationCardProps, NotificationCard, type NotificationCardProps, type NotificationItem, type NotificationSection, PLATFORM_CONFIGS, type Platform, PlatformCarousel, type PlatformCarouselProps, type PlatformConfig, PlatformGrid, type PlatformGridProps, PostApprovalControls, type PostApprovalControlsProps, PostPreviewCard, type PostPreviewCardProps, type PostViewMode, type ProgressCategory, type ProposedPost, RedditEngagementControls, type RedditEngagementControlsProps, RedditOpportunityCard, type RedditOpportunityCardProps, type ReplyTone, SecretInput, type SecretInputProps, SocialMediaCanvas, type SocialMediaCanvasProps, type TokenTransaction, TokenUsageCard, type TokenUsageCardProps, TrialPlanCard, type TrialPlanCardProps, UserMessage, type UserMessageProps, categorizeProgress, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, normalizePlatform };
+/**
+ * useLocalStorage Hook
+ *
+ * Generic hook for localStorage persistence with type safety
+ * Provides state management with automatic localStorage sync
+ */
+/**
+ * Custom hook for managing state with localStorage persistence
+ * @param key - localStorage key to store the value under
+ * @param initialValue - initial value to use if no stored value exists
+ * @returns tuple of [value, setValue] similar to useState
+ */
+declare function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void];
+
+/**
+ * useNetworkStatus Hook - Detects network connectivity changes
+ *
+ * Uses two detection methods:
+ * 1. Browser online/offline events (instant, works on desktop)
+ * 2. Ping-based check (fallback for Android WebView where browser events don't fire)
+ *
+ * @param healthEndpoint - Optional URL to ping for connectivity checks (used in Tauri/WebView environments)
+ */
+declare function useNetworkStatus(healthEndpoint?: string): boolean;
+
+/**
+ * Hook to detect mobile landscape orientation
+ * Returns true when device is in landscape mode with limited height (mobile)
+ */
+declare function useIsLandscape(): boolean;
+
+/**
+ * Keyboard Detection Hook
+ * Implements keyboard visibility detection and height calculation
+ * Per spec section 3.3: Keyboard Detection & Override
+ */
+interface KeyboardState {
+    isVisible: boolean;
+    height: number;
+    viewportOffsetTop: number;
+}
+/**
+ * Hook to detect virtual keyboard visibility and height on mobile devices
+ * Uses Visual Viewport API where available, with fallback methods
+ */
+declare const useKeyboardDetection: () => KeyboardState;
+/**
+ * Utility function to check if the device is mobile
+ * Checks for touch capability and mobile user agents
+ */
+declare const isMobileDevice: () => boolean;
+
+export { type ApprovalStatus, AssistantThinking, type AssistantThinkingProps, AuthButton, type AuthButtonProps, AuthInput, type AuthInputProps, type BillingPeriod, BillingToggle, type BillingToggleProps, CATEGORY_CONFIGS, type CategoryConfig, ChatInput, type ChatInputProps, ConnectionStatusBadge, type ConnectionStatusBadgeProps, DarkNotificationCard, type EngagementOpportunity, type EngagementStatus, ErrorBanner, type ErrorBannerProps, IntegrationCard, type IntegrationCardProps, NotificationCard, type NotificationCardProps, type NotificationItem, type NotificationSection, PLATFORM_CONFIGS, PasswordInput, type PasswordInputProps, type Platform, PlatformCarousel, type PlatformCarouselProps, type PlatformConfig, PlatformGrid, type PlatformGridProps, PostApprovalControls, type PostApprovalControlsProps, PostPreviewCard, type PostPreviewCardProps, type PostViewMode, type ProgressCategory, type ProposedPost, RedditEngagementControls, type RedditEngagementControlsProps, RedditOpportunityCard, type RedditOpportunityCardProps, type ReplyTone, SecretInput, type SecretInputProps, SocialMediaCanvas, type SocialMediaCanvasProps, SuccessToast, type SuccessToastProps, TagInput, type TagInputProps, type TokenTransaction, TokenUsageCard, type TokenUsageCardProps, TrialPlanCard, type TrialPlanCardProps, UserMessage, type UserMessageProps, WorkflowLoadingSkeleton, type WorkflowLoadingSkeletonProps, categorizeProgress, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isMobileDevice, isWithinCharLimit, normalizePlatform, useIsLandscape, useKeyboardDetection, useLocalStorage, useNetworkStatus };