@aureuma/svelta 0.0.1

package/packages/blogkit/src/lib/components/blog/BackLink.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let href: string = '/blog';
+	export let label: string = 'Back to blog';
+</script>
+
+<a
+	href={href}
+	class="inline-flex items-center gap-2 text-xs font-mono uppercase tracking-[0.6px] text-text-sub transition hover:text-text-main"
+>
+	<svg
+		class="size-4"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		aria-hidden="true"
+	>
+		<path d="M15 18l-6-6 6-6" />
+	</svg>
+	<span>{label}</span>
+</a>

package/packages/blogkit/src/lib/components/blog/BlogCard.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { BlogPost } from '../../types/blog';
+	import Avatar from './Avatar.svelte';
+
+	export let post: BlogPost;
+	export let variant: 'default' | 'suggestion' = 'default';
+	$: thumbHeight = variant === 'suggestion' ? 'h-[190px]' : 'h-[280px]';
+</script>
+
+<a href={`/blog/${post.slug}`} class="group block" data-testid="blog-card">
+	<div class="relative overflow-hidden rounded-2xl border border-border-soft/10 bg-background-soft {thumbHeight}">
+		<img
+			src={post.cover}
+			alt={post.title}
+			class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]"
+			loading="lazy"
+		/>
+	</div>
+
+	<div class="mt-4">
+		<p class="text-xs font-mono uppercase tracking-[0.6px] text-brand">{post.category.label}</p>
+		<h3
+			class="mt-1 text-xl font-medium leading-[30px] tracking-tight underline-offset-[6px] decoration-border-soft/30 group-hover:underline"
+		>
+			{post.title}
+		</h3>
+		<p class="mt-2 text-sm leading-6 text-text-sub">{post.excerpt}</p>
+
+		<div class="mt-4 flex items-center gap-3">
+			<Avatar src={post.author.avatar} alt={post.author.name} size={24} />
+			<div class="leading-tight">
+				<div class="text-sm font-medium tracking-tight text-text-main">{post.author.name}</div>
+				<div class="text-xs text-text-muted">{post.author.title}</div>
+			</div>
+		</div>
+	</div>
+</a>

package/packages/blogkit/src/lib/components/blog/BlogHeroCard.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { BlogPost } from '../../types/blog';
+
+	export let post: BlogPost;
+</script>
+
+<a
+	href={`/blog/${post.slug}`}
+	data-testid="blog-hero"
+	class="group relative my-12 block h-[480px] overflow-hidden rounded-3xl shadow-drop-md"
+>
+	<img
+		src={post.cover}
+		alt={post.title}
+		class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
+		loading="eager"
+	/>
+
+	<div class="absolute inset-0 bg-gradient-to-t from-black/65 via-black/25 to-black/0"></div>
+
+	<div class="relative flex h-full flex-col justify-end p-8">
+		<p class="text-xs font-mono uppercase tracking-[0.6px] text-brand">{post.category.label}</p>
+		<h2
+			class="mt-2 max-w-3xl text-3xl font-semibold leading-tight tracking-[-0.8px] text-white md:text-4xl"
+		>
+			{post.title}
+		</h2>
+		<p class="mt-3 max-w-2xl text-base leading-6 text-white/80">{post.excerpt}</p>
+
+		<div class="mt-6 flex items-center gap-2 text-xs font-mono uppercase tracking-[0.6px] text-white/70">
+			<span>{post.dateShort}</span>
+			<span class="text-white/35" aria-hidden="true">•</span>
+			<span>{post.readingTimeShort}</span>
+		</div>
+	</div>
+</a>

package/packages/blogkit/src/lib/components/blog/Container.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	export let size: '4xl' | '5xl' = '5xl';
+	$: max = size === '4xl' ? 'max-w-4xl' : 'max-w-5xl';
+</script>
+
+<div class="mx-auto w-full {max} px-6">
+	<slot />
+</div>

