@jmruthers/pace-core 0.6.6 → 0.6.7

package/docs/api-reference/hooks.md

@@ -111,11 +111,11 @@ function App() {
     handleSignOutNow,
   } = useUnifiedAuth();
 
-  if (isLoading) return <div>Loading...</div>;
-  if (authError) return <div>Error: {authError.message}</div>;
+  if (isLoading) return <p>Loading...</p>;
+  if (authError) return <p>Error: {authError.message}</p>;
 
   return (
-    <div>
+    <main>
       {user ? (
         <>
           <p>Welcome, {user.email}</p>
@@ -129,7 +129,7 @@ function App() {
       ) : (
         <LoginForm onSignIn={signIn} />
       )}
-    </div>
+    </main>
   );
 }
 ```
@@ -220,22 +220,22 @@ function EventManager() {
     hasAccess,
   } = useEvents();
 
-  if (loading) return <div>Loading events...</div>;
+  if (loading) return <p>Loading events...</p>;
 
   return (
-    <div>
+    <section>
       <h2>Available Events</h2>
       {events.map(event => (
-        <div key={event.id}>
+        <section key={event.id}>
           <span>{event.name}</span>
           {hasAccess(event.id) && (
             <button onClick={() => setSelectedEvent(event)}>
               Select
             </button>
           )}
-        </div>
+        </section>
       ))}
-    </div>
+    </section>
   );
 }
 ```
@@ -281,9 +281,9 @@ function UserActions({ userId, scope }) {
   }, [hasPermission, isLoading, userId, scope]);
 
   return (
-    <div>
+    <section>
       {canEdit && <EditButton />}
-    </div>
+    </section>
   );
 }
 ```
@@ -312,18 +312,18 @@ function PermissionDisplay({ userId, scope }) {
     scope
   });
 
-  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>
       ))}
-    </div>
+    </section>
   );
 }
 ```
@@ -352,13 +352,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>
   );
 }
 ```
@@ -406,10 +406,10 @@ function NotificationExample() {
   };
 
   return (
-    <div>
+    <section>
       <button onClick={handleSuccess}>Show Success</button>
       <button onClick={handleError}>Show Error</button>
-    </div>
+    </section>
   );
 }
 ```
