@papernote/ui 1.11.5 → 1.12.0

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { forwardRef, useState, useRef, useEffect, useId, useCallback, useImperativeHandle, useMemo, Children, isValidElement, cloneElement, Component, createContext as createContext$1, useContext, useLayoutEffect, createElement, useReducer } from 'react';
-import { Loader2, Check, X, EyeOff, Eye, AlertTriangle, CheckCircle, AlertCircle, ChevronDown, Search, Minus, Star, Calendar as Calendar$1, ChevronLeft, ChevronRight, Clock, ChevronUp, Plus, TrendingUp, TrendingDown, Lightbulb, Sparkles, PartyPopper, Flame, Shield, Pencil, User, Users, Activity, Mail, Send, Info, Trash2, HelpCircle, ChevronsLeft, ChevronsRight, Circle, MoreVertical, GripVertical, Upload, Bold, Italic, Underline, List, ListOrdered, Code, Link, ExternalLink, MoreHorizontal, Home, ArrowUp, ArrowDown, RotateCcw, ArrowRight, FileText, Image, File as File$1, Menu as Menu$1, Settings, LogOut, Moon, Sun, Bell, Edit, Trash, Pin, PinOff, Download, Save, ArrowUpDown, Filter, XCircle, BarChart3, MessageSquare } from 'lucide-react';
+import { Loader2, Check, X, EyeOff, Eye, AlertTriangle, CheckCircle, AlertCircle, ChevronDown, Search, Minus, Star, Calendar as Calendar$1, ChevronLeft, ChevronRight, Clock, ChevronUp, Plus, TrendingUp, TrendingDown, Lightbulb, Sparkles, PartyPopper, Flame, Shield, Pencil, User, Users, Activity, Mail, Send, Info, Trash2, HelpCircle, ChevronsLeft, ChevronsRight, Circle, MoreVertical, GripVertical, Upload, Bold, Italic, Underline, List, ListOrdered, Code, Link, ExternalLink, MoreHorizontal, Home, ArrowUp, ArrowDown, RotateCcw, ArrowRight, FileText, Image, File as File$1, Menu as Menu$1, Settings, LogOut, Moon, Sun, Bell, Edit, Trash, Pin, PinOff, Download, Save, ArrowUpDown, Filter, XCircle, BarChart3, MessageSquare, Bot, RefreshCw, BrainCircuit, Target } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Link as Link$1, useInRouterContext, useNavigate, useLocation } from 'react-router-dom';
 
