@jmruthers/pace-core 0.5.60 → 0.5.61

package/docs/documentation-style-checklist.md

@@ -23,7 +23,7 @@ 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/src/styles/core.css';
 
 interface User {
   id: string;
@@ -125,7 +125,7 @@ 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/src/styles/core.css';
 
 // ❌ Bad - Incomplete imports
 import { DataTable } from '@jmruthers/pace-core';

package/docs/getting-started/examples/basic-auth-app.md

@@ -119,7 +119,7 @@ import { UnifiedAuthProvider } from '@jmruthers/pace-core';
 import { supabase } from './hooks/useSupabase';
 import LoginForm from './components/LoginForm';
 import Dashboard from './components/Dashboard';
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 
 function App() {
   return (
@@ -505,7 +505,7 @@ The app uses PACE Core's design system. You can customize:
 ### Common Issues
 
 **Styling not working:**
-- Ensure CSS import is first: `import '@jmruthers/pace-core/styles/core.css';`
+- Ensure CSS import is first: `import '@jmruthers/pace-core/src/styles/core.css';`
 - Check Vite configuration for content scanning
 
 **Authentication not working:**

package/docs/getting-started/installation.md

@@ -112,7 +112,7 @@ export default defineConfig({
 
 ```tsx
 // src/main.tsx (or your app's entry point)
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
@@ -245,7 +245,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 
 Before asking for help, verify:
 
-- [ ] CSS file is imported: `import '@jmruthers/pace-core/styles/core.css'`
+- [ ] CSS file is imported: `import '@jmruthers/pace-core/src/styles/core.css'`
 - [ ] Vite config includes pace-core in content scanning
 - [ ] Using Tailwind v4 (not v3)
 - [ ] Dev server restarted after config changes

package/docs/getting-started/quick-start.md

@@ -139,7 +139,7 @@ import { supabase } from './lib/supabase'
 import App from './App.tsx'
 
 // CRITICAL: Import the CSS system - includes everything you need
-import '@jmruthers/pace-core/styles/core.css'
+import '@jmruthers/pace-core/src/styles/core.css'
 
 // ⚠️ CRITICAL: Setup RBAC before using any RBAC features
 setupRBAC(supabase)

package/docs/migration/README.md

@@ -79,7 +79,7 @@ npm install @jmruthers/pace-core@latest
 **CRITICAL**: Fixed Tailwind v4 theme file with missing semantic colors and circular @apply references.
 
 **Impact**:
-- Build failures when importing `@jmruthers/pace-core/styles/core.css`
+- Build failures when importing `@jmruthers/pace-core/src/styles/core.css`
 - Missing semantic colors (ring, border, background, foreground, etc.)
 - Component classes not working due to circular references
 
@@ -103,7 +103,7 @@ npm install @jmruthers/pace-core@latest
 **Usage** (now works out-of-the-box):
 ```tsx
 /* main.tsx */
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 ```
 
 ```ts
@@ -154,7 +154,7 @@ PACE Core now supports Tailwind CSS v4 with modern CSS-first configuration.
    @tailwind utilities;
 
    /* After (v4) */
-   @import '@jmruthers/pace-core/styles/core.css';
+   @import '@jmruthers/pace-core/src/styles/core.css';
    ```
 
 For complete Tailwind v4 setup instructions, see the [Styling Guide](../styles/README.md#tailwind-css-v4-setup).
@@ -284,7 +284,7 @@ import { UnifiedAuthProvider } from '@jmruthers/pace-core';
 
 // Import the core CSS file - app.css must come first for proper @theme processing
 import './app.css'; // Your app's color palette
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 
 function App() {
   return (
@@ -354,7 +354,7 @@ import { Button, Modal } 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/src/styles/core.css';
 
 function MyComponent() {
   return (
@@ -454,7 +454,7 @@ echo "Migration complete! Please review changes and test thoroughly."
 **Solution**: Import the CSS files in your app's entry point:
 ```tsx
 import './app.css'; // Your app's color palette (must come first)
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 ```
 
 ### Issue 4: TypeScript Errors

package/docs/migration/quick-migration-guide.md

@@ -107,10 +107,10 @@ export default defineConfig({
 **Update CSS imports:**
 ```tsx
 // Before
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 
 // After
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 ```
 
 ### Source Path Fix (v0.4.17+)
@@ -195,7 +195,7 @@ import { Button, useUnifiedAuth } from '@jmruthers/pace-core';
 **Solution**:
 ```tsx
 // Ensure CSS import is first
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 import { Button } from '@jmruthers/pace-core';
 ```
 

package/docs/migration/v0.4.15-tailwind-scanning.md

@@ -229,7 +229,7 @@ grep -c "\.bg-\|\.text-\|\.p-\|\.m-\|\.w-\|\.h-\|\.flex\|\.grid" dist/assets/*.c
 ### Issue: Components still unstyled
 
 **Solution:**
-1. Verify CSS import: `import '@jmruthers/pace-core/styles/core.css'`
+1. Verify CSS import: `import '@jmruthers/pace-core/src/styles/core.css'`
 2. Check Vite configuration includes source files
 3. Restart dev server after changes
 

package/docs/migration/v0.4.16-css-first-approach.md

@@ -259,7 +259,7 @@ grep -c "\.bg-\|\.text-\|\.p-\|\.m-\|\.w-\|\.h-\|\.flex\|\.grid" dist/assets/*.c
 ### Issue: Components still unstyled
 
 **Solution:**
-1. Verify CSS import: `import '@jmruthers/pace-core/styles/core.css'`
+1. Verify CSS import: `import '@jmruthers/pace-core/src/styles/core.css'`
 2. Check Vite configuration includes source files
 3. Restart dev server after changes
 4. Use fallback configuration if CSS-first approach fails

package/docs/migration/v0.4.17-source-path-fix.md

@@ -6,7 +6,7 @@ This guide explains the critical fix in pace-core v0.4.17 that resolves the @sou
 
 **Issue**: The @source directives in `core.css` were using incorrect relative paths, preventing Tailwind v4 from scanning the pace-core source files.
 
-**Root Cause**: Since `core.css` is located in `dist/styles/core.css`, the relative paths `./src/**/*.{js,ts,jsx,tsx}` were looking for `dist/src/` which doesn't exist.
+**Root Cause**: Since `core.css` is located in `src/styles/core.css`, the relative paths `./src/**/*.{js,ts,jsx,tsx}` were looking for `dist/src/` which doesn't exist.
 
 ## ✅ The Fix
 
@@ -52,8 +52,8 @@ node_modules/@jmruthers/pace-core/
 ```
 
 **Path Resolution**:
-- From `dist/styles/core.css` to `src/` requires `../src/`
-- The `../` goes up one directory from `dist/styles/` to `dist/`
+- From `src/styles/core.css` to `src/` requires `../src/`
+- The `../` goes up one directory from `src/styles/` to `src/`
 - Then `src/` goes into the source directory
 
 ## 🚀 Migration Steps
@@ -209,7 +209,7 @@ You'll know the fix was successful when:
 ### Issue: Components still unstyled
 
 **Solution**:
-1. Verify CSS import: `import '@jmruthers/pace-core/styles/core.css'`
+1. Verify CSS import: `import '@jmruthers/pace-core/src/styles/core.css'`
 2. Restart dev server after changes
 3. Check browser dev tools for missing classes
 

package/docs/migration-guide.md

@@ -53,7 +53,7 @@ Replace old style imports with the new two-file system:
 // import '@jmruthers/pace-core/styles/theme.css';
 
 // NEW - Import both CSS files in the correct order
-import '@jmruthers/pace-core/styles/core.css'; // Import core first
+import '@jmruthers/pace-core/src/styles/core.css'; // Import core first
 import './app.css'; // Import app-specific colors second
 ```
 
@@ -183,7 +183,7 @@ To customize your app's colors, simply update the `--color-main-*`, `--color-sec
 - Make sure you're importing the core CSS file in your app's entry point:
   ```tsx
   import './app.css'; // Your app's color palette (must come first)
-  import '@jmruthers/pace-core/styles/core.css';
+  import '@jmruthers/pace-core/src/styles/core.css';
   ```
 - Check that Tailwind CSS v4 is properly configured
 - Ensure your Vite configuration includes the `@tailwindcss/vite` plugin

package/docs/quick-reference.md

@@ -38,7 +38,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 // Import the core CSS file - app.css must come first for proper @theme processing
 import './app.css'; // Your app's color palette
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 
 function App() {
   return (
@@ -379,7 +379,7 @@ export default defineConfig({
 });
 
 // main.tsx
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 ```
 
 **What's included automatically**:
@@ -401,14 +401,14 @@ module.exports = {
 
 // index.css or main.tsx
 import './app.css'; // Your app's color palette (must come first)
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 ```
 
 ### Using Design Tokens
 ```tsx
 // Import the core CSS file
 import './app.css'; // Your app's color palette (must come first)
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 
 // Use in your CSS
 .my-component {

package/docs/styles/README.md

@@ -149,7 +149,7 @@ Every app must define three color palettes with complete shade ranges (50-950):
 
 ```tsx
 // In your app's entry point (e.g., main.tsx)
-import '@jmruthers/pace-core/styles/core.css'; // Import core first
+import '@jmruthers/pace-core/src/styles/core.css'; // Import core first
 import './app.css'; // Import app-specific colors second
 ```
 
@@ -223,7 +223,7 @@ Create `src/app.css` in your consuming app with your brand colors and source dir
 
 ```tsx
 // In your app's entry point (e.g., main.tsx)
-import '@jmruthers/pace-core/styles/core.css'; // Import core first
+import '@jmruthers/pace-core/src/styles/core.css'; // Import core first
 import './app.css'; // Import app-specific colors second
 ```
 
@@ -357,7 +357,7 @@ PACE Core also provides semantic color utilities that automatically map to your
 
 **Solution**: Ensure you've imported both CSS files in the correct order:
 ```tsx
-import '@jmruthers/pace-core/styles/core.css'; // Import core first
+import '@jmruthers/pace-core/src/styles/core.css'; // Import core first
 import './app.css'; // Import app-specific colors second
 ```
 

package/docs/troubleshooting/README.md

@@ -37,7 +37,7 @@ Comprehensive troubleshooting guide for PACE Core applications. Find solutions t
 **Quick Fix:**
 ```tsx
 // ✅ Make sure you import the CSS
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 ```
 
 **Common Causes:**
@@ -333,7 +333,7 @@ console.log('User roles:', userRoles);
 **Quick Fix:**
 ```tsx
 // ✅ Import CSS first
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 import { Button } from '@jmruthers/pace-core';
 ```
 

package/docs/troubleshooting/common-issues.md

@@ -82,7 +82,7 @@
 **Solution:**
 1. **Import CSS** - Add to your main entry point:
    ```tsx
-   import '@jmruthers/pace-core/styles/core.css'
+   import '@jmruthers/pace-core/src/styles/core.css'
    ```
 
 2. **Configure Tailwind v4** - Ensure proper content scanning:

package/docs/troubleshooting/styling-issues.md

@@ -58,7 +58,7 @@ export default defineConfig({
 **Solution**: Import the CSS file in your main entry point:
 ```tsx
 // src/main.tsx or src/index.tsx
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 ```
 
 ### Issue: Colors not working
@@ -195,7 +195,7 @@ export default defineConfig({
 
 Before asking for help, verify:
 
-- [ ] CSS file is imported: `import '@jmruthers/pace-core/styles/core.css'`
+- [ ] CSS file is imported: `import '@jmruthers/pace-core/src/styles/core.css'`
 - [ ] Vite config includes pace-core in content scanning
 - [ ] Using Tailwind v4 (not v3)
 - [ ] Dev server restarted after config changes

package/docs/troubleshooting/tailwind-content-scanning.md

@@ -62,7 +62,7 @@ If source file scanning doesn't work, use the pre-built CSS approach:
 
 ```tsx
 // src/main.tsx
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 // Don't import your own Tailwind CSS
 ```
 
@@ -110,7 +110,7 @@ export default defineConfig({
 
 ```tsx
 // src/main.tsx
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 ```
 
 ## 🔍 Verification Steps

package/docs/usage.md

@@ -41,7 +41,7 @@ In your app's entry point (e.g., `main.tsx` or root layout):
 
 ```tsx
 // Import the core CSS file first
-import '@jmruthers/pace-core/styles/core.css';
+import '@jmruthers/pace-core/src/styles/core.css';
 
 // Import your app-specific colors second
 import './app.css';
@@ -176,7 +176,7 @@ PACE Core also provides semantic color utilities that automatically map to your
 ## Troubleshooting
 
 ### Colors Not Appearing
-- Ensure you've imported `@jmruthers/pace-core/styles/core.css`
+- Ensure you've imported `@jmruthers/pace-core/src/styles/core.css`
 - If using custom palettes, check that your `app.css` defines the complete palette
 - Verify Tailwind v4 is installed
 - Check that font files are available in your `/fonts` directory

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.5.60",
+  "version": "0.5.61",
   "description": "Clean, modern React component library with Tailwind v4 styling and native utilities",
   "private": false,
   "publishConfig": {
@@ -57,11 +57,7 @@
       "import": "./dist/rbac/eslint-rules.js",
       "default": "./dist/rbac/eslint-rules.js"
     },
-    "./styles/core.css": "./dist/styles/core.css",
-    "./styles": {
-      "import": "./dist/styles/index.js",
-      "default": "./dist/styles/index.js"
-    },
+    "./styles/core.css": "./src/styles/core.css",
     "./theming/runtime": {
       "types": "./dist/theming/runtime.d.ts",
       "import": "./dist/theming/runtime.js",

package/src/components/Toast/Toast.test.tsx

@@ -16,24 +16,15 @@ import {
   ToastViewport,
   ToastProvider,
   Toaster,
-  useToast,
   ToastProps
 } from './Toast';
+import { useToast, reset } from '../../hooks/useToast';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
-// Mock console methods to avoid noise in tests
-const originalConsoleLog = console.log;
-
 describe('Toast Component System', () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    // Mock console methods
-    console.log = vi.fn();
-  });
-
-  afterEach(() => {
-    // Restore console methods
-    console.log = originalConsoleLog;
+    reset(); // Reset toast state between tests
   });
 
   // ToastProvider component tests
@@ -126,6 +117,30 @@ describe('Toast Component System', () => {
       
       expect(screen.getByTestId('toast-viewport')).toBeInTheDocument();
     });
+
+    it('renders toasts when they exist in state', () => {
+      // Create a test component that adds a toast
+      function TestComponent() {
+        const { toast } = useToast();
+        
+        React.useEffect(() => {
+          toast({
+            title: 'Test Toast',
+            description: 'This is a test toast'
+          });
+        }, [toast]);
+        
+        return <Toaster />;
+      }
+      
+      renderWithProviders(<TestComponent />);
+      
+      // Wait for the toast to appear
+      waitFor(() => {
+        expect(screen.getByText('Test Toast')).toBeInTheDocument();
+        expect(screen.getByText('This is a test toast')).toBeInTheDocument();
+      });
+    });
   });
 
   // useToast hook tests
@@ -148,42 +163,57 @@ describe('Toast Component System', () => {
       expect(screen.getByText('Dismiss')).toBeInTheDocument();
     });
 
-    it('calls console.log when toast is triggered', async () => {
+    it('adds toast to state when triggered', async () => {
       const user = userEvent.setup();
       
       function TestComponent() {
-        const { toast } = useToast();
+        const { toast, toasts } = useToast();
         
         return (
-          <button onClick={() => toast({ title: 'Test Toast' })}>Show Toast</button>
+          <div>
+            <button onClick={() => toast({ title: 'Test Toast' })}>Show Toast</button>
+            <div data-testid="toast-count">{toasts.length}</div>
+          </div>
         );
       }
       
       renderWithProviders(<TestComponent />);
       
+      expect(screen.getByTestId('toast-count')).toHaveTextContent('0');
+      
       const button = screen.getByText('Show Toast');
       await user.click(button);
       
-      expect(console.log).toHaveBeenCalledWith('Toast:', { title: 'Test Toast' });
+      expect(screen.getByTestId('toast-count')).toHaveTextContent('1');
     });
 
-    it('calls console.log when dismiss is triggered', async () => {
+    it('dismisses toast when dismiss is called', async () => {
       const user = userEvent.setup();
       
       function TestComponent() {
-        const { dismiss } = useToast();
+        const { toast, dismiss, toasts } = useToast();
         
         return (
-          <button onClick={() => dismiss()}>Dismiss</button>
+          <div>
+            <button onClick={() => toast({ title: 'Test Toast' })}>Show Toast</button>
+            <button onClick={() => dismiss()}>Dismiss</button>
+            <div data-testid="toast-count">{toasts.length}</div>
+          </div>
         );
       }
       
       renderWithProviders(<TestComponent />);
       
-      const button = screen.getByText('Dismiss');
-      await user.click(button);
+      const showButton = screen.getByText('Show Toast');
+      await user.click(showButton);
+      
+      expect(screen.getByTestId('toast-count')).toHaveTextContent('1');
+      
+      const dismissButton = screen.getByText('Dismiss');
+      await user.click(dismissButton);
       
-      expect(console.log).toHaveBeenCalledWith('Toast dismissed');
+      // Toast should be marked as closed but still in array
+      expect(screen.getByTestId('toast-count')).toHaveTextContent('1');
     });
   });
 

package/src/components/Toast/Toast.tsx

@@ -89,6 +89,7 @@ import * as React from "react"
 import * as ToastPrimitives from "@radix-ui/react-toast"
 import { X } from "lucide-react"
 import { cn } from "../../utils/cn"
+import { useToast } from "../../hooks/useToast"
 
 const ToastProvider = ToastPrimitives.Provider
 
@@ -268,45 +269,12 @@ export interface ToastProps extends React.ComponentPropsWithoutRef<typeof ToastP
 
 export interface ToastActionElement extends React.ReactElement<typeof ToastAction> {}
 
-// Simple useToast hook
-/**
- * useToast hook
- * Hook for managing toast notifications
- * 
- * @returns Object with toast and dismiss functions
- * 
- * @example
- * ```tsx
- * const { toast, dismiss } = useToast();
- * 
- * // Show a toast
- * toast({
- *   title: "Success!",
- *   description: "Your changes have been saved."
- * });
- * 
- * // Dismiss all toasts
- * dismiss();
- * ```
- */
-export function useToast() {
-  return {
-    toast: (props: any) => {
-      console.log('Toast:', props);
-    },
-    dismiss: () => {
-      console.log('Toast dismissed');
-    }
-  };
-}
-
-// Simple Toaster component
 /**
  * Toaster component
- * Container component that provides the toast viewport
+ * Container component that renders actual toast notifications
  * Should be placed at the root of your application
  * 
- * @returns JSX.Element - The toast provider with viewport
+ * @returns JSX.Element - The toast provider with viewport and rendered toasts
  * 
  * @example
  * ```tsx
@@ -321,9 +289,19 @@ export function useToast() {
  * ```
  */
 export function Toaster() {
+  const { toasts } = useToast();
+  
   return (
     <ToastProvider data-testid="toast-provider">
       <ToastViewport />
+      {toasts.map((toast: any) => (
+        <Toast key={toast.id} {...toast}>
+          {toast.title && <ToastTitle>{toast.title}</ToastTitle>}
+          {toast.description && <ToastDescription>{toast.description}</ToastDescription>}
+          {toast.action && toast.action}
+          <ToastClose onClick={toast.dismiss} />
+        </Toast>
+      ))}
     </ToastProvider>
   );
 }

package/src/components/Toast/index.ts

@@ -10,5 +10,4 @@ export {
   ToastClose,
   ToastAction,
   Toaster,
-  useToast,
 } from './Toast';

package/src/components/index.ts

@@ -119,7 +119,6 @@ export {
   ToastTitle,
   ToastDescription,
   ToastClose,
-  useToast,
 } from './Toast';
 export type { ToastActionElement, ToastProps } from './Toast';
 

package/src/index.ts

@@ -105,8 +105,8 @@ export {
   ToastTitle,
   ToastDescription,
   ToastClose,
-  useToast,
 } from './components/Toast/Toast';
+export { useToast } from './hooks/useToast';
 export type { ToastActionElement, ToastProps } from './components/Toast/Toast';
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipRoot } from './components/Tooltip/Tooltip';

package/src/rbac/__tests__/rbac-engine-core-logic.test.ts

@@ -205,7 +205,7 @@ describe('RBACEngine - Core Logic Tests', () => {
           return Promise.resolve({
             data: [
               {
-                permission_type: 'read',
+                permission_type: 'read:page.organisation',
                 role_name: 'org_admin',
                 has_permission: true,
                 granted_at: '2023-01-01T00:00:00Z'

package/src/rbac/__tests__/rbac-engine-simplified.test.ts

@@ -93,7 +93,7 @@ describe('RBACEngine - Simplified Tests', () => {
         if (funcName === 'rbac_permissions_get') {
           return Promise.resolve({
             data: [{ 
-              permission_type: 'read', 
+              permission_type: 'read:page.users', 
               resource_name: 'users',
               role_name: 'org_admin', 
               has_permission: true,