@papernote/ui 1.10.26 → 1.11.0

package/dist/index.js

@@ -724,7 +724,7 @@ function usePrefersMobile() {
 }
 
 // Size classes for trigger button
-const sizeClasses$b = {
+const sizeClasses$d = {
     sm: 'h-8 text-sm py-1',
     md: 'h-10 text-base py-2',
     lg: 'h-12 text-base py-3 min-h-touch', // 44px touch target
@@ -1041,14 +1041,14 @@ const Select = React.forwardRef((props, ref) => {
     if (useNativeSelect) {
         return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "label", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("select", { ref: nativeSelectRef, value: value || '', onChange: (e) => onChange?.(e.target.value), disabled: disabled, className: `
               input w-full appearance-none pr-10
-              ${sizeClasses$b[effectiveSize]}
+              ${sizeClasses$d[effectiveSize]}
               ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
               ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
             `, "aria-labelledby": label ? labelId : undefined, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), "aria-required": required, children: [jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))), groups.map((group) => (jsxRuntime.jsx("optgroup", { label: group.label, children: group.options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }, group.label)))] }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-500 pointer-events-none" })] }), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
     }
     return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "label", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsx("div", { ref: selectRef, className: "relative", children: jsxRuntime.jsxs("button", { ref: buttonRef, type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `
             input w-full flex items-center justify-between px-3
-            ${sizeClasses$b[effectiveSize]}
+            ${sizeClasses$d[effectiveSize]}
             ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
             ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
           `, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? placeholder : undefined, "aria-activedescendant": activeDescendant, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), "aria-disabled": disabled, "aria-required": required, children: [jsxRuntime.jsxs("span", { className: `flex items-center gap-2 ${selectedOption ? 'text-ink-800' : 'text-ink-400'}`, children: [loading && jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-ink-500" }), !loading && selectedOption?.icon && jsxRuntime.jsx("span", { children: selectedOption.icon }), selectedOption ? selectedOption.label : placeholder] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [clearable && value && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
@@ -1193,7 +1193,7 @@ const Switch = React.forwardRef(({ checked, onChange, label, description, disabl
 Switch.displayName = 'Switch';
 
 // Size classes for textarea
-const sizeClasses$a = {
+const sizeClasses$c = {
     sm: 'px-3 py-2 text-sm',
     md: 'px-4 py-3 text-sm',
     lg: 'px-4 py-3.5 text-base', // Larger padding and text for mobile
@@ -1281,7 +1281,7 @@ const Textarea = React.forwardRef(({ label, helperText, validationState, validat
               bg-white bg-subtle-grain transition-all duration-200
               focus:outline-none focus:ring-2 ${getResizeClass()}
               disabled:bg-paper-100 disabled:text-ink-400 disabled:cursor-not-allowed disabled:opacity-60
-              ${sizeClasses$a[effectiveSize]}
+              ${sizeClasses$c[effectiveSize]}
               ${getValidationClasses()}
               ${loading ? 'pr-10' : ''}
               ${className}
@@ -3830,7 +3830,7 @@ var module$1 = {};
 var confetti = module$1.exports;
 module$1.exports.create;
 
-const defaultColors = ['#22c55e', '#3b82f6', '#a855f7', '#f59e0b', '#ef4444', '#ec4899'];
+const defaultColors$1 = ['#22c55e', '#3b82f6', '#a855f7', '#f59e0b', '#ef4444', '#ec4899'];
 /**
  * Celebration component for triggering confetti and other celebration animations.
  *
@@ -3846,7 +3846,7 @@ const defaultColors = ['#22c55e', '#3b82f6', '#a855f7', '#f59e0b', '#ef4444', '#
  * // Stars with custom colors
  * <Celebration trigger={true} type="stars" colors={['#ffd700', '#ffed4a']} />
  */
-function Celebration({ trigger = false, type = 'confetti', duration = 2000, particleCount = 100, spread = 70, origin = { x: 0.5, y: 0.6 }, colors = defaultColors, onComplete, enabled = true, }) {
+function Celebration({ trigger = false, type = 'confetti', duration = 2000, particleCount = 100, spread = 70, origin = { x: 0.5, y: 0.6 }, colors = defaultColors$1, onComplete, enabled = true, }) {
     const animationRef = React.useRef(null);
     const endTimeRef = React.useRef(0);
     const fireConfetti = React.useCallback(() => {
@@ -3949,7 +3949,7 @@ function Celebration({ trigger = false, type = 'confetti', duration = 2000, part
  */
 function useCelebration() {
     const celebrate = React.useCallback((options) => {
-        const { type = 'confetti', particleCount = 100, spread = 70, origin = { x: 0.5, y: 0.6 }, colors = defaultColors, duration = 2000, } = options || {};
+        const { type = 'confetti', particleCount = 100, spread = 70, origin = { x: 0.5, y: 0.6 }, colors = defaultColors$1, duration = 2000, } = options || {};
         switch (type) {
             case 'fireworks': {
                 const end = Date.now() + duration;
@@ -4610,7 +4610,7 @@ function BottomSheetActions({ children, className = '' }) {
 
 // Selector for all focusable elements
 const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const sizeClasses$9 = {
+const sizeClasses$b = {
     sm: 'max-w-md',
     md: 'max-w-lg',
     lg: 'max-w-2xl',
@@ -4799,7 +4799,7 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
         return reactDom.createPortal(jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: onClose, title: title, height: mobileHeight, showHandle: mobileShowHandle, showCloseButton: showCloseButton, children: children }), document.body);
     }
     // Render as standard modal on desktop
-    const modalContent = (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxRuntime.jsxs("div", { ref: modalRef, className: `${sizeClasses$9[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsxRuntime.jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] }), jsxRuntime.jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
+    const modalContent = (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxRuntime.jsxs("div", { ref: modalRef, className: `${sizeClasses$b[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsxRuntime.jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] }), jsxRuntime.jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
                         maxHeight: maxHeight || (scrollable ? 'calc(100vh - 200px)' : undefined),
                     }, children: children })] }) }));
     return reactDom.createPortal(modalContent, document.body);
@@ -5181,7 +5181,7 @@ function getAvatarColor(name) {
     return colors[Math.abs(hash) % colors.length];
 }
 // Get initials from name
-function getInitials(name) {
+function getInitials$1(name) {
     const parts = name.trim().split(/\s+/);
     if (parts.length >= 2) {
         return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
@@ -5222,7 +5222,7 @@ const CollaboratorAvatars = React.forwardRef(function CollaboratorAvatars({ coll
               ${collaborator.avatar ? '' : getAvatarColor(collaborator.name)}
               text-white font-medium
               shrink-0
-            `, style: { zIndex: visible.length - index }, children: collaborator.avatar ? (jsxRuntime.jsx("img", { src: collaborator.avatar, alt: collaborator.name, className: "w-full h-full object-cover" })) : (jsxRuntime.jsx("span", { children: getInitials(collaborator.name) })) }, `${collaborator.name}-${index}`))), hasOverflow && (jsxRuntime.jsxs("div", { className: `
+            `, style: { zIndex: visible.length - index }, children: collaborator.avatar ? (jsxRuntime.jsx("img", { src: collaborator.avatar, alt: collaborator.name, className: "w-full h-full object-cover" })) : (jsxRuntime.jsx("span", { children: getInitials$1(collaborator.name) })) }, `${collaborator.name}-${index}`))), hasOverflow && (jsxRuntime.jsxs("div", { className: `
               ${styles.container}
               ${styles.overlap}
               ${styles.border}
@@ -5870,7 +5870,7 @@ function Alert({ variant = 'info', title, children, onClose, className = '', act
     return (jsxRuntime.jsx("div", { className: `rounded-lg border p-4 ${styles.container} ${className}`, role: "alert", children: jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-0.5", children: styles.icon }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [title && jsxRuntime.jsx("h4", { className: "text-sm font-medium mb-1", children: title }), jsxRuntime.jsx("div", { className: "text-sm", children: children }), actions.length > 0 && (jsxRuntime.jsx("div", { className: "flex gap-2 mt-3", children: actions.map((action, index) => (jsxRuntime.jsx("button", { onClick: action.onClick, className: getButtonStyles(action.variant), children: action.label }, index))) }))] }), onClose && (jsxRuntime.jsx("button", { onClick: onClose, className: "flex-shrink-0 text-current opacity-70 hover:opacity-100 transition-opacity", "aria-label": "Close alert", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) }))] }) }));
 }
 
-const sizeClasses$8 = {
+const sizeClasses$a = {
     left: {
         sm: 'w-64',
         md: 'w-96',
@@ -5949,7 +5949,7 @@ function Drawer({ isOpen, onClose, title, children, placement = 'right', size =
     const isHorizontal = placement === 'left' || placement === 'right';
     return (jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex", children: [showOverlay && (jsxRuntime.jsx("div", { className: "fixed inset-0 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntime.jsxs("div", { className: `
           fixed ${placementClasses[placement]}
-          ${sizeClasses$8[placement][size]}
+          ${sizeClasses$a[placement][size]}
           bg-white border-paper-200 shadow-2xl
           ${isHorizontal ? 'border-r' : 'border-b'}
           ${animationClasses[placement].enter}
@@ -6091,14 +6091,14 @@ function useConfirmDialog() {
     };
 }
 
-const sizeClasses$7 = {
+const sizeClasses$9 = {
     sm: 'h-3.5 w-3.5',
     md: 'h-4 w-4',
     lg: 'h-5 w-5',
 };
 function HelpTooltip({ content, icon = 'help', size = 'md', position = 'top', className = '', }) {
     const IconComponent = icon === 'info' ? lucideReact.Info : lucideReact.HelpCircle;
-    return (jsxRuntime.jsx(Tooltip, { content: content, position: position, children: jsxRuntime.jsx("span", { className: `inline-flex items-center justify-center text-ink-400 hover:text-ink-600 cursor-help transition-colors ${className}`, role: "button", "aria-label": "Help", tabIndex: 0, children: jsxRuntime.jsx(IconComponent, { className: sizeClasses$7[size] }) }) }));
+    return (jsxRuntime.jsx(Tooltip, { content: content, position: position, children: jsxRuntime.jsx("span", { className: `inline-flex items-center justify-center text-ink-400 hover:text-ink-600 cursor-help transition-colors ${className}`, role: "button", "aria-label": "Help", tabIndex: 0, children: jsxRuntime.jsx(IconComponent, { className: sizeClasses$9[size] }) }) }));
 }
 
 /**
@@ -8514,7 +8514,7 @@ const variantClasses$4 = {
         selected: 'bg-accent-200 border-accent-400 ring-2 ring-accent-300',
     },
 };
-const sizeClasses$6 = {
+const sizeClasses$8 = {
     sm: {
         container: 'h-6 px-2 text-xs gap-1',
         icon: 'h-3 w-3',
@@ -8565,7 +8565,7 @@ const gapClasses = {
  */
 function Chip({ children, variant = 'secondary', size = 'md', onClose, icon, disabled = false, className = '', onClick, selected = false, maxWidth, chipKey, }) {
     const variantStyle = variantClasses$4[variant];
-    const sizeStyle = sizeClasses$6[size];
+    const sizeStyle = sizeClasses$8[size];
     const isClickable = !disabled && (onClick || onClose);
     return (jsxRuntime.jsxs("div", { className: `
         inline-flex items-center rounded-full border font-medium
@@ -8680,7 +8680,7 @@ function ChipGroup({ children, direction = 'horizontal', wrap = false, gap = 'sm
       `, role: selectionMode !== 'none' ? 'group' : undefined, "aria-label": selectionMode !== 'none' ? 'Chip selection group' : undefined, children: enhancedChildren }));
 }
 
-const sizeClasses$5 = {
+const sizeClasses$7 = {
     sm: {
         item: 'py-1.5 px-2',
         text: 'text-sm',
@@ -8813,7 +8813,7 @@ function CheckboxList({ items, selectedKeys, onSelectionChange, groupLabels = {}
             onSelectionChange(Array.from(newKeys));
         }
     };
-    const sizeStyle = sizeClasses$5[size];
+    const sizeStyle = sizeClasses$7[size];
     const enabledItems = filteredItems.filter(item => !item.disabled);
     const allSelected = enabledItems.length > 0 && enabledItems.every(item => selectedKeys.includes(item.key));
     const someSelected = enabledItems.some(item => selectedKeys.includes(item.key)) && !allSelected;
@@ -8852,7 +8852,7 @@ function CheckboxListItemRow({ item, selected, onToggle, size, sizeStyle, indent
       `, children: jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx(Checkbox, { checked: selected, onChange: onToggle, disabled: item.disabled, size: size }), jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [jsxRuntime.jsx("span", { className: sizeStyle.text, children: item.label }), item.description && (jsxRuntime.jsx("span", { className: `${sizeStyle.description} text-ink-500`, children: item.description }))] })] }) }));
 }
 
-const sizeClasses$4 = {
+const sizeClasses$6 = {
     sm: {
         container: 'text-sm',
         item: 'py-1.5 px-2',
@@ -8975,7 +8975,7 @@ function SearchableList({ items, searchPlaceholder = 'Search...', searchValue: c
             }
         }
     }, [highlightedIndex]);
-    const sizeStyle = sizeClasses$4[size];
+    const sizeStyle = sizeClasses$6[size];
     const resultCountText = formatResultCount
         ? formatResultCount(filteredItems.length, items.length)
         : `${filteredItems.length} of ${items.length}`;
@@ -9000,7 +9000,7 @@ function SearchableList({ items, searchPlaceholder = 'Search...', searchValue: c
                     })] })] }));
 }
 
-const sizeClasses$3 = {
+const sizeClasses$5 = {
     sm: {
         input: 'h-8 px-2 text-sm',
         button: 'h-8 w-8',
@@ -9024,7 +9024,7 @@ const NumberInput = React.forwardRef((props, ref) => {
     const { value = 0, onChange, min, max, step = 1, disabled = false, readOnly = false, label, helperText, error, required = false, size = 'md', className = '', placeholder, id, name, precision, formatValue, } = props;
     const [internalValue, setInternalValue] = React.useState(String(value));
     const [isFocused, setIsFocused] = React.useState(false);
-    const sizeStyle = sizeClasses$3[size];
+    const sizeStyle = sizeClasses$5[size];
     // Generate unique IDs for ARIA
     const uniqueId = React.useId();
     const inputId = id || uniqueId;
@@ -9869,7 +9869,7 @@ function PriorityAlertBanner({ alerts, onDismiss, sticky = false, className = ''
       `, role: "alert", "aria-live": "polite", children: alerts.map(renderAlert) }));
 }
 
-const sizeClasses$2 = {
+const sizeClasses$4 = {
     sm: {
         header: 'h-10 px-3',
         text: 'text-sm',
@@ -9977,7 +9977,7 @@ function ExpandablePanel({ collapsedContent, children, position = 'bottom', mode
         document.addEventListener('keydown', handleEscape);
         return () => document.removeEventListener('keydown', handleEscape);
     }, [closeOnEscape, expanded]);
-    const sizeStyle = sizeClasses$2[size];
+    const sizeStyle = sizeClasses$4[size];
     const variantStyle = variantClasses$1[variant];
     const heightValue = typeof expandedHeight === 'number' ? `${expandedHeight}px` : expandedHeight;
     const maxWidthValue = maxWidth
@@ -11870,6 +11870,639 @@ function StepIndicator({ steps, currentStep, variant = 'horizontal', onStepClick
             }) }) }));
 }
 
+// =============================================================================
+// Color Mappings
+// =============================================================================
+const stageColors = {
+    slate: { bg: 'bg-slate-50', text: 'text-slate-700', border: 'border-slate-200', activeBg: 'bg-slate-100' },
+    blue: { bg: 'bg-blue-50', text: 'text-blue-700', border: 'border-blue-200', activeBg: 'bg-blue-100' },
+    indigo: { bg: 'bg-indigo-50', text: 'text-indigo-700', border: 'border-indigo-200', activeBg: 'bg-indigo-100' },
+    purple: { bg: 'bg-purple-50', text: 'text-purple-700', border: 'border-purple-200', activeBg: 'bg-purple-100' },
+    green: { bg: 'bg-green-50', text: 'text-green-700', border: 'border-green-200', activeBg: 'bg-green-100' },
+    red: { bg: 'bg-red-50', text: 'text-red-700', border: 'border-red-200', activeBg: 'bg-red-100' },
+    yellow: { bg: 'bg-yellow-50', text: 'text-yellow-700', border: 'border-yellow-200', activeBg: 'bg-yellow-100' },
+    orange: { bg: 'bg-orange-50', text: 'text-orange-700', border: 'border-orange-200', activeBg: 'bg-orange-100' },
+    teal: { bg: 'bg-teal-50', text: 'text-teal-700', border: 'border-teal-200', activeBg: 'bg-teal-100' },
+    primary: { bg: 'bg-primary-50', text: 'text-primary-700', border: 'border-primary-200', activeBg: 'bg-primary-100' },
+};
+const healthIndicator = {
+    good: 'bg-success-500',
+    warning: 'bg-warning-500',
+    critical: 'bg-error-500',
+};
+const sizeClasses$3 = {
+    sm: { wrapper: 'py-2 px-3', count: 'text-lg', label: 'text-xs', chevron: 'h-3 w-3' },
+    md: { wrapper: 'py-3 px-4', count: 'text-2xl', label: 'text-sm', chevron: 'h-4 w-4' },
+    lg: { wrapper: 'py-4 px-5', count: 'text-3xl', label: 'text-base', chevron: 'h-5 w-5' },
+};
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * ProcessIndicator — Horizontal process flow visualization
+ *
+ * Shows stages as connected blocks with names, item counts, and health coloring.
+ * Stages are clickable for filtering. Used at the top of process views
+ * (Sales Pipeline, Support Center, Commission Lifecycle).
+ */
+function ProcessIndicator({ stages, activeStageId, onStageClick, showConversion = false, size = 'md', className = '', }) {
+    const sizes = sizeClasses$3[size];
+    const totalCount = stages.reduce((sum, s) => sum + s.count, 0);
+    return (jsxRuntime.jsxs("div", { className: `flex items-stretch overflow-x-auto ${className}`, role: "navigation", "aria-label": "Process stages", children: [stages.map((stage, index) => {
+                const colors = stageColors[stage.color || 'slate'];
+                const isActive = stage.id === activeStageId;
+                const isClickable = !!onStageClick;
+                const conversionRate = showConversion && index > 0 && stages[index - 1].count > 0
+                    ? Math.round((stage.count / stages[index - 1].count) * 100)
+                    : null;
+                return (jsxRuntime.jsxs(React.Fragment, { children: [index > 0 && (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center px-1 flex-shrink-0", children: [jsxRuntime.jsx(lucideReact.ChevronRight, { className: `${sizes.chevron} text-ink-300` }), conversionRate !== null && (jsxRuntime.jsxs("span", { className: "text-[10px] text-ink-400 mt-0.5", children: [conversionRate, "%"] }))] })), jsxRuntime.jsxs("button", { type: "button", onClick: () => onStageClick?.(stage.id), disabled: !isClickable, className: `
+                flex flex-col items-center justify-center ${sizes.wrapper}
+                rounded-lg border transition-all min-w-0 flex-1
+                ${isActive ? `${colors.activeBg} ${colors.border} border-2 shadow-sm` : `${colors.bg} ${colors.border}`}
+                ${isClickable ? 'cursor-pointer hover:shadow-sm hover:border-2' : 'cursor-default'}
+              `, "aria-current": isActive ? 'step' : undefined, "aria-label": `${stage.name}: ${stage.count} items`, children: [stage.health && (jsxRuntime.jsx("div", { className: `w-2 h-2 rounded-full ${healthIndicator[stage.health]} mb-1` })), stage.icon && (jsxRuntime.jsx("div", { className: `${colors.text} mb-1 opacity-60`, children: stage.icon })), jsxRuntime.jsx("span", { className: `${sizes.count} font-bold ${colors.text} leading-none`, children: stage.count.toLocaleString() }), jsxRuntime.jsx("span", { className: `${sizes.label} ${colors.text} opacity-80 mt-1 whitespace-nowrap`, children: stage.name })] })] }, stage.id));
+            }), stages.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "flex items-center justify-center px-2 flex-shrink-0", children: jsxRuntime.jsx("div", { className: "w-px h-8 bg-ink-200" }) }), jsxRuntime.jsxs("div", { className: `flex flex-col items-center justify-center ${sizes.wrapper} min-w-0`, children: [jsxRuntime.jsx("span", { className: `${sizes.count} font-bold text-ink-900 leading-none`, children: totalCount.toLocaleString() }), jsxRuntime.jsx("span", { className: `${sizes.label} text-ink-500 mt-1`, children: "Total" })] })] }))] }));
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+const statusColors$1 = {
+    slate: { bg: 'bg-slate-100', text: 'text-slate-700' },
+    blue: { bg: 'bg-blue-100', text: 'text-blue-700' },
+    indigo: { bg: 'bg-indigo-100', text: 'text-indigo-700' },
+    purple: { bg: 'bg-purple-100', text: 'text-purple-700' },
+    green: { bg: 'bg-green-100', text: 'text-green-700' },
+    red: { bg: 'bg-red-100', text: 'text-red-700' },
+    yellow: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
+    orange: { bg: 'bg-orange-100', text: 'text-orange-700' },
+    teal: { bg: 'bg-teal-100', text: 'text-teal-700' },
+};
+function getInitials(name) {
+    const parts = name.trim().split(/\s+/);
+    if (parts.length >= 2)
+        return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+    return name.slice(0, 2).toUpperCase();
+}
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * EntityCard — Standardized card for pipeline/board views
+ *
+ * Renders a compact card with title, value, status, assignee, and metadata.
+ * Designed for use in KanbanBoard columns and process view lists.
+ */
+function EntityCard({ title, subtitle, value, status, statusColor = 'slate', assignee, progress, metadata, icon, onClick, onContextMenu, selected = false, draggable = false, size = 'md', className = '', confidence, }) {
+    const isCompact = size === 'sm';
+    const colors = statusColors$1[statusColor];
+    return (jsxRuntime.jsxs("div", { onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick ? (e) => { if (e.key === 'Enter' || e.key === ' ')
+            onClick(); } : undefined, className: `
+        group relative rounded-lg border bg-white dark:bg-ink-900
+        ${selected ? 'border-primary-400 ring-2 ring-primary-100' : 'border-paper-200 dark:border-ink-700'}
+        ${onClick ? 'cursor-pointer hover:shadow-md hover:border-primary-300 transition-all' : ''}
+        ${draggable ? 'cursor-grab active:cursor-grabbing' : ''}
+        ${isCompact ? 'p-3' : 'p-4'}
+        ${className}
+      `, children: [draggable && (jsxRuntime.jsx("div", { className: "absolute left-1 top-1/2 -translate-y-1/2 w-1 h-6 rounded-full bg-ink-200 opacity-0 group-hover:opacity-100 transition-opacity" })), jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [icon && (jsxRuntime.jsx("div", { className: "flex-shrink-0 text-ink-400 mt-0.5", children: icon })), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsx("h4", { className: `font-medium text-ink-900 dark:text-ink-100 truncate ${isCompact ? 'text-sm' : 'text-base'}`, children: title }), subtitle && (jsxRuntime.jsx("p", { className: `text-ink-500 dark:text-ink-400 truncate ${isCompact ? 'text-xs' : 'text-sm'}`, children: subtitle }))] }), onContextMenu && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => { e.stopPropagation(); onContextMenu(); }, className: "flex-shrink-0 opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-paper-100 transition-opacity", "aria-label": "More options", children: jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-4 w-4 text-ink-400" }) }))] }), (value || status) && (jsxRuntime.jsxs("div", { className: `flex items-center justify-between gap-2 ${isCompact ? 'mt-2' : 'mt-3'}`, children: [value && (jsxRuntime.jsx("span", { className: `font-semibold text-ink-900 dark:text-ink-100 ${isCompact ? 'text-sm' : 'text-lg'}`, children: value })), status && colors && (jsxRuntime.jsx("span", { className: `inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${colors.bg} ${colors.text}`, children: status }))] })), metadata && metadata.length > 0 && (jsxRuntime.jsx("div", { className: `grid grid-cols-2 gap-x-3 gap-y-1 ${isCompact ? 'mt-2' : 'mt-3'}`, children: metadata.map((item, idx) => (jsxRuntime.jsxs("div", { className: "min-w-0", children: [jsxRuntime.jsx("span", { className: "text-xs text-ink-400", children: item.label }), jsxRuntime.jsx("div", { className: "text-xs text-ink-600 dark:text-ink-300 truncate", children: item.value })] }, idx))) })), (progress !== undefined || assignee || confidence !== undefined) && (jsxRuntime.jsxs("div", { className: `flex items-center justify-between gap-2 ${isCompact ? 'mt-2' : 'mt-3'}`, children: [progress !== undefined && (jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx("div", { className: "h-1.5 bg-paper-200 rounded-full overflow-hidden", children: jsxRuntime.jsx("div", { className: "h-full bg-primary-500 rounded-full transition-all", style: { width: `${Math.min(100, Math.max(0, progress))}%` } }) }) })), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [confidence !== undefined && (jsxRuntime.jsxs("span", { className: `text-xs px-1.5 py-0.5 rounded ${confidence >= 80 ? 'bg-success-50 text-success-700' :
+                                    confidence >= 50 ? 'bg-warning-50 text-warning-700' :
+                                        'bg-error-50 text-error-700'}`, children: [confidence, "%"] })), assignee && (jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-primary-100 flex items-center justify-center flex-shrink-0", title: assignee, children: jsxRuntime.jsx("span", { className: "text-xs font-medium text-primary-700", children: getInitials(assignee) }) }))] })] }))] }));
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * SplitPane — Resizable two-panel layout
+ *
+ * Renders a left/primary panel and right/secondary panel with a draggable divider.
+ * Used for list+detail patterns (case queue + case detail, statements + line items).
+ *
+ * The right panel can be toggled on/off via `showRight` prop.
+ */
+function SplitPane({ left, right, defaultSplit = 0.4, minLeftWidth = 200, minRightWidth = 300, resizable = true, showRight = true, orientation = 'horizontal', onSplitChange, className = '', }) {
+    const containerRef = React.useRef(null);
+    const [splitRatio, setSplitRatio] = React.useState(defaultSplit);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const handleMouseDown = React.useCallback((e) => {
+        if (!resizable)
+            return;
+        e.preventDefault();
+        setIsDragging(true);
+    }, [resizable]);
+    React.useEffect(() => {
+        if (!isDragging)
+            return;
+        const handleMouseMove = (e) => {
+            if (!containerRef.current)
+                return;
+            const rect = containerRef.current.getBoundingClientRect();
+            const isHorizontal = orientation === 'horizontal';
+            const containerSize = isHorizontal ? rect.width : rect.height;
+            const position = isHorizontal ? e.clientX - rect.left : e.clientY - rect.top;
+            // Enforce min widths
+            const minLeft = minLeftWidth / containerSize;
+            const maxLeft = 1 - (minRightWidth / containerSize);
+            const newRatio = Math.min(maxLeft, Math.max(minLeft, position / containerSize));
+            setSplitRatio(newRatio);
+            onSplitChange?.(newRatio);
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, orientation, minLeftWidth, minRightWidth, onSplitChange]);
+    const isHorizontal = orientation === 'horizontal';
+    if (!showRight) {
+        return (jsxRuntime.jsx("div", { className: `h-full ${className}`, children: left }));
+    }
+    const leftSize = `${(splitRatio * 100).toFixed(1)}%`;
+    const rightSize = `${((1 - splitRatio) * 100).toFixed(1)}%`;
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: `
+        flex h-full overflow-hidden
+        ${isHorizontal ? 'flex-row' : 'flex-col'}
+        ${isDragging ? 'select-none' : ''}
+        ${className}
+      `, children: [jsxRuntime.jsx("div", { className: "overflow-auto", style: isHorizontal ? { width: leftSize } : { height: leftSize }, children: left }), jsxRuntime.jsx("div", { onMouseDown: handleMouseDown, className: `
+          flex-shrink-0 bg-paper-200 dark:bg-ink-700
+          ${isHorizontal ? 'w-px hover:w-1' : 'h-px hover:h-1'}
+          ${resizable ? 'cursor-col-resize hover:bg-primary-300 transition-all' : ''}
+          ${isDragging ? 'bg-primary-400 w-1' : ''}
+        `, role: "separator", "aria-orientation": isHorizontal ? 'vertical' : 'horizontal' }), jsxRuntime.jsx("div", { className: "overflow-auto", style: isHorizontal ? { width: rightSize } : { height: rightSize }, children: right })] }));
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+const priorityConfig = {
+    critical: { bg: 'bg-red-50', text: 'text-red-700', label: 'Critical', dot: 'bg-red-500' },
+    high: { bg: 'bg-orange-50', text: 'text-orange-700', label: 'High', dot: 'bg-orange-500' },
+    medium: { bg: 'bg-yellow-50', text: 'text-yellow-700', label: 'Medium', dot: 'bg-yellow-500' },
+    low: { bg: 'bg-blue-50', text: 'text-blue-700', label: 'Low', dot: 'bg-blue-500' },
+};
+const statusColors = {
+    slate: { bg: 'bg-slate-100', text: 'text-slate-700' },
+    blue: { bg: 'bg-blue-100', text: 'text-blue-700' },
+    indigo: { bg: 'bg-indigo-100', text: 'text-indigo-700' },
+    purple: { bg: 'bg-purple-100', text: 'text-purple-700' },
+    green: { bg: 'bg-green-100', text: 'text-green-700' },
+    red: { bg: 'bg-red-100', text: 'text-red-700' },
+    yellow: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
+    orange: { bg: 'bg-orange-100', text: 'text-orange-700' },
+    teal: { bg: 'bg-teal-100', text: 'text-teal-700' },
+};
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * CaseQueueItem — Priority-sorted case card for support queue views
+ *
+ * Shows case subject, priority indicator, status, assignee, and SLA countdown.
+ * Designed for use in the Support Center's case queue list.
+ */
+function CaseQueueItem({ caseNumber, subject, priority, status, statusColor = 'slate', assignee, account, slaBreach = false, slaTimeRemaining, onClick, selected = false, className = '', }) {
+    const prio = priorityConfig[priority] || priorityConfig.medium;
+    const stColor = statusColors[statusColor];
+    return (jsxRuntime.jsxs("div", { onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick ? (e) => { if (e.key === 'Enter' || e.key === ' ')
+            onClick(); } : undefined, className: `
+        group relative rounded-lg border bg-white dark:bg-ink-900 p-4
+        ${selected ? 'border-primary-400 ring-2 ring-primary-100' : 'border-paper-200 dark:border-ink-700'}
+        ${onClick ? 'cursor-pointer hover:shadow-md hover:border-primary-300 transition-all' : ''}
+        ${slaBreach ? 'border-l-4 border-l-red-500' : ''}
+        ${className}
+      `, "aria-label": `Case ${caseNumber}: ${subject}`, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 mb-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "text-xs font-mono text-ink-400", children: caseNumber }), jsxRuntime.jsxs("span", { className: `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${prio.bg} ${prio.text}`, children: [jsxRuntime.jsx("span", { className: `w-1.5 h-1.5 rounded-full ${prio.dot}` }), prio.label] })] }), (slaTimeRemaining || slaBreach) && (jsxRuntime.jsxs("div", { className: `flex items-center gap-1 text-xs ${slaBreach ? 'text-red-600 font-medium' : 'text-ink-500'}`, children: [slaBreach ? jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3 w-3" }) : jsxRuntime.jsx(lucideReact.Clock, { className: "h-3 w-3" }), jsxRuntime.jsx("span", { children: slaBreach ? 'SLA Breached' : slaTimeRemaining })] }))] }), jsxRuntime.jsx("h4", { className: "text-sm font-medium text-ink-900 dark:text-ink-100 mb-1 line-clamp-2", children: subject }), account && (jsxRuntime.jsx("p", { className: "text-xs text-ink-500 mb-2", children: account })), jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [stColor && (jsxRuntime.jsx("span", { className: `inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${stColor.bg} ${stColor.text}`, children: status })), assignee && (jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-xs text-ink-500", children: [jsxRuntime.jsx(lucideReact.User, { className: "h-3 w-3" }), jsxRuntime.jsx("span", { children: assignee })] }))] })] }));
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+const statusConfig$1 = {
+    'on-track': { icon: jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4" }), color: 'text-success-600', bg: 'bg-success-50', text: 'text-success-700', label: 'On Track' },
+    'at-risk': { icon: jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4" }), color: 'text-warning-600', bg: 'bg-warning-50', text: 'text-warning-700', label: 'At Risk' },
+    'breached': { icon: jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4" }), color: 'text-error-600', bg: 'bg-error-50', text: 'text-error-700', label: 'Breached' },
+    'met': { icon: jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-4 w-4" }), color: 'text-success-600', bg: 'bg-success-50', text: 'text-success-700', label: 'Met' },
+};
+const progressColors = {
+    'on-track': 'bg-success-500',
+    'at-risk': 'bg-warning-500',
+    'breached': 'bg-error-500',
+    'met': 'bg-success-500',
+};
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * SLAIndicator — Visual SLA countdown with urgency coloring
+ *
+ * Shows time remaining, progress bar, and status icon.
+ * Used in Support Center case queue items and case detail views.
+ */
+function SLAIndicator({ timeRemaining, totalMinutes, elapsedMinutes, status, size = 'md', compact = false, className = '', }) {
+    const config = statusConfig$1[status] || statusConfig$1['on-track'];
+    const progressPercent = totalMinutes && elapsedMinutes
+        ? Math.min(100, (elapsedMinutes / totalMinutes) * 100)
+        : undefined;
+    if (compact) {
+        return (jsxRuntime.jsxs("span", { className: `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${config.bg} ${config.text} ${className}`, children: [config.icon, jsxRuntime.jsx("span", { children: timeRemaining || config.label })] }));
+    }
+    const sizeClasses = {
+        sm: { text: 'text-sm', icon: 'h-4 w-4', bar: 'h-1' },
+        md: { text: 'text-base', icon: 'h-5 w-5', bar: 'h-1.5' },
+        lg: { text: 'text-lg', icon: 'h-6 w-6', bar: 'h-2' },
+    };
+    const sizes = sizeClasses[size];
+    return (jsxRuntime.jsxs("div", { className: `${className}`, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 mb-1", children: [jsxRuntime.jsxs("div", { className: `flex items-center gap-1.5 ${config.color}`, children: [config.icon, jsxRuntime.jsx("span", { className: `${sizes.text} font-medium`, children: config.label })] }), timeRemaining && (jsxRuntime.jsx("span", { className: `${sizes.text} font-mono ${config.color}`, children: timeRemaining }))] }), progressPercent !== undefined && (jsxRuntime.jsx("div", { className: `${sizes.bar} bg-paper-200 rounded-full overflow-hidden`, children: jsxRuntime.jsx("div", { className: `h-full ${progressColors[status]} rounded-full transition-all`, style: { width: `${progressPercent}%` } }) }))] }));
+}
+
+// =============================================================================
+// Config
+// =============================================================================
+const qualityConfig = {
+    exact: { icon: jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" }), color: 'text-success-600', dot: 'bg-success-500', label: 'Exact Match' },
+    close: { icon: jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" }), color: 'text-blue-600', dot: 'bg-blue-500', label: 'Close Match' },
+    possible: { icon: jsxRuntime.jsx(lucideReact.HelpCircle, { className: "h-3 w-3" }), color: 'text-warning-600', dot: 'bg-warning-500', label: 'Possible Match' },
+    unmatched: { icon: jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }), color: 'text-error-600', dot: 'bg-error-500', label: 'Unmatched' },
+};
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * MatchIndicator — Match quality visualization for reconciliation
+ *
+ * Shows a color-coded dot/icon indicating match quality between
+ * statement lines and invoices. Used in the Reconciliation Hub.
+ */
+function MatchIndicator({ quality, confidence, showLabel = false, size = 'md', className = '', }) {
+    const config = qualityConfig[quality] || qualityConfig.unmatched;
+    const sizeClasses = {
+        sm: { dot: 'w-2 h-2', text: 'text-xs', icon: 'h-3 w-3' },
+        md: { dot: 'w-2.5 h-2.5', text: 'text-sm', icon: 'h-4 w-4' },
+        lg: { dot: 'w-3 h-3', text: 'text-base', icon: 'h-5 w-5' },
+    };
+    const sizes = sizeClasses[size];
+    return (jsxRuntime.jsxs("div", { className: `inline-flex items-center gap-1.5 ${className}`, title: config.label, children: [jsxRuntime.jsx("span", { className: `${sizes.dot} rounded-full ${config.dot} flex-shrink-0` }), showLabel && (jsxRuntime.jsx("span", { className: `${sizes.text} ${config.color} font-medium`, children: config.label })), confidence !== undefined && (jsxRuntime.jsxs("span", { className: `${sizes.text} text-ink-400`, children: [confidence, "%"] }))] }));
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+function formatValue(value, format, currency) {
+    switch (format) {
+        case 'currency':
+            return new Intl.NumberFormat('en-US', { style: 'currency', currency, minimumFractionDigits: 2 }).format(value);
+        case 'percentage':
+            return `${value.toFixed(1)}%`;
+        default:
+            return value.toLocaleString();
+    }
+}
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * VarianceDisplay — Expected vs actual comparison with tolerance coloring
+ *
+ * Shows the difference between expected and actual values, color-coded
+ * by tolerance thresholds. Used in the Reconciliation Hub for variance analysis.
+ */
+function VarianceDisplay({ expected, actual, format = 'currency', currency = 'USD', tolerancePercent = 1, showValues = true, size = 'md', className = '', }) {
+    const variance = actual - expected;
+    const variancePercent = expected !== 0 ? (variance / expected) * 100 : 0;
+    const absVariancePercent = Math.abs(variancePercent);
+    const isWithinTolerance = absVariancePercent <= tolerancePercent;
+    const isOver = variance > 0;
+    const isExact = variance === 0;
+    const colorClass = isExact ? 'text-success-600' :
+        isWithinTolerance ? 'text-ink-600' :
+            isOver ? 'text-blue-600' : 'text-error-600';
+    const bgClass = isExact ? 'bg-success-50' :
+        isWithinTolerance ? 'bg-paper-100' :
+            isOver ? 'bg-blue-50' : 'bg-error-50';
+    const sizeClasses = {
+        sm: { text: 'text-xs', value: 'text-sm' },
+        md: { text: 'text-sm', value: 'text-base' },
+        lg: { text: 'text-base', value: 'text-lg' },
+    };
+    const sizes = sizeClasses[size];
+    const VarianceIcon = isExact ? lucideReact.Minus : isOver ? lucideReact.ArrowUp : lucideReact.ArrowDown;
+    return (jsxRuntime.jsxs("div", { className: `${className}`, children: [showValues && (jsxRuntime.jsxs("div", { className: `flex items-center justify-between gap-4 mb-1 ${sizes.text}`, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { className: "text-ink-400", children: "Expected: " }), jsxRuntime.jsx("span", { className: "text-ink-700 font-medium", children: formatValue(expected, format, currency) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { className: "text-ink-400", children: "Actual: " }), jsxRuntime.jsx("span", { className: "text-ink-700 font-medium", children: formatValue(actual, format, currency) })] })] })), jsxRuntime.jsxs("div", { className: `inline-flex items-center gap-1 px-2 py-1 rounded ${bgClass} ${colorClass}`, children: [jsxRuntime.jsx(VarianceIcon, { className: "h-3 w-3" }), jsxRuntime.jsxs("span", { className: `${sizes.value} font-medium`, children: [variance >= 0 ? '+' : '', formatValue(variance, format, currency)] }), jsxRuntime.jsxs("span", { className: `${sizes.text} opacity-75`, children: ["(", variancePercent >= 0 ? '+' : '', variancePercent.toFixed(1), "%)"] }), isWithinTolerance && !isExact && (jsxRuntime.jsx("span", { className: `${sizes.text} text-ink-400 ml-1`, children: "within tolerance" }))] })] }));
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+const priorityStyles = {
+    high: { border: 'border-l-4 border-l-red-400', dot: 'bg-red-500' },
+    medium: { border: 'border-l-4 border-l-yellow-400', dot: 'bg-yellow-500' },
+    low: { border: 'border-l-4 border-l-blue-400', dot: 'bg-blue-500' },
+};
+const buttonVariants$1 = {
+    primary: 'bg-primary-600 text-white hover:bg-primary-700',
+    secondary: 'bg-paper-100 text-ink-700 hover:bg-paper-200 border border-paper-300',
+    danger: 'bg-error-600 text-white hover:bg-error-700',
+    ghost: 'text-ink-600 hover:bg-paper-100',
+};
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * ActionCard — Approval workflow card with action buttons
+ *
+ * Shows what needs action, why it was flagged, and provides quick-action buttons.
+ * Used in the Approvals & Review queue across all process domains.
+ */
+function ActionCard({ title, description, entityType, entityId, onEntityClick, reasoning, actions, priority, icon, confidence, timestamp, selected = false, className = '', }) {
+    const prioStyle = priority ? priorityStyles[priority] : undefined;
+    return (jsxRuntime.jsxs("div", { className: `
+        rounded-lg border bg-white dark:bg-ink-900 p-4
+        ${selected ? 'border-primary-400 ring-2 ring-primary-100' : 'border-paper-200 dark:border-ink-700'}
+        ${prioStyle?.border || ''}
+        ${className}
+      `, children: [jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [icon && (jsxRuntime.jsx("div", { className: "flex-shrink-0 text-ink-400 mt-0.5", children: icon })), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("h4", { className: "text-sm font-medium text-ink-900 dark:text-ink-100", children: title }), priority && prioStyle && (jsxRuntime.jsx("span", { className: `w-2 h-2 rounded-full ${prioStyle.dot} flex-shrink-0` }))] }), description && (jsxRuntime.jsx("p", { className: "text-sm text-ink-500 mt-0.5", children: description }))] }), confidence !== undefined && (jsxRuntime.jsxs("span", { className: `text-xs px-2 py-0.5 rounded flex-shrink-0 ${confidence >= 80 ? 'bg-success-50 text-success-700' :
+                            confidence >= 50 ? 'bg-warning-50 text-warning-700' :
+                                'bg-error-50 text-error-700'}`, children: [confidence, "% confidence"] }))] }), entityType && entityId && (jsxRuntime.jsx("div", { className: "mb-2", children: jsxRuntime.jsxs("button", { type: "button", onClick: onEntityClick, className: "text-xs text-primary-600 hover:text-primary-700 hover:underline", children: [entityType, " #", entityId] }) })), reasoning && (jsxRuntime.jsx("div", { className: "mb-3 px-3 py-2 bg-paper-50 dark:bg-ink-800 rounded text-xs text-ink-600 dark:text-ink-400 border-l-2 border-ink-200", children: reasoning })), jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: actions.map((action, idx) => (jsxRuntime.jsxs("button", { type: "button", onClick: action.onClick, disabled: action.disabled, className: `
+                inline-flex items-center gap-1 px-3 py-1.5 rounded text-xs font-medium
+                transition-colors disabled:opacity-50 disabled:cursor-not-allowed
+                ${buttonVariants$1[action.variant || 'secondary']}
+              `, children: [action.icon, action.label] }, idx))) }), timestamp && (jsxRuntime.jsx("span", { className: "text-xs text-ink-400 flex-shrink-0", children: timestamp }))] })] }));
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+const domainColors = {
+    sales: { bg: 'bg-blue-50', text: 'text-blue-700' },
+    support: { bg: 'bg-teal-50', text: 'text-teal-700' },
+    commission: { bg: 'bg-green-50', text: 'text-green-700' },
+    reconciliation: { bg: 'bg-indigo-50', text: 'text-indigo-700' },
+};
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * SystemActionEntry — Activity feed entry showing what the system did
+ *
+ * Each entry shows: action description, reasoning, affected entity (clickable),
+ * revert button (if applicable), confidence indicator, and timestamp.
+ * Used in the Activity Center system action log.
+ */
+function SystemActionEntry({ actionDescription, reasoning, entityType, entityLabel, onEntityClick, isRevertible = false, onRevert, confidence, actor = 'System', timestamp, actionType, domain, icon, reverted = false, className = '', }) {
+    const domainColor = domain ? domainColors[domain] : undefined;
+    return (jsxRuntime.jsxs("div", { className: `
+        group relative flex gap-3 p-4 rounded-lg border
+        bg-white dark:bg-ink-900 border-paper-200 dark:border-ink-700
+        ${reverted ? 'opacity-60' : ''}
+        ${className}
+      `, children: [jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-0.5 text-ink-400", children: icon || jsxRuntime.jsx("div", { className: "w-5 h-5 rounded-full bg-primary-100 flex items-center justify-center", children: jsxRuntime.jsx("span", { className: "text-xs text-primary-600", children: "A" }) }) }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [jsxRuntime.jsx("p", { className: `text-sm text-ink-900 dark:text-ink-100 ${reverted ? 'line-through' : ''}`, children: actionDescription }), reverted && (jsxRuntime.jsx("span", { className: "text-xs px-2 py-0.5 rounded bg-paper-100 text-ink-500 flex-shrink-0", children: "Reverted" }))] }), jsxRuntime.jsx("p", { className: "text-xs text-ink-500 mt-1", children: reasoning }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-2 flex-wrap", children: [jsxRuntime.jsxs("button", { type: "button", onClick: onEntityClick, className: "inline-flex items-center gap-1 text-xs text-primary-600 hover:text-primary-700 hover:underline", children: [entityType, ": ", entityLabel, jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3" })] }), domainColor && domain && (jsxRuntime.jsx("span", { className: `text-xs px-1.5 py-0.5 rounded ${domainColor.bg} ${domainColor.text}`, children: domain })), confidence !== undefined && (jsxRuntime.jsxs("span", { className: `text-xs px-1.5 py-0.5 rounded ${confidence >= 80 ? 'bg-success-50 text-success-700' :
+                                    confidence >= 50 ? 'bg-warning-50 text-warning-700' :
+                                        'bg-error-50 text-error-700'}`, children: [confidence, "%"] }))] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 mt-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-ink-400", children: [jsxRuntime.jsx("span", { children: actor }), jsxRuntime.jsx("span", { children: "\u00B7" }), jsxRuntime.jsx("span", { children: timestamp }), actionType && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: "\u00B7" }), jsxRuntime.jsx("span", { children: actionType })] }))] }), isRevertible && !reverted && onRevert && (jsxRuntime.jsxs("button", { type: "button", onClick: onRevert, className: "inline-flex items-center gap-1 text-xs text-ink-500 hover:text-error-600 opacity-0 group-hover:opacity-100 transition-opacity", children: [jsxRuntime.jsx(lucideReact.RotateCcw, { className: "h-3 w-3" }), "Revert"] }))] })] })] }));
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+const healthDot = {
+    good: 'bg-success-500',
+    warning: 'bg-warning-500',
+    critical: 'bg-error-500',
+};
+const healthText = {
+    good: 'text-success-700',
+    warning: 'text-warning-700',
+    critical: 'text-error-700',
+};
+const trendSymbol = {
+    up: '\u2191',
+    down: '\u2193',
+    stable: '\u2192',
+};
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * ProcessHealthBar — Compact horizontal process health overview
+ *
+ * Shows traffic-light indicators for a process area's KPIs.
+ * Used in the persona-adaptive dashboard to show overall process health.
+ */
+function ProcessHealthBar({ processName, metrics, onClick, className = '', }) {
+    // Overall health: worst of all metrics
+    const overallHealth = metrics.some(m => m.status === 'critical') ? 'critical' :
+        metrics.some(m => m.status === 'warning') ? 'warning' : 'good';
+    return (jsxRuntime.jsxs("div", { onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick ? (e) => { if (e.key === 'Enter' || e.key === ' ')
+            onClick(); } : undefined, className: `
+        flex items-center gap-4 px-4 py-3 rounded-lg border
+        bg-white dark:bg-ink-900 border-paper-200 dark:border-ink-700
+        ${onClick ? 'cursor-pointer hover:shadow-sm hover:border-primary-300 transition-all' : ''}
+        ${className}
+      `, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-shrink-0", children: [jsxRuntime.jsx("span", { className: `w-3 h-3 rounded-full ${healthDot[overallHealth]}` }), jsxRuntime.jsx("span", { className: "text-sm font-medium text-ink-900 dark:text-ink-100 whitespace-nowrap", children: processName })] }), jsxRuntime.jsx("div", { className: "flex items-center gap-4 overflow-x-auto flex-1", children: metrics.map((metric, idx) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [jsxRuntime.jsx("span", { className: `w-1.5 h-1.5 rounded-full ${healthDot[metric.status]}` }), jsxRuntime.jsxs("span", { className: "text-xs text-ink-500 whitespace-nowrap", children: [metric.name, ":"] }), jsxRuntime.jsxs("span", { className: `text-xs font-medium ${healthText[metric.status]} whitespace-nowrap`, children: [metric.value, metric.trend && (jsxRuntime.jsx("span", { className: "ml-0.5", children: trendSymbol[metric.trend] }))] })] }, idx))) })] }));
+}
+
+// =============================================================================
+// Default Colors
+// =============================================================================
+const defaultColors = [
+    '#6366f1', // indigo
+    '#8b5cf6', // violet
+    '#a78bfa', // violet lighter
+    '#c084fc', // purple lighter
+    '#d8b4fe', // purple lightest
+    '#e9d5ff', // purple very light
+    '#f3e8ff', // purple ultra light
+];
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * FunnelChart — SVG funnel visualization for pipeline stages
+ *
+ * Renders a vertical funnel where each stage's width is proportional
+ * 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 = '', }) {
+    if (stages.length === 0)
+        return null;
+    const maxCount = Math.max(...stages.map(s => s.count), 1);
+    const stageHeight = height / stages.length;
+    const svgWidth = 400;
+    const padding = 20;
+    const funnelWidth = svgWidth - padding * 2 - 160; // Leave room for labels
+    return (jsxRuntime.jsx("div", { className: className, children: jsxRuntime.jsx("svg", { width: "100%", viewBox: `0 0 ${svgWidth} ${height}`, preserveAspectRatio: "xMidYMid meet", children: stages.map((stage, idx) => {
+                const ratio = stage.count / maxCount;
+                const nextRatio = idx < stages.length - 1 ? stages[idx + 1].count / maxCount : ratio;
+                const y = idx * stageHeight;
+                const topWidth = funnelWidth * ratio;
+                const bottomWidth = funnelWidth * nextRatio;
+                const centerX = padding + funnelWidth / 2;
+                const color = stage.color || defaultColors[idx % defaultColors.length];
+                // Conversion rate
+                const conversionRate = idx > 0 && stages[idx - 1].count > 0
+                    ? Math.round((stage.count / stages[idx - 1].count) * 100)
+                    : null;
+                // Trapezoid path
+                const path = `
+            M ${centerX - topWidth / 2} ${y + 2}
+            L ${centerX + topWidth / 2} ${y + 2}
+            L ${centerX + bottomWidth / 2} ${y + stageHeight - 2}
+            L ${centerX - bottomWidth / 2} ${y + stageHeight - 2}
+            Z
+          `;
+                return (jsxRuntime.jsxs("g", { onClick: () => onStageClick?.(stage.name), style: onStageClick ? { cursor: 'pointer' } : undefined, role: onStageClick ? 'button' : undefined, children: [jsxRuntime.jsx("path", { d: path, fill: color, opacity: 0.85, className: "transition-opacity hover:opacity-100" }), jsxRuntime.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() }), jsxRuntime.jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 - 6, className: "fill-ink-700 dark:fill-ink-300", style: { fontSize: '11px', fontWeight: 500 }, children: stage.name }), stage.value && (jsxRuntime.jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 + 8, className: "fill-ink-400", style: { fontSize: '10px' }, children: stage.value })), showConversion && conversionRate !== null && (jsxRuntime.jsxs("text", { x: centerX - funnelWidth / 2 - 8, y: y + 4, textAnchor: "end", className: "fill-ink-400", style: { fontSize: '10px' }, children: [conversionRate, "%"] }))] }, stage.name));
+            }) }) }));
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+const sizeClasses$2 = {
+    sm: 'col-span-1',
+    md: 'col-span-1 md:col-span-2',
+    lg: 'col-span-1 md:col-span-2 lg:col-span-3',
+    full: 'col-span-full',
+};
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * PersonaDashboard — Adaptive dashboard shell for persona-specific widgets
+ *
+ * Provides the common dashboard structure:
+ * 1. System action summary (hero, persona-filtered)
+ * 2. Pending attention items
+ * 3. Process health indicators
+ * 4. Persona-specific widgets in a responsive grid
+ *
+ * Used as the layout container on the Home page, populated with
+ * role-specific widgets based on the resolved persona.
+ */
+function PersonaDashboard({ personaName, systemSummary, pendingAttention, processHealth, widgets, className = '', }) {
+    return (jsxRuntime.jsxs("div", { className: `space-y-6 ${className}`, children: [systemSummary && (jsxRuntime.jsx("section", { "aria-label": "System actions", children: systemSummary })), pendingAttention && (jsxRuntime.jsx("section", { "aria-label": "Items needing attention", children: pendingAttention })), processHealth && (jsxRuntime.jsx("section", { "aria-label": "Process health", children: processHealth })), widgets.length > 0 && (jsxRuntime.jsx("section", { "aria-label": `${personaName} dashboard widgets`, children: jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", children: widgets.map(widget => (jsxRuntime.jsx("div", { className: sizeClasses$2[widget.size], children: widget.render() }, widget.id))) }) }))] }));
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * ConfidenceIndicator — Circular gauge showing confidence percentage
+ *
+ * Renders a circular progress arc with color based on score thresholds:
+ * - >= 80: green (high confidence)
+ * - >= 50: yellow (medium confidence)
+ * - < 50: red (low confidence)
+ *
+ * Used in review workflows and process views to show system confidence
+ * in automated actions.
+ */
+function ConfidenceIndicator({ score, label, size = 80, strokeWidth = 6, className = '', }) {
+    const normalizedScore = Math.min(100, Math.max(0, score));
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (normalizedScore / 100) * circumference;
+    const center = size / 2;
+    const color = normalizedScore >= 80 ? '#10b981' : // success green
+        normalizedScore >= 50 ? '#f59e0b' : // warning amber
+            '#ef4444'; // error red
+    const bgColor = normalizedScore >= 80 ? '#d1fae5' :
+        normalizedScore >= 50 ? '#fef3c7' :
+            '#fee2e2';
+    return (jsxRuntime.jsxs("div", { className: `inline-flex flex-col items-center ${className}`, children: [jsxRuntime.jsxs("div", { className: "relative", style: { width: size, height: size }, children: [jsxRuntime.jsxs("svg", { width: size, height: size, className: "transform -rotate-90", children: [jsxRuntime.jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: bgColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: offset, className: "transition-all duration-500 ease-out" })] }), jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsxRuntime.jsxs("span", { className: "font-bold text-ink-900 dark:text-ink-100", style: { fontSize: size * 0.22 }, children: [normalizedScore, "%"] }) })] }), label && (jsxRuntime.jsx("span", { className: "text-xs text-ink-500 mt-1", children: label }))] }));
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * ConfidenceBadge — Compact inline confidence display
+ *
+ * Shows a color-coded badge with optional score text.
+ * Used in table cells, Kanban cards, and list items where
+ * the full ConfidenceIndicator gauge would be too large.
+ */
+function ConfidenceBadge({ score, showScore = true, size = 'md', className = '', }) {
+    const normalizedScore = Math.min(100, Math.max(0, score));
+    const colorClasses = normalizedScore >= 80
+        ? 'bg-success-50 text-success-700 border-success-200'
+        : normalizedScore >= 50
+            ? 'bg-warning-50 text-warning-700 border-warning-200'
+            : 'bg-error-50 text-error-700 border-error-200';
+    const dotColor = normalizedScore >= 80
+        ? 'bg-success-500'
+        : normalizedScore >= 50
+            ? 'bg-warning-500'
+            : 'bg-error-500';
+    const sizeClasses = {
+        sm: { wrapper: 'px-1.5 py-0.5 text-[10px]', dot: 'w-1.5 h-1.5' },
+        md: { wrapper: 'px-2 py-0.5 text-xs', dot: 'w-2 h-2' },
+    };
+    const sizes = sizeClasses[size];
+    return (jsxRuntime.jsxs("span", { className: `inline-flex items-center gap-1 rounded-full border font-medium ${sizes.wrapper} ${colorClasses} ${className}`, title: `${normalizedScore}% confidence`, children: [jsxRuntime.jsx("span", { className: `${sizes.dot} rounded-full ${dotColor} flex-shrink-0` }), showScore && jsxRuntime.jsxs("span", { children: [normalizedScore, "%"] })] }));
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+const buttonVariants = {
+    primary: 'bg-primary-600 text-white hover:bg-primary-700',
+    secondary: 'bg-paper-100 text-ink-700 hover:bg-paper-200 border border-paper-300',
+    danger: 'bg-error-600 text-white hover:bg-error-700',
+    ghost: 'text-ink-600 hover:bg-paper-100',
+};
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * ReviewDecisionCard — Action card with confidence breakdown
+ *
+ * Extended ActionCard pattern that includes a confidence gauge and
+ * per-factor confidence breakdown. Used in the Approvals & Review queue
+ * for items requiring human judgment.
+ */
+function ReviewDecisionCard({ title, description, confidence, breakdown, recommendation, actions, entityType, entityLabel, onEntityClick, notes, timestamp, className = '', }) {
+    return (jsxRuntime.jsxs("div", { className: `
+        rounded-lg border bg-white dark:bg-ink-900 border-paper-200 dark:border-ink-700 p-5
+        ${className}
+      `, children: [jsxRuntime.jsxs("div", { className: "flex gap-4", children: [jsxRuntime.jsx("div", { className: "flex-shrink-0", children: jsxRuntime.jsx(ConfidenceIndicator, { score: confidence, size: 72, strokeWidth: 5 }) }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsx("h4", { className: "text-base font-medium text-ink-900 dark:text-ink-100", children: title }), description && (jsxRuntime.jsx("p", { className: "text-sm text-ink-500 mt-0.5", children: description })), entityType && entityLabel && (jsxRuntime.jsxs("button", { type: "button", onClick: onEntityClick, className: "text-xs text-primary-600 hover:underline mt-1", children: [entityType, ": ", entityLabel] })), recommendation && (jsxRuntime.jsxs("div", { className: "mt-3 px-3 py-2 bg-primary-50 dark:bg-primary-900/20 rounded text-sm text-primary-700 dark:text-primary-300", children: [jsxRuntime.jsx("span", { className: "font-medium", children: "Recommendation: " }), recommendation] }))] })] }), breakdown && breakdown.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-4 pt-3 border-t border-paper-200 dark:border-ink-700", children: [jsxRuntime.jsx("h5", { className: "text-xs font-medium text-ink-500 mb-2", children: "Confidence Breakdown" }), jsxRuntime.jsx("div", { className: "space-y-2", children: breakdown.map((factor, idx) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("span", { className: "text-xs text-ink-600 w-28 flex-shrink-0", children: factor.factor }), jsxRuntime.jsx("div", { className: "flex-1 h-2 bg-paper-200 rounded-full overflow-hidden", children: jsxRuntime.jsx("div", { className: `h-full rounded-full transition-all ${factor.score >= 80 ? 'bg-success-500' :
+                                            factor.score >= 50 ? 'bg-warning-500' :
+                                                'bg-error-500'}`, style: { width: `${factor.score}%` } }) }), jsxRuntime.jsxs("span", { className: "text-xs text-ink-400 w-10 text-right", children: [factor.score, "%"] })] }, idx))) })] })), notes && (jsxRuntime.jsx("div", { className: "mt-3 px-3 py-2 bg-paper-50 dark:bg-ink-800 rounded text-xs text-ink-600 border-l-2 border-ink-200", children: notes })), jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 mt-4 pt-3 border-t border-paper-200 dark:border-ink-700", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: actions.map((action, idx) => (jsxRuntime.jsxs("button", { type: "button", onClick: action.onClick, className: `
+                inline-flex items-center gap-1.5 px-4 py-2 rounded text-sm font-medium
+                transition-colors
+                ${buttonVariants[action.variant || 'secondary']}
+              `, children: [action.icon, action.label] }, idx))) }), timestamp && (jsxRuntime.jsx("span", { className: "text-xs text-ink-400", children: timestamp }))] })] }));
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+const severityConfig = {
+    info: { bg: 'bg-blue-50 dark:bg-blue-900/20', border: 'border-blue-200 dark:border-blue-800', text: 'text-blue-800 dark:text-blue-200', icon: 'text-blue-500' },
+    warning: { bg: 'bg-warning-50 dark:bg-warning-900/20', border: 'border-warning-200 dark:border-warning-800', text: 'text-warning-800 dark:text-warning-200', icon: 'text-warning-500' },
+    critical: { bg: 'bg-error-50 dark:bg-error-900/20', border: 'border-error-200 dark:border-error-800', text: 'text-error-800 dark:text-error-200', icon: 'text-error-500' },
+};
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * AnomalyBanner — Alert banner for anomaly detection
+ *
+ * Shows a prominent banner when the system detects unusual patterns.
+ * Severity levels: info (FYI), warning (review recommended), critical (immediate action).
+ * Used at the top of process views and dashboards.
+ */
+function AnomalyBanner({ title, description, severity = 'warning', affectedCount, actionLabel, onAction, onDismiss, className = '', }) {
+    const config = severityConfig[severity];
+    return (jsxRuntime.jsxs("div", { className: `
+        flex items-start gap-3 px-4 py-3 rounded-lg border
+        ${config.bg} ${config.border}
+        ${className}
+      `, role: "alert", children: [jsxRuntime.jsx(lucideReact.AlertTriangle, { className: `h-5 w-5 flex-shrink-0 mt-0.5 ${config.icon}` }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("h4", { className: `text-sm font-medium ${config.text}`, children: title }), affectedCount !== undefined && (jsxRuntime.jsxs("span", { className: `text-xs px-1.5 py-0.5 rounded-full ${config.bg} ${config.text} font-medium`, children: [affectedCount, " affected"] }))] }), description && (jsxRuntime.jsx("p", { className: `text-sm mt-1 ${config.text} opacity-80`, children: description })), actionLabel && onAction && (jsxRuntime.jsxs("button", { type: "button", onClick: onAction, className: `inline-flex items-center gap-1 text-sm font-medium mt-2 ${config.text} hover:underline`, children: [actionLabel, jsxRuntime.jsx(lucideReact.ArrowRight, { className: "h-3 w-3" })] }))] }), onDismiss && (jsxRuntime.jsx("button", { type: "button", onClick: onDismiss, className: `flex-shrink-0 p-1 rounded hover:bg-white/50 transition-colors ${config.text} opacity-60 hover:opacity-100`, "aria-label": "Dismiss", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) }))] }));
+}
+
 /**
  * Avatar component that displays:
  * - User initials in a colored circle (default)
@@ -61970,10 +62603,12 @@ exports.ActionBarCenter = ActionBarCenter;
 exports.ActionBarLeft = ActionBarLeft;
 exports.ActionBarRight = ActionBarRight;
 exports.ActionButton = ActionButton;
+exports.ActionCard = ActionCard;
 exports.ActivityFeed = ActivityFeed;
 exports.AdminModal = AdminModal;
 exports.Alert = Alert;
 exports.AlertDialog = AlertDialog;
+exports.AnomalyBanner = AnomalyBanner;
 exports.AppLayout = AppLayout;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
@@ -61998,6 +62633,7 @@ exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.CardView = CardView;
 exports.Carousel = Carousel;
+exports.CaseQueueItem = CaseQueueItem;
 exports.Celebration = Celebration;
 exports.Checkbox = Checkbox;
 exports.CheckboxList = CheckboxList;
@@ -62011,6 +62647,8 @@ exports.Combobox = Combobox;
 exports.ComingSoon = ComingSoon;
 exports.CommandPalette = CommandPalette;
 exports.CompactStat = CompactStat;
+exports.ConfidenceBadge = ConfidenceBadge;
+exports.ConfidenceIndicator = ConfidenceIndicator;
 exports.ConfirmDialog = ConfirmDialog;
 exports.ContextMenu = ContextMenu;
 exports.ControlBar = ControlBar;
@@ -62033,6 +62671,7 @@ exports.DropZone = DropZone;
 exports.Dropdown = Dropdown;
 exports.DropdownTrigger = DropdownTrigger;
 exports.EmptyState = EmptyState;
+exports.EntityCard = EntityCard;
 exports.ErrorBoundary = ErrorBoundary;
 exports.ExpandablePanel = ExpandablePanel;
 exports.ExpandablePanelContainer = ExpandablePanelContainer;
@@ -62054,6 +62693,7 @@ exports.Form = Form;
 exports.FormContext = FormContext;
 exports.FormControl = FormControl;
 exports.FormWizard = FormWizard;
+exports.FunnelChart = FunnelChart;
 exports.Grid = Grid;
 exports.GridItem = GridItem;
 exports.HelpTooltip = HelpTooltip;
@@ -62070,6 +62710,7 @@ exports.LoadingOverlay = LoadingOverlay;
 exports.Logo = Logo;
 exports.MarkdownEditor = MarkdownEditor;
 exports.MaskedInput = MaskedInput;
+exports.MatchIndicator = MatchIndicator;
 exports.Menu = Menu;
 exports.MenuDivider = MenuDivider;
 exports.MobileHeader = MobileHeader;
@@ -62093,9 +62734,12 @@ exports.PageNavigation = PageNavigation;
 exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
 exports.PermissionBadge = PermissionBadge;
+exports.PersonaDashboard = PersonaDashboard;
 exports.PivotTable = PivotTable;
 exports.Popover = Popover;
 exports.PriorityAlertBanner = PriorityAlertBanner;
+exports.ProcessHealthBar = ProcessHealthBar;
+exports.ProcessIndicator = ProcessIndicator;
 exports.Progress = Progress;
 exports.ProgressCelebration = ProgressCelebration;
 exports.PullToRefresh = PullToRefresh;
@@ -62103,7 +62747,9 @@ exports.QueryTransparency = QueryTransparency;
 exports.RadioGroup = RadioGroup;
 exports.Rating = Rating;
 exports.Responsive = Responsive;
+exports.ReviewDecisionCard = ReviewDecisionCard;
 exports.RichTextEditor = RichTextEditor;
+exports.SLAIndicator = SLAIndicator;
 exports.SearchBar = SearchBar;
 exports.SearchableList = SearchableList;
 exports.Select = Select;
@@ -62117,6 +62763,7 @@ exports.SkeletonCard = SkeletonCard$1;
 exports.SkeletonTable = SkeletonTable;
 exports.SkipLink = SkipLink;
 exports.Slider = Slider;
+exports.SplitPane = SplitPane;
 exports.Spreadsheet = Spreadsheet;
 exports.SpreadsheetReport = SpreadsheetReport;
 exports.Stack = Stack;
@@ -62135,6 +62782,7 @@ exports.SwipeActions = SwipeActions;
 exports.SwipeableCard = SwipeableCard;
 exports.SwipeableListItem = SwipeableListItem;
 exports.Switch = Switch;
+exports.SystemActionEntry = SystemActionEntry;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
@@ -62153,6 +62801,7 @@ exports.Transfer = Transfer;
 exports.TreeView = TreeView;
 exports.TwoColumnContent = TwoColumnContent;
 exports.UserProfileButton = UserProfileButton;
+exports.VarianceDisplay = VarianceDisplay;
 exports.addErrorMessage = addErrorMessage;
 exports.addInfoMessage = addInfoMessage;
 exports.addSuccessMessage = addSuccessMessage;