@@ -5398,7 +5398,7 @@ function SharedBadge({ sharedWith, variant, size = 'md', maxDisplay = 3, onClick
 }
 
 // Format relative time
-function formatRelativeTime$1(date) {
+function formatRelativeTime$3(date) {
     const now = new Date();
     const diffMs = now.getTime() - date.getTime();
     const diffMins = Math.floor(diffMs / 60000);
@@ -5430,11 +5430,11 @@ function ActivityFeed({ activities, maxItems, showTimestamps = true, onLoadMore,
     if (activities.length === 0) {
         return (jsxs("div", { className: `text-center py-8 ${className}`, children: [jsx(Activity, { className: "w-8 h-8 text-ink-300 mx-auto mb-2" }), jsx("p", { className: "text-ink-500 text-sm", children: "No activity yet" })] }));
     }
-    return (jsxs("div", { className: `${className}`, role: "feed", "aria-label": "Activity feed", children: [jsx("div", { className: "space-y-4", children: displayedActivities.map((activity, index) => (jsxs("div", { className: "flex gap-3", role: "article", "aria-label": `${activity.user.name} ${activity.action}${activity.target ? ` ${activity.target}` : ''}`, children: [jsxs("div", { className: "flex flex-col items-center", children: [jsx(CollaboratorAvatars, { collaborators: [activity.user], max: 1, size: "sm" }), index < displayedActivities.length - 1 && (jsx("div", { className: "w-0.5 flex-1 bg-paper-200 mt-2" }))] }), jsx("div", { className: "flex-1 min-w-0 pb-4", children: jsxs("div", { className: "flex items-start justify-between gap-2", children: [jsx("div", { className: "flex-1 min-w-0", children: jsxs("p", { className: "text-sm text-ink-700", children: [jsx("span", { className: "font-medium text-ink-800", children: activity.user.name }), ' ', activity.action, activity.target && (jsxs(Fragment, { children: [' ', jsx("span", { className: "font-medium text-ink-800", children: activity.target })] }))] }) }), jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [activity.icon && (jsx("span", { className: "text-ink-400", children: activity.icon })), showTimestamps && (jsx("span", { className: "text-xs text-ink-400 whitespace-nowrap", children: formatRelativeTime$1(activity.timestamp) }))] })] }) })] }, activity.id))) }), (hasMore || onLoadMore) && (jsx("div", { className: "mt-4 text-center", children: jsx(Button, { variant: "ghost", size: "sm", onClick: onLoadMore, loading: loading, children: loading ? 'Loading...' : 'Load more' }) }))] }));
+    return (jsxs("div", { className: `${className}`, role: "feed", "aria-label": "Activity feed", children: [jsx("div", { className: "space-y-4", children: displayedActivities.map((activity, index) => (jsxs("div", { className: "flex gap-3", role: "article", "aria-label": `${activity.user.name} ${activity.action}${activity.target ? ` ${activity.target}` : ''}`, children: [jsxs("div", { className: "flex flex-col items-center", children: [jsx(CollaboratorAvatars, { collaborators: [activity.user], max: 1, size: "sm" }), index < displayedActivities.length - 1 && (jsx("div", { className: "w-0.5 flex-1 bg-paper-200 mt-2" }))] }), jsx("div", { className: "flex-1 min-w-0 pb-4", children: jsxs("div", { className: "flex items-start justify-between gap-2", children: [jsx("div", { className: "flex-1 min-w-0", children: jsxs("p", { className: "text-sm text-ink-700", children: [jsx("span", { className: "font-medium text-ink-800", children: activity.user.name }), ' ', activity.action, activity.target && (jsxs(Fragment, { children: [' ', jsx("span", { className: "font-medium text-ink-800", children: activity.target })] }))] }) }), jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [activity.icon && (jsx("span", { className: "text-ink-400", children: activity.icon })), showTimestamps && (jsx("span", { className: "text-xs text-ink-400 whitespace-nowrap", children: formatRelativeTime$3(activity.timestamp) }))] })] }) })] }, activity.id))) }), (hasMore || onLoadMore) && (jsx("div", { className: "mt-4 text-center", children: jsx(Button, { variant: "ghost", size: "sm", onClick: onLoadMore, loading: loading, children: loading ? 'Loading...' : 'Load more' }) }))] }));
 }
 
 // Format relative time
