yaxa-svelte 1.0.0

package/dist/components/saas/PricingCard.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import Card from '../layout/Card.svelte';
+	import Button from '../elements/Button.svelte';
+	import Badge from '../elements/Badge.svelte';
+	import Icon from '../elements/Icon.svelte';
+	import type { PricingFeature } from '../../server/db/types';
+
+	interface Props {
+		name: string;
+		description: string;
+		price: number;
+		interval?: 'month' | 'year';
+		yearlyDiscount?: number;
+		features: (string | PricingFeature)[];
+		productId?: string;
+		popular?: boolean;
+		badge?: string;
+		buttonText?: string;
+		loading?: boolean;
+		class?: string;
+		oncheckout?: (productId?: string) => void | Promise<void>;
+	}
+
+	let {
+		name,
+		description,
+		price,
+		interval = 'month',
+		yearlyDiscount = 0,
+		features = [],
+		productId,
+		popular = false,
+		badge,
+		buttonText,
+		loading = false,
+		class: className = '',
+		oncheckout
+	}: Props = $props();
+
+	let isSubmitting = $state(false);
+
+	async function handleCheckout() {
+		if (oncheckout) {
+			isSubmitting = true;
+			try {
+				await oncheckout(productId);
+			} finally {
+				isSubmitting = false;
+			}
+			return;
+		}
+
+		if (!productId) return;
+
+		isSubmitting = true;
+		try {
+			const res = await fetch('/api/checkout', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ productId })
+			});
+			const data = await res.json();
+			if (data.url && typeof window !== 'undefined') {
+				window.location.href = data.url;
+			}
+		} catch (err) {
+			console.error('Checkout error:', err);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+</script>
+
+<Card
+	class="relative flex flex-col justify-between p-6 transition-all duration-200 sm:p-8 {popular
+		? 'border-2 border-primary-500 shadow-xl ring-1 ring-primary-500/20 dark:border-primary-500'
+		: 'border-zinc-200 shadow-md dark:border-zinc-800'} {className}"
+>
+	<!-- Popular Banner / Badge -->
+	{#if popular || badge}
+		<div class="absolute -top-3 left-1/2 -translate-x-1/2">
+			<Badge
+				color="primary"
+				variant="solid"
+				size="sm"
+				class="font-semibold tracking-wider uppercase shadow-sm"
+			>
+				{badge || 'Most Popular'}
+			</Badge>
+		</div>
+	{/if}
+
+	<div class="space-y-6">
+		<!-- Tier Title & Description -->
+		<div class="space-y-2">
+			<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100">{name}</h3>
+			<p class="min-h-[40px] text-sm leading-relaxed text-zinc-500 dark:text-zinc-400">
+				{description}
+			</p>
+		</div>
+
+		<!-- Price -->
+		<div class="flex items-baseline gap-1">
+			<span class="text-4xl font-extrabold tracking-tight text-zinc-900 dark:text-zinc-50">
+				${price}
+			</span>
+			<span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">
+				/{interval === 'year' ? 'yr' : 'mo'}
+			</span>
+			{#if interval === 'year' && yearlyDiscount > 0}
+				<Badge color="success" variant="subtle" size="xs" class="ml-2">
+					Save {yearlyDiscount}%
+				</Badge>
+			{/if}
+		</div>
+
+		<hr class="border-zinc-200 dark:border-zinc-800" />
+
+		<!-- Features List -->
+		<div class="space-y-3">
+			<span class="text-xs font-semibold tracking-wider text-zinc-400 uppercase dark:text-zinc-500">
+				Included features:
+			</span>
+			<ul class="space-y-2.5 text-sm">
+				{#each features as feat}
+					{@const isObj = typeof feat === 'object'}
+					{@const featName = isObj ? feat.name : feat}
+					{@const included = isObj ? feat.included !== false : true}
+					<li
+						class="flex items-center gap-2.5 {included
+							? 'text-zinc-700 dark:text-zinc-200'
+							: 'text-zinc-400 line-through dark:text-zinc-600'}"
+					>
+						{#if included}
+							<div
+								class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary-50 text-primary-600 dark:bg-primary-950/40 dark:text-primary-400"
+							>
+								<Icon name="check" class="h-3.5 w-3.5" />
+							</div>
+						{:else}
+							<div
+								class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 dark:bg-zinc-800 dark:text-zinc-600"
+							>
+								<Icon name="close" class="h-3.5 w-3.5" />
+							</div>
+						{/if}
+						<span>{featName}</span>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</div>
+
+	<!-- CTA Button -->
+	<div class="pt-8">
+		<Button
+			variant={popular ? 'solid' : 'outline'}
+			color={popular ? 'primary' : 'neutral'}
+			class="w-full justify-center py-2.5 font-semibold shadow-xs"
+			loading={loading || isSubmitting}
+			onclick={handleCheckout}
+		>
+			{buttonText || (price === 0 ? 'Get Started Free' : 'Upgrade Plan')}
+		</Button>
+	</div>
+</Card>

package/dist/components/saas/PricingCard.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { PricingFeature } from '../../server/db/types';
+interface Props {
+    name: string;
+    description: string;
+    price: number;
+    interval?: 'month' | 'year';
+    yearlyDiscount?: number;
+    features: (string | PricingFeature)[];
+    productId?: string;
+    popular?: boolean;
+    badge?: string;
+    buttonText?: string;
+    loading?: boolean;
+    class?: string;
+    oncheckout?: (productId?: string) => void | Promise<void>;
+}
+declare const PricingCard: import("svelte").Component<Props, {}, "">;
+type PricingCard = ReturnType<typeof PricingCard>;
+export default PricingCard;

package/dist/components/saas/PricingTable.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import PricingCard from './PricingCard.svelte';
+	import Badge from '../elements/Badge.svelte';
+	import type { PricingTier } from '../../server/db/types';
+
+	interface Props {
+		tiers?: PricingTier[];
+		yearlyDiscount?: number;
+		defaultInterval?: 'month' | 'year';
+		class?: string;
+		oncheckout?: (tier: PricingTier, interval: 'month' | 'year') => void | Promise<void>;
+	}
+
+	const DEFAULT_TIERS: PricingTier[] = [
+		{
+			id: 'free',
+			name: 'Hobby',
+			description: 'Perfect for side projects and evaluating Yaxa.',
+			priceMonthly: 0,
+			priceYearly: 0,
+			popular: false,
+			buttonText: 'Get Started',
+			features: [
+				'Up to 3 projects',
+				'Community support',
+				'Basic analytics',
+				{ name: 'Custom domains', included: false },
+				{ name: 'Priority support', included: false }
+			]
+		},
+		{
+			id: 'pro',
+			name: 'Pro Solo',
+			description: 'Everything a solo indie hacker needs to launch & scale.',
+			priceMonthly: 29,
+			priceYearly: 24,
+			popular: true,
+			badge: 'Recommended',
+			buttonText: 'Start 14-Day Free Trial',
+			features: [
+				'Unlimited projects',
+				'Custom domains & SSL',
+				'Automated SEO suite',
+				'Polar.sh automated billing',
+				'Better-Auth multi-tenant',
+				'Email & Discord support'
+			]
+		},
+		{
+			id: 'team',
+			name: 'Agency & Scale',
+			description: 'Collaborate with unlimited team members and clients.',
+			priceMonthly: 79,
+			priceYearly: 65,
+			popular: false,
+			buttonText: 'Subscribe to Scale',
+			features: [
+				'Everything in Pro Solo',
+				'Unlimited team members',
+				'Multi-workspace switching',
+				'Dedicated database replica',
+				'99.9% uptime SLA',
+				'1-on-1 architecture call'
+			]
+		}
+	];
+
+	let {
+		tiers = DEFAULT_TIERS,
+		yearlyDiscount = 20,
+		defaultInterval = 'month',
+		class: className = '',
+		oncheckout
+	}: Props = $props();
+
+	let customInterval = $state<'month' | 'year' | null>(null);
+	let interval = $derived(customInterval ?? defaultInterval);
+</script>
+
+<div class="space-y-10 {className}">
+	<!-- Billing Cycle Toggle -->
+	<div class="flex flex-col items-center justify-center gap-3 text-center">
+		<div
+			class="inline-flex items-center rounded-full border border-zinc-200 bg-zinc-100 p-1 dark:border-zinc-700 dark:bg-zinc-800/80"
+		>
+			<button
+				type="button"
+				class="rounded-full px-4 py-1.5 text-xs font-semibold transition-all {interval === 'month'
+					? 'bg-white text-zinc-900 shadow-xs dark:bg-zinc-900 dark:text-zinc-50'
+					: 'text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200'}"
+				onclick={() => {
+					customInterval = 'month';
+				}}
+			>
+				Monthly billing
+			</button>
+			<button
+				type="button"
+				class="flex items-center gap-1.5 rounded-full px-4 py-1.5 text-xs font-semibold transition-all {interval ===
+				'year'
+					? 'bg-white text-zinc-900 shadow-xs dark:bg-zinc-900 dark:text-zinc-50'
+					: 'text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200'}"
+				onclick={() => {
+					customInterval = 'year';
+				}}
+			>
+				<span>Annual billing</span>
+				{#if yearlyDiscount > 0}
+					<Badge color="success" variant="solid" size="xs" class="px-1.5 py-0.5 text-[10px]">
+						-{yearlyDiscount}%
+					</Badge>
+				{/if}
+			</button>
+		</div>
+	</div>
+
+	<!-- Pricing Grid -->
+	<div class="grid grid-cols-1 items-stretch gap-8 md:grid-cols-2 lg:grid-cols-3">
+		{#each tiers as tier}
+			{@const currentPrice = interval === 'year' ? tier.priceYearly : tier.priceMonthly}
+			{@const currentProductId = interval === 'year' ? tier.productIdYearly : tier.productIdMonthly}
+			<PricingCard
+				name={tier.name}
+				description={tier.description}
+				price={currentPrice}
+				{interval}
+				{yearlyDiscount}
+				features={tier.features}
+				popular={tier.popular}
+				badge={tier.badge}
+				buttonText={tier.buttonText}
+				productId={currentProductId}
+				oncheckout={() => {
+					if (oncheckout) return oncheckout(tier, interval);
+				}}
+			/>
+		{/each}
+	</div>
+</div>

package/dist/components/saas/PricingTable.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { PricingTier } from '../../server/db/types';
+interface Props {
+    tiers?: PricingTier[];
+    yearlyDiscount?: number;
+    defaultInterval?: 'month' | 'year';
+    class?: string;
+    oncheckout?: (tier: PricingTier, interval: 'month' | 'year') => void | Promise<void>;
+}
+declare const PricingTable: import("svelte").Component<Props, {}, "">;
+type PricingTable = ReturnType<typeof PricingTable>;
+export default PricingTable;

package/dist/components/saas/SubscriptionCard.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	import Card from '../layout/Card.svelte';
+	import Badge from '../elements/Badge.svelte';
+	import Button from '../elements/Button.svelte';
+	import Icon from '../elements/Icon.svelte';
+	import type { SubscriptionStatus } from '../../server/db/types';
+
+	interface Props {
+		tierName?: string;
+		status?: SubscriptionStatus;
+		interval?: 'month' | 'year';
+		amount?: number;
+		currentPeriodEnd?: Date | string | null;
+		cancelAtPeriodEnd?: boolean;
+		customerId?: string;
+		class?: string;
+		onmanage?: () => void | Promise<void>;
+		onupgrade?: () => void;
+	}
+
+	let {
+		tierName = 'Pro Plan',
+		status = 'active',
+		interval = 'month',
+		amount = 29,
+		currentPeriodEnd = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
+		cancelAtPeriodEnd = false,
+		customerId,
+		class: className = '',
+		onmanage,
+		onupgrade
+	}: Props = $props();
+
+	let isOpeningPortal = $state(false);
+
+	const formattedDate = $derived.by(() => {
+		if (!currentPeriodEnd) return null;
+		const d = typeof currentPeriodEnd === 'string' ? new Date(currentPeriodEnd) : currentPeriodEnd;
+		return d.toLocaleDateString(undefined, {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric'
+		});
+	});
+
+	const statusColor = $derived.by(() => {
+		switch (status) {
+			case 'active':
+				return 'success';
+			case 'trialing':
+				return 'info';
+			case 'past_due':
+			case 'unpaid':
+				return 'warning';
+			case 'canceled':
+			default:
+				return 'neutral';
+		}
+	});
+
+	async function handleManageBilling() {
+		if (onmanage) {
+			isOpeningPortal = true;
+			try {
+				await onmanage();
+			} finally {
+				isOpeningPortal = false;
+			}
+			return;
+		}
+
+		if (!customerId) return;
+
+		isOpeningPortal = true;
+		try {
+			const res = await fetch('/api/billing/portal', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ customerId })
+			});
+			const data = await res.json();
+			if (data.url && typeof window !== 'undefined') {
+				window.location.href = data.url;
+			}
+		} catch (err) {
+			console.error('Portal error:', err);
+		} finally {
+			isOpeningPortal = false;
+		}
+	}
+</script>
+
+<Card class="space-y-6 border-zinc-200 p-6 shadow-md sm:p-7 dark:border-zinc-800 {className}">
+	<div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
+		<div class="space-y-1">
+			<div class="flex items-center gap-3">
+				<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100">{tierName}</h3>
+				<Badge color={statusColor} variant="subtle" size="sm" class="font-semibold uppercase">
+					{status}
+				</Badge>
+			</div>
+			<p class="text-sm text-zinc-500 dark:text-zinc-400">
+				${amount}/{interval === 'year' ? 'yr' : 'mo'} · Billed {interval === 'year'
+					? 'annually'
+					: 'monthly'}
+			</p>
+		</div>
+
+		<div class="flex items-center gap-2">
+			{#if onupgrade}
+				<Button variant="outline" size="sm" onclick={onupgrade}>Change Plan</Button>
+			{/if}
+			<Button
+				variant="solid"
+				color="primary"
+				size="sm"
+				class="gap-1.5 font-medium"
+				loading={isOpeningPortal}
+				onclick={handleManageBilling}
+			>
+				<Icon name="credit-card" class="h-3.5 w-3.5" />
+				<span>Manage Subscription</span>
+			</Button>
+		</div>
+	</div>
+
+	<hr class="border-zinc-200 dark:border-zinc-800" />
+
+	<div class="grid grid-cols-1 gap-4 text-xs sm:grid-cols-3">
+		<div class="space-y-1">
+			<span class="font-medium text-zinc-400 dark:text-zinc-500">Renewal Date</span>
+			<p class="font-semibold text-zinc-800 dark:text-zinc-200">
+				{#if cancelAtPeriodEnd}
+					Expires on {formattedDate}
+				{:else if formattedDate}
+					Renews on {formattedDate}
+				{:else}
+					N/A
+				{/if}
+			</p>
+		</div>
+
+		<div class="space-y-1">
+			<span class="font-medium text-zinc-400 dark:text-zinc-500">Payment Provider</span>
+			<p class="flex items-center gap-1.5 font-semibold text-zinc-800 dark:text-zinc-200">
+				<span class="inline-block h-2 w-2 rounded-full bg-emerald-500"></span>
+				Polar.sh Merchant of Record
+			</p>
+		</div>
+
+		<div class="space-y-1">
+			<span class="font-medium text-zinc-400 dark:text-zinc-500">Auto-Renew</span>
+			<p
+				class="font-semibold {cancelAtPeriodEnd
+					? 'text-amber-600 dark:text-amber-400'
+					: 'text-emerald-600 dark:text-emerald-400'}"
+			>
+				{cancelAtPeriodEnd ? 'Disabled (Cancels at end of cycle)' : 'Active (Automatic renewal)'}
+			</p>
+		</div>
+	</div>
+</Card>

package/dist/components/saas/SubscriptionCard.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { SubscriptionStatus } from '../../server/db/types';
+interface Props {
+    tierName?: string;
+    status?: SubscriptionStatus;
+    interval?: 'month' | 'year';
+    amount?: number;
+    currentPeriodEnd?: Date | string | null;
+    cancelAtPeriodEnd?: boolean;
+    customerId?: string;
+    class?: string;
+    onmanage?: () => void | Promise<void>;
+    onupgrade?: () => void;
+}
+declare const SubscriptionCard: import("svelte").Component<Props, {}, "">;
+type SubscriptionCard = ReturnType<typeof SubscriptionCard>;
+export default SubscriptionCard;

package/dist/components/saas/UserMenu.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import Avatar from '../elements/Avatar.svelte';
+	import Badge from '../elements/Badge.svelte';
+	import Icon from '../elements/Icon.svelte';
+	import DropdownMenu, { type MenuItem } from '../navigation/DropdownMenu.svelte';
+	import { useAuth } from '../../composables/useAuth.svelte';
+
+	interface UserInfo {
+		name?: string | null;
+		email?: string | null;
+		image?: string | null;
+		role?: string | null;
+		tier?: string | null;
+	}
+
+	interface Props {
+		user?: UserInfo | null;
+		tier?: string;
+		dashboardUrl?: string;
+		settingsUrl?: string;
+		billingUrl?: string;
+		class?: string;
+		onsignout?: () => void;
+	}
+
+	let {
+		user: propUser,
+		tier = 'Free',
+		dashboardUrl = '/dashboard',
+		settingsUrl = '/settings',
+		billingUrl = '/billing',
+		class: className = '',
+		onsignout
+	}: Props = $props();
+
+	const auth = useAuth();
+
+	const currentUser = $derived(
+		propUser ||
+			auth.user || {
+				name: 'Solo Developer',
+				email: 'dev@yaxa.dev',
+				image: null,
+				tier
+			}
+	);
+
+	const initials = $derived.by(() => {
+		const name = currentUser?.name || currentUser?.email || 'U';
+		return name
+			.split(' ')
+			.map((n: string) => n[0])
+			.join('')
+			.toUpperCase()
+			.slice(0, 2);
+	});
+
+	const menuItems: MenuItem[] = $derived([
+		{
+			id: 'dashboard',
+			label: 'Dashboard',
+			icon: 'home',
+			onSelect: () => {
+				if (typeof window !== 'undefined') window.location.href = dashboardUrl;
+			}
+		},
+		{
+			id: 'settings',
+			label: 'Settings',
+			icon: 'settings',
+			onSelect: () => {
+				if (typeof window !== 'undefined') window.location.href = settingsUrl;
+			}
+		},
+		{
+			id: 'billing',
+			label: 'Billing & Plan',
+			icon: 'credit-card',
+			onSelect: () => {
+				if (typeof window !== 'undefined') window.location.href = billingUrl;
+			}
+		},
+		{
+			id: 'sep',
+			label: '',
+			separator: true
+		},
+		{
+			id: 'logout',
+			label: 'Sign Out',
+			icon: 'log-out',
+			destructive: true,
+			onSelect: async () => {
+				await auth.signOut();
+				if (onsignout) onsignout();
+				if (typeof window !== 'undefined') window.location.href = '/login';
+			}
+		}
+	]);
+</script>
+
+{#snippet customTrigger()}
+	<button
+		type="button"
+		class="group flex items-center gap-3 rounded-full p-1 transition-all hover:bg-zinc-100 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500 dark:hover:bg-zinc-800"
+		aria-label="User navigation menu"
+	>
+		<Avatar
+			src={currentUser?.image || undefined}
+			alt={currentUser?.name || 'User'}
+			fallback={initials}
+			size="sm"
+			class="border border-zinc-200 shadow-xs dark:border-zinc-700"
+		/>
+		<div class="hidden text-left sm:block">
+			<div class="flex items-center gap-2">
+				<span class="text-xs font-semibold text-zinc-900 dark:text-zinc-100">
+					{currentUser?.name || 'User'}
+				</span>
+				<Badge color="primary" variant="subtle" size="xs">
+					{tier.toUpperCase()}
+				</Badge>
+			</div>
+			<span class="block max-w-[140px] truncate text-[11px] text-zinc-500 dark:text-zinc-400">
+				{currentUser?.email || ''}
+			</span>
+		</div>
+		<Icon
+			name="chevron-down"
+			class="hidden h-3.5 w-3.5 text-zinc-400 transition-transform group-hover:text-zinc-600 sm:block dark:group-hover:text-zinc-200"
+		/>
+	</button>
+{/snippet}
+
+<div class="relative inline-flex items-center {className}">
+	<DropdownMenu items={menuItems} trigger={customTrigger} />
+</div>

package/dist/components/saas/UserMenu.svelte.d.ts

@@ -0,0 +1,19 @@
+interface UserInfo {
+    name?: string | null;
+    email?: string | null;
+    image?: string | null;
+    role?: string | null;
+    tier?: string | null;
+}
+interface Props {
+    user?: UserInfo | null;
+    tier?: string;
+    dashboardUrl?: string;
+    settingsUrl?: string;
+    billingUrl?: string;
+    class?: string;
+    onsignout?: () => void;
+}
+declare const UserMenu: import("svelte").Component<Props, {}, "">;
+type UserMenu = ReturnType<typeof UserMenu>;
+export default UserMenu;

package/dist/components/seo/Favicons.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { SiteConfig } from '../../site/config';
+	import { getSiteConfig } from '../../site/context';
+
+	interface Props {
+		config?: SiteConfig;
+		faviconSvg?: string;
+	}
+
+	let { config, faviconSvg = '/favicon.svg' }: Props = $props();
+
+	let currentConfig = $derived(config || getSiteConfig());
+</script>
+
+<svelte:head>
+	<link rel="icon" type="image/svg+xml" href={faviconSvg} />
+	<link rel="manifest" href="/site.webmanifest" />
+	<meta name="theme-color" content={currentConfig.theme?.primaryColor || '#ff3e00'} />
+	<meta name="apple-mobile-web-app-capable" content="yes" />
+	<meta name="apple-mobile-web-app-title" content={currentConfig.name} />
+	<meta name="apple-mobile-web-app-status-bar-style" content="default" />
+</svelte:head>