@makolabs/ripple 3.0.10 → 3.0.11

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

@@ -20,6 +20,7 @@ import type { User, GetUsersOptions, GetUsersResult } from '../index.js';
  */
 export declare function resetState(options?: {
     initialUsers?: User[];
+    initialPendingUsers?: User[];
     simulateDelay?: boolean;
     delayMs?: number;
 }): Promise<void>;
@@ -77,3 +78,42 @@ export declare function generateApiKey(options: {
     apiKey: string;
     message: string;
 }>;
+/**
+ * Verify an API key (mock implementation).
+ * Matches UserManagementAdapter.verifyToken signature.
+ *
+ * The mock only accepts keys that exactly match an existing active user's
+ * `private_metadata.mako_api_key`; unknown/revoked keys are rejected so the
+ * failure UI is reachable.
+ */
+export declare function verifyToken(options: {
+    apiKey: string;
+}): Promise<{
+    valid: boolean;
+    scopes?: string[];
+    error?: string;
+    sub?: string;
+    client_id?: string;
+}>;
+/**
+ * List users awaiting approval (registered in identity provider but not
+ * yet onboarded — no org / no API key).
+ * Matches UserManagementAdapter.getPendingUsers signature.
+ */
+export declare function getPendingUsers(options: GetUsersOptions): Promise<GetUsersResult>;
+/**
+ * Approve a pending user — assigns the chosen role and generates an API key.
+ * Moves the user from the pending list to the active list.
+ * Matches UserManagementAdapter.approveUser signature.
+ */
+export declare function approveUser(input: {
+    userId: string;
+    role: string;
+}): Promise<{
+    apiKey: string;
+}>;
+/**
+ * Reject a pending user — permanently removes them from the identity provider.
+ * Matches UserManagementAdapter.rejectUser signature.
+ */
+export declare function rejectUser(userId: string): Promise<void>;

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

@@ -16,13 +16,17 @@
  */
 // Internal module-level state
 let mockUsers = [];
+let mockPendingUsers = [];
 let simulateDelay = false;
 let delayMs = 300;
 /**
  * Reset mock adapter state
  */
 export async function resetState(options = {}) {
-    mockUsers = options.initialUsers || [];
+    // Deep-clone fixtures so internal mutations (splice in approveUser/rejectUser)
+    // don't poison caller-owned arrays — keeps tests order-independent.
+    mockUsers = structuredClone(options.initialUsers ?? []);
+    mockPendingUsers = structuredClone(options.initialPendingUsers ?? []);
     simulateDelay = options.simulateDelay ?? false;
     delayMs = options.delayMs ?? 300;
 }
@@ -214,3 +218,83 @@ export async function generateApiKey(options) {
             : 'API key generated successfully'
     };
 }