@@ -460,23 +460,23 @@ function UserForm() {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <div>
+      <section>
         <label>Name</label>
         <input {...register('name')} />
         {errors.name && <span>{errors.name.message}</span>}
-      </div>
+      </section>
       
-      <div>
+      <section>
         <label>Email</label>
         <input type="email" {...register('email')} />
         {errors.email && <span>{errors.email.message}</span>}
-      </div>
+      </section>
       
-      <div>
+      <section>
         <label>Age</label>
         <input type="number" {...register('age')} />
         {errors.age && <span>{errors.age.message}</span>}
-      </div>
+      </section>
       
       <button type="submit" disabled={isSubmitting}>
         {isSubmitting ? 'Submitting...' : 'Submit'}
@@ -654,18 +654,18 @@ function Dropdown() {
   useClickOutside(dropdownRef, () => setIsOpen(false));
 
   return (
-    <div ref={dropdownRef}>
+    <nav ref={dropdownRef}>
       <button onClick={() => setIsOpen(!isOpen)}>
         Toggle Dropdown
       </button>
       {isOpen && (
-        <div className="dropdown-content">
-          <div>Option 1</div>
-          <div>Option 2</div>
-          <div>Option 3</div>
-        </div>
+        <section className="dropdown-content">
+          <button>Option 1</button>
+          <button>Option 2</button>
+          <button>Option 3</button>
+        </section>
       )}
-    </div>
+    </nav>
   );
 }
 ```
@@ -696,11 +696,11 @@ function PerformanceDashboard() {
   const metrics = usePerformanceMonitor();
   
   return (
-    <div>
+    <section>
       <p>Render time: {metrics.renderTime}ms</p>
       <p>Memory usage: {metrics.memoryUsage}MB</p>
       <p>Components: {metrics.componentCount}</p>
-    </div>
+    </section>
   );
 }
 ```
@@ -829,7 +829,7 @@ function PublicEventPage() {
   console.log('Event Code:', eventCode);
   console.log('Report ID:', reportId);
   
-  return <div>Event: {eventCode}</div>;
+  return <p>Event: {eventCode}</p>;
 }
 ```
 
@@ -856,11 +856,11 @@ function PublicEventPage() {
   const { eventCode } = usePublicRouteParams({ fetchEventData: false });
   const { event, isLoading, error, refetch } = usePublicEvent(eventCode || '');
   
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error: {error.message}</div>;
-  if (!event) return <div>Event not found</div>;
-  
-  return <div>Event: {event.event_name}</div>;
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+  if (!event) return <p>Event not found</p>;
+
+  return <p>Event: {event.event_name}</p>;
 }
 ```
 
@@ -880,10 +880,10 @@ function MyComponent() {
   const isPublicPage = useIsPublicPage();
   
   if (isPublicPage) {
-    return <div>This is a public page</div>;
+    return <section>This is a public page</section>;
   }
   
-  return <div>This is an authenticated page</div>;
+  return <section>This is an authenticated page</section>;
 }
 ```
 
@@ -912,7 +912,7 @@ function PublicComponent() {
   
   console.log('Supabase URL:', environment.supabaseUrl);
   
-  return <div>Public component</div>;
+  return <section>Public component</section>;
 }
 ```
 
@@ -973,16 +973,16 @@ function MyComponent() {
   });
 
   return (
-    <div>
+    <section>
       <p>Idle: {isIdle ? 'Yes' : 'No'}</p>
       <p>Time remaining: {Math.floor(timeRemaining / 1000)}s</p>
       {showWarning && (
-        <div>
+        <section>
           <p>You will be signed out soon due to inactivity.</p>
           <button onClick={resetActivity}>Stay Active</button>
-        </div>
+        </section>
       )}
-    </div>
+    </section>
   );
 }
 ```
@@ -1050,10 +1050,10 @@ function SecureComponent() {
   };
 
   return (
-    <div>
+    <section>
       <p>Super Admin: {superAdminContext.isSuperAdmin ? 'Yes' : 'No'}</p>
       <button onClick={handleSecureAction}>Perform Secure Action</button>
-    </div>
+    </section>
   );
 }
 ```
@@ -1105,15 +1105,15 @@ function FileUpload() {
   };
 
   return (
-    <div>
+    <section>
       <input 
         type="file" 
         onChange={(e) => e.target.files?.[0] && handleFileUpload(e.target.files[0])}
         disabled={isLoading}
       />
-      {isLoading && <div>Uploading...</div>}
-      {error && <div>Error: {error.message}</div>}
-    </div>
+      {isLoading && <p>Uploading...</p>}
+      {error && <p>Error: {error.message}</p>}
+    </section>
   );
 }
 ```
@@ -1160,30 +1160,30 @@ function FileUploadWithProgress() {
   };
 
   return (
-    <div>
+    <section>
       <input 
         type="file" 
         onChange={(e) => e.target.files?.[0] && handleFileUpload(e.target.files[0])}
         disabled={isUploading}
       />
       {isUploading && (
-        <div>
-          <div>Uploading... {uploadProgress}%</div>
-          <div className="w-full bg-sec-200 rounded-full h-2">
-            <div 
+        <section>
+          <p>Uploading... {uploadProgress}%</p>
+          <section className="w-full bg-sec-200 rounded-full h-2" role="progressbar" aria-valuenow={uploadProgress} aria-valuemin={0} aria-valuemax={100}>
+            <section 
               className="bg-main-600 h-2 rounded-full transition-all duration-300"
               style={{ width: `${uploadProgress}%` }}
             />
-          </div>
-        </div>
+          </section>
+        </section>
       )}
       {error && (
-        <div>
-          <div>Error: {error.message}</div>
+        <section>
+          <p>Error: {error.message}</p>
           <button onClick={reset}>Try Again</button>
-        </div>
+        </section>
       )}
-    </div>
+    </section>
   );
 }
 ```
@@ -1235,12 +1235,12 @@ function AppSettings() {
     });
   };
 
