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

package/dist/svelte/components/AccountLoader.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { getContext, untrack, type Snippet } from 'svelte';
+	import { settle } from '@vibesdotdev/kernel';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import { failureLabel, logOn } from '../runtime-log.js';
+	import {
+		ACCOUNT_STATE_CONTEXT_KEY,
+		AccountState,
+		setAccountStateContext,
+		type AccountStateInitOptions
+	} from '../state.svelte.js';
+	import { getAccountOrigin } from '../runtime';
+	import { resolveLocalAccountOrigin } from '../../config/origins.js';
+	import type { AccountLayoutData } from '../loaders';
+
+	/**
+	 * AccountLoader — non-visual. Drives `accountState.init()` from a layout
+	 * mount point. Optionally seeds the store from a `+layout.server.ts`
+	 * payload (organizations, active org, billing, preferences) so reactive
+	 * reads work before the cross-origin preferences fetch resolves.
+	 *
+	 * Mount at the layout level. Wrap consumers when using this provider on its own.
+	 *
+	 * Usage:
+	 *
+	 *   <AccountLoader
+	 *     initial={data.account}
+	 *   />
+	 */
+	type Props = {
+		children?: Snippet;
+		/** Complete account payload from `loadAccountLayoutData()`. Preferred for new apps. */
+		initial?: AccountLayoutData | null;
+		/** Explicit account origin. Overrides theme/global derivation. */
+		accountOrigin?: string | null;
+		/** Legacy theme stylesheet URL. Prefer `initial.origin` or `accountOrigin` for new code. */
+		themeStylesheetUrl?: string | null;
+		/** Initial organizations from the server `load`. */
+		initialOrganizations?: AccountStateInitOptions['initialOrganizations'];
+		/** Initial active org id from the server `load`. */
+		initialActiveOrgId?: AccountStateInitOptions['initialActiveOrgId'];
+		/** Initial billing summary from the server `load`. */
+		initialBilling?: AccountStateInitOptions['initialBilling'];
+		/** Initial preferences from the server `load`. */
+		initialPreferences?: AccountStateInitOptions['initialPreferences'];
+		/** Initial resolved settings from the server `load`. */
+		initialResolvedSettings?: AccountStateInitOptions['initialResolvedSettings'];
+		/** Initial raw user settings record from the server `load`. */
+		initialUserSettings?: AccountStateInitOptions['initialUserSettings'];
+		/** Initial theme presets from the server `load`. */
+		initialThemePresets?: AccountStateInitOptions['initialThemePresets'];
+		/** Initial theme asset URLs from the server `load`. */
+		initialThemeAssets?: AccountStateInitOptions['initialThemeAssets'];
+	};
+
+	let props: Props = $props();
+	// Captured at component init: Svelte context is unavailable after mount.
+	const runtimeStore = getRuntimeSvelteContext();
+	// Reuse an ancestor projection; otherwise this provider owns its subscription.
+	const accountState =
+		getContext<AccountState | undefined>(ACCOUNT_STATE_CONTEXT_KEY) ?? setAccountStateContext(new AccountState());
+
+	// Seed synchronously for SSR; activation below only attaches this projection.
+	untrack(() => accountState.seedInitial(props));
+
+	const accountOriginProp = $derived(props.accountOrigin);
+	const initialProp = $derived(props.initial ?? null);
+	const themeStylesheetUrlProp = $derived(props.themeStylesheetUrl ?? null);
+
+	let attached = false;
+	$effect(() => {
+		const initial = initialProp;
+		const accountOrigin = accountOriginProp;
+		const themeStylesheetUrl = themeStylesheetUrlProp;
+		const options: AccountStateInitOptions = {
+			initial,
+			initialOrganizations: props.initialOrganizations,
+			initialActiveOrgId: props.initialActiveOrgId,
+			initialBilling: props.initialBilling,
+			initialPreferences: props.initialPreferences,
+			initialResolvedSettings: props.initialResolvedSettings,
+			initialUserSettings: props.initialUserSettings,
+			initialThemePresets: props.initialThemePresets,
+			initialThemeAssets: props.initialThemeAssets
+		};
+		const refresh = attached;
+		attached = true;
+		let active = true;
+		void untrack(async () => {
+			const initialized = await settle(async () => {
+				const runtime = await runtimeStore.load();
+				if (!active) return;
+				const origin = resolveLocalAccountOrigin(
+					accountOrigin ?? initial?.origin ?? await getAccountOrigin(runtime, themeStylesheetUrl)
+				);
+				return untrack(() => accountState[refresh ? 'refresh' : 'init']({
+					runtime,
+					...options,
+					accountOrigin: origin
+				}));
+			});
+			if (!initialized.ok) {
+				void logOn(runtimeStore, 'error', 'account.loader', 'AccountLoader: runtime unavailable; account state not initialized', {
+					failure: failureLabel(initialized.cause)
+				});
+			}
+		});
+		return () => { active = false; };
+	});
+</script>
+
+{@render props.children?.()}

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

