@nsxbet/admin-sdk 0.1.0

package/dist/auth/client/in-memory.js

@@ -0,0 +1,242 @@
+/**
+ * In-Memory Auth Client
+ *
+ * Provides fake authentication for development and testing.
+ * Users can be selected from a predefined list or created custom.
+ */
+/**
+ * Default mock users
+ */
+const DEFAULT_MOCK_USERS = [
+    {
+        id: 'admin-user',
+        email: 'admin@example.com',
+        displayName: 'Admin User',
+        roles: [
+            'admin',
+            // Tasks - full access
+            'admin.tasks.view',
+            'admin.tasks.edit',
+            'admin.tasks.delete',
+            // Users - full access
+            'admin.users.view',
+            'admin.users.edit',
+            'admin.users.delete',
+        ],
+    },
+    {
+        id: 'editor-user',
+        email: 'editor@example.com',
+        displayName: 'Editor User',
+        roles: [
+            // Tasks - can create/edit, no delete
+            'admin.tasks.view',
+            'admin.tasks.edit',
+            // Users - view only
+            'admin.users.view',
+        ],
+    },
+    {
+        id: 'viewer-user',
+        email: 'viewer@example.com',
+        displayName: 'Viewer User',
+        roles: [
+            // View only - no edit or delete
+            'admin.tasks.view',
+            'admin.users.view',
+        ],
+    },
+    {
+        id: 'no-access-user',
+        email: 'noaccess@example.com',
+        displayName: 'No Access User',
+        roles: [],
+    },
+];
+const DEFAULT_STORAGE_KEY = '@nsxbet/auth';
+/**
+ * Create an in-memory auth client for development/testing
+ */
+export function createInMemoryAuthClient(options = {}) {
+    const { users: customUsers = [], replaceDefaults = false, storageKey = DEFAULT_STORAGE_KEY, } = options;
+    // Merge users
+    const predefinedUsers = replaceDefaults ? customUsers : [...DEFAULT_MOCK_USERS, ...customUsers];
+    // State
+    let selectedUser = null;
+    const subscribers = new Set();
+    /**
+     * Load state from localStorage
+     */
+    function loadStorage() {
+        try {
+            const data = localStorage.getItem(storageKey);
+            if (data) {
+                return JSON.parse(data);
+            }
+        }
+        catch {
+            // Ignore parse errors
+        }
+        return { selectedUserId: null, customUsers: [] };
+    }
+    /**
+     * Save state to localStorage
+     */
+    function saveStorage(data) {
+        localStorage.setItem(storageKey, JSON.stringify(data));
+    }
+    /**
+     * Get all available users (predefined + custom)
+     */
+    function getAllUsers() {
+        const storage = loadStorage();
+        return [...predefinedUsers, ...storage.customUsers];
+    }
+    /**
+     * Find user by ID
+     */
+    function findUser(userId) {
+        return getAllUsers().find((u) => u.id === userId);
+    }
+    /**
+     * Notify subscribers of state change
+     */
+    function notifySubscribers() {
+        const state = {
+            isAuthenticated: selectedUser !== null,
+            user: selectedUser ? {
+                id: selectedUser.id,
+                email: selectedUser.email,
+                displayName: selectedUser.displayName,
+            } : null,
+        };
+        subscribers.forEach((callback) => callback(state));
+    }
+    /**
+     * Convert MockUser to User
+     */
+    function toUser(mockUser) {
+        return {
+            id: mockUser.id,
+            email: mockUser.email,
+            displayName: mockUser.displayName,
+        };
+    }
+    // Public API
+    const client = {
+        type: 'in-memory',
+        async initialize() {
+            const storage = loadStorage();
+            if (storage.selectedUserId) {
+                const user = findUser(storage.selectedUserId);
+                if (user) {
+                    selectedUser = user;
+                    return true;
+                }
+            }
+            return false;
+        },
+        isAuthenticated() {
+            return selectedUser !== null;
+        },
+        getUser() {
+            return selectedUser ? toUser(selectedUser) : null;
+        },
+        async getAccessToken() {
+            if (!selectedUser) {
+                throw new Error('Not authenticated');
+            }
+            return `mock-token-${selectedUser.id}-${Date.now()}`;
+        },
+        hasPermission(permission) {
+            if (!selectedUser) {
+                return false;
+            }
+            // '*' means all permissions
+            if (selectedUser.roles.includes('*')) {
+                return true;
+            }
+            // Check exact match or wildcard
+            return selectedUser.roles.some((role) => {
+                if (role === permission)
+                    return true;
+                // Support wildcard like 'admin.*'
+                if (role.endsWith('.*')) {
+                    const prefix = role.slice(0, -2);
+                    return permission.startsWith(prefix);
+                }
+                return false;
+            });
+        },
+        logout() {
+            selectedUser = null;
+            const storage = loadStorage();
+            storage.selectedUserId = null;
+            saveStorage(storage);
+            notifySubscribers();
+        },
+        subscribe(callback) {
+            subscribers.add(callback);
+            return () => {
+                subscribers.delete(callback);
+            };
+        },
+        getAvailableUsers() {
+            return getAllUsers();
+        },
+        login(userId) {
+            const user = findUser(userId);
+            if (!user) {
+                throw new Error(`User not found: ${userId}`);
+            }
+            selectedUser = user;
+            const storage = loadStorage();
+            storage.selectedUserId = userId;
+            saveStorage(storage);
+            notifySubscribers();
+        },
+        createCustomUser(userData) {
+            const id = `custom-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+            const newUser = { ...userData, id };
+            // Save to storage
+            const storage = loadStorage();
+            storage.customUsers.push(newUser);
+            saveStorage(storage);
+            // Login as the new user
+            client.login(id);
+            return newUser;
+        },
+        isCustomUser(userId) {
+            // Custom users have IDs starting with 'custom-'
+            return userId.startsWith('custom-');
+        },
+        deleteCustomUser(userId) {
+            // Cannot delete predefined users
+            if (!client.isCustomUser(userId)) {
+                return false;
+            }
+            const storage = loadStorage();
+            const index = storage.customUsers.findIndex((u) => u.id === userId);
+            if (index === -1) {
+                return false;
+            }
+            // Remove from storage
+            storage.customUsers.splice(index, 1);
+            // If deleted user was logged in, logout
+            if (storage.selectedUserId === userId) {
+                storage.selectedUserId = null;
+                selectedUser = null;
+            }
+            saveStorage(storage);
+            notifySubscribers();
+            return true;
+        },
+    };
+    return client;
+}
+/**
+ * Clear in-memory auth storage (useful for tests)
+ */
+export function clearInMemoryAuth(storageKey = DEFAULT_STORAGE_KEY) {
+    localStorage.removeItem(storageKey);
+}

package/dist/auth/client/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Auth Client exports
+ */
+export type { AuthClient, InMemoryAuthClient, MockUser, AuthState, AuthStateCallback, } from './interface';
+export { createInMemoryAuthClient, clearInMemoryAuth, type InMemoryAuthClientOptions, } from './in-memory';
+export { createKeycloakAuthClient, type KeycloakAuthClientOptions, } from './keycloak';
+//# sourceMappingURL=index.d.ts.map

package/dist/auth/client/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/auth/client/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,YAAY,EACV,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,iBAAiB,GAClB,MAAM,aAAa,CAAC;AAGrB,OAAO,EACL,wBAAwB,EACxB,iBAAiB,EACjB,KAAK,yBAAyB,GAC/B,MAAM,aAAa,CAAC;AAGrB,OAAO,EACL,wBAAwB,EACxB,KAAK,yBAAyB,GAC/B,MAAM,YAAY,CAAC"}

package/dist/auth/client/index.js

@@ -0,0 +1,7 @@
+/**
+ * Auth Client exports
+ */
+// In-memory client
+export { createInMemoryAuthClient, clearInMemoryAuth, } from './in-memory';
+// Keycloak client
+export { createKeycloakAuthClient, } from './keycloak';

package/dist/auth/client/interface.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Auth Client Interface
+ *
+ * Defines the interface for authentication operations.
+ * Can be implemented by in-memory (mock) or Keycloak clients.
+ */
+import type { User } from '../../types/platform';
+/**
+ * Mock user for in-memory auth client
+ */
+export interface MockUser {
+    id: string;
+    email: string;
+    displayName: string;
+    roles: string[];
+}
+/**
+ * Auth client state
+ */
+export interface AuthState {
+    isAuthenticated: boolean;
+    user: User | null;
+}
+/**
+ * Callback for auth state changes
+ */
+export type AuthStateCallback = (state: AuthState) => void;
+/**
+ * Auth Client Interface
+ *
+ * Usage:
+ * ```typescript
+ * // Create client
+ * const authClient = createInMemoryAuthClient();
+ *
+ * // Initialize (returns true if already authenticated)
+ * const isReady = await authClient.initialize();
+ *
+ * // Check auth state
+ * if (authClient.isAuthenticated()) {
+ *   const user = authClient.getUser();
+ * }
+ *
+ * // Subscribe to changes
+ * const unsubscribe = authClient.subscribe((state) => {
+ *   console.log('Auth state:', state);
+ * });
+ *
+ * // Logout
+ * authClient.logout();
+ * ```
+ */
+export interface AuthClient {
+    /**
+     * Client type identifier
+     */
+    readonly type: 'in-memory' | 'keycloak';
+    /**
+     * Initialize the auth client
+     * @returns true if user is authenticated, false if login/selection is needed
+     */
+    initialize(): Promise<boolean>;
+    /**
+     * Check if user is currently authenticated
+     */
+    isAuthenticated(): boolean;
+    /**
+     * Get the current user (null if not authenticated)
+     */
+    getUser(): User | null;
+    /**
+     * Get access token for API calls
+     */
+    getAccessToken(): Promise<string>;
+    /**
+     * Check if user has a specific permission/role
+     */
+    hasPermission(permission: string): boolean;
+    /**
+     * Log out the current user
+     */
+    logout(): void;
+    /**
+     * Subscribe to auth state changes
+     * @returns Unsubscribe function
+     */
+    subscribe(callback: AuthStateCallback): () => void;
+}
+/**
+ * Extended interface for in-memory auth client
+ */
+export interface InMemoryAuthClient extends AuthClient {
+    readonly type: 'in-memory';
+    /**
+     * Get all available mock users
+     */
+    getAvailableUsers(): MockUser[];
+    /**
+     * Check if a user is a custom user (can be deleted)
+     */
+    isCustomUser(userId: string): boolean;
+    /**
+     * Login as a specific user
+     */
+    login(userId: string): void;
+    /**
+     * Create and login as a custom user
+     */
+    createCustomUser(user: Omit<MockUser, 'id'>): MockUser;
+    /**
+     * Delete a custom user (predefined users cannot be deleted)
+     */
+    deleteCustomUser(userId: string): boolean;
+}
+//# sourceMappingURL=interface.d.ts.map

package/dist/auth/client/interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/auth/client/interface.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAEjD;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,UAAU,CAAC;IAExC;;;OAGG;IACH,UAAU,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IAE/B;;OAEG;IACH,eAAe,IAAI,OAAO,CAAC;IAE3B;;OAEG;IACH,OAAO,IAAI,IAAI,GAAG,IAAI,CAAC;IAEvB;;OAEG;IACH,cAAc,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IAElC;;OAEG;IACH,aAAa,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC;IAE3C;;OAEG;IACH,MAAM,IAAI,IAAI,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,QAAQ,EAAE,iBAAiB,GAAG,MAAM,IAAI,CAAC;CACpD;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAE3B;;OAEG;IACH,iBAAiB,IAAI,QAAQ,EAAE,CAAC;IAEhC;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;OAEG;IACH,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAC;IAEvD;;OAEG;IACH,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3C"}

package/dist/auth/client/interface.js

@@ -0,0 +1,7 @@
+/**
+ * Auth Client Interface
+ *
+ * Defines the interface for authentication operations.
+ * Can be implemented by in-memory (mock) or Keycloak clients.
+ */
+export {};

package/dist/auth/client/keycloak.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Keycloak Auth Client
+ *
+ * Provides real authentication via Keycloak for production environments.
+ */
+import type { KeycloakConfig } from '../../types/keycloak';
+import type { AuthClient } from './interface';
+/**
+ * Options for creating a Keycloak auth client
+ */
+export interface KeycloakAuthClientOptions {
+    /** Keycloak configuration */
+    config: KeycloakConfig;
+}
+/**
+ * Create a Keycloak auth client for production
+ */
+export declare function createKeycloakAuthClient(options: KeycloakAuthClientOptions): AuthClient;
+//# sourceMappingURL=keycloak.d.ts.map

package/dist/auth/client/keycloak.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keycloak.d.ts","sourceRoot":"","sources":["../../../src/auth/client/keycloak.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAuB,MAAM,sBAAsB,CAAC;AAChF,OAAO,KAAK,EAAE,UAAU,EAAgC,MAAM,aAAa,CAAC;AAE5E;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,6BAA6B;IAC7B,MAAM,EAAE,cAAc,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,yBAAyB,GAAG,UAAU,CAwIvF"}

package/dist/auth/client/keycloak.js

@@ -0,0 +1,126 @@
+/**
+ * Keycloak Auth Client
+ *
+ * Provides real authentication via Keycloak for production environments.
+ */
+import Keycloak from 'keycloak-js';
+/**
+ * Create a Keycloak auth client for production
+ */
+export function createKeycloakAuthClient(options) {
+    const { config } = options;
+    let keycloak = null;
+    let currentUser = null;
+    let isInitialized = false;
+    const subscribers = new Set();
+    /**
+     * Parse user from Keycloak token
+     */
+    function parseUser(tokenParsed) {
+        return {
+            id: tokenParsed.sub || '',
+            email: tokenParsed.email || '',
+            displayName: tokenParsed.name || tokenParsed.preferred_username || '',
+        };
+    }
+    /**
+     * Notify subscribers of state change
+     */
+    function notifySubscribers() {
+        const state = {
+            isAuthenticated: currentUser !== null,
+            user: currentUser,
+        };
+        subscribers.forEach((callback) => callback(state));
+    }
+    const client = {
+        type: 'keycloak',
+        async initialize() {
+            if (keycloak) {
+                return keycloak.authenticated ?? false;
+            }
+            keycloak = new Keycloak({
+                url: config.url || 'http://localhost:8080',
+                realm: config.realm || 'admin',
+                clientId: config.clientId,
+            });
+            try {
+                const authenticated = await keycloak.init({
+                    onLoad: 'login-required',
+                    checkLoginIframe: false,
+                    pkceMethod: 'S256',
+                });
+                if (authenticated && keycloak.tokenParsed) {
+                    currentUser = parseUser(keycloak.tokenParsed);
+                }
+                isInitialized = true;
+                // Notify subscribers that auth is ready - this triggers React re-render
+                // which will re-evaluate permissions with the now-available token
+                notifySubscribers();
+                // Setup token refresh
+                keycloak.onTokenExpired = () => {
+                    keycloak?.updateToken(30).catch(() => {
+                        console.error('[AuthClient] Failed to refresh token');
+                        client.logout();
+                    });
+                };
+                // Setup auth state changes
+                keycloak.onAuthLogout = () => {
+                    currentUser = null;
+                    notifySubscribers();
+                };
+                keycloak.onAuthRefreshError = () => {
+                    currentUser = null;
+                    notifySubscribers();
+                };
+                return authenticated;
+            }
+            catch (error) {
+                console.error('[AuthClient] Keycloak initialization failed:', error);
+                throw error;
+            }
+        },
+        isAuthenticated() {
+            return keycloak?.authenticated ?? false;
+        },
+        getUser() {
+            return currentUser;
+        },
+        async getAccessToken() {
+            if (!keycloak) {
+                throw new Error('Keycloak not initialized');
+            }
+            try {
+                await keycloak.updateToken(5);
+                return keycloak.token || '';
+            }
+            catch (error) {
+                console.error('[AuthClient] Failed to refresh token');
+                client.logout();
+                throw error;
+            }
+        },
+        hasPermission(permission) {
+            // If not initialized yet, return true to avoid hiding modules during init
+            // The UI will re-render after authentication completes
+            if (!isInitialized || !keycloak) {
+                return true;
+            }
+            return keycloak.hasRealmRole(permission);
+        },
+        logout() {
+            currentUser = null;
+            if (keycloak) {
+                keycloak.logout();
+            }
+            notifySubscribers();
+        },
+        subscribe(callback) {
+            subscribers.add(callback);
+            return () => {
+                subscribers.delete(callback);
+            };
+        },
+    };
+    return client;
+}

package/dist/auth/components/UserSelector.d.ts

@@ -0,0 +1,19 @@
+/**
+ * User Selector Component
+ *
+ * Displays available mock users for selection in development mode.
+ * Uses Brasa Design System tokens for consistent styling.
+ */
+import type { InMemoryAuthClient } from '../client/interface';
+interface UserSelectorProps {
+    /** The in-memory auth client */
+    authClient: InMemoryAuthClient;
+    /** Callback when user is selected */
+    onUserSelected?: () => void;
+}
+/**
+ * Main User Selector Component
+ */
+export declare function UserSelector({ authClient, onUserSelected }: UserSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UserSelector.d.ts.map

package/dist/auth/components/UserSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSelector.d.ts","sourceRoot":"","sources":["../../../src/auth/components/UserSelector.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,kBAAkB,EAAY,MAAM,qBAAqB,CAAC;AAExE,UAAU,iBAAiB;IACzB,gCAAgC;IAChC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AA2ND;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,UAAU,EAAE,cAAc,EAAE,EAAE,iBAAiB,2CAqF7E"}

package/dist/auth/components/UserSelector.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * User Selector Component
+ *
+ * Displays available mock users for selection in development mode.
+ * Uses Brasa Design System tokens for consistent styling.
+ */
+import { useState } from 'react';
+import { Crown, Ban, Eye, User, Users, Sparkles, Wrench, Trash2, Plus, ChevronRight } from '@nsxbet/admin-ui';
+/**
+ * Get user icon based on roles
+ */
+function getUserIcon(roles) {
+    const iconClass = "h-7 w-7";
+    if (roles.includes('admin') || roles.includes('*')) {
+        return _jsx(Crown, { className: `${iconClass} text-amber-500` });
+    }
+    if (roles.length === 0) {
+        return _jsx(Ban, { className: `${iconClass} text-destructive` });
+    }
+    if (roles.some((r) => r.includes('view') && !r.includes('edit'))) {
+        return _jsx(Eye, { className: `${iconClass} text-info` });
+    }
+    return _jsx(User, { className: `${iconClass} text-muted-foreground` });
+}
+/**
+ * Get role badge color using Brasa Design System tokens
+ */
+function getRoleBadgeColor(role) {
+    if (role === 'admin' || role === '*') {
+        // Admin uses accent-odd (gold) - prominent highlight
+        return 'bg-accent-odd/20 text-accent-odd border-accent-odd/30';
+    }
+    if (role.includes('edit')) {
+        // Edit permissions use success (green)
+        return 'bg-success/20 text-success border-success/30';
+    }
+    if (role.includes('view')) {
+        // View permissions use info (blue)
+        return 'bg-info/20 text-info border-info/30';
+    }
+    // Default uses muted
+    return 'bg-muted text-muted-foreground border-border';
+}
+/**
+ * User Card Component
+ */
+function UserCard({ user, isCustom, onClick, onDelete, }) {
+    const icon = getUserIcon(user.roles);
+    const handleDelete = (e) => {
+        e.stopPropagation();
+        if (onDelete && confirm(`Delete user "${user.displayName}"?`)) {
+            onDelete();
+        }
+    };
+    return (_jsxs("div", { className: "relative group", children: [_jsx("button", { onClick: onClick, className: "w-full p-4 rounded-xl border border-border bg-card hover:bg-muted/50 hover:border-muted-foreground/30 transition-all duration-200 text-left", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "flex-shrink-0", children: icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "font-semibold text-foreground group-hover:text-foreground transition-colors", children: user.displayName }), isCustom && (_jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30", children: "custom" }))] }), _jsx("p", { className: "text-sm text-muted-foreground truncate", children: user.email }), _jsxs("div", { className: "flex flex-wrap gap-1.5 mt-2", children: [user.roles.length === 0 ? (_jsx("span", { className: "text-xs px-2 py-0.5 rounded-full border bg-destructive/20 text-destructive border-destructive/30", children: "no roles" })) : (user.roles.slice(0, 4).map((role) => (_jsx("span", { className: `text-xs px-2 py-0.5 rounded-full border ${getRoleBadgeColor(role)}`, children: role }, role)))), user.roles.length > 4 && (_jsxs("span", { className: "text-xs px-2 py-0.5 rounded-full border bg-muted text-muted-foreground border-border", children: ["+", user.roles.length - 4, " more"] }))] })] }), _jsx("div", { className: "text-muted-foreground group-hover:text-foreground transition-colors", children: _jsx(ChevronRight, { className: "h-5 w-5" }) })] }) }), isCustom && onDelete && (_jsx("button", { onClick: handleDelete, className: "absolute top-2 right-2 p-1.5 rounded-lg bg-destructive/10 text-destructive opacity-0 group-hover:opacity-100 hover:bg-destructive/20 transition-all", title: "Delete user", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }));
+}
+/**
+ * Custom User Form Component
+ */
+function CustomUserForm({ onSubmit, onCancel, }) {
+    const [displayName, setDisplayName] = useState('');
+    const [email, setEmail] = useState('');
+    const [rolesInput, setRolesInput] = useState('');
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const roles = rolesInput
+            .split(',')
+            .map((r) => r.trim())
+            .filter(Boolean);
+        onSubmit({ displayName, email, roles });
+    };
+    const isValid = displayName.trim() && email.trim();
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "p-4 rounded-xl border border-border bg-card", children: [_jsxs("h3", { className: "font-semibold text-foreground mb-4 flex items-center gap-2", children: [_jsx(Sparkles, { className: "h-5 w-5 text-amber-500" }), "Create Custom User"] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-muted-foreground mb-1", children: "Display Name" }), _jsx("input", { type: "text", value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "John Doe", className: "w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-muted-foreground mb-1", children: "Email" }), _jsx("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "john@example.com", className: "w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent" })] }), _jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-medium text-muted-foreground mb-1", children: ["Roles ", _jsx("span", { className: "text-muted-foreground/60", children: "(comma-separated)" })] }), _jsx("input", { type: "text", value: rolesInput, onChange: (e) => setRolesInput(e.target.value), placeholder: "admin, admin.users.view, admin.tasks.edit", className: "w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent" }), _jsxs("p", { className: "text-xs text-muted-foreground mt-1", children: ["Use ", _jsx("code", { className: "px-1 py-0.5 rounded bg-muted", children: "*" }), " for all permissions"] })] })] }), _jsxs("div", { className: "flex gap-2 mt-4", children: [_jsx("button", { type: "button", onClick: onCancel, className: "flex-1 px-4 py-2 rounded-lg border border-border text-foreground hover:bg-muted/50 transition-colors", children: "Cancel" }), _jsx("button", { type: "submit", disabled: !isValid, className: "flex-1 px-4 py-2 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Create & Login" })] })] }));
+}
+/**
+ * Main User Selector Component
+ */
+export function UserSelector({ authClient, onUserSelected }) {
+    const [showCustomForm, setShowCustomForm] = useState(false);
+    const [, forceUpdate] = useState(0);
+    const users = authClient.getAvailableUsers();
+    const handleSelectUser = (userId) => {
+        authClient.login(userId);
+        onUserSelected?.();
+    };
+    const handleCreateCustomUser = (userData) => {
+        authClient.createCustomUser(userData);
+        onUserSelected?.();
+    };
+    const handleDeleteUser = (userId) => {
+        authClient.deleteCustomUser(userId);
+        // Force re-render to update the list
+        forceUpdate((n) => n + 1);
+    };
+    return (_jsx("div", { className: "min-h-screen bg-background flex items-center justify-center p-4", children: _jsxs("div", { className: "w-full max-w-md", children: [_jsxs("div", { className: "text-center mb-8", children: [_jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary mb-4 shadow-lg shadow-primary/25", children: _jsx(Users, { className: "h-8 w-8 text-primary-foreground" }) }), _jsx("h1", { className: "text-2xl font-bold text-foreground mb-2", children: "Select User" }), _jsx("p", { className: "text-muted-foreground", children: "Choose a mock user to continue in development mode" })] }), _jsx("div", { className: "space-y-3 mb-6", children: users.map((user) => {
+                        const isCustom = authClient.isCustomUser(user.id);
+                        return (_jsx(UserCard, { user: user, isCustom: isCustom, onClick: () => handleSelectUser(user.id), onDelete: isCustom ? () => handleDeleteUser(user.id) : undefined }, user.id));
+                    }) }), _jsxs("div", { className: "relative my-6", children: [_jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("div", { className: "w-full border-t border-border" }) }), _jsx("div", { className: "relative flex justify-center text-sm", children: _jsx("span", { className: "px-3 bg-background text-muted-foreground", children: "or" }) })] }), showCustomForm ? (_jsx(CustomUserForm, { onSubmit: handleCreateCustomUser, onCancel: () => setShowCustomForm(false) })) : (_jsxs("button", { onClick: () => setShowCustomForm(true), className: "w-full p-4 rounded-xl border border-dashed border-border text-muted-foreground hover:text-foreground hover:border-muted-foreground transition-colors flex items-center justify-center gap-2", children: [_jsx(Plus, { className: "h-5 w-5" }), "Create Custom User"] })), _jsxs("p", { className: "text-center text-xs text-muted-foreground mt-8 flex items-center justify-center gap-1", children: [_jsx(Wrench, { className: "h-3 w-3" }), "Development Mode \u2022 Data stored in localStorage"] })] }) }));
+}

package/dist/auth/components/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Auth components exports
+ */
+export { UserSelector } from './UserSelector';
+//# sourceMappingURL=index.d.ts.map