@axerity/cli 0.1.0

package/src/lib/components/docs/CopyPageMenu.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { base } from '$app/paths';
+	import { fade } from 'svelte/transition';
+	import Copy from '@lucide/svelte/icons/copy';
+	import Check from '@lucide/svelte/icons/check';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import FileText from '@lucide/svelte/icons/file-text';
+	import ExternalLink from '@lucide/svelte/icons/external-link';
+	import { getRawMarkdown } from '$lib/content/raw';
+
+	let open = $state(false);
+	let copied = $state(false);
+
+	const slug = $derived(page.url.pathname.slice(base.length).replace(/^\//, ''));
+
+	async function copyPage() {
+		const markdown = await getRawMarkdown(slug);
+		if (markdown == null) return;
+		try {
+			await navigator.clipboard.writeText(markdown);
+			copied = true;
+			setTimeout(() => (copied = false), 1500);
+		} catch {
+			copied = false;
+		}
+		open = false;
+	}
+
+	function viewMarkdown() {
+		window.open(`${page.url.pathname.replace(/\/$/, '')}.md`, '_blank');
+		open = false;
+	}
+
+	function ask(endpoint: string) {
+		const prompt = `Read ${page.url.href} and help me with questions about this page.`;
+		window.open(`${endpoint}${encodeURIComponent(prompt)}`, '_blank');
+		open = false;
+	}
+</script>
+
+<div class="relative">
+	<div class="flex items-center rounded-md border border-border bg-surface text-sm">
+		<button
+			type="button"
+			onclick={copyPage}
+			class="flex items-center gap-2 py-1.5 pr-2 pl-3 text-fg-muted transition hover:text-fg"
+		>
+			{#if copied}
+				<Check size={15} class="text-fg" />
+			{:else}
+				<Copy size={15} />
+			{/if}
+			<span>{copied ? 'Copied' : 'Copy page'}</span>
+		</button>
+		<button
+			type="button"
+			onclick={() => (open = !open)}
+			aria-label="More options"
+			aria-expanded={open}
+			class="border-l border-border px-1.5 py-1.5 text-fg-subtle transition hover:text-fg"
+		>
+			<ChevronDown size={15} class="transition-transform {open ? 'rotate-180' : ''}" />
+		</button>
+	</div>
+
+	{#if open}
+		<button
+			type="button"
+			class="fixed inset-0 z-40 cursor-default"
+			aria-label="Close menu"
+			onclick={() => (open = false)}
+		></button>
+		<div
+			class="absolute right-0 z-50 mt-1.5 w-72 overflow-hidden rounded-lg border border-border bg-surface-raised p-1 shadow-lg"
+			transition:fade={{ duration: 100 }}
+		>
+			{#snippet item(
+				Icon: typeof Copy,
+				title: string,
+				subtitle: string,
+				onclick: () => void,
+				external = false
+			)}
+				<button
+					type="button"
+					{onclick}
+					class="flex w-full items-start gap-3 rounded-md px-2.5 py-2 text-left transition hover:bg-bg-subtle"
+				>
+					<Icon size={17} class="mt-0.5 shrink-0 text-fg-muted" />
+					<span class="min-w-0 flex-1">
+						<span class="flex items-center gap-1 text-sm font-medium text-fg">
+							{title}
+							{#if external}<ExternalLink size={12} class="text-fg-subtle" />{/if}
+						</span>
+						<span class="block text-xs text-fg-subtle">{subtitle}</span>
+					</span>
+				</button>
+			{/snippet}
+
+			{@render item(Copy, 'Copy page', 'Copy page as Markdown for LLMs', copyPage)}
+			{@render item(FileText, 'View as Markdown', 'Open the raw Markdown', viewMarkdown)}
+			{@render item(
+				ExternalLink,
+				'Open in ChatGPT',
+				'Ask questions about this page',
+				() => ask('https://chatgpt.com/?q='),
+				true
+			)}
+			{@render item(
+				ExternalLink,
+				'Open in Claude',
+				'Ask questions about this page',
+				() => ask('https://claude.ai/new?q='),
+				true
+			)}
+		</div>
+	{/if}
+</div>

package/src/lib/components/docs/DocsLayout.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { fade, fly } from 'svelte/transition';
+	import { afterNavigate } from '$app/navigation';
+	import type { NavLink, NavSection, SiteConfig } from '$lib/types';
+	import Banner from './Banner.svelte';
+	import Mermaid from './Mermaid.svelte';
+	import Navbar from './Navbar.svelte';
+	import Sidebar from './Sidebar.svelte';
+	import TableOfContents from './TableOfContents.svelte';
+	import PageNav from './PageNav.svelte';
+	import PageMeta from './PageMeta.svelte';
+	import Footer from './Footer.svelte';
+	import CopyPageMenu from './CopyPageMenu.svelte';
+	import SearchDialog from './SearchDialog.svelte';
+	import Breadcrumbs from './Breadcrumbs.svelte';
+	import SidebarFooterLinks from './SidebarFooterLinks.svelte';
+
+	let {
+		site,
+		sidebar,
+		flatPages = [],
+		wide = false,
+		editUrl,
+		updated,
+		resolveVersion,
+		children
+	}: {
+		site: SiteConfig;
+		sidebar: NavSection[];
+		flatPages?: NavLink[];
+		wide?: boolean;
+		editUrl?: string;
+		updated?: string;
+		resolveVersion?: (pathname: string, versionPath: string) => string;
+		children: Snippet;
+	} = $props();
+
+	// 'boxed' centers the whole shell in a max-width container; 'flat' (default)
+	// is full-bleed with the sidebar flush against the left edge.
+	const containerClass = $derived(
+		(site.layout ?? 'flat') === 'boxed'
+			? 'mx-auto flex w-full max-w-400 px-0 sm:px-6'
+			: 'flex w-full px-0 sm:px-6'
+	);
+
+	const sidebarVariants = {
+		flush:
+			'sticky top-(--spacing-header) h-[calc(100vh-var(--spacing-header))] border-r border-border bg-sidebar px-4',
+		card: 'sticky top-[calc(var(--spacing-header)_+_1rem)] my-4 mr-3 h-[calc(100vh_-_var(--spacing-header)_-_2rem)] overflow-hidden rounded-xl border border-border bg-sidebar px-3',
+		floating:
+			'sticky top-[calc(var(--spacing-header)_+_0.75rem)] my-3 mr-2 h-[calc(100vh_-_var(--spacing-header)_-_1.5rem)] overflow-hidden rounded-2xl border border-border bg-sidebar px-3 shadow-sm'
+	} as const;
+
+	const asideClass = $derived(
+		`hidden w-sidebar shrink-0 flex-col lg:flex ${sidebarVariants[site.sidebar?.variant ?? 'flush']}`
+	);
+
+	let mobileOpen = $state(false);
+
+	// Close the mobile drawer after navigating to a new page.
+	afterNavigate(() => {
+		mobileOpen = false;
+	});
+
+	// Delegated copy-to-clipboard for code blocks. One listener handles every
+	// block (including those rendered after client-side navigation), since the
+	// buttons are static markup from the Shiki highlighter.
+	$effect(() => {
+		async function onClick(event: MouseEvent) {
+			const target = event.target;
+			if (!(target instanceof Element)) return;
+			const button = target.closest('.copy-button');
+			if (!button) return;
+
+			// Lines are separate elements (the "\n" text nodes are stripped), so
+			// rejoin them with newlines for a faithful copy.
+			const pre = button.closest('.code-block')?.querySelector('pre');
+			const lines = pre?.querySelectorAll('.line');
+			const code =
+				lines && lines.length
+					? Array.from(lines)
+							.map((line) => line.textContent)
+							.join('\n')
+					: (pre?.textContent ?? '');
+			try {
+				await navigator.clipboard.writeText(code);
+				button.setAttribute('data-copied', 'true');
+				setTimeout(() => button.removeAttribute('data-copied'), 1500);
+			} catch {
+				// Clipboard unavailable (e.g. insecure context) — fail quietly.
+			}
+		}
+
+		document.addEventListener('click', onClick);
+		return () => document.removeEventListener('click', onClick);
+	});
+</script>
+
+<div class="min-h-screen bg-bg">
+	{#if site.banner}
+		<Banner banner={site.banner} />
+	{/if}
+	<Navbar {site} {resolveVersion} onMenuClick={() => (mobileOpen = true)} />
+	<SearchDialog />
+	<Mermaid />
+
+	<div class={containerClass}>
+		<!-- Sidebar (desktop) -->
+		<aside class={asideClass}>
+			<div class="min-h-0 flex-1 overflow-y-auto py-8">
+				<Sidebar sections={sidebar} dropdowns={site.dropdowns} />
+			</div>
+			{#if site.sidebarLinks && site.sidebarLinks.length}
+				<div class="shrink-0 pb-6">
+					<SidebarFooterLinks links={site.sidebarLinks} />
+				</div>
+			{/if}
+		</aside>
+
+		<!-- Content -->
+		<main
+			class="flex min-h-[calc(100vh-var(--spacing-header))] min-w-0 flex-1 flex-col px-4 py-8 sm:px-8 lg:px-12"
+		>
+			<div class="mx-auto w-full {wide ? 'max-w-7xl' : 'max-w-content'}">
+				<div class="mb-3 flex items-center gap-3 {wide ? 'lg:max-w-[calc(100%-30.5rem)]' : ''}">
+					<Breadcrumbs {sidebar} />
+					<div class="ml-auto shrink-0">
+						<CopyPageMenu />
+					</div>
+				</div>
+			</div>
+			<article
+				id="doc-content"
+				class="doc-content mx-auto w-full {wide ? 'doc-api max-w-7xl' : 'max-w-content'}"
+			>
+				{@render children()}
+			</article>
+
+			<!-- Prev/next + footer are pushed to the bottom of the viewport on short
+			     pages (mt-auto on the first block). On API (wide) pages they stay
+			     aligned to the content column, not under the code rail. -->
+			<div class="mx-auto mt-auto w-full {wide ? 'max-w-7xl' : 'max-w-content'}">
+				<div class={wide ? 'lg:max-w-[calc(100%-30.5rem)]' : ''}>
+					<PageMeta {editUrl} {updated} />
+					<PageNav pages={flatPages} />
+				</div>
+			</div>
+
+			<div class="mx-auto w-full {wide ? 'max-w-7xl' : 'max-w-content'}">
+				<div class={wide ? 'lg:max-w-[calc(100%-30.5rem)]' : ''}>
+					<Footer {site} />
+				</div>
+			</div>
+		</main>
+
+		<!-- Table of contents (hidden in wide/API mode, which has no room for it) -->
+		{#if !wide}
+			<aside
+				class="sticky top-(--spacing-header) hidden h-[calc(100vh-var(--spacing-header))] w-toc shrink-0 overflow-y-auto py-8 pl-4 xl:block"
+			>
+				<TableOfContents />
+			</aside>
+		{/if}
+	</div>
+</div>
+
+<!-- Mobile sidebar drawer -->
+{#if mobileOpen}
+	<div class="fixed inset-0 z-50 lg:hidden">
+		<button
+			type="button"
+			class="absolute inset-0 bg-black/40 backdrop-blur-sm"
+			aria-label="Close navigation"
+			onclick={() => (mobileOpen = false)}
+			transition:fade={{ duration: 150 }}
+		></button>
+		<div
+			class="absolute top-0 left-0 flex h-full w-72 max-w-[85%] flex-col border-r border-border bg-sidebar"
+			transition:fly={{ x: -300, duration: 200 }}
+		>
+			<div class="min-h-0 flex-1 overflow-y-auto p-6">
+				<Sidebar sections={sidebar} dropdowns={site.dropdowns} />
+			</div>
+			{#if site.sidebarLinks && site.sidebarLinks.length}
+				<div class="shrink-0 px-6 pb-6">
+					<SidebarFooterLinks links={site.sidebarLinks} />
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}

package/src/lib/components/docs/Footer.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { SiteConfig } from '$lib/types';
+	import DynamicIcon from '$lib/components/DynamicIcon.svelte';
+
+	let { site }: { site: SiteConfig } = $props();
+</script>
+
+<footer
+	class="mt-10 flex flex-col items-start justify-between gap-4 border-t border-border pt-6 text-sm text-fg-subtle sm:flex-row sm:items-center"
+>
+	<div class="flex flex-col gap-3">
+		<div class="flex items-center gap-3">
+			{#if site.github}
+				<a
+					href={site.github}
+					target="_blank"
+					rel="noreferrer"
+					class="transition hover:text-fg"
+					aria-label="GitHub"
+				>
+					<svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+						<path
+							d="M12 1.27a11 11 0 0 0-3.48 21.46c.55.09.73-.24.73-.53v-1.85c-3.03.66-3.67-1.45-3.67-1.45-.5-1.27-1.21-1.61-1.21-1.61-.99-.68.07-.66.07-.66 1.1.08 1.67 1.13 1.67 1.13.97 1.67 2.55 1.19 3.17.91.1-.71.38-1.19.69-1.46-2.42-.28-4.96-1.21-4.96-5.38 0-1.19.42-2.16 1.13-2.92-.11-.28-.49-1.39.11-2.89 0 0 .92-.3 3.02 1.12a10.4 10.4 0 0 1 5.5 0c2.1-1.42 3.02-1.12 3.02-1.12.6 1.5.22 2.61.11 2.89.71.76 1.13 1.73 1.13 2.92 0 4.18-2.55 5.1-4.98 5.37.39.34.74 1 .74 2.03v3.01c0 .29.18.63.74.52A11 11 0 0 0 12 1.27"
+						/>
+					</svg>
+				</a>
+			{/if}
+			{#each site.social ?? [] as link (link.href)}
+				<a
+					href={link.href}
+					target="_blank"
+					rel="noreferrer"
+					class="transition hover:text-fg"
+					aria-label={link.label ?? link.icon}
+				>
+					<DynamicIcon name={link.icon} size={17} />
+				</a>
+			{/each}
+		</div>
+
+		{#if site.footer?.links?.length}
+			<nav class="flex flex-wrap items-center gap-x-4 gap-y-1" aria-label="Footer">
+				{#each site.footer.links as link (link.href)}
+					<a href={link.href} class="transition hover:text-fg">{link.title}</a>
+				{/each}
+			</nav>
+		{/if}
+	</div>
+
+	{#if site.footer?.note}
+		<p>{site.footer.note}</p>
+	{:else}
+		<p>
+			Powered by
+			<a href="https://axerity.com" class="font-semibold text-fg-muted transition hover:text-fg">
+				Axerity
+			</a>
+		</p>
+	{/if}
+</footer>

package/src/lib/components/docs/Mermaid.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { afterNavigate } from '$app/navigation';
+	import { theme } from '$lib/state/theme.svelte';
+
+	type MermaidApi = typeof import('mermaid').default;
+	let mermaid: MermaidApi | null = null;
+
+	async function render(resolved: 'light' | 'dark') {
+		const blocks = Array.from(document.querySelectorAll('pre.mermaid')) as HTMLElement[];
+		if (!blocks.length) return;
+
+		if (!mermaid) mermaid = (await import('mermaid')).default;
+
+		for (const block of blocks) {
+			if (block.dataset.src === undefined) block.dataset.src = block.textContent ?? '';
+			block.removeAttribute('data-processed');
+			block.innerHTML = block.dataset.src;
+		}
+
+		mermaid.initialize({
+			startOnLoad: false,
+			securityLevel: 'strict',
+			theme: resolved === 'dark' ? 'dark' : 'neutral',
+			fontFamily: 'inherit'
+		});
+
+		await mermaid.run({ nodes: blocks });
+	}
+
+	$effect(() => {
+		const resolved = theme.resolved;
+		tick().then(() => render(resolved));
+	});
+
+	afterNavigate(() => {
+		tick().then(() => render(theme.resolved));
+	});
+</script>

package/src/lib/components/docs/Navbar.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import Menu from '@lucide/svelte/icons/menu';
+	import Search from '@lucide/svelte/icons/search';
+	import type { SiteConfig } from '$lib/types';
+	import { activeFor } from '$lib/nav-match';
+	import DynamicIcon from '$lib/components/DynamicIcon.svelte';
+	import ThemeToggle from './ThemeToggle.svelte';
+	import VersionSwitcher from './VersionSwitcher.svelte';
+	import { searchState } from '$lib/state/search.svelte';
+
+	let {
+		site,
+		onMenuClick,
+		resolveVersion
+	}: {
+		site: SiteConfig;
+		onMenuClick?: () => void;
+		resolveVersion?: (pathname: string, versionPath: string) => string;
+	} = $props();
+
+	const innerClass = $derived(
+		(site.layout ?? 'flat') === 'boxed'
+			? 'mx-auto flex h-full max-w-400 items-center gap-4 px-4 sm:px-6'
+			: 'flex h-full items-center gap-4 px-4 sm:px-6'
+	);
+
+	const activeDropdown = $derived(
+		site.dropdowns && site.dropdowns.length
+			? (activeFor(page.url.pathname, site.dropdowns) ?? site.dropdowns[0])
+			: undefined
+	);
+
+	const tabs = $derived(activeDropdown?.tabs ?? site.topNav);
+	const activeTab = $derived(activeFor(page.url.pathname, tabs));
+</script>
+
+<header
+	class="sticky top-0 z-40 h-(--spacing-header) border-b border-border bg-header/80 backdrop-blur-md"
+>
+	<div class={innerClass}>
+		<!-- Mobile sidebar toggle -->
+		<button
+			type="button"
+			onclick={onMenuClick}
+			class="-ml-1 inline-flex h-9 w-9 items-center justify-center rounded-lg text-fg-muted hover:bg-bg-subtle hover:text-fg lg:hidden"
+			aria-label="Open navigation"
+		>
+			<Menu size={20} />
+		</button>
+
+		<a
+			href={site.logo?.href ?? '/'}
+			class="flex shrink-0 items-center gap-2"
+			aria-label={site.logo?.alt ?? site.name}
+		>
+			{#if site.logo?.light || site.logo?.dark}
+				{#if site.logo.light}
+					<img
+						src={site.logo.light}
+						alt={site.logo.alt ?? site.name}
+						class="h-6 w-auto dark:hidden"
+					/>
+				{/if}
+				{#if site.logo.dark}
+					<img
+						src={site.logo.dark}
+						alt={site.logo.alt ?? site.name}
+						class="hidden h-6 w-auto dark:block"
+					/>
+				{/if}
+			{:else}
+				<span class="text-base font-semibold text-fg">{site.name}</span>
+			{/if}
+		</a>
+
+		{#if site.versions && site.versions.length}
+			<VersionSwitcher versions={site.versions} {resolveVersion} />
+		{/if}
+
+		<nav class="hidden items-center gap-1 md:flex" aria-label="Main">
+			{#each tabs as tab (tab.href)}
+				<a
+					href={tab.href}
+					target={tab.external ? '_blank' : undefined}
+					rel={tab.external ? 'noreferrer' : undefined}
+					aria-current={tab === activeTab ? 'page' : undefined}
+					class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition
+						{tab === activeTab ? 'text-accent' : 'text-fg-muted hover:text-fg'}"
+				>
+					{#if tab.icon}
+						<DynamicIcon name={tab.icon} size={15} />
+					{/if}
+					{tab.title}
+				</a>
+			{/each}
+		</nav>
+
+		<div class="flex flex-1 items-center justify-end gap-2">
+			<!-- Search (full pill on sm+, icon-only on mobile) -->
+			<button
+				type="button"
+				onclick={() => (searchState.open = true)}
+				class="hidden w-56 items-center gap-2 rounded-lg border border-border bg-surface px-3 py-1.5 text-sm text-fg-subtle transition hover:border-border-strong hover:text-fg-muted sm:flex lg:w-72"
+				aria-label="Search documentation"
+			>
+				<Search size={15} />
+				<span>Search</span>
+				<kbd
+					class="ml-auto rounded border border-border bg-bg-subtle px-1.5 py-0.5 font-mono text-[10px] text-fg-subtle"
+				>
+					⌘K
+				</kbd>
+			</button>
+			<button
+				type="button"
+				onclick={() => (searchState.open = true)}
+				class="inline-flex h-9 w-9 items-center justify-center rounded-lg text-fg-muted transition hover:bg-bg-subtle hover:text-fg sm:hidden"
+				aria-label="Search documentation"
+			>
+				<Search size={18} />
+			</button>
+
+			{#if site.github}
+				<a
+					href={site.github}
+					target="_blank"
+					rel="noreferrer"
+					class="inline-flex h-9 w-9 items-center justify-center rounded-lg text-fg-muted transition hover:bg-bg-subtle hover:text-fg"
+					aria-label="GitHub repository"
+				>
+					<!-- Lucide dropped brand marks, so the GitHub glyph is inlined. -->
+					<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+						<path
+							d="M12 1.27a11 11 0 0 0-3.48 21.46c.55.09.73-.24.73-.53v-1.85c-3.03.66-3.67-1.45-3.67-1.45-.5-1.27-1.21-1.61-1.21-1.61-.99-.68.07-.66.07-.66 1.1.08 1.67 1.13 1.67 1.13.97 1.67 2.55 1.19 3.17.91.1-.71.38-1.19.69-1.46-2.42-.28-4.96-1.21-4.96-5.38 0-1.19.42-2.16 1.13-2.92-.11-.28-.49-1.39.11-2.89 0 0 .92-.3 3.02 1.12a10.4 10.4 0 0 1 5.5 0c2.1-1.42 3.02-1.12 3.02-1.12.6 1.5.22 2.61.11 2.89.71.76 1.13 1.73 1.13 2.92 0 4.18-2.55 5.1-4.98 5.37.39.34.74 1 .74 2.03v3.01c0 .29.18.63.74.52A11 11 0 0 0 12 1.27"
+						/>
+					</svg>
+				</a>
+			{/if}
+
+			<ThemeToggle />
+		</div>
+	</div>
+</header>

package/src/lib/components/docs/PageMeta.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import PencilLine from '@lucide/svelte/icons/pencil-line';
+
+	let { editUrl, updated }: { editUrl?: string; updated?: string } = $props();
+
+	const formatted = $derived.by(() => {
+		if (!updated) return undefined;
+		const date = new Date(updated);
+		if (Number.isNaN(date.getTime())) return updated;
+		return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+	});
+</script>
+
+{#if editUrl || formatted}
+	<div
+		class="mt-8 flex flex-wrap items-center justify-between gap-2 border-t border-border pt-4 text-sm text-fg-subtle"
+	>
+		{#if formatted}
+			<span>Last updated {formatted}</span>
+		{:else}
+			<span></span>
+		{/if}
+		{#if editUrl}
+			<a
+				href={editUrl}
+				target="_blank"
+				rel="noreferrer"
+				class="inline-flex items-center gap-1.5 transition hover:text-fg"
+			>
+				<PencilLine size={14} />
+				Edit this page
+			</a>
+		{/if}
+	</div>
+{/if}

package/src/lib/components/docs/PageNav.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import type { NavLink } from '$lib/types';
+
+	let { pages }: { pages: NavLink[] } = $props();
+
+	const index = $derived(pages.findIndex((entry) => entry.href === page.url.pathname));
+	const prev = $derived(index > 0 ? pages[index - 1] : undefined);
+	const next = $derived(index >= 0 && index < pages.length - 1 ? pages[index + 1] : undefined);
+</script>
+
+{#if prev || next}
+	<nav class="mt-12 grid gap-3 border-t border-border pt-6 sm:grid-cols-2" aria-label="Pagination">
+		{#if prev}
+			<a
+				href={prev.href}
+				class="flex items-center gap-3 rounded-lg border border-border p-4 transition hover:border-border-strong hover:bg-bg-subtle"
+			>
+				<ChevronLeft size={18} class="shrink-0 text-fg-subtle" />
+				<span class="min-w-0">
+					<span class="block text-xs text-fg-subtle">Previous</span>
+					<span class="block truncate text-sm font-medium text-fg">{prev.title}</span>
+				</span>
+			</a>
+		{:else}
+			<span class="hidden sm:block"></span>
+		{/if}
+
+		{#if next}
+			<a
+				href={next.href}
+				class="flex items-center justify-end gap-3 rounded-lg border border-border p-4 text-right transition hover:border-border-strong hover:bg-bg-subtle"
+			>
+				<span class="min-w-0">
+					<span class="block text-xs text-fg-subtle">Next</span>
+					<span class="block truncate text-sm font-medium text-fg">{next.title}</span>
+				</span>
+				<ChevronRight size={18} class="shrink-0 text-fg-subtle" />
+			</a>
+		{/if}
+	</nav>
+{/if}