@makolabs/ripple 1.2.9 → 1.2.11

package/dist/user-management/UserManagement.svelte

@@ -263,6 +263,7 @@
 		bind:open={showEditCreateModal}
 		bind:user={selectedUser}
 		{roles}
+		{adapter}
 		onSave={handleUserSave}
 		onClose={() => (selectedUser = null)}
 	/>

package/dist/user-management/UserModal.svelte

@@ -8,6 +8,7 @@
 		open = $bindable(),
 		user = $bindable(),
 		roles = [],
+		adapter,
 		onSave,
 		onClose,
 		class: className
@@ -20,6 +21,8 @@
 	let formErrors = $state<FormErrors>({});
 	let saving = $state(false);
 	let formElement = $state<HTMLFormElement | null>(null);
+	let showApiKey = $state(false);
+	let regeneratingApiKey = $state(false);
 
 	// Form data
 	let formData = $state<Partial<User>>({
@@ -165,10 +168,51 @@
 		}
 	}
 
+	async function handleRegenerateApiKey() {
+		if (!user?.id || !adapter?.generateApiKey || !formData.permissions) return;
+
+		try {
+			regeneratingApiKey = true;
+			const result = await adapter.generateApiKey({
+				userId: user.id,
+				permissions: formData.permissions,
+				revokeOld: true
+			});
+
+			// Update user's private_metadata with new API key
+			if (user && result.apiKey) {
+				user = {
+					...user,
+					private_metadata: {
+						...(user.private_metadata || {}),
+						mako_api_key: result.apiKey
+					}
+				};
+			}
+		} catch (error) {
+			console.error('Error regenerating API key:', error);
+			formErrors.apiKey = error instanceof Error ? error.message : 'Failed to regenerate API key';
+		} finally {
+			regeneratingApiKey = false;
+		}
+	}
+
 	function getModalTitle() {
 		if (mode === 'create') return 'Create New User';
-		return `Edit ${getUserDisplayName(user)}`;
+		return `Edit ${getUserDisplayName(user ?? null)}`;
 	}
+
+	// Get API key from user's private_metadata
+	const apiKey = $derived(
+		user?.private_metadata &&
+			typeof user.private_metadata === 'object' &&
+			'mako_api_key' in user.private_metadata
+			? (user.private_metadata.mako_api_key as string) || ''
+			: ''
+	);
+
+	// Mask API key for display
+	const maskedApiKey = $derived(apiKey ? '•'.repeat(Math.min(apiKey.length, 40)) : '');
 </script>
 
 <Modal
@@ -244,6 +288,87 @@
 					<p class="mt-1 text-xs text-red-500">{formErrors.email}</p>
 				{/if}
 			</div>
