@jmruthers/pace-core 0.6.6 → 0.6.7

package/docs/getting-started/quick-reference.md

@@ -92,7 +92,7 @@ import { useUnifiedAuth } from '@jmruthers/pace-core';
 function MyComponent() {
   const { user, loading, signIn, signOut } = useUnifiedAuth();
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <p>Loading...</p>;
   if (!user) return <button onClick={signIn}>Sign In</button>;
 
   return (
@@ -184,7 +184,7 @@ function SuperAdminPanel() {
 
   if (!isSuperAdmin) return null;
 
-  return <div>Super admin panel</div>;
+  return <section>Super admin panel</section>;
 }
 ```
 
@@ -510,7 +510,7 @@ function MyComponent() {
   const { user, loading, error } = useUnifiedAuth();
 
   if (error) {
-    return <div>Error: {error.message}</div>;
+    return <p>Error: {error.message}</p>;
   }
 
   // ... rest of component
@@ -611,4 +611,4 @@ function AdminPanel() {
 - **Common Issues**: [Troubleshooting Guide](./troubleshooting/common-issues.md)
 - **Debugging**: [Debugging Guide](./troubleshooting/debugging.md)
 - **Migration**: [Migration Guide](./migration/)
-- **Security**: [Security Best Practices](./best-practices/security.md)
+- **Security**: [Security & RBAC Standards](../standards/6-security-rbac-standards.md)

package/docs/implementation-guides/authentication.md

@@ -326,9 +326,9 @@ function UserDashboard() {
     hasEventAccess, // Check event access
   } = useUnifiedAuth();
 
-  if (loading) return <div>Loading...</div>;
-  if (error) return <div>Error: {error.message}</div>;
-  if (!user) return <div>Please log in</div>;
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+  if (!user) return <p>Please log in</p>;
 
   return (
     <div>
@@ -441,14 +441,14 @@ function EventContent() {
   const { selectedEvent, hasEventAccess } = useUnifiedAuth();
 
   if (!selectedEvent) {
-    return <div>Please select an event</div>;
+    return <p>Please select an event</p>;
   }
 
   if (!hasEventAccess(selectedEvent.id)) {
-    return <div>You don't have access to this event</div>;
+    return <p>You don't have access to this event</p>;
   }
 
-  return <div>Event content for {selectedEvent.name}</div>;
+  return <section>Event content for {selectedEvent.name}</section>;
 }
 ```
 
@@ -703,14 +703,14 @@ function ConditionalContent() {
   const { user, loading } = useUnifiedAuth();
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <p>Loading...</p>;
   }
 
   if (!user) {
-    return <div>Please log in to continue</div>;
+    return <p>Please log in to continue</p>;
   }
 
-  return <div>Welcome, {user.email}!</div>;
+  return <p>Welcome, {user.email}!</p>;
 }
 ```
 
@@ -850,11 +850,11 @@ function App() {
 function AuthTest() {
   const { user, loading, error } = useUnifiedAuth();
   
-  if (loading) return <div>Loading...</div>;
-  if (error) return <div>Error: {error.message}</div>;
-  if (!user) return <div>Not logged in</div>;
-  
-  return <div>Welcome {user.email}</div>;
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+  if (!user) return <p>Not logged in</p>;
+
+  return <p>Welcome {user.email}</p>;
 }
 ```
 
@@ -1105,7 +1105,7 @@ See the [Authentication Implementation Guide](./authentication.md) for a complet
 
 ### Advanced Patterns
 
-See the [Common Patterns Guide](./best-practices/common-patterns.md) for advanced authentication patterns.
+See the [Authentication Implementation Guide](./authentication.md) for advanced authentication patterns and the [Standards Overview](../standards/0-standards-overview.md) for compliance requirements.
 
 ## Related Documentation
 

package/docs/implementation-guides/component-styling.md

@@ -408,7 +408,7 @@ function DashboardCard({ title, children }) {
 ## Related Documentation
 
 - [Styling Overview](../styles/README.md) - Complete styling system
-- [Performance Guide](../best-practices/performance.md) - Performance optimization
+- [Performance Optimization](../standards/9-operations-standards.md#performance-optimization) - Performance optimization
 - [Component API Reference](../api-reference/components.md) - Component props
 
 ---

package/docs/implementation-guides/data-tables.md

@@ -408,11 +408,11 @@ const columns: DataTableColumn<Dish>[] = [
       const indentLevel = isParent ? 0 : 1;
       
       return (
-        <div className={`flex items-center ${isParent ? 'font-semibold' : ''}`}>
-          <div style={{ marginLeft: `${indentLevel * 20}px` }}>
+        <section className={`flex items-center ${isParent ? 'font-semibold' : ''}`}>
+          <section style={{ marginLeft: `${indentLevel * 20}px` }}>
             {isParent ? '🍽️' : '🥬'} {row.original.name}
-          </div>
-        </div>
+          </section>
+        </section>
       );
     }
   },
@@ -478,26 +478,26 @@ const columns: DataTableColumn<Dish>[] = [
       if (isParent) {
         // Parent row actions
         return (
-          <div className="flex gap-2">
+          <section className="flex gap-2">
             <Button size="sm" variant="outline">
               Edit Dish
             </Button>
             <Button size="sm" variant="outline">
               Add Ingredient
             </Button>
-          </div>
+          </section>
         );
       } else {
         // Child row actions
         return (
-          <div className="flex gap-2">
+          <section className="flex gap-2">
             <Button size="sm" variant="ghost">
               Edit Ingredient
             </Button>
             <Button size="sm" variant="ghost">
               Remove
             </Button>
-          </div>
+          </section>
         );
       }
     }
@@ -1197,7 +1197,7 @@ import { DataTable } from '@jmruthers/pace-core';
 
 **✅ Column Alignment in Virtualized Tables**
 - **Problem**: Header and body columns were misaligned in virtualized mode due to separate table layouts.
-- **Solution**: Enhanced `VirtualizedDataTable` component with synchronized column sizing between header and body tables, `table-fixed` layout for consistent column widths, dynamic column width calculation and synchronization, proper `useLayoutEffect` for measuring actual column widths.
+- **Solution**: `UnifiedTableBody` component handles virtualization automatically with synchronized column sizing between header and body tables, `table-fixed` layout for consistent column widths, dynamic column width calculation and synchronization, proper virtualization handling for large datasets.
 
 **✅ Pagination State Synchronization**
 - **Problem**: Page size dropdown showed 50 but displayed 20 rows due to hardcoded values and virtualization conflicts.
@@ -2167,7 +2167,7 @@ function UserForm({ user, onSubmit, onCancel }) {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-      <div>
+      <section>
         <label htmlFor="name">Name</label>
         <input
           id="name"
@@ -2177,9 +2177,9 @@ function UserForm({ user, onSubmit, onCancel }) {
         {errors.name && (
           <p className="text-acc-600 text-sm">{errors.name.message}</p>
         )}
-      </div>
+      </section>
 
-      <div>
+      <section>
         <label htmlFor="email">Email</label>
         <input
           id="email"
@@ -2190,9 +2190,9 @@ function UserForm({ user, onSubmit, onCancel }) {
         {errors.email && (
           <p className="text-acc-600 text-sm">{errors.email.message}</p>
         )}
-      </div>
+      </section>
 
-      <div>
+      <section>
         <label htmlFor="role">Role</label>
         <select
           id="role"
@@ -2206,9 +2206,9 @@ function UserForm({ user, onSubmit, onCancel }) {
         {errors.role && (
           <p className="text-acc-600 text-sm">{errors.role.message}</p>
         )}
-      </div>
+      </section>
 
-      <div className="flex gap-2">
+      <section className="flex gap-2">
         <button
           type="submit"
           disabled={isSubmitting}
@@ -2223,7 +2223,7 @@ function UserForm({ user, onSubmit, onCancel }) {
         >
           Cancel
         </button>
-      </div>
+      </section>
     </form>
   );
 }
@@ -2496,25 +2496,118 @@ If you're upgrading from a previous version:
 
 ### Component Structure
 
+The DataTable component is built with a modular architecture that separates concerns and provides clear component boundaries. The structure is organized into main components, sub-components, hooks, utilities, and core architecture classes.
+
 ```
-DataTable
-├── useDataTablePerformance (hook)
-│   ├── DataChunkManager
-│   ├── SearchIndex
-│   ├── PerformanceMonitor
-│   └── VisibilityTracker
-├── VirtualizedDataTable (when enabled)
-│   ├── MemoizedRow
-│   └── MemoizedCell
-├── HierarchicalDataTable (when enabled)
-│   ├── ExpandCollapseControls
-│   └── HierarchicalRow
-└── EnhancedPaginationControls
-    ├── Performance metrics display
-    ├── Jump to page functionality
-    └── Memory usage tracking
+DataTable (Main Entry Point)
+│
+├── DataTableCore (Internal Orchestrator)
+│   ├── DataTableErrorBoundary
+│   ├── LoadingState
+│   ├── AccessDeniedPage
+│   └── DataTableLayout
+│       │
+│       ├── DataTableToolbar
+│       │   ├── GroupingDropdown
+│       │   ├── ColumnVisibilityDropdown
+│       │   └── BulkOperationsDropdown
+│       │
+│       ├── UnifiedTableBody
+│       │   ├── FilterRow
+│       │   │   └── ColumnFilter
+│       │   ├── MemoizedRow (RowComponent)
+│       │   │   ├── EditableRow
+│       │   │   │   └── EditFields
+│       │   │   ├── ActionButtons
+│       │   │   └── RowComponent (handles grouped rows inline and hierarchical expand/collapse)
+│       │   └── EmptyState
+│       │
+│       ├── PaginationControls
+│       │   └── EnhancedPaginationControls (when enabled)
+│       │
+│       └── DataTableModals
+│           └── ImportModal
+│
+├── Hooks (State & Logic Management)
+│   ├── useDataTableState
+│   ├── useDataTableDataPipeline
+│   ├── useDataTableConfiguration
+│   ├── useDataTablePermissions
+│   ├── useTableColumns
+│   ├── useTableHandlers
+│   ├── useColumnOrderPersistence
+│   ├── useColumnVisibilityPersistence
+│   ├── useEffectiveColumnOrder
+│   ├── useHierarchicalState
+│   ├── useServerSideDataEffect
+│   ├── useKeyboardNavigation
+│   └── useDataTablePerformance (from core hooks)
+│       ├── DataChunkManager
+│       ├── SearchIndex
+│       ├── PerformanceMonitor
+│       └── VisibilityTracker
+│
+├── Core Architecture Classes
+│   ├── ColumnFactory
+│   ├── ColumnManager
+│   ├── DataManager
+│   ├── StateManager
+│   ├── ActionManager
+│   ├── LocalDataAdapter
+│   └── PluginRegistry
+│
+└── Utilities
+    ├── aggregationUtils (sum, average, count, min, max)
+    ├── columnUtils
+    ├── exportUtils
+    ├── hierarchicalUtils
+    ├── hierarchicalSorting
+    ├── paginationUtils
+    ├── performanceUtils
+    ├── rowUtils
+    ├── a11yUtils
+    ├── errorHandling
+    └── flexibleImport
 ```
 
+#### Component Descriptions
+
+**Main Components:**
+- **`DataTable`**: Public API component that wraps `DataTableCore` with feature normalization
+- **`DataTableCore`**: Internal orchestrator that manages all hooks, state, and sub-components
+- **`DataTableLayout`**: Main layout component that arranges toolbar, body, pagination, and modals
+
+**Toolbar Components:**
+- **`DataTableToolbar`**: Top toolbar with search, grouping, column visibility, and action buttons
+- **`GroupingDropdown`**: Dropdown for selecting columns to group by
+- **`ColumnVisibilityDropdown`**: Dropdown for showing/hiding columns
+- **`BulkOperationsDropdown`**: Menu for bulk operations (delete selected, etc.)
+
+**Table Body Components:**
+- **`UnifiedTableBody`**: Unified component that handles both standard and virtualized rendering
+- **`FilterRow`**: Row of filter inputs below column headers
+- **`ColumnFilter`**: Individual column filter component
+- **`MemoizedRow`** (RowComponent): Individual table row with memoization
+- **`EditableRow`**: Inline editable row with form fields
+- **`EditFields`**: Field renderers for editable columns (text, select, date, number, boolean)
+- **`ActionButtons`**: Row action buttons (edit, delete, custom actions)
+- **Hierarchical expand/collapse**: Handled inline by `RowComponent` for hierarchical rows
+- **Grouped rows**: Handled inline by `RowComponent` when `row.getIsGrouped()` returns true
+- **`EmptyState`**: Component displayed when table has no data
+
+**Pagination Components:**
+- **`PaginationControls`**: Standard pagination controls
+- **`EnhancedPaginationControls`**: Enhanced version with performance metrics and jump-to-page
+
+**Modal Components:**
+- **`DataTableModals`**: Container for all modal dialogs
+- **`ImportModal`**: CSV import modal with column mapping
+
+**Supporting Components:**
+- **`DataTableErrorBoundary`**: Error boundary for graceful error handling
+- **`LoadingState`**: Loading indicator component
+- **`AccessDeniedPage`**: Component shown when user lacks permissions
+
 ### Performance Utilities
 
 - **`determinePaginationMode`**: Automatically selects optimal pagination strategy

package/docs/implementation-guides/datatable-rbac-usage.md

@@ -271,7 +271,7 @@ function DishesPage() {
     console.log('Deleting dish:', row);
   };
 
-  if (loading) return <div>Loading dishes...</div>;
+  if (loading) return <p>Loading dishes...</p>;
 
   return (
     <div>

package/docs/implementation-guides/dynamic-colors.md

@@ -93,7 +93,7 @@ function MyApp() {
   // Automatically applies event colors when an event is selected
   useEventTheme();
   
-  return <div>Your app content</div>;
+  return <main>Your app content</main>;
 }
 ```
 
@@ -268,7 +268,7 @@ import { useEventTheme } from '@jmruthers/pace-core';
 function MyApp() {
   useEventTheme(); // Automatically applies event colors
   
-  return <div>Your app content</div>;
+  return <main>Your app content</main>;
 }
 ```
 
@@ -319,7 +319,7 @@ function App() {
 function App() {
   useEventTheme(); // Replaces the above useEffect
   
-  return <div>Your app</div>;
+  return <main>Your app</main>;
 }
 ```
 

package/docs/implementation-guides/file-upload-storage.md

@@ -388,7 +388,7 @@ function FileManager() {
     <div>
       {/* Upload UI */}
       {isLoading && <div>Uploading...</div>}
-      {error && <div>Error: {error.message}</div>}
+      {error && <p>Error: {error.message}</p>}
     </div>
   );
 }
@@ -941,6 +941,6 @@ When network is interrupted during upload:
 ## Next Steps
 
 - **[Storage Utilities](../api-reference/utilities.md#storage)** - Additional storage utilities
-- **[Security Best Practices](../best-practices/security.md)** - Security guidelines
+- **[Security & RBAC Standards](../standards/6-security-rbac-standards.md)** - Security guidelines
 - **[RBAC Integration](./permission-enforcement.md)** - Permission-based file access
 - **[Performance Optimization](./performance.md)** - Large file handling

package/docs/implementation-guides/hierarchical-datatable.md

@@ -112,20 +112,20 @@ const columns: DataTableColumn<Dish>[] = [
     header: 'Name',
     // Different rendering for parent vs child rows
     renderForParent: (row) => (
-      <div className="flex items-center gap-2">
+      <section className="flex items-center gap-2">
         <span className="font-semibold text-main-800">{row.name}</span>
         <span className="text-xs bg-main-100 text-main-700 px-2 py-1 rounded">
           {row.type}
         </span>
-      </div>
+      </section>
     ),
     renderForChild: (row) => (
-      <div className="flex items-center gap-2 ml-4">
+      <section className="flex items-center gap-2 ml-4">
         <span className="text-sec-700">{row.name}</span>
         <span className="text-xs bg-sec-100 text-sec-600 px-2 py-1 rounded">
           {row.type}
         </span>
-      </div>
+      </section>
     ),
   },
   {
@@ -133,14 +133,14 @@ const columns: DataTableColumn<Dish>[] = [
     accessorKey: 'cost',
     header: 'Cost',
     renderForParent: (row) => (
-      <div className="text-right font-semibold text-main-800">
+      <p className="text-right font-semibold text-main-800">
         ${row.cost?.toFixed(2)}
-      </div>
+      </p>
     ),
     renderForChild: (row) => (
-      <div className="text-right text-sec-600 ml-4">
+      <p className="text-right text-sec-600 ml-4">
         ${row.cost?.toFixed(2)}
-      </div>
+      </p>
     ),
   },
   {
@@ -150,10 +150,10 @@ const columns: DataTableColumn<Dish>[] = [
     // Only show for child rows
     renderForParent: () => null,
     renderForChild: (row) => (
-      <div className="text-sm ml-4">
+      <p className="text-sm ml-4">
         <span className="font-medium">{row.quantity}</span>
         {row.unit && <span className="text-sec-500 ml-1">{row.unit}</span>}
-      </div>
+      </p>
     ),
     hideForParent: true, // Hide this column for parent rows
   }
@@ -193,7 +193,7 @@ hierarchical={{
   onExpandedChange: (expandedIds) => {
     console.log('Expanded rows:', expandedIds);
   },
-  expandButton: CustomExpandButton, // Optional custom expand button
+  // Note: Custom expand button functionality has been removed. Expand/collapse is handled inline by RowComponent.
   indentSize: 24,                  // Indentation for child rows in pixels
   parentRowClassName: 'bg-main-50 font-medium', // CSS classes for parent rows
   childRowClassName: 'bg-sec-25',  // CSS classes for child rows
@@ -207,7 +207,7 @@ hierarchical={{
 | `enabled` | `boolean` | `false` | Enable/disable hierarchical functionality |
 | `defaultExpanded` | `boolean \| string[]` | `false` | Initial expansion state |
 | `onExpandedChange` | `(expandedIds: string[]) => void` | `undefined` | Callback when expansion changes |
-| `expandButton` | `React.ComponentType` | `ExpandButton` | Custom expand/collapse button |
+| `expandButton` | ~~`React.ComponentType`~~ | ~~`ExpandButton`~~ | ~~Custom expand/collapse button~~ **DEPRECATED - Removed** |
 | `indentSize` | `number` | `24` | Indentation for child rows in pixels |
 | `parentRowClassName` | `string` | `''` | CSS classes for parent rows |
 | `childRowClassName` | `string` | `''` | CSS classes for child rows |
@@ -240,16 +240,16 @@ const column: DataTableColumn<YourType> = {
   id: 'actions',
   header: 'Actions',
   renderForParent: (row) => (
-    <div className="flex gap-2">
+    <section className="flex gap-2">
       <Button size="sm">Edit Recipe</Button>
       <Button size="sm" variant="outline">Add Ingredient</Button>
-    </div>
+    </section>
   ),
   renderForChild: (row) => (
-    <div className="flex gap-2">
+    <section className="flex gap-2">
       <Button size="sm" variant="ghost">Edit</Button>
       <Button size="sm" variant="destructive">Remove</Button>
-    </div>
+    </section>
   ),
 }
 ```
@@ -277,29 +277,9 @@ The DataTable automatically adds an expand/collapse all button in the header whe
 You can provide a custom expand button component:
 
 ```tsx
-import { ChevronRight, ChevronDown } from 'lucide-react';
-
-const CustomExpandButton = ({ isExpanded, onClick, ...props }) => (
-  <button
-    onClick={onClick}
-    className="p-1 hover:bg-sec-100 rounded"
-    {...props}
-  >
-    {isExpanded ? (
-      <ChevronDown className="h-4 w-4" />
-    ) : (
-      <ChevronRight className="h-4 w-4" />
-    )}
-  </button>
-);
-
-// Use in DataTable
-<DataTable
-  hierarchical={{
-    enabled: true,
-    expandButton: CustomExpandButton,
-  }}
-/>
+// Note: Custom expand button functionality has been removed.
+// Expand/collapse buttons are now handled inline by RowComponent.
+// The expandButton prop is no longer available in HierarchicalConfig.
 ```
 
 ## Hierarchical Actions
@@ -510,20 +490,20 @@ function HierarchicalDishTable() {
       enableSorting: true,
       size: 200,
       renderForParent: (row) => (
-        <div className="flex items-center gap-2">
+        <section className="flex items-center gap-2">
           <span className="font-semibold text-main-800">{row.name}</span>
           <span className="text-xs bg-main-100 text-main-700 px-2 py-1 rounded">
             {row.type}
           </span>
-        </div>
+        </section>
       ),
       renderForChild: (row) => (
-        <div className="flex items-center gap-2 ml-4">
+        <section className="flex items-center gap-2 ml-4">
           <span className="text-sec-700">{row.name}</span>
           <span className="text-xs bg-sec-100 text-sec-600 px-2 py-1 rounded">
             {row.type}
           </span>
-        </div>
+        </section>
       ),
     },
     {
@@ -533,14 +513,14 @@ function HierarchicalDishTable() {
       enableSorting: true,
       size: 250,
       renderForParent: (row) => (
-        <div className="text-sm text-sec-600">
+        <p className="text-sm text-sec-600">
           {row.description}
-        </div>
+        </p>
       ),
       renderForChild: (row) => (
-        <div className="text-sm text-sec-500 ml-4">
+        <p className="text-sm text-sec-500 ml-4">
           {row.description}
-        </div>
+        </p>
       ),
     },
     {
@@ -551,10 +531,10 @@ function HierarchicalDishTable() {
       size: 120,
       renderForParent: () => null,
       renderForChild: (row) => (
-        <div className="text-sm ml-4">
+        <p className="text-sm ml-4">
           <span className="font-medium">{row.quantity}</span>
           {row.unit && <span className="text-sec-500 ml-1">{row.unit}</span>}
-        </div>
+        </p>
       ),
       hideForParent: true,
     },
@@ -565,14 +545,14 @@ function HierarchicalDishTable() {
       enableSorting: true,
       size: 100,
       renderForParent: (row) => (
-        <div className="text-right font-semibold text-main-800">
+        <p className="text-right font-semibold text-main-800">
           ${row.cost?.toFixed(2)}
-        </div>
+        </p>
       ),
       renderForChild: (row) => (
-        <div className="text-right text-sec-600 ml-4">
+        <p className="text-right text-sec-600 ml-4">
           ${row.cost?.toFixed(2)}
-        </div>
+        </p>
       ),
     },
     {
@@ -583,9 +563,9 @@ function HierarchicalDishTable() {
       size: 150,
       renderForParent: () => null,
       renderForChild: (row) => (
-        <div className="text-sm text-sec-600 ml-4">
+        <p className="text-sm text-sec-600 ml-4">
           {row.supplier}
-        </div>
+        </p>
       ),
       hideForParent: true,
     },
@@ -596,11 +576,11 @@ function HierarchicalDishTable() {
       enableSorting: true,
       size: 100,
       renderForParent: (row) => (
-        <div className="text-center">
+        <section className="text-center">
           <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-sec-100 text-sec-800">
             {row.prepTime} min
           </span>
-        </div>
+        </section>
       ),
       renderForChild: () => null,
       hideForChild: true,
@@ -618,11 +598,11 @@ function HierarchicalDishTable() {
           Hard: 'bg-acc-100 text-acc-800'
         };
         return (
-          <div className="text-center">
+          <section className="text-center">
             <span className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium ${colors[row.difficulty as keyof typeof colors] || 'bg-sec-100 text-sec-800'}`}>
               {row.difficulty}
             </span>
-          </div>
+          </section>
         );
       },
       renderForChild: () => null,
@@ -812,7 +792,7 @@ interface HierarchicalConfig {
   enabled: boolean;
   defaultExpanded?: boolean | string[];
   onExpandedChange?: (expandedIds: string[]) => void;
-  expandButton?: React.ComponentType<ExpandButtonProps>;
+  // expandButton prop has been removed - expand/collapse is handled inline by RowComponent
   indentSize?: number;
   parentRowClassName?: string;
   childRowClassName?: string;