yaxa-svelte 1.0.0

package/dist/components/layout/Header.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { SiteConfig, NavItem } from '../../site/config';
+	import { theme } from '../../theme/theme.svelte';
+	import Container from './Container.svelte';
+	import Button from '../elements/Button.svelte';
+	import Icon from '../elements/Icon.svelte';
+	import Kbd from '../elements/Kbd.svelte';
+	import Link from '../elements/Link.svelte';
+	import Logo from '../elements/Logo.svelte';
+	import { getSiteConfig } from '../../site/context';
+
+	interface Props {
+		config?: SiteConfig;
+		links?: NavItem[];
+		onOpenCommand?: () => void;
+		actions?: Snippet;
+		class?: string;
+	}
+
+	let { config, links, onOpenCommand, actions, class: className = '' }: Props = $props();
+
+	let currentConfig = $derived(config || getSiteConfig());
+	let resolvedLinks = $derived(links || currentConfig.nav || []);
+
+	let mobileMenuOpen = $state(false);
+	let isScrolled = $state(false);
+</script>
+
+<svelte:window
+	onscroll={() => {
+		if (typeof window !== 'undefined') {
+			isScrolled = window.scrollY > 15;
+		}
+	}}
+/>
+
+<header
+	class="sticky top-0 z-40 w-full transition-all duration-200 {isScrolled
+		? 'border-b border-neutral-200/80 bg-white/95 shadow-xs backdrop-blur-md dark:border-neutral-800/80 dark:bg-[#121212]/95'
+		: 'border-b border-transparent bg-white/60 backdrop-blur-sm dark:border-transparent dark:bg-[#121212]/60'} {className}"
+>
+	<Container size="2xl">
+		<div class="flex h-16 items-center justify-between gap-4">
+			<!-- Logo, Brand & Version Pill -->
+			<div class="flex items-center gap-6">
+				<div class="flex items-center gap-2.5">
+					<a
+						href="/"
+						class="flex items-center gap-2.5 font-bold tracking-tight text-neutral-900 transition-opacity hover:opacity-90 dark:text-white"
+					>
+						<Logo size="sm" />
+						<span class="text-base font-extrabold tracking-tight">{currentConfig.name}</span>
+					</a>
+				</div>
+
+				<!-- Desktop Navigation Links -->
+				<nav class="hidden items-center gap-1 md:flex">
+					{#each resolvedLinks as item}
+						<Link
+							href={item.href}
+							class="rounded-md px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-white"
+							activeClass="text-primary-600 dark:text-primary-400 font-semibold"
+						>
+							{#if item.icon}
+								<Icon name={item.icon} size="xs" />
+							{/if}
+							{item.label}
+							{#if item.badge}
+								<span
+									class="ml-1 rounded bg-primary-100 px-1.5 py-0.5 text-xs font-semibold text-primary-700 dark:bg-primary-950 dark:text-primary-300"
+								>
+									{item.badge}
+								</span>
+							{/if}
+						</Link>
+					{/each}
+				</nav>
+			</div>
+
+			<!-- Right Section: Search, Theme Toggle, Actions, Socials -->
+			<div class="flex items-center gap-2">
+				{#if onOpenCommand}
+					<button
+						onclick={onOpenCommand}
+						type="button"
+						class="hidden items-center gap-2 rounded-lg border border-neutral-200/80 bg-neutral-100/60 px-3 py-1.5 text-sm text-neutral-500 transition-colors hover:border-neutral-300 hover:bg-neutral-100 sm:flex dark:border-neutral-800 dark:bg-neutral-900/60 dark:text-neutral-400 dark:hover:border-neutral-700 dark:hover:bg-neutral-800"
+						aria-label="Search or run command"
+					>
+						<Icon name="search" size="xs" />
+						<span>Search documentation...</span>
+						<Kbd value="CTRL K" size="xs" class="ml-3" />
+					</button>
+				{/if}
+
+				<!-- Theme Mode Switcher -->
+				<Button
+					variant="ghost"
+					color="neutral"
+					square
+					size="sm"
+					onclick={() => theme.toggle()}
+					aria-label="Toggle color mode"
+				>
+					{#if theme.resolvedTheme === 'dark'}
+						<Icon name="sun" size="sm" class="text-amber-400" />
+					{:else}
+						<Icon name="moon" size="sm" class="text-neutral-600" />
+					{/if}
+				</Button>
+
+				<!-- GitHub Link -->
+				{#if currentConfig.socials?.github}
+					<Button
+						href={currentConfig.socials.github}
+						variant="ghost"
+						color="neutral"
+						square
+						size="sm"
+						aria-label="GitHub Repository"
+					>
+						<Icon name="github" size="sm" />
+					</Button>
+				{/if}
+
+				{#if actions}
+					{@render actions()}
+				{/if}
+
+				<!-- Mobile menu button -->
+				<div class="flex md:hidden">
+					<Button
+						variant="ghost"
+						color="neutral"
+						square
+						size="sm"
+						onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
+						aria-label="Toggle navigation menu"
+					>
+						{#if mobileMenuOpen}
+							<Icon name="cross" size="sm" />
+						{:else}
+							<svg
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								stroke-width="2"
+							>
+								<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+							</svg>
+						{/if}
+					</Button>
+				</div>
+			</div>
+		</div>
+
+		<!-- Mobile Navigation Dropdown -->
+		{#if mobileMenuOpen}
+			<div class="border-t border-neutral-200 py-4 md:hidden dark:border-neutral-800">
+				<div class="flex flex-col space-y-2">
+					{#each resolvedLinks as item}
+						<a
+							href={item.href}
+							onclick={() => (mobileMenuOpen = false)}
+							class="rounded-lg px-3 py-2 text-base font-medium text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
+						>
+							{item.label}
+						</a>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</Container>
+</header>

package/dist/components/layout/Header.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { SiteConfig, NavItem } from '../../site/config';
+interface Props {
+    config?: SiteConfig;
+    links?: NavItem[];
+    onOpenCommand?: () => void;
+    actions?: Snippet;
+    class?: string;
+}
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/components/layout/Section.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Container from './Container.svelte';
+
+	interface Props {
+		id?: string;
+		title?: string;
+		description?: string;
+		badge?: string;
+		align?: 'left' | 'center';
+		class?: string;
+		header?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		id,
+		title,
+		description,
+		badge,
+		align = 'center',
+		class: className = '',
+		header,
+		children
+	}: Props = $props();
+</script>
+
+<section {id} class="py-16 sm:py-24 {className}">
+	<Container>
+		{#if header}
+			{@render header()}
+		{:else if title || description || badge}
+			<div
+				class="mb-12 {align === 'center' ? 'mx-auto max-w-3xl text-center' : 'max-w-2xl text-left'}"
+			>
+				{#if badge}
+					<span
+						class="mb-4 inline-flex items-center rounded-full bg-primary-50 px-3 py-1 text-sm font-semibold text-primary-700 ring-1 ring-primary-500/20 dark:bg-primary-950/60 dark:text-primary-300 dark:ring-primary-500/30"
+					>
+						{badge}
+					</span>
+				{/if}
+				{#if title}
+					<h2
+						class="text-3xl font-extrabold tracking-tight text-neutral-900 sm:text-4xl dark:text-white"
+					>
+						{title}
+					</h2>
+				{/if}
+				{#if description}
+					<p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
+						{description}
+					</p>
+				{/if}
+			</div>
+		{/if}
+
+		{#if children}
+			{@render children()}
+		{/if}
+	</Container>
+</section>

package/dist/components/layout/Section.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id?: string;
+    title?: string;
+    description?: string;
+    badge?: string;
+    align?: 'left' | 'center';
+    class?: string;
+    header?: Snippet;
+    children?: Snippet;
+}
+declare const Section: import("svelte").Component<Props, {}, "">;
+type Section = ReturnType<typeof Section>;
+export default Section;

package/dist/components/layout/YaxaApp.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Toaster } from 'svelte-sonner';
+	import { Tooltip } from 'bits-ui';
+	import { type SiteConfig, DEFAULT_SITE_CONFIG } from '../../site/config';
+	import { themeInitScript } from '../../theme/theme.svelte';
+	import Favicons from '../seo/Favicons.svelte';
+	import Seo from '../seo/Seo.svelte';
+	import { setSiteConfig } from '../../site/context';
+	import '../../styles/yaxa.css';
+
+	export interface YaxaAppProps {
+		config?: SiteConfig;
+		enableDefaultSeo?: boolean;
+		children?: Snippet;
+	}
+
+	export type Props = YaxaAppProps;
+
+	let { config = DEFAULT_SITE_CONFIG, enableDefaultSeo = true, children }: YaxaAppProps = $props();
+
+	// Provide config to all descendant components via Svelte 5 context
+	setSiteConfig(() => config);
+
+	const scriptTag = `<script>${themeInitScript}</` + `script>`;
+</script>
+
+<svelte:head>
+	{@html scriptTag}
+</svelte:head>
+
+{#if enableDefaultSeo}
+	<Seo {config} />
+{/if}
+<Favicons {config} />
+
+<Tooltip.Provider delayDuration={200}>
+	<div
+		class="flex min-h-screen flex-col bg-white text-neutral-900 transition-colors dark:bg-neutral-950 dark:text-neutral-50"
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</Tooltip.Provider>
+
+<!-- Global Toast Container -->
+<Toaster richColors position="top-right" closeButton />

package/dist/components/layout/YaxaApp.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import { type SiteConfig } from '../../site/config';
+import '../../styles/yaxa.css';
+export interface YaxaAppProps {
+    config?: SiteConfig;
+    enableDefaultSeo?: boolean;
+    children?: Snippet;
+}
+export type Props = YaxaAppProps;
+declare const YaxaApp: import("svelte").Component<YaxaAppProps, {}, "">;
+type YaxaApp = ReturnType<typeof YaxaApp>;
+export default YaxaApp;

package/dist/components/navigation/Breadcrumb.svelte

@@ -0,0 +1,58 @@
+<script module lang="ts">
+	export interface BreadcrumbItem {
+		label: string;
+		href?: string;
+		icon?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Icon from '../elements/Icon.svelte';
+
+	interface Props {
+		items: BreadcrumbItem[];
+		separator?: string;
+		class?: string;
+	}
+
+	let { items, separator = 'chevron-right', class: className = '' }: Props = $props();
+</script>
+
+<nav aria-label="Breadcrumb" class="flex {className}">
+	<ol
+		class="inline-flex items-center space-x-1.5 text-sm text-neutral-500 md:space-x-2 dark:text-neutral-400"
+	>
+		{#each items as item, index}
+			{@const isLast = index === items.length - 1}
+			<li class="inline-flex items-center">
+				{#if index > 0}
+					<Icon name={separator} size="xs" class="mx-1 text-neutral-400" />
+				{/if}
+
+				{#if item.href && !isLast}
+					<a
+						href={item.href}
+						class="inline-flex items-center gap-1.5 transition-colors hover:text-neutral-900 dark:hover:text-white"
+					>
+						{#if item.icon}
+							<Icon name={item.icon} size="xs" />
+						{/if}
+						<span>{item.label}</span>
+					</a>
+				{:else}
+					<span
+						class="inline-flex items-center gap-1.5 font-medium {isLast
+							? 'text-neutral-900 dark:text-white'
+							: ''}"
+						aria-current={isLast ? 'page' : undefined}
+					>
+						{#if item.icon}
+							<Icon name={item.icon} size="xs" />
+						{/if}
+						<span>{item.label}</span>
+					</span>
+				{/if}
+			</li>
+		{/each}
+	</ol>
+</nav>

package/dist/components/navigation/Breadcrumb.svelte.d.ts

@@ -0,0 +1,13 @@
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    icon?: string;
+}
+interface Props {
+    items: BreadcrumbItem[];
+    separator?: string;
+    class?: string;
+}
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/navigation/CommandPalette.svelte

@@ -0,0 +1,201 @@
+<script module lang="ts">
+	export interface CommandItem {
+		id: string;
+		label: string;
+		description?: string;
+		icon?: string;
+		group?: string;
+		shortcut?: string;
+		onSelect?: () => void;
+		href?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import Icon from '../elements/Icon.svelte';
+	import Kbd from '../elements/Kbd.svelte';
+
+	interface Props {
+		open?: boolean;
+		items?: CommandItem[];
+		placeholder?: string;
+		class?: string;
+	}
+
+	let {
+		open = $bindable(false),
+		items = [],
+		placeholder = 'Type a command or search...',
+		class: className = ''
+	}: Props = $props();
+
+	let query = $state('');
+	let selectedIndex = $state(0);
+
+	let filteredItems = $derived.by(() => {
+		if (!query.trim()) return items;
+		const q = query.toLowerCase();
+		return items.filter(
+			(item) =>
+				item.label.toLowerCase().includes(q) ||
+				item.description?.toLowerCase().includes(q) ||
+				item.group?.toLowerCase().includes(q)
+		);
+	});
+
+	let groupedItems = $derived.by(() => {
+		const groups: Record<string, CommandItem[]> = {};
+		filteredItems.forEach((item) => {
+			const groupName = item.group || 'General';
+			if (!groups[groupName]) groups[groupName] = [];
+			groups[groupName].push(item);
+		});
+		return groups;
+	});
+
+	function focusOnMount(node: HTMLElement) {
+		node.focus();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+			e.preventDefault();
+			open = !open;
+			if (open) query = '';
+		}
+
+		if (!open) return;
+
+		if (e.key === 'Escape') {
+			open = false;
+		} else if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			selectedIndex = (selectedIndex + 1) % Math.max(1, filteredItems.length);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			selectedIndex =
+				(selectedIndex - 1 + filteredItems.length) % Math.max(1, filteredItems.length);
+		} else if (e.key === 'Enter') {
+			e.preventDefault();
+			const selected = filteredItems[selectedIndex];
+			if (selected) {
+				executeItem(selected);
+			}
+		}
+	}
+
+	function executeItem(item: CommandItem) {
+		open = false;
+		if (item.onSelect) item.onSelect();
+		if (item.href && browser) {
+			window.location.href = item.href;
+		}
+	}
+
+	$effect(() => {
+		if (browser) {
+			window.addEventListener('keydown', handleKeydown);
+			return () => window.removeEventListener('keydown', handleKeydown);
+		}
+	});
+</script>
+
+{#if open}
+	<div
+		class="fixed inset-0 z-50 flex items-start justify-center p-4 pt-[15vh] sm:p-6 sm:pt-[20vh]"
+		role="dialog"
+		aria-modal="true"
+	>
+		<!-- Backdrop -->
+		<button
+			type="button"
+			class="fixed inset-0 bg-neutral-900/60 backdrop-blur-xs transition-opacity"
+			onclick={() => (open = false)}
+			aria-label="Close command palette"
+		></button>
+
+		<!-- Dialog Panel -->
+		<div
+			class="relative w-full max-w-xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl transition-all dark:border-neutral-800 dark:bg-neutral-900 {className}"
+		>
+			<!-- Search Bar -->
+			<div class="flex items-center border-b border-neutral-200 px-4 dark:border-neutral-800">
+				<Icon name="search" size="sm" class="mr-3 text-neutral-400" />
+				<input
+					type="text"
+					bind:value={query}
+					{placeholder}
+					class="h-12 w-full bg-transparent text-sm text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white"
+					use:focusOnMount
+				/>
+				<Kbd value="ESC" size="xs" />
+			</div>
+
+			<!-- List Items -->
+			<div class="max-h-80 overflow-y-auto p-2">
+				{#if filteredItems.length === 0}
+					<div class="py-10 text-center text-sm text-neutral-500">
+						No results found for "{query}".
+					</div>
+				{:else}
+					{#each Object.entries(groupedItems) as [groupName, groupList]}
+						<div class="mb-2">
+							<div
+								class="px-3 py-1.5 text-[11px] font-semibold tracking-wider text-neutral-400 uppercase dark:text-neutral-500"
+							>
+								{groupName}
+							</div>
+							{#each groupList as item}
+								{@const isHighlighted = filteredItems.indexOf(item) === selectedIndex}
+								<button
+									type="button"
+									onclick={() => executeItem(item)}
+									class="flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-sm transition-colors {isHighlighted
+										? 'bg-primary-50 text-primary-900 dark:bg-primary-950/60 dark:text-primary-100'
+										: 'text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800/60'}"
+								>
+									<div class="flex items-center gap-3">
+										{#if item.icon}
+											<Icon
+												name={item.icon}
+												size="sm"
+												class={isHighlighted
+													? 'text-primary-600 dark:text-primary-400'
+													: 'text-neutral-400'}
+											/>
+										{/if}
+										<div>
+											<div class="font-medium">{item.label}</div>
+											{#if item.description}
+												<div class="text-sm text-neutral-500 dark:text-neutral-400">
+													{item.description}
+												</div>
+											{/if}
+										</div>
+									</div>
+
+									{#if item.shortcut}
+										<Kbd value={item.shortcut} size="xs" />
+									{/if}
+								</button>
+							{/each}
+						</div>
+					{/each}
+				{/if}
+			</div>
+
+			<!-- Footer -->
+			<div
+				class="flex items-center justify-between border-t border-neutral-100 bg-neutral-50/80 px-4 py-2 text-[11px] text-neutral-400 dark:border-neutral-800/80 dark:bg-neutral-900/50"
+			>
+				<span class="flex items-center gap-1.5">
+					<Kbd value="↑↓" size="xs" /> Navigate
+				</span>
+				<span class="flex items-center gap-1.5">
+					<Kbd value="↵" size="xs" /> Select
+				</span>
+			</div>
+		</div>
+	</div>
+{/if}

package/dist/components/navigation/CommandPalette.svelte.d.ts

@@ -0,0 +1,19 @@
+export interface CommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    group?: string;
+    shortcut?: string;
+    onSelect?: () => void;
+    href?: string;
+}
+interface Props {
+    open?: boolean;
+    items?: CommandItem[];
+    placeholder?: string;
+    class?: string;
+}
+declare const CommandPalette: import("svelte").Component<Props, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/components/navigation/DropdownMenu.svelte

@@ -0,0 +1,75 @@
+<script module lang="ts">
+	export interface MenuItem {
+		id: string;
+		label: string;
+		icon?: string;
+		shortcut?: string;
+		disabled?: boolean;
+		separator?: boolean;
+		destructive?: boolean;
+		onSelect?: () => void;
+	}
+</script>
+
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import Icon from '../elements/Icon.svelte';
+	import Kbd from '../elements/Kbd.svelte';
+
+	interface Props {
+		items: MenuItem[];
+		trigger?: Snippet;
+		class?: string;
+	}
+
+	let { items, trigger, class: className = '' }: Props = $props();
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger class="inline-flex">
+		{#if trigger}
+			{@render trigger()}
+		{:else}
+			<button
+				type="button"
+				class="inline-flex items-center gap-1 rounded-lg border border-neutral-200 bg-white px-3 py-1.5 text-sm font-medium text-neutral-800 shadow-xs hover:bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800"
+			>
+				Options
+				<Icon name="chevron-down" size="xs" />
+			</button>
+		{/if}
+	</DropdownMenu.Trigger>
+
+	<DropdownMenu.Portal>
+		<DropdownMenu.Content
+			class="animate-in fade-in-0 zoom-in-95 z-50 min-w-48 overflow-hidden rounded-xl border border-neutral-200 bg-white p-1.5 text-neutral-900 shadow-xl dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100 {className}"
+			sideOffset={6}
+		>
+			{#each items as item}
+				{#if item.separator}
+					<DropdownMenu.Separator class="-mx-1 my-1 h-px bg-neutral-200 dark:bg-neutral-800" />
+				{:else}
+					<DropdownMenu.Item
+						disabled={item.disabled}
+						onSelect={item.onSelect}
+						class="flex cursor-pointer items-center justify-between rounded-lg px-2.5 py-1.5 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-neutral-100 data-highlighted:text-neutral-900 dark:data-highlighted:bg-neutral-800 dark:data-highlighted:text-neutral-100 {item.destructive
+							? 'text-rose-600 data-highlighted:bg-rose-50 dark:text-rose-400 dark:data-highlighted:bg-rose-950/50'
+							: ''}"
+					>
+						<div class="flex items-center gap-2">
+							{#if item.icon}
+								<Icon name={item.icon} size="xs" />
+							{/if}
+							<span>{item.label}</span>
+						</div>
+
+						{#if item.shortcut}
+							<Kbd value={item.shortcut} size="xs" />
+						{/if}
+					</DropdownMenu.Item>
+				{/if}
+			{/each}
+		</DropdownMenu.Content>
+	</DropdownMenu.Portal>
+</DropdownMenu.Root>