@vibesdotdev/account 0.0.0-stage → 1.0.0-rc.3

package/dist/svelte/components/AccountOrganizationInvitationDialog.svelte

@@ -0,0 +1,300 @@
+<script lang="ts">
+	import {
+		Alert,
+		AlertDescription,
+		Badge,
+		Button,
+		Dialog,
+		DialogContent,
+		DialogDescription,
+		DialogFooter,
+		DialogHeader,
+		DialogTitle,
+		Icon,
+		Input,
+		Label
+	} from '@vibesdotdev/kit/components';
+	import * as Select from '@vibesdotdev/kit/components/ui/select';
+	import type { OrganizationInvitation } from '@vibesdotdev/account/organizations';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import { failureMessage } from '@vibesdotdev/account/api';
+	import { settle, type CaughtFailure } from '@vibesdotdev/kernel';
+	import {
+		ACCOUNT_INVITATION_EXPIRATION_OPTIONS,
+		ACCOUNT_INVITATION_ROLE_OPTIONS,
+		filterAccountInvitationManageOrganizations,
+		getAccountInvitationRoleLabel,
+		normalizeAccountOrganizationInvitationValues,
+		toCreateOrganizationInvitationInput,
+		validateAccountOrganizationInvitationValues,
+		type AccountInvitationManageOrganization,
+		type AccountOrganizationInvitationCreated,
+		type AccountOrganizationInvitationErrors,
+		type AccountOrganizationInvitationValues
+	} from '../organizations.js';
+
+	type Props = {
+		open?: boolean;
+		organizations?: AccountInvitationManageOrganization[];
+		initialOrganizationId?: string | null;
+		disabled?: boolean;
+		oncreated?: (result: AccountOrganizationInvitationCreated) => void;
+		onsubmit?: (
+			values: AccountOrganizationInvitationValues
+		) => Promise<OrganizationInvitation | void> | OrganizationInvitation | void;
+		/** Receives the failure: the `Error` itself, or a wrapper holding the non-Error value that was thrown. */
+		onerror?: (failure: CaughtFailure) => void;
+	};
+
+	let {
+		open = $bindable(false),
+		organizations = [],
+		initialOrganizationId = null,
+		disabled = false,
+		oncreated,
+		onsubmit,
+		onerror
+	}: Props = $props();
+
+	let organizationId = $state('');
+	let email = $state('');
+	let role = $state<AccountOrganizationInvitationValues['role']>('member');
+	let expiration = $state<AccountOrganizationInvitationValues['expiration']>('7d');
+	let submitting = $state(false);
+	let errors = $state<AccountOrganizationInvitationErrors>({});
+
+	const manageableOrganizations = $derived(filterAccountInvitationManageOrganizations(organizations));
+	const selectedOrganization = $derived(
+		manageableOrganizations.find((organization) => organization.id === organizationId) ?? null
+	);
+	const selectedRole = $derived(
+		ACCOUNT_INVITATION_ROLE_OPTIONS.find((option) => option.value === role) ??
+			ACCOUNT_INVITATION_ROLE_OPTIONS[0]
+	);
+	const selectedExpiration = $derived(
+		ACCOUNT_INVITATION_EXPIRATION_OPTIONS.find((option) => option.value === expiration) ??
+			ACCOUNT_INVITATION_EXPIRATION_OPTIONS[0]
+	);
+
+	$effect(() => {
+		if (!open) return;
+		const preferred =
+			initialOrganizationId &&
+			manageableOrganizations.some((organization) => organization.id === initialOrganizationId)
+				? initialOrganizationId
+				: null;
+		const next =
+			preferred ??
+			(manageableOrganizations.some((organization) => organization.id === organizationId)
+				? organizationId
+				: (manageableOrganizations[0]?.id ?? ''));
+
+		if (organizationId !== next) {
+			organizationId = next;
+		}
+	});
+
+	function resetForm(): void {
+		email = '';
+		role = 'member';
+		expiration = '7d';
+		errors = {};
+		submitting = false;
+	}
+
+	function handleOpenChange(isOpen: boolean): void {
+		open = isOpen;
+		if (!isOpen) resetForm();
+	}
+
+	async function submitInvitation(event: SubmitEvent): Promise<void> {
+		event.preventDefault();
+		if (disabled || submitting || manageableOrganizations.length === 0) return;
+
+		const values = normalizeAccountOrganizationInvitationValues({
+			organizationId,
+			email,
+			role,
+			expiration
+		});
+		const nextErrors = validateAccountOrganizationInvitationValues(values);
+		errors = nextErrors;
+		if (Object.keys(nextErrors).length > 0) return;
+
+		submitting = true;
+		const created = await settle(async () => {
+			const invitation =
+				(await onsubmit?.(values)) ??
+				(await accountState.createOrganizationInvitation(
+					values.organizationId,
+					toCreateOrganizationInvitationInput(values)
+				));
+			oncreated?.({
+				invitation,
+				organization:
+					manageableOrganizations.find((organization) => organization.id === values.organizationId) ??
+					null
+			});
+			open = false;
+			resetForm();
+		});
+		if (!created.ok) {
+			errors = { form: failureMessage(created.cause, 'Unable to send invitation.') };
+			onerror?.(created.cause);
+		}
+		submitting = false;
+	}
+</script>
+
+<Dialog bind:open onOpenChange={handleOpenChange}>
+	<DialogContent class="flex max-h-[min(720px,calc(100vh-2rem))] flex-col overflow-hidden sm:max-w-2xl">
+		<DialogHeader class="shrink-0">
+			<DialogTitle class="flex items-center gap-2">
+				<Icon icon="lucide:send" class="size-5 text-primary" />
+				Send workspace invitation
+			</DialogTitle>
+			<DialogDescription>
+				Choose a workspace, role, and expiration. We'll email the recipient and keep the invite
+				pending until it resolves.
+			</DialogDescription>
+		</DialogHeader>
+
+		<form id="account-organization-invitation-form" class="min-h-0 flex-1 space-y-5 overflow-y-auto pr-1" onsubmit={submitInvitation}>
+			{#if manageableOrganizations.length === 0}
+				<div class="rounded-lg border border-dashed bg-muted/20 p-5 text-sm">
+					<div class="mb-2 flex items-center gap-2 font-medium">
+						<Icon icon="lucide:lock-keyhole" class="size-4 text-muted-foreground" />
+						No invitation-capable workspace
+					</div>
+					<p class="text-muted-foreground">
+						You need owner or admin access to a workspace before you can send invitations.
+					</p>
+				</div>
+			{:else}
+				<div class="grid gap-4 sm:grid-cols-[minmax(0,1fr)_12rem]">
+					<div class="space-y-2">
+						<Label for="account-invite-email">Email address</Label>
+						<Input
+							id="account-invite-email"
+							type="email"
+							bind:value={email}
+							placeholder="teammate@example.com"
+							autocomplete="email"
+							aria-invalid={Boolean(errors.email)}
+							required
+						/>
+						{#if errors.email}
+							<p class="text-sm text-destructive">{errors.email}</p>
+						{/if}
+					</div>
+
+					<div class="space-y-2">
+						<Label for="account-invite-expiration">Expires</Label>
+						<Select.Root type="single" bind:value={expiration}>
+							<Select.Trigger id="account-invite-expiration" class="w-full">
+								<span>{selectedExpiration.label}</span>
+							</Select.Trigger>
+							<Select.Content>
+								{#each ACCOUNT_INVITATION_EXPIRATION_OPTIONS as option (option.value)}
+									<Select.Item value={option.value} label={option.label}>
+										{option.label}
+									</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					</div>
+				</div>
+
+				<div class="grid gap-4 sm:grid-cols-2">
+					<div class="space-y-2">
+						<Label for="account-invite-organization">Workspace</Label>
+						<Select.Root type="single" bind:value={organizationId}>
+							<Select.Trigger id="account-invite-organization" class="w-full">
+								<span>{selectedOrganization?.name ?? 'Choose workspace'}</span>
+							</Select.Trigger>
+							<Select.Content>
+								{#each manageableOrganizations as organization (organization.id)}
+									<Select.Item value={organization.id} label={organization.name}>
+										{organization.name}
+									</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+						{#if errors.organizationId}
+							<p class="text-sm text-destructive">{errors.organizationId}</p>
+						{/if}
+					</div>
+
+					<div class="space-y-2">
+						<Label for="account-invite-role">Role</Label>
+						<Select.Root type="single" bind:value={role}>
+							<Select.Trigger id="account-invite-role" class="w-full">
+								<span>{getAccountInvitationRoleLabel(role)}</span>
+							</Select.Trigger>
+							<Select.Content>
+								{#each ACCOUNT_INVITATION_ROLE_OPTIONS as option (option.value)}
+									<Select.Item value={option.value} label={option.label}>
+										{option.label}
+									</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					</div>
+				</div>
+
+				<div class="grid gap-3 rounded-lg border bg-muted/20 p-4 text-sm sm:grid-cols-2">
+					<div class="space-y-1">
+						<div class="flex items-center gap-2 font-medium">
+							<Icon icon="lucide:user-cog" class="size-4 text-muted-foreground" />
+							{selectedRole.label}
+						</div>
+						<p class="text-muted-foreground">{selectedRole.description}</p>
+					</div>
+					<div class="space-y-1">
+						<div class="flex items-center gap-2 font-medium">
+							<Icon icon="lucide:clock" class="size-4 text-muted-foreground" />
+							{selectedExpiration.label}
+						</div>
+						<p class="text-muted-foreground">{selectedExpiration.description}</p>
+					</div>
+				</div>
+
+				{#if selectedOrganization}
+					<div class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+						<Badge variant="secondary">{getAccountInvitationRoleLabel(selectedOrganization.role)}</Badge>
+						{#if selectedOrganization.pendingInvitationCount !== undefined}
+							<span>{selectedOrganization.pendingInvitationCount} pending invitation{selectedOrganization.pendingInvitationCount === 1 ? '' : 's'}</span>
+						{/if}
+					</div>
+				{/if}
+			{/if}
+
+			{#if errors.form}
+				<Alert variant="destructive">
+					<AlertDescription>{errors.form}</AlertDescription>
+				</Alert>
+			{/if}
+		</form>
+
+		<DialogFooter class="shrink-0 flex-col gap-2 sm:flex-row sm:justify-end">
+			<Button type="button" variant="ghost" class="w-full sm:w-auto" onclick={() => handleOpenChange(false)}>
+				Cancel
+			</Button>
+			<Button
+				type="submit"
+				form="account-organization-invitation-form"
+				class="w-full sm:w-auto"
+				disabled={disabled || submitting || manageableOrganizations.length === 0}
+			>
+				{#if submitting}
+					<Icon icon="lucide:loader-circle" class="size-4 animate-spin" />
+					Sending
+				{:else}
+					<Icon icon="lucide:send" class="size-4" />
+					Send invitation
+				{/if}
+			</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>

package/dist/svelte/components/AccountOrganizationInvitationDialog.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { OrganizationInvitation } from '@vibesdotdev/account/organizations';
+import { type CaughtFailure } from '@vibesdotdev/kernel';
+import { type AccountInvitationManageOrganization, type AccountOrganizationInvitationCreated, type AccountOrganizationInvitationValues } from '../organizations.ts';
+type Props = {
+    open?: boolean;
+    organizations?: AccountInvitationManageOrganization[];
+    initialOrganizationId?: string | null;
+    disabled?: boolean;
+    oncreated?: (result: AccountOrganizationInvitationCreated) => void;
+    onsubmit?: (values: AccountOrganizationInvitationValues) => Promise<OrganizationInvitation | void> | OrganizationInvitation | void;
+    /** Receives the failure: the `Error` itself, or a wrapper holding the non-Error value that was thrown. */
+    onerror?: (failure: CaughtFailure) => void;
+};
+declare const AccountOrganizationInvitationDialog: import("svelte").Component<Props, {}, "open">;
+type AccountOrganizationInvitationDialog = ReturnType<typeof AccountOrganizationInvitationDialog>;
+export default AccountOrganizationInvitationDialog;
+//# sourceMappingURL=AccountOrganizationInvitationDialog.svelte.d.ts.map

package/dist/svelte/components/AccountOrganizationInvitationDialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountOrganizationInvitationDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountOrganizationInvitationDialog.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAGjF,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAQL,KAAK,mCAAmC,EACxC,KAAK,oCAAoC,EAEzC,KAAK,mCAAmC,EACxC,MAAM,qBAAqB,CAAC;AAG7B,KAAK,KAAK,GAAG;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,mCAAmC,EAAE,CAAC;IACtD,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,oCAAoC,KAAK,IAAI,CAAC;IACnE,QAAQ,CAAC,EAAE,CACV,MAAM,EAAE,mCAAmC,KACvC,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAAC,GAAG,sBAAsB,GAAG,IAAI,CAAC;IAC5E,0GAA0G;IAC1G,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C,CAAC;AA2PH,QAAA,MAAM,mCAAmC,+CAAwC,CAAC;AAClF,KAAK,mCAAmC,GAAG,UAAU,CAAC,OAAO,mCAAmC,CAAC,CAAC;AAClG,eAAe,mCAAmC,CAAC"}

package/dist/svelte/components/AccountPrivacySettings.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import {
+		privacySettingsManifest,
+		type PrivacySettings
+	} from '@vibesdotdev/account/settings/config';
+	import {
+		createAccountPrivacySettingsPatch,
+		deriveAccountPrivacySettings
+	} from '../settings-sections.js';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import AccountSettingsForm from './AccountSettingsForm.svelte';
+	import type { AccountSettingsFormProps } from '../manifest-form.js';
+
+	type Props = Omit<AccountSettingsFormProps, 'manifest' | 'initialValues' | 'toPatch'> & {
+		value?: Partial<PrivacySettings> | null;
+		initialValues?: Partial<PrivacySettings> | null;
+	};
+
+	let {
+		value = null,
+		initialValues = null,
+		onsave,
+		onsaved,
+		onerror,
+		submitLabel = 'Save',
+		cardLayout = true,
+		disabled = false,
+		actions,
+		class: className = ''
+	}: Props = $props();
+
+	const effectiveInitialValues = $derived({
+		...deriveAccountPrivacySettings(
+			accountState.resolvedSettings ?? accountState.userSettings?.settings ?? null
+		),
+		...initialValues,
+		...value
+	});
+</script>
+
+<AccountSettingsForm
+	manifest={privacySettingsManifest}
+	initialValues={effectiveInitialValues}
+	toPatch={createAccountPrivacySettingsPatch}
+	{onsave}
+	{onsaved}
+	{onerror}
+	{submitLabel}
+	{cardLayout}
+	{disabled}
+	{actions}
+	class={className}
+/>

package/dist/svelte/components/AccountPrivacySettings.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type PrivacySettings } from '@vibesdotdev/account/settings/config';
+import type { AccountSettingsFormProps } from '../manifest-form.ts';
+type Props = Omit<AccountSettingsFormProps, 'manifest' | 'initialValues' | 'toPatch'> & {
+    value?: Partial<PrivacySettings> | null;
+    initialValues?: Partial<PrivacySettings> | null;
+};
+declare const AccountPrivacySettings: import("svelte").Component<Props, {}, "">;
+type AccountPrivacySettings = ReturnType<typeof AccountPrivacySettings>;
+export default AccountPrivacySettings;
+//# sourceMappingURL=AccountPrivacySettings.svelte.d.ts.map

package/dist/svelte/components/AccountPrivacySettings.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountPrivacySettings.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountPrivacySettings.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,eAAe,EACpB,MAAM,sCAAsC,CAAC;AAO/C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAGnE,KAAK,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,eAAe,GAAG,SAAS,CAAC,GAAG;IACvF,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC;CAChD,CAAC;AAoCH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}