yaxa-svelte 1.0.0

package/dist/components/seo/Favicons.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SiteConfig } from '../../site/config';
+interface Props {
+    config?: SiteConfig;
+    faviconSvg?: string;
+}
+declare const Favicons: import("svelte").Component<Props, {}, "">;
+type Favicons = ReturnType<typeof Favicons>;
+export default Favicons;

package/dist/components/seo/OgImage.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { SiteConfig } from '../../site/config';
+	import { getSiteConfig } from '../../site/context';
+
+	interface Props {
+		title?: string;
+		description?: string;
+		badge?: string;
+		theme?: 'dark' | 'light';
+		config?: SiteConfig;
+		class?: string;
+	}
+
+	let {
+		title,
+		description,
+		badge,
+		theme = 'dark',
+		config,
+		class: className = ''
+	}: Props = $props();
+
+	let currentConfig = $derived(config || getSiteConfig());
+
+	let ogUrl = $derived.by(() => {
+		const pairs: string[] = [];
+		if (title) pairs.push(`title=${encodeURIComponent(title)}`);
+		if (description) pairs.push(`description=${encodeURIComponent(description)}`);
+		if (badge) pairs.push(`badge=${encodeURIComponent(badge)}`);
+		if (theme) pairs.push(`theme=${encodeURIComponent(theme)}`);
+		if (currentConfig.name) pairs.push(`site=${encodeURIComponent(currentConfig.name)}`);
+		return `/api/og?${pairs.join('&')}`;
+	});
+</script>
+
+<div
+	class="relative overflow-hidden rounded-xl border border-neutral-200 shadow-xl dark:border-neutral-800 {className}"
+>
+	<div
+		class="flex items-center justify-between border-b border-neutral-200 bg-neutral-100 px-4 py-2.5 text-sm font-medium text-neutral-600 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400"
+	>
+		<span class="flex items-center gap-1.5">
+			<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
+			Live OpenGraph Preview (1200 × 630)
+		</span>
+		<a
+			href={ogUrl}
+			target="_blank"
+			rel="noopener noreferrer"
+			class="font-mono underline hover:text-primary-500"
+		>
+			Open SVG ↗
+		</a>
+	</div>
+	<img
+		src={ogUrl}
+		alt="Open Graph preview for {title || currentConfig.title}"
+		class="aspect-[1200/630] h-auto w-full bg-neutral-950 object-cover"
+		loading="lazy"
+	/>
+</div>

package/dist/components/seo/OgImage.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { SiteConfig } from '../../site/config';
+interface Props {
+    title?: string;
+    description?: string;
+    badge?: string;
+    theme?: 'dark' | 'light';
+    config?: SiteConfig;
+    class?: string;
+}
+declare const OgImage: import("svelte").Component<Props, {}, "">;
+type OgImage = ReturnType<typeof OgImage>;
+export default OgImage;

