@jmruthers/pace-core 0.6.6 → 0.6.8

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 (

package/docs/rbac/getting-started.md

@@ -158,12 +158,12 @@ function Dashboard() {
     <PagePermissionGuard
       pageName="dashboard"
       operation="read"
-      fallback={<div>Access Denied</div>}
+      fallback={<p>Access Denied</p>}
     >
-      <div>
+      <section>
         <h1>Dashboard</h1>
         <EventContent />
-      </div>
+      </section>
     </PagePermissionGuard>
   );
 }
@@ -193,14 +193,14 @@ function UserActions() {
     }
   );
 
-  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>
       {permissions['page-1']?.includes('read') && <ReadButton />}
       {permissions['page-1']?.includes('manage') && <ManageButton />}
-    </div>
+    </section>
   );
 }
 ```
@@ -229,13 +229,13 @@ function UserActions() {
     'page-123' // optional pageId
   );
 
-  if (isLoading) return <div>Checking permission...</div>;
-  if (error) return <div>Error: {error.message}</div>;
+  if (isLoading) return <p>Checking permission...</p>;
+  if (error) return <p>Error: {error.message}</p>;
 
   return (
-    <div>
+    <section>
       {can ? <AdminPanel /> : <AccessDenied />}
-    </div>
+    </section>
   );
 }
 ```
@@ -298,17 +298,17 @@ function Dashboard() {
   
   // Pattern 1: PermissionEnforcer (automatic scope resolution)
   return (
-    <div>
+    <main>
       <h1>Dashboard</h1>
       
       {/* Always visible */}
-      <div>Welcome to the dashboard!</div>
+      <p>Welcome to the dashboard!</p>
       
       {/* Pattern 1: PermissionEnforcer - automatic scope resolution */}
       <PermissionEnforcer
         permissions={['read:admin']}
         operation="admin-panel"
-        fallback={<div>Admin access required</div>}
+        fallback={<p>Admin access required</p>}
       >
         <AdminPanel />
       </PermissionEnforcer>
@@ -318,7 +318,7 @@ function Dashboard() {
       
       {/* Pattern 3: usePermissions - for custom logic */}
       <CustomPermissionLogic userId={user?.id} organisationId={selectedOrganisationId} />
-    </div>
+    </main>
   );
 }
 
@@ -330,20 +330,20 @@ function UserManagement({ userId, organisationId }) {
     'update:users'
   );
 
-  if (isLoading) return <div>Checking permissions...</div>;
-  if (error) return <div>Error: {error.message}</div>;
+  if (isLoading) return <p>Checking permissions...</p>;
+  if (error) return <p>Error: {error.message}</p>;
 
   return (
-    <div>
+    <section>
       {can ? (
-        <div>
+        <section>
           <h2>User Management</h2>
           <UserList />
-        </div>
+        </section>
       ) : (
-        <div>You need user management permissions</div>
+        <p>You need user management permissions</p>
       )}
-    </div>
+    </section>
   );
 }
 
@@ -354,27 +354,27 @@ function CustomPermissionLogic({ userId, organisationId }) {
     { organisationId: organisationId || '' }
   );
 
-  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>
       <h2>Your Permissions</h2>
       {Object.entries(permissions).map(([pageId, operations]) => (
-        <div key={pageId}>
+        <p key={pageId}>
           <strong>{pageId}:</strong> {operations.join(', ')}
-        </div>
+        </p>
       ))}
-    </div>
+    </section>
   );
 }
 
 function AdminPanel() {
-  return <div>Admin Panel Content</div>;
+  return <section>Admin Panel Content</section>;
 }
 
 function UserList() {
-  return <div>User List</div>;
+  return <section>User List</section>;
 }
 ```
 
@@ -391,7 +391,7 @@ export default function AdminPage() {
     <PermissionGuard
       permission="admin:read"
       scope={{ organisationId: 'org-123' }}
-      fallback={<div>Access Denied</div>}
+      fallback={<p>Access Denied</p>}
     >
       <AdminPageContent />
     </PermissionGuard>
@@ -407,7 +407,7 @@ import { PermissionGuard } from '@jmruthers/pace-core/rbac';
 
 function UserCard({ user, organisationId }) {
   return (
-    <div className="user-card">
+    <section className="user-card">
       <h3>{user.name}</h3>
       
       <PermissionGuard
@@ -538,7 +538,7 @@ function Navigation({ userId, organisationId }) {
    ```tsx
    const { selectedOrganisationId } = useUnifiedAuth();
    if (!selectedOrganisationId) {
-     return <div>Please select an organisation first</div>;
+     return <p>Please select an organisation first</p>;
    }
    ```
 
@@ -622,9 +622,9 @@ function MyComponent() {
     'update:users'
   );
 
-  if (isLoading) return <div>Checking permissions...</div>;
-  if (error) return <div>Error: {error.message}</div>;
-  if (!can) return <div>Access denied</div>;
+  if (isLoading) return <p>Checking permissions...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+  if (!can) return <p>Access denied</p>;
 
   return <AdminContent />;
 }
@@ -818,7 +818,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 

package/docs/rbac/performance.md

@@ -315,6 +315,6 @@ If performance monitoring isn't showing data:
 
 - [PagePermissionGuard API Reference](./api-reference.md#pagepermissionguard) - Component API
 - [RBAC Configuration](./api-reference.md#configuration) - Configuration options
-- [Performance Best Practices](../best-practices/performance.md) - General performance guide
+- [Performance Optimization](../standards/9-operations-standards.md#performance-optimization) - General performance guide
 - [RBAC Getting Started](./getting-started.md) - Getting started guide