-  if (isLoading) return <div>Loading configuration...</div>;
-  if (error) return <div>Error: {error.message}</div>;
-  if (!config) return <div>No configuration available</div>;
+  if (isLoading) return <p>Loading configuration...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+  if (!config) return <p>No configuration available</p>;
 
   return (
-    <div>
+    <section>
       <h2>App Configuration</h2>
       <p>App Name: {config.appName}</p>
       <p>Version: {config.version}</p>
@@ -1257,7 +1257,7 @@ function AppSettings() {
           {name}
         </label>
       ))}
-    </div>
+    </section>
   );
 }
 ```
@@ -1295,9 +1295,9 @@ function Modal({ children, onClose }) {
   });
 
   return (
-    <div ref={containerRef}>
+    <section ref={containerRef}>
       {children}
-    </div>
+    </section>
   );
 }
 ```
@@ -1333,9 +1333,9 @@ function Dialog({ isOpen, children, onClose }) {
   if (!isOpen) return null;
 
   return (
-    <div ref={containerRef}>
+    <section ref={containerRef}>
       {children}
-    </div>
+    </section>
   );
 }
 ```
@@ -1391,9 +1391,9 @@ function ResponsiveLayout({ children }) {
   const isMobile = useIsMobile();
 
   return (
-    <div className={isMobile ? 'mobile' : 'desktop'}>
+    <section className={isMobile ? 'mobile' : 'desktop'}>
       {children}
-    </div>
+    </section>
   );
 }
 ```
@@ -1491,7 +1491,7 @@ import { usePerformanceMonitor } from '@jmruthers/pace-core';
 function PerformanceDashboard() {
   const metrics = usePerformanceMonitor();
   
-  return <div>Render time: {metrics.renderTime}ms</div>;
+  return <p>Render time: {metrics.renderTime}ms</p>;
 }
 ```
 

package/docs/api-reference/types.md

@@ -1048,7 +1048,7 @@ All types in `@jmruthers/pace-core` are designed to provide:
 - **Generic Support**: Flexible types that work with your data
 - **Strict Mode**: Compatible with TypeScript strict mode
 
-For more information about using types effectively, see the [TypeScript Guide](../best-practices/typescript.md).
+For more information about using types effectively, see the [Code Quality Standards](../standards/4-code-quality-standards.md) (TypeScript rules).
 
 ## ♿ Accessibility
 

package/docs/api-reference/utilities.md

@@ -1204,7 +1204,7 @@ export {
 - Validate input parameters
 - Return consistent types
 
-For more information about using utilities effectively, see the [Best Practices Guide](../best-practices/utilities.md).
+For more information about using utilities effectively, see the [Code Quality Standards](../standards/4-code-quality-standards.md) and [Architecture Standards](../standards/3-architecture-standards.md).
 
 ## ♿ Accessibility
 

package/docs/architecture/README.md

@@ -125,7 +125,7 @@ ComponentName/
 
 ### Component Design Patterns
 
-1. **Compound Components**: Components that work together (e.g., DataTable + DataTableToolbar + DataTableBody)
+1. **Compound Components**: Components that work together (e.g., DataTable + DataTableToolbar + UnifiedTableBody)
 2. **Render Props**: Flexible rendering patterns for complex components
 3. **Controlled/Uncontrolled**: Support for both controlled and uncontrolled usage
 4. **Composition**: Components that can be composed together

package/docs/core-concepts/events.md

@@ -273,7 +273,7 @@ function EventScopedData() {
   }, [selectedEvent]);
 
   if (!selectedEvent) {
-    return <div>Please select an event</div>;
+    return <p>Please select an event</p>;
   }
 
   if (loading) {
@@ -585,10 +585,10 @@ function EventScopedComponent() {
   const { selectedEvent } = useEvents();
 
   if (!selectedEvent) {
-    return <div>Please select an event</div>;
+    return <p>Please select an event</p>;
   }
 
-  return <div>Content for {selectedEvent.event_name}</div>;
+  return <section>Content for {selectedEvent.event_name}</section>;
 }
 
 // ❌ Avoid - No event context check

package/docs/core-concepts/organisations.md

@@ -514,8 +514,8 @@ function OrganisationAwareComponent() {
     updateOrganisationSettings,
   } = useOrganisation();
 
-  if (loading) return <div>Loading...</div>;
-  if (error) return <div>Error: {error}</div>;
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error}</p>;
 
   return (
     <div>
@@ -563,10 +563,10 @@ function ProtectedComponent() {
   );
 
   if (!hasAccess) {
-    return <div>Access denied</div>;
+    return <p>Access denied</p>;
   }
 
-  return <div>Protected content</div>;
+  return <section>Protected content</section>;
 }
 ```
 
