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

package/dist/svelte/components/AccountConnectedAccountsPanel.svelte

@@ -0,0 +1,329 @@
+<script lang="ts">
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@vibesdotdev/kit/components/ui/card';
+	import {
+		Dialog,
+		DialogContent,
+		DialogDescription,
+		DialogFooter,
+		DialogHeader,
+		DialogTitle
+	} from '@vibesdotdev/kit/components/ui/dialog';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import type { CaughtFailure } from '@vibesdotdev/kernel';
+	import { failureMessage } from '@vibesdotdev/account/api';
+	import type {
+		AccountConnectedProvider,
+		AccountProviderLinkResponse,
+		AccountProviderUnlinkResponse
+	} from '@vibesdotdev/account/api';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import { browserWindow } from '../browser.js';
+	import { settle } from '@vibesdotdev/kernel';
+	import {
+		canDisconnectProvider,
+		formatProviderLinkedDate,
+		getProviderDisplayName,
+		normalizeProviderId,
+		type AccountAuthProviderOption
+	} from '../connected-accounts.js';
+
+	type Props = {
+		value?: AccountConnectedProvider[] | null;
+		availableProviders?: AccountAuthProviderOption[];
+		autoload?: boolean;
+		disabled?: boolean;
+		onconnected?: (providerId: string, result: AccountProviderLinkResponse) => void;
+		ondisconnected?: (providerId: string, result: AccountProviderUnlinkResponse) => void;
+		/** Receives the failure: the `Error` itself, or a wrapper holding the non-Error value that was thrown. */
+		onerror?: (failure: CaughtFailure) => void;
+		class?: string;
+	};
+
+	let {
+		value = null,
+		availableProviders = [],
+		autoload = true,
+		disabled = false,
+		onconnected,
+		ondisconnected,
+		onerror,
+		class: className = ''
+	}: Props = $props();
+
+	let providers = $state<AccountConnectedProvider[]>([]);
+	let loading = $state(false);
+	let connectingProviderId = $state<string | null>(null);
+	let disconnectingProviderId = $state<string | null>(null);
+	let unlinkDialogOpen = $state(false);
+	let providerToUnlink = $state<AccountConnectedProvider | null>(null);
+	let errorMessage = $state<string | null>(null);
+	let loaded = $state(false);
+
+	const oauthProviders = $derived(providers.filter((provider) => provider.providerId !== 'credential'));
+	const hasCredentialAuth = $derived(providers.some((provider) => provider.providerId === 'credential'));
+	const linkedProvidersById = $derived(
+		new Map(providers.map((provider) => [normalizeProviderId(provider.providerId), provider]))
+	);
+	const providerCards = $derived(
+		availableProviders.map((provider) => ({
+			option: provider,
+			linked: linkedProvidersById.get(normalizeProviderId(provider.id)) ?? null
+		}))
+	);
+
+	$effect(() => {
+		if (value !== null) {
+			providers = value;
+		}
+	});
+
+	$effect(() => {
+		if (!autoload || value || loaded) return;
+		loaded = true;
+		void refresh();
+	});
+
+	async function refresh(): Promise<void> {
+		loading = true;
+		errorMessage = null;
+		const refreshed = await settle(() => accountState.refreshConnectedProviders());
+		if (refreshed.ok) {
+			providers = refreshed.value;
+		} else {
+			errorMessage = failureMessage(refreshed.cause, 'Failed to load connected accounts');
+			onerror?.(refreshed.cause);
+		}
+		loading = false;
+	}
+
+	async function connectProvider(providerId: string): Promise<void> {
+		if (disabled || connectingProviderId) return;
+		const normalizedProviderId = normalizeProviderId(providerId);
+		connectingProviderId = normalizedProviderId;
+		errorMessage = null;
+		const connected = await settle(async () => {
+			const result = await accountState.connectProvider(normalizedProviderId);
+			onconnected?.(normalizedProviderId, result);
+			const page = browserWindow();
+			if (page) page.location.href = result.redirectUrl;
+		});
+		if (!connected.ok) {
+			errorMessage = failureMessage(connected.cause, 'Failed to connect provider');
+			onerror?.(connected.cause);
+		}
+		connectingProviderId = null;
+	}
+
+	function openUnlinkDialog(provider: AccountConnectedProvider): void {
+		providerToUnlink = provider;
+		unlinkDialogOpen = true;
+	}
+
+	async function disconnectProvider(): Promise<void> {
+		if (!providerToUnlink || disabled || disconnectingProviderId) return;
+		const providerId = normalizeProviderId(providerToUnlink.providerId);
+		disconnectingProviderId = providerId;
+		errorMessage = null;
+		const disconnected = await settle(async () => {
+			const result = await accountState.disconnectProvider(providerId);
+			providers = providers.filter(
+				(provider) => normalizeProviderId(provider.providerId) !== providerId
+			);
+			ondisconnected?.(providerId, result);
+			unlinkDialogOpen = false;
+			providerToUnlink = null;
+		});
+		if (!disconnected.ok) {
+			errorMessage = failureMessage(disconnected.cause, 'Failed to disconnect provider');
+			onerror?.(disconnected.cause);
+		}
+		disconnectingProviderId = null;
+	}
+</script>
+
+<div class={`account-connected-accounts-panel mx-auto w-full max-w-6xl space-y-6 ${className}`}>
+	<Card class="rounded-lg">
+		<CardHeader>
+			<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+				<div class="flex items-start gap-3">
+					<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-background text-primary">
+						<Icon icon="lucide:shield-check" class="h-5 w-5" />
+					</div>
+					<div class="space-y-1">
+						<CardTitle>Sign-in methods</CardTitle>
+						<CardDescription>
+							{oauthProviders.length > 0
+								? `${oauthProviders.length} external provider${oauthProviders.length === 1 ? '' : 's'} connected`
+								: hasCredentialAuth
+									? 'Password sign-in is available'
+									: 'No sign-in providers are linked'}
+						</CardDescription>
+					</div>
+				</div>
+				<div class="flex flex-wrap items-center gap-2">
+					{#if hasCredentialAuth}
+						<Badge variant="secondary">Password enabled</Badge>
+					{/if}
+					<Badge variant={oauthProviders.length > 0 ? 'secondary' : 'outline'}>
+						{oauthProviders.length}/{availableProviders.length} linked
+					</Badge>
+					<Button type="button" variant="outline" size="sm" onclick={refresh} disabled={disabled || loading}>
+						{#if loading}
+							<Icon icon="lucide:loader-circle" class="mr-1.5 h-4 w-4 animate-spin" />
+						{:else}
+							<Icon icon="lucide:refresh-cw" class="mr-1.5 h-4 w-4" />
+						{/if}
+						Refresh
+					</Button>
+				</div>
+			</div>
+		</CardHeader>
+
+		{#if errorMessage || (loading && providers.length === 0)}
+			<CardContent>
+				{#if errorMessage}
+					<div role="alert" class="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm">
+						{errorMessage}
+					</div>
+				{:else}
+					<div class="flex items-center gap-2 rounded-md border border-dashed p-4 text-sm text-muted-foreground">
+						<Icon icon="lucide:loader-circle" class="h-4 w-4 animate-spin" />
+						Loading providers
+					</div>
+				{/if}
+			</CardContent>
+		{/if}
+	</Card>
+
+	{#if !(loading && providers.length === 0)}
+		<div class="grid gap-4 lg:grid-cols-2">
+			{#each providerCards as card (card.option.id)}
+				<Card class={`rounded-lg ${card.linked ? 'border-primary/30' : ''}`}>
+					<CardHeader class="gap-4">
+						<div class="flex items-start justify-between gap-4">
+							<div class="flex min-w-0 items-start gap-3">
+								<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-background text-primary">
+									<Icon icon={card.option.icon} class="h-5 w-5" />
+								</div>
+								<div class="min-w-0 space-y-1">
+									<div class="flex flex-wrap items-center gap-2">
+										<CardTitle class="text-base leading-tight">{card.option.name}</CardTitle>
+										{#if card.linked?.isPrimary}
+											<Badge variant="secondary">Primary</Badge>
+										{/if}
+									</div>
+									<CardDescription>
+										{#if card.linked}
+											{card.linked.displayName || getProviderDisplayName(card.linked.providerId, availableProviders)}
+										{:else}
+											Add {card.option.name} as another sign-in option.
+										{/if}
+									</CardDescription>
+								</div>
+							</div>
+							<Badge variant={card.linked ? 'secondary' : 'outline'}>
+								{card.linked ? 'Connected' : 'Available'}
+							</Badge>
+						</div>
+					</CardHeader>
+
+					<CardContent class="space-y-4">
+						<div class="space-y-2 rounded-md border bg-muted/20 p-3 text-sm">
+							<div class="flex items-center justify-between gap-3">
+								<span class="text-muted-foreground">Access</span>
+								<span class="font-medium">Sign in only</span>
+							</div>
+							{#if card.linked?.accountId}
+								<div class="flex items-center justify-between gap-3">
+									<span class="text-muted-foreground">Account</span>
+									<span class="truncate font-medium">{card.linked.accountId}</span>
+								</div>
+							{/if}
+							{#if card.linked}
+								<div class="flex items-center justify-between gap-3">
+									<span class="text-muted-foreground">Linked</span>
+									<span class="font-medium">{formatProviderLinkedDate(card.linked.linkedAt)}</span>
+								</div>
+							{/if}
+						</div>
+
+						<div class="flex flex-wrap items-center gap-2">
+							{#if card.linked}
+								{@const linkedProvider = card.linked}
+								{#if canDisconnectProvider(providers, linkedProvider)}
+									<Button
+										type="button"
+										variant="outline"
+										size="sm"
+										aria-label={`Disconnect ${card.option.name}`}
+										onclick={() => openUnlinkDialog(linkedProvider)}
+										disabled={disabled || disconnectingProviderId === card.option.id}
+									>
+										{#if disconnectingProviderId === card.option.id}
+											<Icon icon="lucide:loader-circle" class="mr-1.5 h-4 w-4 animate-spin" />
+										{:else}
+											<Icon icon="lucide:unlink" class="mr-1.5 h-4 w-4" />
+										{/if}
+										Disconnect
+									</Button>
+								{:else}
+									<Badge variant="outline">Required sign-in method</Badge>
+								{/if}
+							{:else}
+								<Button
+									type="button"
+									size="sm"
+									aria-label={`Connect ${card.option.name}`}
+									onclick={() => connectProvider(card.option.id)}
+									disabled={disabled || connectingProviderId !== null}
+								>
+									{#if connectingProviderId === card.option.id}
+										<Icon icon="lucide:loader-circle" class="mr-1.5 h-4 w-4 animate-spin" />
+									{:else}
+										<Icon icon="lucide:link" class="mr-1.5 h-4 w-4" />
+									{/if}
+									Connect {card.option.name}
+								</Button>
+							{/if}
+						</div>
+					</CardContent>
+				</Card>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<Dialog open={unlinkDialogOpen} onOpenChange={(open) => (unlinkDialogOpen = open)}>
+	<DialogContent>
+		<DialogHeader>
+			<DialogTitle>
+				Disconnect {providerToUnlink ? getProviderDisplayName(providerToUnlink.providerId, availableProviders) : 'provider'}?
+			</DialogTitle>
+			<DialogDescription>
+				You will no longer be able to sign in with this provider.
+			</DialogDescription>
+		</DialogHeader>
+		<DialogFooter>
+			<Button type="button" variant="outline" onclick={() => (unlinkDialogOpen = false)}>
+				Cancel
+			</Button>
+			<Button
+				type="button"
+				variant="destructive"
+				onclick={disconnectProvider}
+				disabled={disconnectingProviderId !== null}
+			>
+				{disconnectingProviderId ? 'Disconnecting...' : 'Disconnect'}
+			</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>

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

@@ -0,0 +1,18 @@
+import type { CaughtFailure } from '@vibesdotdev/kernel';
+import type { AccountConnectedProvider, AccountProviderLinkResponse, AccountProviderUnlinkResponse } from '@vibesdotdev/account/api';
+import { type AccountAuthProviderOption } from '../connected-accounts.ts';
+type Props = {
+    value?: AccountConnectedProvider[] | null;
+    availableProviders?: AccountAuthProviderOption[];
+    autoload?: boolean;
+    disabled?: boolean;
+    onconnected?: (providerId: string, result: AccountProviderLinkResponse) => void;
+    ondisconnected?: (providerId: string, result: AccountProviderUnlinkResponse) => void;
+    /** Receives the failure: the `Error` itself, or a wrapper holding the non-Error value that was thrown. */
+    onerror?: (failure: CaughtFailure) => void;
+    class?: string;
+};
+declare const AccountConnectedAccountsPanel: import("svelte").Component<Props, {}, "">;
+type AccountConnectedAccountsPanel = ReturnType<typeof AccountConnectedAccountsPanel>;
+export default AccountConnectedAccountsPanel;
+//# sourceMappingURL=AccountConnectedAccountsPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountConnectedAccountsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountConnectedAccountsPanel.svelte.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,6BAA6B,EAC7B,MAAM,0BAA0B,CAAC;AAInC,OAAO,EAKL,KAAK,yBAAyB,EAC9B,MAAM,0BAA0B,CAAC;AAGlC,KAAK,KAAK,GAAG;IACZ,KAAK,CAAC,EAAE,wBAAwB,EAAE,GAAG,IAAI,CAAC;IAC1C,kBAAkB,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,2BAA2B,KAAK,IAAI,CAAC;IAChF,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,6BAA6B,KAAK,IAAI,CAAC;IACrF,0GAA0G;IAC1G,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAuRH,QAAA,MAAM,6BAA6B,2CAAwC,CAAC;AAC5E,KAAK,6BAA6B,GAAG,UAAU,CAAC,OAAO,6BAA6B,CAAC,CAAC;AACtF,eAAe,6BAA6B,CAAC"}

package/dist/svelte/components/AccountFileSettings.svelte

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountFileSettings.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountFileSettings.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,YAAY,EACjB,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,YAAY,CAAC,GAAG,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC;CAC7C,CAAC;AAoCH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/AccountInterfaceTypeMenu.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import {
+		DropdownMenuGroup,
+		DropdownMenuLabel,
+		DropdownMenuRadioGroup,
+		DropdownMenuRadioItem
+	} from '@vibesdotdev/kit/components/ui/dropdown-menu';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import type { AccountResolvedSettings } from '@vibesdotdev/account/api';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	type AccountUserType = AccountResolvedSettings['user.type'];
+
+	const options = [
+		{ value: 'simple', label: 'Simple', hint: 'Core features', icon: 'lucide:user' },
+		{ value: 'creative', label: 'Creative', hint: 'Creative tools', icon: 'lucide:palette' },
+		{ value: 'power', label: 'Power User', hint: 'Most features', icon: 'lucide:zap' },
+		{ value: 'developer', label: 'Developer', hint: 'All features', icon: 'lucide:code' }
+	] satisfies Array<{
+		value: AccountUserType;
+		label: string;
+		hint: string;
+		icon: string;
+	}>;
+
+	let saving = $state(false);
+	const userType = $derived(accountState.userType);
+
+	async function setUserType(value: string): Promise<void> {
+		const next = options.find((option) => option.value === value)?.value;
+		if (!next || next === userType || saving) return;
+		saving = true;
+		try {
+			await accountState.patchUserSettings({ 'user.type': next });
+		} finally {
+			saving = false;
+		}
+	}
+</script>
+
+<DropdownMenuGroup>
+	<DropdownMenuLabel>Interface Type</DropdownMenuLabel>
+	<DropdownMenuRadioGroup value={userType} onValueChange={(value) => void setUserType(value)}>
+		{#each options as option (option.value)}
+			<DropdownMenuRadioItem value={option.value} disabled={saving}>
+				<Icon icon={option.icon} class="h-4 w-4" />
+				<div class="flex-1">
+					<div class="text-sm font-medium">{option.label}</div>
+					<div class="text-xs text-muted-foreground">{option.hint}</div>
+				</div>
+			</DropdownMenuRadioItem>
+		{/each}
+	</DropdownMenuRadioGroup>
+</DropdownMenuGroup>

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

@@ -0,0 +1,4 @@
+declare const AccountInterfaceTypeMenu: import("svelte").Component<Record<string, never>, {}, "">;
+type AccountInterfaceTypeMenu = ReturnType<typeof AccountInterfaceTypeMenu>;
+export default AccountInterfaceTypeMenu;
+//# sourceMappingURL=AccountInterfaceTypeMenu.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountInterfaceTypeMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountInterfaceTypeMenu.svelte.ts"],"names":[],"mappings":"AAiEA,QAAA,MAAM,wBAAwB,2DAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}

package/dist/svelte/components/AccountLayoutBoundary.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { getContext, untrack, type Snippet } from 'svelte';
+	import type { AccountThemeAssets } from '@vibesdotdev/account/api';
+	import AccountAppearanceProvider from './AccountAppearanceProvider.svelte';
+	import AccountLoader from './AccountLoader.svelte';
+	import AccountThemeHead from './AccountThemeHead.svelte';
+	import type { AccountAppearanceSettings } from '../appearance';
+	import type { AccountLayoutData } from '../loaders';
+	import {
+		ACCOUNT_STATE_CONTEXT_KEY,
+		AccountState,
+		setAccountStateContext
+	} from '../state.svelte.js';
+	import {
+		hasResolvedEmptyAccountCustomCss,
+		type AccountThemeStrategy
+	} from '../theme-delivery.js';
+	import { hasNewerAccountThemeAssets } from '../theme-assets.js';
+
+	/**
+	 * AccountLayoutBoundary — the standard app-layout mount for account-owned
+	 * runtime state, theme assets, and appearance DOM state.
+	 *
+	 * New apps should pass `initial={data.account}` from `loadAccountLayoutData()`.
+	 * Migrating apps may pass flat theme URLs and an explicit appearance object.
+	 */
+	type Props = {
+		/** Complete account payload from `loadAccountLayoutData()`. */
+		initial?: AccountLayoutData | null;
+		/** Alias for `initial`, useful when the layout data is named `account`. */
+		account?: AccountLayoutData | null;
+		/** Explicit appearance override for apps still composing account data locally. */
+		appearance?: AccountAppearanceSettings | null;
+		/** Host-owned preferences applied after both initial and refreshed Account appearance. */
+		appearanceOverrides?: Partial<AccountAppearanceSettings>;
+		/** Explicit theme assets override. Defaults to `initial.themeAssets`. */
+		assets?: AccountThemeAssets | null;
+		/** Explicit account origin for legacy/migration callers. */
+		accountOrigin?: string | null;
+		/** Compatibility theme URL, also used by `AccountLoader` for origin derivation. */
+		themeCssUrl?: string | null;
+		/** Compatibility custom stylesheet URL. */
+		customCssUrl?: string | null;
+		/** Legacy alias for `themeCssUrl`. */
+		themeStylesheetUrl?: string | null;
+		/** Controls whether account styles block the initial page paint. */
+		themeStrategy?: AccountThemeStrategy;
+		/** Disable state seeding when the host app owns account state locally. */
+		loadAccountState?: boolean;
+		children?: Snippet;
+	};
+
+	let {
+		initial = null,
+		account = null,
+		appearance = null,
+		appearanceOverrides = {},
+		assets = null,
+		accountOrigin = null,
+		themeCssUrl = null,
+		customCssUrl = null,
+		themeStylesheetUrl = null,
+		themeStrategy = 'blocking',
+		loadAccountState = true,
+		children
+	}: Props = $props();
+
+	// Each root owns a projection subscription; nested boundaries reuse it.
+	const accountState =
+		getContext<AccountState | undefined>(ACCOUNT_STATE_CONTEXT_KEY) ?? setAccountStateContext(new AccountState());
+	untrack(() => accountState.seedInitial({ initial: initial ?? account, accountOrigin: accountOrigin ?? initial?.origin ?? account?.origin }));
+	const accountData = $derived(initial ?? account ?? null);
+	const resolvedAssets = $derived(assets ?? accountData?.themeAssets ?? null);
+	const liveThemeAssets = $derived(accountState.themeAssets);
+	const liveThemeAssetsAreNewer = $derived(
+		hasNewerAccountThemeAssets(resolvedAssets, liveThemeAssets)
+	);
+	const hasServerAppearance = $derived(
+		Boolean(accountData?.resolvedSettings || accountData?.preferences)
+	);
+	const resolvedAppearance = $derived(
+		liveThemeAssetsAreNewer
+			? accountState.appearance
+			: (appearance ?? (hasServerAppearance ? (accountData?.appearance ?? null) : null))
+	);
+	const effectiveAppearance = $derived(
+		resolvedAppearance ? { ...resolvedAppearance, ...appearanceOverrides } : null
+	);
+	const resolvedThemeCssUrl = $derived(themeCssUrl ?? themeStylesheetUrl ?? null);
+	const resolvedThemeSettings = $derived(
+		liveThemeAssetsAreNewer
+			? accountState.resolvedSettings
+			: (accountData?.resolvedSettings ?? null)
+	);
+	const customCssEnabled = $derived(!hasResolvedEmptyAccountCustomCss(resolvedThemeSettings));
+	let lastSeedKey = untrack(() => JSON.stringify({
+		accountOrigin: accountOrigin ?? accountData?.origin,
+		accountData
+	}));
+
+	$effect(() => {
+		if (loadAccountState || !accountData) return;
+		const nextOrigin = accountOrigin ?? accountData.origin;
+		const seedKey = JSON.stringify({ accountOrigin: nextOrigin, accountData });
+		if (seedKey === lastSeedKey) return;
+		void accountState.refresh({
+			initial: accountData,
+			accountOrigin: nextOrigin
+		});
+		lastSeedKey = seedKey;
+	});
+</script>
+
+{#if loadAccountState}
+	<AccountLoader initial={accountData} {accountOrigin} themeStylesheetUrl={resolvedThemeCssUrl} />
+{/if}
+
+<AccountThemeHead
+	assets={resolvedAssets}
+	themeCssUrl={resolvedThemeCssUrl}
+	{customCssUrl}
+	strategy={themeStrategy}
+	{customCssEnabled}
+/>
+
+<AccountAppearanceProvider appearance={effectiveAppearance}>
+	{@render children?.()}
+</AccountAppearanceProvider>

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

@@ -0,0 +1,41 @@
+import { type Snippet } from 'svelte';
+import type { AccountThemeAssets } from '@vibesdotdev/account/api';
+import type { AccountAppearanceSettings } from '../appearance';
+import type { AccountLayoutData } from '../loaders';
+import { type AccountThemeStrategy } from '../theme-delivery.ts';
+/**
+ * AccountLayoutBoundary — the standard app-layout mount for account-owned
+ * runtime state, theme assets, and appearance DOM state.
+ *
+ * New apps should pass `initial={data.account}` from `loadAccountLayoutData()`.
+ * Migrating apps may pass flat theme URLs and an explicit appearance object.
+ */
+type Props = {
+    /** Complete account payload from `loadAccountLayoutData()`. */
+    initial?: AccountLayoutData | null;
+    /** Alias for `initial`, useful when the layout data is named `account`. */
+    account?: AccountLayoutData | null;
+    /** Explicit appearance override for apps still composing account data locally. */
+    appearance?: AccountAppearanceSettings | null;
+    /** Host-owned preferences applied after both initial and refreshed Account appearance. */
+    appearanceOverrides?: Partial<AccountAppearanceSettings>;
+    /** Explicit theme assets override. Defaults to `initial.themeAssets`. */
+    assets?: AccountThemeAssets | null;
+    /** Explicit account origin for legacy/migration callers. */
+    accountOrigin?: string | null;
+    /** Compatibility theme URL, also used by `AccountLoader` for origin derivation. */
+    themeCssUrl?: string | null;
+    /** Compatibility custom stylesheet URL. */
+    customCssUrl?: string | null;
+    /** Legacy alias for `themeCssUrl`. */
+    themeStylesheetUrl?: string | null;
+    /** Controls whether account styles block the initial page paint. */
+    themeStrategy?: AccountThemeStrategy;
+    /** Disable state seeding when the host app owns account state locally. */
+    loadAccountState?: boolean;
+    children?: Snippet;
+};
+declare const AccountLayoutBoundary: import("svelte").Component<Props, {}, "">;
+type AccountLayoutBoundary = ReturnType<typeof AccountLayoutBoundary>;
+export default AccountLayoutBoundary;
+//# sourceMappingURL=AccountLayoutBoundary.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountLayoutBoundary.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountLayoutBoundary.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAuB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAInE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAMpD,OAAO,EAEL,KAAK,oBAAoB,EACzB,MAAM,sBAAsB,CAAC;AAI9B;;;;;;GAMG;AACH,KAAK,KAAK,GAAG;IACZ,+DAA+D;IAC/D,OAAO,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACnC,2EAA2E;IAC3E,OAAO,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACnC,kFAAkF;IAClF,UAAU,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAC9C,0FAA0F;IAC1F,mBAAmB,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IACzD,yEAAyE;IACzE,MAAM,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACnC,4DAA4D;IAC5D,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,sCAAsC;IACtC,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,oEAAoE;IACpE,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAuFH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}