flikkui 0.1.0-beta.9 → 0.2.0-beta.1

package/dist/components/ai/StreamingResponse/StreamingResponse.js

@@ -0,0 +1,79 @@
+import React__default from 'react';
+import { useStreamingSSE } from '../../../hooks/useStreamingSSE.js';
+import { Message } from '../../core/Message/Message.js';
+import { TypeWriter } from '../../core/Message/TypeWriter.js';
+import { ErrorDisplay } from './ErrorDisplay.js';
+import { MarkdownRenderer } from './MarkdownRenderer.js';
+
+/**
+ * StreamingResponse Component
+ * Handles Server-Sent Events (SSE) streaming for AI/LLM responses
+ * Integrates with Message component for consistent UI
+ */
+/**
+ * StreamingResponse component for AI/LLM streaming responses
+ *
+ * @example
+ * ```tsx
+ * <StreamingResponse
+ *   url="/api/chat"
+ *   method="POST"
+ *   body={{ message: "Hello", model: "gpt-4" }}
+ *   format="openai"
+ *   onComplete={(text) => console.log('Completed:', text)}
+ * />
+ * ```
+ */
+const StreamingResponse = ({ 
+// SSE Configuration
+url, method = 'POST', headers, body, format = 'openai', autoStart = true, 
+// Callbacks
+onToken, onComplete, onError, onStart, onAbort, 
+// Display options
+typingSpeed = 100, enableTypewriter = true, enableMarkdown = true, markdownOptions, 
+// Message component props
+role = 'assistant', avatar, showTimestamp = true, showActions = true, onCopy, onRegenerate, 
+// Error handling
+retry, timeout = 30000, showError = true, renderError, 
+// Styling
+className, }) => {
+    // Use streaming SSE hook
+    const { accumulatedText, isStreaming, error, isComplete, retryAttempt, retry: retryStreaming, } = useStreamingSSE({
+        url,
+        method,
+        headers,
+        body,
+        format,
+        autoStart,
+        timeout,
+        retry,
+        onToken,
+        onComplete,
+        onError,
+        onStart,
+        onAbort,
+    });
+    // Determine content to display
+    let messageContent;
+    if (error && showError) {
+        // Show error display
+        messageContent = renderError ? (renderError(error, retryStreaming)) : (React__default.createElement(ErrorDisplay, { error: error, onRetry: retryStreaming, retryAttempt: retryAttempt, maxAttempts: (retry === null || retry === void 0 ? void 0 : retry.maxAttempts) || 3 }));
+    }
+    else if (enableMarkdown) {
+        // Render markdown (works during streaming and after completion)
+        messageContent = (React__default.createElement(MarkdownRenderer, { content: accumulatedText, options: markdownOptions }));
+    }
+    else if (enableTypewriter && isComplete && accumulatedText) {
+        // Use typewriter animation after streaming completes
+        messageContent = (React__default.createElement(TypeWriter, { text: accumulatedText, speed: typingSpeed, enabled: true, className: "whitespace-pre-wrap break-words" }));
+    }
+    else {
+        // Show raw text during streaming or if typewriter disabled
+        messageContent = (React__default.createElement("p", { className: "whitespace-pre-wrap break-words" }, accumulatedText));
+    }
+    // Render with Message component
+    return (React__default.createElement(Message, { role: role, content: messageContent, avatar: avatar, timestamp: new Date(), showTimestamp: showTimestamp, isStreaming: isStreaming, showActions: showActions && !error, onCopy: onCopy, onRegenerate: onRegenerate, className: className }));
+};
+StreamingResponse.displayName = 'StreamingResponse';
+
+export { StreamingResponse };

package/dist/components/ai/StreamingResponse/StreamingResponse.theme.d.ts

@@ -0,0 +1,2 @@
+import type { StreamingResponseTheme } from "./StreamingResponse.types";
+export declare const streamingResponseTheme: StreamingResponseTheme;

package/dist/components/ai/StreamingResponse/StreamingResponse.theme.js

