@jmruthers/pace-core 0.6.6 → 0.6.8

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;

package/docs/implementation-guides/inactivity-tracking.md

@@ -449,7 +449,7 @@ function AuthenticatedApp() {
 
   // Don't track inactivity if not authenticated
   if (loading || !user) {
-    return <div>Loading...</div>;
+    return <p>Loading...</p>;
   }
 
   return (
@@ -831,5 +831,5 @@ When user extends session during warning:
 
 - **[Authentication Integration](./permission-enforcement.md)** - Security patterns
 - **[Performance Optimization](./performance.md)** - Large application considerations
-- **[Accessibility Guidelines](../best-practices/accessibility.md)** - Accessibility best practices
-- **[Security Best Practices](../best-practices/security.md)** - Security considerations
+- **[Accessibility Requirements](../standards/4-code-quality-standards.md#accessibility-requirements)** - Accessibility requirements
+- **[Security & RBAC Standards](../standards/6-security-rbac-standards.md)** - Security considerations

package/docs/implementation-guides/large-datasets.md

@@ -10,11 +10,12 @@ This guide addresses the common issues when working with large datasets (9,000+
 
 **Problem**: Header and body columns were misaligned in virtualized mode due to separate table layouts.
 
-**Solution**: Enhanced `VirtualizedDataTable` component with:
+**Solution**: `UnifiedTableBody` component automatically handles virtualization 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
+- Automatic virtualization when data exceeds 1000 records
+- Proper virtualization handling for optimal performance
 
 ```tsx
 // ✅ Now properly aligned

package/docs/implementation-guides/organisation-security.md

@@ -819,5 +819,5 @@ When invalid organisation IDs are provided:
 
 - **[RBAC System](../rbac/README.md)** - Role-based access control
 - **[Permission Enforcement](./permission-enforcement.md)** - UI permission patterns
-- **[Security Best Practices](../best-practices/security.md)** - Security guidelines
-- **[Audit Logging](../best-practices/audit-logging.md)** - Comprehensive audit patterns
+- **[Security & RBAC Standards](../standards/6-security-rbac-standards.md)** - Security guidelines
+- **[Operations Standards](../standards/9-operations-standards.md)** - Error handling and monitoring

package/docs/implementation-guides/performance.md

@@ -299,9 +299,9 @@ EnhancedDataTable
 │   ├── SearchIndex
 │   ├── PerformanceMonitor
 │   └── VisibilityTracker
-├── VirtualizedDataTable (when enabled)
+├── UnifiedTableBody (with automatic virtualization)
 │   ├── MemoizedRow
-│   └── MemoizedCell
+│   └── Virtualized rows (when data > 1000 records)
 └── EnhancedPaginationControls
     ├── Performance metrics display
     ├── Jump to page functionality

package/docs/implementation-guides/permission-enforcement.md

@@ -701,7 +701,7 @@ useEffect(() => {
    ```tsx
    const { selectedOrganisationId } = useUnifiedAuth();
    if (!selectedOrganisationId) {
-     return <div>Please select an organisation first</div>;
+     return <p>Please select an organisation first</p>;
    }
    ```
 

package/docs/migration/V0.3.44_organisation-context-timing-fix.md

@@ -60,7 +60,7 @@ function OrganisationContextGuard({ children }) {
   }, [selectedOrganisation, supabase]);
 
   if (!contextReady) {
-    return <div>Setting up organisation context...</div>;
+    return <p>Setting up organisation context...</p>;
   }
 
   return <>{children}</>;

package/docs/migration/V0.4.0_rbac-migration.md

@@ -239,7 +239,7 @@ function UserActions() {
     'delete:users'
   );
 
-  if (isLoadingEdit || isLoadingDelete) return <div>Loading permissions...</div>;
+  if (isLoadingEdit || isLoadingDelete) return <p>Loading permissions...</p>;
 
   return (
     <div>
@@ -375,7 +375,7 @@ const { can: canEdit, isLoading } = useCan(
   'update:users'
 );
 
-if (isLoading) return <div>Loading...</div>;
+if (isLoading) return <p>Loading...</p>;
 return canEdit ? <EditButton /> : null;
 ```
 
@@ -406,7 +406,7 @@ const canCreate = hasPermission('create:users');
 const canUpdate = hasPermission('update:users');
 const canDelete = hasPermission('delete:users');
 
-if (isLoading) return <div>Loading permissions...</div>;
+if (isLoading) return <p>Loading permissions...</p>;
 ```
 
 ### Pattern 3: Component Guards
@@ -504,8 +504,8 @@ function UserActions({ userId, scope }) {
     checkPermission();
   }, [hasPermission, isLoading, userId, scope]);
 
-  if (error) return <div>Error checking permissions</div>;
-  if (isLoading) return <div>Loading...</div>;
+  if (error) return <p>Error checking permissions</p>;
+  if (isLoading) return <p>Loading...</p>;
 
   return (
     <div>
@@ -595,7 +595,7 @@ const canEdit = await hasPermission('update:users', { userId, scope });
 ```tsx
 const { hasPermission, isLoading } = useCan();
 
-if (isLoading) return <div>Loading permissions...</div>;
+if (isLoading) return <p>Loading permissions...</p>;
 ```
 
 ### Getting Help

package/docs/rbac/README.md

@@ -56,7 +56,7 @@ function MyComponent() {
     <PagePermissionGuard
       pageName="users"
       operation="read"
-      fallback={<div>Access Denied</div>}
+      fallback={<p>Access Denied</p>}
     >
       <UserList />
     </PagePermissionGuard>
@@ -232,9 +232,9 @@ function UsersPage() {
     <PagePermissionGuard
       pageName="users"
       operation="read"
-      fallback={<div>You don't have permission to view this page</div>}
+      fallback={<p>You don't have permission to view this page</p>}
     >
-      <div>
+      <section>
         <h1>User Management</h1>
         
         {/* Multiple operations on same page */}
@@ -261,7 +261,7 @@ function UsersPage() {
         >
           <DeleteUserButtons />
         </PagePermissionGuard>
-      </div>
+      </section>
     </PagePermissionGuard>
   );
 }
@@ -282,7 +282,7 @@ function AdminPanel() {
     <PagePermissionGuard
       pageName="admin"
       operation="read"
-      fallback={<div>Access denied</div>}
+      fallback={<p>Access denied</p>}
     >
       <UserManagement />
     </PagePermissionGuard>

package/docs/rbac/advanced-patterns.md

@@ -379,7 +379,7 @@ export function withPermission(permission: string, fallback?: React.ComponentTyp
 
 // Usage
 const ProtectedUserList = withPermission('read:users', () => (
-  <div>Access denied to user list</div>
+  <p>Access denied to user list</p>
 ))(UserList);
 
 // In component
@@ -436,16 +436,16 @@ export const useOrganisationPermissions = createPermissionHook('organisations');
 function UserManagement({ userId, scope }) {
   const { permissions, isLoading } = useUserPermissions(userId, scope);
 
-  if (isLoading) return <div>Loading permissions...</div>;
+  if (isLoading) return <p>Loading permissions...</p>;
 
   return (
-    <div>
+    <section>
       {permissions.read && <UserList />}
       {permissions.create && <CreateUserButton />}
       {permissions.update && <EditUserButton />}
       {permissions.delete && <DeleteUserButton />}
       {permissions.manage && <UserManagementPanel />}
-    </div>
+    </section>
   );
 }
 ```
@@ -647,7 +647,7 @@ import { withPermission } from './permission-decorators';
 
 // Mock component
 const TestComponent = ({ data }: { data: string }) => (
-  <div>Test Component: {data}</div>
+  <p>Test Component: {data}</p>
 );
 
 describe('Permission Decorators', () => {
@@ -684,7 +684,7 @@ describe('Permission Decorators', () => {
       })
     }));
 
-    const FallbackComponent = () => <div>Access Denied</div>;
+    const FallbackComponent = () => <p>Access Denied</p>;
     const ProtectedComponent = withPermission('read:users', FallbackComponent)(TestComponent);
 
     render(

package/docs/rbac/api-reference.md

@@ -44,13 +44,13 @@ function UserActions() {
     undefined // No pageId for event-app permissions
   );
 
-  if (error) return <div>Error: {error.message}</div>;
-  if (isLoading) return <div>Checking permissions...</div>;
+  if (error) return <p>Error: {error.message}</p>;
+  if (isLoading) return <p>Checking permissions...</p>;
 
   return (
-    <div>
+    <section>
       {can && <EventActions />}
-    </div>
+    </section>
   );
 }
 ```
@@ -87,19 +87,19 @@ function PermissionDisplay() {
     }
   );
 
-  if (isLoading) return <div>Loading permissions...</div>;
-  if (error) return <div>Error: {error.message}</div>;
+  if (isLoading) return <p>Loading permissions...</p>;
+  if (error) return <p>Error: {error.message}</p>;
 
   return (
-    <div>
+    <section>
       <h3>User Permissions</h3>
       {Object.entries(permissions).map(([pageId, operations]) => (
-        <div key={pageId}>
+        <p key={pageId}>
           <strong>{pageId}:</strong> {operations.join(', ')}
-        </div>
+        </p>
       ))}
       <button onClick={refetch}>Refresh</button>
-    </div>
+    </section>
   );
 }
 ```
@@ -128,13 +128,13 @@ function AccessLevelDisplay({ userId, scope }) {
     scope
   });
 
-  if (isLoading) return <div>Loading access level...</div>;
-  if (error) return <div>Error: {error.message}</div>;
+  if (isLoading) return <p>Loading access level...</p>;
+  if (error) return <p>Error: {error.message}</p>;
 
   return (
-    <div>
+    <section>
       <p>Access Level: {accessLevel || 'None'}</p>
-    </div>
+    </section>
   );
 }
 ```
@@ -183,12 +183,12 @@ function UserManagement({ userId, scope }) {
   }, [checkMultiple, isLoading, userId, scope]);
 
   return (
-    <div>
+    <section>
       {permissions['read:users'] && <UserList />}
       {permissions['create:users'] && <CreateUserButton />}
       {permissions['update:users'] && <EditUserButton />}
       {permissions['delete:users'] && <DeleteUserButton />}
-    </div>
+    </section>
   );
 }
 ```
@@ -221,12 +221,12 @@ import { PermissionEnforcer } from '@jmruthers/pace-core/rbac';
 
 function UserActions() {
   return (
-    <div>
+    <section>
       {/* Pattern 1: PermissionEnforcer - automatic scope resolution */}
       <PermissionEnforcer
         permissions={['read:users']}
         operation="user-management"
-        fallback={<div>Access Denied</div>}
+        fallback={<p>Access Denied</p>}
       >
         <UserList />
       </PermissionEnforcer>
@@ -236,11 +236,11 @@ function UserActions() {
         permissions={['create:users', 'update:users']}
         operation="user-crud"
         requireAll={true} // User needs ALL permissions
-        fallback={<div>You need create and update permissions</div>}
+        fallback={<p>You need create and update permissions</p>}
       >
         <UserManagementPanel />
       </PermissionEnforcer>
-    </div>
+    </section>
   );
 }
 ```

package/docs/rbac/event-based-apps.md

@@ -491,7 +491,7 @@ export function Dashboard() {
   const { user, selectedEventId, selectedOrganisationId } = useUnifiedAuth()
 
   if (!user) {
-    return <div>Please log in</div>
+    return <p>Please log in</p>
   }
 
   return (
@@ -580,7 +580,7 @@ export function Participants() {
   const { user, selectedEventId, selectedOrganisationId } = useUnifiedAuth()
 
   if (!user) {
-    return <div>Please log in</div>
+    return <p>Please log in</p>
   }
 
   return (
@@ -748,7 +748,7 @@ setupRBAC(supabase) // Must be called BEFORE rendering app
        setSelectedEventId('your-event-id');
      }, []);
      
-     return <div>...</div>;
+     return <p>...</p>;
    }
    ```