@@ -0,0 +1,46 @@
+import { type Snippet } from 'svelte';
+import { type AccountStateInitOptions } from '../state.svelte.ts';
+import type { AccountLayoutData } from '../loaders';
+/**
+ * AccountLoader — non-visual. Drives `accountState.init()` from a layout
+ * mount point. Optionally seeds the store from a `+layout.server.ts`
+ * payload (organizations, active org, billing, preferences) so reactive
+ * reads work before the cross-origin preferences fetch resolves.
+ *
+ * Mount at the layout level. Wrap consumers when using this provider on its own.
+ *
+ * Usage:
+ *
+ *   <AccountLoader
+ *     initial={data.account}
+ *   />
+ */
+type Props = {
+    children?: Snippet;
+    /** Complete account payload from `loadAccountLayoutData()`. Preferred for new apps. */
+    initial?: AccountLayoutData | null;
+    /** Explicit account origin. Overrides theme/global derivation. */
+    accountOrigin?: string | null;
+    /** Legacy theme stylesheet URL. Prefer `initial.origin` or `accountOrigin` for new code. */
+    themeStylesheetUrl?: string | null;
+    /** Initial organizations from the server `load`. */
+    initialOrganizations?: AccountStateInitOptions['initialOrganizations'];
+    /** Initial active org id from the server `load`. */
+    initialActiveOrgId?: AccountStateInitOptions['initialActiveOrgId'];
+    /** Initial billing summary from the server `load`. */
+    initialBilling?: AccountStateInitOptions['initialBilling'];
+    /** Initial preferences from the server `load`. */
+    initialPreferences?: AccountStateInitOptions['initialPreferences'];
+    /** Initial resolved settings from the server `load`. */
+    initialResolvedSettings?: AccountStateInitOptions['initialResolvedSettings'];
+    /** Initial raw user settings record from the server `load`. */
+    initialUserSettings?: AccountStateInitOptions['initialUserSettings'];
+    /** Initial theme presets from the server `load`. */
+    initialThemePresets?: AccountStateInitOptions['initialThemePresets'];
+    /** Initial theme asset URLs from the server `load`. */
+    initialThemeAssets?: AccountStateInitOptions['initialThemeAssets'];
+};
+declare const AccountLoader: import("svelte").Component<Props, {}, "">;
+type AccountLoader = ReturnType<typeof AccountLoader>;
+export default AccountLoader;
+//# sourceMappingURL=AccountLoader.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountLoader.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAuB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAI3D,OAAO,EAIL,KAAK,uBAAuB,EAC5B,MAAM,oBAAoB,CAAC;AAG7B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGnD;;;;;;;;;;;;;GAaG;AACH,KAAK,KAAK,GAAG;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uFAAuF;IACvF,OAAO,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACnC,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,4FAA4F;IAC5F,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,oDAAoD;IACpD,oBAAoB,CAAC,EAAE,uBAAuB,CAAC,sBAAsB,CAAC,CAAC;IACvE,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,uBAAuB,CAAC,oBAAoB,CAAC,CAAC;IACnE,sDAAsD;IACtD,cAAc,CAAC,EAAE,uBAAuB,CAAC,gBAAgB,CAAC,CAAC;IAC3D,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,uBAAuB,CAAC,oBAAoB,CAAC,CAAC;IACnE,wDAAwD;IACxD,uBAAuB,CAAC,EAAE,uBAAuB,CAAC,yBAAyB,CAAC,CAAC;IAC7E,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,uBAAuB,CAAC,qBAAqB,CAAC,CAAC;IACrE,oDAAoD;IACpD,mBAAmB,CAAC,EAAE,uBAAuB,CAAC,qBAAqB,CAAC,CAAC;IACrE,uDAAuD;IACvD,kBAAkB,CAAC,EAAE,uBAAuB,CAAC,oBAAoB,CAAC,CAAC;CACnE,CAAC;AAwEH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/AccountModeSwitcher.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { persistSharedModePreference } from '@vibesdotdev/kit/components/ui/mode-switcher';
+	import { failureMessage } from '@vibesdotdev/account/api';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import { browserDocument, browserWindow } from '../browser.js';
+	import { settle } from '@vibesdotdev/kernel';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import { failureLabel, logOn } from '../runtime-log.js';
+
+	// Captured at component init: Svelte context is unavailable after mount.
+	const runtimeStore = getRuntimeSvelteContext();
+
+
+	function applyModeToDocument(mode: Mode): void {
+		const page = browserWindow();
+		const root = browserDocument()?.documentElement;
+		if (!page || !root) return;
+		const resolved =
+			mode === 'system'
+				? page.matchMedia('(prefers-color-scheme: dark)').matches
+					? 'dark'
+					: 'light'
+				: mode;
+		root.classList.toggle('dark', resolved === 'dark');
+		root.style.colorScheme = resolved;
+	}
+
+	type Mode = 'light' | 'dark' | 'system';
+
+	type Props = {
+		themeStylesheetUrl?: string | null;
+		accountOrigin?: string | null;
+		initialMode?: Mode;
+		label?: string;
+		presentation?: 'icon' | 'segmented';
+		/** A host without a signed-in account keeps its device preference locally. */
+		syncToAccount?: boolean;
+	};
+
+	let props: Props = $props();
+	const labelValue = $derived(props.label ?? 'Toggle color mode');
+	const initialModeValue = $derived(props.initialMode ?? 'system');
+
+	let currentMode = $state<Mode>('system');
+	let modeInitialized = false;
+	$effect(() => {
+		if (modeInitialized) return;
+		modeInitialized = true;
+		currentMode = initialModeValue;
+	});
+	let saving = $state(false);
+	let syncWarning = $state<string | null>(null);
+
+	async function setMode(next: Mode) {
+		if (saving) return;
+		currentMode = next;
+		syncWarning = null;
+		saving = true;
+		persistSharedModePreference(next);
+		applyModeToDocument(next);
+		if (props.syncToAccount === false) {
+			saving = false;
+			return;
+		}
+		const synced = await settle(() => accountState.patchUserSettings({ 'theme.mode': next }));
+		if (!synced.ok) {
+			syncWarning = `Color mode changed locally. Account sync failed: ${failureMessage(synced.cause, 'Failed to update mode')}`;
+			void logOn(runtimeStore, 'warn', 'account.mode-switcher', 'Account sync of the color mode failed', { failure: failureLabel(synced.cause) });
+		}
+		saving = false;
+	}
+
+	const options: Array<{ value: Mode; icon: string; label: string }> = [
+		{ value: 'light', icon: 'lucide:sun', label: 'Light' },
+		{ value: 'dark', icon: 'lucide:moon', label: 'Dark' },
+		{ value: 'system', icon: 'lucide:laptop', label: 'System' }
+	];
+	const presentation = $derived(props.presentation ?? 'icon');
+	const currentOption = $derived(
+		options.find((opt) => opt.value === currentMode) ?? {
+			value: 'system',
+			icon: 'lucide:laptop',
+			label: 'System'
+		}
+	);
+
+	function nextMode(mode: Mode): Mode {
+		if (mode === 'system') return 'light';
+		if (mode === 'light') return 'dark';
+		return 'system';
+	}
+</script>
+
+{#if presentation === 'segmented'}
+	<div
+		role="radiogroup"
+		aria-label={labelValue}
+		class="account-mode-switcher inline-flex h-9 items-center gap-0.5 rounded-md border bg-background p-0.5"
+	>
+		{#each options as opt}
+			<Button
+				type="button"
+				role="radio"
+				aria-checked={currentMode === opt.value}
+				aria-label={opt.label}
+				disabled={saving}
+				variant={currentMode === opt.value ? 'secondary' : 'ghost'}
+				size="icon-sm"
+				class="h-8 w-8 rounded-sm"
+				onclick={() => setMode(opt.value)}
+			>
+				<Icon icon={opt.icon} class="h-4 w-4" />
+			</Button>
+		{/each}
+	</div>
+{:else}
+	<Button
+		type="button"
+		variant="outline"
+		size="icon-sm"
+		disabled={saving}
+		aria-label={`${labelValue}: ${currentOption.label}`}
+		title={`${currentOption.label} mode`}
+		onclick={() => setMode(nextMode(currentMode))}
+	>
+		<Icon icon={currentOption.icon} class="h-4 w-4" />
+	</Button>
+{/if}
+
+{#if syncWarning}
+	<span class="sr-only" role="status" aria-live="polite">{syncWarning}</span>
+{/if}

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

@@ -0,0 +1,14 @@
+type Mode = 'light' | 'dark' | 'system';
+type Props = {
+    themeStylesheetUrl?: string | null;
+    accountOrigin?: string | null;
+    initialMode?: Mode;
+    label?: string;
+    presentation?: 'icon' | 'segmented';
+    /** A host without a signed-in account keeps its device preference locally. */
+    syncToAccount?: boolean;
+};
+declare const AccountModeSwitcher: import("svelte").Component<Props, {}, "">;
+type AccountModeSwitcher = ReturnType<typeof AccountModeSwitcher>;
+export default AccountModeSwitcher;
+//# sourceMappingURL=AccountModeSwitcher.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountModeSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountModeSwitcher.svelte.ts"],"names":[],"mappings":"AAcC,KAAK,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExC,KAAK,KAAK,GAAG;IACZ,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IACpC,8EAA8E;IAC9E,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AA2GH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/AccountNotificationSettings.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import {
+		notificationSettingsManifest,
+		type NotificationSettings
+	} from '@vibesdotdev/account/settings/config';
+	import {
+		createAccountNotificationSettingsPatch,
+		deriveAccountNotificationSettings
+	} 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<NotificationSettings> | null;
+		initialValues?: Partial<NotificationSettings> | null;
+	};
+
+	let {
+		value = null,
+		initialValues = null,
+		onsave,
+		onsaved,
+		onerror,
+		submitLabel = 'Save Preferences',
+		cardLayout = true,
+		disabled = false,
+		actions,
+		class: className = ''
+	}: Props = $props();
+
+	const effectiveInitialValues = $derived({
+		...deriveAccountNotificationSettings(
+			accountState.resolvedSettings ?? accountState.userSettings?.settings ?? null
+		),
+		...initialValues,
+		...value
+	});
+</script>
+
+<AccountSettingsForm
+	manifest={notificationSettingsManifest}
+	initialValues={effectiveInitialValues}
+	toPatch={createAccountNotificationSettingsPatch}
+	{onsave}
+	{onsaved}
+	{onerror}
+	{submitLabel}
+	{cardLayout}
+	{disabled}
+	{actions}
+	class={className}
+/>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountNotificationSettings.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountNotificationSettings.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,oBAAoB,EACzB,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,oBAAoB,CAAC,GAAG,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;CACrD,CAAC;AAoCH,QAAA,MAAM,2BAA2B,2CAAwC,CAAC;AAC1E,KAAK,2BAA2B,GAAG,UAAU,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAClF,eAAe,2BAA2B,CAAC"}

package/dist/svelte/components/AccountOrgBillingContactCard.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@vibesdotdev/kit/components/ui/card';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import * as Select from '@vibesdotdev/kit/components/ui/select';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import {
+		formatAccountOrgBillingContactSource,
+		getAccountOrgBillingContactDisplay,
+		getAccountOrgBillingContactEmail,
+		type AccountOrgBillingContactCardProps,
+		type AccountOrgBillingContactUpdate
+	} from '../billing.js';
+	import { failureMessage } from '@vibesdotdev/account/api';
+	import { settle } from '@vibesdotdev/kernel';
+
+	let {
+		contact,
+		members,
+		canManage,
+		saving = false,
+		onSave,
+		class: className = ''
+	}: AccountOrgBillingContactCardProps = $props();
+
+	let selectedUserId = $state('');
+	let billingEmail = $state('');
+	let localError = $state<string | null>(null);
+
+	const selectedMember = $derived(members.find((member) => member.userId === selectedUserId) ?? null);
+	const trimmedBillingEmail = $derived(billingEmail.trim());
+	const hasChanges = $derived(
+		selectedUserId !== (contact?.source === 'explicit' ? (contact.userId ?? '') : '') ||
+			trimmedBillingEmail !== (contact?.billingEmail ?? '')
+	);
+	const canSubmit = $derived(canManage && hasChanges && !saving);
+
+	$effect(() => {
+		selectedUserId = contact?.source === 'explicit' ? (contact.userId ?? '') : '';
+		billingEmail = contact?.billingEmail ?? '';
+		localError = null;
+	});
+
+	function roleLabel(role: string | null | undefined): string {
+		return (role ?? 'member').replace(/_/g, ' ');
+	}
+
+	async function saveContact(): Promise<void> {
+		if (!canSubmit) return;
+		localError = null;
+		const payload: AccountOrgBillingContactUpdate = {
+			billingContactUserId: selectedUserId || null,
+			billingEmail: trimmedBillingEmail || null
+		};
+		const saved = await settle(async () => onSave?.(payload));
+		if (!saved.ok) localError = failureMessage(saved.cause, 'Failed to update billing contact');
+	}
+</script>
+
+<Card class={className}>
+	<CardHeader>
+		<CardTitle>Billing Contact</CardTitle>
+		<CardDescription>Invoice delivery and fallback actor for organization billing events</CardDescription>
+	</CardHeader>
+	<CardContent class="space-y-5">
+		<div class="grid gap-3 text-sm sm:grid-cols-3">
+			<div class="rounded-md border bg-muted/20 p-3">
+				<p class="text-muted-foreground text-xs">Contact</p>
+				<p class="mt-1 truncate font-medium">{getAccountOrgBillingContactDisplay(contact)}</p>
+			</div>
+			<div class="rounded-md border bg-muted/20 p-3">
+				<p class="text-muted-foreground text-xs">Invoice email</p>
+				<p class="mt-1 truncate font-medium">{getAccountOrgBillingContactEmail(contact)}</p>
+			</div>
+			<div class="rounded-md border bg-muted/20 p-3">
+				<p class="text-muted-foreground text-xs">Source</p>
+				<p class="mt-1 truncate font-medium">
+					{formatAccountOrgBillingContactSource(contact?.source)}
+				</p>
+			</div>
+		</div>
+
+		{#if canManage}
+			<div class="grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(16rem,0.8fr)]">
+				<div class="space-y-2">
+					<Label for="account-org-billing-contact">Billing contact</Label>
+					<Select.Root type="single" bind:value={selectedUserId} disabled={saving}>
+						<Select.Trigger id="account-org-billing-contact" class="w-full">
+							<span>
+								{#if selectedMember}
+									{selectedMember.displayName}
+								{:else}
+									Organization creator fallback
+								{/if}
+							</span>
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Item value="" label="Organization creator fallback">
+								Organization creator fallback
+							</Select.Item>
+							{#each members as member (member.userId)}
+								<Select.Item value={member.userId} label={member.displayName}>
+									<div class="flex min-w-0 flex-col">
+										<span class="truncate">{member.displayName}</span>
+										<span class="text-muted-foreground truncate text-xs">
+											{member.email ?? roleLabel(member.role)}
+										</span>
+									</div>
+								</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="account-org-billing-email">Invoice email</Label>
+					<Input
+						id="account-org-billing-email"
+						type="email"
+						value={billingEmail}
+						placeholder={selectedMember?.email ?? contact?.email ?? 'billing@example.com'}
+						disabled={saving}
+						oninput={(event) => (billingEmail = event.currentTarget.value)}
+					/>
+				</div>
+			</div>
+
+			<div class="flex flex-wrap items-center gap-3">
+				<Button variant="default" disabled={!canSubmit} onclick={saveContact}>
+					{#if saving}
+						<Icon icon="lucide:loader-circle" class="mr-2 h-4 w-4 animate-spin" />
+						Saving...
+					{:else}
+						Save Contact
+					{/if}
+				</Button>
+				{#if selectedMember?.email && !trimmedBillingEmail}
+					<p class="text-muted-foreground text-xs">
+						Invoices will use {selectedMember.email} unless an invoice email is set.
+					</p>
+				{/if}
+			</div>
+		{:else}
+			<p class="text-muted-foreground text-sm">
+				Owners, admins, and billing admins can update this contact.
+			</p>
+		{/if}
+
+		{#if localError}
+			<p class="text-sm text-destructive">{localError}</p>
+		{/if}
+	</CardContent>
+</Card>

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

@@ -0,0 +1,5 @@
+import { type AccountOrgBillingContactCardProps } from '../billing.ts';
+declare const AccountOrgBillingContactCard: import("svelte").Component<AccountOrgBillingContactCardProps, {}, "">;
+type AccountOrgBillingContactCard = ReturnType<typeof AccountOrgBillingContactCard>;
+export default AccountOrgBillingContactCard;
+//# sourceMappingURL=AccountOrgBillingContactCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountOrgBillingContactCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountOrgBillingContactCard.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,EAIL,KAAK,iCAAiC,EAEtC,MAAM,eAAe,CAAC;AA+IxB,QAAA,MAAM,4BAA4B,uEAAwC,CAAC;AAC3E,KAAK,4BAA4B,GAAG,UAAU,CAAC,OAAO,4BAA4B,CAAC,CAAC;AACpF,eAAe,4BAA4B,CAAC"}