package/packages/blogkit/src/lib/components/blog/ImageLightbox.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { BROWSER } from 'esm-env';
+	import { onDestroy, onMount, tick } from 'svelte';
+
+	export let image: { src: string; alt: string } | null;
+	export let onClose: () => void;
+
+	let dialogEl: HTMLDivElement | null = null;
+
+	$: if (BROWSER) {
+		// Prevent background scroll while open.
+		document.body.style.overflow = image ? 'hidden' : '';
+	}
+
+	$: if (BROWSER && image) {
+		// Ensure the dialog is focusable for Escape-to-close and accessibility.
+		void (async () => {
+			await tick();
+			dialogEl?.focus();
+		})();
+	}
+
+	onMount(() => {
+		if (!BROWSER) return;
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') onClose();
+		};
+		window.addEventListener('keydown', onKeyDown);
+		return () => window.removeEventListener('keydown', onKeyDown);
+	});
+
+	onDestroy(() => {
+		if (!BROWSER) return;
+		document.body.style.overflow = '';
+	});
+</script>
+
+{#if image}
+	<div
+		bind:this={dialogEl}
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-6"
+		role="dialog"
+		aria-modal="true"
+		tabindex="-1"
+	>
+		<button
+			type="button"
+			class="absolute inset-0 cursor-zoom-out"
+			on:click={onClose}
+			aria-label="Close image"
+		></button>
+		<img
+			src={image.src}
+			alt={image.alt}
+			class="relative max-h-[90vh] max-w-[92vw] rounded-2xl border border-white/10 bg-black/10 object-contain"
+		/>
+	</div>
+{/if}

package/packages/blogkit/src/lib/components/blog/MorePosts.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { BlogPost } from '../../types/blog';
+	import BlogCard from './BlogCard.svelte';
+
+	export let posts: BlogPost[];
+</script>
+
+<section class="mt-16" data-testid="blog-more-posts">
+	<h2 class="text-lg font-medium tracking-tight text-text-main">More blog posts to read</h2>
+	<div class="mt-8 grid grid-cols-1 gap-x-5 gap-y-12 md:grid-cols-2">
+		{#each posts as post (post.slug)}
+			<BlogCard post={post} variant="suggestion" />
+		{/each}
+	</div>
+</section>

package/packages/blogkit/src/lib/components/blog/ShareButtons.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { BROWSER } from 'esm-env';
+
+	export let title: string;
+	export let url: string;
+	export let label: string = 'Share this article';
+	export let testId: string | undefined = undefined;
+
+	let copied = false;
+
+	function openShare(href: string) {
+		if (!BROWSER) return;
+		window.open(href, '_blank', 'noopener,noreferrer');
+	}
+
+	async function copyLink() {
+		if (!BROWSER) return;
+		try {
+			await navigator.clipboard.writeText(url);
+			copied = true;
+			window.setTimeout(() => (copied = false), 1200);
+		} catch {
+			// Fallback for older browsers.
+			const ta = document.createElement('textarea');
+			ta.value = url;
+			ta.style.position = 'fixed';
+			ta.style.opacity = '0';
+			document.body.appendChild(ta);
+			ta.select();
+			document.execCommand('copy');
+			document.body.removeChild(ta);
+			copied = true;
+			window.setTimeout(() => (copied = false), 1200);
+		}
+	}
+
+	$: encodedUrl = encodeURIComponent(url);
+	$: encodedTitle = encodeURIComponent(title);
+</script>
+
+<div data-testid={testId}>
+	<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">{label}</p>
+	<div class="mt-3 flex flex-wrap gap-2">
+		<button
+			type="button"
+			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
+			on:click={() =>
+				openShare(`https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`)}
+			aria-label="Share on X"
+		>
+			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
+				<path
+					fill="currentColor"
+					d="M18.9 2H22l-6.8 7.8L23 22h-6.8l-5.3-6.9L4.9 22H2l7.4-8.6L1.5 2h7l4.8 6.2L18.9 2Zm-1.2 18h1.7L7.8 3.9H6.1L17.7 20Z"
+				/>
+			</svg>
+		</button>
+
+		<button
+			type="button"
+			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
+			on:click={() =>
+				openShare(`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`)}
+			aria-label="Share on LinkedIn"
+		>
+			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
+				<path
+					fill="currentColor"
+					d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5ZM0.5 23.5h4V7.98h-4V23.5ZM8 7.98h3.84v2.12h.05c.53-1 1.83-2.12 3.77-2.12 4.03 0 4.78 2.65 4.78 6.1v9.42h-4v-8.36c0-1.99-.03-4.55-2.77-4.55-2.77 0-3.2 2.16-3.2 4.4v8.5H8V7.98Z"
+				/>
+			</svg>
+		</button>
+
+		<button
+			type="button"
+			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
+			on:click={() => openShare(`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`)}
+			aria-label="Share on Facebook"
+		>
+			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
+				<path
+					fill="currentColor"
+					d="M13.5 22v-8h2.7l.4-3H13.5V9.1c0-.9.3-1.6 1.7-1.6h1.6V4.8c-.3 0-1.4-.1-2.7-.1-2.7 0-4.5 1.6-4.5 4.6V11H7v3h2.6v8h3.9Z"
+				/>
+			</svg>
+		</button>
+
+		<button
+			type="button"
+			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
+			on:click={copyLink}
+			aria-label="Copy link"
+		>
+			<svg
+				viewBox="0 0 24 24"
+				class="size-4"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<path d="M10 13a5 5 0 0 1 0-7l1-1a5 5 0 0 1 7 7l-1 1" />
+				<path d="M14 11a5 5 0 0 1 0 7l-1 1a5 5 0 0 1-7-7l1-1" />
+			</svg>
+		</button>
+	</div>
+
+	{#if copied}
+		<p class="mt-2 text-xs font-mono uppercase tracking-[0.6px] text-brand">Copied</p>
+	{/if}
+</div>

package/packages/blogkit/src/lib/components/blog/SummaryCard.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	export let summary: string;
+</script>
+
+<section
+	class="rounded-2xl border border-border-soft/10 bg-background-soft p-4"
+	data-testid="blog-summary"
+>
+	<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">AI SUMMARY</p>
+	<p class="mt-2 text-sm leading-6 text-text-sub">{summary}</p>
+</section>

package/packages/blogkit/src/lib/components/blog/TagTabs.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { BlogCategory } from '../../types/blog';
+
+	export let categories: BlogCategory[];
+	export let selected: string; // "" means all
+	export let onSelect: (slug: string) => void;
+	$: items = [{ label: 'All articles', slug: '' }, ...categories];
+</script>
+
+<div class="relative" data-testid="blog-tags">
+	<div
+		class="fade-mask-x no-scrollbar flex gap-2 overflow-x-auto py-2 md:flex-wrap md:overflow-visible md:[-webkit-mask-image:none] md:[mask-image:none]"
+		role="tablist"
+		aria-label="Blog categories"
+	>
+		{#each items as item (item.slug)}
+			<button
+				type="button"
+				role="tab"
+				aria-selected={selected === item.slug}
+				class="h-[31px] whitespace-nowrap rounded-full border px-3 text-xs font-mono uppercase tracking-[0.6px] transition
+					hover:bg-background-main/60
+					{selected === item.slug
+						? 'border-border-soft/15 bg-background-main text-text-main'
+						: 'border-border-soft/10 bg-background-soft text-text-sub'}"
+				on:click={() => onSelect(item.slug)}
+			>
+				{item.label}
+			</button>
+		{/each}
+	</div>
+</div>

package/packages/blogkit/src/lib/index.ts

@@ -0,0 +1,15 @@
+// Components
+export { default as Avatar } from './components/blog/Avatar.svelte';
+export { default as BackLink } from './components/blog/BackLink.svelte';
+export { default as BlogCard } from './components/blog/BlogCard.svelte';
+export { default as BlogHeroCard } from './components/blog/BlogHeroCard.svelte';
+export { default as Container } from './components/blog/Container.svelte';
+export { default as ImageLightbox } from './components/blog/ImageLightbox.svelte';
+export { default as MorePosts } from './components/blog/MorePosts.svelte';
+export { default as ShareButtons } from './components/blog/ShareButtons.svelte';
+export { default as SummaryCard } from './components/blog/SummaryCard.svelte';
+export { default as TagTabs } from './components/blog/TagTabs.svelte';
+
+// Types
+export type { BlogAuthor, BlogCategory, BlogPost, BlogPostFull } from './types/blog';
+

package/packages/blogkit/src/lib/server/blog.ts

@@ -0,0 +1,264 @@
+import type { BlogAuthor, BlogCategory, BlogPost, BlogPostFull } from '../types/blog';
+import { DEV } from 'esm-env';
+import matter from 'gray-matter';
+import readingTime from 'reading-time';
+import { z } from 'zod';
+
+const frontmatterSchema = z.object({
+	title: z.string(),
+	date: z.string(),
+	category: z.string(),
+	author: z.string(),
+	cover: z.string(),
+	excerpt: z.string().optional(),
+	summaryAI: z.string().optional(),
+	tags: z.array(z.string()).optional(),
+	featured: z.boolean().optional(),
+	draft: z.boolean().optional()
+});
+
+export type BlogFrontmatter = z.infer<typeof frontmatterSchema>;
+
+export type BlogFrontmatterAdapter = (args: {
+	data: unknown;
+	content: string;
+	slug: string;
+	path: string;
+}) => BlogFrontmatter;
+
+type CompiledModule = {
+	default: BlogPostFull['component'];
+};
+
+export type BlogCreateConfig = {
+	compiledModules: Record<string, () => Promise<CompiledModule>>;
+	rawModules: Record<string, () => Promise<string>>;
+	getAuthor: (id: string) => BlogAuthor;
+	categoryOrder?: string[];
+	// Optional adapter for apps with existing frontmatter schemas.
+	mapFrontmatter?: BlogFrontmatterAdapter;
+};
+
+const DEFAULT_CATEGORY_ORDER = [
+	'all',
+	'ai-trends',
+	'announcements',
+	'for-founders',
+	'engineering',
+	'design',
+	'best-practices'
+];
+
+function slugify(input: string): string {
+	return input
+		.toLowerCase()
+		.trim()
+		.replace(/['"]/g, '')
+		.replace(/[^a-z0-9]+/g, '-')
+		.replace(/^-+|-+$/g, '');
+}
+
+function normalizeCategory(label: string): BlogCategory {
+	const slug = slugify(label);
+	return { label, slug };
+}
+
+function parseISODate(date: string): Date {
+	// Prefer stable UTC parsing for YYYY-MM-DD.
+	if (/^\\d{4}-\\d{2}-\\d{2}$/.test(date)) {
+		const d = new Date(`${date}T00:00:00Z`);
+		if (!Number.isNaN(d.getTime())) return d;
+	}
+	const d = new Date(date);
+	if (Number.isNaN(d.getTime())) throw new Error(`Invalid date: ${date}`);
+	return d;
+}
+
+const fmtLong = new Intl.DateTimeFormat('en-US', {
+	month: 'long',
+	day: 'numeric',
+	year: 'numeric',
+	timeZone: 'UTC'
+});
+const fmtShort = new Intl.DateTimeFormat('en-US', {
+	month: 'short',
+	day: 'numeric',
+	year: 'numeric',
+	timeZone: 'UTC'
+});
+
+function stripForExcerpt(markdown: string): string {
+	return (
+		markdown
+			// remove fenced code blocks
+			.replace(/```[\s\S]*?```/g, '')
+			// remove images
+			.replace(/!\[[^\]]*\]\([^)]*\)/g, '')
+			// remove links but keep text
+			.replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+			// remove headings markers
+			.replace(/^#{1,6}\s+/gm, '')
+			// remove blockquote markers
+			.replace(/^>\s+/gm, '')
+			// remove emphasis markers
+			.replace(/[*_`]/g, '')
+			// collapse whitespace
+			.replace(/\s+/g, ' ')
+			.trim()
+	);
+}
+
+function excerptFromContent(content: string): string {
+	const text = stripForExcerpt(content);
+	if (!text) return '';
+	return text.length > 180 ? `${text.slice(0, 177).trimEnd()}...` : text;
+}
+
+function minutesToLabels(minutes: number) {
+	const m = Math.max(1, Math.round(minutes));
+	const unit = m === 1 ? 'minute' : 'minutes';
+	return {
+		minutes: m,
+		short: `${m} min read`,
+		long: `${m} ${unit} read`
+	};
+}
+
+export function createBlog(config: BlogCreateConfig) {
+	const categoryOrder = config.categoryOrder ?? DEFAULT_CATEGORY_ORDER;
+
+	let cachedMetaIndex: BlogPost[] | null = null;
+	let cachedFullIndex: BlogPostFull[] | null = null;
+	let cachedSlugToPath: Map<string, string> | null = null;
+
+	function getSlugToPath(): Map<string, string> {
+		if (!DEV && cachedSlugToPath) return cachedSlugToPath;
+
+		const m = new Map<string, string>();
+		const paths = Object.keys(config.rawModules).sort();
+		for (const path of paths) {
+			const file = path.split('/').pop();
+			const slug = file?.replace(/\.md(?:\?.*)?$/, '');
+			if (!slug) continue;
+			m.set(slug, path);
+		}
+
+		if (!DEV) cachedSlugToPath = m;
+		return m;
+	}
+
+	async function buildMetaIndex(): Promise<BlogPost[]> {
+		if (!DEV && cachedMetaIndex) return cachedMetaIndex;
+
+		const posts: BlogPost[] = [];
+		const paths = Object.keys(config.rawModules).sort();
+
+		for (const path of paths) {
+			const file = path.split('/').pop();
+			// Glob keys can include query strings depending on bundler usage; normalize aggressively.
+			const slug = file?.replace(/\.md(?:\?.*)?$/, '');
+			if (!slug) continue;
+
+			const rawFn = config.rawModules[path];
+			if (!rawFn) continue;
+
+			const raw = await rawFn();
+
+			const { data, content } = matter(raw);
+			const metadata: BlogFrontmatter = config.mapFrontmatter
+				? config.mapFrontmatter({ data, content, slug, path })
+				: frontmatterSchema.parse(data);
+			if (metadata.draft) continue;
+
+			const dateObj = parseISODate(metadata.date);
+			const rt = minutesToLabels(readingTime(content).minutes);
+			const category = normalizeCategory(metadata.category);
+			const excerpt = metadata.excerpt?.trim() || excerptFromContent(content);
+
+			posts.push({
+				slug,
+				title: metadata.title.trim(),
+				excerpt,
+				category,
+				tags: metadata.tags ?? [],
+				author: config.getAuthor(metadata.author),
+				date: metadata.date,
+				dateLong: fmtLong.format(dateObj),
+				dateShort: fmtShort.format(dateObj),
+				readingMinutes: rt.minutes,
+				readingTimeShort: rt.short,
+				readingTimeLong: rt.long,
+				cover: metadata.cover,
+				summaryAI: metadata.summaryAI,
+				featured: Boolean(metadata.featured)
+			});
+		}
+
+		posts.sort((a, b) => parseISODate(b.date).getTime() - parseISODate(a.date).getTime());
+
+		if (!DEV) cachedMetaIndex = posts;
+		return posts;
+	}
+
+	async function getAllPosts(): Promise<BlogPost[]> {
+		return buildMetaIndex();
+	}
+
+	async function getAllPostsFull(): Promise<BlogPostFull[]> {
+		if (!DEV && cachedFullIndex) return cachedFullIndex;
+
+		const meta = await buildMetaIndex();
+		const slugToPath = getSlugToPath();
+
+		const full: BlogPostFull[] = [];
+		for (const post of meta) {
+			const path = slugToPath.get(post.slug);
+			const compiledFn = path ? config.compiledModules[path] : undefined;
+			if (!compiledFn) continue;
+			const compiled = await compiledFn();
+			full.push({ ...post, component: compiled.default });
+		}
+
+		if (!DEV) cachedFullIndex = full;
+		return full;
+	}
+
+	async function getPostBySlug(slug: string): Promise<BlogPostFull | null> {
+		const meta = await buildMetaIndex();
+		const post = meta.find((p) => p.slug === slug) ?? null;
+		if (!post) return null;
+
+		const path = getSlugToPath().get(slug);
+		const compiledFn = path ? config.compiledModules[path] : undefined;
+		if (!compiledFn) return null;
+
+		const compiled = await compiledFn();
+		return { ...post, component: compiled.default };
+	}
+
+	async function getCategories(): Promise<BlogCategory[]> {
+		const posts = await getAllPosts();
+		const map = new Map<string, string>();
+
+		for (const p of posts) map.set(p.category.slug, p.category.label);
+
+		return Array.from(map.entries())
+			.map(([slug, label]) => ({ slug, label }))
+			.sort((a, b) => {
+				const ai = categoryOrder.indexOf(a.slug);
+				const bi = categoryOrder.indexOf(b.slug);
+				if (ai === -1 && bi === -1) return a.label.localeCompare(b.label);
+				if (ai === -1) return 1;
+				if (bi === -1) return -1;
+				return ai - bi;
+			});
+	}
+
+	async function pickHero(posts?: BlogPost[]): Promise<BlogPost> {
+		const list = posts ?? (await getAllPosts());
+		const featured = list.filter((p) => p.featured);
+		return (featured[0] ?? list[0])!;
+	}
+
+	return { getAllPosts, getAllPostsFull, getPostBySlug, getCategories, pickHero };
+}

package/packages/blogkit/src/lib/server/index.ts

@@ -0,0 +1,2 @@
+export { createBlog, type BlogCreateConfig } from './blog';
+

package/packages/blogkit/src/lib/theme/ThemeSwitcher.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { ThemeController, ThemeMode } from './store';
+
+	export let controller: ThemeController;
+
+	const options: { id: ThemeMode; label: string }[] = [
+		{ id: 'system', label: 'System' },
+		{ id: 'light', label: 'Light' },
+		{ id: 'dark', label: 'Dark' }
+	];
+
+	// Store auto-subscriptions only work on identifiers, so alias it.
+	const themeMode = controller.themeMode;
+	$: currentMode = $themeMode;
+</script>
+
+<div class="flex items-center gap-2">
+	<span class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">Theme</span>
+	<div class="inline-flex rounded-full border border-border-soft/10 bg-background-soft p-1">
+		{#each options as opt (opt.id)}
+			<button
+				type="button"
+				class="rounded-full px-3 py-1 text-xs font-mono uppercase tracking-[0.6px] transition
+					hover:bg-background-main/60
+					{(currentMode === opt.id && 'bg-background-main shadow-sm') || 'text-text-sub'}"
+				onclick={() => controller.setThemeMode(opt.id)}
+				aria-pressed={currentMode === opt.id}
+			>
+				{opt.label}
+			</button>
+		{/each}
+	</div>
+</div>
+

package/packages/blogkit/src/lib/theme/index.ts

@@ -0,0 +1,3 @@
+export { createThemeController, type ThemeController, type ThemeMode } from './store';
+export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';
+