@@ -0,0 +1,10 @@
+const streamingResponseTheme = {
+    errorContainerStyle: "flex items-start gap-3 rounded-lg border border-[var(--color-danger-200)] bg-[var(--color-danger-50)] px-4 py-3",
+    errorTitleStyle: "text-sm font-medium text-[var(--color-danger)]",
+    errorMessageStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
+    errorRetryButtonStyle: "mt-2 text-sm font-medium text-[var(--color-danger)] hover:text-[var(--color-danger-700)] transition-colors",
+    loadingContainerStyle: "flex items-center gap-2 text-[var(--color-text-placeholder)] text-sm",
+    loadingDotStyle: "w-1.5 h-1.5 rounded-full bg-current animate-pulse",
+};
+
+export { streamingResponseTheme };

package/dist/components/ai/StreamingResponse/StreamingResponse.types.d.ts

@@ -0,0 +1,101 @@
+/**
+ * StreamingResponse Component Types
+ * Type definitions for the StreamingResponse component
+ */
+import type { ReactNode } from 'react';
+import type { SSEFormat, SSEParser } from '../../../utils/sseFormatParsers';
+import type { StreamingError, RetryConfig } from '../../../utils';
+import type { MessageRole } from '../../core/Message';
+/**
+ * Avatar configuration for Message component
+ */
+export interface MessageAvatarProps {
+    src?: string;
+    alt: string;
+    fallback?: ReactNode;
+}
+/**
+ * Markdown rendering options
+ */
+export interface MarkdownOptions {
+    /** Allow HTML in markdown (default: false) */
+    allowHtml?: boolean;
+    /** Syntax highlighting theme (default: 'light') */
+    syntaxTheme?: 'light' | 'dark';
+    /** Custom code block renderer */
+    renderCodeBlock?: (code: string, language: string) => ReactNode;
+}
+/**
+ * Props for StreamingResponse component
+ */
+export interface StreamingResponseProps {
+    /** The SSE endpoint URL */
+    url: string;
+    /** HTTP method (default: 'POST') */
+    method?: 'GET' | 'POST';
+    /** Request headers */
+    headers?: Record<string, string>;
+    /** Request body (for POST requests) */
+    body?: Record<string, unknown> | string;
+    /** Stream format parser (default: 'openai') */
+    format?: SSEFormat | SSEParser;
+    /** Whether to auto-start streaming on mount (default: true) */
+    autoStart?: boolean;
+    /** Called when a new token arrives */
+    onToken?: (token: string, accumulatedText: string) => void;
+    /** Called when streaming completes successfully */
+    onComplete?: (fullText: string) => void;
+    /** Called when an error occurs */
+    onError?: (error: StreamingError) => void;
+    /** Called when streaming starts */
+    onStart?: () => void;
+    /** Called when streaming is aborted */
+    onAbort?: () => void;
+    /** Typewriter animation speed in ms per word (default: 100) */
+    typingSpeed?: number;
+    /** Enable typewriter animation after streaming completes (default: true) */
+    enableTypewriter?: boolean;
+    /** Enable markdown rendering (default: true) */
+    enableMarkdown?: boolean;
+    /** Markdown rendering options */
+    markdownOptions?: MarkdownOptions;
+    /** Message role (default: 'assistant') */
+    role?: MessageRole;
+    /** Avatar configuration */
+    avatar?: MessageAvatarProps;
+    /** Show timestamp (default: true) */
+    showTimestamp?: boolean;
+    /** Show action buttons (copy, regenerate) (default: true) */
+    showActions?: boolean;
+    /** Copy button handler */
+    onCopy?: () => void;
+    /** Regenerate button handler */
+    onRegenerate?: () => void;
+    /** Retry configuration */
+    retry?: RetryConfig;
+    /** Timeout in milliseconds (default: 30000) */
+    timeout?: number;
+    /** Show error UI (default: true) */
+    showError?: boolean;
+    /** Custom error render function */
+    renderError?: (error: StreamingError, retry: () => void) => ReactNode;
+    /** Custom className for Message container */
+    className?: string;
+}
+/**
+ * Theme overrides for StreamingResponse component
+ */
+export interface StreamingResponseTheme {
+    /** Error container style */
+    errorContainerStyle?: string;
+    /** Error title style */
+    errorTitleStyle?: string;
+    /** Error message style */
+    errorMessageStyle?: string;
+    /** Error retry button style */
+    errorRetryButtonStyle?: string;
+    /** Loading indicator container style */
+    loadingContainerStyle?: string;
+    /** Loading dot style */
+    loadingDotStyle?: string;
+}

