@papernote/ui 1.10.25 → 1.11.0

package/src/components/DataGrid.tsx

@@ -159,6 +159,12 @@ export interface DataGridProps {
   className?: string;
   /** Density */
   density?: 'compact' | 'normal' | 'comfortable';
+  /** Enable virtual scrolling for large datasets (only renders visible rows) */
+  virtualized?: boolean;
+  /** Row height in pixels when virtualized (default: 40) */
+  virtualRowHeight?: number;
+  /** Number of rows to render above/below visible area (default: 5) */
+  virtualOverscan?: number;
 }
 
 /**
@@ -287,11 +293,15 @@ export const DataGrid = forwardRef<DataGridHandle, DataGridProps>(
       toolbarActions,
       className = '',
       density = 'normal',
+      virtualized = false,
+      virtualRowHeight = 40,
+      virtualOverscan = 5,
     },
     ref
   ) => {
     // State
     const [data, setData] = useState<DataGridCell[][]>(initialData);
+    const [scrollTop, setScrollTop] = useState(0);
     const [editingCell, setEditingCell] = useState<{ row: number; col: number } | null>(null);
     const [editValue, setEditValue] = useState<string>('');
     const [sortConfig, setSortConfig] = useState<SortConfig | null>(null);
@@ -358,25 +368,18 @@ export const DataGrid = forwardRef<DataGridHandle, DataGridProps>(
       [groupColorMap]
     );
 
-    // Check if a specific row is frozen
-    const isRowFrozen = useCallback(
-      (rowIndex: number) => {
-        if (frozenRowsState === 'none') return false;
-        if (frozenRowsState === 'first') return rowIndex === 0;
-        if (frozenRowsState === 'selected') {
-          return selectedCell ? rowIndex === selectedCell.row : false;
-        }
-        if (typeof frozenRowsState === 'number') return rowIndex < frozenRowsState;
-        return false;
-      },
-      [frozenRowsState, selectedCell]
-    );
-
     // Update data when initialData changes
     useEffect(() => {
       setData(initialData);
     }, [initialData]);
 
+    // Handle scroll for virtualization
+    const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+      if (virtualized) {
+        setScrollTop(e.currentTarget.scrollTop);
+      }
+    }, [virtualized]);
+
     // Get computed data with formulas evaluated
     // Uses a cache to handle formula dependencies (formulas referencing other formulas)
     const computedData = useMemo(() => {
@@ -496,6 +499,36 @@ export const DataGrid = forwardRef<DataGridHandle, DataGridProps>(
       return [...frozenData, ...filtered];
     }, [sortedData, filters, columns, frozenRows]);
 
+    // Calculate visible rows for virtualization
+    const visibleRowRange = useMemo(() => {
+      if (!virtualized) {
+        return { startIndex: 0, endIndex: filteredData.length, paddingTop: 0, paddingBottom: 0, frozenRowCount: 0 };
+      }
+
+      const containerHeight = typeof height === 'number' ? height : 400;
+      const headerHeight = 40; // Approximate header height
+      const availableHeight = containerHeight - headerHeight;
+
+      // Account for frozen rows
+      const frozenRowCount = frozenRows;
+      const scrollableData = filteredData.slice(frozenRowCount);
+
+      const visibleCount = Math.ceil(availableHeight / virtualRowHeight);
+      const startIndex = Math.max(0, Math.floor(scrollTop / virtualRowHeight) - virtualOverscan);
+      const endIndex = Math.min(scrollableData.length, startIndex + visibleCount + (virtualOverscan * 2));
+
+      const paddingTop = startIndex * virtualRowHeight;
+      const paddingBottom = Math.max(0, (scrollableData.length - endIndex) * virtualRowHeight);
+
+      return {
+        startIndex: startIndex + frozenRowCount,
+        endIndex: endIndex + frozenRowCount,
+        paddingTop,
+        paddingBottom,
+        frozenRowCount
+      };
+    }, [virtualized, filteredData.length, scrollTop, height, virtualRowHeight, virtualOverscan, frozenRows]);
+
     // Handle cell edit start
     const handleCellDoubleClick = useCallback(
       (rowIndex: number, colIndex: number, cellElement?: HTMLElement) => {
@@ -866,6 +899,7 @@ export const DataGrid = forwardRef<DataGridHandle, DataGridProps>(
           className="relative overflow-auto border border-stone-200 rounded-lg bg-white"
           style={{ height }}
           onKeyDown={handleKeyDown}
+          onScroll={handleScroll}
           tabIndex={0}
         >
           <table className="border-collapse" style={{ tableLayout: 'auto' }}>
@@ -974,18 +1008,23 @@ export const DataGrid = forwardRef<DataGridHandle, DataGridProps>(
 
             {/* Body */}
             <tbody>
