@jmruthers/pace-core 0.6.6 → 0.6.7

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
 

package/docs/rbac/quick-start.md

@@ -357,15 +357,15 @@ export function Login() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-sec-50">
-      <div className="max-w-md w-full space-y-8">
-        <div>
+    <main className="min-h-screen flex items-center justify-center bg-sec-50">
+      <section className="max-w-md w-full space-y-8">
+        <section>
           <h2 className="mt-6 text-center text-3xl font-extrabold text-sec-900">
             Sign in to your account
           </h2>
-        </div>
+        </section>
         <form className="mt-8 space-y-6" onSubmit={handleLogin}>
-          <div>
+          <section>
             <label htmlFor="email" className="sr-only">
               Email address
             </label>
@@ -379,8 +379,8 @@ export function Login() {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
             />
-          </div>
-          <div>
+          </section>
+          <section>
             <label htmlFor="password" className="sr-only">
               Password
             </label>
@@ -394,8 +394,8 @@ export function Login() {
               value={password}
               onChange={(e) => setPassword(e.target.value)}
             />
-          </div>
-          <div>
+          </section>
+          <section>
             <button
               type="submit"
               disabled={loading}
@@ -403,10 +403,10 @@ export function Login() {
             >
               {loading ? 'Signing in...' : 'Sign in'}
             </button>
-          </div>
+          </section>
         </form>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 ```
@@ -427,18 +427,18 @@ export function Dashboard() {
   const { user, selectedOrganisationId } = useUnifiedAuth()
 
   if (!user) {
-    return <div>Please log in</div>
+    return <p>Please log in</p>
   }
 
   return (
-    <div className="min-h-screen bg-sec-50">
+    <main className="min-h-screen bg-sec-50">
       <nav className="bg-background shadow">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16">
-            <div className="flex items-center">
+        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <section className="flex justify-between h-16">
+            <section className="flex items-center">
               <h1 className="text-xl font-semibold">Dashboard</h1>
-            </div>
-            <div className="flex items-center space-x-4">
+            </section>
+            <section className="flex items-center space-x-4">
               <span className="text-sm text-sec-700">
                 {user.email} | Org: {selectedOrganisationId}
               </span>
@@ -448,39 +448,39 @@ export function Dashboard() {
               >
                 Sign out
               </button>
-            </div>
-          </div>
-        </div>
+            </section>
+          </section>
+        </section>
       </nav>
 
       <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-        <div className="px-4 py-6 sm:px-0">
-          <div className="border-4 border-dashed border-sec-200 rounded-lg h-96 p-8">
+        <section className="px-4 py-6 sm:px-0">
+          <section className="border-4 border-dashed border-sec-200 rounded-lg h-96 p-8">
             <h2 className="text-2xl font-bold mb-4">Welcome to your Dashboard</h2>
             
             {/* CRITICAL: Use PagePermissionGuard for page-level permissions */}
             <PagePermissionGuard
               pageName="dashboard"
               operation="read"
-              fallback={<div>You don't have permission to view the dashboard</div>}
+              fallback={<p>You don't have permission to view the dashboard</p>}
             >
-              <div className="space-y-4">
+              <section className="space-y-4">
                 <p>You have access to the dashboard!</p>
                 
-                <div className="space-x-4">
+                <section className="space-x-4">
                   <Link 
                     to="/users" 
                     className="bg-main-500 text-main-50 px-4 py-2 rounded hover:bg-main-600"
                   >
                     View Users
                   </Link>
-                </div>
-              </div>
+                </section>
+              </section>
             </PagePermissionGuard>
-          </div>
-        </div>
+          </section>
+        </section>
       </main>
-    </div>
+    </main>
   )
 }
 ```
@@ -501,21 +501,21 @@ export function Users() {
   const { user, selectedOrganisationId } = useUnifiedAuth()
 
   if (!user) {
-    return <div>Please log in</div>
+    return <p>Please log in</p>
   }
 
   return (
-    <div className="min-h-screen bg-sec-50">
+    <main className="min-h-screen bg-sec-50">
       <nav className="bg-background shadow">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16">
-            <div className="flex items-center">
+        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <section className="flex justify-between h-16">
+            <section className="flex items-center">
               <Link to="/" className="text-main-600 hover:text-main-800 mr-4">
                 ← Back to Dashboard
               </Link>
               <h1 className="text-xl font-semibold">Users</h1>
-            </div>
-            <div className="flex items-center space-x-4">
+            </section>
+            <section className="flex items-center space-x-4">
               <span className="text-sm text-sec-700">
                 {user.email} | Org: {selectedOrganisationId}
               </span>
@@ -525,35 +525,35 @@ export function Users() {
               >
                 Sign out
               </button>
-            </div>
-          </div>
-        </div>
+            </section>
+          </section>
+        </section>
       </nav>
 
       <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-        <div className="px-4 py-6 sm:px-0">
-          <div className="border-4 border-dashed border-sec-200 rounded-lg h-96 p-8">
+        <section className="px-4 py-6 sm:px-0">
+          <section className="border-4 border-dashed border-sec-200 rounded-lg h-96 p-8">
             <h2 className="text-2xl font-bold mb-4">User Management</h2>
             
             {/* CRITICAL: Use PagePermissionGuard for page-level permissions */}
             <PagePermissionGuard
               pageName="users"
               operation="read"
-              fallback={<div>You don't have permission to view users</div>}
+              fallback={<p>You don't have permission to view users</p>}
             >
-              <div className="space-y-4">
+              <section className="space-y-4">
                 <p>You have access to the users page!</p>
                 <p>This means your RBAC system is working correctly.</p>
                 
-                <div className="bg-main-100 border border-main-400 text-main-700 px-4 py-3 rounded">
+                <section className="bg-main-100 border border-main-400 text-main-700 px-4 py-3 rounded">
                   <strong>Success!</strong> Your RBAC setup is working correctly.
-                </div>
-              </div>
+                </section>
+              </section>
             </PagePermissionGuard>
-          </div>
-        </div>
+          </section>
+        </section>
       </main>
-    </div>
+    </main>
   )
 }
 ```

package/docs/rbac/secure-client-protection.md

@@ -134,7 +134,7 @@ function MyComponent() {
   const supabase = useSecureSupabase();
   
   if (!supabase) {
-    return <div>Loading...</div>;
+    return <p>Loading...</p>;
   }
   
   // Organisation context is automatically enforced

package/docs/rbac/troubleshooting.md

@@ -192,7 +192,7 @@ function App() {
 <PagePermissionGuard
   pageName="dashboard"
   operation="read"
-  fallback={<div>Access Denied</div>}
+  fallback={<p>Access Denied</p>}
 >
   <Dashboard />
 </PagePermissionGuard>

package/docs/security/README.md

@@ -126,14 +126,14 @@ function ProtectedComponent() {
   const { user, session, isLoading } = useUnifiedAuth();
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    return <p>Loading...</p>;
   }
 
   if (!user || !session) {
-    return <div>Please log in</div>;
+    return <p>Please log in</p>;
   }
 
-  return <div>Welcome, {user.email}!</div>;
+  return <p>Welcome, {user.email}!</p>;
 }
 ```
 
@@ -672,9 +672,9 @@ test('hides content when user lacks permission', () => {
     <PermissionEnforcer
       operation="read"
       resource="users"
-      fallback={<div>Access denied</div>}
+      fallback={<p>Access denied</p>}
     >
-      <div>User data</div>
+      <section>User data</section>
     </PermissionEnforcer>
   );