package/dist/components/ai/StreamingResponse/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * StreamingResponse Component
+ * Exports for StreamingResponse component and related types
+ */
+export { StreamingResponse } from './StreamingResponse';
+export { ErrorDisplay } from './ErrorDisplay';
+export { MarkdownRenderer } from './MarkdownRenderer';
+export { streamingResponseTheme } from './StreamingResponse.theme';
+export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, MessageAvatarProps, } from './StreamingResponse.types';

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.animations.d.ts

@@ -0,0 +1,10 @@
+import { Variants } from "motion/react";
+/**
+ * Staggered bounce animation for dots
+ * Each dot animates with a slight delay creating a wave effect
+ */
+export declare const dotVariants: Variants;
+/**
+ * Container fade in/out animation
+ */
+export declare const containerVariants: Variants;

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.animations.js

@@ -0,0 +1,47 @@
+/**
+ * Staggered bounce animation for dots
+ * Each dot animates with a slight delay creating a wave effect
+ */
+const dotVariants = {
+    initial: {
+        y: 0,
+        opacity: 0.5,
+    },
+    animate: (index) => ({
+        y: [0, -2, 0],
+        opacity: [0.5, 1, 0.5],
+        transition: {
+            duration: 0.6,
+            repeat: Infinity,
+            ease: "easeInOut",
+            delay: index * 0.15,
+        },
+    }),
+};
+/**
+ * Container fade in/out animation
+ */
+const containerVariants = {
+    hidden: {
+        opacity: 0,
+        scale: 0.95,
+    },
+    visible: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            duration: 0.2,
+            ease: "easeOut",
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.95,
+        transition: {
+            duration: 0.15,
+            ease: "easeIn",
+        },
+    },
+};
+
+export { containerVariants, dotVariants };

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { ThinkingIndicatorProps } from "./ThinkingIndicator.types";
+/**
+ * ThinkingIndicator - Animated "AI is thinking..." state indicator
+ *
+ * Shows a 3-dot pulse animation to indicate the AI is processing.
+ * Respects prefers-reduced-motion for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <ThinkingIndicator visible={isLoading} />
+ *
+ * <ThinkingIndicator
+ *   visible={isLoading}
+ *   label="Claude is thinking"
+ *   size="lg"
+ * />
+ * ```
+ */
+export declare const ThinkingIndicator: React.ForwardRefExoticComponent<ThinkingIndicatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.js