package/dist/components/seo/Seo.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import type { SiteConfig } from '../../site/config';
+	import { getSiteConfig } from '../../site/context';
+	import { generateWebSiteSchema } from '../../site/schema';
+
+	interface Props {
+		title?: string;
+		description?: string;
+		canonical?: string;
+		ogImage?:
+			string | { title?: string; description?: string; badge?: string; theme?: 'dark' | 'light' };
+		twitterCard?: 'summary' | 'summary_large_image' | 'app' | 'player';
+		noindex?: boolean;
+		nofollow?: boolean;
+		keywords?: string[];
+		schema?: Record<string, unknown> | Record<string, unknown>[];
+		config?: SiteConfig;
+	}
+
+	let {
+		title: propTitle,
+		description: propDescription,
+		canonical: propCanonical,
+		ogImage: propOgImage,
+		twitterCard = 'summary_large_image',
+		noindex = false,
+		nofollow = false,
+		keywords: propKeywords,
+		schema,
+		config: propConfig
+	}: Props = $props();
+
+	// Read config from prop or Svelte 5 context
+	let config = $derived(propConfig || getSiteConfig());
+
+	// Dynamic resolution from props OR SvelteKit page.data (e.g. +page.server.ts load data)
+	let pageData = $derived(page.data || {});
+	let pageSeo = $derived((pageData.seo as Record<string, unknown>) || {});
+
+	let resolvedTitle = $derived(
+		propTitle ||
+			(pageSeo.title as string) ||
+			(pageData.title as string) ||
+			config.title ||
+			config.name
+	);
+
+	let fullTitle = $derived.by(() => {
+		if (propTitle || pageSeo.title || pageData.title) {
+			const activeTitle = (propTitle || pageSeo.title || pageData.title) as string;
+			if (config.seo?.titleTemplate) {
+				return config.seo.titleTemplate.replace('%s', activeTitle);
+			}
+			return `${activeTitle} · ${config.name}`;
+		}
+		return config.title || config.name;
+	});
+
+	let metaDescription = $derived(
+		propDescription ||
+			(pageSeo.description as string) ||
+			(pageData.description as string) ||
+			config.description
+	);
+
+	let currentUrl = $derived.by(() => {
+		if (propCanonical) return propCanonical;
+		try {
+			return `${config.url}${page.url.pathname}`;
+		} catch {
+			return config.url;
+		}
+	});
+
+	let ogImage = $derived(propOgImage || pageSeo.ogImage || pageData.ogImage);
+
+	let resolvedOgImageUrl = $derived.by(() => {
+		if (typeof ogImage === 'string') {
+			return ogImage.startsWith('http') ? ogImage : `${config.url}${ogImage}`;
+		}
+		if (typeof ogImage === 'object' && ogImage !== null) {
+			const pairs: string[] = [];
+			const img = ogImage as {
+				title?: string;
+				description?: string;
+				badge?: string;
+				theme?: 'dark' | 'light';
+			};
+			if (img.title) pairs.push(`title=${encodeURIComponent(img.title)}`);
+			if (img.description) pairs.push(`description=${encodeURIComponent(img.description)}`);
+			if (img.badge) pairs.push(`badge=${encodeURIComponent(img.badge)}`);
+			if (img.theme) pairs.push(`theme=${encodeURIComponent(img.theme)}`);
+			return `${config.url}/api/og?${pairs.join('&')}`;
+		}
+		if (resolvedTitle && resolvedTitle !== config.name) {
+			const pairs: string[] = [
+				`title=${encodeURIComponent(resolvedTitle)}`,
+				`description=${encodeURIComponent(metaDescription)}`
+			];
+			return `${config.url}/api/og?${pairs.join('&')}`;
+		}
+		return `${config.url}${config.seo?.defaultOgImage || '/api/og'}`;
+	});
+
+	let robotsContent = $derived.by(() => {
+		const parts: string[] = [];
+		if (noindex || pageSeo.noindex) parts.push('noindex');
+		else parts.push('index');
+
+		if (nofollow || pageSeo.nofollow) parts.push('nofollow');
+		else parts.push('follow');
+
+		return parts.join(', ');
+	});
+
+	let keywords = $derived(
+		propKeywords || (pageSeo.keywords as string[]) || config.seo?.keywords || []
+	);
+
+	let jsonLdSchemas = $derived.by(() => {
+		const schemas: Record<string, unknown>[] = [generateWebSiteSchema(config)];
+		if (schema) {
+			if (Array.isArray(schema)) {
+				schemas.push(...schema);
+			} else {
+				schemas.push(schema);
+			}
+		}
+		return schemas;
+	});
+</script>
+
+<svelte:head>
+	<!-- Standard Metadata -->
+	<title>{fullTitle}</title>
+	<meta name="description" content={metaDescription} />
+	{#if keywords && keywords.length > 0}
+		<meta name="keywords" content={keywords.join(', ')} />
+	{/if}
+	<link rel="canonical" href={currentUrl} />
+	<meta name="robots" content={robotsContent} />
+	<meta name="theme-color" content={config.theme?.primaryColor || '#ff3e00'} />
+
+	<!-- Open Graph / Facebook -->
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content={currentUrl} />
+	<meta property="og:title" content={fullTitle} />
+	<meta property="og:description" content={metaDescription} />
+	<meta property="og:image" content={resolvedOgImageUrl} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta property="og:site_name" content={config.name} />
+	<meta property="og:locale" content={config.defaultLocale || 'en'} />
+
+	<!-- Twitter -->
+	<meta name="twitter:card" content={twitterCard} />
+	<meta name="twitter:url" content={currentUrl} />
+	<meta name="twitter:title" content={fullTitle} />
+	<meta name="twitter:description" content={metaDescription} />
+	<meta name="twitter:image" content={resolvedOgImageUrl} />
+	{#if config.author?.twitter}
+		<meta name="twitter:creator" content={config.author.twitter} />
+	{/if}
+
+	<!-- Schema.org JSON-LD -->
+	{#each jsonLdSchemas as schemaItem}
+		{@html `<script type="application/ld+json">${JSON.stringify(schemaItem)}</` + `script>`}
+	{/each}
+</svelte:head>

package/dist/components/seo/Seo.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { SiteConfig } from '../../site/config';
+interface Props {
+    title?: string;
+    description?: string;
+    canonical?: string;
+    ogImage?: string | {
+        title?: string;
+        description?: string;
+        badge?: string;
+        theme?: 'dark' | 'light';
+    };
+    twitterCard?: 'summary' | 'summary_large_image' | 'app' | 'player';
+    noindex?: boolean;
+    nofollow?: boolean;
+    keywords?: string[];
+    schema?: Record<string, unknown> | Record<string, unknown>[];
+    config?: SiteConfig;
+}
+declare const Seo: import("svelte").Component<Props, {}, "">;
+type Seo = ReturnType<typeof Seo>;
+export default Seo;

package/dist/composables/useAuth.svelte.d.ts

@@ -0,0 +1,23 @@
+export interface UseAuthOptions {
+    baseURL?: string;
+}
+export type SocialProvider = 'github' | 'google' | 'discord' | 'apple';
+/**
+ * Creates a reactive Svelte 5 Rune composable for Better-Auth authentication.
+ */
+export declare function useAuth(options?: UseAuthOptions): {
+    user: any;
+    readonly session: any;
+    readonly isLoading: boolean;
+    readonly isAuthenticated: boolean;
+    readonly error: string | null;
+    client: import("better-auth/svelte").SvelteAuthClient<{
+        baseURL: string;
+    }>;
+    fetchSession: () => Promise<void>;
+    signInWithEmail: (email: string, password: string) => Promise<boolean>;
+    signUpWithEmail: (email: string, password: string, name: string) => Promise<boolean>;
+    signInWithSocial: (provider: SocialProvider) => Promise<void>;
+    signInWithMagicLink: (email: string) => Promise<boolean>;
+    signOut: () => Promise<void>;
+};

package/dist/composables/useAuth.svelte.js

@@ -0,0 +1,157 @@
+import { createAuthClient } from 'better-auth/svelte';
+/**
+ * Creates a reactive Svelte 5 Rune composable for Better-Auth authentication.
+ */
+export function useAuth(options = {}) {
+    const authClient = createAuthClient({
+        baseURL: options.baseURL || (typeof window !== 'undefined' ? window.location.origin : '')
+    });
+    let user = $state(null);
+    let session = $state(null);
+    let isLoading = $state(false);
+    let error = $state(null);
+    const isAuthenticated = $derived(!!user);
+    async function fetchSession() {
+        try {
+            isLoading = true;
+            const res = await authClient.getSession();
+            if (res.data) {
+                user = res.data.user;
+                session = res.data.session;
+            }
+            else {
+                user = null;
+                session = null;
+            }
+        }
+        catch (err) {
+            user = null;
+            session = null;
+            error = err?.message || 'Failed to fetch session';
+        }
+        finally {
+            isLoading = false;
+        }
+    }
+    async function signInWithEmail(email, password) {
+        isLoading = true;
+        error = null;
+        try {
+            const res = await authClient.signIn.email({ email, password });
+            if (res.error) {
+                error = res.error.message || 'Invalid email or password';
+                return false;
+            }
+            await fetchSession();
+            return true;
+        }
+        catch (err) {
+            error = err?.message || 'Authentication error';
+            return false;
+        }
+        finally {
+            isLoading = false;
+        }
+    }
+    async function signUpWithEmail(email, password, name) {
+        isLoading = true;
+        error = null;
+        try {
+            const res = await authClient.signUp.email({ email, password, name });
+            if (res.error) {
+                error = res.error.message || 'Could not create account';
+                return false;
+            }
+            await fetchSession();
+            return true;
+        }
+        catch (err) {
+            error = err?.message || 'Registration error';
+            return false;
+        }
+        finally {
+            isLoading = false;
+        }
+    }
+    async function signInWithSocial(provider) {
+        isLoading = true;
+        error = null;
+        try {
+            await authClient.signIn.social({
+                provider,
+                callbackURL: typeof window !== 'undefined' ? `${window.location.origin}/dashboard` : '/'
+            });
+        }
+        catch (err) {
+            error = err?.message || `Failed to sign in with ${provider}`;
+            isLoading = false;
+        }
+    }
+    async function signInWithMagicLink(email) {
+        isLoading = true;
+        error = null;
+        try {
+            const res = await authClient.signIn.magicLink?.({
+                email,
+                callbackURL: typeof window !== 'undefined' ? `${window.location.origin}/dashboard` : '/'
+            });
+            if (res?.error) {
+                error = res.error.message || 'Failed to send magic link';
+                return false;
+            }
+            return true;
+        }
+        catch (err) {
+            error = err?.message || 'Failed to send magic link';
+            return false;
+        }
+        finally {
+            isLoading = false;
+        }
+    }
+    async function signOut() {
+        isLoading = true;
+        try {
+            await authClient.signOut();
+            user = null;
+            session = null;
+        }
+        catch (err) {
+            error = err?.message || 'Failed to sign out';
+        }
+        finally {
+            isLoading = false;
+        }
+    }
+    // Initialize session on mount if in browser
+    if (typeof window !== 'undefined') {
+        fetchSession();
+    }
+    return {
+        get user() {
+            return user;
+        },
+        set user(val) {
+            user = val;
+        },
+        get session() {
+            return session;
+        },
+        get isLoading() {
+            return isLoading;
+        },
+        get isAuthenticated() {
+            return isAuthenticated;
+        },
+        get error() {
+            return error;
+        },
+        client: authClient,
+        fetchSession,
+        signInWithEmail,
+        signUpWithEmail,
+        signInWithSocial,
+        signInWithMagicLink,
+        signOut
+    };
+}

package/dist/composables/useClipboard.svelte.d.ts

@@ -0,0 +1,9 @@
+export interface UseClipboardOptions {
+    timeout?: number;
+}
+export declare function useClipboard(options?: UseClipboardOptions): {
+    readonly copied: boolean;
+    readonly text: string;
+    readonly isSupported: boolean;
+    copy: (value: string) => Promise<boolean>;
+};

package/dist/composables/useClipboard.svelte.js

@@ -0,0 +1,36 @@
+import { browser } from '$app/environment';
+export function useClipboard(options = {}) {
+    const { timeout = 2000 } = options;
+    let copied = $state(false);
+    let text = $state('');
+    const isSupported = browser && typeof navigator !== 'undefined' && 'clipboard' in navigator;
+    async function copy(value) {
+        if (!isSupported)
+            return false;
+        try {
+            await navigator.clipboard.writeText(value);
+            text = value;
+            copied = true;
+            setTimeout(() => {
+                copied = false;
+            }, timeout);
+            return true;
+        }
+        catch {
+            copied = false;
+            return false;
+        }
+    }
+    return {
+        get copied() {
+            return copied;
+        },
+        get text() {
+            return text;
+        },
+        get isSupported() {
+            return isSupported;
+        },
+        copy
+    };
+}

package/dist/composables/useColorMode.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type ThemeMode } from '../theme/theme.svelte';
+export declare function useColorMode(): {
+    readonly value: ThemeMode;
+    readonly resolvedTheme: "light" | "dark";
+    readonly isDark: boolean;
+    set(mode: ThemeMode): void;
+    toggle(): void;
+};

package/dist/composables/useColorMode.svelte.js

@@ -0,0 +1,20 @@
+import { theme } from '../theme/theme.svelte';
+export function useColorMode() {
+    return {
+        get value() {
+            return theme.mode;
+        },
+        get resolvedTheme() {
+            return theme.resolvedTheme;
+        },
+        get isDark() {
+            return theme.resolvedTheme === 'dark';
+        },
+        set(mode) {
+            theme.setMode(mode);
+        },
+        toggle() {
+            theme.toggle();
+        }
+    };
+}

package/dist/composables/useDebounce.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare function useDebounce<T>(getValue: () => T, delay?: number): {
+    readonly value: T;
+};

package/dist/composables/useDebounce.svelte.js

@@ -0,0 +1,17 @@
+export function useDebounce(getValue, delay = 300) {
+    let debouncedValue = $state(getValue());
+    let timer;
+    $effect(() => {
+        const current = getValue();
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            debouncedValue = current;
+        }, delay);
+        return () => clearTimeout(timer);
+    });
+    return {
+        get value() {
+            return debouncedValue;
+        }
+    };
+}

