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

package/dist/svelte/components/CommunityInvitationsPanel.svelte

@@ -0,0 +1,440 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { settle, type CaughtFailure } from '@vibesdotdev/kernel';
+	import { getVibesClient } from '@vibesdotdev/kernel/client';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import { failureMessage } from '@vibesdotdev/account/api';
+	import { failureLabel, logOn } from '../runtime-log.js';
+	import type {
+		AccountApiClient,
+		AccountIncomingFriendRequest,
+		AccountOutgoingFriendRequest,
+		AccountSocialUser
+	} from '@vibesdotdev/account/api';
+	import { Badge, Button, Icon } from '@vibesdotdev/kit/components';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { EmptyState } from '@vibesdotdev/kit/components/layout';
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from '@vibesdotdev/kit/components/ui/tabs';
+	import {
+		filterSocialUsersByQuery,
+		socialUserDisplayName,
+		socialUserInitials
+	} from '../social/invitation-utils.js';
+
+	let {
+		profilePath = (user: AccountSocialUser) => `/profile/${user.slug ?? user.id}`,
+		discoverHref = '/community/discover',
+		/**
+		 * Demo / sandbox hosts: no live account API mutations or discover.
+		 * Search may still filter `demoPeople` locally for a realistic empty-sandbox.
+		 */
+		readOnly = false,
+		/** Optional people catalog for local demo search (readOnly only). */
+		demoPeople = [],
+		oninvitesent,
+		onaccepted,
+		ondeclined,
+		oncancelled,
+		onerror
+	}: {
+		profilePath?: (user: AccountSocialUser) => string;
+		discoverHref?: string;
+		readOnly?: boolean;
+		demoPeople?: AccountSocialUser[];
+		oninvitesent?: (request: AccountOutgoingFriendRequest) => void;
+		onaccepted?: (request: AccountIncomingFriendRequest | AccountOutgoingFriendRequest) => void;
+		ondeclined?: (request: AccountIncomingFriendRequest | AccountOutgoingFriendRequest) => void;
+		oncancelled?: (request: AccountIncomingFriendRequest | AccountOutgoingFriendRequest) => void;
+		/** Receives the failure: the `Error` itself, or a wrapper holding the non-Error value that was thrown. */
+		onerror?: (failure: CaughtFailure) => void;
+	} = $props();
+
+	let activeTab = $state<'incoming' | 'sent'>('incoming');
+	let incoming = $state<AccountIncomingFriendRequest[]>([]);
+	let outgoing = $state<AccountOutgoingFriendRequest[]>([]);
+	let isLoadingIncoming = $state(true);
+	let isLoadingOutgoing = $state(true);
+	let actingOnId = $state<string | null>(null);
+
+	let searchQuery = $state('');
+	let searchResults = $state<AccountSocialUser[]>([]);
+	let isSearching = $state(false);
+	let sendTargetId = $state<string | null>(null);
+	let sendInFlight = $state(false);
+	let sendError = $state<string | null>(null);
+	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+	const runtimeStore = getRuntimeSvelteContext();
+
+	async function accountClient(): Promise<AccountApiClient> {
+		const runtime = await runtimeStore.load();
+		return getVibesClient<AccountApiClient>('account', runtime);
+	}
+
+	async function loadIncoming() {
+		if (readOnly) {
+			incoming = [];
+			isLoadingIncoming = false;
+			return;
+		}
+		isLoadingIncoming = true;
+		const listed = await settle(async () => (await accountClient()).listPendingFriendRequests());
+		if (listed.ok) {
+			incoming = listed.value;
+		} else {
+			void logOn(runtimeStore, 'warn', 'account.community-invitations', 'CommunityInvitationsPanel: incoming load failed', { failure: failureLabel(listed.cause) });
+			incoming = [];
+		}
+		isLoadingIncoming = false;
+	}
+
+	async function loadOutgoing() {
+		if (readOnly) {
+			outgoing = [];
+			isLoadingOutgoing = false;
+			return;
+		}
+		isLoadingOutgoing = true;
+		const listed = await settle(async () => (await accountClient()).listOutgoingFriendRequests());
+		if (listed.ok) {
+			outgoing = listed.value;
+		} else {
+			void logOn(runtimeStore, 'warn', 'account.community-invitations', 'CommunityInvitationsPanel: outgoing load failed', { failure: failureLabel(listed.cause) });
+			outgoing = [];
+		}
+		isLoadingOutgoing = false;
+	}
+
+	async function loadAll() {
+		await Promise.all([loadIncoming(), loadOutgoing()]);
+	}
+
+	async function respondToIncoming(requestId: string, status: 'accepted' | 'declined') {
+		if (readOnly) return;
+		actingOnId = requestId;
+		const responded = await settle(async () => {
+			const client = await accountClient();
+			const updated = await client.respondToFriendRequest(requestId, status);
+			incoming = incoming.filter((request) => request.id !== requestId);
+			if (status === 'accepted') await loadOutgoing();
+			if (status === 'accepted') onaccepted?.(updated);
+			else ondeclined?.(updated);
+		});
+		if (!responded.ok) onerror?.(responded.cause);
+		actingOnId = null;
+	}
+
+	async function cancelOutgoing(requestId: string) {
+		if (readOnly) return;
+		actingOnId = requestId;
+		const cancelled = await settle(async () => {
+			const client = await accountClient();
+			const updated = await client.respondToFriendRequest(requestId, 'declined');
+			outgoing = outgoing.filter((request) => request.id !== requestId);
+			oncancelled?.(updated);
+		});
+		if (!cancelled.ok) onerror?.(cancelled.cause);
+		actingOnId = null;
+	}
+
+	async function searchPeople() {
+		const query = searchQuery.trim();
+		if (!query) {
+			searchResults = [];
+			return;
+		}
+		isSearching = true;
+		sendError = null;
+		const searched = await settle(async () => {
+			if (readOnly) {
+				// Local catalog only: never hit live discover in demo sandboxes.
+				return filterSocialUsersByQuery(demoPeople, query).slice(0, 8);
+			}
+			const client = await accountClient();
+			const hits = await client.discoverUsers({ query, limit: 8 });
+			return hits.map((hit) => hit.user);
+		});
+		if (searched.ok) {
+			searchResults = searched.value;
+		} else {
+			void logOn(runtimeStore, 'warn', 'account.community-invitations', 'CommunityInvitationsPanel: search load failed', { failure: failureLabel(searched.cause) });
+			searchResults = [];
+		}
+		isSearching = false;
+	}
+
+	function handleSearchInput(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		searchQuery = event.currentTarget.value;
+		if (readOnly && demoPeople.length === 0) {
+			searchResults = [];
+			return;
+		}
+		if (debounceTimer) clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => void searchPeople(), 300);
+	}
+
+	function selectSendTarget(user: AccountSocialUser) {
+		if (readOnly) return;
+		sendTargetId = user.id;
+		searchQuery = socialUserDisplayName(user);
+		searchResults = [];
+		sendError = null;
+	}
+
+	async function sendInvitation() {
+		if (readOnly || !sendTargetId || sendInFlight) return;
+		sendInFlight = true;
+		sendError = null;
+		const targetId = sendTargetId;
+		const sent = await settle(async () => {
+			const client = await accountClient();
+			const request = await client.sendFriendRequest(targetId);
+			sendTargetId = null;
+			searchQuery = '';
+			activeTab = 'sent';
+			await loadOutgoing();
+			oninvitesent?.(request);
+		});
+		if (!sent.ok) {
+			sendError = failureMessage(sent.cause, 'Failed to send invitation');
+			onerror?.(sent.cause);
+		}
+		sendInFlight = false;
+	}
+
+	onMount(() => void loadAll());
+
+	$effect(() => {
+		return () => {
+			if (debounceTimer) clearTimeout(debounceTimer);
+		};
+	});
+</script>
+
+<section class="mb-6 rounded-lg border bg-muted/20 p-4" aria-labelledby="send-invitation-heading">
+	<h2 id="send-invitation-heading" class="mb-3 text-sm font-semibold">Send invitation</h2>
+	{#if readOnly}
+		<p class="text-muted-foreground mb-3 text-sm" role="status" data-demo-readonly="true">
+			Demo invitations are read-only. Sign in to search people and send real friend requests.
+		</p>
+	{/if}
+	<div class="relative mb-2 flex items-center gap-2">
+		<Icon icon="lucide:search" class="text-muted-foreground size-4" />
+		<Input
+			bind:value={searchQuery}
+			oninput={handleSearchInput}
+			placeholder={readOnly
+				? demoPeople.length > 0
+					? 'Browse demo people (read-only)...'
+					: 'Search disabled in demo mode'
+				: 'Search people by name...'}
+			type="search"
+			aria-label="Search people to invite"
+			disabled={readOnly && demoPeople.length === 0}
+			class="flex-1"
+		/>
+	</div>
+	{#if isSearching}
+		<p class="text-muted-foreground mb-2 text-xs">Searching...</p>
+	{:else if searchResults.length > 0}
+		<ul class="mb-3 flex flex-col gap-1">
+			{#each searchResults as user (user.id)}
+				<li>
+					{#if readOnly}
+						<div
+							class="text-muted-foreground w-full rounded-md border px-3 py-2 text-left text-sm"
+							data-demo-person={user.id}
+						>
+							{socialUserDisplayName(user)}
+							<span class="ml-2 text-xs">(demo - read-only)</span>
+						</div>
+					{:else}
+						<button
+							type="button"
+							class="hover:bg-accent w-full rounded-md border px-3 py-2 text-left text-sm"
+							onclick={() => selectSendTarget(user)}
+						>
+							{socialUserDisplayName(user)}
+						</button>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	{:else if readOnly && searchQuery.trim() && !isSearching}
+		<p class="text-muted-foreground mb-2 text-xs" role="status">
+			No demo people match "{searchQuery.trim()}".
+		</p>
+	{/if}
+	<div class="flex flex-wrap gap-2">
+		<Button
+			disabled={readOnly || !sendTargetId || sendInFlight}
+			onclick={() => void sendInvitation()}
+			title={readOnly ? 'Demo invitations are read-only' : undefined}
+		>
+			{#if sendInFlight}
+				<Icon icon="lucide:loader-circle" class="size-3.5 animate-spin" />
+			{:else}
+				<Icon icon="lucide:user-plus" class="size-3.5" />
+			{/if}
+			Send invitation
+		</Button>
+		{#if sendTargetId && !readOnly}
+			<Button
+				variant="outline"
+				onclick={() => {
+					sendTargetId = null;
+					searchQuery = '';
+				}}
+			>
+				Clear
+			</Button>
+		{/if}
+	</div>
+	{#if sendError}
+		<p class="text-destructive mt-2 text-sm" role="alert">{sendError}</p>
+	{/if}
+</section>
+
+<Tabs bind:value={activeTab}>
+	<TabsList>
+		<TabsTrigger value="incoming">
+			Incoming
+			{#if incoming.length > 0}
+				<Badge variant="secondary" class="ml-1">{incoming.length}</Badge>
+			{/if}
+		</TabsTrigger>
+		<TabsTrigger value="sent">
+			Sent
+			{#if outgoing.length > 0}
+				<Badge variant="secondary" class="ml-1">{outgoing.length}</Badge>
+			{/if}
+		</TabsTrigger>
+	</TabsList>
+
+	<TabsContent value="incoming">
+		{#if isLoadingIncoming}
+			<div class="flex flex-col gap-2">
+				{#each Array(3) as _, index (index)}
+					<div class="bg-muted/40 h-16 animate-pulse rounded-lg"></div>
+				{/each}
+			</div>
+		{:else if incoming.length === 0}
+			<EmptyState
+				title="No incoming friend requests"
+				description={readOnly
+					? 'Demo mode has no live friend requests. Sign in to receive real invitations.'
+					: 'When someone invites you, their request will show up here.'}
+				actionText="Discover people"
+				actionHref={discoverHref}
+				icon="lucide:inbox"
+			/>
+		{:else}
+			<ul class="flex flex-col gap-2">
+				{#each incoming as request (request.id)}
+					<li class="flex items-center gap-3 rounded-lg border px-4 py-3">
+						<a
+							href={request.requester ? profilePath(request.requester) : '#'}
+							class="bg-primary text-primary-foreground flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full text-xs font-semibold"
+						>
+							{#if request.requester?.image}
+								<img
+									src={request.requester.image}
+									alt={socialUserDisplayName(request.requester)}
+									class="size-full object-cover"
+								/>
+							{:else}
+								<span>{socialUserInitials(request.requester)}</span>
+							{/if}
+						</a>
+						<div class="min-w-0 flex-1">
+							<div class="text-sm font-medium">{socialUserDisplayName(request.requester)}</div>
+							<div class="text-muted-foreground text-xs">
+								{new Date(request.createdAt).toLocaleDateString()} · Pending
+							</div>
+						</div>
+						<div class="flex shrink-0 items-center gap-2">
+							{#if readOnly}
+								<span class="text-muted-foreground text-xs">Read-only</span>
+							{:else if actingOnId === request.id}
+								<Icon icon="lucide:loader-circle" class="size-4 animate-spin" aria-label="Processing..." />
+							{:else}
+								<Button size="sm" onclick={() => respondToIncoming(request.id, 'accepted')}>
+									<Icon icon="lucide:check" class="size-3.5" />
+									Accept
+								</Button>
+								<Button
+									size="sm"
+									variant="outline"
+									onclick={() => respondToIncoming(request.id, 'declined')}
+								>
+									<Icon icon="lucide:x" class="size-3.5" />
+									Decline
+								</Button>
+							{/if}
+						</div>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</TabsContent>
+
+	<TabsContent value="sent">
+		{#if isLoadingOutgoing}
+			<div class="flex flex-col gap-2">
+				{#each Array(3) as _, index (index)}
+					<div class="bg-muted/40 h-16 animate-pulse rounded-lg"></div>
+				{/each}
+			</div>
+		{:else if outgoing.length === 0}
+			<EmptyState
+				title="No sent invitations yet"
+				description={readOnly
+					? 'Demo mode does not send invitations. Sign in to invite people for real.'
+					: 'Use the form above to invite someone from Discover.'}
+				icon="lucide:send"
+			/>
+		{:else}
+			<ul class="flex flex-col gap-2">
+				{#each outgoing as request (request.id)}
+					<li class="flex items-center gap-3 rounded-lg border px-4 py-3">
+						<a
+							href={request.addressee ? profilePath(request.addressee) : '#'}
+							class="bg-primary text-primary-foreground flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full text-xs font-semibold"
+						>
+							{#if request.addressee?.image}
+								<img
+									src={request.addressee.image}
+									alt={socialUserDisplayName(request.addressee)}
+									class="size-full object-cover"
+								/>
+							{:else}
+								<span>{socialUserInitials(request.addressee)}</span>
+							{/if}
+						</a>
+						<div class="min-w-0 flex-1">
+							<div class="text-sm font-medium">{socialUserDisplayName(request.addressee)}</div>
+							<div class="text-muted-foreground text-xs">
+								Sent {new Date(request.createdAt).toLocaleDateString()} · Pending
+							</div>
+						</div>
+						<div class="flex shrink-0 items-center gap-2">
+							{#if readOnly}
+								<span class="text-muted-foreground text-xs">Read-only</span>
+							{:else if actingOnId === request.id}
+								<Icon icon="lucide:loader-circle" class="size-4 animate-spin" aria-label="Processing..." />
+							{:else}
+								<Button
+									size="sm"
+									variant="outline"
+									onclick={() => cancelOutgoing(request.id)}
+								>
+									<Icon icon="lucide:ban" class="size-3.5" />
+									Cancel
+								</Button>
+							{/if}
+						</div>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</TabsContent>
+</Tabs>

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

@@ -0,0 +1,18 @@
+import { type CaughtFailure } from '@vibesdotdev/kernel';
+import type { AccountIncomingFriendRequest, AccountOutgoingFriendRequest, AccountSocialUser } from '@vibesdotdev/account/api';
+type $$ComponentProps = {
+    profilePath?: (user: AccountSocialUser) => string;
+    discoverHref?: string;
+    readOnly?: boolean;
+    demoPeople?: AccountSocialUser[];
+    oninvitesent?: (request: AccountOutgoingFriendRequest) => void;
+    onaccepted?: (request: AccountIncomingFriendRequest | AccountOutgoingFriendRequest) => void;
+    ondeclined?: (request: AccountIncomingFriendRequest | AccountOutgoingFriendRequest) => void;
+    oncancelled?: (request: AccountIncomingFriendRequest | AccountOutgoingFriendRequest) => void;
+    /** Receives the failure: the `Error` itself, or a wrapper holding the non-Error value that was thrown. */
+    onerror?: (failure: CaughtFailure) => void;
+};
+declare const CommunityInvitationsPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type CommunityInvitationsPanel = ReturnType<typeof CommunityInvitationsPanel>;
+export default CommunityInvitationsPanel;
+//# sourceMappingURL=CommunityInvitationsPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommunityInvitationsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/CommunityInvitationsPanel.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKjE,OAAO,KAAK,EAEV,4BAA4B,EAC5B,4BAA4B,EAC5B,iBAAiB,EACjB,MAAM,0BAA0B,CAAC;AAWlC,KAAK,gBAAgB,GAAI;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,MAAM,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,4BAA4B,KAAK,IAAI,CAAC;IAC/D,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,4BAA4B,GAAG,4BAA4B,KAAK,IAAI,CAAC;IAC5F,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,4BAA4B,GAAG,4BAA4B,KAAK,IAAI,CAAC;IAC5F,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,4BAA4B,GAAG,4BAA4B,KAAK,IAAI,CAAC;IAC7F,0GAA0G;IAC1G,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C,CAAC;AAkXH,QAAA,MAAM,yBAAyB,sDAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/svelte/components/CreditPurchase.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import {
+		Card,
+		CardContent,
+		Icon,
+		Label,
+		RadioGroup,
+		RadioGroupItem
+	} from '@vibesdotdev/kit/components';
+	import type { ProductDefinition } from '@vibesdotdev/account/billing/definitions/products';
+	import type { CreditPurchaseProps } from '../billing/schemas.js';
+	import { getBillingTierVisual } from '../billing/tier-visuals.js';
+
+	let {
+		products = [],
+		selected = $bindable(''),
+		onSelect,
+		class: className = ''
+	}: CreditPurchaseProps = $props();
+
+	function handleValueChange(value: string) {
+		selected = value;
+		onSelect?.(value);
+	}
+
+	function formatPrice(cents: number): string {
+		return `$${(cents / 100).toFixed(2)}`;
+	}
+
+	function formatCredits(amount: number | undefined): string {
+		if (!amount) return '0';
+		return amount.toLocaleString();
+	}
+
+	function valueLabel(product: ProductDefinition): string | null {
+		if (!product?.creditAmount || !product.priceCents) return null;
+		const creditsPerDollar = Math.round(product.creditAmount / (product.priceCents / 100));
+		return `${creditsPerDollar.toLocaleString()} / dollar`;
+	}
+</script>
+
+<div class={className} data-testid="credit-purchase">
+	<RadioGroup value={selected} onValueChange={handleValueChange} class="grid gap-2.5">
+		{#each products as product (product.slug)}
+			{@const isSelected = selected === product.slug}
+			{@const visual = getBillingTierVisual(product.slug)}
+			<Label class="block cursor-pointer">
+				<Card
+					class={`min-h-[92px] overflow-hidden rounded-lg border py-0 transition-all ${visual.surface} ${isSelected ? `${visual.selectedSurface} ring-2 ${visual.ring}` : ''}`}
+				>
+					<CardContent class="flex min-h-[92px] items-center gap-3 p-3">
+						<RadioGroupItem value={product.slug} class="shrink-0" />
+						<div
+							class={`flex size-10 shrink-0 items-center justify-center rounded-full border ${visual.bubble}`}
+						>
+							<Icon icon={visual.icon} class="size-4" />
+						</div>
+						<div class="min-w-0 flex-1">
+							<div class="flex flex-wrap items-center gap-2">
+								<p class="text-sm font-semibold leading-tight">{product.name}</p>
+								{#if visual.badgeLabel}
+									<span
+										class={`rounded-full border px-2 py-0.5 text-[10px] font-medium leading-none ${visual.badge}`}
+									>
+										{visual.badgeLabel}
+									</span>
+								{/if}
+							</div>
+							{#if product.creditAmount}
+								<p class="text-muted-foreground text-xs">
+									{formatCredits(product.creditAmount)} credits
+								</p>
+							{/if}
+							{#if valueLabel(product)}
+								<p class="text-muted-foreground/80 text-[11px]">{valueLabel(product)}</p>
+							{/if}
+						</div>
+						<div class="w-[88px] shrink-0 text-right">
+							<p class={`text-sm font-bold tabular-nums ${visual.price}`}>
+								{formatPrice(product.priceCents)}
+							</p>
+							<p class="text-muted-foreground text-[11px]">one-time</p>
+						</div>
+					</CardContent>
+				</Card>
+			</Label>
+		{/each}
+	</RadioGroup>
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CreditPurchase.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/CreditPurchase.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAkFjE,QAAA,MAAM,cAAc,iEAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/CreditsDialog.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import {
+		Button,
+		Dialog,
+		DialogContent,
+		DialogDescription,
+		DialogFooter,
+		DialogHeader,
+		DialogTitle
+	} from '@vibesdotdev/kit/components';
+	import type { CreditsDialogProps } from '../billing/schemas.js';
+	import { browserWindow } from '../browser.js';
+
+	let {
+		open = $bindable(false),
+		feature = null,
+		title = 'Buy Credits',
+		description = null,
+		accountOrigin = null,
+		creditsPath = '/billing?tab=credits',
+		billingPath = '/billing',
+		creditsLabel = 'Buy Credits',
+		billingLabel = 'Manage Billing',
+		onClose = () => {}
+	}: CreditsDialogProps = $props();
+
+	function resolveAccountUrl(path: string): string {
+		const origin = accountOrigin?.replace(/\/$/, '') || (browserWindow()?.location.origin ?? '');
+		return origin ? new URL(path, origin).toString() : path;
+	}
+
+	function handleOpenChange(isOpen: boolean): void {
+		if (!isOpen) onClose();
+	}
+</script>
+
+<Dialog bind:open onOpenChange={handleOpenChange}>
+	<DialogContent class="sm:max-w-md" data-testid="credits-dialog">
+		<DialogHeader>
+			<DialogTitle>{title}</DialogTitle>
+			<DialogDescription>
+				{#if description}{description}{:else if feature}You need more credits to continue: <strong>{feature}</strong>.{:else}You need more credits to continue.{/if}
+			</DialogDescription>
+		</DialogHeader>
+		<DialogFooter class="flex-col gap-2 sm:flex-row sm:justify-start">
+			<Button href={resolveAccountUrl(creditsPath)} class="w-full sm:w-auto">{creditsLabel}</Button>
+			<Button href={resolveAccountUrl(billingPath)} variant="outline" class="w-full sm:w-auto">{billingLabel}</Button>
+			<Button variant="ghost" class="ml-auto w-full sm:w-auto" onclick={() => (open = false)}>Close</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CreditsDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/CreditsDialog.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAiDhE,QAAA,MAAM,aAAa,4DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}