@jmruthers/pace-core 0.6.6 → 0.6.7

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>;
    }
    ```
 

package/docs/rbac/examples.md

@@ -17,7 +17,7 @@ import { PagePermissionGuard } from '@jmruthers/pace-core/rbac';
 
 function UserProfile() {
   return (
-    <div>
+    <section>
       <h1>User Profile</h1>
       <PagePermissionGuard
         pageName="profile"
@@ -26,7 +26,7 @@ function UserProfile() {
       >
         <EditButton />
       </PagePermissionGuard>
-    </div>
+    </section>
   );
 }
 ```
@@ -86,7 +86,7 @@ import { PagePermissionGuard } from '@jmruthers/pace-core/rbac';
 
 function AdminPanel() {
   return (
-    <div>
+    <section>
       <h1>Admin Panel</h1>
       
       <PagePermissionGuard
@@ -100,11 +100,11 @@ function AdminPanel() {
       <PagePermissionGuard
         pageName="system"
         operation="manage"
-        fallback={<div>System management access required</div>}
+        fallback={<p>System management access required</p>}
       >
         <SystemSettings />
       </PagePermissionGuard>
-    </div>
+    </section>
   );
 }
 ```
@@ -116,14 +116,14 @@ import { AccessLevelGuard } from '@jmruthers/pace-core/rbac';
 
 function EventManagement({ userId, scope }) {
   return (
-    <div>
+    <section>
       <h1>Event Management</h1>
       
       <AccessLevelGuard
         userId={userId}
         scope={scope}
         requiredLevel="planner"
-        fallback={<div>Planner access required</div>}
+        fallback={<p>Planner access required</p>}
       >
         <EventPlanning />
       </AccessLevelGuard>
@@ -132,11 +132,11 @@ function EventManagement({ userId, scope }) {
         userId={userId}
         scope={scope}
         requiredLevel="admin"
-        fallback={<div>Admin access required</div>}
+        fallback={<p>Admin access required</p>}
       >
         <EventAdminPanel />
       </AccessLevelGuard>
-    </div>
+    </section>
   );
 }
 ```
@@ -185,7 +185,7 @@ function UsersTable({ users, userId, scope }) {
       id: 'actions',
       header: 'Actions',
       cell: ({ row }) => (
-        <div className="flex space-x-2">
+        <section className="flex space-x-2">
           {permissions.canEdit && (
             <button onClick={() => editUser(row.original.id)}>
               Edit
@@ -196,7 +196,7 @@ function UsersTable({ users, userId, scope }) {
               Delete
             </button>
           )}
-        </div>
+        </section>
       ),
     },
   ];
@@ -246,31 +246,31 @@ function UserForm({ userId, scope, userData }) {
 
   return (
     <form>
-      <div>
+      <section>
         <label>Name</label>
         <input defaultValue={userData.name} />
-      </div>
+      </section>
       
-      <div>
+      <section>
         <label>Email</label>
         <input defaultValue={userData.email} />
-      </div>
+      </section>
       
       {permissions.canEditRole && (
-        <div>
+        <section>
           <label>Role</label>
           <select defaultValue={userData.role}>
             <option value="user">User</option>
             <option value="admin">Admin</option>
           </select>
-        </div>
+        </section>
       )}
       
       {permissions.canEditPermissions && (
-        <div>
+        <section>
           <label>Permissions</label>
           <PermissionSelector defaultValue={userData.permissions} />
-        </div>
+        </section>
       )}
       
       <button type="submit">Save</button>
@@ -318,7 +318,7 @@ function Navigation({ userId, scope }) {
     checkNavigationPermissions();
   }, [hasPermission, isLoading, userId, scope]);
 
-  if (isLoading) return <div>Loading navigation...</div>;
+  if (isLoading) return <p>Loading navigation...</p>;
 
   return (
     <nav>
@@ -449,12 +449,12 @@ function OptimizedUserList({ userId, scope }) {
   }, [hasPermission, isLoading, userId, scope]);
 
   return (
-    <div>
+    <section>
       {permissions.canRead && <UserList />}
       {permissions.canCreate && <CreateUserButton />}
       {permissions.canUpdate && <EditUserButton />}
       {permissions.canDelete && <DeleteUserButton />}
-    </div>
+    </section>
   );
 }
 ```
@@ -477,11 +477,11 @@ function UserActions({ userId, scope }) {
   };
 
   return (
-    <div>
+    <section>
       <button onClick={() => handleUserUpdate(userData)}>
         Update User
       </button>
-    </div>
+    </section>
   );
 }
 ```
@@ -525,18 +525,18 @@ function UserManagement({ userId, scope }) {
   }, [hasPermission, isLoading, userId, scope]);
 
   if (error) {
-    return <div>Error: {error.message}</div>;
+    return <p>Error: {error.message}</p>;
   }
 
   if (isLoading) {
-    return <div>Checking permissions...</div>;
+    return <p>Checking permissions...</p>;
   }
 
   return (
-    <div>
-      {errorMessage && <div className="error">{errorMessage}</div>}
+    <section>
+      {errorMessage && <p className="error">{errorMessage}</p>}
       {canEdit && <EditUserButton />}
-    </div>
+    </section>
   );
 }
 ```
@@ -571,9 +571,9 @@ function CustomUserActions({ userId, scope, user }) {
   }, [hasPermission, userId, scope, user]);
 
   return (
-    <div>
+    <section>
       {canEdit && <EditUserButton userId={user.id} />}
-    </div>
+    </section>
   );
 }
 ```
@@ -610,11 +610,11 @@ function ProtectedRoute({ children, requiredPermission, userId, scope }) {
   }, [hasPermission, isLoading, requiredPermission, userId, scope, navigate]);
 
   if (isLoading) {
-    return <div>Checking access...</div>;
+    return <p>Checking access...</p>;
   }
 
   if (!hasAccess) {
-    return <div>Access denied</div>;
+    return <p>Access denied</p>;
   }
 
   return children;
@@ -679,9 +679,9 @@ test('renders fallback when user lacks permission', () => {
       userId="user-123"
       scope={{ organisationId: "org-456" }}
       permission="read:users"
-      fallback={<div>Access Denied</div>}
+      fallback={<p>Access Denied</p>}
     >
-      <div>User List</div>
+      <section>User List</section>
     </PermissionGuard>
   );
   
@@ -739,7 +739,7 @@ function UserManagement() {
       >
         <CreateUserButton />
       </PermissionEnforcer>
-    </div>
+    </section>
   );
 }
 ```
@@ -771,7 +771,7 @@ function EventDashboard() {
       >
         <ParticipantManagement />
       </PermissionEnforcer>
-    </div>
+    </section>
   );
 }
 ```
@@ -795,7 +795,7 @@ function AdaptiveComponent({ appId }) {
     loadAppConfig();
   }, [appId]);
   
-  if (!appConfig) return <div>Loading app configuration...</div>;
+  if (!appConfig) return <p>Loading app configuration...</p>;
   
   // Determine required context based on app type
   const scope = appConfig.requires_event 
@@ -858,15 +858,15 @@ function ContextAwareComponent({ appId }) {
     getAppConfig(appId).then(setAppConfig);
   }, [appId]);
   
-  if (!appConfig) return <div>Loading...</div>;
+  if (!appConfig) return <p>Loading...</p>;
   
   const getContextError = () => {
     if (appConfig.requires_event) {
       return (
-        <div>
+        <section>
           <p>Access denied</p>
           <p>This app requires event context</p>
-        </div>
+        </section>
       );
     } else {
       return (