@makolabs/ripple 3.0.10 → 3.1.0

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,43 @@ 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;
+    permissions?: 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/funcs/user-management.remote.d.ts

@@ -21,6 +21,29 @@ export declare const generateApiKey: import("@sveltejs/kit").RemoteCommand<{
     apiKey: string;
     message: string;
 }>>;
+/**
+ * List users who exist in the identity provider but are NOT yet members of
+ * ALLOWED_ORG_ID. Treats org membership as the "approved" signal — anyone
+ * authenticated against the app without org membership is "pending".
+ */
+export declare const getPendingUsers: import("@sveltejs/kit").RemoteCommand<GetUsersOptions, Promise<GetUsersResult>>;
+/**
+ * Approve a pending user: add them to ALLOWED_ORG_ID with the chosen Clerk role,
+ * then mint an API key carrying the supplied scope set. The caller (the modal)
+ * resolves the role's scopes from the `roles` prop and passes them in.
+ */
+export declare const approveUser: import("@sveltejs/kit").RemoteCommand<{
+    userId: string;
+    role: string;
+    permissions: string[];
+}, Promise<{
+    apiKey: string;
+}>>;
+/**
+ * Reject a pending user — permanently deletes them from the identity provider.
+ * Destructive and irreversible; the user loses login, history, everything.
+ */
+export declare const rejectUser: import("@sveltejs/kit").RemoteCommand<string, Promise<void>>;
 export declare const verifyToken: import("@sveltejs/kit").RemoteCommand<{
     apiKey: string;
 }, Promise<{

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

@@ -772,6 +772,134 @@ export const generateApiKey = command('unchecked', async (options) => {
         throw new Error(`Failed to generate API key: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
 });
+/**
+ * Fetch the set of Clerk user IDs that already belong to ALLOWED_ORG_ID.
+ * Pages through Clerk's memberships endpoint until exhausted.
+ */
+async function fetchOrgMemberIds() {
+    if (!ORGANIZATION_ID) {
+        throw new Error('ALLOWED_ORG_ID environment variable is required');
+    }
+    const memberIds = new Set();
+    const limit = 500;
+    let offset = 0;
+    while (true) {
+        const data = await makeClerkRequest(`/organizations/${ORGANIZATION_ID}/memberships?limit=${limit}&offset=${offset}`);
+        const list = Array.isArray(data)
+            ? data
+            : (data?.data ?? []);
+        for (const m of list) {
+            const uid = m?.public_user_data?.user_id;
+            if (uid)
+                memberIds.add(uid);
+        }
+        if (list.length < limit)
+            break;
+        offset += limit;
+    }
+    return memberIds;
+}
+/**
+ * List users who exist in the identity provider but are NOT yet members of
+ * ALLOWED_ORG_ID. Treats org membership as the "approved" signal — anyone
+ * authenticated against the app without org membership is "pending".
+ */
+export const getPendingUsers = command('unchecked', async (options) => {
+    log.trace('getPendingUsers', 'Called with options:', options);
+    try {
+        const memberIds = await fetchOrgMemberIds();
+        // Pull all users (paginated) — Clerk has no "not in org" filter, so
+        // we filter client-side. For typical org sizes this is one or two API calls.
+        const all = [];
+        const limit = 500;
+        let offset = 0;
+        while (true) {
+            const params = new URLSearchParams({
+                limit: limit.toString(),
+                offset: offset.toString(),
+                order_by: '-created_at'
+            });
+            if (options.query)
+                params.append('query', options.query);
+            const page = await makeClerkRequest(`/users?${params}`);
+            const users = Array.isArray(page) ? page : (page?.data ?? []);
+            all.push(...users);
+            if (users.length < limit)
+                break;
+            offset += limit;
+        }
+        const pending = all.filter((u) => !memberIds.has(u.id));
+        const start = (options.page - 1) * options.pageSize;
+        const slice = pending.slice(start, start + options.pageSize);
+        log.trace('getPendingUsers', 'Total users:', all.length, 'org members:', memberIds.size, 'pending:', pending.length);
+        return JSON.parse(JSON.stringify({
+            users: slice,
+            totalUsers: pending.length
+        }));
+    }
+    catch (error) {
+        log.error('getPendingUsers', 'Error:', error);
+        throw new Error(`Failed to fetch pending users: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+});
+/**
+ * Approve a pending user: add them to ALLOWED_ORG_ID with the chosen Clerk role,
+ * then mint an API key carrying the supplied scope set. The caller (the modal)
+ * resolves the role's scopes from the `roles` prop and passes them in.
+ */
+export const approveUser = command('unchecked', async (input) => {
+    log.trace('approveUser', 'Called for userId:', input.userId, 'role:', input.role, 'permissions:', input.permissions);
+    if (!input.role?.trim()) {
+        throw new Error('Role is required to approve a user');
+    }
+    if (!input.permissions?.length) {
+        throw new Error('At least one permission scope is required to approve a user');
+    }
+    try {
+        const clerkRole = input.role.startsWith('org:') ? input.role : `org:${input.role}`;
+        await makeClerkRequest(`/organizations/${ORGANIZATION_ID}/memberships`, {
+            method: 'POST',
+            body: JSON.stringify({ user_id: input.userId, role: clerkRole })
+        });
+        const user = await makeClerkRequest(`/users/${input.userId}`);
+        const email = user.email_addresses?.[0]?.email_address;
+        if (!email) {
+            throw new Error('User has no email address');
+        }
+        const adminKeyResult = await createUserPermissions(email, input.permissions);
+        const apiKey = adminKeyResult?.data?.key;
+        if (!apiKey) {
+            throw new Error('Failed to mint API key during approval');
+        }
+        await makeClerkRequest(`/users/${input.userId}`, {
+            method: 'PATCH',
+            body: JSON.stringify({
+                private_metadata: { ...(user.private_metadata || {}), mako_api_key: apiKey }
+            })
+        });
+        log.trace('approveUser', 'Approved and key issued');
+        return JSON.parse(JSON.stringify({ apiKey }));
+    }
+    catch (error) {
+        log.error('approveUser', 'Error:', error);
+        handleClerkError(error, 'Failed to approve user');
+    }
+});
+/**
+ * Reject a pending user — permanently deletes them from the identity provider.
+ * Destructive and irreversible; the user loses login, history, everything.
+ */
+export const rejectUser = command('unchecked', async (userId) => {
+    log.trace('rejectUser', 'Called for userId:', userId);
+    try {
+        await makeClerkRequest(`/users/${userId}`, { method: 'DELETE' });
+        log.trace('rejectUser', 'Deleted successfully');
+    }
+    catch (error) {
+        log.error('rejectUser', 'Error:', error);
+        throw new Error(`Failed to reject user: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+});
 export const verifyToken = command('unchecked', async (options) => {
     log.trace('verifyToken', 'Called');
     try {

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;