@jmruthers/pace-core 0.2.7 → 0.4.1

package/docs/consuming-app-example.md

@@ -35,8 +35,7 @@ npm install -D @tailwindcss/vite tailwindcss@^4.0.0
 
 ```tsx
 // src/index.tsx
-// Import the core CSS file - includes everything you need
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/styles'; // This is the key import!
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
@@ -51,13 +50,6 @@ root.render(
 );
 ```
 
-**That's it!** The core.css file includes:
-- Complete color palettes (main, secondary, accent)
-- All fonts (Georama, Open Sans, Reddit Mono)
-- Base element styles and resets
-- Tailwind v4 utility classes
-- Component styling
-
 ### 2. Create your DataTable component
 
 ```tsx
@@ -170,13 +162,13 @@ const App: React.FC = () => {
   };
 
   return (
-    <div className="min-h-screen bg-sec-50 p-8">
+    <div className="min-h-screen bg-gray-50 p-8">
       <div className="max-w-7xl mx-auto">
-        <h1 className="text-3xl font-bold text-sec-900 mb-8">
+        <h1 className="text-3xl font-bold text-gray-900 mb-8">
           My Application with PACE Core DataTable
         </h1>
         
-        <div className="bg-main-50 rounded-lg shadow">
+        <div className="bg-white rounded-lg shadow">
           <DataTable
             data={data}
             columns={columns}
@@ -205,7 +197,19 @@ const App: React.FC = () => {
 export default App;
 ```
 
-### 3. Configure Vite with Tailwind CSS v4
+### 3. Copy Font Files
+
+Copy the font files from the PACE Core package to your app's public directory:
+
+```bash
+# Create fonts directory
+mkdir -p public/fonts
+
+# Copy font files
+cp node_modules/@jmruthers/pace-core/public/fonts/* public/fonts/
+```
+
+### 4. Configure Vite with Tailwind CSS v4
 
 ```js
 // vite.config.js
@@ -221,7 +225,68 @@ export default defineConfig({
 })
 ```
 
-### 4. Alternative: Use PACE Core Vite Plugin
+### 5. Create your app-specific CSS file
+
+```css
+/* src/app.css */
+@import "tailwindcss";
+@import '@jmruthers/pace-core/styles';
+
+@theme static {
+  /* Your app's main brand color */
+  --color-app-main-raw: oklch(0.7 0.057 252.02);
+  --color-app-main-50: oklch(0.98 0.001 252.02);
+  --color-app-main-100: oklch(0.96 0.005 252.02);
+  --color-app-main-200: oklch(0.927 0.012 252.02);
+  --color-app-main-300: oklch(0.881 0.021 252.02);
+  --color-app-main-400: oklch(0.822 0.032 252.02);
+  --color-app-main-500: oklch(0.75 0.047 252.02);
+  --color-app-main-600: oklch(0.7 0.057 252.02);
+  --color-app-main-700: oklch(0.567 0.044 252.02);
+  --color-app-main-800: oklch(0.456 0.034 252.02);
+  --color-app-main-900: oklch(0.332 0.024 252.02);
+  --color-app-main-950: oklch(0.195 0.014 252.02);
+
+  /* Your app's secondary brand color */
+  --color-app-sec-raw: oklch(0.58 0.23 280.75);
+  --color-app-sec-50: oklch(0.98 0.003 280.75);
+  --color-app-sec-100: oklch(0.96 0.014 280.75);
+  --color-app-sec-200: oklch(0.927 0.033 280.75);
+  --color-app-sec-300: oklch(0.881 0.059 280.75);
+  --color-app-sec-400: oklch(0.822 0.093 280.75);
+  --color-app-sec-500: oklch(0.75 0.133 280.75);
+  --color-app-sec-600: oklch(0.665 0.182 280.75);
+  --color-app-sec-700: oklch(0.58 0.23 280.75);
+  --color-app-sec-800: oklch(0.456 0.158 280.75);
+  --color-app-sec-900: oklch(0.332 0.099 280.75);
+  --color-app-sec-950: oklch(0.195 0.047 280.75);
+
+  /* Your app's accent brand color */
+  --color-app-acc-raw: oklch(0.64 0.21 37.76);
+  --color-app-acc-50: oklch(0.98 0.003 37.76);
+  --color-app-acc-100: oklch(0.96 0.015 37.76);
+  --color-app-acc-200: oklch(0.927 0.035 37.76);
+  --color-app-acc-300: oklch(0.881 0.063 37.76);
+  --color-app-acc-400: oklch(0.822 0.099 37.76);
+  --color-app-acc-500: oklch(0.75 0.143 37.76);
+  --color-app-acc-600: oklch(0.64 0.21 37.76);
+  --color-app-acc-700: oklch(0.567 0.177 37.76);
+  --color-app-acc-800: oklch(0.456 0.13 37.76);
+  --color-app-acc-900: oklch(0.332 0.085 37.76);
+  --color-app-acc-950: oklch(0.195 0.044 37.76);
+}
+
+@layer base {
+  /* Your app-specific gradient (optional) */
+  .appGradient {
+    background: radial-gradient(var(--color-app-main-200), oklch(from var(--color-app-main-200) l c h / 0%) 30%), 
+                conic-gradient(var(--color-app-main-200), var(--color-app-sec-200), var(--color-app-acc-200), var(--color-app-main-200));
+    background-attachment: fixed;
+  }
+}
+```
+
+### 6. Alternative: Use PACE Core Vite Plugin
 
 For easier setup, you can use the provided PACE Core Vite plugin:
 
