@papernote/ui 1.11.6 → 1.13.0

package/dist/styles.css

@@ -2005,6 +2005,10 @@ input:checked + .slider:before{
   width: 50%;
 }
 
+.w-1\/3{
+  width: 33.333333%;
+}
+
 .w-1\/4{
   width: 25%;
 }
@@ -2077,6 +2081,10 @@ input:checked + .slider:before{
   width: 1rem;
 }
 
+.w-4\/5{
+  width: 80%;
+}
+
 .w-4\/6{
   width: 66.666667%;
 }
@@ -2262,6 +2270,10 @@ input:checked + .slider:before{
   max-width: 200px;
 }
 
+.max-w-\[75\%\]{
+  max-width: 75%;
+}
+
 .max-w-\[calc\(100\%-0\.25rem\)\]{
   max-width: calc(100% - 0.25rem);
 }
@@ -3176,6 +3188,14 @@ input:checked + .slider:before{
   border-top-right-radius: 0.5rem;
 }
 
+.rounded-bl-sm{
+  border-bottom-left-radius: 0.125rem;
+}
+
+.rounded-br-sm{
+  border-bottom-right-radius: 0.125rem;
+}
+
 .border{
   border-width: 1px;
 }
@@ -4406,6 +4426,10 @@ input:checked + .slider:before{
   padding-bottom: 0px;
 }
 
+.pb-1{
+  padding-bottom: 0.25rem;
+}
+
 .pb-12{
   padding-bottom: 3rem;
 }
@@ -4715,6 +4739,10 @@ input:checked + .slider:before{
   letter-spacing: 0.05em;
 }
 
