@riligar/agents-kit 1.19.0 → 1.20.0

package/.agent/skills/riligar-dev-auth-react/SKILL.md

@@ -11,10 +11,10 @@ This skill provides a complete workflow for integrating authentication and permi
 
 ### 1. Installation
 
-Install the SDK using bun (preferred) or npm:
+Install the SDK and its core dependencies (Mantine & Tabler Icons) using bun:
 
 ```bash
-bun add @riligar/auth-react
+bun add @riligar/auth-react @mantine/core @mantine/hooks @mantine/notifications @tabler/icons-react
 ```
 
 ### 2. Environment Variables
@@ -34,19 +34,29 @@ VITE_AUTH_API_KEY=pk_live_your_public_key
 
 ### 3. AuthProvider Setup
 
-Wrap your application (usually in `main.jsx` or `App.jsx`) with the `AuthProvider`.
+Wrap your application (usually in `main.jsx` or `App.jsx`) with the `AuthProvider` and `MantineProvider`.
 
 ```jsx
 import { AuthProvider } from '@riligar/auth-react'
+import { MantineProvider } from '@mantine/core'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-    <AuthProvider apiKey={import.meta.env.VITE_AUTH_API_KEY}>
-        <App />
-    </AuthProvider>
+    <MantineProvider theme={yourTheme}>
+        <AuthProvider apiKey={import.meta.env.VITE_AUTH_API_KEY}>
+            <App />
+        </AuthProvider>
+    </MantineProvider>
 )
 ```
 
-For more setup patterns, see [setup-snippets.js](assets/setup-snippets.js).
+## Ready-to-Use Templates
+
+Use these assets to quickly scaffold a complete authentication flow:
+
+- **Routing Architecture**: Comprehensive [routes.jsx](assets/routes.jsx) showing Public vs Protected patterns.
+- **Login & Signup**: Generic [signin.jsx](assets/signin.jsx) and [signup.jsx](assets/signup.jsx) templates.
+- **Email Verification**: [verify-email.jsx](assets/verify-email.jsx) handler.
+- **Utility Wrappers**: [auth-loader.jsx](assets/auth-loader.jsx), [require-feature.jsx](assets/require-feature.jsx), and [layout.jsx](assets/layout.jsx).
 
 ## Specialized Guides
 
@@ -64,25 +74,21 @@ Use `useAuth()` to access user data and authentication status.
 const { user, isAuthenticated, loading } = useAuth()
 ```
 
-### Adding a Login Form
-
-Simply drop the `<SignIn />` component. Use `variant="modal"` if you want it in a popup.
-
-```jsx
-<SignIn />
-// or
-<SignIn variant="modal" opened={isOpen} onClose={() => setIsOpen(false)} />
-```
-
 ### Protecting a Dashboard
 
-Wrap your sub-routes with `<Protect />`.
+The recommended pattern is to use the **Protected Group** pattern with React Router as shown in [routes.jsx](assets/routes.jsx).
 
 ```jsx
-<Route element={<Protect redirectTo="/login" />}>
+// Nested routes under <Protect /> guarantee that all sub-routes are guarded.
+<Route element={<Protect fallback={<AuthLoader />} />}>
     <Route
