@jmruthers/pace-core 0.6.5 → 0.6.7

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

@@ -49,12 +49,16 @@ setupRBAC(supabase);
 
 ## Layout-Level Permission Enforcement
 
+> **📋 Contract Reference**: See [RBAC Contract](../rbac/RBAC_CONTRACT.md#enforcepermissions-configuration) for when to use `enforcePermissions={true}` vs `enforcePermissions={false}`.
+
 ### Why Layout-Level Enforcement?
 
 Layout-level enforcement provides a safety net that prevents consuming apps from forgetting to implement permission checks. It ensures that every route is automatically validated for permissions.
 
 **Note:** Super admins automatically bypass all permission checks in PaceAppLayout. The component checks super admin status before enforcing permissions, ensuring super admins can access any route without violations.
 
+**⚠️ Important**: For event-based apps, set `enforcePermissions={false}` because pages handle their own checks via `PagePermissionGuard`. For organisation-based apps, set `enforcePermissions={true}` to enable layout-level checks.
+
 ### Basic Implementation
 
 ```tsx
@@ -697,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