-function formatRelativeTime(date) {
+function formatRelativeTime$2(date) {
     const now = new Date();
     const diffMs = now.getTime() - date.getTime();
     const diffMins = Math.floor(diffMs / 60000);
@@ -5502,7 +5502,7 @@ function InviteCard({ onInvite, pending = [], loading = false, maxPending = 5, o
         shadow-card
         p-4
         ${className}
-      `, children: jsxs(Stack, { gap: "md", children: [jsxs(Stack, { direction: "horizontal", gap: "sm", align: "center", children: [jsx("div", { className: "p-2 bg-accent-100 rounded-lg", children: jsx(Mail, { className: "w-5 h-5 text-accent-600" }) }), jsxs("div", { children: [jsx(Text, { weight: "semibold", className: "text-ink-800", children: "Invite People" }), jsx(Text, { size: "sm", className: "text-ink-500", children: "Share access via email" })] })] }), jsx("form", { onSubmit: handleSubmit, children: jsxs(Stack, { direction: "horizontal", gap: "sm", children: [jsx("div", { className: "flex-1", children: jsx(Input, { type: "email", placeholder: "Enter email address", value: email, onChange: (e) => handleEmailChange(e.target.value), validationState: error ? 'error' : undefined, validationMessage: error || undefined, disabled: loading }) }), jsx(Button, { type: "submit", variant: "primary", loading: loading, disabled: !email.trim(), icon: jsx(Send, { className: "w-4 h-4" }), children: "Send" })] }) }), displayedPending.length > 0 && (jsxs(Stack, { gap: "sm", children: [jsxs(Stack, { direction: "horizontal", gap: "xs", align: "center", children: [jsx(Clock, { className: "w-4 h-4 text-ink-400" }), jsxs(Text, { size: "sm", className: "text-ink-500", children: ["Pending invitations (", pending.length, ")"] })] }), jsxs("div", { className: "border border-paper-200 rounded-lg divide-y divide-paper-200", children: [displayedPending.map((invite) => (jsxs("div", { className: "px-3 py-2 flex items-center justify-between", children: [jsxs(Stack, { gap: "xs", children: [jsx(Text, { size: "sm", weight: "medium", className: "text-ink-700", children: invite.email }), jsxs(Text, { size: "xs", className: "text-ink-400", children: ["Sent ", formatRelativeTime(invite.sentAt)] })] }), onCancelInvite && (jsx("button", { onClick: () => onCancelInvite(invite.email), className: "p-1 rounded hover:bg-paper-100 text-ink-400 hover:text-error-500 transition-colors", "aria-label": `Cancel invitation to ${invite.email}`, children: jsx(X, { className: "w-4 h-4" }) }))] }, invite.email))), hasMorePending && (jsx("div", { className: "px-3 py-2 text-center", children: jsxs(Text, { size: "sm", className: "text-ink-400", children: ["+", pending.length - maxPending, " more"] }) }))] })] }))] }) }));
+      `, children: jsxs(Stack, { gap: "md", children: [jsxs(Stack, { direction: "horizontal", gap: "sm", align: "center", children: [jsx("div", { className: "p-2 bg-accent-100 rounded-lg", children: jsx(Mail, { className: "w-5 h-5 text-accent-600" }) }), jsxs("div", { children: [jsx(Text, { weight: "semibold", className: "text-ink-800", children: "Invite People" }), jsx(Text, { size: "sm", className: "text-ink-500", children: "Share access via email" })] })] }), jsx("form", { onSubmit: handleSubmit, children: jsxs(Stack, { direction: "horizontal", gap: "sm", children: [jsx("div", { className: "flex-1", children: jsx(Input, { type: "email", placeholder: "Enter email address", value: email, onChange: (e) => handleEmailChange(e.target.value), validationState: error ? 'error' : undefined, validationMessage: error || undefined, disabled: loading }) }), jsx(Button, { type: "submit", variant: "primary", loading: loading, disabled: !email.trim(), icon: jsx(Send, { className: "w-4 h-4" }), children: "Send" })] }) }), displayedPending.length > 0 && (jsxs(Stack, { gap: "sm", children: [jsxs(Stack, { direction: "horizontal", gap: "xs", align: "center", children: [jsx(Clock, { className: "w-4 h-4 text-ink-400" }), jsxs(Text, { size: "sm", className: "text-ink-500", children: ["Pending invitations (", pending.length, ")"] })] }), jsxs("div", { className: "border border-paper-200 rounded-lg divide-y divide-paper-200", children: [displayedPending.map((invite) => (jsxs("div", { className: "px-3 py-2 flex items-center justify-between", children: [jsxs(Stack, { gap: "xs", children: [jsx(Text, { size: "sm", weight: "medium", className: "text-ink-700", children: invite.email }), jsxs(Text, { size: "xs", className: "text-ink-400", children: ["Sent ", formatRelativeTime$2(invite.sentAt)] })] }), onCancelInvite && (jsx("button", { onClick: () => onCancelInvite(invite.email), className: "p-1 rounded hover:bg-paper-100 text-ink-400 hover:text-error-500 transition-colors", "aria-label": `Cancel invitation to ${invite.email}`, children: jsx(X, { className: "w-4 h-4" }) }))] }, invite.email))), hasMorePending && (jsx("div", { className: "px-3 py-2 text-center", children: jsxs(Text, { size: "sm", className: "text-ink-400", children: ["+", pending.length - maxPending, " more"] }) }))] })] }))] }) }));
 }
 
 /**
@@ -12296,6 +12296,14 @@ const defaultColors = [
     '#f3e8ff', // purple ultra light
 ];
 // =============================================================================
+// Label Size Presets
+// =============================================================================
+const labelSizes = {
+    sm: { name: '9px', value: '8px', count: '10px', conversion: '8px' },
+    md: { name: '11px', value: '10px', count: '12px', conversion: '10px' },
+    lg: { name: '13px', value: '12px', count: '14px', conversion: '12px' },
+};
+// =============================================================================
 // Component
 // =============================================================================
 /**
@@ -12305,9 +12313,10 @@ const defaultColors = [
  * to its count relative to the first (widest) stage.
  * Shows stage names, counts, values, and optional conversion rates.
  */
