@papernote/ui 2.0.3 → 2.0.5

package/dist/index.js

@@ -2765,7 +2765,7 @@ function FormControl({ label, required = false, error, helperText, children, cla
     return (jsxRuntime.jsxs("div", { className: `${className}`, children: [label && (jsxRuntime.jsxs("label", { htmlFor: htmlFor, className: "block text-sm font-medium text-ink-700 mb-1", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsx("div", { children: children }), (error || helperText) && (jsxRuntime.jsx("p", { className: `mt-1 text-xs ${error ? 'text-error-600' : 'text-ink-500'}`, children: error || helperText }))] }));
 }
 
-function FilterBar({ filters, values, onChange, className = '', onClear, showClearButton = false, }) {
+function FilterBar({ filters, values, onChange, className = "", onClear, showClearButton = false, }) {
     const handleFilterChange = (key, value) => {
         onChange({
             ...values,
@@ -2779,16 +2779,19 @@ function FilterBar({ filters, values, onChange, className = '', onClear, showCle
         else {
             // Default clear: set all values to null/empty
             const clearedValues = {};
-            filters.forEach(filter => {
-                if (filter.type === 'text' || filter.type === 'search') {
-                    clearedValues[filter.key] = '';
+            filters.forEach((filter) => {
+                if (filter.type === "text" || filter.type === "search") {
+                    clearedValues[filter.key] = "";
                 }
-                else if (filter.type === 'dateRange') {
+                else if (filter.type === "dateRange") {
                     clearedValues[filter.key] = { from: undefined, to: undefined };
                 }
-                else if (filter.type === 'multiSelect') {
+                else if (filter.type === "multiSelect") {
                     clearedValues[filter.key] = [];
                 }
+                else if (filter.type === "switch") {
+                    clearedValues[filter.key] = false;
+                }
                 else {
                     clearedValues[filter.key] = null;
                 }
@@ -2799,51 +2802,70 @@ function FilterBar({ filters, values, onChange, className = '', onClear, showCle
     const renderFilter = (filter) => {
         const value = values[filter.key];
         switch (filter.type) {
-            case 'text':
-                return (jsxRuntime.jsx(Input, { type: "text", placeholder: filter.placeholder || `Filter by ${filter.label}`, value: value || '', onChange: (e) => handleFilterChange(filter.key, e.target.value) }));
-            case 'select': {
+            case "text":
+                return (jsxRuntime.jsx(Input, { type: "text", placeholder: filter.placeholder || `Filter by ${filter.label}`, value: value || "", onChange: (e) => handleFilterChange(filter.key, e.target.value) }));
+            case "select": {
                 const selectOptions = [
-                    { value: '', label: `All ${filter.label}` },
-                    ...(filter.options?.map(opt => ({
+                    { value: "", label: `All ${filter.label}` },
+                    ...(filter.options?.map((opt) => ({
                         value: String(opt.value),
                         label: opt.label,
                     })) || []),
                 ];
-                return (jsxRuntime.jsx(Select, { options: selectOptions, value: String(value || ''), onChange: (newValue) => handleFilterChange(filter.key, newValue || null) }));
+                return (jsxRuntime.jsx(Select, { options: selectOptions, value: String(value || ""), onChange: (newValue) => handleFilterChange(filter.key, newValue || null) }));
             }
-            case 'date':
-                return (jsxRuntime.jsx("input", { type: "date", value: value || '', onChange: (e) => handleFilterChange(filter.key, e.target.value), className: "input" }));
-            case 'number':
-                return (jsxRuntime.jsx("input", { type: "number", placeholder: filter.placeholder || `Filter by ${filter.label}`, value: value !== null && value !== undefined ? String(value) : '', onChange: (e) => handleFilterChange(filter.key, e.target.value ? Number(e.target.value) : null), className: "input" }));
-            case 'boolean': {
+            case "date":
+                return (jsxRuntime.jsx("input", { type: "date", value: value || "", onChange: (e) => handleFilterChange(filter.key, e.target.value), className: "input" }));
+            case "number":
+                return (jsxRuntime.jsx("input", { type: "number", placeholder: filter.placeholder || `Filter by ${filter.label}`, value: value !== null && value !== undefined ? String(value) : "", onChange: (e) => handleFilterChange(filter.key, e.target.value ? Number(e.target.value) : null), className: "input" }));
+            case "boolean": {
                 const boolOptions = [
-                    { value: '', label: 'All' },
-                    { value: 'true', label: 'Yes' },
-                    { value: 'false', label: 'No' },
+                    { value: "", label: "All" },
+                    { value: "true", label: "Yes" },
+                    { value: "false", label: "No" },
                 ];
-                return (jsxRuntime.jsx(Select, { options: boolOptions, value: value === null || value === undefined ? '' : String(value), onChange: (newValue) => handleFilterChange(filter.key, newValue === '' ? null : newValue === 'true') }));
+                return (jsxRuntime.jsx(Select, { options: boolOptions, value: value === null || value === undefined ? "" : String(value), onChange: (newValue) => handleFilterChange(filter.key, newValue === "" ? null : newValue === "true") }));
             }
-            case 'search':
-                return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4 text-ink-400" }) }), jsxRuntime.jsx("input", { type: "text", placeholder: filter.placeholder || `Search ${filter.label}...`, value: value || '', onChange: (e) => handleFilterChange(filter.key, e.target.value), className: "input pl-9" })] }));
-            case 'dateRange': {
+            case "search":
+                return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4 text-ink-400" }) }), jsxRuntime.jsx("input", { type: "text", placeholder: filter.placeholder || `Search ${filter.label}...`, value: value || "", onChange: (e) => handleFilterChange(filter.key, e.target.value), className: "input pl-9" })] }));
+            case "dateRange": {
                 const rangeValue = value || {};
-                return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("input", { type: "date", value: rangeValue.from || '', onChange: (e) => handleFilterChange(filter.key, { ...rangeValue, from: e.target.value || undefined }), className: "input text-sm", "aria-label": `${filter.label} from` }), jsxRuntime.jsx("span", { className: "text-ink-400 text-xs", children: "to" }), jsxRuntime.jsx("input", { type: "date", value: rangeValue.to || '', onChange: (e) => handleFilterChange(filter.key, { ...rangeValue, to: e.target.value || undefined }), className: "input text-sm", "aria-label": `${filter.label} to` })] }));
-            }
-            case 'toggle': {
+                return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("input", { type: "date", value: rangeValue.from || "", onChange: (e) => handleFilterChange(filter.key, {
+                                ...rangeValue,
+                                from: e.target.value || undefined,
+                            }), className: "input text-sm", "aria-label": `${filter.label} from` }), jsxRuntime.jsx("span", { className: "text-ink-400 text-xs", children: "to" }), jsxRuntime.jsx("input", { type: "date", value: rangeValue.to || "", onChange: (e) => handleFilterChange(filter.key, {
+                                ...rangeValue,
+                                to: e.target.value || undefined,
+                            }), className: "input text-sm", "aria-label": `${filter.label} to` })] }));
+            }
+            case "toggle": {
                 const toggleOptions = [
-                    { value: '', label: 'All' },
-                    { value: 'true', label: 'Yes' },
-                    { value: 'false', label: 'No' },
+                    { value: "", label: "All" },
+                    { value: "true", label: "Yes" },
+                    { value: "false", label: "No" },
                 ];
-                const currentVal = value === null || value === undefined ? '' : String(value);
-                return (jsxRuntime.jsx("div", { className: "flex rounded-lg border border-paper-300 overflow-hidden", role: "group", children: toggleOptions.map((opt) => (jsxRuntime.jsx("button", { type: "button", onClick: () => handleFilterChange(filter.key, opt.value === '' ? null : opt.value === 'true'), className: `px-3 py-1.5 text-xs font-medium transition-colors ${currentVal === opt.value
-                            ? 'bg-accent-500 text-white'
-                            : 'bg-white text-ink-600 hover:bg-paper-50'} ${opt.value !== '' ? 'border-l border-paper-300' : ''}`, children: opt.label }, opt.value))) }));
-            }
-            case 'multiSelect': {
+                const currentVal = value === null || value === undefined ? "" : String(value);
+                return (jsxRuntime.jsx("div", { className: "flex rounded-lg border border-paper-300 overflow-hidden", role: "group", children: toggleOptions.map((opt) => (jsxRuntime.jsx("button", { type: "button", onClick: () => handleFilterChange(filter.key, opt.value === "" ? null : opt.value === "true"), className: `px-3 py-1.5 text-xs font-medium transition-colors ${currentVal === opt.value
+                            ? "bg-accent-500 text-white"
+                            : "bg-white text-ink-600 hover:bg-paper-50"} ${opt.value !== "" ? "border-l border-paper-300" : ""}`, children: opt.label }, opt.value))) }));
+            }
+            case "switch": {
+                // Single binary toggle — use when the filter is naturally on/off
+                // (e.g. "Mine only", "Archived"), unlike `boolean` / `toggle` which
+                // present an All/Yes/No tri-state. Stored value is a plain boolean.
+                const checked = value === true;
+                return (jsxRuntime.jsxs("button", { type: "button", role: "switch", "aria-checked": checked, onClick: () => handleFilterChange(filter.key, !checked), className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 ${checked ? "bg-accent-500" : "bg-paper-300"}`, children: [jsxRuntime.jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${checked ? "translate-x-6" : "translate-x-1"}` }), jsxRuntime.jsx("span", { className: "sr-only", children: filter.label })] }));
+            }
+            case "multiSelect": {
                 const selectedValues = Array.isArray(value) ? value : [];
                 const msOptions = filter.options || [];
-                return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Select, { options: [{ value: '', label: `All ${filter.label}` }, ...msOptions.map(o => ({ value: String(o.value), label: o.label }))], value: "", onChange: (newValue) => {
+                return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Select, { options: [
+                                { value: "", label: `All ${filter.label}` },
+                                ...msOptions.map((o) => ({
+                                    value: String(o.value),
+                                    label: o.label,
+                                })),
+                            ], value: "", onChange: (newValue) => {
                                 if (!newValue) {
                                     handleFilterChange(filter.key, []);
                                 }
@@ -2851,8 +2873,8 @@ function FilterBar({ filters, values, onChange, className = '', onClear, showCle
                                     handleFilterChange(filter.key, [...selectedValues, newValue]);
                                 }
                             } }), selectedValues.length > 0 && (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: selectedValues.map((sv) => {
-                                const opt = msOptions.find(o => String(o.value) === sv);
-                                return (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-100 text-accent-700 rounded-full", children: [opt?.label || sv, jsxRuntime.jsx("button", { type: "button", onClick: () => handleFilterChange(filter.key, selectedValues.filter(v => v !== sv)), className: "hover:text-accent-900", children: jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }) })] }, sv));
+                                const opt = msOptions.find((o) => String(o.value) === sv);
+                                return (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-accent-100 text-accent-700 rounded-full", children: [opt?.label || sv, jsxRuntime.jsx("button", { type: "button", onClick: () => handleFilterChange(filter.key, selectedValues.filter((v) => v !== sv)), className: "hover:text-accent-900", children: jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }) })] }, sv));
                             }) }))] }));
             }
             default:
@@ -14804,25 +14826,27 @@ function ActionMenu({ actions, item, }) {
     // Click outside handler
     React.useEffect(() => {
         const handleClickOutside = (event) => {
-            if (menuRef.current && !menuRef.current.contains(event.target) &&
-                buttonRef.current && !buttonRef.current.contains(event.target)) {
+            if (menuRef.current &&
+                !menuRef.current.contains(event.target) &&
+                buttonRef.current &&
+                !buttonRef.current.contains(event.target)) {
                 setIsOpen(false);
             }
         };
         if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
+            document.addEventListener("mousedown", handleClickOutside);
         }
         return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    const visibleActions = actions.filter(action => !action.show || action.show(item));
+    const visibleActions = actions.filter((action) => !action.show || action.show(item));
     if (visibleActions.length === 0)
         return null;
     const dropdownContent = isOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: "fixed w-56 bg-white rounded-lg shadow-lg border border-paper-300 py-1", style: {
             zIndex: 999999,
             top: `${position.top}px`,
-            left: `${position.left}px`
+            left: `${position.left}px`,
         }, children: visibleActions.map((action, idx) => {
             let iconElement = null;
             if (action.icon) {
@@ -14830,7 +14854,9 @@ function ActionMenu({ actions, item, }) {
                     iconElement = action.icon;
                 }
                 else {
-                    iconElement = React.createElement(action.icon, { className: 'h-4 w-4 flex-shrink-0' });
+                    iconElement = React.createElement(action.icon, {
+                        className: "h-4 w-4 flex-shrink-0",
+                    });
                 }
             }
             return (jsxRuntime.jsxs("button", { type: "button", onClick: async (e) => {
@@ -14840,12 +14866,12 @@ function ActionMenu({ actions, item, }) {
                         await action.onClick(item);
                     }
                     catch (error) {
-                        console.error('DataTable action error:', error);
+                        console.error("DataTable action error:", error);
                     }
                     setIsOpen(false);
-                }, className: `w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors ${action.variant === 'danger'
-                    ? 'text-error-600 hover:bg-error-50 hover:text-error-700'
-                    : 'text-ink-700 hover:bg-paper-50'}`, title: action.tooltip, children: [iconElement, jsxRuntime.jsx("span", { className: "flex-1 text-left", children: action.label })] }, idx));
+                }, className: `w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors ${action.variant === "danger"
+                    ? "text-error-600 hover:bg-error-50 hover:text-error-700"
+                    : "text-ink-700 hover:bg-paper-50"}`, title: action.tooltip, children: [iconElement, jsxRuntime.jsx("span", { className: "flex-1 text-left", children: action.label })] }, idx));
         }) }));
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { ref: buttonRef, onClick: (e) => {
                     e.stopPropagation();
@@ -14862,13 +14888,20 @@ function getColumnStyle(column, dynamicWidth) {
         style.width = `${dynamicWidth}px`;
     }
     else if (column.width !== undefined) {
-        style.width = typeof column.width === 'number' ? `${column.width}px` : column.width;
+        style.width =
+            typeof column.width === "number" ? `${column.width}px` : column.width;
     }
     if (column.minWidth !== undefined) {
-        style.minWidth = typeof column.minWidth === 'number' ? `${column.minWidth}px` : column.minWidth;
+        style.minWidth =
+            typeof column.minWidth === "number"
+                ? `${column.minWidth}px`
+                : column.minWidth;
     }
     if (column.maxWidth !== undefined) {
-        style.maxWidth = typeof column.maxWidth === 'number' ? `${column.maxWidth}px` : column.maxWidth;
+        style.maxWidth =
+            typeof column.maxWidth === "number"
+                ? `${column.maxWidth}px`
+                : column.maxWidth;
     }
     if (column.flex !== undefined) {
         style.flexGrow = column.flex;
@@ -14927,13 +14960,13 @@ function getColumnStyle(column, dynamicWidth) {
  * />
  * ```
  */
-function DataTable({ data, columns, loading = false, error = null, emptyMessage = 'No data available', loadingRows = 5, className = '', onSortChange, currentSort = null, onEdit, onDelete, actions = [], enableContextMenu = true, onRowClick, onRowDoubleClick, selectable = false, selectedRows: externalSelectedRows, onRowSelect, keyExtractor, expandable = false, expandedRows: externalExpandedRows, renderExpandedRow, expandedRowConfig, showExpandChevron = false, 
+function DataTable({ data, columns, loading = false, error = null, emptyMessage = "No data available", loadingRows = 5, className = "", onSortChange, currentSort = null, onEdit, onDelete, actions = [], enableContextMenu = true, onRowClick, onRowDoubleClick, selectable = false, selectedRows: externalSelectedRows, onRowSelect, keyExtractor, expandable = false, expandedRows: externalExpandedRows, renderExpandedRow, expandedRowConfig, showExpandChevron = false, 
 // Visual customization props
-striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, highlightedRowId, highlightedRows = [], highlightDuration = 2000, bordered = false, borderColor = 'border-paper-200', disableHover = false, hiddenColumns = [], headerClassName = '', renderEmptyState: customRenderEmptyState, resizable = false, onColumnResize, reorderable = false, onColumnReorder, virtualized = false, virtualHeight = '600px', virtualRowHeight = 60, 
+striped = false, stripedColor, density = "normal", rowClassName, rowHighlight, highlightedRowId, highlightedRows = [], highlightDuration = 2000, bordered = false, borderColor = "border-paper-200", disableHover = false, hiddenColumns = [], headerClassName = "", renderEmptyState: customRenderEmptyState, resizable = false, onColumnResize, reorderable = false, onColumnReorder, virtualized = false, virtualHeight = "600px", virtualRowHeight = 60, 
 // Pagination props
 paginated = false, currentPage = 1, pageSize = 10, totalItems, onPageChange, pageSizeOptions = [10, 25, 50, 100], onPageSizeChange, showPageSizeSelector = true, 
 // Mobile view props
-mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
+mobileView = "auto", cardConfig, cardGap = "md", cardClassName, }) {
     // Mobile detection for auto mode
     const isMobileViewport = useIsMobile();
     // Column resizing state
@@ -14952,7 +14985,7 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     const [hoveredRowKey, setHoveredRowKey] = React.useState(null);
     // Keyboard navigation state
     const [focusedCell, setFocusedCell] = React.useState(null);
-    const [announcement, setAnnouncement] = React.useState('');
+    const [announcement, setAnnouncement] = React.useState("");
     const tableBodyRef = React.useRef(null);
     // Temporary row highlight state (for flash animation)
     const [flashingRows, setFlashingRows] = React.useState(new Set());
@@ -14964,18 +14997,18 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
         item: null,
     });
     // Filter columns based on hiddenColumns
-    const baseVisibleColumns = columns.filter(col => !hiddenColumns.includes(String(col.key)));
+    const baseVisibleColumns = columns.filter((col) => !hiddenColumns.includes(String(col.key)));
     // Initialize column order on mount or when columns change
     React.useEffect(() => {
         if (columnOrder.length === 0) {
-            setColumnOrder(baseVisibleColumns.map(col => String(col.key)));
+            setColumnOrder(baseVisibleColumns.map((col) => String(col.key)));
         }
     }, [baseVisibleColumns, columnOrder.length]);
     // Handle temporary row highlighting (flash animation)
     React.useEffect(() => {
         if (highlightedRows.length > 0) {
             // Add new highlighted rows to flashing set
-            const newFlashingRows = new Set(highlightedRows.map(id => String(id)));
+            const newFlashingRows = new Set(highlightedRows.map((id) => String(id)));
             setFlashingRows(newFlashingRows);
             // Clear any existing timeout
             if (flashTimeoutRef.current) {
@@ -14995,25 +15028,25 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     // Apply column order
     const visibleColumns = reorderable && columnOrder.length > 0
         ? columnOrder
-            .map(key => baseVisibleColumns.find(col => String(col.key) === key))
+            .map((key) => baseVisibleColumns.find((col) => String(col.key) === key))
             .filter((col) => col !== undefined)
         : baseVisibleColumns;
     // Density classes
     const densityClasses = {
         compact: {
-            cell: 'px-3 py-1',
-            text: 'text-xs',
-            header: 'px-3 py-2',
+            cell: "px-3 py-1",
+            text: "text-xs",
+            header: "px-3 py-2",
         },
         normal: {
-            cell: 'px-6 py-1.5',
-            text: 'text-sm',
-            header: 'px-6 py-3',
+            cell: "px-6 py-1.5",
+            text: "text-sm",
+            header: "px-6 py-3",
         },
         comfortable: {
-            cell: 'px-6 py-3',
-            text: 'text-base',
-            header: 'px-6 py-4',
+            cell: "px-6 py-3",
+            text: "text-base",
+            header: "px-6 py-4",
         },
     };
     const currentDensity = densityClasses[density];
@@ -15021,20 +15054,25 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     const getRowKey = keyExtractor || ((row) => String(row.id));
     // Calculate if there are any actions (for keyboard navigation column calculation)
     // This is computed early so it can be used in keyboard handlers
-    const hasAnyActions = !!(onEdit || onDelete || actions.length > 0 ||
-        expandedRowConfig?.edit || expandedRowConfig?.details ||
-        expandedRowConfig?.addRelated?.length || expandedRowConfig?.manageRelated?.length);
+    const hasAnyActions = !!(onEdit ||
+        onDelete ||
+        actions.length > 0 ||
+        expandedRowConfig?.edit ||
+        expandedRowConfig?.details ||
+        expandedRowConfig?.addRelated?.length ||
+        expandedRowConfig?.manageRelated?.length);
     // Get row background class based on striping and highlighting
     const getRowBackgroundClass = (item, index) => {
         const classes = [];
         const rowKey = getRowKey(item);
         // Check for temporary flash highlight (takes priority)
         if (flashingRows.has(rowKey)) {
-            classes.push('animate-row-flash');
+            classes.push("animate-row-flash");
         }
         // Check for highlighted row
-        else if (highlightedRowId !== undefined && rowKey === String(highlightedRowId)) {
-            classes.push('bg-accent-100');
+        else if (highlightedRowId !== undefined &&
+            rowKey === String(highlightedRowId)) {
+            classes.push("bg-accent-100");
         }
         // Check for custom row highlight
         else if (rowHighlight) {
@@ -15046,24 +15084,27 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
         // Check for striping
         else if (striped) {
             const isOdd = index % 2 === 0; // 0-indexed, so even index = odd row
-            const shouldStripe = striped === true ? isOdd :
-                striped === 'odd' ? isOdd :
-                    striped === 'even' ? !isOdd :
-                        false;
+            const shouldStripe = striped === true
+                ? isOdd
+                : striped === "odd"
+                    ? isOdd
+                    : striped === "even"
+                        ? !isOdd
+                        : false;
             if (shouldStripe) {
-                classes.push(stripedColor || 'bg-paper-50');
+                classes.push(stripedColor || "bg-paper-50");
             }
         }
         // Add custom row class
         if (rowClassName) {
-            if (typeof rowClassName === 'string') {
+            if (typeof rowClassName === "string") {
                 classes.push(rowClassName);
             }
             else {
                 classes.push(rowClassName(item, index));
             }
         }
-        return classes.join(' ');
+        return classes.join(" ");
     };
     // NEW: Expansion mode state management (for expandedRowConfig)
     const [expansionState, setExpansionState] = React.useState(null);
@@ -15078,12 +15119,12 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     // Column reorder handlers
     const handleDragStart = (e, columnKey) => {
         setDraggingColumn(columnKey);
-        e.dataTransfer.effectAllowed = 'move';
-        e.dataTransfer.setData('text/html', columnKey);
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/html", columnKey);
     };
     const handleDragOver = (e, columnKey) => {
         e.preventDefault();
-        e.dataTransfer.dropEffect = 'move';
+        e.dataTransfer.dropEffect = "move";
         if (draggingColumn && draggingColumn !== columnKey) {
             setDragOverColumn(columnKey);
         }
@@ -15114,7 +15155,7 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
         const handleMouseMove = (e) => {
             const delta = e.clientX - resizeStartX;
             const newWidth = Math.max(50, resizeStartWidth + delta); // Min width 50px
-            setColumnWidths(prev => ({
+            setColumnWidths((prev) => ({
                 ...prev,
                 [resizingColumn]: newWidth,
             }));
@@ -15125,56 +15166,62 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
             }
             setResizingColumn(null);
         };
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
         return () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
         };
-    }, [resizingColumn, resizeStartX, resizeStartWidth, columnWidths, onColumnResize]);
+    }, [
+        resizingColumn,
+        resizeStartX,
+        resizeStartWidth,
+        columnWidths,
+        onColumnResize,
+    ]);
     // Build combined actions: built-in edit/delete + custom actions + expansion mode actions
     const builtInActions = [];
     // Legacy onEdit (still supported)
     if (onEdit) {
         builtInActions.push({
-            label: 'Edit',
+            label: "Edit",
             icon: lucideReact.Edit,
             onClick: onEdit,
-            variant: 'secondary',
-            tooltip: 'Edit item'
+            variant: "secondary",
+            tooltip: "Edit item",
         });
     }
     // NEW: Edit mode from expandedRowConfig
     if (expandedRowConfig?.edit && !onEdit) {
         const editConfig = expandedRowConfig.edit;
         builtInActions.push({
-            label: editConfig.menuLabel || 'Edit',
+            label: editConfig.menuLabel || "Edit",
             icon: editConfig.menuIcon || lucideReact.Edit,
             onClick: (item) => {
                 const rowKey = getRowKey(item);
-                handleExpansionWithMode(rowKey, 'edit');
+                handleExpansionWithMode(rowKey, "edit");
             },
-            variant: 'secondary',
-            tooltip: 'Edit inline'
+            variant: "secondary",
+            tooltip: "Edit inline",
         });
     }
     // NEW: View details mode from expandedRowConfig
     if (expandedRowConfig?.details) {
         const detailsConfig = expandedRowConfig.details;
         builtInActions.push({
-            label: detailsConfig.menuLabel || 'View Details',
+            label: detailsConfig.menuLabel || "View Details",
             icon: detailsConfig.menuIcon,
             onClick: (item) => {
                 const rowKey = getRowKey(item);
-                handleExpansionWithMode(rowKey, 'details');
+                handleExpansionWithMode(rowKey, "details");
             },
-            variant: 'ghost',
-            tooltip: 'View details'
+            variant: "ghost",
+            tooltip: "View details",
         });
     }
     // NEW: Add related modes from expandedRowConfig
     if (expandedRowConfig?.addRelated) {
-        expandedRowConfig.addRelated.forEach(config => {
+        expandedRowConfig.addRelated.forEach((config) => {
             if (config.showInMenu !== false) {
                 builtInActions.push({
                     label: config.label,
@@ -15183,15 +15230,15 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                         const rowKey = getRowKey(item);
                         handleExpansionWithMode(rowKey, `addRelated-${config.key}`);
                     },
-                    variant: 'secondary',
-                    tooltip: config.label
+                    variant: "secondary",
+                    tooltip: config.label,
                 });
             }
         });
     }
     // NEW: Manage related modes from expandedRowConfig
     if (expandedRowConfig?.manageRelated) {
-        expandedRowConfig.manageRelated.forEach(config => {
+        expandedRowConfig.manageRelated.forEach((config) => {
             if (config.showInMenu !== false) {
                 builtInActions.push({
                     label: config.label,
@@ -15200,8 +15247,8 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                         const rowKey = getRowKey(item);
                         handleExpansionWithMode(rowKey, `manageRelated-${config.key}`);
                     },
-                    variant: 'ghost',
-                    tooltip: config.label
+                    variant: "ghost",
+                    tooltip: config.label,
                 });
             }
         });
@@ -15211,11 +15258,11 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     let deleteAction = null;
     if (onDelete) {
         deleteAction = {
-            label: 'Delete',
+            label: "Delete",
             icon: lucideReact.Trash,
             onClick: onDelete,
-            variant: 'danger',
-            tooltip: 'Delete item'
+            variant: "danger",
+            tooltip: "Delete item",
         };
     }
     // Build final actions array with consistent ordering:
@@ -15228,11 +15275,11 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     const allActions = [
         ...builtInActions,
         ...actions,
-        ...(deleteAction ? [deleteAction] : [])
+        ...(deleteAction ? [deleteAction] : []),
     ];
     // Convert actions to menu items for context menu
     const convertActionsToMenuItems = (item) => {
-        const visibleActions = allActions.filter(action => !action.show || action.show(item));
+        const visibleActions = allActions.filter((action) => !action.show || action.show(item));
         return visibleActions.map((action, idx) => {
             let iconElement = null;
             if (action.icon) {
@@ -15240,7 +15287,9 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                     iconElement = action.icon;
                 }
                 else {
-                    iconElement = React.createElement(action.icon, { className: 'h-4 w-4' });
+                    iconElement = React.createElement(action.icon, {
+                        className: "h-4 w-4",
+                    });
                 }
             }
             return {
@@ -15248,7 +15297,7 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                 label: action.label,
                 icon: iconElement,
                 onClick: () => action.onClick(item),
-                danger: action.variant === 'danger',
+                danger: action.variant === "danger",
             };
         });
     };
@@ -15257,7 +15306,9 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     // Expansion state management
     const [internalExpandedRows, setInternalExpandedRows] = React.useState(new Set());
     // Use external selection if provided, otherwise internal
-    const selectedRowsSet = externalSelectedRows !== undefined ? externalSelectedRows : internalSelectedRows;
+    const selectedRowsSet = externalSelectedRows !== undefined
+        ? externalSelectedRows
+        : internalSelectedRows;
     const setSelectedRows = (newSet) => {
         if (externalSelectedRows !== undefined) {
             // Controlled component - notify parent
@@ -15291,7 +15342,9 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
         }
     };
     // Use external expansion if provided, otherwise internal
-    const expandedRowsSet = externalExpandedRows !== undefined ? externalExpandedRows : internalExpandedRows;
+    const expandedRowsSet = externalExpandedRows !== undefined
+        ? externalExpandedRows
+        : internalExpandedRows;
     const setExpandedRows = (newSet) => {
         if (externalExpandedRows !== undefined) ;
         else {
@@ -15333,10 +15386,10 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
         const totalCols = visibleColumns.length;
         // If no cell is focused, focus first data cell on first arrow key
         if (!focusedCell) {
-            if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+            if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(e.key)) {
                 e.preventDefault();
                 setFocusedCell({ row: 0, col: 0 });
-                const colHeader = visibleColumns[0]?.header || 'first column';
+                const colHeader = visibleColumns[0]?.header || "first column";
                 setAnnouncement(`Row 1, ${colHeader}`);
                 return;
             }
@@ -15344,73 +15397,73 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
         }
         const { row, col } = focusedCell;
         switch (e.key) {
-            case 'ArrowDown':
+            case "ArrowDown":
                 e.preventDefault();
                 if (row < totalRows - 1) {
                     const newRow = row + 1;
                     setFocusedCell({ row: newRow, col });
                     const rowItem = data[newRow];
-                    const colHeader = visibleColumns[col]?.header || '';
+                    const colHeader = visibleColumns[col]?.header || "";
                     const cellValue = rowItem[visibleColumns[col]?.key];
-                    setAnnouncement(`Row ${newRow + 1}, ${colHeader}: ${cellValue || 'empty'}`);
+                    setAnnouncement(`Row ${newRow + 1}, ${colHeader}: ${cellValue || "empty"}`);
                 }
                 break;
-            case 'ArrowUp':
+            case "ArrowUp":
                 e.preventDefault();
                 if (row > 0) {
                     const newRow = row - 1;
                     setFocusedCell({ row: newRow, col });
                     const rowItem = data[newRow];
-                    const colHeader = visibleColumns[col]?.header || '';
+                    const colHeader = visibleColumns[col]?.header || "";
                     const cellValue = rowItem[visibleColumns[col]?.key];
-                    setAnnouncement(`Row ${newRow + 1}, ${colHeader}: ${cellValue || 'empty'}`);
+                    setAnnouncement(`Row ${newRow + 1}, ${colHeader}: ${cellValue || "empty"}`);
                 }
                 break;
-            case 'ArrowRight':
+            case "ArrowRight":
                 e.preventDefault();
                 if (col < totalCols - 1) {
                     const newCol = col + 1;
                     setFocusedCell({ row, col: newCol });
                     const rowItem = data[row];
-                    const colHeader = visibleColumns[newCol]?.header || '';
+                    const colHeader = visibleColumns[newCol]?.header || "";
                     const cellValue = rowItem[visibleColumns[newCol]?.key];
-                    setAnnouncement(`${colHeader}: ${cellValue || 'empty'}`);
+                    setAnnouncement(`${colHeader}: ${cellValue || "empty"}`);
                 }
                 break;
-            case 'ArrowLeft':
+            case "ArrowLeft":
                 e.preventDefault();
                 if (col > 0) {
                     const newCol = col - 1;
                     setFocusedCell({ row, col: newCol });
                     const rowItem = data[row];
-                    const colHeader = visibleColumns[newCol]?.header || '';
+                    const colHeader = visibleColumns[newCol]?.header || "";
                     const cellValue = rowItem[visibleColumns[newCol]?.key];
-                    setAnnouncement(`${colHeader}: ${cellValue || 'empty'}`);
+                    setAnnouncement(`${colHeader}: ${cellValue || "empty"}`);
                 }
                 break;
-            case 'Home':
+            case "Home":
                 e.preventDefault();
                 if (e.ctrlKey) {
                     // Ctrl+Home: Go to first cell
                     setFocusedCell({ row: 0, col: 0 });
-                    setAnnouncement(`First cell, Row 1, ${visibleColumns[0]?.header || ''}`);
+                    setAnnouncement(`First cell, Row 1, ${visibleColumns[0]?.header || ""}`);
                 }
                 else {
                     // Home: Go to first cell in current row
                     setFocusedCell({ row, col: 0 });
                     const rowItem = data[row];
                     const cellValue = rowItem[visibleColumns[0]?.key];
-                    setAnnouncement(`${visibleColumns[0]?.header || ''}: ${cellValue || 'empty'}`);
+                    setAnnouncement(`${visibleColumns[0]?.header || ""}: ${cellValue || "empty"}`);
                 }
                 break;
-            case 'End':
+            case "End":
                 e.preventDefault();
                 if (e.ctrlKey) {
                     // Ctrl+End: Go to last cell
                     const lastRow = totalRows - 1;
                     const lastCol = totalCols - 1;
                     setFocusedCell({ row: lastRow, col: lastCol });
-                    setAnnouncement(`Last cell, Row ${lastRow + 1}, ${visibleColumns[lastCol]?.header || ''}`);
+                    setAnnouncement(`Last cell, Row ${lastRow + 1}, ${visibleColumns[lastCol]?.header || ""}`);
                 }
                 else {
                     // End: Go to last cell in current row
@@ -15418,10 +15471,10 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                     setFocusedCell({ row, col: lastCol });
                     const rowItem = data[row];
                     const cellValue = rowItem[visibleColumns[lastCol]?.key];
-                    setAnnouncement(`${visibleColumns[lastCol]?.header || ''}: ${cellValue || 'empty'}`);
+                    setAnnouncement(`${visibleColumns[lastCol]?.header || ""}: ${cellValue || "empty"}`);
                 }
                 break;
-            case 'Enter':
+            case "Enter":
                 e.preventDefault();
                 {
                     const rowItem = data[row];
@@ -15429,27 +15482,27 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                     // Priority: Edit mode > Details mode > Row double-click handler
                     if (onEdit) {
                         onEdit(rowItem);
-                        setAnnouncement('Opening edit mode');
+                        setAnnouncement("Opening edit mode");
                     }
                     else if (expandedRowConfig?.edit) {
-                        handleExpansionWithMode(rowKey, 'edit');
-                        setAnnouncement('Opening inline edit');
+                        handleExpansionWithMode(rowKey, "edit");
+                        setAnnouncement("Opening inline edit");
                     }
                     else if (expandedRowConfig?.details) {
-                        handleExpansionWithMode(rowKey, 'details');
-                        setAnnouncement('Opening details view');
+                        handleExpansionWithMode(rowKey, "details");
+                        setAnnouncement("Opening details view");
                     }
                     else if (onRowDoubleClick) {
                         onRowDoubleClick(rowItem);
-                        setAnnouncement('Activating row');
+                        setAnnouncement("Activating row");
                     }
                     else if (onRowClick) {
                         onRowClick(rowItem);
-                        setAnnouncement('Row selected');
+                        setAnnouncement("Row selected");
                     }
                 }
                 break;
-            case ' ':
+            case " ":
                 // Space: Toggle selection if selectable
                 if (selectable) {
                     e.preventDefault();
@@ -15457,60 +15510,82 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                     const rowKey = getRowKey(rowItem);
                     handleRowSelect(rowKey);
                     const isNowSelected = !selectedRowsSet.has(rowKey);
-                    setAnnouncement(isNowSelected ? 'Row selected' : 'Row deselected');
+                    setAnnouncement(isNowSelected ? "Row selected" : "Row deselected");
                 }
                 break;
-            case 'Escape':
+            case "Escape":
                 e.preventDefault();
                 setFocusedCell(null);
-                setAnnouncement('Table navigation exited');
+                setAnnouncement("Table navigation exited");
                 // Return focus to table container
-                tableBodyRef.current?.closest('table')?.focus();
+                tableBodyRef.current?.closest("table")?.focus();
                 break;
-            case 'PageDown':
+            case "PageDown":
                 e.preventDefault();
                 {
                     const jumpSize = 10;
                     const newRow = Math.min(row + jumpSize, totalRows - 1);
                     setFocusedCell({ row: newRow, col });
-                    const colHeader = visibleColumns[col]?.header || '';
+                    const colHeader = visibleColumns[col]?.header || "";
                     setAnnouncement(`Row ${newRow + 1} of ${totalRows}, ${colHeader}`);
                 }
                 break;
-            case 'PageUp':
+            case "PageUp":
                 e.preventDefault();
                 {
                     const jumpSize = 10;
                     const newRow = Math.max(row - jumpSize, 0);
                     setFocusedCell({ row: newRow, col });
-                    const colHeader = visibleColumns[col]?.header || '';
+                    const colHeader = visibleColumns[col]?.header || "";
                     setAnnouncement(`Row ${newRow + 1} of ${totalRows}, ${colHeader}`);
                 }
                 break;
         }
-    }, [data, visibleColumns, focusedCell, selectable, expandedRowConfig, onEdit, onRowDoubleClick, onRowClick, getRowKey, handleExpansionWithMode, handleRowSelect, selectedRowsSet]);
+    }, [
+        data,
+        visibleColumns,
+        focusedCell,
+        selectable,
+        expandedRowConfig,
+        onEdit,
+        onRowDoubleClick,
+        onRowClick,
+        getRowKey,
+        handleExpansionWithMode,
+        handleRowSelect,
+        selectedRowsSet,
+    ]);
     // Focus the appropriate cell when focusedCell changes
     React.useEffect(() => {
         if (focusedCell && tableBodyRef.current) {
             const { row, col } = focusedCell;
-            const rows = tableBodyRef.current.querySelectorAll('tr[data-row-index]');
+            const rows = tableBodyRef.current.querySelectorAll("tr[data-row-index]");
             const targetRow = rows[row];
             if (targetRow) {
                 // Calculate actual column index including extra columns
                 const hasSelectionCol = selectable;
                 const hasExpandCol = (expandable || expandedRowConfig) && showExpandChevron;
                 const hasActionsCol = hasAnyActions;
-                const extraColsBefore = (hasSelectionCol ? 1 : 0) + (hasExpandCol ? 1 : 0) + (hasActionsCol ? 1 : 0);
-                const cells = targetRow.querySelectorAll('td');
+                const extraColsBefore = (hasSelectionCol ? 1 : 0) +
+                    (hasExpandCol ? 1 : 0) +
+                    (hasActionsCol ? 1 : 0);
+                const cells = targetRow.querySelectorAll("td");
                 const targetCell = cells[col + extraColsBefore];
                 if (targetCell) {
                     targetCell.focus();
                     // Scroll into view if needed
-                    targetCell.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                    targetCell.scrollIntoView({ block: "nearest", inline: "nearest" });
                 }
             }
         }
-    }, [focusedCell, selectable, expandable, expandedRowConfig, showExpandChevron, hasAnyActions]);
+    }, [
+        focusedCell,
+        selectable,
+        expandable,
+        expandedRowConfig,
+        showExpandChevron,
+        hasAnyActions,
+    ]);
     // Handle column header click for sorting
     const handleSort = (column) => {
         if (!column.sortable || !onSortChange)
@@ -15518,8 +15593,12 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
         const columnKey = String(column.key);
         // If clicking the same column, toggle direction
         if (currentSort?.key === columnKey) {
-            if (currentSort.direction === 'asc') {
-                onSortChange({ key: columnKey, direction: 'desc', label: column.header });
+            if (currentSort.direction === "asc") {
+                onSortChange({
+                    key: columnKey,
+                    direction: "desc",
+                    label: column.header,
+                });
             }
             else {
                 // Remove sort on third click
@@ -15528,7 +15607,7 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
         }
         else {
             // New column - start with ascending
-            onSortChange({ key: columnKey, direction: 'asc', label: column.header });
+            onSortChange({ key: columnKey, direction: "asc", label: column.header });
         }
     };
     // Get sort icon SVG for column (matches reference ui-preview.html)
@@ -15537,7 +15616,7 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
             return null;
         const columnKey = String(column.key);
         const isActive = currentSort?.key === columnKey;
-        const isAscending = currentSort?.direction === 'asc';
+        const isAscending = currentSort?.direction === "asc";
         // Inactive state - show neutral up/down arrows
         if (!isActive) {
             return (jsxRuntime.jsx("svg", { className: "ml-2 w-4 h-4 text-ink-400 group-hover:text-ink-700", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) }));
@@ -15550,17 +15629,23 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
         return (jsxRuntime.jsx("svg", { className: "ml-2 w-4 h-4 text-accent-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 17l-4 4m0 0l-4-4m4 4V3" }) }));
     };
     // Render loading skeleton
-    const renderLoadingSkeleton = () => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: loadingRows }, (_, i) => (jsxRuntime.jsxs("tr", { className: `animate-pulse table-row-stable ${bordered ? `border-b ${borderColor}` : ''}`, children: [selectable && (jsxRuntime.jsx("td", { className: `sticky left-0 bg-white ${currentDensity.cell} border-b ${borderColor} z-10 align-middle`, children: jsxRuntime.jsx("div", { className: "h-4 w-4 bg-paper-200 rounded" }) })), expandable && (jsxRuntime.jsx("td", { className: `sticky left-0 bg-white px-2 ${currentDensity.cell} border-b ${borderColor} z-10`, children: jsxRuntime.jsx("div", { className: "h-4 w-4 bg-paper-200 rounded" }) })), allActions.length > 0 && (jsxRuntime.jsx("td", { className: `sticky left-0 bg-white px-2 ${currentDensity.cell} border-b ${borderColor} z-10`, children: jsxRuntime.jsx("div", { className: "h-8 w-8 bg-paper-200 rounded" }) })), visibleColumns.map((column, colIndex) => {
+    const renderLoadingSkeleton = () => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: loadingRows }, (_, i) => (jsxRuntime.jsxs("tr", { className: `animate-pulse table-row-stable ${bordered ? `border-b ${borderColor}` : ""}`, children: [selectable && (jsxRuntime.jsx("td", { className: `sticky left-0 bg-white ${currentDensity.cell} border-b ${borderColor} z-10 align-middle`, children: jsxRuntime.jsx("div", { className: "h-4 w-4 bg-paper-200 rounded" }) })), expandable && (jsxRuntime.jsx("td", { className: `sticky left-0 bg-white px-2 ${currentDensity.cell} border-b ${borderColor} z-10`, children: jsxRuntime.jsx("div", { className: "h-4 w-4 bg-paper-200 rounded" }) })), allActions.length > 0 && (jsxRuntime.jsx("td", { className: `sticky left-0 bg-white px-2 ${currentDensity.cell} border-b ${borderColor} z-10`, children: jsxRuntime.jsx("div", { className: "h-8 w-8 bg-paper-200 rounded" }) })), visibleColumns.map((column, colIndex) => {
                     const columnKey = String(column.key);
                     const dynamicWidth = columnWidths[columnKey];
-                    return (jsxRuntime.jsxs("td", { className: `${currentDensity.cell} whitespace-nowrap table-row-stable ${bordered ? `border ${borderColor}` : ''}`, style: getColumnStyle(column, dynamicWidth), children: [jsxRuntime.jsx("div", { className: "h-4 bg-paper-200 rounded mb-1" }), jsxRuntime.jsx("div", { className: "h-3 bg-paper-200 rounded w-3/4" })] }, `loading-${i}-${colIndex}`));
+                    return (jsxRuntime.jsxs("td", { className: `${currentDensity.cell} whitespace-nowrap table-row-stable ${bordered ? `border ${borderColor}` : ""}`, style: getColumnStyle(column, dynamicWidth), children: [jsxRuntime.jsx("div", { className: "h-4 bg-paper-200 rounded mb-1" }), jsxRuntime.jsx("div", { className: "h-3 bg-paper-200 rounded w-3/4" })] }, `loading-${i}-${colIndex}`));
                 })] }, `loading-${i}`))) }));
     // Render empty state
     const renderEmptyStateContent = () => {
         if (customRenderEmptyState) {
-            return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: visibleColumns.length + (allActions.length > 0 ? 1 : 0) + (selectable ? 1 : 0) + (expandable ? 1 : 0), children: customRenderEmptyState() }) }));
+            return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: visibleColumns.length +
+                        (allActions.length > 0 ? 1 : 0) +
+                        (selectable ? 1 : 0) +
+                        (expandable ? 1 : 0), children: customRenderEmptyState() }) }));
         }
-        return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: visibleColumns.length + (allActions.length > 0 ? 1 : 0) + (selectable ? 1 : 0) + (expandable ? 1 : 0), className: `${currentDensity.cell} py-8 text-center text-ink-500`, children: error || emptyMessage }) }));
+        return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: visibleColumns.length +
+                    (allActions.length > 0 ? 1 : 0) +
+                    (selectable ? 1 : 0) +
+                    (expandable ? 1 : 0), className: `${currentDensity.cell} py-8 text-center text-ink-500`, children: error || emptyMessage }) }));
     };
     // Virtual scrolling calculations
     const getVisibleRange = () => {
@@ -15590,14 +15675,18 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
             const isSelected = selectedRowsSet.has(rowKey);
             const isExpanded = expandedRowsSet.has(rowKey);
             const rowBgClass = getRowBackgroundClass(item, index);
-            const borderClass = bordered ? `border-b ${borderColor}` : (!visibleColumns.some(col => !!col.renderSecondary) ? `border-b ${borderColor}` : '');
-            const hasSecondaryRow = visibleColumns.some(col => !!col.renderSecondary);
+            const borderClass = bordered
+                ? `border-b ${borderColor}`
+                : !visibleColumns.some((col) => !!col.renderSecondary)
+                    ? `border-b ${borderColor}`
+                    : "";
+            const hasSecondaryRow = visibleColumns.some((col) => !!col.renderSecondary);
             // Hover state for row pair (primary + secondary)
             const isHovered = hoveredRowKey === rowKey;
-            const hoverClass = disableHover ? '' : (isHovered ? 'bg-paper-100' : '');
+            const hoverClass = disableHover ? "" : isHovered ? "bg-paper-100" : "";
             // Check if this row is keyboard-focused
             const isKeyboardFocused = focusedCell?.row === index;
-            return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("tr", { "data-row-index": index, className: `table-row-stable ${onRowDoubleClick || onRowClick || onEdit || expandedRowConfig?.edit || expandedRowConfig?.details || expandedRowConfig?.addRelated?.length || expandedRowConfig?.manageRelated?.length ? 'cursor-pointer' : ''} ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : hoverClass || rowBgClass} ${borderClass} ${isKeyboardFocused ? 'ring-2 ring-inset ring-accent-400' : ''}`, onMouseEnter: () => !disableHover && setHoveredRowKey(rowKey), onMouseLeave: () => !disableHover && setHoveredRowKey(null), onClick: () => onRowClick?.(item), onContextMenu: (e) => {
+            return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("tr", { "data-row-index": index, className: `table-row-stable ${onRowDoubleClick || onRowClick || onEdit || expandedRowConfig?.edit || expandedRowConfig?.details || expandedRowConfig?.addRelated?.length || expandedRowConfig?.manageRelated?.length ? "cursor-pointer" : ""} ${isSelected ? "bg-accent-50 border-l-2 border-accent-500" : hoverClass || rowBgClass} ${borderClass} ${isKeyboardFocused ? "ring-2 ring-inset ring-accent-400" : ""}`, onMouseEnter: () => !disableHover && setHoveredRowKey(rowKey), onMouseLeave: () => !disableHover && setHoveredRowKey(null), onClick: () => onRowClick?.(item), onContextMenu: (e) => {
                             if (enableContextMenu && allActions.length > 0) {
                                 e.preventDefault();
                                 e.stopPropagation();
@@ -15616,109 +15705,146 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                             }
                             // Priority 2: If there's an expandable edit mode, trigger it
                             else if (expandedRowConfig?.edit) {
-                                handleExpansionWithMode(rowKey, 'edit');
+                                handleExpansionWithMode(rowKey, "edit");
                             }
                             // Priority 3: If there's an expandable details mode, trigger it
                             else if (expandedRowConfig?.details) {
-                                handleExpansionWithMode(rowKey, 'details');
+                                handleExpansionWithMode(rowKey, "details");
                             }
                             // Priority 4: If there's any addRelated mode, trigger the first one
-                            else if (expandedRowConfig?.addRelated && expandedRowConfig.addRelated.length > 0) {
+                            else if (expandedRowConfig?.addRelated &&
+                                expandedRowConfig.addRelated.length > 0) {
                                 handleExpansionWithMode(rowKey, `addRelated-${expandedRowConfig.addRelated[0].key}`);
                             }
                             // Priority 5: If there's any manageRelated mode, trigger the first one
-                            else if (expandedRowConfig?.manageRelated && expandedRowConfig.manageRelated.length > 0) {
+                            else if (expandedRowConfig?.manageRelated &&
+                                expandedRowConfig.manageRelated.length > 0) {
                                 handleExpansionWithMode(rowKey, `manageRelated-${expandedRowConfig.manageRelated[0].key}`);
                             }
                             // Priority 6: Legacy onRowDoubleClick handler
                             else {
                                 onRowDoubleClick?.(item);
                             }
-                        }, title: onEdit ? 'Double-click to edit' :
-                            expandedRowConfig?.edit ? 'Double-click to edit inline' :
-                                expandedRowConfig?.details ? 'Double-click to view details' :
-                                    expandedRowConfig?.addRelated && expandedRowConfig.addRelated.length > 0 ? `Double-click to ${expandedRowConfig.addRelated[0].label}` :
-                                        expandedRowConfig?.manageRelated && expandedRowConfig.manageRelated.length > 0 ? `Double-click to ${expandedRowConfig.manageRelated[0].label}` :
-                                            onRowDoubleClick ? 'Double-click for details' :
-                                                onRowClick ? 'Click to select' :
-                                                    undefined, children: [selectable && (jsxRuntime.jsx("td", { className: `sticky left-0 z-10 ${bordered ? `border ${borderColor}` : ''}`, style: {
-                                    backgroundColor: 'inherit',
-                                    verticalAlign: 'middle',
-                                    padding: '0.375rem 0.75rem',
-                                    textAlign: 'center'
-                                }, rowSpan: hasSecondaryRow ? 2 : 1, children: jsxRuntime.jsx("input", { type: "checkbox", checked: isSelected, onChange: () => handleRowSelect(rowKey), className: "w-4 h-4 text-accent-600 border-paper-300 rounded focus:ring-accent-400", "aria-label": `Select row ${rowKey}` }) })), ((expandable || expandedRowConfig) && showExpandChevron) && (jsxRuntime.jsx("td", { className: `sticky left-0 px-2 ${currentDensity.cell} z-10 ${bordered ? `border ${borderColor}` : ''}`, style: { backgroundColor: 'inherit', verticalAlign: 'middle' }, rowSpan: hasSecondaryRow ? 2 : 1, children: jsxRuntime.jsx("button", { onClick: () => {
+                        }, title: onEdit
+                            ? "Double-click to edit"
+                            : expandedRowConfig?.edit
+                                ? "Double-click to edit inline"
+                                : expandedRowConfig?.details
+                                    ? "Double-click to view details"
+                                    : expandedRowConfig?.addRelated &&
+                                        expandedRowConfig.addRelated.length > 0
+                                        ? `Double-click to ${expandedRowConfig.addRelated[0].label}`
+                                        : expandedRowConfig?.manageRelated &&
+                                            expandedRowConfig.manageRelated.length > 0
+                                            ? `Double-click to ${expandedRowConfig.manageRelated[0].label}`
+                                            : onRowDoubleClick
+                                                ? "Double-click for details"
+                                                : onRowClick
+                                                    ? "Click to select"
+                                                    : undefined, children: [selectable && (jsxRuntime.jsx("td", { className: `sticky left-0 z-10 ${bordered ? `border ${borderColor}` : ""}`, style: {
+                                    backgroundColor: "inherit",
+                                    verticalAlign: "middle",
+                                    padding: "0.375rem 0.75rem",
+                                    textAlign: "center",
+                                }, rowSpan: hasSecondaryRow ? 2 : 1, children: jsxRuntime.jsx("input", { type: "checkbox", checked: isSelected, onChange: () => handleRowSelect(rowKey), className: "w-4 h-4 text-accent-600 border-paper-300 rounded focus:ring-accent-400", "aria-label": `Select row ${rowKey}` }) })), (expandable || expandedRowConfig) && showExpandChevron && (jsxRuntime.jsx("td", { className: `sticky left-0 px-2 ${currentDensity.cell} z-10 ${bordered ? `border ${borderColor}` : ""}`, style: { backgroundColor: "inherit", verticalAlign: "middle" }, rowSpan: hasSecondaryRow ? 2 : 1, children: jsxRuntime.jsx("button", { onClick: () => {
                                         // NEW: Enhanced logic for expandedRowConfig
-                                        if (expandedRowConfig?.details && expandedRowConfig.details.triggerOnExpand !== false) {
+                                        if (expandedRowConfig?.details &&
+                                            expandedRowConfig.details.triggerOnExpand !== false) {
                                             // Trigger details mode if configured
-                                            handleExpansionWithMode(rowKey, 'details');
+                                            handleExpansionWithMode(rowKey, "details");
                                         }
-                                        else if (expandedRowConfig?.edit && expandedRowConfig.edit.triggerOnDoubleClick !== false) {
+                                        else if (expandedRowConfig?.edit &&
+                                            expandedRowConfig.edit.triggerOnDoubleClick !== false) {
                                             // Fallback to edit mode if no details but edit is available
-                                            handleExpansionWithMode(rowKey, 'edit');
+                                            handleExpansionWithMode(rowKey, "edit");
                                         }
                                         else {
                                             // Legacy: use handleRowExpand
                                             handleRowExpand(rowKey);
                                         }
-                                    }, className: "text-ink-500 hover:text-ink-900 transition-colors", "aria-label": isExpanded || (expansionState?.rowKey === rowKey) ? 'Collapse row' : 'Expand row', children: isExpanded || (expansionState?.rowKey === rowKey) ? (jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })) : (jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })) }) })), allActions.length > 0 && (jsxRuntime.jsx("td", { className: "sticky left-0 whitespace-nowrap shadow-[4px_0_6px_-2px_rgba(0,0,0,0.1)] z-10", style: {
-                                    width: '28px',
-                                    padding: '0',
-                                    backgroundColor: 'inherit',
-                                    verticalAlign: 'middle'
-                                }, onClick: (e) => e.stopPropagation(), rowSpan: hasSecondaryRow ? 2 : 1, children: jsxRuntime.jsx("div", { style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '28px' }, children: jsxRuntime.jsx(ActionMenu, { actions: allActions, item: item }) }) })), visibleColumns.map((column, colIdx) => {
+                                    }, className: "text-ink-500 hover:text-ink-900 transition-colors", "aria-label": isExpanded || expansionState?.rowKey === rowKey
+                                        ? "Collapse row"
+                                        : "Expand row", children: isExpanded || expansionState?.rowKey === rowKey ? (jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })) : (jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })) }) })), allActions.length > 0 && (jsxRuntime.jsx("td", { className: "sticky left-0 whitespace-nowrap shadow-[4px_0_6px_-2px_rgba(0,0,0,0.1)] z-10", style: {
+                                    width: "28px",
+                                    padding: "0",
+                                    backgroundColor: "inherit",
+                                    verticalAlign: "middle",
+                                }, onClick: (e) => e.stopPropagation(), rowSpan: hasSecondaryRow ? 2 : 1, children: jsxRuntime.jsx("div", { style: {
+                                        display: "inline-flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        width: "28px",
+                                    }, children: jsxRuntime.jsx(ActionMenu, { actions: allActions, item: item }) }) })), visibleColumns.map((column, colIdx) => {
                                 const columnKey = String(column.key);
                                 const dynamicWidth = columnWidths[columnKey];
-                                const value = typeof column.key === 'string'
+                                const value = typeof column.key === "string"
                                     ? item[column.key]
                                     : item[column.key];
-                                const primaryContent = column.render ? column.render(item, value) : String(value || '');
+                                const primaryContent = column.render
+                                    ? column.render(item, value)
+                                    : String(value || "");
+                                // Tooltip: caller-provided > raw value stringified. Empty
+                                // strings get dropped so we don't render an empty title
+                                // attribute (which the browser would still show as a
+                                // 0-width tooltip box on hover).
+                                const primaryTooltipText = column.tooltip
+                                    ? column.tooltip(item, value)
+                                    : value !== null && value !== undefined && value !== ""
+                                        ? String(value)
+                                        : undefined;
                                 // Reduce left padding on first column when there are action buttons
                                 const isFirstColumn = colIdx === 0;
-                                const paddingClass = isFirstColumn && allActions.length > 0 ? 'pl-3' : '';
+                                const paddingClass = isFirstColumn && allActions.length > 0 ? "pl-3" : "";
                                 // Check if this cell is keyboard-focused
                                 const isCellFocused = focusedCell?.row === index && focusedCell?.col === colIdx;
-                                return (jsxRuntime.jsx("td", { className: `${currentDensity.cell} ${paddingClass} ${column.className || ''} ${bordered ? `border ${borderColor}` : ''} ${isCellFocused ? 'outline outline-2 outline-accent-500 outline-offset-[-2px]' : ''}`, style: getColumnStyle(column, dynamicWidth), tabIndex: isCellFocused ? 0 : -1, role: "gridcell", "aria-colindex": colIdx + 1, children: jsxRuntime.jsx("div", { className: `${currentDensity.text} leading-tight`, children: primaryContent }) }, `${item.id}-${columnKey}`));
-                            })] }), hasSecondaryRow && (jsxRuntime.jsx("tr", { className: `secondary-row ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : hoverClass || rowBgClass} border-b ${borderColor}`, onMouseEnter: () => !disableHover && setHoveredRowKey(rowKey), onMouseLeave: () => !disableHover && setHoveredRowKey(null), children: visibleColumns.map((column, colIdx) => {
+                                return (jsxRuntime.jsx("td", { className: `${currentDensity.cell} ${paddingClass} ${column.className || ""} ${bordered ? `border ${borderColor}` : ""} ${isCellFocused ? "outline outline-2 outline-accent-500 outline-offset-[-2px]" : ""}`, style: getColumnStyle(column, dynamicWidth), tabIndex: isCellFocused ? 0 : -1, role: "gridcell", "aria-colindex": colIdx + 1, children: jsxRuntime.jsx("div", { className: `${currentDensity.text} leading-tight`, title: primaryTooltipText, children: primaryContent }) }, `${item.id}-${columnKey}`));
+                            })] }), hasSecondaryRow && (jsxRuntime.jsx("tr", { className: `secondary-row ${isSelected ? "bg-accent-50 border-l-2 border-accent-500" : hoverClass || rowBgClass} border-b ${borderColor}`, onMouseEnter: () => !disableHover && setHoveredRowKey(rowKey), onMouseLeave: () => !disableHover && setHoveredRowKey(null), children: visibleColumns.map((column, colIdx) => {
                             const columnKey = String(column.key);
                             const dynamicWidth = columnWidths[columnKey];
-                            const value = typeof column.key === 'string'
+                            const value = typeof column.key === "string"
                                 ? item[column.key]
                                 : item[column.key];
-                            const secondaryContent = column.renderSecondary ? column.renderSecondary(item, value) : null;
+                            const secondaryContent = column.renderSecondary
+                                ? column.renderSecondary(item, value)
+                                : null;
+                            // Tooltip on the secondary row prefixes the field label when
+                            // available so the otherwise-unlabeled second row stays
+                            // self-describing on hover. Caller can override entirely
+                            // via `secondaryTooltip`.
+                            const hasSecondaryValue = value !== null && value !== undefined && value !== "";
+                            let secondaryTooltipText;
+                            if (column.secondaryTooltip) {
+                                secondaryTooltipText = column.secondaryTooltip(item, value);
+                            }
+                            else if (hasSecondaryValue) {
+                                secondaryTooltipText = column.secondaryHeader
+                                    ? `${column.secondaryHeader}: ${value}`
+                                    : String(value);
+                            }
+                            else if (column.secondaryHeader) {
+                                secondaryTooltipText = column.secondaryHeader;
+                            }
                             // Reduce left padding on first column when there are action buttons
                             const isFirstColumn = colIdx === 0;
-                            const paddingClass = isFirstColumn && allActions.length > 0 ? 'pl-3' : '';
-                            return (jsxRuntime.jsx("td", { className: `${currentDensity.cell} py-0.5 ${paddingClass} ${column.className || ''} ${bordered ? `border ${borderColor}` : ''}`, style: getColumnStyle(column, dynamicWidth), children: jsxRuntime.jsx("div", { className: "text-xs text-ink-500 leading-tight", children: secondaryContent || jsxRuntime.jsx("span", { className: "invisible", children: "\u2014" }) }) }, `${item.id}-${columnKey}-secondary`));
+                            const paddingClass = isFirstColumn && allActions.length > 0 ? "pl-3" : "";
+                            return (jsxRuntime.jsx("td", { className: `${currentDensity.cell} py-0.5 ${paddingClass} ${column.className || ""} ${bordered ? `border ${borderColor}` : ""}`, style: getColumnStyle(column, dynamicWidth), children: jsxRuntime.jsx("div", { className: "text-xs text-ink-500 leading-tight", title: secondaryTooltipText, children: secondaryContent || jsxRuntime.jsx("span", { className: "invisible", children: "\u2014" }) }) }, `${item.id}-${columnKey}-secondary`));
                         }) })), expandable && isExpanded && renderExpandedRow && (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: visibleColumns.length +
                                 (selectable ? 1 : 0) +
-                                (((expandable || expandedRowConfig) && showExpandChevron) ? 1 : 0) +
-                                (allActions.length > 0 ? 1 : 0), className: `${currentDensity.cell} py-4 bg-paper-50`, children: renderExpandedRow(item) }) })), expansionState && expansionState.rowKey === rowKey && expandedRowConfig && (() => {
-                        const mode = expansionState.mode;
-                        let content = null;
-                        let bgColorClass = 'bg-paper-50'; // Default
-                        // Edit mode
-                        if (mode === 'edit' && expandedRowConfig.edit) {
-                            bgColorClass = 'bg-paper-100/80 border-t border-b border-paper-300/80';
-                            content = expandedRowConfig.edit.render(item, async (_updated) => {
-                                // Handle save
-                                handleCollapseExpansion();
-                            }, () => {
-                                // Handle cancel
-                                handleCollapseExpansion();
-                            });
-                        }
-                        // Details mode
-                        else if (mode === 'details' && expandedRowConfig.details) {
-                            bgColorClass = 'bg-primary-50/80 border-t border-b border-primary-200/80';
-                            content = expandedRowConfig.details.render(item);
-                        }
-                        // Add related modes
-                        else if (mode.startsWith('addRelated-') && expandedRowConfig.addRelated) {
-                            const key = mode.replace('addRelated-', '');
-                            const config = expandedRowConfig.addRelated.find(c => c.key === key);
-                            if (config) {
-                                bgColorClass = 'bg-success-50/80 border-t border-b border-success-200/80';
-                                content = config.render(item, async (_newItem) => {
+                                ((expandable || expandedRowConfig) && showExpandChevron
+                                    ? 1
+                                    : 0) +
+                                (allActions.length > 0 ? 1 : 0), className: `${currentDensity.cell} py-4 bg-paper-50`, children: renderExpandedRow(item) }) })), expansionState &&
+                        expansionState.rowKey === rowKey &&
+                        expandedRowConfig &&
+                        (() => {
+                            const mode = expansionState.mode;
+                            let content = null;
+                            let bgColorClass = "bg-paper-50"; // Default
+                            // Edit mode
+                            if (mode === "edit" && expandedRowConfig.edit) {
+                                bgColorClass =
+                                    "bg-paper-100/80 border-t border-b border-paper-300/80";
+                                content = expandedRowConfig.edit.render(item, async (_updated) => {
                                     // Handle save
                                     handleCollapseExpansion();
                                 }, () => {
@@ -15726,31 +15852,57 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                                     handleCollapseExpansion();
                                 });
                             }
-                        }
-                        // Manage related modes
-                        else if (mode.startsWith('manageRelated-') && expandedRowConfig.manageRelated) {
-                            const key = mode.replace('manageRelated-', '');
-                            const config = expandedRowConfig.manageRelated.find(c => c.key === key);
-                            if (config) {
-                                bgColorClass = 'bg-slate-50/80 border-t border-b border-slate-200/80';
-                                const handleClose = () => setExpansionState(null);
-                                content = config.render(item, handleClose);
+                            // Details mode
+                            else if (mode === "details" && expandedRowConfig.details) {
+                                bgColorClass =
+                                    "bg-primary-50/80 border-t border-b border-primary-200/80";
+                                content = expandedRowConfig.details.render(item);
                             }
-                        }
-                        if (!content)
-                            return null;
-                        return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: visibleColumns.length +
-                                    (selectable ? 1 : 0) +
-                                    (((expandable || expandedRowConfig) && showExpandChevron) ? 1 : 0) +
-                                    (allActions.length > 0 ? 1 : 0), className: `${currentDensity.cell} py-4 ${bgColorClass} animate-expand`, children: content }) }, `expanded-${rowKey}`));
-                    })()] }, rowKey));
+                            // Add related modes
+                            else if (mode.startsWith("addRelated-") &&
+                                expandedRowConfig.addRelated) {
+                                const key = mode.replace("addRelated-", "");
+                                const config = expandedRowConfig.addRelated.find((c) => c.key === key);
+                                if (config) {
+                                    bgColorClass =
+                                        "bg-success-50/80 border-t border-b border-success-200/80";
+                                    content = config.render(item, async (_newItem) => {
+                                        // Handle save
+                                        handleCollapseExpansion();
+                                    }, () => {
+                                        // Handle cancel
+                                        handleCollapseExpansion();
+                                    });
+                                }
+                            }
+                            // Manage related modes
+                            else if (mode.startsWith("manageRelated-") &&
+                                expandedRowConfig.manageRelated) {
+                                const key = mode.replace("manageRelated-", "");
+                                const config = expandedRowConfig.manageRelated.find((c) => c.key === key);
+                                if (config) {
+                                    bgColorClass =
+                                        "bg-slate-50/80 border-t border-b border-slate-200/80";
+                                    const handleClose = () => setExpansionState(null);
+                                    content = config.render(item, handleClose);
+                                }
+                            }
+                            if (!content)
+                                return null;
+                            return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: visibleColumns.length +
+                                        (selectable ? 1 : 0) +
+                                        ((expandable || expandedRowConfig) && showExpandChevron
+                                            ? 1
+                                            : 0) +
+                                        (allActions.length > 0 ? 1 : 0), className: `${currentDensity.cell} py-4 ${bgColorClass} animate-expand`, children: content }) }, `expanded-${rowKey}`));
+                        })()] }, rowKey));
         });
     };
-    const tableContent = (jsxRuntime.jsxs("div", { className: `bg-white rounded-lg shadow border-2 ${borderColor} ${virtualized ? 'overflow-hidden' : 'overflow-x-auto overflow-y-visible'} ${className}`, style: { position: 'relative' }, children: [loading && data.length > 0 && (jsxRuntime.jsx("div", { className: "absolute inset-0 bg-white/75 flex items-center justify-center z-20", style: { backdropFilter: 'blur(2px)' }, children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3", children: [jsxRuntime.jsx("div", { className: "loading-spinner", style: { width: '32px', height: '32px', borderWidth: '3px' } }), jsxRuntime.jsx("span", { className: "text-sm font-medium text-ink-600", children: "Loading..." })] }) })), jsxRuntime.jsxs("table", { className: `table-stable w-full ${bordered ? 'border-collapse' : ''}`, role: "grid", "aria-label": "Data table", "aria-rowcount": data.length, "aria-colcount": visibleColumns.length, children: [jsxRuntime.jsxs("colgroup", { children: [selectable && jsxRuntime.jsx("col", { className: "w-12" }), ((expandable || expandedRowConfig) && showExpandChevron) && jsxRuntime.jsx("col", { className: "w-10" }), allActions.length > 0 && jsxRuntime.jsx("col", { style: { width: '28px' } }), visibleColumns.map((column, index) => {
+    const tableContent = (jsxRuntime.jsxs("div", { className: `bg-white rounded-lg shadow border-2 ${borderColor} ${virtualized ? "overflow-hidden" : "overflow-x-auto overflow-y-visible"} ${className}`, style: { position: "relative" }, children: [loading && data.length > 0 && (jsxRuntime.jsx("div", { className: "absolute inset-0 bg-white/75 flex items-center justify-center z-20", style: { backdropFilter: "blur(2px)" }, children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3", children: [jsxRuntime.jsx("div", { className: "loading-spinner", style: { width: "32px", height: "32px", borderWidth: "3px" } }), jsxRuntime.jsx("span", { className: "text-sm font-medium text-ink-600", children: "Loading..." })] }) })), jsxRuntime.jsxs("table", { className: `table-stable w-full ${bordered ? "border-collapse" : ""}`, role: "grid", "aria-label": "Data table", "aria-rowcount": data.length, "aria-colcount": visibleColumns.length, children: [jsxRuntime.jsxs("colgroup", { children: [selectable && jsxRuntime.jsx("col", { className: "w-12" }), (expandable || expandedRowConfig) && showExpandChevron && (jsxRuntime.jsx("col", { className: "w-10" })), allActions.length > 0 && jsxRuntime.jsx("col", { style: { width: "28px" } }), visibleColumns.map((column, index) => {
                                 const columnKey = String(column.key);
                                 const dynamicWidth = columnWidths[columnKey];
                                 return (jsxRuntime.jsx("col", { style: getColumnStyle(column, dynamicWidth) }, index));
-                            })] }), jsxRuntime.jsx("thead", { className: `bg-paper-100 sticky top-0 z-10 ${headerClassName}`, children: jsxRuntime.jsxs("tr", { className: "table-header-row", children: [selectable && (jsxRuntime.jsx("th", { className: `sticky left-0 bg-paper-100 ${currentDensity.header} border-b ${borderColor} z-20 w-12 ${bordered ? `border ${borderColor}` : ''}`, children: jsxRuntime.jsx("input", { type: "checkbox", checked: selectedRowsSet.size === data.length && data.length > 0, onChange: handleSelectAll, className: "w-4 h-4 text-accent-600 border-paper-300 rounded focus:ring-accent-400", "aria-label": "Select all rows" }) })), ((expandable || expandedRowConfig) && showExpandChevron) && (jsxRuntime.jsx("th", { className: `sticky left-0 bg-paper-100 px-2 ${currentDensity.header} border-b ${borderColor} z-19 w-10 ${bordered ? `border ${borderColor}` : ''}` })), allActions.length > 0 && (jsxRuntime.jsx("th", { className: `sticky left-0 bg-paper-100 text-center text-xs font-medium text-ink-700 uppercase tracking-wider border-b ${borderColor} z-20 ${bordered ? `border ${borderColor}` : ''}`, style: { width: '28px', padding: '0' } })), visibleColumns.map((column, colIdx) => {
+                            })] }), jsxRuntime.jsx("thead", { className: `bg-paper-100 sticky top-0 z-10 ${headerClassName}`, children: jsxRuntime.jsxs("tr", { className: "table-header-row", children: [selectable && (jsxRuntime.jsx("th", { className: `sticky left-0 bg-paper-100 ${currentDensity.header} border-b ${borderColor} z-20 w-12 ${bordered ? `border ${borderColor}` : ""}`, children: jsxRuntime.jsx("input", { type: "checkbox", checked: selectedRowsSet.size === data.length && data.length > 0, onChange: handleSelectAll, className: "w-4 h-4 text-accent-600 border-paper-300 rounded focus:ring-accent-400", "aria-label": "Select all rows" }) })), (expandable || expandedRowConfig) && showExpandChevron && (jsxRuntime.jsx("th", { className: `sticky left-0 bg-paper-100 px-2 ${currentDensity.header} border-b ${borderColor} z-19 w-10 ${bordered ? `border ${borderColor}` : ""}` })), allActions.length > 0 && (jsxRuntime.jsx("th", { className: `sticky left-0 bg-paper-100 text-center text-xs font-medium text-ink-700 uppercase tracking-wider border-b ${borderColor} z-20 ${bordered ? `border ${borderColor}` : ""}`, style: { width: "28px", padding: "0" } })), visibleColumns.map((column, colIdx) => {
                                     const columnKey = String(column.key);
                                     const dynamicWidth = columnWidths[columnKey];
                                     const thRef = React.useRef(null);
@@ -15758,24 +15910,28 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
                                     const isDragOver = dragOverColumn === columnKey;
                                     // Reduce left padding on first column when there are action buttons (match body cells)
                                     const isFirstColumn = colIdx === 0;
-                                    const headerPaddingClass = isFirstColumn && allActions.length > 0 ? 'pl-3' : '';
+                                    const headerPaddingClass = isFirstColumn && allActions.length > 0 ? "pl-3" : "";
                                     return (jsxRuntime.jsxs("th", { ref: thRef, draggable: reorderable, onDragStart: (e) => reorderable && handleDragStart(e, columnKey), onDragOver: (e) => reorderable && handleDragOver(e, columnKey), onDragEnd: handleDragEnd, onDrop: (e) => reorderable && handleDrop(e, columnKey), className: `
-                    ${currentDensity.header} ${headerPaddingClass} text-left border-b ${borderColor} ${bordered ? `border ${borderColor}` : ''} relative
-                    ${reorderable ? 'cursor-move' : ''}
-                    ${isDragging ? 'opacity-50' : ''}
-                    ${isDragOver ? 'bg-accent-100' : ''}
+                    ${currentDensity.header} ${headerPaddingClass} text-left border-b ${borderColor} ${bordered ? `border ${borderColor}` : ""} relative
+                    ${reorderable ? "cursor-move" : ""}
+                    ${isDragging ? "opacity-50" : ""}
+                    ${isDragOver ? "bg-accent-100" : ""}
                   `, style: getColumnStyle(column, dynamicWidth), children: [column.sortable ? (jsxRuntime.jsxs("button", { onClick: () => handleSort(column), className: "group inline-flex items-center text-xs font-medium text-ink-500 uppercase tracking-wider hover:text-ink-900 transition-colors", children: [jsxRuntime.jsx("span", { children: column.header }), getSortIcon(column)] })) : (jsxRuntime.jsx("span", { className: "text-xs font-medium text-ink-500 uppercase tracking-wider", children: column.header })), resizable && (jsxRuntime.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-accent-400 group", onMouseDown: (e) => {
                                                     const currentWidth = thRef.current?.offsetWidth || 100;
                                                     handleResizeStart(e, columnKey, currentWidth);
                                                 }, children: jsxRuntime.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-1 bg-paper-300 group-hover:bg-accent-400 transition-colors" }) }))] }, columnKey));
-                                })] }) }), jsxRuntime.jsx("tbody", { ref: tableBodyRef, className: "bg-white table-loading transition-opacity duration-200", onKeyDown: handleKeyboardNavigation, tabIndex: 0, role: "rowgroup", "aria-label": "Table data", children: loading && data.length === 0 ? (renderLoadingSkeleton()) : data.length === 0 ? (renderEmptyStateContent()) : (renderDataRows()) })] })] }));
+                                })] }) }), jsxRuntime.jsx("tbody", { ref: tableBodyRef, className: "bg-white table-loading transition-opacity duration-200", onKeyDown: handleKeyboardNavigation, tabIndex: 0, role: "rowgroup", "aria-label": "Table data", children: loading && data.length === 0
+                            ? renderLoadingSkeleton()
+                            : data.length === 0
+                                ? renderEmptyStateContent()
+                                : renderDataRows() })] })] }));
     // Wrap in scrollable container if virtualized
-    const finalContent = virtualized ? (jsxRuntime.jsx("div", { ref: tableContainerRef, onScroll: handleScroll, style: { height: virtualHeight, overflow: 'auto' }, className: "rounded-lg", children: tableContent })) : tableContent;
+    const finalContent = virtualized ? (jsxRuntime.jsx("div", { ref: tableContainerRef, onScroll: handleScroll, style: { height: virtualHeight, overflow: "auto" }, className: "rounded-lg", children: tableContent })) : (tableContent);
     // Calculate pagination values
     const effectiveTotalItems = totalItems ?? data.length;
     const totalPages = Math.ceil(effectiveTotalItems / pageSize);
     // Page size selector options
-    const pageSizeSelectOptions = pageSizeOptions.map(size => ({
+    const pageSizeSelectOptions = pageSizeOptions.map((size) => ({
         value: String(size),
         label: `${size} per page`,
     }));
@@ -15783,17 +15939,20 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     const renderPaginationControls = () => {
         if (!paginated)
             return null;
-        return (jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4 px-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [showPageSizeSelector && onPageSizeChange && (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-ink-600", children: "Show:" }), jsxRuntime.jsx(Select, { options: pageSizeSelectOptions, value: String(pageSize), onChange: (value) => onPageSizeChange?.(Number(value)) })] })), jsxRuntime.jsx("span", { className: "text-sm text-ink-600", children: effectiveTotalItems > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["Showing ", ((currentPage - 1) * pageSize) + 1, " - ", Math.min(currentPage * pageSize, effectiveTotalItems), " of ", effectiveTotalItems] })) : ('No items') })] }), totalPages > 1 && onPageChange && (jsxRuntime.jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }))] }));
+        return (jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4 px-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [showPageSizeSelector && onPageSizeChange && (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-ink-600", children: "Show:" }), jsxRuntime.jsx(Select, { options: pageSizeSelectOptions, value: String(pageSize), onChange: (value) => onPageSizeChange?.(Number(value)) })] })), jsxRuntime.jsx("span", { className: "text-sm text-ink-600", children: effectiveTotalItems > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["Showing ", (currentPage - 1) * pageSize + 1, " -", " ", Math.min(currentPage * pageSize, effectiveTotalItems), " of", " ", effectiveTotalItems] })) : ("No items") })] }), totalPages > 1 && onPageChange && (jsxRuntime.jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }))] }));
     };
     // Determine if we should show card view
-    const shouldShowCardView = mobileView === 'card' ||
-        (mobileView === 'auto' && isMobileViewport);
+    const shouldShowCardView = mobileView === "card" || (mobileView === "auto" && isMobileViewport);
     // Card view content
     const cardViewContent = shouldShowCardView ? (jsxRuntime.jsx(DataTableCardView, { data: data, columns: visibleColumns, cardConfig: cardConfig, loading: loading, loadingRows: loadingRows, emptyMessage: emptyMessage, onCardClick: onRowClick, onCardLongPress: (item, event) => {
             if (enableContextMenu && allActions.length > 0) {
                 event.preventDefault();
-                const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;
-                const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+                const clientX = "touches" in event
+                    ? event.touches[0].clientX
+                    : event.clientX;
+                const clientY = "touches" in event
+                    ? event.touches[0].clientY
+                    : event.clientY;
                 setContextMenuState({
                     isOpen: true,
                     position: { x: clientX, y: clientY },
@@ -15802,7 +15961,11 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
             }
         }, selectable: selectable, selectedRows: selectedRowsSet, onSelectionChange: onRowSelect ? (rows) => onRowSelect(rows) : undefined, keyExtractor: getRowKey, actions: allActions, onEdit: onEdit, onDelete: onDelete, className: className, cardClassName: cardClassName, gap: cardGap })) : null;
     // Render with context menu
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: announcement }), renderPaginationControls(), shouldShowCardView ? cardViewContent : finalContent, contextMenuState.isOpen && contextMenuState.item && (jsxRuntime.jsx(Menu, { items: convertActionsToMenuItems(contextMenuState.item), position: contextMenuState.position, onClose: () => setContextMenuState({ isOpen: false, position: { x: 0, y: 0 }, item: null }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: announcement }), renderPaginationControls(), shouldShowCardView ? cardViewContent : finalContent, contextMenuState.isOpen && contextMenuState.item && (jsxRuntime.jsx(Menu, { items: convertActionsToMenuItems(contextMenuState.item), position: contextMenuState.position, onClose: () => setContextMenuState({
+                    isOpen: false,
+                    position: { x: 0, y: 0 },
+                    item: null,
+                }) }))] }));
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};