package/dist/composables/useMediaQuery.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare function useMediaQuery(query: string): {
+    readonly matches: boolean;
+};

package/dist/composables/useMediaQuery.svelte.js

@@ -0,0 +1,17 @@
+import { browser } from '$app/environment';
+export function useMediaQuery(query) {
+    let matches = $state(false);
+    if (browser && typeof window !== 'undefined') {
+        const mediaQuery = window.matchMedia(query);
+        matches = mediaQuery.matches;
+        const listener = (e) => {
+            matches = e.matches;
+        };
+        mediaQuery.addEventListener('change', listener);
+    }
+    return {
+        get matches() {
+            return matches;
+        }
+    };
+}

package/dist/composables/useShortcuts.svelte.d.ts

@@ -0,0 +1,10 @@
+export interface ShortcutItem {
+    handler: (e: KeyboardEvent) => void;
+    disabled?: boolean;
+}
+export type ShortcutConfig = (e: KeyboardEvent) => void | ShortcutItem;
+/**
+ * Global keyboard shortcut listener matching Nuxt UI's defineShortcuts.
+ * Example: useShortcuts({ 'meta_k': () => openSearch(), 'escape': () => closeModal() })
+ */
+export declare function useShortcuts(shortcuts: Record<string, ((e: KeyboardEvent) => void) | ShortcutItem>): () => void;

