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

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

@@ -0,0 +1,21 @@
+import { type CaughtFailure } from '@vibesdotdev/kernel';
+import type { AccountThemePresetColors, AccountThemePresetPickerPreset } from '../theme-presets';
+import { type AccountAppearanceSettings } from '../appearance';
+type Props = {
+    value?: AccountAppearanceSettings | null;
+    themePresets?: AccountThemePresetPickerPreset[];
+    systemThemeColors?: AccountThemePresetColors | null;
+    themeCatalogLabel?: string | null;
+    showAdvancedTheme?: boolean;
+    disabled?: boolean;
+    submitLabel?: string;
+    onsave?: (appearance: AccountAppearanceSettings) => Promise<void>;
+    onsaved?: (appearance: AccountAppearanceSettings) => 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 AccountAppearancePanel: import("svelte").Component<Props, {}, "">;
+type AccountAppearancePanel = ReturnType<typeof AccountAppearancePanel>;
+export default AccountAppearancePanel;
+//# sourceMappingURL=AccountAppearancePanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountAppearancePanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountAppearancePanel.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,EAA+B,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAOtF,OAAO,KAAK,EACV,wBAAwB,EACxB,8BAA8B,EAC9B,MAAM,kBAAkB,CAAC;AAC3B,OAAO,EAGL,KAAK,yBAAyB,EAC9B,MAAM,eAAe,CAAC;AAwBvB,KAAK,KAAK,GAAG;IACZ,KAAK,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,8BAA8B,EAAE,CAAC;IAChD,iBAAiB,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IACpD,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,yBAAyB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC1D,0GAA0G;IAC1G,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAosBH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/AccountAppearanceProvider.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { getContext, setContext, onMount, untrack, type Snippet } from 'svelte';
+	import { ownAccountAppearance } from '../appearance-ownership.js';
+	import { getAccountState } from '../state.svelte.js';
+	const accountState = getAccountState();
+	import { browserDocument, browserWindow } from '../browser.js';
+	import { applyAccountAppearanceToRoot, type AccountAppearanceSettings } from '../appearance';
+
+	type Props = {
+		/** Explicit appearance state. Defaults to `accountState.appearance`. */
+		appearance?: AccountAppearanceSettings | null;
+		children?: Snippet;
+	};
+
+	let { appearance = null, children }: Props = $props();
+	const resolvedAppearance = $derived(appearance ?? accountState.appearance);
+
+	const depth = (getContext<number>('vibes-account-appearance-depth') ?? 0) + 1;
+	setContext('vibes-account-appearance-depth', depth);
+	let owner: ReturnType<typeof ownAccountAppearance> | undefined;
+	$effect(() => {
+		void resolvedAppearance;
+		untrack(() => owner?.refresh());
+	});
+
+	onMount(() => {
+		const page = browserWindow();
+		const root = browserDocument()?.documentElement;
+		if (!page || !root) return;
+		const media = page.matchMedia('(prefers-color-scheme: dark)');
+		const apply = () => {
+			applyAccountAppearanceToRoot(root, resolvedAppearance, {
+				prefersDark: media.matches
+			});
+		};
+		owner = ownAccountAppearance(root, apply, depth);
+		const { refresh, release } = owner;
+		media.addEventListener('change', refresh);
+		return () => {
+			media.removeEventListener('change', refresh);
+			release();
+		};
+	});
+</script>
+
+{@render children?.()}

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

@@ -0,0 +1,11 @@
+import { type Snippet } from 'svelte';
+import { type AccountAppearanceSettings } from '../appearance';
+type Props = {
+    /** Explicit appearance state. Defaults to `accountState.appearance`. */
+    appearance?: AccountAppearanceSettings | null;
+    children?: Snippet;
+};
+declare const AccountAppearanceProvider: import("svelte").Component<Props, {}, "">;
+type AccountAppearanceProvider = ReturnType<typeof AccountAppearanceProvider>;
+export default AccountAppearanceProvider;
+//# sourceMappingURL=AccountAppearanceProvider.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountAppearanceProvider.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountAppearanceProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA4C,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIhF,OAAO,EAAgC,KAAK,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAG5F,KAAK,KAAK,GAAG;IACZ,wEAAwE;IACxE,UAAU,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA6CH,QAAA,MAAM,yBAAyB,2CAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/svelte/components/AccountBillingActionsCard.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { Button, Icon } from '@vibesdotdev/kit/components';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@vibesdotdev/kit/components/ui/card';
+	import type { AccountBillingActionsCardProps } from '../billing.js';
+
+	let {
+		onManage,
+		onBuyCredits,
+		onUpgrade,
+		invoicesHref = '/billing/invoices',
+		class: className = ''
+	}: AccountBillingActionsCardProps = $props();
+</script>
+
+<Card class={className}>
+	<CardHeader>
+		<CardTitle>Quick Actions</CardTitle>
+		<CardDescription>Common billing and account management tasks</CardDescription>
+	</CardHeader>
+	<CardContent>
+		<div class="grid gap-4 md:grid-cols-4">
+			<Button variant="outline" onclick={onManage} class="h-auto flex-col items-start p-4">
+				<Icon icon="lucide:credit-card" class="mb-2 h-6 w-6" />
+				<span class="font-medium">Payment Methods</span>
+				<span class="text-muted-foreground text-sm">Update cards and billing info</span>
+			</Button>
+
+			<Button variant="outline" onclick={onBuyCredits} class="h-auto flex-col items-start p-4">
+				<Icon icon="lucide:coins" class="mb-2 h-6 w-6" />
+				<span class="font-medium">Buy Credits</span>
+				<span class="text-muted-foreground text-sm">Purchase credits for usage</span>
+			</Button>
+
+			<Button variant="outline" onclick={onUpgrade} class="h-auto flex-col items-start p-4">
+				<Icon icon="lucide:arrow-up-right" class="mb-2 h-6 w-6" />
+				<span class="font-medium">Upgrade Plan</span>
+				<span class="text-muted-foreground text-sm">Get more features and limits</span>
+			</Button>
+
+			<Button href={invoicesHref} variant="outline" class="h-auto flex-col items-start p-4">
+				<Icon icon="lucide:file-text" class="mb-2 h-6 w-6" />
+				<span class="font-medium">View Invoices</span>
+				<span class="text-muted-foreground text-sm">Payment history and receipts</span>
+			</Button>
+		</div>
+	</CardContent>
+</Card>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountBillingActionsCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountBillingActionsCard.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,eAAe,CAAC;AAoDpE,QAAA,MAAM,yBAAyB,oEAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/svelte/components/AccountBillingCreditsCard.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { Button, Icon } from '@vibesdotdev/kit/components';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@vibesdotdev/kit/components/ui/card';
+	import type { AccountBillingCreditsCardProps } from '../billing.js';
+
+	let {
+		creditBalance,
+		onBuyCredits,
+		lowCreditThreshold = 10,
+		class: className = ''
+	}: AccountBillingCreditsCardProps = $props();
+
+	const availableCredits = $derived(creditBalance?.available ?? 0);
+</script>
+
+<Card class={className}>
+	<CardHeader>
+		<CardTitle class="flex items-center gap-2">
+			<Icon icon="lucide:coins" class="h-5 w-5" />
+			Credit Balance
+		</CardTitle>
+		<CardDescription>Credits for usage-based features and API calls</CardDescription>
+	</CardHeader>
+	<CardContent>
+		<div class="flex items-center justify-between gap-4">
+			<div>
+				<p class="text-3xl font-bold">{availableCredits}</p>
+				<p class="text-muted-foreground text-sm">Available credits</p>
+			</div>
+			<Button onclick={onBuyCredits}>
+				<Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
+				Buy Credits
+			</Button>
+		</div>
+
+		{#if creditBalance && availableCredits < lowCreditThreshold}
+			<div class="mt-4 rounded-lg border border-orange-200 bg-orange-50 p-4 dark:border-orange-900 dark:bg-orange-950">
+				<div class="flex items-center">
+					<Icon icon="lucide:alert-triangle" class="mr-2 h-5 w-5 text-orange-600" />
+					<p class="text-sm text-orange-800 dark:text-orange-200">
+						Your credit balance is low. Consider purchasing more credits to avoid service interruption.
+					</p>
+				</div>
+			</div>
+		{/if}
+	</CardContent>
+</Card>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountBillingCreditsCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountBillingCreditsCard.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,eAAe,CAAC;AAoDpE,QAAA,MAAM,yBAAyB,oEAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/svelte/components/AccountBillingInvoiceList.svelte

@@ -0,0 +1,141 @@
+<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 { Icon } from '@vibesdotdev/kit/components';
+	import {
+		formatAccountBillingCurrency,
+		formatAccountBillingDate,
+		formatAccountBillingStatus,
+		getAccountBillingInvoiceAmount,
+		getAccountBillingInvoiceDate,
+		getAccountBillingInvoiceDisplayNumber,
+		getAccountBillingInvoiceStatusBadgeClass,
+		getAccountBillingInvoiceUrl,
+		type AccountBillingInvoiceListProps
+	} from '../billing.js';
+
+	let {
+		invoices,
+		class: className = '',
+		emptyTitle = 'No invoices yet',
+		emptyDescription = 'Invoices and receipts will appear here after your first paid billing cycle.'
+	}: AccountBillingInvoiceListProps = $props();
+</script>
+
+<Card class={className}>
+	<CardHeader>
+		<CardTitle>Invoice History</CardTitle>
+		<CardDescription>Your past invoices and receipts</CardDescription>
+	</CardHeader>
+	<CardContent>
+		{#if invoices.length > 0}
+			<div class="hidden overflow-x-auto sm:block">
+				<table class="w-full">
+					<thead>
+						<tr class="text-muted-foreground border-b text-left text-sm">
+							<th class="pb-3 font-medium">Invoice</th>
+							<th class="pb-3 font-medium">Date</th>
+							<th class="pb-3 font-medium">Amount</th>
+							<th class="pb-3 font-medium">Status</th>
+							<th class="pb-3 text-right font-medium">Actions</th>
+						</tr>
+					</thead>
+					<tbody class="text-sm">
+						{#each invoices as invoice (invoice.id)}
+							{@const invoiceUrl = getAccountBillingInvoiceUrl(invoice)}
+							<tr class="border-b last:border-0">
+								<td class="py-3">
+									<div class="flex items-center gap-2">
+										<Icon icon="lucide:file-text" class="text-muted-foreground h-4 w-4" />
+										<span class="font-mono text-xs">{getAccountBillingInvoiceDisplayNumber(invoice)}</span>
+									</div>
+								</td>
+								<td class="py-3">{formatAccountBillingDate(getAccountBillingInvoiceDate(invoice))}</td>
+								<td class="py-3 font-medium">
+									{formatAccountBillingCurrency(getAccountBillingInvoiceAmount(invoice), invoice.currency ?? 'USD')}
+								</td>
+								<td class="py-3">
+									<Badge class={getAccountBillingInvoiceStatusBadgeClass(invoice.status)}>
+										{formatAccountBillingStatus(invoice.status)}
+									</Badge>
+								</td>
+								<td class="py-3">
+									<div class="flex justify-end">
+										{#if invoiceUrl}
+											<Button
+												href={invoiceUrl}
+												target="_blank"
+												rel="noopener noreferrer"
+												variant="ghost"
+												size="sm"
+												aria-label={`Open invoice ${getAccountBillingInvoiceDisplayNumber(invoice)}`}
+											>
+												<Icon icon="lucide:external-link" class="h-4 w-4" />
+											</Button>
+										{:else}
+											<span class="text-muted-foreground text-xs">Unavailable</span>
+										{/if}
+									</div>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+
+			<div class="space-y-3 sm:hidden">
+				{#each invoices as invoice (invoice.id)}
+					{@const invoiceUrl = getAccountBillingInvoiceUrl(invoice)}
+					<div class="rounded-lg border p-3">
+						<div class="flex items-start justify-between gap-3">
+							<div class="min-w-0">
+								<div class="flex items-center gap-2">
+									<Icon icon="lucide:file-text" class="text-muted-foreground h-4 w-4 shrink-0" />
+									<p class="truncate font-mono text-xs">{getAccountBillingInvoiceDisplayNumber(invoice)}</p>
+								</div>
+								<p class="text-muted-foreground mt-1 text-xs">
+									{formatAccountBillingDate(getAccountBillingInvoiceDate(invoice))}
+								</p>
+							</div>
+							<Badge class={getAccountBillingInvoiceStatusBadgeClass(invoice.status)}>
+								{formatAccountBillingStatus(invoice.status)}
+							</Badge>
+						</div>
+						<div class="mt-3 flex items-center justify-between gap-3">
+							<p class="font-medium">
+								{formatAccountBillingCurrency(getAccountBillingInvoiceAmount(invoice), invoice.currency ?? 'USD')}
+							</p>
+							{#if invoiceUrl}
+								<Button
+									href={invoiceUrl}
+									target="_blank"
+									rel="noopener noreferrer"
+									variant="outline"
+									size="sm"
+									aria-label={`Open invoice ${getAccountBillingInvoiceDisplayNumber(invoice)}`}
+								>
+									<Icon icon="lucide:external-link" class="h-4 w-4" />
+								</Button>
+							{:else}
+								<span class="text-muted-foreground text-xs">Unavailable</span>
+							{/if}
+						</div>
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<div class="text-muted-foreground py-12 text-center">
+				<Icon icon="lucide:file-text" class="mx-auto mb-4 h-12 w-12 opacity-50" />
+				<p class="text-foreground font-medium">{emptyTitle}</p>
+				<p class="mx-auto mt-1 max-w-sm text-sm">{emptyDescription}</p>
+			</div>
+		{/if}
+	</CardContent>
+</Card>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountBillingInvoiceList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountBillingInvoiceList.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,EASL,KAAK,8BAA8B,EACnC,MAAM,eAAe,CAAC;AAoHxB,QAAA,MAAM,yBAAyB,oEAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/svelte/components/AccountBillingInvoicePreferencesForm.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import {
+		billingInvoicePreferencesManifest,
+		createBillingInvoicePreferencesPatch
+	} from '@vibesdotdev/account/billing';
+	import AccountSettingsForm from './AccountSettingsForm.svelte';
+	import type { AccountSettingsFormProps } from '../manifest-form.js';
+
+	type Props = Omit<AccountSettingsFormProps, 'manifest' | 'toPatch'>;
+
+	let {
+		initialValues = {},
+		onsaved,
+		onerror,
+		submitLabel = 'Save Preferences',
+		cardLayout = true,
+		showHeader = true,
+		disabled = false,
+		actions,
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<AccountSettingsForm
+	manifest={billingInvoicePreferencesManifest}
+	{initialValues}
+	toPatch={createBillingInvoicePreferencesPatch}
+	{onsaved}
+	{onerror}
+	{submitLabel}
+	{cardLayout}
+	{showHeader}
+	{disabled}
+	{actions}
+	class={className}
+/>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountBillingInvoicePreferencesForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountBillingInvoicePreferencesForm.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAGnE,KAAK,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AAwBrE,QAAA,MAAM,oCAAoC,2CAAwC,CAAC;AACnF,KAAK,oCAAoC,GAAG,UAAU,CAAC,OAAO,oCAAoC,CAAC,CAAC;AACpG,eAAe,oCAAoC,CAAC"}

package/dist/svelte/components/AccountBillingPricingGrid.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+	import { Icon } from '@vibesdotdev/kit/components';
+	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 {
+		ACCOUNT_BILLING_PRICING_FEATURES,
+		createAccountBillingPricingPlans,
+		formatAccountBillingFeatureValue,
+		formatAccountBillingPricingPrice,
+		getAccountBillingPricingFeatureValue,
+		type AccountBillingPricingGridProps,
+		type AccountBillingPricingPlan,
+		type AccountBillingPricingPeriod
+	} from '../billing.js';
+
+	let {
+		groups,
+		currentPlanSlug = null,
+		hasActiveSubscription = false,
+		pendingPlanSlug = null,
+		defaultPeriod = 'monthly',
+		popularTierSlug = 'pro',
+		featureEntries = ACCOUNT_BILLING_PRICING_FEATURES,
+		showTeamCta = false,
+		teamHref = '/org/new',
+		onSelectPlan,
+		class: className = ''
+	}: AccountBillingPricingGridProps = $props();
+
+	let billingPeriod = $state<AccountBillingPricingPeriod>('monthly');
+	const plans = $derived(
+		createAccountBillingPricingPlans(groups, billingPeriod, {
+			currentPlanSlug,
+			popularTierSlug
+		})
+	);
+
+	$effect(() => {
+		billingPeriod = defaultPeriod;
+	});
+
+	function getPlanActionLabel(plan: AccountBillingPricingPlan): string {
+		if (pendingPlanSlug === plan.planSlug) return `Processing ${plan.name}`;
+		if (plan.isCurrent) return `Current ${plan.name} plan`;
+		if (plan.isFree) return 'Free plan';
+		if (hasActiveSubscription) return `Manage ${plan.name}`;
+		return `Choose ${plan.name}`;
+	}
+</script>
+
+<div class={className}>
+	<div class="mb-8 flex justify-center">
+		<div class="inline-flex items-center gap-1 rounded-lg border bg-card p-1">
+			<Button
+				variant={billingPeriod === 'monthly' ? 'default' : 'ghost'}
+				size="sm"
+				onclick={() => (billingPeriod = 'monthly')}
+			>
+				Monthly
+			</Button>
+			<Button
+				variant={billingPeriod === 'yearly' ? 'default' : 'ghost'}
+				size="sm"
+				onclick={() => (billingPeriod = 'yearly')}
+			>
+				Yearly
+				<Badge variant="secondary" class="ml-1 text-xs">Save 20%</Badge>
+			</Button>
+		</div>
+	</div>
+
+	<div class="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
+		{#each plans as plan (plan.slug)}
+			<Card class={`relative flex flex-col ${plan.isPopular ? 'border-primary shadow-lg' : ''}`}>
+				{#if plan.isPopular}
+					<div class="absolute -top-3 left-1/2 -translate-x-1/2">
+						<Badge class="bg-primary text-primary-foreground">Most Popular</Badge>
+					</div>
+				{/if}
+
+				<CardHeader class="text-center">
+					<CardTitle class="text-xl">{plan.name}</CardTitle>
+					<CardDescription>{plan.description}</CardDescription>
+					<div class="mt-4">
+						<span class="text-4xl font-bold">
+							{formatAccountBillingPricingPrice(plan.displayPriceCents)}
+						</span>
+						{#if plan.displayPriceCents > 0}
+							<span class="text-muted-foreground">/mo</span>
+						{/if}
+					</div>
+					{#if plan.isYearlySavings}
+						<p class="text-muted-foreground mt-1 text-sm">
+							billed annually at {formatAccountBillingPricingPrice(plan.billedPriceCents)}/year
+						</p>
+					{:else if plan.isFree}
+						<p class="text-muted-foreground mt-1 text-sm">Forever free</p>
+					{/if}
+					{#if plan.minSeats}
+						<p class="text-muted-foreground mt-1 text-sm">{plan.minSeats} seat minimum</p>
+					{/if}
+					{#if plan.creditGrantMonthly}
+						<p class="text-muted-foreground mt-1 text-sm">
+							{plan.creditGrantMonthly.toLocaleString('en-US')}
+							credits
+							{plan.isTeam ? 'per seat ' : ''}included monthly
+						</p>
+					{/if}
+					<Button
+						class="mt-4 w-full"
+						variant={plan.isPopular ? 'default' : 'outline'}
+						disabled={plan.isFree || plan.isCurrent || pendingPlanSlug === plan.planSlug || !plan.planSlug}
+						aria-label={getPlanActionLabel(plan)}
+						onclick={() => plan.planSlug && onSelectPlan?.(plan.planSlug)}
+					>
+						{#if pendingPlanSlug === plan.planSlug}
+							<Icon icon="lucide:loader-circle" class="mr-2 h-4 w-4 animate-spin" />
+							Processing {plan.name}
+						{:else if plan.isCurrent}
+							Current {plan.name} Plan
+						{:else if plan.isFree}
+							Free Plan
+						{:else if hasActiveSubscription}
+							<Icon icon="lucide:settings" class="mr-2 h-4 w-4" />
+							Manage {plan.name}
+						{:else}
+							<Icon icon="lucide:arrow-up-right" class="mr-2 h-4 w-4" />
+							Choose {plan.name}
+						{/if}
+					</Button>
+				</CardHeader>
+
+				<CardContent class="flex-1 pt-0">
+					<ul class="space-y-2 text-sm">
+						{#each featureEntries as feature (feature.key)}
+							{@const value = getAccountBillingPricingFeatureValue(plan.features, feature.key)}
+							{#if value !== undefined && value !== false && value !== null}
+								<li class="flex items-center gap-2">
+									<span
+										class="flex h-5 w-5 shrink-0 items-center justify-center"
+										class:text-primary={value === true}
+										class:text-muted-foreground={value !== true}
+									>
+										{#if value === true}
+											<Icon icon="lucide:check" class="h-4 w-4" />
+										{:else}
+											<Icon icon="lucide:dot" class="h-4 w-4" />
+										{/if}
+									</span>
+									<span>{feature.label}</span>
+									{#if value !== true}
+										<span class="text-muted-foreground ml-auto">
+											{formatAccountBillingFeatureValue(value)}
+										</span>
+									{/if}
+								</li>
+							{/if}
+						{/each}
+					</ul>
+				</CardContent>
+			</Card>
+		{/each}
+	</div>
+
+	{#if showTeamCta}
+		<div class="text-muted-foreground mt-8 text-center text-sm">
+			Need more?
+			<a href={teamHref} class="text-primary underline">Create an organization</a>
+			for team and enterprise plans.
+		</div>
+	{/if}
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountBillingPricingGrid.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountBillingPricingGrid.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,EAML,KAAK,8BAA8B,EAGnC,MAAM,eAAe,CAAC;AAmJxB,QAAA,MAAM,yBAAyB,oEAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}