+.tracking-widest{
+  letter-spacing: 0.1em;
+}
+
 .text-accent-200{
   --tw-text-opacity: 1;
   color: rgb(232 231 224 / var(--tw-text-opacity, 1));
@@ -4750,6 +4778,11 @@ input:checked + .slider:before{
   color: rgb(42 41 34 / var(--tw-text-opacity, 1));
 }
 
+.text-amber-600{
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
+}
+
 .text-blue-500{
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
@@ -4889,6 +4922,11 @@ input:checked + .slider:before{
   color: rgb(231 229 228 / var(--tw-text-opacity, 1));
 }
 
+.text-primary-200{
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
+}
+
 .text-primary-500{
   --tw-text-opacity: 1;
   color: rgb(100 116 139 / var(--tw-text-opacity, 1));
@@ -4914,6 +4952,11 @@ input:checked + .slider:before{
   color: rgb(15 23 42 / var(--tw-text-opacity, 1));
 }
 
+.text-purple-600{
+  --tw-text-opacity: 1;
+  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
+}
+
 .text-purple-700{
   --tw-text-opacity: 1;
   color: rgb(126 34 206 / var(--tw-text-opacity, 1));
@@ -5701,6 +5744,16 @@ input:checked + .slider:before{
   }
 }
 
+.placeholder\:text-ink-400::-moz-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
+}
+
+.placeholder\:text-ink-400::placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(168 162 158 / var(--tw-text-opacity, 1));
+}
+
 .first\:rounded-t-lg:first-child{
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -6279,6 +6332,11 @@ input:checked + .slider:before{
   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
 }
 
+.focus\:border-primary-300:focus{
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
+}
+
 .focus\:border-primary-500:focus{
   --tw-border-opacity: 1;
   border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
@@ -6375,6 +6433,11 @@ input:checked + .slider:before{
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
 }
 
+.focus\:ring-primary-300:focus{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity, 1));
+}
+
 .focus\:ring-primary-500:focus{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.11.6",
+  "version": "1.13.0",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",

package/src/components/AdminModal.tsx

@@ -109,6 +109,7 @@ export function AdminModal({
             className="flex-1 overflow-y-auto min-h-0 h-0 px-6 py-6 admin-modal-form"
             onSubmit={handleFormSubmit}
             id={formId}
+            noValidate
           >
             {activeTab?.content || children}
           </form>

package/src/components/ChatUI.tsx

@@ -0,0 +1,214 @@
+import React, { forwardRef } from 'react';
+import { Send, Bot, User } from 'lucide-react';
+
+/** A single message in the chat thread */
+export interface ChatMessage {
+  /** Unique message identifier */
+  id: string;
+  /** Who sent the message */
+  role: 'user' | 'assistant';
+  /** Message content */
+  content: string;
+  /** When the message was sent */
+  timestamp: Date;
+}
+
+export interface ChatUIProps {
+  /** Message thread to display */
+  messages: ChatMessage[];
+  /** Controlled input value */
+  inputValue: string;
+  /** Show typing indicator */
+  isLoading?: boolean;
+  /** Input placeholder text */
+  placeholder?: string;
+  /** Clickable suggested question chips */
+  suggestedQuestions?: string[];
+  /** Input change handler */
+  onInputChange: (value: string) => void;
+  /** Send message handler */
+  onSend: () => void;
+  /** Suggested question click handler */
+  onSuggestedQuestionClick?: (question: string) => void;
+  /** Ref for auto-scrolling to bottom of messages */
+  messagesEndRef?: React.RefObject<HTMLDivElement | null>;
+  /** Container height (CSS value) */
+  height?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+function formatRelativeTime(date: Date): string {
+  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<HTMLDivElement, ChatUIProps>(({
+  messages,
+  inputValue,
+  isLoading = false,
+  placeholder = 'Ask a question...',
+  suggestedQuestions = [],
+  onInputChange,
+  onSend,
+  onSuggestedQuestionClick,
+  messagesEndRef,
+  height = '600px',
+  className = '',
+}, ref) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      if (inputValue.trim()) {
+        onSend();
+      }
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={`flex flex-col bg-white rounded-lg border border-paper-200 overflow-hidden ${className}`}
+      style={{ height }}
+    >
+      {/* Messages area */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {messages.length === 0 && !isLoading && (
+          <div className="flex flex-col items-center justify-center h-full text-center">
+            <Bot className="w-10 h-10 text-ink-300 mb-3" />
+            <p className="text-ink-500 text-sm">No messages yet. Start a conversation!</p>
+          </div>
+        )}
+
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={`flex gap-3 ${message.role === 'user' ? 'flex-row-reverse' : 'flex-row'}`}
+          >
+            {/* Avatar */}
+            <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'
+              }`}
+            >
+              {message.role === 'user' ? (
+                <User className="w-4 h-4" />
+              ) : (
+                <Bot className="w-4 h-4" />
+              )}
+            </div>
+
+            {/* Bubble */}
+            <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'
+              }`}
+            >
+              <p className="text-sm whitespace-pre-wrap">{message.content}</p>
+              <p
+                className={`text-[10px] mt-1 ${
+                  message.role === 'user' ? 'text-primary-200' : 'text-ink-400'
+                }`}
+              >
+                {formatRelativeTime(message.timestamp)}
+              </p>
+            </div>
+          </div>
+        ))}
+
+        {/* Typing indicator */}
+        {isLoading && (
+          <div className="flex gap-3">
+            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-paper-200 text-ink-500 flex items-center justify-center">
+              <Bot className="w-4 h-4" />
+            </div>
+            <div className="bg-paper-100 border border-paper-200 rounded-xl rounded-bl-sm px-4 py-3">
+              <div className="flex gap-1.5">
+                <span className="w-2 h-2 bg-ink-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                <span className="w-2 h-2 bg-ink-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                <span className="w-2 h-2 bg-ink-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {messagesEndRef && <div ref={messagesEndRef} />}
+      </div>
+
+      {/* Suggested questions */}
+      {suggestedQuestions.length > 0 && messages.length === 0 && (
+        <div className="px-4 pb-2 flex flex-wrap gap-2">
+          {suggestedQuestions.map((question, index) => (
+            <button
+              key={index}
+              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"
+            >
+              {question}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Input area */}
+      <div className="border-t border-paper-200 p-3 bg-paper-50">
+        <div className="flex items-end gap-2">
+          <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"
+          />
+          <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"
+          >
+            <Send className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+ChatUI.displayName = 'ChatUI';
+
+export default ChatUI;

package/src/components/InsightsPanelUI.tsx

@@ -0,0 +1,244 @@
+import { forwardRef } from 'react';
+import { TrendingUp, AlertTriangle, Target, Lightbulb, RefreshCw, BrainCircuit } from 'lucide-react';
+
+/** A structured analytics insight */
+export interface AnalyticsInsight {
+  /** Unique insight identifier */
+  id: string;
+  /** Short insight title */
+  title: string;
+  /** Descriptive summary */
+  summary: string;
+  /** Insight category */
+  type: 'trend' | 'anomaly' | 'forecast' | 'recommendation';
+  /** Confidence score (0–1) */
+  confidence: number;
+  /** Optional payload */
+  data?: any;
+  /** When the insight was generated */
+  timestamp: Date;
+}
+
+export interface InsightsPanelUIProps {
+  /** Array of insights to display */
+  insights: AnalyticsInsight[];
+  /** Show loading skeleton */
+  isLoading?: boolean;
+  /** Active filter value */
+  filter?: string;
+  /** Maximum number of insights to show */
+  maxInsights?: number;
+  /** Filter change handler */
+  onFilterChange?: (filter: string) => void;
+  /** Refresh handler */
+  onRefresh?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const FILTER_OPTIONS = [
+  { key: 'all', label: 'All' },
+  { key: 'trend', label: 'Trends' },
+  { key: 'anomaly', label: 'Anomalies' },
+  { key: 'forecast', label: 'Forecasts' },
+  { key: 'recommendation', label: 'Recommendations' },
+] as const;
+
+function getTypeIcon(type: AnalyticsInsight['type']) {
+  switch (type) {
+    case 'trend':
+      return <TrendingUp className="w-4 h-4 text-green-600" />;
+    case 'anomaly':
+      return <AlertTriangle className="w-4 h-4 text-red-600" />;
+    case 'forecast':
+      return <Target className="w-4 h-4 text-purple-600" />;
+    case 'recommendation':
+      return <Lightbulb className="w-4 h-4 text-amber-600" />;
+  }
+}
+
+function getTypeBgColor(type: AnalyticsInsight['type']): string {
+  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: number) {
+  const pct = Math.round(confidence * 100);
+  let colorClasses: string;
+
+  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 (
+    <span className={`inline-flex items-center text-[10px] font-medium px-1.5 py-0.5 rounded-full ${colorClasses}`}>
+      {pct}%
+    </span>
+  );
+}
+
+function formatRelativeTime(date: Date): string {
+  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<HTMLDivElement, InsightsPanelUIProps>(({
+  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 (
+    <div ref={ref} className={`bg-white rounded-lg border border-paper-200 ${className}`}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-4 border-b border-paper-200">
+        <h3 className="text-lg font-semibold text-ink-900">AI Insights</h3>
+        {onRefresh && (
+          <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"
+          >
+            <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
+          </button>
+        )}
+      </div>
+
+      {/* Filter chips */}
+      {onFilterChange && (
+        <div className="px-5 pt-3 pb-1 flex flex-wrap gap-2">
+          {FILTER_OPTIONS.map((opt) => (
+            <button
+              key={opt.key}
+              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'
+              }`}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Content */}
+      <div className="p-5 space-y-3">
+        {/* Loading skeleton */}
+        {isLoading && displayed.length === 0 && (
+          <div className="space-y-3">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="animate-pulse rounded-lg border border-paper-200 p-4">
+                <div className="flex items-center gap-3 mb-2">
+                  <div className="w-8 h-8 bg-paper-200 rounded-lg" />
+                  <div className="flex-1">
+                    <div className="h-4 bg-paper-200 rounded w-2/3 mb-1" />
+                    <div className="h-3 bg-paper-100 rounded w-1/3" />
+                  </div>
+                </div>
+                <div className="h-3 bg-paper-100 rounded w-full mb-1" />
+                <div className="h-3 bg-paper-100 rounded w-4/5" />
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Empty state */}
+        {!isLoading && displayed.length === 0 && (
+          <div className="text-center py-8">
+            <BrainCircuit className="w-10 h-10 text-ink-300 mx-auto mb-3" />
+            <p className="text-ink-500 text-sm">
+              {filter === 'all'
+                ? 'No insights available yet.'
+                : `No ${filter} insights found.`}
+            </p>
+          </div>
+        )}
+
+        {/* Insight cards */}
+        {displayed.map((insight) => (
+          <div
+            key={insight.id}
+            className="rounded-lg border border-paper-200 p-4 hover:shadow-sm transition-shadow"
+          >
+            <div className="flex items-start gap-3">
+              {/* Type icon */}
+              <div className={`flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center ${getTypeBgColor(insight.type)}`}>
+                {getTypeIcon(insight.type)}
+              </div>
+
+              <div className="flex-1 min-w-0">
+                {/* Title row */}
+                <div className="flex items-center justify-between gap-2 mb-1">
+                  <h4 className="text-sm font-medium text-ink-900 truncate">{insight.title}</h4>
+                  {getConfidenceBadge(insight.confidence)}
+                </div>
+
+                {/* Summary */}
+                <p className="text-xs text-ink-600 leading-relaxed">{insight.summary}</p>
+
+                {/* Timestamp */}
+                <p className="text-[10px] text-ink-400 mt-1.5">
+                  {formatRelativeTime(insight.timestamp)}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});
+
+InsightsPanelUI.displayName = 'InsightsPanelUI';
+
+export default InsightsPanelUI;

package/src/components/Sidebar.tsx

@@ -331,8 +331,26 @@ export default function Sidebar({
       {/* Navigation */}
       <nav className="flex-1 px-3 py-2 space-y-1 overflow-y-auto">
         {items.map((item) => {
-          // Render separator
+          // Render separator or section header
           if (item.separator) {
+            // Section header: separator with a label
+            if (item.label) {
+              return (
+                <div
+                  key={item.id}
+                  className="mt-6 mb-2 px-3"
+                  data-testid={item.dataAttributes?.['data-testid'] || `sidebar-section-${item.id}`}
+                  {...item.dataAttributes}
+                >
+                  <div className="border-t border-paper-300 pt-3">
+                    <span className="text-[10px] font-semibold uppercase tracking-widest text-ink-400">
+                      {item.label}
+                    </span>
+                  </div>
+                </div>
+              );
+            }
+            // Plain separator: just a line
             return (
               <div
                 key={item.id}

package/src/components/index.ts

@@ -640,3 +640,9 @@ export {
   Responsive,
 } from '../context/MobileContext';
 export type { MobileContextValue, MobileProviderProps } from '../context/MobileContext';
+
+// Chat & AI Components
+export { default as ChatUI } from './ChatUI';
+export type { ChatUIProps, ChatMessage } from './ChatUI';
+export { default as InsightsPanelUI } from './InsightsPanelUI';
+export type { InsightsPanelUIProps, AnalyticsInsight } from './InsightsPanelUI';