@makolabs/ripple 1.6.9 → 1.7.2

package/dist/funcs/mock-user-management.js

@@ -176,6 +176,10 @@ export async function getUserPermissions(userId) {
 export async function updateUserPermissions(options) {
     await delay();
     const { userId, permissions } = options;
+    // Validate permissions - require at least one permission scope
+    if (permissions.length === 0) {
+        throw new Error('At least one permission scope is required');
+    }
     const user = mockUsers.find((u) => u.id === userId);
     if (!user) {
         throw new Error(`User with ID ${userId} not found`);
@@ -188,6 +192,10 @@ export async function updateUserPermissions(options) {
  */
 export async function generateApiKey(options) {
     await delay();
+    // Validate permissions - require at least one permission scope
+    if (options.permissions.length === 0) {
+        throw new Error('At least one permission scope is required');
+    }
     const { userId } = options;
     const user = mockUsers.find((u) => u.id === userId);
     if (!user) {

package/dist/funcs/user-management.remote.js

@@ -2,7 +2,6 @@ import { query, command } from '$app/server';
 import { getRequestEvent } from '$app/server';
 import { env } from '$env/dynamic/private';
 const CLIENT_ID = env.CLIENT_ID || 'sharkfin';
-const PERMISSION_PREFIX = env.PERMISSION_PREFIX || 'sharkfin:';
 const ORGANIZATION_ID = env.ALLOWED_ORG_ID;
 function handleClerkError(error, defaultMessage) {
     if (error && typeof error === 'object' && 'status' in error && 'details' in error) {
@@ -147,10 +146,7 @@ async function verifyApiKeyToken(apiKey) {
     }
 }
 async function createUserPermissions(userId, permissions, clientId = CLIENT_ID) {
-    const filteredPermissions = PERMISSION_PREFIX
-        ? permissions.filter((scope) => scope.startsWith(PERMISSION_PREFIX))
-        : permissions;
-    if (filteredPermissions.length === 0) {
+    if (permissions.length === 0) {
         return null;
     }
     return await makeAdminRequest('/admin/keys', {
@@ -158,7 +154,7 @@ async function createUserPermissions(userId, permissions, clientId = CLIENT_ID)
         body: JSON.stringify({
             client_id: clientId,
             sub: userId,
-            scopes: filteredPermissions
+            scopes: permissions
         })
     });
 }
@@ -420,12 +416,13 @@ async function refreshTokenIfSelfUpdate(userId) {
 export const updateUserPermissions = command('unchecked', async (options) => {
     const { userId, permissions } = options;
     try {
+        // Validate permissions - require at least one permission scope
+        if (permissions.length === 0) {
+            throw new Error('At least one permission scope is required');
+        }
         // Fetch user's active keys
         const allKeysData = await makeAdminRequest(`/admin/keys?client_id=${CLIENT_ID}&sub=${userId}`);
         const userKeys = (allKeysData?.data?.data || []).filter((key) => key.status === 'active');
-        const filteredPermissions = PERMISSION_PREFIX
-            ? permissions.filter((scope) => scope.startsWith(PERMISSION_PREFIX))
-            : permissions;
         if (userKeys.length === 0) {
             // No active key exists, create new one
             const newKeyResult = await createUserPermissions(userId, permissions);
@@ -452,7 +449,7 @@ export const updateUserPermissions = command('unchecked', async (options) => {
             await makeAdminRequest(`/admin/keys/${keyId}`, {
                 method: 'PUT',
                 body: JSON.stringify({
-                    scopes: filteredPermissions
+                    scopes: permissions
                 })
             });
             // Verify the token has updated scopes
@@ -462,9 +459,11 @@ export const updateUserPermissions = command('unchecked', async (options) => {
                     console.log('[updateUserPermissions] Key verification:', verification);
                     if (verification.valid) {
                         // Check if the scopes match what we expect
-                        const scopesMatch = filteredPermissions.every((perm) => verification.scopes?.includes(perm));
+                        // Note: permissions.length > 0 is guaranteed by validation above
+                        const scopesMatch = permissions.length > 0 &&
+                            permissions.every((perm) => verification.scopes?.includes(perm));
                         if (!scopesMatch) {
-                            console.warn('[updateUserPermissions] Scopes mismatch. Expected:', filteredPermissions, 'Got:', verification.scopes);
+                            console.warn('[updateUserPermissions] Scopes mismatch. Expected:', permissions, 'Got:', verification.scopes);
                         }
                     }
                     else {
@@ -493,12 +492,9 @@ export const updateUserPermissions = command('unchecked', async (options) => {
 });
 export const generateApiKey = command('unchecked', async (options) => {
     try {
-        let filteredPermissions = PERMISSION_PREFIX
-            ? options.permissions.filter((scope) => scope.startsWith(PERMISSION_PREFIX))
-            : options.permissions;
-        // Default to readonly permission if none provided (first-time key generation)
-        if (filteredPermissions.length === 0 && PERMISSION_PREFIX) {
-            filteredPermissions = [`${PERMISSION_PREFIX}readonly`];
+        // No default permissions - require explicit permissions to be passed
+        if (options.permissions.length === 0) {
+            throw new Error('At least one permission scope is required');
         }
         // Check if user has existing active key
         const allKeysData = await makeAdminRequest(`/admin/keys?client_id=${CLIENT_ID}&sub=${options.userId}`);
@@ -507,6 +503,7 @@ export const generateApiKey = command('unchecked', async (options) => {
         let wasRotated = false;
         let oldApiKey;
         let currentUser = null;
+        let verificationWarning;
         if (userKeys.length > 0 && options.revokeOld) {
             // Use rotate endpoint (per Mako Auth API spec)
             const keyId = userKeys[0].id;
@@ -516,7 +513,7 @@ export const generateApiKey = command('unchecked', async (options) => {
             const rotateResult = await makeAdminRequest(`/admin/keys/${keyId}/rotate`, {
                 method: 'POST',
                 body: JSON.stringify({
-                    scopes: filteredPermissions
+                    scopes: options.permissions
                 })
             });
             // Rotate endpoint returns key in data.key field
@@ -544,22 +541,25 @@ export const generateApiKey = command('unchecked', async (options) => {
                 console.log('[generateApiKey] New key verification:', newKeyVerification);
                 if (newKeyVerification.valid) {
                     // Check if the scopes match what we expect
-                    const scopesMatch = filteredPermissions.every((perm) => newKeyVerification.scopes?.includes(perm));
+                    const scopesMatch = options.permissions.every((perm) => newKeyVerification.scopes?.includes(perm));
                     if (!scopesMatch) {
-                        console.warn('[generateApiKey] Scopes mismatch. Expected:', filteredPermissions, 'Got:', newKeyVerification.scopes);
+                        console.warn('[generateApiKey] Scopes mismatch. Expected:', options.permissions, 'Got:', newKeyVerification.scopes);
+                        verificationWarning = `New API key scopes do not match expected permissions. Expected: ${options.permissions.join(', ')}, Got: ${newKeyVerification.scopes?.join(', ') || 'none'}`;
                     }
                 }
                 else {
                     console.warn('[generateApiKey] New key verification failed:', newKeyVerification.error);
+                    verificationWarning = `New API key failed verification - ${newKeyVerification.error || 'Unknown error'}`;
                 }
             }
             catch (verifyError) {
                 console.warn('[generateApiKey] Could not verify new key:', verifyError);
+                verificationWarning = `Could not verify new API key - ${verifyError instanceof Error ? verifyError.message : 'Unknown error'}`;
             }
         }
         else {
             // Create new key if none exists or revokeOld is false
-            const createData = await createUserPermissions(options.userId, filteredPermissions);
+            const createData = await createUserPermissions(options.userId, options.permissions);
             if (!createData) {
                 throw new Error('Failed to create admin key');
             }
@@ -593,7 +593,8 @@ export const generateApiKey = command('unchecked', async (options) => {
         const result = {
             success: true,
             apiKey: newApiKey,
-            message: wasRotated ? 'API key rotated successfully' : 'API key generated successfully'
+            message: wasRotated ? 'API key rotated successfully' : 'API key generated successfully',
+            verificationWarning
         };
         return JSON.parse(JSON.stringify(result));
     }

package/dist/index.d.ts

@@ -339,6 +339,10 @@ export interface NavItemProps {
 export interface SidebarProps {
     items?: NavigationItem[];
     logo: LogoType;
+    /** Optional footer snippet rendered at the bottom of the sidebar */
+    footer?: Snippet<[{
+        collapsed: boolean;
+    }]>;
 }
 export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
@@ -1030,6 +1034,7 @@ export interface UserManagementAdapter {
         success: boolean;
         apiKey: string;
         message: string;
+        verificationWarning?: string;
     }>;
     verifyToken?: (options: {
         apiKey: string;

package/dist/layout/sidebar/Sidebar.svelte

@@ -5,7 +5,7 @@
 	import { isRouteActive } from '../../helper/nav.svelte.js';
 	import { resolve } from '$app/paths';
 
-	let { items = [], logo }: SidebarProps = $props();
+	let { items = [], logo, footer }: SidebarProps = $props();
 	let menubar: MenuBar = $state({
 		collapsed: false
 	});
@@ -178,6 +178,13 @@
 			{/each}
 		</nav>
 	</div>
+
+	<!-- Footer slot for custom content -->
+	{#if footer}
+		<div class="shrink-0 border-t border-white/10 px-3 py-3">
+			{@render footer({ collapsed: menubar.collapsed })}
+		</div>
+	{/if}
 </div>
 
 {#snippet ToggleIcon(classes = 'size-6 shrink-0 text-default-200')}

package/dist/user-management/UserManagement.svelte

@@ -4,9 +4,8 @@
 	import UserTable from './UserTable.svelte';
 	import UserModal from './UserModal.svelte';
 	import UserViewModal from './UserViewModal.svelte';
-	import type { User, UserManagementProps, Role, Permission, GetUsersResult } from '../index.js';
+	import type { User, UserManagementProps, Role, Permission } from '../index.js';
 	import { SvelteSet } from 'svelte/reactivity';
-	import type { RemoteQuery } from '@sveltejs/kit';
 
 	let {
 		adapter,
@@ -60,13 +59,7 @@
 
 	// Refresh the query cache to get fresh data
 	async function refreshUsersQuery() {
-		const query = adapter.getUsers({
-			page: currentPage,
-			pageSize,
-			sortBy: sortBy || undefined,
-			sortOrder: sortOrder || 'desc'
-		}) as RemoteQuery<GetUsersResult>;
-		await query.refresh();
+		await loadUsers();
 	}
 
 	// Handlers
@@ -146,10 +139,8 @@
 			} else {
 				await adapter.updateUser({ userId: user.id, userData: user });
 			}
-			// Invalidate the query cache by calling refresh() before loading
+			// Refresh the users list
 			await refreshUsersQuery();
-			// Force refresh by reassigning state to trigger reactivity
-			await loadUsers();
 		} catch (error) {
 			console.error('Error saving user:', error);
 			// Reload on error to restore correct state
@@ -180,11 +171,8 @@
 			// Perform the actual delete operation
 			await adapter.deleteUser(userId);
 
-			// Invalidate the query cache by calling refresh() before loading
-			await refreshUsersQuery();
-
 			// Refresh to ensure we have the latest data
-			await loadUsers();
+			await refreshUsersQuery();
 		} catch (error) {
 			console.error('Error deleting user:', error);
 			// Reload on error to restore correct state
@@ -225,11 +213,8 @@
 				// Perform the actual delete operation
 				await adapter.deleteUsers(userIds);
 
-				// Invalidate the query cache by calling refresh() before loading
-				await refreshUsersQuery();
-
 				// Refresh to ensure we have the latest data
-				await loadUsers();
+				await refreshUsersQuery();
 			} catch (error) {
 				console.error('Error deleting users:', error);
 				// Reload on error to restore correct state

package/dist/user-management/UserModal.svelte

@@ -9,6 +9,7 @@
 		type Role,
 		getUserDisplayName
 	} from '../index.js';
+	import { toast } from 'svelte-sonner';
 
 	// Icons as simple SVGs
 	let {
@@ -222,6 +223,14 @@
 					}
 				};
 			}
+
+			// Show warning toast if new key verification failed
+			if (result.verificationWarning) {
+				toast.warning('API Key Verification Warning', {
+					description: result.verificationWarning,
+					duration: 8000 // 8 seconds for important warnings
+				});
+			}
 		} catch (error) {
 			console.error('Error regenerating API key:', error);
 			formErrors.apiKey = error instanceof Error ? error.message : 'Failed to regenerate API key';
@@ -276,7 +285,7 @@
 	contentclass="max-w-4xl"
 	class={cn(className)}
 >
-	<form bind:this={formElement} onsubmit={handleSubmit} class="flex gap-6">
+	<form bind:this={formElement} onsubmit={handleSubmit} class="flex gap-6" data-testid="user-form">
 		<!-- Left Column: Profile Information -->
 		<div class="min-w-0 flex-1 space-y-4">
 			<div class="border-default-200 border-b pb-3">
@@ -296,6 +305,7 @@
 						? 'border-danger-300'
 						: 'border-default-300'}"
 					placeholder="First name"
+					data-testid="first-name-input"
 					required
 				/>
 				{#if formErrors.first_name}
@@ -316,6 +326,7 @@
 						? 'border-danger-300'
 						: 'border-default-300'}"
 					placeholder="Last name"
+					data-testid="last-name-input"
 					required
 				/>
 				{#if formErrors.last_name}
@@ -336,6 +347,7 @@
 						? 'border-danger-300'
 						: 'border-default-300'}"
 					placeholder="user@example.com"
+					data-testid="email-input"
 					required
 				/>
 				{#if formErrors.email}
@@ -358,6 +370,7 @@
 									disabled={verifyingToken}
 									class="disabled:text-default-400 inline-flex items-center gap-1 text-sm text-green-600 transition-colors hover:text-green-700 hover:underline disabled:cursor-not-allowed"
 									aria-label="Verify token"
+									data-testid="verify-token-button"
 								>
 									<svg
 										class="h-4 w-4 {verifyingToken ? 'animate-spin' : ''}"
@@ -384,6 +397,7 @@
 										formData.permissions.length === 0}
 									class="disabled:text-default-400 inline-flex items-center gap-1 text-sm text-blue-600 transition-colors hover:text-blue-700 hover:underline disabled:cursor-not-allowed"
 									aria-label="Regenerate API key"
+									data-testid="regenerate-api-key-button"
 								>
 									<svg
 										class="h-4 w-4 {regeneratingApiKey ? 'animate-spin' : ''}"
@@ -411,12 +425,14 @@
 							readonly
 							class="border-default-300 bg-default-50 w-full rounded-lg border px-3 py-2 pr-10 font-mono text-sm"
 							placeholder="No API key generated"
+							data-testid="api-key-input"
 						/>
 						<button
 							type="button"
 							onclick={() => (showApiKey = !showApiKey)}
 							class="text-default-500 hover:text-default-700 absolute top-1/2 right-2 -translate-y-1/2"
 							aria-label={showApiKey ? 'Hide API key' : 'Show API key'}
+							data-testid="toggle-api-key-visibility"
 						>
 							{#if showApiKey}
 								<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -533,6 +549,7 @@
 										? 'border-blue-500 bg-blue-50 opacity-75'
 										: 'border-blue-500 bg-blue-50'
 									: 'border-default-200 hover:border-default-300 bg-white'}"
+								data-testid="role-{role.value}"
 							>
 								<div class="flex items-center justify-between gap-2">
 									<div class="min-w-0 flex-1">
@@ -587,7 +604,13 @@
 				<div></div>
 			{/if}
 			<div class="flex gap-3">
-				<Button variant="outline" onclick={handleClose} disabled={saving} type="button">
+				<Button
+					variant="outline"
+					onclick={handleClose}
+					disabled={saving}
+					type="button"
+					data-testid="cancel-button"
+				>
 					Cancel
 				</Button>
 				<Button
@@ -596,6 +619,7 @@
 					onclick={() => formElement?.requestSubmit()}
 					disabled={saving}
 					isLoading={saving}
+					data-testid="save-user-button"
 				>
 					{mode === 'create' ? 'Create User' : 'Save Changes'}
 				</Button>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "1.6.9",
+	"version": "1.7.2",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {
@@ -18,6 +18,10 @@
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
 		"test:unit": "vitest",
+		"test:e2e": "playwright test",
+		"test:e2e:ui": "playwright test --ui",
+		"test:e2e:debug": "playwright test --debug",
+		"test:e2e:report": "playwright show-report",
 		"test": "npm run test:unit -- --run",
 		"pub:minor": "git add . && git commit -m \"chore: prepare for publish minor\" && npm version minor && git push --follow-tags && npm publish",
 		"pub:patch": "git add . && git commit -m \"chore: prepare for publish patch\" && npm version patch && git push --follow-tags && npm publish",