-              {filteredData.map((row, rowIndex) => {
-                const isFrozen = isRowFrozen(rowIndex);
+              {/* Top spacer for virtualization */}
+              {virtualized && visibleRowRange.paddingTop > 0 && (
+                <tr style={{ height: visibleRowRange.paddingTop }}>
+                  <td colSpan={columns.length + (rowHeaders ? 1 : 0)} />
+                </tr>
+              )}
+
+              {/* Render frozen rows first (always visible) */}
+              {filteredData.slice(0, visibleRowRange.frozenRowCount).map((row, rowIndex) => {
                 const isZebra = zebraStripes && rowIndex % 2 === 1;
 
                 return (
                   <tr
-                    key={rowIndex}
-                    className={`${isZebra ? 'bg-paper-50' : 'bg-white'} ${
-                      isFrozen ? 'sticky z-10' : ''
-                    } ${isFrozen ? 'shadow-sm' : ''}`}
+                    key={`frozen-${rowIndex}`}
+                    className={`${isZebra ? 'bg-paper-50' : 'bg-white'} sticky z-10 shadow-sm`}
                     style={{
-                      top: isFrozen ? `${40 + rowIndex * 40}px` : undefined,
+                      top: `${40 + rowIndex * virtualRowHeight}px`,
                     }}
                   >
                     {/* Row header */}
@@ -1023,6 +1062,7 @@ export const DataGrid = forwardRef<DataGridHandle, DataGridProps>(
                           style={{
                             left: isFrozenCol ? leftOffset : undefined,
                             minWidth: column?.minWidth || 80,
+                            height: virtualized ? virtualRowHeight : undefined,
                           }}
                           onClick={() => handleCellClick(rowIndex, colIndex)}
                           onDoubleClick={(e) => handleCellDoubleClick(rowIndex, colIndex, e.currentTarget)}
@@ -1058,6 +1098,104 @@ export const DataGrid = forwardRef<DataGridHandle, DataGridProps>(
                   </tr>
                 );
               })}
+
+              {/* Render visible rows (virtualized or all) */}
+              {filteredData
+                .slice(
+                  virtualized ? Math.max(visibleRowRange.startIndex, visibleRowRange.frozenRowCount) : visibleRowRange.frozenRowCount,
+                  virtualized ? visibleRowRange.endIndex : filteredData.length
+                )
+                .map((row, idx) => {
+                  const rowIndex = virtualized
+                    ? Math.max(visibleRowRange.startIndex, visibleRowRange.frozenRowCount) + idx
+                    : visibleRowRange.frozenRowCount + idx;
+                  const isZebra = zebraStripes && rowIndex % 2 === 1;
+
+                  return (
+                    <tr
+                      key={rowIndex}
+                      className={`${isZebra ? 'bg-paper-50' : 'bg-white'}`}
+                      style={{
+                        height: virtualized ? virtualRowHeight : undefined,
+                      }}
+                    >
+                      {/* Row header */}
+                      {rowHeaders && (
+                        <td
+                          className={`${cellPadding} border-b border-r border-stone-200 bg-stone-50 text-ink-500 font-medium sticky left-0 z-10`}
+                          style={{ width: 50, minWidth: 50, maxWidth: 50 }}
+                        >
+                          {Array.isArray(rowHeaders) ? rowHeaders[rowIndex] : rowIndex + 1}
+                        </td>
+                      )}
+
+                      {/* Data cells */}
+                      {row.map((cell, colIndex) => {
+                        const column = columns[colIndex];
+                        const isFrozenCol = colIndex < frozenColumns;
+                        const isEditing =
+                          editingCell?.row === rowIndex && editingCell?.col === colIndex;
+                        const isSelected =
+                          selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
+                        const hasFormula = !!cell?.formula;
+                        const leftOffset = rowHeaders
+                          ? 50 + columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0)
+                          : columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0);
+                        const cellBgClass = getCellBgClass(column, isZebra, isFrozenCol);
+
+                        return (
+                          <td
+                            key={colIndex}
+                            className={`${cellPadding} border-b border-r border-stone-200 text-${
+                              column?.align || 'left'
+                            } ${isFrozenCol ? 'sticky z-10' : ''} ${cellBgClass} ${
+                              isSelected ? 'ring-2 ring-inset ring-primary-500' : ''
+                            } ${hasFormula ? 'bg-blue-50' : ''} ${cell?.className || ''}`}
+                            style={{
+                              left: isFrozenCol ? leftOffset : undefined,
+                              minWidth: column?.minWidth || 80,
+                            }}
+                            onClick={() => handleCellClick(rowIndex, colIndex)}
+                            onDoubleClick={(e) => handleCellDoubleClick(rowIndex, colIndex, e.currentTarget)}
+                          >
+                            {isEditing ? (
+                              formulas ? (
+                                <FormulaAutocomplete
+                                  value={editValue}
+                                  onChange={setEditValue}
+                                  onComplete={handleEditComplete}
+                                  onCancel={handleEditCancel}
+                                  anchorRect={editingCellRect}
+                                  autoFocus
+                                />
+                              ) : (
+                                <input
+                                  ref={inputRef}
+                                  type="text"
+                                  value={editValue}
+                                  onChange={(e) => setEditValue(e.target.value)}
+                                  onBlur={handleEditComplete}
+                                  onKeyDown={handleEditKeyDown}
+                                  className="w-full h-full border-none outline-none bg-transparent"
+                                  style={{ margin: '-4px', padding: '4px' }}
+                                />
+                              )
+                            ) : (
+                              formatValue(cell?.value, column)
+                            )}
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  );
+                })}
+
+              {/* Bottom spacer for virtualization */}
+              {virtualized && visibleRowRange.paddingBottom > 0 && (
+                <tr style={{ height: visibleRowRange.paddingBottom }}>
+                  <td colSpan={columns.length + (rowHeaders ? 1 : 0)} />
+                </tr>
+              )}
             </tbody>
           </table>
         </div>

package/src/components/EntityCard.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import { MoreHorizontal } from 'lucide-react';
+
+// =============================================================================
+// Types & Interfaces
+// =============================================================================
+
+export interface EntityCardProps {
+  /** Card title (e.g., deal name, case subject) */
+  title: string;
+  /** Optional subtitle (e.g., account name, contact) */
+  subtitle?: string;
+  /** Primary value display (e.g., deal amount, case priority) */
+  value?: string | React.ReactNode;
+  /** Status label */
+  status?: string;
+  /** Status color variant */
+  statusColor?: 'slate' | 'blue' | 'indigo' | 'purple' | 'green' | 'red' | 'yellow' | 'orange' | 'teal';
+  /** Assignee name (rendered as avatar initials) */
+  assignee?: string;
+  /** Progress percentage (0-100) */
+  progress?: number;
+  /** Additional metadata key-value pairs */
+  metadata?: Array<{ label: string; value: string | React.ReactNode }>;
+  /** Icon to display */
+  icon?: React.ReactNode;
+  /** Click handler */
+  onClick?: () => void;
+  /** Context menu handler */
+  onContextMenu?: () => void;
+  /** Whether the card is selected */
+  selected?: boolean;
+  /** Whether the card is draggable (adds visual indicator) */
+  draggable?: boolean;
+  /** Size variant */
+  size?: 'sm' | 'md';
+  /** Additional className */
+  className?: string;
+  /** Confidence score (0-100), shown as a small indicator */
+  confidence?: number;
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+const statusColors: Record<string, { bg: string; text: string }> = {
+  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: string): string {
+  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.
+ */
+export default function EntityCard({
+  title,
+  subtitle,
+  value,
+  status,
+  statusColor = 'slate',
+  assignee,
+  progress,
+  metadata,
+  icon,
+  onClick,
+  onContextMenu,
+  selected = false,
+  draggable = false,
+  size = 'md',
+  className = '',
+  confidence,
+}: EntityCardProps) {
+  const isCompact = size === 'sm';
+  const colors = statusColors[statusColor];
+
+  return (
+    <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}
+      `}
+    >
+      {/* Drag handle indicator */}
+      {draggable && (
+        <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" />
+      )}
+
+      {/* Header row: icon + title + context menu */}
+      <div className="flex items-start gap-2">
+        {icon && (
+          <div className="flex-shrink-0 text-ink-400 mt-0.5">
+            {icon}
+          </div>
+        )}
+        <div className="flex-1 min-w-0">
+          <h4 className={`font-medium text-ink-900 dark:text-ink-100 truncate ${isCompact ? 'text-sm' : 'text-base'}`}>
+            {title}
+          </h4>
+          {subtitle && (
+            <p className={`text-ink-500 dark:text-ink-400 truncate ${isCompact ? 'text-xs' : 'text-sm'}`}>
+              {subtitle}
+            </p>
+          )}
+        </div>
+        {onContextMenu && (
+          <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"
+          >
+            <MoreHorizontal className="h-4 w-4 text-ink-400" />
+          </button>
+        )}
+      </div>
+
+      {/* Value + Status row */}
+      {(value || status) && (
+        <div className={`flex items-center justify-between gap-2 ${isCompact ? 'mt-2' : 'mt-3'}`}>
+          {value && (
+            <span className={`font-semibold text-ink-900 dark:text-ink-100 ${isCompact ? 'text-sm' : 'text-lg'}`}>
+              {value}
+            </span>
+          )}
+          {status && colors && (
+            <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${colors.bg} ${colors.text}`}>
+              {status}
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Metadata */}
+      {metadata && metadata.length > 0 && (
+        <div className={`grid grid-cols-2 gap-x-3 gap-y-1 ${isCompact ? 'mt-2' : 'mt-3'}`}>
+          {metadata.map((item, idx) => (
+            <div key={idx} className="min-w-0">
+              <span className="text-xs text-ink-400">{item.label}</span>
+              <div className="text-xs text-ink-600 dark:text-ink-300 truncate">{item.value}</div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Footer row: progress + assignee + confidence */}
+      {(progress !== undefined || assignee || confidence !== undefined) && (
+        <div className={`flex items-center justify-between gap-2 ${isCompact ? 'mt-2' : 'mt-3'}`}>
+          {/* Progress bar */}
+          {progress !== undefined && (
+            <div className="flex-1 min-w-0">
+              <div className="h-1.5 bg-paper-200 rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-primary-500 rounded-full transition-all"
+                  style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
+                />
+              </div>
+            </div>
+          )}
+
+          <div className="flex items-center gap-2 flex-shrink-0">
+            {/* Confidence badge */}
+            {confidence !== undefined && (
+              <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'
+              }`}>
+                {confidence}%
+              </span>
+            )}
+
+            {/* Assignee avatar */}
+            {assignee && (
+              <div
+                className="w-6 h-6 rounded-full bg-primary-100 flex items-center justify-center flex-shrink-0"
+                title={assignee}
+              >
+                <span className="text-xs font-medium text-primary-700">
+                  {getInitials(assignee)}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/FunnelChart.tsx

@@ -0,0 +1,160 @@
+// =============================================================================
+// Types & Interfaces
+// =============================================================================
+
+export interface FunnelStage {
+  /** Stage name */
+  name: string;
+  /** Stage count */
+  count: number;
+  /** Display value (e.g., formatted currency) */
+  value?: string;
+  /** Color for this stage */
+  color?: string;
+}
+
+export interface FunnelChartProps {
+  /** Funnel stages in order (widest to narrowest) */
+  stages: FunnelStage[];
+  /** Chart height in pixels */
+  height?: number;
+  /** Whether to show conversion rates between stages */
+  showConversion?: boolean;
+  /** Click handler for a stage */
+  onStageClick?: (stageName: string) => void;
+  /** Additional className */
+  className?: string;
+}
+
+// =============================================================================
+// 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.
+ */
+export default function FunnelChart({
+  stages,
+  height = 300,
+  showConversion = true,
+  onStageClick,
+  className = '',
+}: FunnelChartProps) {
+  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 (
+    <div className={className}>
+      <svg width="100%" viewBox={`0 0 ${svgWidth} ${height}`} preserveAspectRatio="xMidYMid meet">
+        {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 (
+            <g
+              key={stage.name}
+              onClick={() => onStageClick?.(stage.name)}
+              style={onStageClick ? { cursor: 'pointer' } : undefined}
+              role={onStageClick ? 'button' : undefined}
+            >
+              {/* Funnel segment */}
+              <path
+                d={path}
+                fill={color}
+                opacity={0.85}
+                className="transition-opacity hover:opacity-100"
+              />
+
+              {/* Count inside funnel */}
+              <text
+                x={centerX}
+                y={y + stageHeight / 2 + 1}
+                textAnchor="middle"
+                dominantBaseline="middle"
+                className="fill-white text-xs font-bold"
+                style={{ fontSize: '12px' }}
+              >
+                {stage.count.toLocaleString()}
+              </text>
+
+              {/* Labels on right side */}
+              <text
+                x={centerX + funnelWidth / 2 + 12}
+                y={y + stageHeight / 2 - 6}
+                className="fill-ink-700 dark:fill-ink-300"
+                style={{ fontSize: '11px', fontWeight: 500 }}
+              >
+                {stage.name}
+              </text>
+              {stage.value && (
+                <text
+                  x={centerX + funnelWidth / 2 + 12}
+                  y={y + stageHeight / 2 + 8}
+                  className="fill-ink-400"
+                  style={{ fontSize: '10px' }}
+                >
+                  {stage.value}
+                </text>
+              )}
+
+              {/* Conversion rate on left */}
+              {showConversion && conversionRate !== null && (
+                <text
+                  x={centerX - funnelWidth / 2 - 8}
+                  y={y + 4}
+                  textAnchor="end"
+                  className="fill-ink-400"
+                  style={{ fontSize: '10px' }}
+                >
+                  {conversionRate}%
+                </text>
+              )}
+            </g>
+          );
+        })}
+      </svg>
+    </div>
+  );
+}