@papernote/ui 1.11.6 → 1.13.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"] }) }))] })] }))] }) }));
 }
 
 /**
@@ -13185,8 +13185,13 @@ function Sidebar({ items, onNavigate, className = '', header, footer, currentPat
     };
     // Sidebar content (shared between desktop and mobile)
     const sidebarContent = (jsxs("div", { ref: sidebarRef, className: `flex flex-col h-full bg-white border-r border-paper-300 notebook-binding ${width} ${className}`, children: [mobileOpen !== undefined && (jsxs("div", { className: "flex items-center justify-between px-4 pt-4 md:hidden", children: [jsx("div", { className: "flex-1", children: header }), jsx("button", { onClick: onMobileClose, className: "\n              flex items-center justify-center\n              w-10 h-10 -mr-2\n              text-ink-500 hover:text-ink-700\n              hover:bg-paper-100 rounded-full\n              transition-colors\n            ", "aria-label": "Close sidebar", children: jsx(X, { className: "w-5 h-5" }) })] })), header && mobileOpen === undefined && (jsx("div", { className: "px-6 pt-6 pb-4", children: header })), header && mobileOpen !== undefined && (jsx("div", { className: "px-6 pt-2 pb-4 hidden md:block", children: header })), jsx("nav", { className: "flex-1 px-3 py-2 space-y-1 overflow-y-auto", children: items.map((item) => {
-                    // Render separator
+                    // Render separator or section header
                     if (item.separator) {
+                        // Section header: separator with a label
+                        if (item.label) {
+                            return (jsx("div", { className: "mt-6 mb-2 px-3", "data-testid": item.dataAttributes?.['data-testid'] || `sidebar-section-${item.id}`, ...item.dataAttributes, children: jsx("div", { className: "border-t border-paper-300 pt-3", children: jsx("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-ink-400", children: item.label }) }) }, item.id));
+                        }
+                        // Plain separator: just a line
                         return (jsx("div", { className: "my-4 border-t border-paper-300", "data-testid": item.dataAttributes?.['data-testid'] || `sidebar-separator-${item.id}`, ...item.dataAttributes }, item.id));
                     }
                     // Render nav item
@@ -61826,7 +61831,7 @@ function AdminModal({ isOpen, onClose, title, subtitle, onSubmit, isSaving = fal
     };
     return (jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 admin-modal-overlay", children: jsxs("div", { className: `bg-white rounded-lg w-full ${sizeClasses[size]} flex flex-col overflow-hidden shadow-2xl admin-modal-content`, style: { height: height }, children: [jsx("div", { className: "fixed inset-0 pointer-events-none admin-modal-sidebar-placeholder" }), jsxs("div", { className: "px-6 py-4 border-b", children: [jsx("h3", { className: "text-lg font-semibold", children: title }), subtitle && jsx("p", { className: "text-sm text-gray-500 mt-1", children: subtitle })] }), tabs.length > 1 && (jsx("div", { className: "border-b border-gray-200 bg-white", children: jsx("nav", { className: "-mb-px flex items-center px-6 admin-modal-tabs", "aria-label": "Tabs", children: tabs.map((tab, index) => (jsxs(React__default.Fragment, { children: [jsx("button", { type: "button", onClick: () => onTabChange(tab.id), className: `whitespace-nowrap border-b-2 py-3 px-4 text-sm font-medium transition-colors ${activeTabId === tab.id
                                         ? 'border-blue-500 text-blue-600'
-                                        : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'}`, "aria-current": activeTabId === tab.id ? 'page' : undefined, children: tab.label }), index < tabs.length - 1 && (jsx("div", { className: "admin-modal-tab-separator" }))] }, tab.id))) }) })), onSubmit ? (jsx("form", { className: "flex-1 overflow-y-auto min-h-0 h-0 px-6 py-6 admin-modal-form", onSubmit: handleFormSubmit, id: formId, children: activeTab?.content || children })) : (jsx("div", { className: "flex-1 overflow-y-auto min-h-0 h-0 px-6 py-6 admin-modal-content-area", children: activeTab?.content || children })), jsxs("div", { className: "px-6 py-4 border-t bg-gray-50 flex justify-between gap-3", children: [jsx("button", { type: "button", onClick: onClose, className: "px-4 py-2 text-sm text-gray-600 hover:text-gray-800", disabled: isSaving, children: "Cancel" }), jsxs("div", { className: "flex gap-3", children: [customFooterActions, onSubmit && (jsx("button", { type: "submit", form: formId, disabled: isSaving, className: "px-4 py-2 text-sm bg-primary-600 text-white rounded hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed", children: isSaving ? 'Saving...' : 'Save Changes' }))] })] })] }) }));
+                                        : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'}`, "aria-current": activeTabId === tab.id ? 'page' : undefined, children: tab.label }), index < tabs.length - 1 && (jsx("div", { className: "admin-modal-tab-separator" }))] }, tab.id))) }) })), onSubmit ? (jsx("form", { className: "flex-1 overflow-y-auto min-h-0 h-0 px-6 py-6 admin-modal-form", onSubmit: handleFormSubmit, id: formId, noValidate: true, children: activeTab?.content || children })) : (jsx("div", { className: "flex-1 overflow-y-auto min-h-0 h-0 px-6 py-6 admin-modal-content-area", children: activeTab?.content || children })), jsxs("div", { className: "px-6 py-4 border-t bg-gray-50 flex justify-between gap-3", children: [jsx("button", { type: "button", onClick: onClose, className: "px-4 py-2 text-sm text-gray-600 hover:text-gray-800", disabled: isSaving, children: "Cancel" }), jsxs("div", { className: "flex gap-3", children: [customFooterActions, onSubmit && (jsx("button", { type: "submit", form: formId, disabled: isSaving, className: "px-4 py-2 text-sm bg-primary-600 text-white rounded hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed", children: isSaving ? 'Saving...' : 'Save Changes' }))] })] })] }) }));
 }
 
 /**
@@ -62594,5 +62599,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