package/dist/composables/useShortcuts.svelte.js

@@ -0,0 +1,50 @@
+import { browser } from '$app/environment';
+/**
+ * Global keyboard shortcut listener matching Nuxt UI's defineShortcuts.
+ * Example: useShortcuts({ 'meta_k': () => openSearch(), 'escape': () => closeModal() })
+ */
+export function useShortcuts(shortcuts) {
+    if (!browser)
+        return () => { };
+    function handleKeyDown(e) {
+        if (e.defaultPrevented)
+            return;
+        const target = e.target;
+        const isInput = target &&
+            (target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.tagName === 'SELECT' ||
+                target.isContentEditable);
+        for (const [keyCombo, config] of Object.entries(shortcuts)) {
+            const handler = typeof config === 'function' ? config : config.handler;
+            const disabled = typeof config === 'object' ? config.disabled : false;
+            if (disabled)
+                continue;
+            const parts = keyCombo.toLowerCase().split(/[\s_+]/);
+            const mainKey = parts[parts.length - 1];
+            const requiresMeta = parts.includes('meta') || parts.includes('cmd') || parts.includes('command');
+            const requiresCtrl = parts.includes('ctrl') || parts.includes('control');
+            const requiresShift = parts.includes('shift');
+            const requiresAlt = parts.includes('alt');
+            const metaMatch = requiresMeta ? e.metaKey || e.ctrlKey : true;
+            const ctrlMatch = requiresCtrl ? e.ctrlKey : true;
+            const shiftMatch = requiresShift ? e.shiftKey : true;
+            const altMatch = requiresAlt ? e.altKey : true;
+            const keyMatch = e.key.toLowerCase() === mainKey ||
+                e.code.toLowerCase() === `key${mainKey}` ||
+                (mainKey === 'k' && e.key.toLowerCase() === 'k');
+            if (metaMatch && ctrlMatch && shiftMatch && altMatch && keyMatch) {
+                if (isInput && !requiresMeta && !requiresCtrl) {
+                    continue;
+                }
+                e.preventDefault();
+                handler(e);
+                break;
+            }
+        }
+    }
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+    };
+}

package/dist/composables/useToast.d.ts

@@ -0,0 +1,19 @@
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+export interface ToastOptions {
+    title?: string;
+    description?: string;
+    color?: 'primary' | 'success' | 'warning' | 'error' | 'neutral';
+    duration?: number;
+    action?: ToastAction;
+}
+export declare function useToast(): {
+    add: (options: ToastOptions | string) => string | number;
+    success: (title: string, description?: string) => string | number;
+    error: (title: string, description?: string) => string | number;
+    warning: (title: string, description?: string) => string | number;
+    info: (title: string, description?: string) => string | number;
+    dismiss: (id?: number | string) => string | number | undefined;
+};