@@ -0,0 +1,56 @@
+import React__default from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { thinkingIndicatorTheme } from './ThinkingIndicator.theme.js';
+import { containerVariants, dotVariants } from './ThinkingIndicator.animations.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * ThinkingIndicator - Animated "AI is thinking..." state indicator
+ *
+ * Shows a 3-dot pulse animation to indicate the AI is processing.
+ * Respects prefers-reduced-motion for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <ThinkingIndicator visible={isLoading} />
+ *
+ * <ThinkingIndicator
+ *   visible={isLoading}
+ *   label="Claude is thinking"
+ *   size="lg"
+ * />
+ * ```
+ */
+const ThinkingIndicator = React__default.forwardRef(({ visible = true, label = "AI is thinking", showLabel = true, size = "md", icon, className, theme: customTheme = {}, ...props }, ref) => {
+    var _a;
+    const shouldReduceMotion = useReducedMotion();
+    // Merge theme
+    const sizeConfig = {
+        ...thinkingIndicatorTheme.sizes[size],
+        ...(_a = customTheme.sizes) === null || _a === void 0 ? void 0 : _a[size],
+    };
+    const baseStyle = customTheme.baseStyle || thinkingIndicatorTheme.baseStyle;
+    const labelStyle = customTheme.labelStyle || thinkingIndicatorTheme.labelStyle;
+    const dotsContainerStyle = customTheme.dotsContainerStyle ||
+        thinkingIndicatorTheme.dotsContainerStyle;
+    const dotStyle = customTheme.dotStyle || thinkingIndicatorTheme.dotStyle;
+    // Simplified animation for reduced motion preference
+    const reducedMotionProps = shouldReduceMotion
+        ? {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+        }
+        : {
+            variants: containerVariants,
+            initial: "hidden",
+            animate: "visible",
+            exit: "exit",
+        };
+    return (React__default.createElement(AnimatePresence, { mode: "wait" }, visible && (React__default.createElement(motion.div, { ref: ref, className: cn(baseStyle, sizeConfig.container, className), ...reducedMotionProps, ...props },
+        icon ? (React__default.createElement("span", { className: dotsContainerStyle }, icon)) : (React__default.createElement("span", { className: dotsContainerStyle }, [0, 1, 2].map((index) => (React__default.createElement(motion.span, { key: index, className: cn(dotStyle, sizeConfig.dot), variants: shouldReduceMotion ? undefined : dotVariants, initial: "initial", animate: "animate", custom: index, style: shouldReduceMotion ? { opacity: 0.7 } : undefined }))))),
+        showLabel && (React__default.createElement("span", { className: cn(labelStyle, sizeConfig.label) }, label))))));
+});
+ThinkingIndicator.displayName = "ThinkingIndicator";
+
+export { ThinkingIndicator };

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.theme.d.ts

@@ -0,0 +1,2 @@
+import { ThinkingIndicatorTheme } from "./ThinkingIndicator.types";
+export declare const thinkingIndicatorTheme: ThinkingIndicatorTheme;

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.theme.js

@@ -0,0 +1,20 @@
+const thinkingIndicatorTheme = {
+    baseStyle: "inline-flex items-center gap-2",
+    labelStyle: "text-[var(--color-text-muted)] font-medium",
+    dotsContainerStyle: "inline-flex items-center gap-1",
+    dotStyle: "rounded-full bg-[var(--color-text-muted)]",
+    sizes: {
+        sm: {
+            container: "py-1",
+            dot: "size-1",
+            label: "text-xs",
+        },
+        md: {
+            container: "py-1",
+            dot: "size-1.5",
+            label: "text-sm",
+        },
+    },
+};
+
+export { thinkingIndicatorTheme };

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.types.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from "react";
+/**
+ * ThinkingIndicator component props
+ */
+export interface ThinkingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the indicator is visible
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * Custom label text
+     * @default "AI is thinking"
+     */
+    label?: string;
+    /**
+     * Whether to show the label text
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * Size variant
+     * @default "md"
+     */
+    size?: ThinkingIndicatorSize;
+    /**
+     * Custom icon to display instead of dots
+     */
+    icon?: ReactNode;
+    /**
+     * Additional className for the container
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: ThinkingIndicatorThemeOverrides;
+}
+/**
+ * Size variants
+ */
+export type ThinkingIndicatorSize = "sm" | "md";
+/**
+ * Theme configuration
+ */
+export interface ThinkingIndicatorTheme {
+    baseStyle: string;
+    labelStyle: string;
+    dotsContainerStyle: string;
+    dotStyle: string;
+    sizes: Record<ThinkingIndicatorSize, ThinkingIndicatorSizeConfig>;
+}
+export interface ThinkingIndicatorSizeConfig {
+    container: string;
+    dot: string;
+    label: string;
+}
+/**
+ * Theme overrides
+ */
+export interface ThinkingIndicatorThemeOverrides {
+    baseStyle?: string;
+    labelStyle?: string;
+    dotsContainerStyle?: string;
+    dotStyle?: string;
+    sizes?: Partial<Record<ThinkingIndicatorSize, Partial<ThinkingIndicatorSizeConfig>>>;
+}

package/dist/components/ai/ThinkingIndicator/index.d.ts

@@ -0,0 +1,3 @@
+export { ThinkingIndicator } from "./ThinkingIndicator";
+export { thinkingIndicatorTheme } from "./ThinkingIndicator.theme";
+export type { ThinkingIndicatorProps, ThinkingIndicatorSize, ThinkingIndicatorTheme, ThinkingIndicatorThemeOverrides, ThinkingIndicatorSizeConfig, } from "./ThinkingIndicator.types";

package/dist/components/ai/TokenCounter/TokenCounter.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { TokenCounterProps } from "./TokenCounter.types";
+/**
+ * TokenCounter - Real-time token usage display with cost estimation
+ *
+ * Estimates token count from text using a word-based heuristic.
+ * Supports multiple AI models with their specific pricing.
+ *
+ * @example
+ * ```tsx
+ * <TokenCounter text={inputValue} model="gpt-4" />
+ *
+ * <TokenCounter
+ *   text={inputValue}
+ *   model="claude-3-sonnet"
+ *   showCost
+ *   maxTokens={4000}
+ * />
+ * ```
+ */
+export declare const TokenCounter: React.ForwardRefExoticComponent<TokenCounterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/TokenCounter/TokenCounter.js

@@ -0,0 +1,72 @@
+import React__default, { useMemo } from 'react';
+import { tokenCounterTheme } from './TokenCounter.theme.js';
+import { MODEL_CONFIGS, estimateTokens, calculateCost, formatTokenCount, formatCost } from './tokenUtils.js';
+import { cn } from '../../../utils/cn.js';
+import { CircleStackIcon } from '@heroicons/react/16/solid';
+
+/**
+ * TokenCounter - Real-time token usage display with cost estimation
+ *
+ * Estimates token count from text using a word-based heuristic.
+ * Supports multiple AI models with their specific pricing.
+ *
+ * @example
+ * ```tsx
+ * <TokenCounter text={inputValue} model="gpt-4" />
+ *
+ * <TokenCounter
+ *   text={inputValue}
+ *   model="claude-3-sonnet"
+ *   showCost
+ *   maxTokens={4000}
+ * />
+ * ```
+ */
+const TokenCounter = React__default.forwardRef(({ text = "", tokens: providedTokens, model = "gpt-4", maxTokens, showCost = false, costPer1kTokens, size = "md", format = "compact", icon, className, theme: customTheme = {}, ...props }, ref) => {
+    var _a;
+    // Get model config
+    const modelConfig = MODEL_CONFIGS[model];
+    const effectiveMaxTokens = maxTokens || modelConfig.maxTokens;
+    const effectiveCostPer1k = costPer1kTokens !== null && costPer1kTokens !== void 0 ? costPer1kTokens : modelConfig.costPer1kTokens;
+    // Calculate token count
+    const tokenCount = useMemo(() => {
+        if (providedTokens !== undefined)
+            return providedTokens;
+        return estimateTokens(text);
+    }, [text, providedTokens]);
+    // Calculate cost
+    const cost = useMemo(() => {
+        return calculateCost(tokenCount, effectiveCostPer1k);
+    }, [tokenCount, effectiveCostPer1k]);
+    // Progress percentage
+    const progressPercent = Math.min((tokenCount / effectiveMaxTokens) * 100, 100);
+    const isOverLimit = tokenCount > effectiveMaxTokens;
+    // Merge theme
+    const sizeConfig = {
+        ...tokenCounterTheme.sizes[size],
+        ...(_a = customTheme.sizes) === null || _a === void 0 ? void 0 : _a[size],
+    };
+    const baseStyle = customTheme.baseStyle || tokenCounterTheme.baseStyle;
+    const iconStyle = customTheme.iconStyle || tokenCounterTheme.iconStyle;
+    const countStyle = customTheme.countStyle || tokenCounterTheme.countStyle;
+    const labelStyle = customTheme.labelStyle || tokenCounterTheme.labelStyle;
+    const costStyle = customTheme.costStyle || tokenCounterTheme.costStyle;
+    const progressStyle = customTheme.progressStyle || tokenCounterTheme.progressStyle;
+    const progressBarStyle = customTheme.progressBarStyle || tokenCounterTheme.progressBarStyle;
+    return (React__default.createElement("div", { ref: ref, className: cn(baseStyle, sizeConfig.container, className), ...props },
+        icon || React__default.createElement(CircleStackIcon, { className: cn(iconStyle, sizeConfig.icon) }),
+        React__default.createElement("span", { className: cn(countStyle, sizeConfig.text, isOverLimit && "text-[var(--color-danger)]") }, formatTokenCount(tokenCount)),
+        maxTokens && format === "detailed" && (React__default.createElement("span", { className: cn(labelStyle, sizeConfig.text) },
+            "/ ",
+            formatTokenCount(effectiveMaxTokens))),
+        React__default.createElement("span", { className: cn(labelStyle, sizeConfig.text) }, "tokens"),
+        showCost && (React__default.createElement("span", { className: cn(costStyle, sizeConfig.text) },
+            "(",
+            formatCost(cost),
+            ")")),
+        format === "detailed" && maxTokens && (React__default.createElement("div", { className: cn(progressStyle, "w-16 ml-2") },
+            React__default.createElement("div", { className: cn(progressBarStyle, isOverLimit && "bg-[var(--color-danger)]"), style: { width: `${progressPercent}%` } })))));
+});
+TokenCounter.displayName = "TokenCounter";
+
+export { TokenCounter };

package/dist/components/ai/TokenCounter/TokenCounter.theme.d.ts

@@ -0,0 +1,2 @@
+import { TokenCounterTheme } from "./TokenCounter.types";
+export declare const tokenCounterTheme: TokenCounterTheme;

package/dist/components/ai/TokenCounter/TokenCounter.theme.js

@@ -0,0 +1,28 @@
+const tokenCounterTheme = {
+    baseStyle: "inline-flex items-center gap-1",
+    iconStyle: "text-[var(--color-text-muted)]",
+    countStyle: "font-medium text-[var(--color-text-primary)]",
+    labelStyle: "text-[var(--color-text-muted)]",
+    costStyle: "text-[var(--color-text-muted)] font-mono",
+    progressStyle: "h-1 bg-[var(--color-background-tertiary)] rounded-full overflow-hidden",
+    progressBarStyle: "h-full bg-[var(--color-primary)] transition-all duration-200",
+    sizes: {
+        sm: {
+            container: "text-xs",
+            icon: "size-3",
+            text: "text-xs",
+        },
+        md: {
+            container: "text-sm",
+            icon: "size-4",
+            text: "text-sm",
+        },
+        lg: {
+            container: "text-base",
+            icon: "size-5",
+            text: "text-base",
+        },
+    },
+};
+
+export { tokenCounterTheme };

package/dist/components/ai/TokenCounter/TokenCounter.types.d.ts

@@ -0,0 +1,104 @@
+import { ReactNode } from "react";
+/**
+ * TokenCounter component props
+ */
+export interface TokenCounterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The text to count tokens for
+     */
+    text?: string;
+    /**
+     * Token count (if pre-calculated)
+     * Takes precedence over text-based estimation
+     */
+    tokens?: number;
+    /**
+     * AI model for token estimation and display
+     * @default "gpt-4"
+     */
+    model?: TokenCounterModel;
+    /**
+     * Maximum tokens allowed (for progress display)
+     */
+    maxTokens?: number;
+    /**
+     * Whether to show cost estimation
+     * @default false
+     */
+    showCost?: boolean;
+    /**
+     * Custom cost per 1K tokens (input)
+     * If not provided, uses model defaults
+     */
+    costPer1kTokens?: number;
+    /**
+     * Size variant
+     * @default "md"
+     */
+    size?: TokenCounterSize;
+    /**
+     * Display format
+     * @default "compact"
+     */
+    format?: "compact" | "detailed";
+    /**
+     * Custom icon
+     */
+    icon?: ReactNode;
+    /**
+     * Additional className
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: TokenCounterThemeOverrides;
+}
+/**
+ * Supported AI models
+ */
+export type TokenCounterModel = "gpt-4" | "gpt-4-turbo" | "gpt-3.5-turbo" | "claude-3-opus" | "claude-3-sonnet" | "claude-3-haiku" | "gemini-pro" | "gemini-ultra" | "custom";
+/**
+ * Size variants
+ */
+export type TokenCounterSize = "sm" | "md" | "lg";
+/**
+ * Model configuration
+ */
+export interface ModelConfig {
+    name: string;
+    shortName: string;
+    costPer1kTokens: number;
+    maxTokens: number;
+}
+/**
+ * Theme configuration
+ */
+export interface TokenCounterTheme {
+    baseStyle: string;
+    iconStyle: string;
+    countStyle: string;
+    labelStyle: string;
+    costStyle: string;
+    progressStyle: string;
+    progressBarStyle: string;
+    sizes: Record<TokenCounterSize, TokenCounterSizeConfig>;
+}
+export interface TokenCounterSizeConfig {
+    container: string;
+    icon: string;
+    text: string;
+}
+/**
+ * Theme overrides
+ */
+export interface TokenCounterThemeOverrides {
+    baseStyle?: string;
+    iconStyle?: string;
+    countStyle?: string;
+    labelStyle?: string;
+    costStyle?: string;
+    progressStyle?: string;
+    progressBarStyle?: string;
+    sizes?: Partial<Record<TokenCounterSize, Partial<TokenCounterSizeConfig>>>;
+}