@makolabs/ripple 1.2.9 → 1.2.10

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

@@ -52,11 +52,12 @@ export declare const deleteUser: import("@sveltejs/kit").RemoteCommand<string, P
  */
 export declare const deleteUsers: import("@sveltejs/kit").RemoteCommand<string[], Promise<void>>;
 /**
- * Get permissions for a specific user
+ * Get permissions for specific users (batched)
  *
- * Uses 'sub' (userId) parameter in admin API calls
+ * Uses 'sub' (userId) parameter in admin API calls.
+ * Batches multiple permission requests to avoid n+1 problem.
  */
-export declare const getUserPermissions: import("@sveltejs/kit").RemoteQueryFunction<string, string[]>;
+export declare const getUserPermissions: import("@sveltejs/kit").RemoteQueryFunction<string, Promise<string[]>>;
 /**
  * Update permissions for a specific user
  *
@@ -66,3 +67,15 @@ export declare const updateUserPermissions: import("@sveltejs/kit").RemoteComman
     userId: string;
     permissions: string[];
 }, Promise<void>>;
+/**
+ * Generate new API key for a user with optional old key revocation
+ */
+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

@@ -375,58 +375,84 @@ export const deleteUsers = command('unchecked', async (userIds) => {
     }
 });
 /**
- * Get permissions for a specific user
- *
- * Uses 'sub' (userId) parameter in admin API calls
+ * Helper: Fetch permissions for a single user
  */
-export const getUserPermissions = query('unchecked', async (userId) => {
-    console.log(`🔍 [getUserPermissions] Fetching permissions for user: ${userId}`);
+async function fetchUserPermissions(userId) {
+    console.log(`🔍 [fetchUserPermissions] Fetching permissions for user: ${userId}`);
+    // Try direct lookup first using client_id and sub (userId)
     try {
-        // Try direct lookup first using client_id and sub (userId)
+        const userData = await makeAdminRequest(`/admin/keys?client_id=${CLIENT_ID}&sub=${userId}`);
+        console.log(`✅ [fetchUserPermissions] 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(`🔍 [fetchUserPermissions] 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];
+        }
+        return [];
+    }
+    catch {
+        console.log(`❌ [fetchUserPermissions] Direct lookup failed, trying search by sub field`);
+        // If direct lookup fails with 404, search all keys by sub field
         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)`);
+            const allKeysData = await makeAdminRequest('/admin/keys');
+            console.log(`🔍 [fetchUserPermissions] 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(`✅ [fetchUserPermissions] Found active user key by sub field`);
+                return Array.isArray(userKey.scopes) ? userKey.scopes : [userKey.scopes];
             }
-            // Extract scopes from the response
-            if (userData?.data?.data && Array.isArray(userData.data.data)) {
-                return userData.data.data.flatMap((key) => key.scopes || []);
+            else {
+                console.log(`❌ [fetchUserPermissions] No user found, returning empty permissions`);
+                return [];
             }
-            else if (userData?.scopes) {
-                return Array.isArray(userData.scopes) ? userData.scopes : [userData.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');
         }
     }
+}
+/**
+ * Get permissions for specific users (batched)
+ *
+ * Uses 'sub' (userId) parameter in admin API calls.
+ * Batches multiple permission requests to avoid n+1 problem.
+ */
+export const getUserPermissions = query.batch('unchecked', async (userIds) => {
+    console.log(`🔍 [getUserPermissions] Batch fetching permissions for ${userIds.length} users`);
+    try {
+        // Fetch all permissions in parallel
+        const permissionPromises = userIds.map((userId) => fetchUserPermissions(userId));
+        const permissionsResults = await Promise.all(permissionPromises);
+        // Create a lookup map for O(1) access
+        const lookup = new Map();
+        userIds.forEach((userId, index) => {
+            lookup.set(userId, permissionsResults[index]);
+        });
+        console.log(`✅ [getUserPermissions] Batch fetch completed for ${userIds.length} users`);
+        // Return a function that SvelteKit will call for each individual request
+        // 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);
+        // Return a function that throws for all requests
+        // 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'}`);
+        };
     }
 });
 /**
@@ -485,3 +511,96 @@ export const updateUserPermissions = command('unchecked', async (options) => {
         throw new Error(`Failed to update user permissions: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
 });
+/**
+ * Generate new API key for a user with optional old key revocation
+ */
+export const generateApiKey = command('unchecked', async (options) => {
+    console.log(`🔑 [generateApiKey] Generating new API key for user ${options.userId}`);
+    try {
+        // Filter permissions by prefix if configured
+        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`);
+        }
+        // If revokeOld is true, find and revoke the old key first
+        let oldKeyId = null;
+        if (options.revokeOld) {
+            try {
+                console.log(`🔍 [generateApiKey] Looking for existing active key to revoke`);
+                const allKeysData = await makeAdminRequest('/admin/keys');
+                if (!allKeysData?.data?.data || !Array.isArray(allKeysData.data.data)) {
+                    console.warn('⚠️ [generateApiKey] Unexpected response structure from /admin/keys');
+                }
+                else {
+                    // Find the ACTIVE key for this user (ignore already revoked keys)
+                    const userKey = allKeysData.data.data.find((key) => key.sub === options.userId && key.client_id === CLIENT_ID && key.status === 'active');
+                    if (userKey) {
+                        oldKeyId = userKey.id;
+                        console.log(`📌 [generateApiKey] Found existing active key: ${oldKeyId}`);
+                    }
+                }
+            }
+            catch (e) {
+                console.warn('⚠️ [generateApiKey] Could not fetch existing key for revocation:', e);
+                // Continue anyway - not critical
+            }
+        }
+        // Create new admin key
+        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');
+        }
+        console.log(`✅ [generateApiKey] New API key generated successfully`);
+        // Update user's Clerk profile with the new API key
+        try {
+            // First, get the current user data to preserve existing private_metadata
+            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
+                    }
+                })
+            });
+            console.log(`✅ [generateApiKey] API key stored in user's Clerk profile`);
+        }
+        catch (clerkError) {
+            console.error('❌ [generateApiKey] Failed to update Clerk profile:', clerkError);
+            console.warn('⚠️ [generateApiKey] Key generated but could not update Clerk profile');
+        }
+        // Revoke old key if it exists
+        if (oldKeyId) {
+            try {
+                console.log(`🗑️ [generateApiKey] Revoking old key: ${oldKeyId}`);
+                await makeAdminRequest(`/admin/keys/${oldKeyId}`, {
+                    method: 'DELETE'
+                });
+                console.log(`✅ [generateApiKey] Old key revoked successfully`);
+            }
+            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.10",
 	"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",