@@ -598,10 +598,10 @@ function DataComponent() {
   const { currentOrganisation } = useOrganisation();
 
   if (!currentOrganisation) {
-    return <div>Please select an organisation</div>;
+    return <p>Please select an organisation</p>;
   }
 
-  return <div>Organisation data</div>;
+  return <section>Organisation data</section>;
 }
 ```
 

package/docs/core-concepts/permissions.md

@@ -210,8 +210,8 @@ import { usePagePermission } from '@jmruthers/pace-core';
 function AdminDashboard() {
   const { hasAccess, loading } = usePagePermission('admin');
 
-  if (loading) return <div>Checking permissions...</div>;
-  if (!hasAccess) return <div>Access denied</div>;
+  if (loading) return <p>Checking permissions...</p>;
+  if (!hasAccess) return <p>Access denied</p>;
 
   return (
     <div>
@@ -305,7 +305,7 @@ function ProtectedComponent({ children, permission }) {
     permission
   );
 
-  if (isLoading) return <div>Checking permissions...</div>;
+  if (isLoading) return <p>Checking permissions...</p>;
   if (!can) return null; // Or return an access denied component
 
   return children;
@@ -488,7 +488,7 @@ function withPermission(permission: string) {
         permission
       );
       
-      if (isLoading) return <div>Checking permissions...</div>;
+      if (isLoading) return <p>Checking permissions...</p>;
       if (!can) return null;
       
       return <Component {...props} />;
@@ -547,7 +547,7 @@ function PermissionAwareComponent() {
   );
 
   if (isLoading) {
-    return <div>Loading permissions...</div>;
+    return <p>Loading permissions...</p>;
   }
 
   return (
@@ -714,7 +714,7 @@ function FeatureFlag({ permission, children }) {
     permission
   );
   
-  if (isLoading) return <div>Checking permissions...</div>;
+  if (isLoading) return <p>Checking permissions...</p>;
   if (!can) return null;
   
   return children;

package/docs/documentation-index.md

@@ -109,30 +109,24 @@ This index mirrors the folder layout in `packages/core/docs/` so teams can quick
 - [RBAC security architecture](./architecture/rbac-security-architecture.md)
 - [Database schema requirements](./architecture/database-schema-requirements.md)
 
-## Best practices
-
-- [Overview](./best-practices/README.md)
-- [Accessibility](./best-practices/accessibility.md)
-- [Common patterns](./best-practices/common-patterns.md)
-- [Deployment](./best-practices/deployment.md)
-- [Performance](./best-practices/performance.md)
-- [Security](./best-practices/security.md)
-- [Testing](./testing/README.md)
+## Standards
+
+- [Standards Overview](./standards/0-standards-overview.md) – Complete standards system
+- [pace-core Compliance](./standards/1-pace-core-compliance-standards.md) – Using pace-core correctly
+- [Project Structure](./standards/2-project-structure-standards.md) – Code organization
+- [Architecture](./standards/3-architecture-standards.md) – SOLID principles and design
+- [Code Quality](./standards/4-code-quality-standards.md) – TypeScript, accessibility, and code style
+- [Styling](./standards/5-styling-standards.md) – CSS architecture and Tailwind v4
+- [Security & RBAC](./standards/6-security-rbac-standards.md) – RLS policies and RBAC
+- [API & Tech Stack](./standards/7-api-tech-stack-standards.md) – Required technologies and API design
+- [Testing & Documentation](./standards/8-testing-documentation-standards.md) – Testing strategy and docs
+- [Operations](./standards/9-operations-standards.md) – Error handling, performance, CI/CD
 
 ## Security
 
 - [Security posture](./security/README.md)
 - [Security checklist](./security/checklist.md)
 
-## Development standards
-
-- [Standards overview](./standards/README.md) – Development standards for the project
-- [Architecture Standard](./standards/01-architecture-standard.md) – Core architectural principles
-- [API & RPC Standard](./standards/02-api-and-rpc-standard.md) – API design patterns and database function standards
-- [Component Standard](./standards/03-component-standard.md) – React component development guidelines
-- [Code Style Standard](./standards/04-code-style-standard.md) – Code style and TypeScript conventions
-- [Security Standard](./standards/05-security-standard.md) – Security requirements and best practices
-- [Testing & Documentation Standard](./standards/06-testing-and-docs-standard.md) – Testing strategy and documentation requirements
 
 ## Meta & maintenance
 

package/docs/getting-started/documentation-index.md

@@ -30,7 +30,7 @@ Follow this checklist after installing `@jmruthers/pace-core`. Each step points
 
 - ✅ Apply the design system tokens → [Styling usage](../styles/usage.md)
 - ✅ Run the test playbook → [Testing overview](../testing/README.md)
-- ✅ Prepare for production → [Deployment best practices](../best-practices/deployment.md)
+- ✅ Prepare for production → [Operations Standards](../standards/9-operations-standards.md#cicd-integration) (deployment)
 - ✅ Review security posture → [Security checklist](../security/checklist.md)
 
 ## Need help?

package/docs/getting-started/examples/README.md

@@ -677,8 +677,8 @@ export function MealsPage() {
     }
   };
 
-  if (loading) return <div>Loading meals...</div>;
-  if (error) return <div>Error: {error}</div>;
+  if (loading) return <p>Loading meals...</p>;
+  if (error) return <p>Error: {error}</p>;
 
   return (
     <div className="p-6">
@@ -919,7 +919,7 @@ All examples are designed to be easily customizable:
 3. **Examples** → Choose an example above
 4. **Core Concepts** → [Understand the Fundamentals](../core-concepts/)
 5. **Implementation** → [Advanced Patterns](../implementation-guides/)
-6. **Production** → [Best Practices](../best-practices/)
+6. **Production** → [Standards](../standards/) - Development standards and best practices
 
 ## 🆘 Need Help?
 
@@ -932,4 +932,4 @@ All examples are designed to be easily customizable:
 - [Authentication Implementation Guide](../implementation-guides/authentication.md) - Complete authentication setup
 - [Data Tables Guide](../implementation-guides/data-tables.md) - Advanced data management
 - [API Reference](../api-reference/) - Complete component documentation
-- [Best Practices](../best-practices/) - Production guidelines
+- [Standards](../standards/) - Development standards and production guidelines

package/docs/getting-started/examples/full-featured-app.md

@@ -615,4 +615,4 @@ REACT_APP_SUPABASE_ANON_KEY=your-anon-key-here
 - **[Core Concepts](../core-concepts/)** - Understand authentication and RBAC
 - **[Implementation Guides](../implementation-guides/)** - Advanced patterns
 - **[API Reference](../api-reference/)** - All components and hooks
-- **[Best Practices](../best-practices/)** - Production deployment
+- **[Standards](../standards/)** - Development standards and production deployment

package/docs/getting-started/faq.md

@@ -222,7 +222,7 @@ function MyComponent() {
     }
   }, [hasPermission, organisationId]);
 
-  if (isLoading) return <div>Loading...</div>;
+  if (isLoading) return <p>Loading...</p>;
 
   return <DataTable data={data} />;
 }
@@ -281,7 +281,7 @@ See [Public Pages Guide](./implementation-guides/public-pages.md).
 3. Use React.memo for expensive components
 4. Optimize data table rendering
 
-See [Performance Guide](./best-practices/performance.md).
+See [Performance Optimization](../standards/9-operations-standards.md#performance-optimization).
 
 ## Still Have Questions?