-        path="/dashboard"
-        element={<Dashboard />}
-    />
+        path="/"
+        element={<Layout />}
+    >
+        <Route
+            index
+            element={<Home />}
+        />
+    </Route>
 </Route>
 ```

package/.agent/skills/riligar-dev-auth-react/assets/auth-loader.jsx

@@ -0,0 +1,31 @@
+import { Center, Loader, Stack, Text } from '@mantine/core'
+
+/**
+ * AuthLoader Component
+ *
+ * Standard loading screen used during authentication state transitions
+ * (e.g., checking tokens on initial load or redirects).
+ */
+export default function AuthLoader() {
+    return (
+        <Center h="100vh">
+            <Stack
+                align="center"
+                gap="md"
+            >
+                <Loader
+                    size="lg"
+                    variant="dots"
+                    color="brand"
+                />
+                <Text
+                    size="sm"
+                    c="dimmed"
+                    fw={500}
+                >
+                    Verificando acesso...
+                </Text>
+            </Stack>
+        </Center>
+    )
+}

package/.agent/skills/riligar-dev-auth-react/assets/layout.jsx

@@ -0,0 +1,54 @@
+import { AppShell, Burger, Group, Text } from '@mantine/core'
+import { useDisclosure } from '@mantine/hooks'
+import { Outlet } from 'react-router-dom'
+
+/**
+ * Layout Component
+ *
+ * Standard Dashboard layout using Mantine AppShell.
+ * Provides the structure for sidebars, headers, and main content area.
+ */
+export default function Layout() {
+    const [opened, { toggle }] = useDisclosure()
+
+    return (
+        <AppShell
+            header={{ height: 60 }}
+            navbar={{
+                width: 300,
+                breakpoint: 'sm',
+                collapsed: { mobile: !opened },
+            }}
+            padding="md"
+        >
+            <AppShell.Header>
+                <Group
+                    h="100%"
+                    px="md"
+                >
+                    <Burger
+                        opened={opened}
+                        onClick={toggle}
+                        hiddenFrom="sm"
+                        size="sm"
+                    />
+                    <Text fw={700}>Dashboard</Text>
+                </Group>
+            </AppShell.Header>
+
+            <AppShell.Navbar p="md">
+                {/* Navigation links go here */}
+                <Text
+                    size="sm"
+                    c="dimmed"
+                >
+                    Navigation Menu
+                </Text>
+            </AppShell.Navbar>
+
+            <AppShell.Main>
+                <Outlet />
+            </AppShell.Main>
+        </AppShell>
+    )
+}

package/.agent/skills/riligar-dev-auth-react/assets/require-feature.jsx

@@ -0,0 +1,33 @@
+import { useAuth } from '@riligar/auth-react'
+import { Navigate } from 'react-router-dom'
+import AuthLoader from './auth-loader'
+
+/**
+ * RequireFeature Wrapper
+ *
+ * Protects routes based on specific user attributes or feature flags.
+ * This is an example of how to extend authentication with business logic.
+ */
+export default function RequireFeature({ children }) {
+    const { user, isAuthenticated, loading } = useAuth()
+
+    if (loading) {
+        return <AuthLoader />
+    }
+
+    if (!isAuthenticated) {
+        return (
+            <Navigate
+                to="/auth/signin"
+                replace
+            />
+        )
+    }
+
+    // Example logic: Ensure user has a setup complete or a specific role
+    // if (!user.onboardingCompleted) {
+    //     return <Navigate to="/onboarding" replace />
+    // }
+
+    return children
+}

package/.agent/skills/riligar-dev-auth-react/references/route-protection.md

@@ -13,33 +13,38 @@ Use these components to control access to specific parts of your application.
 
 ## Usage Patterns
 
-### Protecting Routes (React Router)
+### Protecting Routes (createBrowserRouter)
+
+The most robust way to protect routes in a Riligar app is using the **Protected Group** pattern with `createBrowserRouter`. This ensures consistent layout and authentication guards.
 
 ```jsx
-import { Protect, SignIn } from '@riligar/auth-react'
-import { Routes, Route } from 'react-router-dom'
-
-;<Routes>
-    <Route
-        path="/login"
-        element={<SignIn />}
-    />
-
-    <Route element={<Protect redirectTo="/login" />}>
-        <Route
-            path="/dashboard"
-            element={<Dashboard />}
-        />
-        <Route
-            path="/settings"
-            element={<Settings />}
-        />
-    </Route>
-</Routes>
+import { createBrowserRouter, Navigate } from 'react-router-dom'
+import { Protect } from '@riligar/auth-react'
+import AuthLoader from '../components/auth-loader.jsx'
+import Layout from '../components/layout.jsx'
+
+export const router = createBrowserRouter([
+    // Public paths
+    { path: '/auth/signin', element: <SignIn /> },
+
+    // Protected paths
+    {
+        element: <Protect fallback={<AuthLoader />} />,
+        children: [
+            {
+                path: '/',
+                element: <Layout />,
+                children: [{ index: true, element: <Dashboard /> }],
+            },
+        ],
+    },
+])
 ```
 
 ### Conditional UI Elements
 
+Use these wrappers inside your components (headers, sidebars, etc.) for granular visibility.
+
 ```jsx
 import { SignedIn, SignedOut, AuthLoading } from '@riligar/auth-react'
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@riligar/agents-kit",
-    "version": "1.19.0",
+    "version": "1.20.0",
     "publishConfig": {
         "access": "public"
     },