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

package/dist/svelte/components/AccountBillingSubscriptionCard.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import { Alert, AlertDescription, AlertTitle, Badge, Button, Icon } from '@vibesdotdev/kit/components';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@vibesdotdev/kit/components/ui/card';
+	import {
+		deriveAccountBillingFailureBanner,
+		formatAccountBillingCurrency,
+		formatAccountBillingDate,
+		formatAccountBillingStatus,
+		getAccountBillingStatusBadgeClass,
+		type AccountBillingSubscriptionCardProps
+	} from '../billing.js';
+	import { getBillingTierVisual } from '../billing/tier-visuals.js';
+
+	let {
+		subscription,
+		planSlug,
+		hasActive,
+		onManage,
+		onUpgrade,
+		class: className = ''
+	}: AccountBillingSubscriptionCardProps = $props();
+
+	const tierVisual = $derived(getBillingTierVisual(planSlug));
+	const failingBanner = $derived(deriveAccountBillingFailureBanner(subscription));
+	const isActive = $derived(
+		hasActive || subscription?.status === 'active' || subscription?.status === 'trialing'
+	);
+	const endedAt = $derived(subscription?.cancelAt ?? subscription?.currentPeriodEnd ?? null);
+</script>
+
+<Card class={className}>
+	<CardHeader>
+		<CardTitle>Current Subscription</CardTitle>
+		<CardDescription>Your current plan and billing information</CardDescription>
+	</CardHeader>
+	<CardContent>
+		{#if subscription}
+			{#if failingBanner}
+				<Alert variant="destructive" class="mb-6" data-testid={failingBanner.testId}>
+					<Icon icon="lucide:alert-triangle" />
+					<AlertTitle>{failingBanner.title}</AlertTitle>
+					<AlertDescription>
+						<p>{failingBanner.body}</p>
+						<Button class="mt-3" onclick={onManage} data-testid="billing-banner-cta">
+							<Icon icon="lucide:external-link" class="mr-2 h-4 w-4" />
+							Update payment method
+						</Button>
+					</AlertDescription>
+				</Alert>
+			{:else if subscription.status === 'canceled' || subscription.status === 'expired'}
+				<div class="mb-6 rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-900 dark:bg-red-950">
+					<div class="flex items-start">
+						<Icon icon="lucide:x-circle" class="mr-3 h-5 w-5 text-red-600" />
+						<div class="flex-1">
+							<h4 class="font-semibold text-red-800 dark:text-red-200">
+								Subscription {subscription.status === 'canceled' ? 'Canceled' : 'Expired'}
+							</h4>
+							<p class="mt-1 text-sm text-red-700 dark:text-red-300">
+								Your {subscription.planName} subscription ended on {formatAccountBillingDate(endedAt)}.
+							</p>
+						</div>
+					</div>
+				</div>
+			{/if}
+
+			<div class="grid gap-6 md:grid-cols-2">
+				<div class="space-y-4">
+					<div class="flex flex-wrap items-center gap-3">
+						<Badge variant="outline" class={tierVisual.badge}>{subscription.planName}</Badge>
+						<Badge variant="outline" class={getAccountBillingStatusBadgeClass(subscription.status)}>
+							{formatAccountBillingStatus(subscription.status)}
+						</Badge>
+						{#if subscription.isTrial}
+							<Badge variant="outline">Trial</Badge>
+						{/if}
+					</div>
+
+					{#if subscription.priceCents && Number(subscription.priceCents) > 0}
+						<div>
+							<p class="text-muted-foreground text-sm">Recurring cost</p>
+							<p class="text-2xl font-bold">
+								{formatAccountBillingCurrency(Number(subscription.priceCents))}
+								<span class="text-muted-foreground text-sm font-normal">/{subscription.interval ?? 'month'}</span>
+							</p>
+						</div>
+					{/if}
+
+					<div class="grid grid-cols-2 gap-4">
+						<div>
+							<p class="text-muted-foreground text-sm">Current Period</p>
+							<p class="font-medium">
+								{formatAccountBillingDate(subscription.currentPeriodStart)} - {formatAccountBillingDate(subscription.currentPeriodEnd)}
+							</p>
+						</div>
+						{#if subscription.isTrial && subscription.trialEndsAt}
+							<div>
+								<p class="text-muted-foreground text-sm">Trial Ends</p>
+								<p class="font-medium">{formatAccountBillingDate(subscription.trialEndsAt)}</p>
+							</div>
+						{/if}
+					</div>
+				</div>
+
+				<div class="space-y-4">
+					{#if isActive}
+						<Button onclick={onManage} class="w-full">
+							<Icon icon="lucide:external-link" class="mr-2 h-4 w-4" />
+							Manage Subscription
+						</Button>
+						<Button variant="outline" onclick={onUpgrade} class="w-full">
+							<Icon icon="lucide:arrow-up-right" class="mr-2 h-4 w-4" />
+							Upgrade Plan
+						</Button>
+					{:else if subscription.status === 'past_due'}
+						<Button onclick={onManage} class="w-full">
+							<Icon icon="lucide:external-link" class="mr-2 h-4 w-4" />
+							Update Payment Method
+						</Button>
+					{:else}
+						<Button onclick={onUpgrade} class="w-full">
+							<Icon icon="lucide:arrow-up-right" class="mr-2 h-4 w-4" />
+							Reactivate Subscription
+						</Button>
+						<Button variant="outline" onclick={onManage} class="w-full">
+							<Icon icon="lucide:external-link" class="mr-2 h-4 w-4" />
+							View Billing Portal
+						</Button>
+					{/if}
+				</div>
+			</div>
+		{:else}
+			<div class="py-8 text-center">
+				<div class="space-y-4">
+					<Badge variant="outline" class={`px-4 py-2 text-base ${getBillingTierVisual('free').badge}`}>
+						Free Plan
+					</Badge>
+					<p class="text-muted-foreground">
+						You're on the free plan. Upgrade when you want more usage, more room for AI, and a real billing cycle.
+					</p>
+					<Button onclick={onUpgrade} class="mt-4" data-testid="upgrade-to-pro-button">
+						<Icon icon="lucide:arrow-up-right" class="mr-2 h-4 w-4" />
+						Upgrade to Pro
+					</Button>
+				</div>
+			</div>
+		{/if}
+	</CardContent>
+</Card>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountBillingSubscriptionCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountBillingSubscriptionCard.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,EAML,KAAK,mCAAmC,EACxC,MAAM,eAAe,CAAC;AAmJxB,QAAA,MAAM,8BAA8B,yEAAwC,CAAC;AAC7E,KAAK,8BAA8B,GAAG,UAAU,CAAC,OAAO,8BAA8B,CAAC,CAAC;AACxF,eAAe,8BAA8B,CAAC"}

package/dist/svelte/components/AccountBillingUsageCard.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { Icon, Progress } from '@vibesdotdev/kit/components';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@vibesdotdev/kit/components/ui/card';
+	import {
+		createAccountBillingUsageMetrics,
+		formatAccountBillingUsageValue,
+		getAccountBillingUsageProgressClass,
+		type AccountBillingUsageCardProps
+	} from '../billing.js';
+
+	let { usage, class: className = '' }: AccountBillingUsageCardProps = $props();
+
+	const metrics = $derived(createAccountBillingUsageMetrics(usage));
+	const planLabel = $derived(usage?.plan ? usage.plan.replace(/-/g, ' ') : null);
+</script>
+
+{#if usage}
+	<Card class={className}>
+		<CardHeader>
+			<div class="flex items-start justify-between gap-4">
+				<div>
+					<CardTitle>Usage Overview</CardTitle>
+					<CardDescription>Current period usage against your plan limits</CardDescription>
+				</div>
+				{#if planLabel}
+					<div class="text-muted-foreground rounded-md border px-2 py-1 text-xs font-medium capitalize">
+						{planLabel}
+					</div>
+				{/if}
+			</div>
+		</CardHeader>
+		<CardContent class="space-y-5">
+			<div class="grid gap-3 sm:grid-cols-3">
+				{#each metrics as metric (metric.key)}
+					<div class="rounded-lg border bg-muted/20 p-3">
+						<div class="flex items-center justify-between gap-3">
+							<p class="text-sm font-medium">{metric.label}</p>
+							<span class="text-muted-foreground text-xs">{metric.percent}%</span>
+						</div>
+						<p class="mt-2 text-2xl font-semibold">
+							{formatAccountBillingUsageValue(metric.used)}
+						</p>
+						<p class="text-muted-foreground text-xs">
+							of {metric.limit > 0 ? formatAccountBillingUsageValue(metric.limit) : 'unlimited'}
+							{metric.unit}
+						</p>
+					</div>
+				{/each}
+			</div>
+
+			<div class="space-y-4">
+				{#each metrics as metric (metric.key)}
+					<div class="space-y-2">
+						<div class="flex items-center justify-between gap-4">
+							<div>
+								<p class="text-sm font-medium">{metric.label}</p>
+								<p class="text-muted-foreground text-xs">
+									{formatAccountBillingUsageValue(metric.used)}
+									/
+									{metric.limit > 0 ? formatAccountBillingUsageValue(metric.limit) : 'unlimited'}
+									{metric.unit}
+								</p>
+							</div>
+							{#if metric.state === 'critical'}
+								<span class="text-xs font-medium text-red-600 dark:text-red-400">Limit nearly reached</span>
+							{:else if metric.state === 'warning'}
+								<span class="text-xs font-medium text-amber-600 dark:text-amber-400">Approaching limit</span>
+							{/if}
+						</div>
+						<Progress
+							value={metric.percent}
+							max={100}
+							class={`h-2 ${getAccountBillingUsageProgressClass(metric.state)}`}
+							aria-label={`${metric.label} usage`}
+						/>
+					</div>
+				{/each}
+			</div>
+
+			{#if typeof usage.creditsBalance === 'number'}
+				<div class="text-muted-foreground flex items-center gap-2 rounded-lg border bg-muted/20 p-3 text-sm">
+					<Icon icon="lucide:coins" class="h-4 w-4" />
+					<span>{formatAccountBillingUsageValue(usage.creditsBalance)} credits available for usage-based features.</span>
+				</div>
+			{/if}
+		</CardContent>
+	</Card>
+{/if}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountBillingUsageCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountBillingUsageCard.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,EAIL,KAAK,4BAA4B,EACjC,MAAM,eAAe,CAAC;AAmFxB,QAAA,MAAM,uBAAuB,kEAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/svelte/components/AccountBillingUsagePreferencesForm.svelte

@@ -0,0 +1,261 @@
+<script lang="ts">
+	import * as z from 'zod/v4';
+	import { failureMessage } from '@vibesdotdev/account/api';
+	import { settle } from '@vibesdotdev/kernel';
+	import { stableJson, type SettingsValues } from '../json.js';
+	import {
+		billingUsagePreferencesManifest,
+		createBillingUsagePreferencesPatch
+	} from '@vibesdotdev/account/billing';
+	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 { Label } from '@vibesdotdev/kit/components/ui/label';
+	import * as Select from '@vibesdotdev/kit/components/ui/select';
+	import { Switch } from '@vibesdotdev/kit/components/ui/switch';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import type {
+		AccountSettingsFormController,
+		AccountSettingsFormProps,
+		AccountSettingsSaveResult
+	} from '../manifest-form.js';
+
+	type UsageAlertValues = {
+		'billing.usage_alerts': boolean;
+		'billing.usage_email_threshold': number;
+	};
+	type Props = Omit<AccountSettingsFormProps, 'manifest' | 'toPatch'>;
+
+	let {
+		initialValues = {},
+		onsave,
+		onsaved,
+		onerror,
+		submitLabel = 'Save Preferences',
+		cardLayout = true,
+		showHeader = true,
+		disabled = false,
+		actions,
+		class: className = ''
+	}: Props = $props();
+
+	const thresholdField = billingUsagePreferencesManifest.fields['billing.usage_email_threshold'];
+	const thresholdOptions = thresholdField.options ?? [];
+	const defaultValues: UsageAlertValues = {
+		'billing.usage_alerts': true,
+		'billing.usage_email_threshold': 80
+	};
+	// A stored threshold is a finite number or numeric text; anything else is the default.
+	const usageValuesSchema = z.object({
+		'billing.usage_alerts': z.boolean().catch(defaultValues['billing.usage_alerts']),
+		'billing.usage_email_threshold': z
+			.union([z.number(), z.string().transform(Number)])
+			.pipe(z.number())
+			.catch(defaultValues['billing.usage_email_threshold'])
+	});
+
+	let usageAlerts = $state(defaultValues['billing.usage_alerts']);
+	let threshold = $state(defaultValues['billing.usage_email_threshold']);
+	let isSubmitting = $state(false);
+	let errorMessage = $state<string | null>(null);
+	let lastInitialValuesKey = $state('');
+	let baselineValuesKey = $state('');
+	let baselineValues = $state<UsageAlertValues>({ ...defaultValues });
+
+	const values = $derived<UsageAlertValues>({
+		'billing.usage_alerts': usageAlerts,
+		'billing.usage_email_threshold': threshold
+	});
+	const valuesKey = $derived(stableJson(values));
+	const isDirty = $derived(valuesKey !== baselineValuesKey);
+	const canSubmit = $derived(!disabled && !isSubmitting && isDirty);
+	const thresholdLabel = $derived(
+		thresholdOptions.find((option) => option.value === String(threshold))?.label ?? `${threshold}%`
+	);
+	const controller = $derived<AccountSettingsFormController>({
+		values,
+		errors: {},
+		isSubmitting,
+		isDirty,
+		reset
+	});
+
+	$effect(() => {
+		const nextValues = normalizeInitialValues(initialValues);
+		const nextKey = stableJson(nextValues);
+		if (nextKey === lastInitialValuesKey) return;
+		lastInitialValuesKey = nextKey;
+		baselineValuesKey = nextKey;
+		baselineValues = nextValues;
+		usageAlerts = nextValues['billing.usage_alerts'];
+		threshold = nextValues['billing.usage_email_threshold'];
+		errorMessage = null;
+	});
+
+	function normalizeInitialValues(input: SettingsValues): UsageAlertValues {
+		return usageValuesSchema.parse(input);
+	}
+
+	function reset(): void {
+		usageAlerts = baselineValues['billing.usage_alerts'];
+		threshold = baselineValues['billing.usage_email_threshold'];
+		errorMessage = null;
+	}
+
+	async function defaultSave(currentValues: UsageAlertValues): Promise<AccountSettingsSaveResult> {
+		return await accountState.patchUserSettings(createBillingUsagePreferencesPatch(currentValues));
+	}
+
+	async function handleSubmit(): Promise<void> {
+		if (disabled || isSubmitting) return;
+		errorMessage = null;
+		isSubmitting = true;
+		const currentValues = { ...values };
+		const saved = await settle(async () => {
+			const patch = createBillingUsagePreferencesPatch(currentValues);
+			const result = onsave ? await onsave(currentValues, patch) : await defaultSave(currentValues);
+			baselineValuesKey = stableJson(currentValues);
+			baselineValues = currentValues;
+			onsaved?.(currentValues, result);
+		});
+		if (!saved.ok) {
+			errorMessage = failureMessage(saved.cause, 'Failed to save usage preferences');
+			onerror?.(saved.cause);
+		}
+		isSubmitting = false;
+	}
+</script>
+
+{#snippet formBody()}
+	<div class="grid gap-5 md:grid-cols-[minmax(0,1fr)_14rem] md:items-start">
+		<div class="space-y-2">
+			<Label for="billing-usage-email-threshold">Alert threshold</Label>
+			<Select.Root
+				type="single"
+				value={String(threshold)}
+				disabled={disabled || isSubmitting || !usageAlerts}
+				onValueChange={(selected: string) => {
+					const parsed = Number(selected);
+					if (Number.isFinite(parsed)) threshold = parsed;
+				}}
+			>
+				<Select.Trigger id="billing-usage-email-threshold">
+					<span>{thresholdLabel}</span>
+				</Select.Trigger>
+				<Select.Content>
+					{#each thresholdOptions as option (option.value)}
+						<Select.Item value={option.value}>{option.label}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+			<p class="text-sm text-muted-foreground">
+				Email alerts are sent when usage reaches this share of a plan limit.
+			</p>
+		</div>
+
+		<div class="rounded-md border bg-muted/20 p-3">
+			<div class="flex items-center justify-between gap-3">
+				<div class="min-w-0">
+					<p class="text-sm font-medium">Current state</p>
+					<p class="text-xs text-muted-foreground">
+						{usageAlerts ? `Alerts at ${thresholdLabel}` : 'Alerts paused'}
+					</p>
+				</div>
+				<Badge variant={usageAlerts ? 'secondary' : 'outline'}>
+					{usageAlerts ? 'Enabled' : 'Disabled'}
+				</Badge>
+			</div>
+		</div>
+	</div>
+
+	{#if errorMessage}
+		<div role="alert" class="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm">
+			{errorMessage}
+		</div>
+	{/if}
+
+	{#if actions}
+		{@render actions(controller)}
+	{:else}
+		<div class="flex justify-end gap-2">
+			<Button
+				type="button"
+				variant="outline"
+				disabled={disabled || isSubmitting || !isDirty}
+				onclick={reset}
+			>
+				Reset
+			</Button>
+			<Button type="submit" disabled={!canSubmit}>
+				{#if isSubmitting}
+					<Icon icon="lucide:loader-circle" class="mr-1.5 h-4 w-4 animate-spin" />
+				{/if}
+				{isSubmitting ? 'Saving...' : submitLabel}
+			</Button>
+		</div>
+	{/if}
+{/snippet}
+
+<form
+	onsubmit={(event) => {
+		event.preventDefault();
+		handleSubmit();
+	}}
+	class={`account-billing-usage-preferences-form ${className}`}
+>
+	{#if cardLayout}
+		<Card>
+			<CardHeader class="gap-4">
+				<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+					{#if showHeader}
+						<div class="space-y-1.5">
+							<CardTitle>{billingUsagePreferencesManifest.name}</CardTitle>
+							<CardDescription>{billingUsagePreferencesManifest.description}</CardDescription>
+						</div>
+					{/if}
+					<div class="flex shrink-0 items-center gap-3 rounded-md border bg-background px-3 py-2">
+						<Label for="billing-usage-alerts" class="text-sm font-medium">
+							{usageAlerts ? 'Enabled' : 'Disabled'}
+						</Label>
+						<Switch
+							id="billing-usage-alerts"
+							checked={usageAlerts}
+							disabled={disabled || isSubmitting}
+							onCheckedChange={(checked) => {
+								usageAlerts = Boolean(checked);
+							}}
+						/>
+					</div>
+				</div>
+			</CardHeader>
+			<CardContent class="flex flex-col gap-5">
+				{@render formBody()}
+			</CardContent>
+		</Card>
+	{:else}
+		<div class="flex flex-col gap-5">
+			<div class="flex items-center justify-between gap-4">
+				<Label for="billing-usage-alerts-inline" class="text-sm font-medium">
+					{usageAlerts ? 'Enabled' : 'Disabled'}
+				</Label>
+				<Switch
+					id="billing-usage-alerts-inline"
+					checked={usageAlerts}
+					disabled={disabled || isSubmitting}
+					onCheckedChange={(checked) => {
+						usageAlerts = Boolean(checked);
+					}}
+				/>
+			</div>
+			{@render formBody()}
+		</div>
+	{/if}
+</form>

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

@@ -0,0 +1,6 @@
+import type { AccountSettingsFormProps } from '../manifest-form.ts';
+type Props = Omit<AccountSettingsFormProps, 'manifest' | 'toPatch'>;
+declare const AccountBillingUsagePreferencesForm: import("svelte").Component<Props, {}, "">;
+type AccountBillingUsagePreferencesForm = ReturnType<typeof AccountBillingUsagePreferencesForm>;
+export default AccountBillingUsagePreferencesForm;
+//# sourceMappingURL=AccountBillingUsagePreferencesForm.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountBillingUsagePreferencesForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountBillingUsagePreferencesForm.svelte.ts"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAEV,wBAAwB,EAExB,MAAM,qBAAqB,CAAC;AAO7B,KAAK,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AAiOrE,QAAA,MAAM,kCAAkC,2CAAwC,CAAC;AACjF,KAAK,kCAAkC,GAAG,UAAU,CAAC,OAAO,kCAAkC,CAAC,CAAC;AAChG,eAAe,kCAAkC,CAAC"}

package/dist/svelte/components/AccountChatDisplaySettings.svelte

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountChatDisplaySettings.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountChatDisplaySettings.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,iBAAiB,EACtB,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,iBAAiB,CAAC,GAAG,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC;CAClD,CAAC;AAoCH,QAAA,MAAM,0BAA0B,2CAAwC,CAAC;AACzE,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAChF,eAAe,0BAA0B,CAAC"}