+/**
+ * Verify an API key (mock implementation).
+ * Matches UserManagementAdapter.verifyToken signature.
+ *
+ * The mock only accepts keys that exactly match an existing active user's
+ * `private_metadata.mako_api_key`; unknown/revoked keys are rejected so the
+ * failure UI is reachable.
+ */
+export async function verifyToken(options) {
+    await delay();
+    const owner = mockUsers.find((u) => u.private_metadata &&
+        typeof u.private_metadata === 'object' &&
+        'mako_api_key' in u.private_metadata &&
+        u.private_metadata.mako_api_key === options.apiKey);
+    if (!owner) {
+        return {
+            valid: false,
+            error: 'API key has been revoked or is malformed'
+        };
+    }
+    // Real Mako Auth returns `sub` as the user's email — mirror that here so
+    // downstream code that key-lookups by email behaves identically.
+    return {
+        valid: true,
+        sub: owner.email_addresses?.[0]?.email_address ?? owner.id,
+        client_id: 'mock-client',
+        scopes: owner.permissions ?? []
+    };
+}
+/**
+ * List users awaiting approval (registered in identity provider but not
+ * yet onboarded — no org / no API key).
+ * Matches UserManagementAdapter.getPendingUsers signature.
+ */
+export async function getPendingUsers(options) {
+    await delay();
+    const start = (options.page - 1) * options.pageSize;
+    const end = start + options.pageSize;
+    return {
+        users: mockPendingUsers.slice(start, end),
+        totalUsers: mockPendingUsers.length
+    };
+}
+/**
+ * Approve a pending user — assigns the chosen role and generates an API key.
+ * Moves the user from the pending list to the active list.
+ * Matches UserManagementAdapter.approveUser signature.
+ */
+export async function approveUser(input) {
+    await delay();
+    // Fail fast on empty role — no key minted, no state mutation.
+    if (!input.role?.trim()) {
+        throw new Error('Role is required to approve a user');
+    }
+    const idx = mockPendingUsers.findIndex((u) => u.id === input.userId);
+    if (idx === -1) {
+        throw new Error(`Pending user ${input.userId} not found`);
+    }
+    const user = mockPendingUsers[idx];
+    const apiKey = `mock_api_key_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    mockPendingUsers.splice(idx, 1);
+    mockUsers.push({
+        ...user,
+        role: input.role,
+        private_metadata: { ...(user.private_metadata || {}), mako_api_key: apiKey }
+    });
+    return { apiKey };
+}
+/**
+ * Reject a pending user — permanently removes them from the identity provider.
+ * Matches UserManagementAdapter.rejectUser signature.
+ */
+export async function rejectUser(userId) {
+    await delay();
+    const idx = mockPendingUsers.findIndex((u) => u.id === userId);
+    if (idx === -1) {
+        throw new Error(`Pending user ${userId} not found`);
+    }
+    mockPendingUsers.splice(idx, 1);
+}

package/dist/index.d.ts

@@ -60,7 +60,7 @@ export type { StepperProps, StepperStep, StepState, StepperOrientation } from '.
 export type { ActivityItemBadge, ActivityItemAction, ActivityItem, ActivityListProps, ActivityListSize } from './layout/activity-list/activity-list-types.js';
 export type { FileUploadProps, FileUploadSize, FilePreviewProps, UploadedFile, StagedFile } from './elements/file-upload/file-upload-types.js';
 export type { ChatMessageType, StreamingCallback, ChatAction, ChatMessage, ChatResponse, QuickAction, FileBrowserProps } from './ai/ai-types.js';
-export type { GetUsersOptions, GetUsersResult, UserEmail, UserPhone, User, Permission, Role, UserTableProps, UserModalProps, UserModalSavePayload, UserViewModalProps, UserManagementAdapter, UserManagementProps, FormErrors } from './user-management/user-management-types.js';
+export type { GetUsersOptions, GetUsersResult, UserEmail, UserPhone, User, Permission, Role, UserTableProps, UserModalProps, UserModalSavePayload, UserViewModalProps, UserApproveModalProps, UserManagementAdapter, UserManagementProps, FormErrors } from './user-management/user-management-types.js';
 export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
 export { default as Button } from './button/Button.svelte';
@@ -148,3 +148,7 @@ export { default as UserManagement } from './user-management/UserManagement.svel
 export { default as UserTable } from './user-management/UserTable.svelte';
 export { default as UserModal } from './user-management/UserModal.svelte';
 export { default as UserViewModal } from './user-management/UserViewModal.svelte';
+export { default as UserApproveModal } from './user-management/UserApproveModal.svelte';
+export { default as RoleCard } from './user-management/RoleCard.svelte';
+export { default as ApiKeyField } from './user-management/ApiKeyField.svelte';
+export { default as UserIdentityCard } from './user-management/UserIdentityCard.svelte';

package/dist/index.js

@@ -153,3 +153,7 @@ export { default as UserManagement } from './user-management/UserManagement.svel
 export { default as UserTable } from './user-management/UserTable.svelte';
 export { default as UserModal } from './user-management/UserModal.svelte';
 export { default as UserViewModal } from './user-management/UserViewModal.svelte';
+export { default as UserApproveModal } from './user-management/UserApproveModal.svelte';
+export { default as RoleCard } from './user-management/RoleCard.svelte';
+export { default as ApiKeyField } from './user-management/ApiKeyField.svelte';
+export { default as UserIdentityCard } from './user-management/UserIdentityCard.svelte';

package/dist/user-management/ApiKeyField.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	import { Button, Color } from '../index.js';
+	import { cn } from '../helper/cls.js';
+	import type { ClassValue } from 'tailwind-variants';
+	import { toast } from 'svelte-sonner';
+
+	type ActionButton = {
+		label: string;
+		loading?: boolean;
+		disabled?: boolean;
+		onclick: () => void;
+		testId?: string;
+	};
+
+	interface Props {
+		/** The API key value. Empty string = no key issued yet. */
+		value: string;
+		label?: string;
+		/** Inline error message (e.g. regenerate failure). Suppresses helperText when set. */
+		error?: string | null;
+		/** Subtle hint shown below the field when no error. */
+		helperText?: string;
+		/** Action button rendered to the right of the label (e.g. Regenerate). */
+		regenerate?: ActionButton;
+		/** Optional second action (e.g. Verify). Rendered before regenerate. */
+		verify?: ActionButton;
+		/** Show the masked → revealed eye toggle. @default true */
+		toggleable?: boolean;
+		/** Show a Copy button next to the value. @default false */
+		copyable?: boolean;
+		/** When the key is missing, what to display. @default 'No API key' */
+		emptyLabel?: string;
+		testId?: string;
+		class?: ClassValue;
+	}
+
+	let {
+		value,
+		label = 'API Key',
+		error = null,
+		helperText,
+		regenerate,
+		verify,
+		toggleable = true,
+		copyable = false,
+		emptyLabel = 'No API key',
+		testId,
+		class: className
+	}: Props = $props();
+
+	let revealed = $state(false);
+	let copied = $state(false);
+
+	const masked = $derived(value ? '•'.repeat(Math.min(value.length, 40)) : '');
+	// If the field isn't toggleable, there's no way for the user to reveal it —
+	// so always show the raw value (used in one-time-reveal flows like approval).
+	const display = $derived(value ? (!toggleable || revealed ? value : masked) : emptyLabel);
+
+	async function handleCopy() {
+		if (!value) return;
+		try {
+			await navigator.clipboard.writeText(value);
+			copied = true;
+			setTimeout(() => (copied = false), 2000);
+		} catch {
+			toast.error('Failed to copy API key');
+		}
+	}
+</script>
+
+<div class={cn('w-full', className)}>
+	{#if label || regenerate || verify}
+		<div class="mb-2 flex items-center justify-between gap-3">
+			{#if label}
+				<span class="text-default-700 text-sm font-medium">{label}</span>
+			{/if}
+			{#if verify || regenerate}
+				<div class="flex items-center gap-2">
+					{#if verify}
+						<Button
+							type="button"
+							size="sm"
+							variant="link"
+							color={Color.SUCCESS}
+							onclick={verify.onclick}
+							disabled={verify.disabled || verify.loading}
+							loading={verify.loading}
+							testId={verify.testId}
+						>
+							{verify.label}
+						</Button>
+					{/if}
+					{#if regenerate}
+						<Button
+							type="button"
+							size="sm"
+							variant="link"
+							color={Color.PRIMARY}
+							onclick={regenerate.onclick}
+							disabled={regenerate.disabled || regenerate.loading}
+							loading={regenerate.loading}
+							testId={regenerate.testId}
+						>
+							{regenerate.label}
+						</Button>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="border-default-300 bg-default-50 flex items-center gap-2 rounded-lg border px-3 py-2">
+		<code
+			class="text-default-900 min-w-0 flex-1 font-mono text-sm break-all"
+			data-testid={testId ? `${testId}-value` : undefined}
+		>
+			{display}
+		</code>
+		{#if value && toggleable}
+			<button
+				type="button"
+				onclick={() => (revealed = !revealed)}
+				class="text-default-500 hover:text-default-700 shrink-0 cursor-pointer"
+				aria-label={revealed ? 'Hide API key' : 'Show API key'}
+			>
+				{#if revealed}
+					<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>
+		{/if}
+		{#if value && copyable}
+			<Button type="button" size="sm" variant="outline" onclick={handleCopy}>
+				{copied ? 'Copied' : 'Copy'}
+			</Button>
+		{/if}
+	</div>
+
+	{#if error}
+		<p class="text-danger-500 mt-1 text-xs">{error}</p>
+	{:else if helperText}
+		<p class="text-default-500 mt-1 text-xs">{helperText}</p>
+	{/if}
+</div>

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

@@ -0,0 +1,32 @@
+import type { ClassValue } from 'tailwind-variants';
+type ActionButton = {
+    label: string;
+    loading?: boolean;
+    disabled?: boolean;
+    onclick: () => void;
+    testId?: string;
+};
+interface Props {
+    /** The API key value. Empty string = no key issued yet. */
+    value: string;
+    label?: string;
+    /** Inline error message (e.g. regenerate failure). Suppresses helperText when set. */
+    error?: string | null;
+    /** Subtle hint shown below the field when no error. */
+    helperText?: string;
+    /** Action button rendered to the right of the label (e.g. Regenerate). */
+    regenerate?: ActionButton;
+    /** Optional second action (e.g. Verify). Rendered before regenerate. */
+    verify?: ActionButton;
+    /** Show the masked → revealed eye toggle. @default true */
+    toggleable?: boolean;
+    /** Show a Copy button next to the value. @default false */
+    copyable?: boolean;
+    /** When the key is missing, what to display. @default 'No API key' */
+    emptyLabel?: string;
+    testId?: string;
+    class?: ClassValue;
+}
+declare const ApiKeyField: import("svelte").Component<Props, {}, "">;
+type ApiKeyField = ReturnType<typeof ApiKeyField>;
+export default ApiKeyField;

package/dist/user-management/RoleCard.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import type { ClassValue } from 'tailwind-variants';
+	import type { Role } from '../index.js';
+
+	interface Props {
+		role: Role;
+		selected?: boolean;
+		/** When false, renders as a static card (no button, no hover). @default true */
+		interactive?: boolean;
+		/** Reduces opacity to signal "preserved selection" (e.g. admin role on edit). */
+		dimmed?: boolean;
+		onclick?: () => void;
+		testId?: string;
+		class?: ClassValue;
+	}
+
+	let {
+		role,
+		selected = false,
+		interactive = true,
+		dimmed = false,
+		onclick,
+		testId,
+		class: className
+	}: Props = $props();
+
+	const baseClass = 'rounded-lg border-2 p-2 text-left transition-all w-full block';
+	const selectedClass = 'border-blue-500 bg-blue-50';
+	const idleClass = 'border-default-200 bg-white';
+	const interactiveIdle = 'hover:border-default-300 cursor-pointer';
+
+	const composed = $derived(
+		cn(
+			baseClass,
+			selected ? selectedClass : idleClass,
+			interactive && !selected && interactiveIdle,
+			dimmed && 'opacity-75',
+			className
+		)
+	);
+</script>
+
+{#snippet content()}
+	<div class="flex items-center justify-between gap-2">
+		<div class="min-w-0 flex-1">
+			<h4 class="text-default-900 text-sm font-semibold">{role.label}</h4>
+			{#if role.description}
+				<p class="text-default-600 mt-1 line-clamp-2 text-xs">{role.description}</p>
+			{/if}
+		</div>
+		<div
+			class={cn(
+				'flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2',
+				selected ? 'border-blue-500 bg-blue-500' : 'border-default-300 bg-white'
+			)}
+		>
+			{#if selected}
+				<div class="h-2 w-2 rounded-full bg-white"></div>
+			{/if}
+		</div>
+	</div>
+{/snippet}
+
+{#if interactive}
+	<button type="button" {onclick} class={composed} data-testid={testId ?? `role-${role.value}`}>
+		{@render content()}
+	</button>
+{:else}
+	<div class={composed} data-testid={testId ?? `role-${role.value}`}>
+		{@render content()}
+	</div>
+{/if}

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

@@ -0,0 +1,16 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Role } from '../index.js';
+interface Props {
+    role: Role;
+    selected?: boolean;
+    /** When false, renders as a static card (no button, no hover). @default true */
+    interactive?: boolean;
+    /** Reduces opacity to signal "preserved selection" (e.g. admin role on edit). */
+    dimmed?: boolean;
+    onclick?: () => void;
+    testId?: string;
+    class?: ClassValue;
+}
+declare const RoleCard: import("svelte").Component<Props, {}, "">;
+type RoleCard = ReturnType<typeof RoleCard>;
+export default RoleCard;

package/dist/user-management/UserApproveModal.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { Modal, Button, Color, getUserDisplayName } from '../index.js';
+	import RoleCard from './RoleCard.svelte';
+	import ApiKeyField from './ApiKeyField.svelte';
+	import UserIdentityCard from './UserIdentityCard.svelte';
+	import type { UserApproveModalProps } from '../index.js';
+	import { toast } from 'svelte-sonner';
+
+	let {
+		open = $bindable(false),
+		user,
+		roles = [],
+		onapprove,
+		onclose
+	}: UserApproveModalProps = $props();
+
+	let selectedRole = $state<string>('');
+	let approving = $state(false);
+	let issuedKey = $state<string | null>(null);
+
+	$effect(() => {
+		if (!open) {
+			selectedRole = '';
+			approving = false;
+			issuedKey = null;
+		}
+	});
+
+	const canApprove = $derived(!!selectedRole && !approving && !!user);
+
+	async function handleApprove() {
+		if (!user || !selectedRole) return;
+		approving = true;
+		try {
+			const result = await onapprove({ userId: user.id, role: selectedRole });
+			issuedKey = result.apiKey;
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : 'Failed to approve user');
+		} finally {
+			approving = false;
+		}
+	}
+
+	function handleDone() {
+		open = false;
+		onclose();
+	}
+</script>
+
+<Modal
+	bind:open
+	title={issuedKey ? 'API key generated' : 'Approve user'}
+	description={issuedKey
+		? 'Copy this key now — for security it will not be shown again.'
+		: user
+			? `Assign a role to ${getUserDisplayName(user)} and generate their first API key.`
+			: undefined}
+	size="md"
+	footerAlign="end"
+	onclose={handleDone}
+>
+	{#if !issuedKey}
+		<div class="flex flex-col gap-4">
+			<UserIdentityCard {user} />
+
+			{#if roles.length > 0}
+				<div>
+					<span class="text-default-700 mb-2 block text-sm font-medium">
+						Role <span class="text-danger-500">*</span>
+					</span>
+					<div class="grid grid-cols-1 gap-2">
+						{#each roles as role, index (`${role.value}-${index}`)}
+							<RoleCard
+								{role}
+								selected={selectedRole === role.value}
+								onclick={() => (selectedRole = role.value)}
+								testId="approve-role-{role.value}"
+							/>
+						{/each}
+					</div>
+				</div>
+			{:else}
+				<p class="text-danger-600 text-xs">
+					No roles configured — pass a `roles` prop to enable approval.
+				</p>
+			{/if}
+		</div>
+	{:else}
+		<ApiKeyField
+			value={issuedKey}
+			label={undefined}
+			copyable
+			toggleable={false}
+			helperText="Store this key in your password manager or pass it to the user via a secure channel."
+			testId="approve-issued-key"
+		/>
+	{/if}
+
+	{#snippet footer()}
+		{#if !issuedKey}
+			<Button variant="outline" onclick={handleDone}>Cancel</Button>
+			<Button
+				color={Color.PRIMARY}
+				onclick={handleApprove}
+				disabled={!canApprove}
+				loading={approving}
+				testId="approve-confirm"
+			>
+				Approve & Generate Key
+			</Button>
+		{:else}
+			<Button color={Color.PRIMARY} onclick={handleDone} testId="approve-done">Done</Button>
+		{/if}
+	{/snippet}
+</Modal>

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

@@ -0,0 +1,4 @@
+import type { UserApproveModalProps } from '../index.js';
+declare const UserApproveModal: import("svelte").Component<UserApproveModalProps, {}, "open">;
+type UserApproveModal = ReturnType<typeof UserApproveModal>;
+export default UserApproveModal;

package/dist/user-management/UserIdentityCard.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { getUserDisplayName, getUserInitials } from './user-management.js';
+	import type { ClassValue } from 'tailwind-variants';
+	import type { User } from '../index.js';
+
+	interface Props {
+		user: User | null;
+		/** Optional chip rendered on the right (e.g. current role label). */
+		roleLabel?: string;
+		class?: ClassValue;
+	}
+
+	let { user, roleLabel, class: className }: Props = $props();
+</script>
+
+{#if user}
+	<div
+		class={cn(
+			'bg-default-50 border-default-200 flex items-center gap-3 rounded-lg border p-3',
+			className
+		)}
+	>
+		<div class="h-10 w-10 shrink-0">
+			{#if user.image_url}
+				<img class="h-10 w-10 rounded-full" src={user.image_url} alt="" />
+			{:else}
+				<div class="bg-default-300 flex h-10 w-10 items-center justify-center rounded-full">
+					<span class="text-default-700 text-sm font-medium">
+						{getUserInitials(user)}
+					</span>
+				</div>
+			{/if}
+		</div>
+		<div class="min-w-0 flex-1">
+			<div class="text-default-900 truncate text-sm font-medium">
+				{getUserDisplayName(user)}
+			</div>
+			{#if user.email_addresses?.[0]}
+				<div class="text-default-500 truncate text-xs">
+					{user.email_addresses[0].email_address}
+				</div>
+			{/if}
+		</div>
+		{#if roleLabel}
+			<span
+				class="border-primary-200 bg-primary-50 text-primary-700 shrink-0 rounded-full border px-2 py-0.5 text-xs font-medium"
+			>
+				{roleLabel}
+			</span>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,11 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { User } from '../index.js';
+interface Props {
+    user: User | null;
+    /** Optional chip rendered on the right (e.g. current role label). */
+    roleLabel?: string;
+    class?: ClassValue;
+}
+declare const UserIdentityCard: import("svelte").Component<Props, {}, "">;
+type UserIdentityCard = ReturnType<typeof UserIdentityCard>;
+export default UserIdentityCard;