-function FunnelChart({ stages, height = 300, showConversion = true, onStageClick, className = '', }) {
+function FunnelChart({ stages, height = 300, showConversion = true, labelSize = 'md', onStageClick, className = '', }) {
     if (stages.length === 0)
         return null;
+    const sizes = labelSizes[labelSize];
     const maxCount = Math.max(...stages.map(s => s.count), 1);
     const stageHeight = height / stages.length;
     const svgWidth = 450;
@@ -12335,7 +12344,7 @@ function FunnelChart({ stages, height = 300, showConversion = true, onStageClick
             L ${centerX - bottomWidth / 2} ${y + stageHeight - 2}
             Z
           `;
-                return (jsxs("g", { onClick: () => onStageClick?.(stage.name), style: onStageClick ? { cursor: 'pointer' } : undefined, role: onStageClick ? 'button' : undefined, children: [jsx("path", { d: path, fill: color, opacity: 0.85, className: "transition-opacity hover:opacity-100" }), jsx("text", { x: centerX, y: y + stageHeight / 2 + 1, textAnchor: "middle", dominantBaseline: "middle", className: "fill-white text-xs font-bold", style: { fontSize: '12px' }, children: stage.count.toLocaleString() }), jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 - 4, className: "fill-ink-700 dark:fill-ink-300", style: { fontSize: '9px', fontWeight: 500 }, children: stage.name }), stage.value && (jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 + 7, className: "fill-ink-400", style: { fontSize: '8px' }, children: stage.value })), showConversion && conversionRate !== null && (jsx("g", { children: jsxs("text", { x: centerX - funnelWidth / 2 - 16, y: y + 4, textAnchor: "end", className: "fill-ink-500", style: { fontSize: '10px', fontWeight: 500 }, children: ["\u2193 ", conversionRate, "%"] }) }))] }, stage.name));
+                return (jsxs("g", { onClick: () => onStageClick?.(stage.name), style: onStageClick ? { cursor: 'pointer' } : undefined, role: onStageClick ? 'button' : undefined, children: [jsx("path", { d: path, fill: color, opacity: 0.85, className: "transition-opacity hover:opacity-100" }), jsx("text", { x: centerX, y: y + stageHeight / 2 + 1, textAnchor: "middle", dominantBaseline: "middle", className: "fill-white font-bold", style: { fontSize: sizes.count }, children: stage.count.toLocaleString() }), jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 - 4, className: "fill-ink-700 dark:fill-ink-300", style: { fontSize: sizes.name, fontWeight: 500 }, children: stage.name }), stage.value && (jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 + 7, className: "fill-ink-400", style: { fontSize: sizes.value }, children: stage.value })), showConversion && conversionRate !== null && (jsxs("text", { x: centerX - funnelWidth / 2 - 16, y: y + 4, textAnchor: "end", className: "fill-ink-500", style: { fontSize: sizes.conversion, fontWeight: 500 }, children: ["\u2193 ", conversionRate, "%"] }))] }, stage.name));
             }) }) }));
 }
 
@@ -62577,5 +62586,148 @@ function Responsive({ mobile, tablet, desktop, }) {
     return jsx(Fragment, { children: mobile || tablet || desktop });
 }
 
-export { Accordion, AchievementBadge, AchievementUnlock, ActionBar, ActionBarCenter, ActionBarLeft, ActionBarRight, ActionButton, ActionCard, ActivityFeed, AdminModal, Alert, AlertDialog, AnomalyBanner, AppLayout, Autocomplete, Avatar, BREAKPOINTS, Badge, BottomNavigation, BottomNavigationSpacer, BottomSheet, BottomSheetActions, BottomSheetContent, BottomSheetHeader, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, CaseQueueItem, Celebration, Checkbox, CheckboxList, Chip, ChipGroup, CollaboratorAvatars, Collapsible, CollapsibleSection, ColorPicker, Combobox, ComingSoon, CommandPalette, CompactStat, ConfidenceBadge, ConfidenceIndicator, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, CurrencyInput, Dashboard, DashboardContent, DashboardHeader, DataGrid, DataTable, DataTableCardView, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, DesktopOnly, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, EntityCard, ErrorBoundary, ExpandablePanel, ExpandablePanelContainer, ExpandablePanelSpacer, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FORMULA_CATEGORIES, FORMULA_DEFINITIONS, FORMULA_NAMES, FieldArray, FileUpload, FilterBar, FilterControls, FilterStatusBanner, FloatingActionButton, Form, FormContext, FormControl, FormWizard, FunnelChart, Grid, GridItem, HelpTooltip, Hide, HorizontalScroll, HoverCard, InfiniteScroll, Input, InviteCard, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, MatchIndicator, Menu, MenuDivider, MobileHeader, MobileHeaderSpacer, MobileLayout, MobileOnly, MobileProvider, Modal, ModalFooter, MotivationalMessage, MultiSelect, NotificationBanner, NotificationBar, NotificationBell, NotificationIndicator, NumberInput, Page, PageHeader, PageLayout, PageNavigation, Pagination, PasswordInput, PermissionBadge, PersonaDashboard, PivotTable, Popover, PriorityAlertBanner, ProcessHealthBar, ProcessIndicator, Progress, ProgressCelebration, PullToRefresh, QueryTransparency, RadioGroup, Rating, Responsive, ReviewDecisionCard, RichTextEditor, SLAIndicator, SearchBar, SearchableList, Select, Separator, SharedBadge, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard$1 as SkeletonCard, SkeletonTable, SkipLink, Slider, SplitPane, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, StreakBadge, SuccessCheck, SummaryCard, SwipeActions, SwipeableCard, SwipeableListItem, Switch, SystemActionEntry, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, Text, Textarea, ThemeToggle, TimePicker, Timeline, TimezoneSelector, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, VarianceDisplay, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, getFormula, getFormulasByCategory, getLocalTimezone, isValidTimezone, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, searchFormulas, statusManager, useBreadcrumbReset, useBreakpoint, useBreakpointValue, useCelebration, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useDelighters, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
+function formatRelativeTime$1(date) {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffMins < 1)
+        return 'Just now';
+    if (diffMins < 60)
+        return `${diffMins}m ago`;
+    if (diffHours < 24)
+        return `${diffHours}h ago`;
+    if (diffDays < 7)
+        return `${diffDays}d ago`;
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+/**
+ * ChatUI - Conversational chat interface component.
+ *
+ * Renders a scrollable message thread with user/assistant bubbles,
+ * a typing indicator, an input bar with send button (Enter to send,
+ * Shift+Enter for newline), and optional suggested question chips.
+ *
+ * @example
+ * ```tsx
+ * <ChatUI
+ *   messages={messages}
+ *   inputValue={input}
+ *   isLoading={loading}
+ *   onInputChange={setInput}
+ *   onSend={handleSend}
+ *   suggestedQuestions={['What are my top deals?']}
+ *   onSuggestedQuestionClick={handleQuestion}
+ * />
+ * ```
+ */
+const ChatUI = forwardRef(({ messages, inputValue, isLoading = false, placeholder = 'Ask a question...', suggestedQuestions = [], onInputChange, onSend, onSuggestedQuestionClick, messagesEndRef, height = '600px', className = '', }, ref) => {
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            if (inputValue.trim()) {
+                onSend();
+            }
+        }
+    };
+    return (jsxs("div", { ref: ref, className: `flex flex-col bg-white rounded-lg border border-paper-200 overflow-hidden ${className}`, style: { height }, children: [jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [messages.length === 0 && !isLoading && (jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [jsx(Bot, { className: "w-10 h-10 text-ink-300 mb-3" }), jsx("p", { className: "text-ink-500 text-sm", children: "No messages yet. Start a conversation!" })] })), messages.map((message) => (jsxs("div", { className: `flex gap-3 ${message.role === 'user' ? 'flex-row-reverse' : 'flex-row'}`, children: [jsx("div", { className: `flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${message.role === 'user'
+                                    ? 'bg-primary-100 text-primary-600'
+                                    : 'bg-paper-200 text-ink-500'}`, children: message.role === 'user' ? (jsx(User, { className: "w-4 h-4" })) : (jsx(Bot, { className: "w-4 h-4" })) }), jsxs("div", { className: `max-w-[75%] rounded-xl px-4 py-2.5 ${message.role === 'user'
+                                    ? 'bg-primary-500 text-white rounded-br-sm'
+                                    : 'bg-paper-100 text-ink-800 border border-paper-200 rounded-bl-sm'}`, children: [jsx("p", { className: "text-sm whitespace-pre-wrap", children: message.content }), jsx("p", { className: `text-[10px] mt-1 ${message.role === 'user' ? 'text-primary-200' : 'text-ink-400'}`, children: formatRelativeTime$1(message.timestamp) })] })] }, message.id))), isLoading && (jsxs("div", { className: "flex gap-3", children: [jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-paper-200 text-ink-500 flex items-center justify-center", children: jsx(Bot, { className: "w-4 h-4" }) }), jsx("div", { className: "bg-paper-100 border border-paper-200 rounded-xl rounded-bl-sm px-4 py-3", children: jsxs("div", { className: "flex gap-1.5", children: [jsx("span", { className: "w-2 h-2 bg-ink-400 rounded-full animate-bounce", style: { animationDelay: '0ms' } }), jsx("span", { className: "w-2 h-2 bg-ink-400 rounded-full animate-bounce", style: { animationDelay: '150ms' } }), jsx("span", { className: "w-2 h-2 bg-ink-400 rounded-full animate-bounce", style: { animationDelay: '300ms' } })] }) })] })), messagesEndRef && jsx("div", { ref: messagesEndRef })] }), suggestedQuestions.length > 0 && messages.length === 0 && (jsx("div", { className: "px-4 pb-2 flex flex-wrap gap-2", children: suggestedQuestions.map((question, index) => (jsx("button", { onClick: () => onSuggestedQuestionClick?.(question), className: "text-xs px-3 py-1.5 rounded-full border border-primary-200 text-primary-700 bg-primary-50 hover:bg-primary-100 transition-colors", children: question }, index))) })), jsx("div", { className: "border-t border-paper-200 p-3 bg-paper-50", children: jsxs("div", { className: "flex items-end gap-2", children: [jsx("textarea", { value: inputValue, onChange: (e) => onInputChange(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, rows: 1, className: "flex-1 resize-none rounded-lg border border-paper-300 bg-white px-3 py-2 text-sm text-ink-800 placeholder:text-ink-400 focus:outline-none focus:ring-2 focus:ring-primary-300 focus:border-primary-300" }), jsx("button", { onClick: onSend, disabled: !inputValue.trim() || isLoading, className: "flex-shrink-0 p-2 rounded-lg bg-primary-500 text-white hover:bg-primary-600 disabled:opacity-40 disabled:cursor-not-allowed transition-colors", "aria-label": "Send message", children: jsx(Send, { className: "w-4 h-4" }) })] }) })] }));
+});
+ChatUI.displayName = 'ChatUI';
+
+const FILTER_OPTIONS = [
+    { key: 'all', label: 'All' },
+    { key: 'trend', label: 'Trends' },
+    { key: 'anomaly', label: 'Anomalies' },
+    { key: 'forecast', label: 'Forecasts' },
+    { key: 'recommendation', label: 'Recommendations' },
+];
+function getTypeIcon(type) {
+    switch (type) {
+        case 'trend':
+            return jsx(TrendingUp, { className: "w-4 h-4 text-green-600" });
+        case 'anomaly':
+            return jsx(AlertTriangle, { className: "w-4 h-4 text-red-600" });
+        case 'forecast':
+            return jsx(Target, { className: "w-4 h-4 text-purple-600" });
+        case 'recommendation':
+            return jsx(Lightbulb, { className: "w-4 h-4 text-amber-600" });
+    }
+}
+function getTypeBgColor(type) {
+    switch (type) {
+        case 'trend': return 'bg-green-50';
+        case 'anomaly': return 'bg-red-50';
+        case 'forecast': return 'bg-purple-50';
+        case 'recommendation': return 'bg-amber-50';
+    }
+}
+function getConfidenceBadge(confidence) {
+    const pct = Math.round(confidence * 100);
+    let colorClasses;
+    if (confidence >= 0.8) {
+        colorClasses = 'bg-green-100 text-green-700';
+    }
+    else if (confidence >= 0.6) {
+        colorClasses = 'bg-yellow-100 text-yellow-700';
+    }
+    else {
+        colorClasses = 'bg-red-100 text-red-700';
+    }
+    return (jsxs("span", { className: `inline-flex items-center text-[10px] font-medium px-1.5 py-0.5 rounded-full ${colorClasses}`, children: [pct, "%"] }));
+}
+function formatRelativeTime(date) {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffMins < 1)
+        return 'Just now';
+    if (diffMins < 60)
+        return `${diffMins}m ago`;
+    if (diffHours < 24)
+        return `${diffHours}h ago`;
+    if (diffDays < 7)
+        return `${diffDays}d ago`;
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+/**
+ * InsightsPanelUI - Structured display of analytics insights.
+ *
+ * Renders a header with title and refresh button, filter chips
+ * (All / Trends / Anomalies / Forecasts / Recommendations), and
+ * insight cards with type icon, title, summary, confidence badge,
+ * and relative timestamp. Includes loading skeleton and empty state.
+ *
+ * @example
+ * ```tsx
+ * <InsightsPanelUI
+ *   insights={insights}
+ *   isLoading={loading}
+ *   filter={activeFilter}
+ *   maxInsights={8}
+ *   onFilterChange={setFilter}
+ *   onRefresh={refreshInsights}
+ * />
+ * ```
+ */
+const InsightsPanelUI = forwardRef(({ insights, isLoading = false, filter = 'all', maxInsights, onFilterChange, onRefresh, className = '', }, ref) => {
+    const filtered = filter === 'all'
+        ? insights
+        : insights.filter((i) => i.type === filter);
+    const displayed = maxInsights ? filtered.slice(0, maxInsights) : filtered;
+    return (jsxs("div", { ref: ref, className: `bg-white rounded-lg border border-paper-200 ${className}`, children: [jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-paper-200", children: [jsx("h3", { className: "text-lg font-semibold text-ink-900", children: "AI Insights" }), onRefresh && (jsx("button", { onClick: onRefresh, disabled: isLoading, className: "p-1.5 rounded-md text-ink-500 hover:text-ink-700 hover:bg-paper-100 disabled:opacity-40 transition-colors", "aria-label": "Refresh insights", children: jsx(RefreshCw, { className: `w-4 h-4 ${isLoading ? 'animate-spin' : ''}` }) }))] }), onFilterChange && (jsx("div", { className: "px-5 pt-3 pb-1 flex flex-wrap gap-2", children: FILTER_OPTIONS.map((opt) => (jsx("button", { onClick: () => onFilterChange(opt.key), className: `text-xs font-medium px-3 py-1.5 rounded-full transition-colors ${filter === opt.key
+                        ? 'bg-primary-500 text-white'
+                        : 'bg-paper-100 text-ink-600 hover:bg-paper-200'}`, children: opt.label }, opt.key))) })), jsxs("div", { className: "p-5 space-y-3", children: [isLoading && displayed.length === 0 && (jsx("div", { className: "space-y-3", children: [1, 2, 3].map((i) => (jsxs("div", { className: "animate-pulse rounded-lg border border-paper-200 p-4", children: [jsxs("div", { className: "flex items-center gap-3 mb-2", children: [jsx("div", { className: "w-8 h-8 bg-paper-200 rounded-lg" }), jsxs("div", { className: "flex-1", children: [jsx("div", { className: "h-4 bg-paper-200 rounded w-2/3 mb-1" }), jsx("div", { className: "h-3 bg-paper-100 rounded w-1/3" })] })] }), jsx("div", { className: "h-3 bg-paper-100 rounded w-full mb-1" }), jsx("div", { className: "h-3 bg-paper-100 rounded w-4/5" })] }, i))) })), !isLoading && displayed.length === 0 && (jsxs("div", { className: "text-center py-8", children: [jsx(BrainCircuit, { className: "w-10 h-10 text-ink-300 mx-auto mb-3" }), jsx("p", { className: "text-ink-500 text-sm", children: filter === 'all'
+                                    ? 'No insights available yet.'
+                                    : `No ${filter} insights found.` })] })), displayed.map((insight) => (jsx("div", { className: "rounded-lg border border-paper-200 p-4 hover:shadow-sm transition-shadow", children: jsxs("div", { className: "flex items-start gap-3", children: [jsx("div", { className: `flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center ${getTypeBgColor(insight.type)}`, children: getTypeIcon(insight.type) }), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2 mb-1", children: [jsx("h4", { className: "text-sm font-medium text-ink-900 truncate", children: insight.title }), getConfidenceBadge(insight.confidence)] }), jsx("p", { className: "text-xs text-ink-600 leading-relaxed", children: insight.summary }), jsx("p", { className: "text-[10px] text-ink-400 mt-1.5", children: formatRelativeTime(insight.timestamp) })] })] }) }, insight.id)))] })] }));
+});
+InsightsPanelUI.displayName = 'InsightsPanelUI';
+
+export { Accordion, AchievementBadge, AchievementUnlock, ActionBar, ActionBarCenter, ActionBarLeft, ActionBarRight, ActionButton, ActionCard, ActivityFeed, AdminModal, Alert, AlertDialog, AnomalyBanner, AppLayout, Autocomplete, Avatar, BREAKPOINTS, Badge, BottomNavigation, BottomNavigationSpacer, BottomSheet, BottomSheetActions, BottomSheetContent, BottomSheetHeader, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, CaseQueueItem, Celebration, ChatUI, Checkbox, CheckboxList, Chip, ChipGroup, CollaboratorAvatars, Collapsible, CollapsibleSection, ColorPicker, Combobox, ComingSoon, CommandPalette, CompactStat, ConfidenceBadge, ConfidenceIndicator, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, CurrencyInput, Dashboard, DashboardContent, DashboardHeader, DataGrid, DataTable, DataTableCardView, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, DesktopOnly, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, EntityCard, ErrorBoundary, ExpandablePanel, ExpandablePanelContainer, ExpandablePanelSpacer, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FORMULA_CATEGORIES, FORMULA_DEFINITIONS, FORMULA_NAMES, FieldArray, FileUpload, FilterBar, FilterControls, FilterStatusBanner, FloatingActionButton, Form, FormContext, FormControl, FormWizard, FunnelChart, Grid, GridItem, HelpTooltip, Hide, HorizontalScroll, HoverCard, InfiniteScroll, Input, InsightsPanelUI, InviteCard, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, MatchIndicator, Menu, MenuDivider, MobileHeader, MobileHeaderSpacer, MobileLayout, MobileOnly, MobileProvider, Modal, ModalFooter, MotivationalMessage, MultiSelect, NotificationBanner, NotificationBar, NotificationBell, NotificationIndicator, NumberInput, Page, PageHeader, PageLayout, PageNavigation, Pagination, PasswordInput, PermissionBadge, PersonaDashboard, PivotTable, Popover, PriorityAlertBanner, ProcessHealthBar, ProcessIndicator, Progress, ProgressCelebration, PullToRefresh, QueryTransparency, RadioGroup, Rating, Responsive, ReviewDecisionCard, RichTextEditor, SLAIndicator, SearchBar, SearchableList, Select, Separator, SharedBadge, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard$1 as SkeletonCard, SkeletonTable, SkipLink, Slider, SplitPane, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, StreakBadge, SuccessCheck, SummaryCard, SwipeActions, SwipeableCard, SwipeableListItem, Switch, SystemActionEntry, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, Text, Textarea, ThemeToggle, TimePicker, Timeline, TimezoneSelector, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, VarianceDisplay, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, getFormula, getFormulasByCategory, getLocalTimezone, isValidTimezone, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, searchFormulas, statusManager, useBreadcrumbReset, useBreakpoint, useBreakpointValue, useCelebration, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useDelighters, useFABScroll, useFormContext, useIsDesktop, useIsMobile, useIsTablet, useIsTouchDevice, useMediaQuery, useMobileContext, useOrientation, usePrefersMobile, useResponsiveCallback, useSafeAreaInsets, useViewportSize, withMobileContext };
 //# sourceMappingURL=index.esm.js.map