@@ -236,13 +301,11 @@ export default createPaceCoreViteConfig({
 
 ## Key Points
 
-1. **Import styles**: The CSS file provides all styling out of the box:
-   ```tsx
-   import '@jmruthers/pace-core/styles/core.css';
-   ```
-2. **Use native utilities**: Use standard Tailwind utilities like `bg-main-600`, `text-sec-700`, `border-acc-500`, etc.
+1. **Import styles first**: `import '@jmruthers/pace-core/styles';` must be imported before using components
+2. **Use semantic colors**: Use standard Tailwind semantic colors like `bg-primary`, `bg-success`, `bg-warning`, etc.
 3. **Configure features**: Set up the `features` object to enable/disable DataTable functionality
-4. **Component styling**: Components handle their own internal styling - no need for component-specific utility classes
+4. **CSS-first approach**: Use `@theme` syntax in your CSS file instead of JavaScript configuration
+5. **Component styling**: Components handle their own internal styling - no need for component-specific utility classes
 
 ## Expected Result
 
@@ -258,33 +321,24 @@ With this setup, your DataTable should render with:
 
 If the DataTable doesn't look styled:
 
-1. **Check imports**: Ensure the CSS file is imported at the top of your main file:
-   ```tsx
-   import '@jmruthers/pace-core/styles/core.css';
-   ```
+1. **Check import**: Ensure `import '@jmruthers/pace-core/styles';` is at the top of your main file
 2. **Check dependencies**: Make sure all peer dependencies are installed
 3. **Check Tailwind**: Ensure Tailwind CSS v4 is properly configured
 4. **Check console**: Look for any build or runtime errors
+5. **Check CSS**: Ensure your CSS file uses the `@theme` syntax correctly
 
-## How It Works
+## Alternative: CSS Import
 
-Tailwind v4 automatically scans for utility classes through your build tool configuration:
+You can also import styles in your CSS file:
 
-**Your vite.config.ts handles the scanning:**
-```ts
-// vite.config.ts
-export default defineConfig({
-  plugins: [
-    react(),
-    tailwindcss() // Automatically scans all source files
-  ],
-})
-```
+```css
+/* src/index.css */
+@import "tailwindcss";
+@import '@jmruthers/pace-core/styles';
 
-**The core.css file provides:**
-- Complete color palettes and theme definitions
-- Base styles and typography
-- Font definitions
-- Component styling foundation
+@theme {
+  /* Your theme configuration here */
+}
+```
 
-This means Tailwind automatically detects and includes all utility classes used in your source files, ensuring complete styling coverage without any manual configuration.
+This approach works the same way and ensures styles are loaded before your app renders.

package/docs/core-concepts/events.md

@@ -492,15 +492,15 @@ function EventStatusIndicator() {
   const status = getEventStatus(selectedEvent.event_date);
   const statusConfig = {
     past: { label: 'Past Event', color: 'text-muted-foreground' },
-    today: { label: 'Today', color: 'text-main-600' },
-    upcoming: { label: 'Upcoming', color: 'text-main-600' },
+    today: { label: 'Today', color: 'text-green-600' },
+    upcoming: { label: 'Upcoming', color: 'text-blue-600' },
   };
 
   return (
     <div className={`flex items-center space-x-2 ${statusConfig[status].color}`}>
       <div className={`w-2 h-2 rounded-full ${
         status === 'past' ? 'bg-muted' :
-        status === 'today' ? 'bg-main-500' : 'bg-main-500'
+        status === 'today' ? 'bg-green-500' : 'bg-blue-500'
       }`} />
       <span className="text-sm font-medium">
         {statusConfig[status].label}

package/docs/core-concepts/organisations.md

@@ -38,6 +38,7 @@ interface Organisation {
 
 ```typescript
 interface OrganisationSettings {
+  theme: 'light' | 'dark' | 'auto';
   timezone: string;
   date_format: string;
   time_format: '12h' | '24h';

package/docs/core-concepts/rbac-system.md

@@ -62,12 +62,12 @@ Permissions define specific actions users can perform on resources.
 - **settings** - Configuration management
 
 #### Permission Examples
-- `read:page.dashboard` - View dashboard page
-- `create:page.users` - Create users on users page
-- `update:page.settings` - Modify settings page
-- `delete:page.admin` - Remove content from admin page
-- `manage:page.system` - Full system page management
-- `read:events` - View event information (event-app permission)
+- `view_basic` - View basic organisation information
+- `view_details` - View detailed organisation information
+- `moderate_content` - Moderate content within organisation
+- `manage_events` - Create and manage events
+- `manage_members` - Manage organisation members
+- `manage_settings` - Manage organisation settings
 
 ### Permission Hierarchy
 
@@ -75,20 +75,16 @@ Permissions follow a hierarchical structure based on organisation roles:
 
 ```
 Organisation Admin
-├── All page permissions (read:page.*, create:page.*, update:page.*, delete:page.*, manage:page.*)
-├── All event-app permissions (read:events, create:events, update:events, delete:events)
+├── All permissions (view_basic, view_details, moderate_content, manage_events, manage_members, manage_settings)
 
 Leader
-├── Most page permissions (read:page.*, create:page.*, update:page.*)
-├── Event management (read:events, create:events, update:events)
+├── view_basic, view_details, moderate_content, manage_events
 
 Member
-├── Basic page permissions (read:page.dashboard, read:page.users)
-├── Basic event access (read:events)
+├── view_basic, view_details
 
 Supporter
-├── Limited page permissions (read:page.dashboard)
-├── No event access
+├── view_basic
 ```
 
 ### Role-Based Permission Mapping
@@ -154,15 +150,6 @@ Permissions can be scoped to specific resources:
 
 ## Security Features
 
-### Database-First Architecture
-
-The RBAC system uses a **database-first architecture** where all permission logic resides in PostgreSQL functions:
-
-- **RPC Functions** - All permission checks use `get_rbac_permissions()` RPC function
-- **RLS Protection** - Direct table access is blocked by Row Level Security policies
-- **Elevated Privileges** - RPC functions run with elevated privileges to bypass RLS
-- **Single Source of Truth** - All permission logic centralized in database functions
-
 ### Permission Validation
 
 - **Runtime Checking** - Permissions are validated on every request

package/docs/documentation-style-checklist.md

@@ -20,10 +20,7 @@ Comprehensive checklist for maintaining consistent, high-quality documentation a
 // ✅ Good - Complete, runnable example
 import React, { useState } from 'react';
 import { DataTable, Button } from '@jmruthers/pace-core';
-
-// Import the core CSS file (in your app's entry point)
-import './app.css'; // Your app's color palette (must come first)
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/styles/tokens';
 
 interface User {
   id: string;
@@ -122,10 +119,7 @@ function MyComponent() {
 // ✅ Good - Complete imports
 import React, { useState, useEffect } from 'react';
 import { DataTable, Button, useUnifiedAuth } from '@jmruthers/pace-core';
-
-// Import the core CSS file (in your app's entry point)
-import './app.css'; // Your app's color palette (must come first)
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/styles/tokens';
 
 // ❌ Bad - Incomplete imports
 import { DataTable } from '@jmruthers/pace-core';

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

@@ -15,21 +15,7 @@ A minimal application showing just authentication and basic UI components.
 
 **Perfect for:** Learning the basics, simple apps, prototypes
 
-[View Example →](./basic-auth-app.md) | [Live Demo](https://codesandbox.io/s/pace-core-basic-auth) | [GitHub](https://github.com/jmruthers/pace-core/tree/main/examples/basic-auth)
-
-### NavigationMenu Authentication Fix
-A detailed example showing how to fix NavigationMenu authentication context issues.
-
-**Features:**
-- Proper authentication context integration
-- Permission-based navigation filtering
-- Role-based navigation items
-- Audit logging for navigation access
-- Complete working example with bug fixes
-
-**Perfect for:** Fixing NavigationMenu issues, understanding authentication integration
-
-[View Example →](./navigation-menu-auth-fix.md) | [GitHub](https://github.com/jmruthers/pace-core/tree/main/examples/navigation-menu-auth-fix)
+[View Example →](./basic-auth-app.md)
 
 ### Full-Featured Application
 A complete meal management app demonstrating all PACE Core features.