+
+			<!-- Mako API Key (Edit mode only) -->
+			{#if mode === 'edit' && (apiKey || adapter?.generateApiKey)}
+				<div>
+					<label for="api-key" class="mb-1 block text-sm font-medium text-gray-700">
+						Mako API Key
+					</label>
+					<div class="flex gap-2">
+						<div class="relative flex-1">
+							<input
+								id="api-key"
+								type={showApiKey ? 'text' : 'password'}
+								value={showApiKey ? apiKey : maskedApiKey}
+								readonly
+								class="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 pr-10 font-mono text-sm"
+								placeholder="No API key generated"
+							/>
+							<button
+								type="button"
+								onclick={() => (showApiKey = !showApiKey)}
+								class="absolute top-1/2 right-2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+								aria-label={showApiKey ? 'Hide API key' : 'Show API key'}
+							>
+								{#if showApiKey}
+									<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.29 3.29m0 0A9.966 9.966 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+										></path>
+									</svg>
+								{:else}
+									<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+										></path>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+										></path>
+									</svg>
+								{/if}
+							</button>
+						</div>
+						{#if adapter?.generateApiKey}
+							<Button
+								type="button"
+								variant="outline"
+								onclick={handleRegenerateApiKey}
+								disabled={regeneratingApiKey ||
+									!formData.permissions ||
+									formData.permissions.length === 0}
+								isLoading={regeneratingApiKey}
+							>
+								<svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+									></path>
+								</svg>
+								Regenerate Key
+							</Button>
+						{/if}
+					</div>
+					{#if formErrors.apiKey}
+						<p class="mt-1 text-xs text-red-500">{formErrors.apiKey}</p>
+					{:else}
+						<p class="mt-1 text-xs text-gray-500">
+							API keys are system-managed and cannot be manually edited
+						</p>
+					{/if}
+				</div>
+			{/if}
 		</div>
 
 		<!-- Right Column: Permissions & Role -->

package/dist/user-management/adapters/UserManagement.remote.d.ts

@@ -1,68 +1,24 @@
-/**
- * User Management Remote Functions
- *
- * Complete implementation template for user management remote functions.
- * This follows the same pattern as users.remote.ts and is designed to be
- * used as-is in SvelteKit applications like sharkfin-frontend.
- *
- * Configuration:
- * - Set environment variables: CLERK_SECRET_KEY, ADMIN_API_KEY, PRIVATE_BASE_AUTH_URL, ALLOWED_ORG_ID
- * - Configure CLIENT_ID via ADMIN_CONFIG or env variable (CLIENT_ID)
- * - Adjust permission prefix filter via PERMISSION_PREFIX env variable
- *
- * @see https://svelte.dev/docs/kit/remote-functions
- *
- * Usage in your app:
- * ```svelte
- * <script>
- *   import { UserManagement } from '@makolabs/ripple';
- *   import * as adapter from '../UserManagement.remote';
- * </script>
- *
- * <UserManagement adapter={adapter} />
- * ```
- */
 import type { User } from '../user-management.js';
 import type { GetUsersOptions, GetUsersResult } from './types.js';
-/**
- * Get users with pagination and sorting
- *
- * Transforms adapter options to Clerk API format
- */
 export declare const getUsers: import("@sveltejs/kit").RemoteQueryFunction<GetUsersOptions, GetUsersResult>;
-/**
- * Create a new user
- *
- * Creates user in Clerk, optionally adds to organization, and creates admin key with permissions
- */
 export declare const createUser: import("@sveltejs/kit").RemoteCommand<Partial<User>, Promise<User>>;
-/**
- * Update an existing user
- */
 export declare const updateUser: import("@sveltejs/kit").RemoteCommand<{
     userId: string;
     userData: Partial<User>;
 }, Promise<User>>;
-/**
- * Delete a single user
- */
 export declare const deleteUser: import("@sveltejs/kit").RemoteCommand<string, Promise<void>>;
-/**
- * Delete multiple users
- */
 export declare const deleteUsers: import("@sveltejs/kit").RemoteCommand<string[], Promise<void>>;
-/**
- * Get permissions for a specific user
- *
- * Uses 'sub' (userId) parameter in admin API calls
- */
-export declare const getUserPermissions: import("@sveltejs/kit").RemoteQueryFunction<string, string[]>;
-/**
- * Update permissions for a specific user
- *
- * Uses 'sub' (userId) parameter in admin API calls
- */
+export declare const getUserPermissions: import("@sveltejs/kit").RemoteQueryFunction<string, Promise<string[]>>;
 export declare const updateUserPermissions: import("@sveltejs/kit").RemoteCommand<{
     userId: string;
     permissions: string[];
 }, Promise<void>>;
+export declare const generateApiKey: import("@sveltejs/kit").RemoteCommand<{
+    userId: string;
+    permissions: string[];
+    revokeOld?: boolean;
+}, Promise<{
+    success: boolean;
+    apiKey: string;
+    message: string;
+}>>;

package/dist/user-management/adapters/UserManagement.remote.js

@@ -1,46 +1,18 @@
-/**
- * User Management Remote Functions
- *
- * Complete implementation template for user management remote functions.
- * This follows the same pattern as users.remote.ts and is designed to be
- * used as-is in SvelteKit applications like sharkfin-frontend.
- *
- * Configuration:
- * - Set environment variables: CLERK_SECRET_KEY, ADMIN_API_KEY, PRIVATE_BASE_AUTH_URL, ALLOWED_ORG_ID
- * - Configure CLIENT_ID via ADMIN_CONFIG or env variable (CLIENT_ID)
- * - Adjust permission prefix filter via PERMISSION_PREFIX env variable
- *
- * @see https://svelte.dev/docs/kit/remote-functions
- *
- * Usage in your app:
- * ```svelte
- * <script>
- *   import { UserManagement } from '@makolabs/ripple';
- *   import * as adapter from '../UserManagement.remote';
- * </script>
- *
- * <UserManagement adapter={adapter} />
- * ```
- */
 import { query, command } from '$app/server';
 import { env } from '$env/dynamic/private';
-/**
- * Configuration
- * Override these values or import from your config file
- */
-// Option 1: Import from your config (recommended)
-// import { ADMIN_CONFIG } from '../../constants/permissions';
-// const CLIENT_ID = ADMIN_CONFIG.CLIENT_ID;
-// Option 2: Use environment variable
-const CLIENT_ID = env.CLIENT_ID || 'sharkfin'; // Default fallback
-// Permission prefix filter - adjust based on your permission structure
-// Example: 'sharkfin:' filters to only sharkfin permissions
+const CLIENT_ID = env.CLIENT_ID || 'sharkfin';
 const PERMISSION_PREFIX = env.PERMISSION_PREFIX || 'sharkfin:';
-// Organization ID for adding users to organizations
 const ORGANIZATION_ID = env.ALLOWED_ORG_ID;
-/**
- * Helper: Make authenticated request to Clerk API
- */
+function handleClerkError(error, defaultMessage) {
+    if (error && typeof error === 'object' && 'status' in error && 'details' in error) {
+        const enrichedError = new Error('message' in error && typeof error.message === 'string' ? error.message : 'Unknown error');
+        enrichedError.status = error.status;
+        enrichedError.details = error.details;
+        enrichedError.clerkError = true;
+        throw enrichedError;
+    }
+    throw new Error(`${defaultMessage}: ${error instanceof Error ? error.message : 'Unknown error'}`);
+}
 async function makeClerkRequest(endpoint, options = {}) {
     const CLERK_SECRET_KEY = env.CLERK_SECRET_KEY;
     if (!CLERK_SECRET_KEY) {
@@ -56,8 +28,7 @@ async function makeClerkRequest(endpoint, options = {}) {
     });
     if (!response.ok) {
         const errorText = await response.text();
-        console.error(`❌ [Clerk API] ${response.status} ${response.statusText} - ${errorText}`);
-        // Try to parse error details
+        console.error(`[Clerk API] ${response.status} ${response.statusText} - ${errorText}`);
         let errorDetails;
         try {
             errorDetails = JSON.parse(errorText);
@@ -65,7 +36,6 @@ async function makeClerkRequest(endpoint, options = {}) {
         catch {
             errorDetails = { message: errorText || `${response.status} ${response.statusText}` };
         }
-        // Throw error with status and details for better frontend handling
         const error = new Error(errorDetails.message || `Clerk API request failed: ${response.status} ${response.statusText}`);
         error.status = response.status;
         error.details = errorDetails;
@@ -73,9 +43,6 @@ async function makeClerkRequest(endpoint, options = {}) {
     }
     return response.json();
 }
-/**
- * Helper: Make authenticated request to Admin API
- */
 async function makeAdminRequest(endpoint, options = {}) {
     const ADMIN_API_KEY = env.ADMIN_API_KEY;
     const PRIVATE_BASE_AUTH_URL = env.PRIVATE_BASE_AUTH_URL;
@@ -98,60 +65,39 @@ async function makeAdminRequest(endpoint, options = {}) {
     });
     if (!response.ok) {
         const errorText = await response.text();
-        console.error(`❌ [Admin API] ${response.status} ${response.statusText} - ${errorText}`);
+        console.error(`[Admin API] ${response.status} ${response.statusText} - ${errorText}`);
         throw new Error(`Admin API request failed: ${response.status} ${response.statusText} - ${errorText}`);
     }
     return response.json();
 }
-/**
- * Helper: Create admin key with permissions for a user
- *
- * @param userId - The user ID (used as 'sub' in admin API)
- * @param permissions - Array of permission strings
- * @param clientId - Client ID (defaults to CLIENT_ID config)
- */
 async function createUserPermissions(userId, permissions, clientId = CLIENT_ID) {
-    console.log(`🔑 [createUserPermissions] Creating admin key for user ${userId}`);
-    // Filter permissions by prefix if configured
     const filteredPermissions = PERMISSION_PREFIX
         ? permissions.filter((scope) => scope.startsWith(PERMISSION_PREFIX))
         : permissions;
     if (filteredPermissions.length === 0) {
-        console.log(`⚠️ [createUserPermissions] No ${PERMISSION_PREFIX || ''} permissions provided, skipping`);
         return null;
     }
-    const createData = await makeAdminRequest('/admin/keys', {
+    return await makeAdminRequest('/admin/keys', {
         method: 'POST',
         body: JSON.stringify({
             client_id: clientId,
-            sub: userId, // userId is used as 'sub' parameter
+            sub: userId,
             scopes: filteredPermissions
         })
     });
-    console.log(`✅ [createUserPermissions] Admin key created successfully for user ${userId}`);
-    return createData;
 }
-/**
- * Get users with pagination and sorting
- *
- * Transforms adapter options to Clerk API format
- */
 export const getUsers = query('unchecked', async (options) => {
-    console.log('🔍 [getUsers] Fetching users with options:', options);
     try {
-        // Transform adapter options to Clerk API format
         const limit = options.pageSize;
         const offset = (options.page - 1) * options.pageSize;
-        // Build orderBy string
         let orderBy = '';
         if (options.sortBy) {
             const prefix = options.sortOrder === 'desc' ? '-' : '';
             orderBy = `${prefix}${options.sortBy}`;
         }
         else {
-            orderBy = '-created_at'; // Default
+            orderBy = '-created_at';
         }
-        // Build Clerk API parameters
         const params = new URLSearchParams({
             limit: limit.toString(),
             offset: offset.toString(),
@@ -159,91 +105,66 @@ export const getUsers = query('unchecked', async (options) => {
         });
         if (options.query)
             params.append('query', options.query);
-        // Fetch users and count in parallel
         const [usersData, countData] = await Promise.all([
             makeClerkRequest(`/users?${params}`),
             makeClerkRequest(`/users/count?${params}`)
         ]);
-        console.log(`✅ [getUsers] Fetched ${usersData.length} users, total: ${countData.total_count}`);
         return {
             users: usersData,
             totalUsers: countData.total_count || 0
         };
     }
     catch (error) {
-        console.error('❌ [getUsers] Error:', error);
+        console.error('[getUsers] Error:', error);
         throw new Error(`Failed to fetch users: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
 });
-/**
- * Create a new user
- *
- * Creates user in Clerk, optionally adds to organization, and creates admin key with permissions
- */
 export const createUser = command('unchecked', async (userData) => {
-    // Transform User to Clerk API format
     const emailAddress = userData.email_addresses?.[0]?.email_address || '';
     if (!emailAddress) {
         throw new Error('Email address is required');
     }
-    console.log('📝 [createUser] Creating new user:', emailAddress);
     try {
-        // Extract permissions from userData
         const { permissions, ...userDataOnly } = userData;
-        // Transform userData to match Clerk Backend API format (snake_case)
         const clerkUserData = {
             first_name: userDataOnly.first_name || '',
             last_name: userDataOnly.last_name || '',
-            email_address: [emailAddress], // Clerk expects an array
+            email_address: [emailAddress],
             ...(userDataOnly.username && { username: userDataOnly.username }),
             ...(userDataOnly.private_metadata && { private_metadata: userDataOnly.private_metadata })
         };
-        // Step 1: Create user in Clerk
-        console.log('📝 [createUser] Creating user in Clerk...');
         let result = await makeClerkRequest('/users', {
             method: 'POST',
             body: JSON.stringify(clerkUserData)
         });
-        // Step 1.5: Add user to organization if configured
         if (ORGANIZATION_ID) {
             try {
-                console.log(`🏢 [createUser] Adding user ${result.id} to organization ${ORGANIZATION_ID}...`);
                 await makeClerkRequest(`/organizations/${ORGANIZATION_ID}/memberships`, {
                     method: 'POST',
                     body: JSON.stringify({
                         user_id: result.id,
-                        role: 'org:member' // Standard Clerk organization role
+                        role: 'org:member'
                     })
                 });
-                console.log(`✅ [createUser] User added to organization successfully`);
             }
             catch (orgError) {
-                console.error(`❌ [createUser] Failed to add user to organization:`, orgError);
-                // Clean up: delete the user since they can't be added to the org
+                console.error('[createUser] Failed to add user to organization:', orgError);
                 try {
                     await makeClerkRequest(`/users/${result.id}`, {
                         method: 'DELETE'
                     });
-                    console.log(`🗑️ [createUser] User ${result.id} deleted due to org membership failure`);
                 }
                 catch (deleteError) {
-                    console.error(`❌ [createUser] Failed to delete user after org membership failure:`, deleteError);
+                    console.error('[createUser] Failed to delete user after org membership failure:', deleteError);
                 }
                 throw new Error(`Failed to add user to organization. User creation rolled back. Error: ${orgError instanceof Error ? orgError.message : String(orgError)}`);
             }
         }
-        else {
-            console.warn('⚠️ [createUser] ALLOWED_ORG_ID not configured, skipping organization membership');
-        }
-        // Step 2: Create admin key with permissions if permissions are provided
         if (permissions && permissions.length > 0) {
             try {
-                console.log(`🔑 [createUser] Creating permissions for new user: ${result.id}`);
                 const adminKeyResult = await createUserPermissions(result.id, permissions);
-                // Extract the API key from the admin service response
                 const apiKey = adminKeyResult?.data?.key;
                 if (adminKeyResult && apiKey) {
-                    // Update user's private metadata with the API key
                     const updatedUser = await makeClerkRequest(`/users/${result.id}`, {
                         method: 'PATCH',
                         body: JSON.stringify({
@@ -253,60 +174,34 @@ export const createUser = command('unchecked', async (userData) => {
                             }
                         })
                     });
-                    // Update the result with the updated user data
                     result = updatedUser;
-                    console.log(`✅ [createUser] API key stored in user's private metadata`);
                 }
-                else {
-                    console.warn(`⚠️ [createUser] No API key found in admin key result`);
-                }
-                // Add permission info to result
                 result.adminKey = adminKeyResult;
                 result.permissionsAssigned = permissions;
-                console.log(`✅ [createUser] User ${result.id} created with permissions successfully`);
             }
             catch (permissionError) {
-                console.error(`❌ [createUser] Failed to assign permissions:`, permissionError);
-                // Don't fail the entire operation, but warn
+                console.error('[createUser] Failed to assign permissions:', permissionError);
                 result.warning = 'User created but permissions assignment failed';
                 result.permissionError =
                     permissionError instanceof Error ? permissionError.message : String(permissionError);
             }
         }
-        else {
-            console.log(`⚠️ [createUser] User ${result.id} created without permissions`);
-        }
         return result;
     }
     catch (error) {
-        console.error('❌ [createUser] Error:', error);
-        // Handle Clerk API errors with detailed information
-        if (error && typeof error === 'object' && 'status' in error && 'details' in error) {
-            const enrichedError = new Error('message' in error && typeof error.message === 'string' ? error.message : 'Unknown error');
-            enrichedError.status = error.status;
-            enrichedError.details = error.details;
-            enrichedError.clerkError = true;
-            throw enrichedError;
-        }
-        throw new Error(`Failed to create user: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        console.error('[createUser] Error:', error);
+        handleClerkError(error, 'Failed to create user');
     }
 });
-/**
- * Update an existing user
- */
 export const updateUser = command('unchecked', async (options) => {
     const { userId, userData } = options;
-    console.log(`📝 [updateUser] Updating user ${userId}`);
     try {
-        // Transform User to Clerk API format
-        // Only include fields that Clerk accepts
         const updateData = {};
         if (userData.first_name !== undefined)
             updateData.first_name = userData.first_name;
         if (userData.last_name !== undefined)
             updateData.last_name = userData.last_name;
         if (userData.username !== undefined && userData.username !== '') {
-            // Only include username if it's not empty (prevents "username already exists" error)
             updateData.username = userData.username;
         }
         if (userData.private_metadata !== undefined) {
@@ -316,172 +211,202 @@ export const updateUser = command('unchecked', async (options) => {
             method: 'PATCH',
             body: JSON.stringify(updateData)
         });
-        // If permissions changed, update them separately
         if (userData.permissions !== undefined) {
             try {
                 await updateUserPermissions({ userId, permissions: userData.permissions });
             }
             catch (permError) {
-                console.error(`❌ [updateUser] Failed to update permissions:`, permError);
-                // Don't fail the entire operation
+                console.error('[updateUser] Failed to update permissions:', permError);
             }
         }
-        console.log(`✅ [updateUser] User ${userId} updated successfully`);
         return result;
     }
     catch (error) {
-        console.error('❌ [updateUser] Error:', error);
-        // Handle Clerk API errors with detailed information
-        if (error && typeof error === 'object' && 'status' in error && 'details' in error) {
-            const enrichedError = new Error('message' in error && typeof error.message === 'string' ? error.message : 'Unknown error');
-            enrichedError.status = error.status;
-            enrichedError.details = error.details;
-            enrichedError.clerkError = true;
-            throw enrichedError;
-        }
-        throw new Error(`Failed to update user: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        console.error('[updateUser] Error:', error);
+        handleClerkError(error, 'Failed to update user');
     }
 });
-/**
- * Delete a single user
- */
 export const deleteUser = command('unchecked', async (userId) => {
-    console.log(`🗑️ [deleteUser] Deleting user ${userId}`);
     try {
         await makeClerkRequest(`/users/${userId}`, {
             method: 'DELETE'
         });
-        console.log(`✅ [deleteUser] User ${userId} deleted successfully`);
     }
     catch (error) {
-        console.error('❌ [deleteUser] Error:', error);
+        console.error('[deleteUser] Error:', error);
         throw new Error(`Failed to delete user: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
 });
-/**
- * Delete multiple users
- */
 export const deleteUsers = command('unchecked', async (userIds) => {
-    console.log(`🗑️ [deleteUsers] Deleting ${userIds.length} users`);
     try {
         await Promise.all(userIds.map((userId) => makeClerkRequest(`/users/${userId}`, {
             method: 'DELETE'
         })));
-        console.log(`✅ [deleteUsers] ${userIds.length} users deleted successfully`);
     }
     catch (error) {
-        console.error('❌ [deleteUsers] Error:', error);
+        console.error('[deleteUsers] Error:', error);
         throw new Error(`Failed to delete users: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
 });
-/**
- * Get permissions for a specific user
- *
- * Uses 'sub' (userId) parameter in admin API calls
- */
-export const getUserPermissions = query('unchecked', async (userId) => {
-    console.log(`🔍 [getUserPermissions] Fetching permissions for user: ${userId}`);
+async function fetchUserPermissions(userId) {
     try {
-        // Try direct lookup first using client_id and sub (userId)
+        const userData = await makeAdminRequest(`/admin/keys?client_id=${CLIENT_ID}&sub=${userId}`);
+        if (userData?.data?.data && Array.isArray(userData.data.data)) {
+            userData.data.data = userData.data.data.filter((key) => key.status === 'active');
+        }
+        if (userData?.data?.data && Array.isArray(userData.data.data)) {
+            return userData.data.data.flatMap((key) => key.scopes || []);
+        }
+        else if (userData?.scopes) {
+            return Array.isArray(userData.scopes) ? userData.scopes : [userData.scopes];
+        }
+        return [];
+    }
+    catch {
         try {
-            const userData = await makeAdminRequest(`/admin/keys?client_id=${CLIENT_ID}&sub=${userId}`);
-            console.log(`✅ [getUserPermissions] Direct lookup successful for user ${userId}`);
-            // Filter the response to only include active keys
-            if (userData?.data?.data && Array.isArray(userData.data.data)) {
-                userData.data.data = userData.data.data.filter((key) => key.status === 'active');
-                console.log(`🔍 [getUserPermissions] Filtered to ${userData.data.data.length} active key(s)`);
-            }
-            // Extract scopes from the response
-            if (userData?.data?.data && Array.isArray(userData.data.data)) {
-                return userData.data.data.flatMap((key) => key.scopes || []);
-            }
-            else if (userData?.scopes) {
-                return Array.isArray(userData.scopes) ? userData.scopes : [userData.scopes];
+            const allKeysData = await makeAdminRequest('/admin/keys');
+            const userKey = allKeysData.data.data.find((key) => key.sub === userId && key.client_id === CLIENT_ID && key.status === 'active');
+            if (userKey) {
+                return Array.isArray(userKey.scopes) ? userKey.scopes : [userKey.scopes];
             }
             return [];
         }
-        catch {
-            console.log(`❌ [getUserPermissions] Direct lookup failed, trying search by sub field`);
-            // If direct lookup fails with 404, search all keys by sub field
-            try {
-                const allKeysData = await makeAdminRequest('/admin/keys');
-                console.log(`🔍 [getUserPermissions] Searching through ${allKeysData.data?.data?.length || 0} keys`);
-                // Find the ACTIVE key for this user (ignore revoked keys)
-                // Match by sub (userId) and client_id
-                const userKey = allKeysData.data.data.find((key) => key.sub === userId && key.client_id === CLIENT_ID && key.status === 'active');
-                if (userKey) {
-                    console.log(`✅ [getUserPermissions] Found active user key by sub field`);
-                    return Array.isArray(userKey.scopes) ? userKey.scopes : [userKey.scopes];
-                }
-                else {
-                    console.log(`❌ [getUserPermissions] No user found, returning empty permissions`);
-                    return [];
-                }
-            }
-            catch (searchError) {
-                console.error('❌ [getUserPermissions] Error searching for user by sub:', searchError);
-                throw new Error('Failed to fetch user permissions');
-            }
+        catch (searchError) {
+            console.error('[fetchUserPermissions] Error searching for user by sub:', searchError);
+            throw new Error('Failed to fetch user permissions');
         }
     }
+}
+export const getUserPermissions = query.batch('unchecked', async (userIds) => {
+    try {
+        const permissionPromises = userIds.map((userId) => fetchUserPermissions(userId));
+        const permissionsResults = await Promise.all(permissionPromises);
+        const lookup = new Map();
+        userIds.forEach((userId, index) => {
+            lookup.set(userId, permissionsResults[index]);
+        });
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        return (userId, _index) => {
+            const permissions = lookup.get(userId) || [];
+            return Promise.resolve(permissions);
+        };
+    }
     catch (error) {
-        console.error('❌ [getUserPermissions] Error:', error);
-        throw new Error(`Failed to fetch user permissions: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        console.error('[getUserPermissions] Batch error:', error);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        return (_userId, _index) => {
+            throw new Error(`Failed to fetch user permissions: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        };
     }
 });
-/**
- * Update permissions for a specific user
- *
- * Uses 'sub' (userId) parameter in admin API calls
- */
 export const updateUserPermissions = command('unchecked', async (options) => {
     const { userId, permissions } = options;
-    console.log(`🔑 [updateUserPermissions] Updating permissions for user ${userId}`);
     try {
-        let adminKeyId = userId; // Use userId as default key ID
-        // Try direct update first
+        let adminKeyId = userId;
         try {
             await makeAdminRequest(`/admin/keys/${adminKeyId}`, {
                 method: 'PUT',
                 body: JSON.stringify({ scopes: permissions })
             });
-            console.log(`✅ [updateUserPermissions] Permissions updated successfully`);
             return;
         }
         catch {
-            // If direct update fails, try to find the correct adminKeyId
-            console.log(`⚠️ [updateUserPermissions] Direct update failed, searching for key ID...`);
             try {
                 const allKeysData = await makeAdminRequest('/admin/keys');
-                // Find the ACTIVE key for this user (ignore revoked keys)
-                // Match by sub (userId) and client_id
                 const userKey = allKeysData.data.data.find((key) => key.sub === userId && key.client_id === CLIENT_ID && key.status === 'active');
                 if (userKey) {
-                    // Use the found key ID for update
                     adminKeyId = userKey.id;
                     await makeAdminRequest(`/admin/keys/${adminKeyId}`, {
                         method: 'PUT',
                         body: JSON.stringify({ scopes: permissions })
                     });
-                    console.log(`✅ [updateUserPermissions] Permissions updated successfully (after search)`);
                     return;
                 }
                 else {
-                    // User doesn't exist, create new admin key
-                    console.log(`📝 [updateUserPermissions] Creating new admin key...`);
                     await createUserPermissions(userId, permissions);
-                    console.log(`✅ [updateUserPermissions] New admin key created successfully`);
                     return;
                 }
             }
             catch (searchError) {
-                console.error('❌ [updateUserPermissions] Error during permission update:', searchError);
+                console.error('[updateUserPermissions] Error during permission update:', searchError);
                 throw new Error('Failed to update permissions');
             }
         }
     }
     catch (error) {
-        console.error('❌ [updateUserPermissions] Error:', error);
+        console.error('[updateUserPermissions] Error:', error);
         throw new Error(`Failed to update user permissions: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
 });
+export const generateApiKey = command('unchecked', async (options) => {
+    try {
+        const filteredPermissions = PERMISSION_PREFIX
+            ? options.permissions.filter((scope) => scope.startsWith(PERMISSION_PREFIX))
+            : options.permissions;
+        if (filteredPermissions.length === 0) {
+            throw new Error(`At least one ${PERMISSION_PREFIX || ''} permission is required to generate an API key`);
+        }
+        let oldKeyId = null;
+        if (options.revokeOld) {
+            try {
+                const allKeysData = await makeAdminRequest('/admin/keys');
+                if (allKeysData?.data?.data && Array.isArray(allKeysData.data.data)) {
+                    const userKey = allKeysData.data.data.find((key) => key.sub === options.userId && key.client_id === CLIENT_ID && key.status === 'active');
+                    if (userKey) {
+                        oldKeyId = userKey.id;
+                    }
+                }
+            }
+            catch (e) {
+                console.warn('[generateApiKey] Could not fetch existing key for revocation:', e);
+            }
+        }
+        const createData = await createUserPermissions(options.userId, filteredPermissions);
+        if (!createData) {
+            throw new Error('Failed to create admin key');
+        }
+        const newApiKey = createData?.data?.key;
+        if (!newApiKey) {
+            console.error('[generateApiKey] No API key in response:', createData);
+            throw new Error('Failed to generate API key - no key in response');
+        }
+        try {
+            const currentUser = await makeClerkRequest(`/users/${options.userId}`);
+            await makeClerkRequest(`/users/${options.userId}`, {
+                method: 'PATCH',
+                body: JSON.stringify({
+                    private_metadata: {
+                        ...(currentUser.private_metadata || {}),
+                        mako_api_key: newApiKey
+                    }
+                })
+            });
+        }
+        catch (clerkError) {
+            console.error('[generateApiKey] Failed to update Clerk profile:', clerkError);
+            console.warn('[generateApiKey] Key generated but could not update Clerk profile');
+        }
+        if (oldKeyId) {
+            try {
+                await makeAdminRequest(`/admin/keys/${oldKeyId}`, {
+                    method: 'DELETE'
+                });
+            }
+            catch (revokeError) {
+                console.error('[generateApiKey] Failed to revoke old key:', revokeError);
+                console.warn('[generateApiKey] New key generated but could not revoke old key');
+            }
+        }
+        return {
+            success: true,
+            apiKey: newApiKey,
+            message: oldKeyId
+                ? 'New API key generated and old key revoked successfully'
+                : 'API key generated successfully'
+        };
+    }
+    catch (error) {
+        console.error('[generateApiKey] Error:', error);
+        throw new Error(`Failed to generate API key: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+});

package/dist/user-management/user-management.d.ts

@@ -56,11 +56,12 @@ export interface UserTableProps {
     class?: ClassValue;
 }
 export interface UserModalProps {
-    open: boolean;
-    user: User | null;
+    open?: boolean;
+    user?: User | null;
     roles?: Role[];
-    onSave: (user: User, mode: 'create' | 'edit') => Promise<void>;
-    onClose: () => void;
+    adapter?: UserManagementAdapter;
+    onSave: (user: User, mode: 'create' | 'edit') => void | Promise<void>;
+    onClose?: () => void;
     class?: ClassValue;
 }
 export interface UserViewModalProps {
@@ -95,6 +96,15 @@ export interface UserManagementAdapter {
         userId: string;
         permissions: string[];
     }) => PromiseLike<void>;
+    generateApiKey?: (options: {
+        userId: string;
+        permissions: string[];
+        revokeOld?: boolean;
+    }) => PromiseLike<{
+        success: boolean;
+        apiKey: string;
+        message: string;
+    }>;
 }
 export interface UserManagementProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "1.2.9",
+	"version": "1.2.11",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {
@@ -59,7 +59,6 @@
 		"@storybook/addon-docs": "^9.0.18",
 		"@storybook/addon-svelte-csf": "^5.0.7",
 		"@storybook/sveltekit": "^9.0.18",
-		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tailwindcss/vite": "^4.0.14",
@@ -117,8 +116,9 @@
 	"dependencies": {
 		"@friendofsvelte/mermaid": "^0.0.4",
 		"@friendofsvelte/state": "^0.0.6-ts",
-		"@makolabs/ripple": "^1.2.4",
+		"@makolabs/ripple": "^1.2.9",
 		"@sveltejs/adapter-static": "^3.0.9",
+		"@sveltejs/kit": "^2.48.4",
 		"compromise": "^14.14.4",
 		"dayjs": "^1.11.13",
 		"echarts": "^5.6.0",