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

package/dist/lib/components/background/CanvasBackground.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">let { onDraw, onInit, onResize, onDestroy, trackMouse = false, onMouseMove, class: className = "", opacity = 1, highDPI = true, fps = 60 } = $props();
+let canvas;
+let ctx = null;
+let animationId = 0;
+let width = 0;
+let height = 0;
+let dpr = 1;
+let lastFrameTime = 0;
+let isVisible = true;
+let isAnimating = false;
+function resizeCanvas() {
+	if (!canvas || !ctx) return;
+	const rect = canvas.getBoundingClientRect();
+	width = rect.width;
+	height = rect.height;
+	dpr = highDPI ? Math.min(window.devicePixelRatio || 1, 2) : 1;
+	canvas.width = width * dpr;
+	canvas.height = height * dpr;
+	ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+	onResize?.(ctx, width, height);
+}
+function handleMouseMove(event) {
+	if (!trackMouse || !canvas) return;
+	const rect = canvas.getBoundingClientRect();
+	const x = event.clientX - rect.left;
+	const y = event.clientY - rect.top;
+	const normalizedX = width ? x / width * 2 - 1 : 0;
+	const normalizedY = height ? y / height * 2 - 1 : 0;
+	onMouseMove?.(x, y, normalizedX, normalizedY);
+}
+function animate(time) {
+	if (!isAnimating) return;
+	animationId = requestAnimationFrame(animate);
+	if (!ctx || !isVisible) return;
+	const frameInterval = fps > 0 ? 1e3 / fps : 0;
+	const elapsed = time - lastFrameTime;
+	if (frameInterval > 0 && elapsed < frameInterval) return;
+	lastFrameTime = frameInterval > 0 ? time - elapsed % frameInterval : time;
+	ctx.clearRect(0, 0, width, height);
+	onDraw?.(ctx, width, height, time);
+}
+function startAnimation() {
+	if (isAnimating) return;
+	isAnimating = true;
+	animationId = requestAnimationFrame(animate);
+}
+function stopAnimation() {
+	isAnimating = false;
+	cancelAnimationFrame(animationId);
+	animationId = 0;
+}
+$effect(() => {
+	ctx = canvas.getContext("2d");
+	if (!ctx) return;
+	resizeCanvas();
+	onInit?.(ctx, width, height);
+	const observer = new IntersectionObserver(([entry]) => {
+		isVisible = entry?.isIntersecting ?? true;
+		if (isVisible) {
+			startAnimation();
+			return;
+		}
+		stopAnimation();
+	});
+	observer.observe(canvas);
+	window.addEventListener("resize", resizeCanvas);
+	if (trackMouse) {
+		window.addEventListener("mousemove", handleMouseMove);
+	}
+	startAnimation();
+	return () => {
+		stopAnimation();
+		observer.disconnect();
+		window.removeEventListener("resize", resizeCanvas);
+		if (trackMouse) {
+			window.removeEventListener("mousemove", handleMouseMove);
+		}
+		onDestroy?.();
+	};
+});
+</script>
+
+<canvas
+	bind:this={canvas}
+	class={`canvas-background absolute inset-0 h-full w-full ${className}`}
+	style:opacity
+></canvas>
+
+<style>
+	@reference "../../styles.css";
+
+	.canvas-background {
+		pointer-events: none;
+	}
+</style>

package/dist/lib/components/background/CanvasBackground.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    onDraw?: (ctx: CanvasRenderingContext2D, width: number, height: number, time: number) => void;
+    onInit?: (ctx: CanvasRenderingContext2D, width: number, height: number) => void;
+    onResize?: (ctx: CanvasRenderingContext2D, width: number, height: number) => void;
+    onDestroy?: () => void;
+    trackMouse?: boolean;
+    onMouseMove?: (x: number, y: number, normalizedX: number, normalizedY: number) => void;
+    class?: string;
+    opacity?: number;
+    highDPI?: boolean;
+    fps?: number;
+}
+declare const CanvasBackground: import("svelte").Component<Props, {}, "">;
+type CanvasBackground = ReturnType<typeof CanvasBackground>;
+export default CanvasBackground;

