@papernote/ui 1.11.6 → 1.12.0

package/dist/index.js

@@ -5418,7 +5418,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);
@@ -5450,11 +5450,11 @@ function ActivityFeed({ activities, maxItems, showTimestamps = true, onLoadMore,
     if (activities.length === 0) {
         return (jsxRuntime.jsxs("div", { className: `text-center py-8 ${className}`, children: [jsxRuntime.jsx(lucideReact.Activity, { className: "w-8 h-8 text-ink-300 mx-auto mb-2" }), jsxRuntime.jsx("p", { className: "text-ink-500 text-sm", children: "No activity yet" })] }));
     }
-    return (jsxRuntime.jsxs("div", { className: `${className}`, role: "feed", "aria-label": "Activity feed", children: [jsxRuntime.jsx("div", { className: "space-y-4", children: displayedActivities.map((activity, index) => (jsxRuntime.jsxs("div", { className: "flex gap-3", role: "article", "aria-label": `${activity.user.name} ${activity.action}${activity.target ? ` ${activity.target}` : ''}`, children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [jsxRuntime.jsx(CollaboratorAvatars, { collaborators: [activity.user], max: 1, size: "sm" }), index < displayedActivities.length - 1 && (jsxRuntime.jsx("div", { className: "w-0.5 flex-1 bg-paper-200 mt-2" }))] }), jsxRuntime.jsx("div", { className: "flex-1 min-w-0 pb-4", children: jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsxs("p", { className: "text-sm text-ink-700", children: [jsxRuntime.jsx("span", { className: "font-medium text-ink-800", children: activity.user.name }), ' ', activity.action, activity.target && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [' ', jsxRuntime.jsx("span", { className: "font-medium text-ink-800", children: activity.target })] }))] }) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [activity.icon && (jsxRuntime.jsx("span", { className: "text-ink-400", children: activity.icon })), showTimestamps && (jsxRuntime.jsx("span", { className: "text-xs text-ink-400 whitespace-nowrap", children: formatRelativeTime$1(activity.timestamp) }))] })] }) })] }, activity.id))) }), (hasMore || onLoadMore) && (jsxRuntime.jsx("div", { className: "mt-4 text-center", children: jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: onLoadMore, loading: loading, children: loading ? 'Loading...' : 'Load more' }) }))] }));
+    return (jsxRuntime.jsxs("div", { className: `${className}`, role: "feed", "aria-label": "Activity feed", children: [jsxRuntime.jsx("div", { className: "space-y-4", children: displayedActivities.map((activity, index) => (jsxRuntime.jsxs("div", { className: "flex gap-3", role: "article", "aria-label": `${activity.user.name} ${activity.action}${activity.target ? ` ${activity.target}` : ''}`, children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [jsxRuntime.jsx(CollaboratorAvatars, { collaborators: [activity.user], max: 1, size: "sm" }), index < displayedActivities.length - 1 && (jsxRuntime.jsx("div", { className: "w-0.5 flex-1 bg-paper-200 mt-2" }))] }), jsxRuntime.jsx("div", { className: "flex-1 min-w-0 pb-4", children: jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsxs("p", { className: "text-sm text-ink-700", children: [jsxRuntime.jsx("span", { className: "font-medium text-ink-800", children: activity.user.name }), ' ', activity.action, activity.target && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [' ', jsxRuntime.jsx("span", { className: "font-medium text-ink-800", children: activity.target })] }))] }) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [activity.icon && (jsxRuntime.jsx("span", { className: "text-ink-400", children: activity.icon })), showTimestamps && (jsxRuntime.jsx("span", { className: "text-xs text-ink-400 whitespace-nowrap", children: formatRelativeTime$3(activity.timestamp) }))] })] }) })] }, activity.id))) }), (hasMore || onLoadMore) && (jsxRuntime.jsx("div", { className: "mt-4 text-center", children: jsxRuntime.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);
@@ -5522,7 +5522,7 @@ function InviteCard({ onInvite, pending = [], loading = false, maxPending = 5, o
         shadow-card
         p-4
         ${className}
-      `, children: jsxRuntime.jsxs(Stack, { gap: "md", children: [jsxRuntime.jsxs(Stack, { direction: "horizontal", gap: "sm", align: "center", children: [jsxRuntime.jsx("div", { className: "p-2 bg-accent-100 rounded-lg", children: jsxRuntime.jsx(lucideReact.Mail, { className: "w-5 h-5 text-accent-600" }) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text, { weight: "semibold", className: "text-ink-800", children: "Invite People" }), jsxRuntime.jsx(Text, { size: "sm", className: "text-ink-500", children: "Share access via email" })] })] }), jsxRuntime.jsx("form", { onSubmit: handleSubmit, children: jsxRuntime.jsxs(Stack, { direction: "horizontal", gap: "sm", children: [jsxRuntime.jsx("div", { className: "flex-1", children: jsxRuntime.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 }) }), jsxRuntime.jsx(Button, { type: "submit", variant: "primary", loading: loading, disabled: !email.trim(), icon: jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" }), children: "Send" })] }) }), displayedPending.length > 0 && (jsxRuntime.jsxs(Stack, { gap: "sm", children: [jsxRuntime.jsxs(Stack, { direction: "horizontal", gap: "xs", align: "center", children: [jsxRuntime.jsx(lucideReact.Clock, { className: "w-4 h-4 text-ink-400" }), jsxRuntime.jsxs(Text, { size: "sm", className: "text-ink-500", children: ["Pending invitations (", pending.length, ")"] })] }), jsxRuntime.jsxs("div", { className: "border border-paper-200 rounded-lg divide-y divide-paper-200", children: [displayedPending.map((invite) => (jsxRuntime.jsxs("div", { className: "px-3 py-2 flex items-center justify-between", children: [jsxRuntime.jsxs(Stack, { gap: "xs", children: [jsxRuntime.jsx(Text, { size: "sm", weight: "medium", className: "text-ink-700", children: invite.email }), jsxRuntime.jsxs(Text, { size: "xs", className: "text-ink-400", children: ["Sent ", formatRelativeTime(invite.sentAt)] })] }), onCancelInvite && (jsxRuntime.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: jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }) }))] }, invite.email))), hasMorePending && (jsxRuntime.jsx("div", { className: "px-3 py-2 text-center", children: jsxRuntime.jsxs(Text, { size: "sm", className: "text-ink-400", children: ["+", pending.length - maxPending, " more"] }) }))] })] }))] }) }));
+      `, children: jsxRuntime.jsxs(Stack, { gap: "md", children: [jsxRuntime.jsxs(Stack, { direction: "horizontal", gap: "sm", align: "center", children: [jsxRuntime.jsx("div", { className: "p-2 bg-accent-100 rounded-lg", children: jsxRuntime.jsx(lucideReact.Mail, { className: "w-5 h-5 text-accent-600" }) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text, { weight: "semibold", className: "text-ink-800", children: "Invite People" }), jsxRuntime.jsx(Text, { size: "sm", className: "text-ink-500", children: "Share access via email" })] })] }), jsxRuntime.jsx("form", { onSubmit: handleSubmit, children: jsxRuntime.jsxs(Stack, { direction: "horizontal", gap: "sm", children: [jsxRuntime.jsx("div", { className: "flex-1", children: jsxRuntime.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 }) }), jsxRuntime.jsx(Button, { type: "submit", variant: "primary", loading: loading, disabled: !email.trim(), icon: jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" }), children: "Send" })] }) }), displayedPending.length > 0 && (jsxRuntime.jsxs(Stack, { gap: "sm", children: [jsxRuntime.jsxs(Stack, { direction: "horizontal", gap: "xs", align: "center", children: [jsxRuntime.jsx(lucideReact.Clock, { className: "w-4 h-4 text-ink-400" }), jsxRuntime.jsxs(Text, { size: "sm", className: "text-ink-500", children: ["Pending invitations (", pending.length, ")"] })] }), jsxRuntime.jsxs("div", { className: "border border-paper-200 rounded-lg divide-y divide-paper-200", children: [displayedPending.map((invite) => (jsxRuntime.jsxs("div", { className: "px-3 py-2 flex items-center justify-between", children: [jsxRuntime.jsxs(Stack, { gap: "xs", children: [jsxRuntime.jsx(Text, { size: "sm", weight: "medium", className: "text-ink-700", children: invite.email }), jsxRuntime.jsxs(Text, { size: "xs", className: "text-ink-400", children: ["Sent ", formatRelativeTime$2(invite.sentAt)] })] }), onCancelInvite && (jsxRuntime.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: jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }) }))] }, invite.email))), hasMorePending && (jsxRuntime.jsx("div", { className: "px-3 py-2 text-center", children: jsxRuntime.jsxs(Text, { size: "sm", className: "text-ink-400", children: ["+", pending.length - maxPending, " more"] }) }))] })] }))] }) }));
 }
 
 /**
@@ -15701,52 +15701,44 @@ function getAugmentedNamespace(n) {
  * (A1, A1:C5, ...)
  */
 
-var collection;
-var hasRequiredCollection;
-
-function requireCollection () {
-	if (hasRequiredCollection) return collection;
-	hasRequiredCollection = 1;
-	class Collection {
+let Collection$3 = class Collection {
 
-	    constructor(data, refs) {
-	        if (data == null && refs == null) {
-	            this._data = [];
-	            this._refs = [];
-	        } else {
-	            if (data.length !== refs.length)
-	                throw Error('Collection: data length should match references length.');
-	            this._data = data;
-	            this._refs = refs;
-	        }
-	    }
+    constructor(data, refs) {
+        if (data == null && refs == null) {
+            this._data = [];
+            this._refs = [];
+        } else {
+            if (data.length !== refs.length)
+                throw Error('Collection: data length should match references length.');
+            this._data = data;
+            this._refs = refs;
+        }
+    }
 
-	    get data() {
-	        return this._data;
-	    }
+    get data() {
+        return this._data;
+    }
 
-	    get refs() {
-	        return this._refs;
-	    }
+    get refs() {
+        return this._refs;
+    }
 
-	    get length() {
-	        return this._data.length;
-	    }
+    get length() {
+        return this._data.length;
+    }
 
-	    /**
-	     * Add data and references to this collection.
-	     * @param {{}} obj - data
-	     * @param {{}} ref - reference
-	     */
-	    add(obj, ref) {
-	        this._data.push(obj);
-	        this._refs.push(ref);
-	    }
-	}
+    /**
+     * Add data and references to this collection.
+     * @param {{}} obj - data
+     * @param {{}} ref - reference
+     */
+    add(obj, ref) {
+        this._data.push(obj);
+        this._refs.push(ref);
+    }
+};
 
-	collection = Collection;
-	return collection;
-}
+var collection = Collection$3;
 
 var helpers;
 var hasRequiredHelpers;
@@ -15755,7 +15747,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = requireCollection();
+	const Collection = collection;
 
 	const Types = {
 	    NUMBER: 0,
@@ -25409,7 +25401,7 @@ var engineering = EngineeringFunctions;
 
 const FormulaError$b = requireError();
 const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
-const Collection$2 = requireCollection();
+const Collection$2 = collection;
 const H$5 = FormulaHelpers$8;
 
 const ReferenceFunctions$1 = {
@@ -37037,7 +37029,7 @@ var parsing = {
 const FormulaError$4 = requireError();
 const {Address: Address$1} = requireHelpers();
 const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
-const Collection$1 = requireCollection();
+const Collection$1 = collection;
 const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
 const {NotAllInputParsedException} = require$$4;
 
@@ -37799,7 +37791,7 @@ var hooks$1 = {
 const FormulaError$2 = requireError();
 const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
 const {Prefix, Postfix, Infix, Operators} = operators;
-const Collection = requireCollection();
+const Collection = collection;
 const MAX_ROW = 1048576, MAX_COLUMN = 16384;
 
 let Utils$1 = class Utils {
@@ -62614,6 +62606,149 @@ function Responsive({ mobile, tablet, desktop, }) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: mobile || tablet || desktop });
 }
 
+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 = React.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 (jsxRuntime.jsxs("div", { ref: ref, className: `flex flex-col bg-white rounded-lg border border-paper-200 overflow-hidden ${className}`, style: { height }, children: [jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [messages.length === 0 && !isLoading && (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [jsxRuntime.jsx(lucideReact.Bot, { className: "w-10 h-10 text-ink-300 mb-3" }), jsxRuntime.jsx("p", { className: "text-ink-500 text-sm", children: "No messages yet. Start a conversation!" })] })), messages.map((message) => (jsxRuntime.jsxs("div", { className: `flex gap-3 ${message.role === 'user' ? 'flex-row-reverse' : 'flex-row'}`, children: [jsxRuntime.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' ? (jsxRuntime.jsx(lucideReact.User, { className: "w-4 h-4" })) : (jsxRuntime.jsx(lucideReact.Bot, { className: "w-4 h-4" })) }), jsxRuntime.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: [jsxRuntime.jsx("p", { className: "text-sm whitespace-pre-wrap", children: message.content }), jsxRuntime.jsx("p", { className: `text-[10px] mt-1 ${message.role === 'user' ? 'text-primary-200' : 'text-ink-400'}`, children: formatRelativeTime$1(message.timestamp) })] })] }, message.id))), isLoading && (jsxRuntime.jsxs("div", { className: "flex gap-3", children: [jsxRuntime.jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-paper-200 text-ink-500 flex items-center justify-center", children: jsxRuntime.jsx(lucideReact.Bot, { className: "w-4 h-4" }) }), jsxRuntime.jsx("div", { className: "bg-paper-100 border border-paper-200 rounded-xl rounded-bl-sm px-4 py-3", children: jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [jsxRuntime.jsx("span", { className: "w-2 h-2 bg-ink-400 rounded-full animate-bounce", style: { animationDelay: '0ms' } }), jsxRuntime.jsx("span", { className: "w-2 h-2 bg-ink-400 rounded-full animate-bounce", style: { animationDelay: '150ms' } }), jsxRuntime.jsx("span", { className: "w-2 h-2 bg-ink-400 rounded-full animate-bounce", style: { animationDelay: '300ms' } })] }) })] })), messagesEndRef && jsxRuntime.jsx("div", { ref: messagesEndRef })] }), suggestedQuestions.length > 0 && messages.length === 0 && (jsxRuntime.jsx("div", { className: "px-4 pb-2 flex flex-wrap gap-2", children: suggestedQuestions.map((question, index) => (jsxRuntime.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))) })), jsxRuntime.jsx("div", { className: "border-t border-paper-200 p-3 bg-paper-50", children: jsxRuntime.jsxs("div", { className: "flex items-end gap-2", children: [jsxRuntime.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" }), jsxRuntime.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: jsxRuntime.jsx(lucideReact.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 jsxRuntime.jsx(lucideReact.TrendingUp, { className: "w-4 h-4 text-green-600" });
+        case 'anomaly':
+            return jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "w-4 h-4 text-red-600" });
+        case 'forecast':
+            return jsxRuntime.jsx(lucideReact.Target, { className: "w-4 h-4 text-purple-600" });
+        case 'recommendation':
+            return jsxRuntime.jsx(lucideReact.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 (jsxRuntime.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 = React.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 (jsxRuntime.jsxs("div", { ref: ref, className: `bg-white rounded-lg border border-paper-200 ${className}`, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-paper-200", children: [jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-ink-900", children: "AI Insights" }), onRefresh && (jsxRuntime.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: jsxRuntime.jsx(lucideReact.RefreshCw, { className: `w-4 h-4 ${isLoading ? 'animate-spin' : ''}` }) }))] }), onFilterChange && (jsxRuntime.jsx("div", { className: "px-5 pt-3 pb-1 flex flex-wrap gap-2", children: FILTER_OPTIONS.map((opt) => (jsxRuntime.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))) })), jsxRuntime.jsxs("div", { className: "p-5 space-y-3", children: [isLoading && displayed.length === 0 && (jsxRuntime.jsx("div", { className: "space-y-3", children: [1, 2, 3].map((i) => (jsxRuntime.jsxs("div", { className: "animate-pulse rounded-lg border border-paper-200 p-4", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-2", children: [jsxRuntime.jsx("div", { className: "w-8 h-8 bg-paper-200 rounded-lg" }), jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("div", { className: "h-4 bg-paper-200 rounded w-2/3 mb-1" }), jsxRuntime.jsx("div", { className: "h-3 bg-paper-100 rounded w-1/3" })] })] }), jsxRuntime.jsx("div", { className: "h-3 bg-paper-100 rounded w-full mb-1" }), jsxRuntime.jsx("div", { className: "h-3 bg-paper-100 rounded w-4/5" })] }, i))) })), !isLoading && displayed.length === 0 && (jsxRuntime.jsxs("div", { className: "text-center py-8", children: [jsxRuntime.jsx(lucideReact.BrainCircuit, { className: "w-10 h-10 text-ink-300 mx-auto mb-3" }), jsxRuntime.jsx("p", { className: "text-ink-500 text-sm", children: filter === 'all'
+                                    ? 'No insights available yet.'
+                                    : `No ${filter} insights found.` })] })), displayed.map((insight) => (jsxRuntime.jsx("div", { className: "rounded-lg border border-paper-200 p-4 hover:shadow-sm transition-shadow", children: jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: `flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center ${getTypeBgColor(insight.type)}`, children: getTypeIcon(insight.type) }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 mb-1", children: [jsxRuntime.jsx("h4", { className: "text-sm font-medium text-ink-900 truncate", children: insight.title }), getConfidenceBadge(insight.confidence)] }), jsxRuntime.jsx("p", { className: "text-xs text-ink-600 leading-relaxed", children: insight.summary }), jsxRuntime.jsx("p", { className: "text-[10px] text-ink-400 mt-1.5", children: formatRelativeTime(insight.timestamp) })] })] }) }, insight.id)))] })] }));
+});
+InsightsPanelUI.displayName = 'InsightsPanelUI';
+
 exports.Accordion = Accordion;
 exports.AchievementBadge = AchievementBadge;
 exports.AchievementUnlock = AchievementUnlock;
@@ -62654,6 +62789,7 @@ exports.CardView = CardView;
 exports.Carousel = Carousel;
 exports.CaseQueueItem = CaseQueueItem;
 exports.Celebration = Celebration;
+exports.ChatUI = ChatUI;
 exports.Checkbox = Checkbox;
 exports.CheckboxList = CheckboxList;
 exports.Chip = Chip;
@@ -62721,6 +62857,7 @@ exports.HorizontalScroll = HorizontalScroll;
 exports.HoverCard = HoverCard;
 exports.InfiniteScroll = InfiniteScroll;
 exports.Input = Input;
+exports.InsightsPanelUI = InsightsPanelUI;
 exports.InviteCard = InviteCard;
 exports.KanbanBoard = KanbanBoard;
 exports.Layout = Layout;