package/dist/lib/components/background/index.d.ts

@@ -0,0 +1 @@
+export { default as CanvasBackground } from './CanvasBackground.svelte';

package/dist/lib/components/background/index.js

@@ -0,0 +1 @@
+export { default as CanvasBackground } from './CanvasBackground.svelte';

package/dist/lib/components/banner/Banner.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">import { cn } from "../../utils.js";
+import { Icon } from "../icon/index.js";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert/index.js";
+import { Button } from "../ui/button/index.js";
+let { class: className, title, description, variant = "default", icon, children, actions, onDismiss, dismissLabel = "Dismiss notification", role, ...restProps } = $props();
+const semanticRole = $derived(role ?? (variant === "destructive" ? "alert" : "status"));
+</script>
+
+<Alert
+	{...restProps}
+	{variant}
+	role={semanticRole}
+	class={cn(
+		'flex w-full items-start gap-3 rounded-none border-x-0 border-t-0 px-4 py-3 sm:items-center sm:px-6',
+		className
+	)}
+>
+	{#if icon}
+		<div data-slot="banner-icon" class="mt-0.5 shrink-0 text-current sm:mt-0">
+			{@render icon()}
+		</div>
+	{/if}
+
+	<div data-slot="banner-content" class="min-w-0 flex-1">
+		<AlertTitle class="line-clamp-none min-h-0">{title}</AlertTitle>
+		{#if description || children}
+			<AlertDescription class="mt-1">
+				{#if description}<p>{description}</p>{/if}
+				{@render children?.()}
+			</AlertDescription>
+		{/if}
+	</div>
+
+	{#if actions || onDismiss}
+		<div data-slot="banner-actions" class="flex shrink-0 items-center gap-2 self-center">
+			{@render actions?.()}
+			{#if onDismiss}
+				<Button
+					variant="ghost"
+					size="icon"
+					onclick={onDismiss}
+					aria-label={dismissLabel}
+					title={dismissLabel}
+				>
+					<Icon icon="lucide:x" class="size-4" />
+				</Button>
+			{/if}
+		</div>
+	{/if}
+</Alert>

package/dist/lib/components/banner/Banner.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AlertVariant } from '../ui/alert/index.js';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /** Short, visible summary of the announcement. */
+    title: string;
+    /** Optional plain-text detail. Use `children` for structured detail. */
+    description?: string;
+    /** Visual and announcement severity. */
+    variant?: AlertVariant;
+    /** Optional leading visual. Decorative icons should be hidden from assistive technology. */
+    icon?: Snippet;
+    /** Optional structured detail rendered below the title. */
+    children?: Snippet;
+    /** Optional action region. The caller owns navigation and side effects. */
+    actions?: Snippet;
+    /** When provided, renders a dismiss control and reports user intent to the caller. */
+    onDismiss?: () => void;
+    /** Accessible name for the dismiss control. */
+    dismissLabel?: string;
+}
+declare const Banner: import("svelte").Component<Props, {}, "">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/lib/components/base/animation-store.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Shared animation state for homepage canvas effects
+ * Lightweight version focused on mouse tracking and basic physics
+ */
+export declare const animationStore: {
+    readonly time: number;
+    readonly mouseX: number;
+    readonly mouseY: number;
+    readonly scrollY: number;
+    readonly scrollVelocity: number;
+    readonly innerWidth: number;
+    readonly innerHeight: number;
+    readonly energy: number;
+    init: () => void;
+    destroy: () => void;
+    getDisplacement: (x: number, y: number, depth?: number) => number;
+};

package/dist/lib/components/base/animation-store.svelte.js

@@ -0,0 +1,162 @@
+/**
+ * Shared animation state for homepage canvas effects
+ * Lightweight version focused on mouse tracking and basic physics
+ */
+import { BROWSER } from 'esm-env';
+// Spring physics constants
+const SPRING_STIFFNESS = 0.06;
+const SPRING_DAMPING = 0.85;
+function createAnimationStore() {
+    // Time tracking
+    let time = 0;
+    let animationId = null;
+    let initialized = false;
+    let reducedMotionQuery = null;
+    // Viewport
+    let innerWidth = BROWSER ? window.innerWidth : 1920;
+    let innerHeight = BROWSER ? window.innerHeight : 1080;
+    // Mouse tracking - raw target
+    let targetMouseX = 0.5;
+    let targetMouseY = 0.5;
+    // Spring physics mouse - smoothed
+    let springMouseX = 0.5;
+    let springMouseY = 0.5;
+    let springVelX = 0;
+    let springVelY = 0;
+    // Exposed mouse position
+    let mouseX = 0.5;
+    let mouseY = 0.5;
+    // Scroll tracking
+    let scrollY = 0;
+    let scrollVelocity = 0;
+    const _lastScrollY = 0;
+    // Energy system
+    let energy = 0;
+    const ENERGY_DECAY = 0.98;
+    function init() {
+        if (initialized || !BROWSER)
+            return;
+        initialized = true;
+        reducedMotionQuery = window.matchMedia?.('(prefers-reduced-motion: reduce)') ?? null;
+        innerWidth = window.innerWidth;
+        innerHeight = window.innerHeight;
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('mousemove', handleMouseMove, { passive: true });
+        reducedMotionQuery?.addEventListener('change', handleReducedMotionChange);
+        if (!reducedMotionQuery?.matches) {
+            startAnimation();
+        }
+    }
+    function destroy() {
+        if (!BROWSER)
+            return;
+        window.removeEventListener('scroll', handleScroll);
+        window.removeEventListener('resize', handleResize);
+        window.removeEventListener('mousemove', handleMouseMove);
+        reducedMotionQuery?.removeEventListener('change', handleReducedMotionChange);
+        if (animationId) {
+            cancelAnimationFrame(animationId);
+            animationId = null;
+        }
+        reducedMotionQuery = null;
+        initialized = false;
+    }
+    function handleReducedMotionChange(event) {
+        if (event.matches) {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+                animationId = null;
+            }
+            return;
+        }
+        startAnimation();
+    }
+    function handleScroll() {
+        const newScrollY = window.scrollY;
+        scrollVelocity = newScrollY - scrollY;
+        scrollY = newScrollY;
+        energy = Math.min(1, energy + Math.abs(scrollVelocity) * 0.01);
+    }
+    function handleResize() {
+        innerWidth = window.innerWidth;
+        innerHeight = window.innerHeight;
+    }
+    function handleMouseMove(e) {
+        targetMouseX = e.clientX / window.innerWidth;
+        targetMouseY = e.clientY / window.innerHeight;
+        // Add energy from mouse movement
+        const dx = targetMouseX - springMouseX;
+        const dy = targetMouseY - springMouseY;
+        energy = Math.min(1, energy + Math.sqrt(dx * dx + dy * dy) * 2);
+    }
+    function startAnimation() {
+        if (animationId || reducedMotionQuery?.matches)
+            return;
+        function animate() {
+            time += 0.016;
+            // Decay energy
+            energy *= ENERGY_DECAY;
+            // Spring physics for mouse
+            const dx = targetMouseX - springMouseX;
+            const dy = targetMouseY - springMouseY;
+            springVelX += dx * SPRING_STIFFNESS;
+            springVelY += dy * SPRING_STIFFNESS;
+            springVelX *= SPRING_DAMPING;
+            springVelY *= SPRING_DAMPING;
+            springMouseX += springVelX;
+            springMouseY += springVelY;
+            mouseX = springMouseX;
+            mouseY = springMouseY;
+            animationId = requestAnimationFrame(animate);
+        }
+        animate();
+    }
+    // Get wave displacement at a point (simplified version)
+    function getDisplacement(x, y, depth = 1) {
+        const w = innerWidth;
+        const h = innerHeight;
+        const cx = w / 2;
+        const cy = h / 2;
+        const distFromCenter = Math.sqrt((x - cx) ** 2 + (y - cy) ** 2);
+        const maxDist = Math.sqrt(cx * cx + cy * cy);
+        const _normalizedDist = distFromCenter / maxDist;
+        // Ambient breathing wave
+        const breathSpeed = 0.8 - depth * 0.15;
+        const wave1 = Math.sin(distFromCenter * 0.01 - time * breathSpeed);
+        const wave2 = Math.sin(distFromCenter * 0.018 + time * 0.5) * 0.6;
+        // Depth factor
+        const depthFactor = 3.5 - depth * 0.4;
+        return (wave1 + wave2) * depthFactor * 0.5 * (1 - energy * 0.5);
+    }
+    return {
+        get time() {
+            return time;
+        },
+        get mouseX() {
+            return mouseX;
+        },
+        get mouseY() {
+            return mouseY;
+        },
+        get scrollY() {
+            return scrollY;
+        },
+        get scrollVelocity() {
+            return scrollVelocity;
+        },
+        get innerWidth() {
+            return innerWidth;
+        },
+        get innerHeight() {
+            return innerHeight;
+        },
+        get energy() {
+            return energy;
+        },
+        init,
+        destroy,
+        getDisplacement
+    };
+}
+export const animationStore = createAnimationStore();

package/dist/lib/components/billing/BillingGate.svelte

@@ -0,0 +1,123 @@
+<!--
+  @component BillingGate
+
+  Client-side feature/quota gate for SvelteKit apps that use the
+  vibes-standard account billing API. This is advisory UI; server endpoints
+  must still use vibesPOST/vibesGET billing helpers for enforcement.
+-->
+<script lang="ts">import { BROWSER } from "esm-env";
+import { Button } from "../ui/button/index.js";
+import { Progress } from "../ui/progress/index.js";
+import { Icon } from "../icon/index.js";
+import { preflightQuota } from "../../client/guard/gate.js";
+import { kitLogger } from "../../kit-logger";
+import { settle } from "../../attempt";
+import { failureClass } from "../../failure-class.js";
+/** Reports through the host-injected kit logger (a no-op before the kit is initialized). */
+const logger = kitLogger("vibeskit-billing");
+let { featureSlug, requestedAmount = 1, accountOrigin = null, billingPath = "/billing", children, approachingLimit, blocked, warningThreshold = .8, inlineBlocked = true, failOpen = true } = $props();
+let gateState = $state("loading");
+let quotaStatus = $state(null);
+let percentUsed = $state(0);
+function billingUrl() {
+	const origin = accountOrigin?.replace(/\/$/, "") || window.location.origin;
+	const url = new URL(billingPath, origin);
+	url.searchParams.set("upgrade", featureSlug);
+	return url.toString();
+}
+function handleUpgrade() {
+	window.location.href = billingUrl();
+}
+async function checkAccess() {
+	gateState = "loading";
+	const preflight = await settle(() => preflightQuota(featureSlug, requestedAmount, {
+		accountOrigin,
+		failOpen
+	}));
+	if (!preflight.ok) {
+		logger.warn("Billing preflight failed", { reason: failureClass(preflight.error) });
+		gateState = failOpen ? "allowed" : "blocked";
+		return;
+	}
+	const status = preflight.value;
+	quotaStatus = status;
+	if (!status.allowed) {
+		gateState = "blocked";
+		percentUsed = 1;
+		return;
+	}
+	if (status.limit !== null && status.limit > 0) {
+		percentUsed = status.usage / status.limit;
+	} else {
+		percentUsed = 0;
+	}
+	gateState = status.limit !== null && percentUsed >= warningThreshold ? "approaching" : "allowed";
+}
+$effect(() => {
+	if (!BROWSER) return;
+	void checkAccess();
+});
+</script>
+
+{#if gateState === 'loading'}
+	<div class="pointer-events-none opacity-50">
+		{@render children()}
+	</div>
+{:else if gateState === 'allowed'}
+	{@render children()}
+{:else if gateState === 'approaching' && quotaStatus}
+	{#if approachingLimit}
+		{@render approachingLimit(
+			quotaStatus.usage,
+			quotaStatus.limit,
+			quotaStatus.remaining,
+			percentUsed
+		)}
+	{:else}
+		<div
+			class="mb-3 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-950/30"
+		>
+			<div class="mb-2 flex items-center gap-2">
+				<Icon icon="lucide:zap" class="h-4 w-4 text-amber-600" />
+				<span class="text-sm font-medium text-amber-800 dark:text-amber-200">
+					You've used {Math.round(percentUsed * 100)}% of your {featureSlug.replace(/-/g, ' ')} limit
+				</span>
+			</div>
+			<Progress value={Math.round(percentUsed * 100)} class="h-2 bg-amber-200" />
+			<p class="mt-2 text-xs text-amber-700 dark:text-amber-300">
+				{quotaStatus.remaining ?? 0} remaining this period
+			</p>
+		</div>
+	{/if}
+	{@render children()}
+{:else if gateState === 'blocked' && quotaStatus}
+	{#if inlineBlocked}
+		{#if blocked}
+			{@render blocked(quotaStatus, handleUpgrade)}
+		{:else}
+			<div
+				class="rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-950/30"
+			>
+				<div class="flex flex-col gap-3">
+					<div class="flex items-start gap-3">
+						<Icon icon="lucide:lock" class="mt-0.5 h-5 w-5 flex-shrink-0 text-red-600" />
+						<div class="min-w-0 flex-1">
+							<h3 class="text-sm font-semibold text-red-800 dark:text-red-200">Limit Reached</h3>
+							<p class="mt-1 text-sm text-red-700 dark:text-red-300">
+								You've used all {quotaStatus.limit ?? quotaStatus.usage}
+								{featureSlug.replace(/-/g, ' ')} for this period.
+							</p>
+						</div>
+					</div>
+
+					<div class="mt-2 flex flex-wrap gap-2">
+						<Button variant="default" size="sm" onclick={handleUpgrade} class="gap-2">
+							<Icon icon="lucide:zap" class="h-4 w-4" />
+							Upgrade Plan
+						</Button>
+					</div>
+				</div>
+			</div>
+		{/if}
+	{/if}
+{/if}

package/dist/lib/components/billing/BillingGate.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import { type QuotaStatus } from '../../client/guard/gate.ts';
+interface BillingGateProps {
+    featureSlug: string;
+    requestedAmount?: number;
+    accountOrigin?: string | null;
+    billingPath?: string;
+    children: Snippet;
+    approachingLimit?: Snippet<[number, number | null, number | null, number]>;
+    blocked?: Snippet<[QuotaStatus, () => void]>;
+    warningThreshold?: number;
+    inlineBlocked?: boolean;
+    failOpen?: boolean;
+}
+/**
+ * BillingGate
+ *
+ * Client-side feature/quota gate for SvelteKit apps that use the
+ * vibes-standard account billing API. This is advisory UI; server endpoints
+ * must still use vibesPOST/vibesGET billing helpers for enforcement.
+ */
+declare const BillingGate: import("svelte").Component<BillingGateProps, {}, "">;
+type BillingGate = ReturnType<typeof BillingGate>;
+export default BillingGate;

package/dist/lib/components/billing/PastDueBanner.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">import { Icon } from "../icon";
+import { Button } from "../ui/button/index.js";
+let { status = null, attemptCount = 1, amountDue = 0, currency = "usd", nextAttempt = null, paymentUrl = "/billing", onPaymentClick, title, message: customMessage } = $props();
+const formattedAmount = $derived(amountDue > 0 ? new Intl.NumberFormat("en-US", {
+	style: "currency",
+	currency: currency.toUpperCase()
+}).format(amountDue / 100) : null);
+const formattedNextAttempt = $derived(nextAttempt ? new Date(nextAttempt).toLocaleDateString("en-US", {
+	month: "short",
+	day: "numeric",
+	hour: "numeric",
+	minute: "2-digit"
+}) : null);
+const severity = $derived(() => {
+	if (status === "canceled") return "critical";
+	if (attemptCount >= 3) return "critical";
+	if (attemptCount >= 2) return "warning";
+	return "warning";
+});
+const defaultTitle = $derived(() => {
+	if (status === "canceled") return "Subscription Canceled";
+	return "Payment Failed";
+});
+const defaultMessage = $derived(() => {
+	if (customMessage) return customMessage;
+	if (status === "canceled") {
+		return "Your subscription has been canceled due to failed payment.";
+	}
+	if (attemptCount === 1) {
+		return "Payment failed. Please update your payment method to keep your subscription active.";
+	}
+	if (attemptCount === 2) {
+		return "Second payment attempt failed. Update your payment method soon to avoid service interruption.";
+	}
+	return "Final notice: Payment failed. Please update your payment method immediately to avoid cancellation.";
+});
+function handlePaymentClick() {
+	if (onPaymentClick) {
+		onPaymentClick();
+	} else if (paymentUrl) {
+		window.location.href = paymentUrl;
+	}
+}
+</script>
+
+{#if status === 'past_due' || status === 'canceled'}
+	{@const isCritical = severity() === 'critical'}
+	{@const displayTitle = title ?? defaultTitle()}
+	{@const displayMessage = defaultMessage()}
+	<div
+		class="relative w-full rounded-lg border p-4 {isCritical
+			? 'border-red-500 bg-red-500/10'
+			: 'border-amber-500 bg-amber-500/10'}"
+		role="alert"
+		aria-live="polite"
+	>
+		<div class="flex items-start gap-3">
+			<Icon
+				icon="lucide:alert-triangle"
+				class="mt-0.5 h-5 w-5 flex-shrink-0 {isCritical ? 'text-red-500' : 'text-amber-500'}"
+				aria-hidden="true"
+			/>
+			<div class="min-w-0 flex-1">
+				<div class="flex flex-col gap-1">
+					<h3
+						class="text-sm font-semibold {isCritical
+							? 'text-red-700 dark:text-red-400'
+							: 'text-amber-700 dark:text-amber-400'}"
+					>
+						{displayTitle}
+					</h3>
+					<p class="text-sm opacity-90">
+						{displayMessage}
+					</p>
+					{#if formattedAmount}
+						<p class="mt-1 text-sm font-medium">
+							Amount due: {formattedAmount}
+						</p>
+					{/if}
+					{#if formattedNextAttempt && status !== 'canceled'}
+						<p class="mt-1 text-xs opacity-75">
+							Next retry attempt: {formattedNextAttempt}
+						</p>
+					{/if}
+				</div>
+			</div>
+			<Button
+				variant={isCritical ? 'destructive' : 'default'}
+				size="sm"
+				class="flex-shrink-0 gap-2"
+				onclick={handlePaymentClick}
+			>
+				<Icon icon="lucide:credit-card" class="h-4 w-4" aria-hidden="true" />
+				Update Payment
+			</Button>
+		</div>
+	</div>
+{/if}

package/dist/lib/components/billing/PastDueBanner.svelte.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Props for the PastDueBanner component
+ */
+interface Props {
+    /** The subscription status - 'past_due' shows warning, 'canceled' shows critical */
+    status?: 'past_due' | 'canceled' | null;
+    /** Number of failed payment attempts (affects urgency messaging) */
+    attemptCount?: number;
+    /** Amount due in smallest currency unit (e.g., cents) */
+    amountDue?: number;
+    /** ISO currency code */
+    currency?: string;
+    /** ISO timestamp of next retry attempt */
+    nextAttempt?: string | null;
+    /** URL to redirect for payment update */
+    paymentUrl?: string;
+    /** Optional callback when payment button is clicked */
+    onPaymentClick?: () => void;
+    /** Optional custom title override */
+    title?: string;
+    /** Optional custom message override */
+    message?: string;
+}
+declare const PastDueBanner: import("svelte").Component<Props, {}, "">;
+type PastDueBanner = ReturnType<typeof PastDueBanner>;
+export default PastDueBanner;