vite-plugin-lingo 0.0.1

package/dist/plugin/po-parser.js

@@ -0,0 +1,147 @@
+import { po } from 'gettext-parser';
+import { readFileSync, writeFileSync, readdirSync, existsSync } from 'fs';
+import { join, basename } from 'path';
+/**
+ * Parse a .po file and extract translations
+ */
+export function parsePoFile(filePath) {
+    if (!existsSync(filePath)) {
+        throw new Error(`File not found: ${filePath}`);
+    }
+    const content = readFileSync(filePath);
+    const parsed = po.parse(content);
+    const translations = [];
+    for (const [context, messages] of Object.entries(parsed.translations)) {
+        for (const [msgid, data] of Object.entries(messages)) {
+            if (!msgid)
+                continue; // Skip header entry
+            const entry = data;
+            translations.push({
+                msgid,
+                msgstr: entry.msgstr?.[0] || '',
+                context: context || undefined,
+                comments: entry.comments,
+                fuzzy: entry.comments?.flag?.includes('fuzzy') || false
+            });
+        }
+    }
+    return translations;
+}
+/**
+ * Save translations back to a .po file
+ */
+export function savePoFile(filePath, updates) {
+    if (!existsSync(filePath)) {
+        throw new Error(`File not found: ${filePath}`);
+    }
+    const content = readFileSync(filePath);
+    const parsed = po.parse(content);
+    for (const update of updates) {
+        const context = update.context || '';
+        if (parsed.translations[context]?.[update.msgid]) {
+            parsed.translations[context][update.msgid].msgstr = [update.msgstr];
+            // Handle fuzzy flag
+            if (update.fuzzy !== undefined) {
+                const comments = parsed.translations[context][update.msgid].comments || {};
+                if (update.fuzzy) {
+                    comments.flag = 'fuzzy';
+                }
+                else {
+                    delete comments.flag;
+                }
+                parsed.translations[context][update.msgid].comments = comments;
+            }
+        }
+    }
+    const compiled = po.compile(parsed);
+    writeFileSync(filePath, compiled);
+}
+/**
+ * Update a single translation
+ */
+export function updateTranslation(filePath, msgid, msgstr, context) {
+    savePoFile(filePath, [{ msgid, msgstr, context }]);
+}
+/**
+ * Find all .po files in a directory
+ */
+export function findPoFiles(localesDir) {
+    if (!existsSync(localesDir)) {
+        return [];
+    }
+    const files = readdirSync(localesDir).filter((f) => f.endsWith('.po'));
+    return files.map((file) => {
+        const filePath = join(localesDir, file);
+        const code = basename(file, '.po');
+        const translations = parsePoFile(filePath);
+        const translated = translations.filter((t) => t.msgstr && !t.fuzzy).length;
+        const fuzzy = translations.filter((t) => t.fuzzy).length;
+        return {
+            code,
+            name: getLanguageName(code),
+            path: filePath,
+            translations,
+            progress: {
+                total: translations.length,
+                translated,
+                fuzzy
+            }
+        };
+    });
+}
+/**
+ * Get language statistics for all languages
+ */
+export function getLanguageStats(localesDir) {
+    const languages = findPoFiles(localesDir);
+    return languages.map((lang) => ({
+        code: lang.code,
+        name: lang.name,
+        total: lang.progress.total,
+        translated: lang.progress.translated,
+        fuzzy: lang.progress.fuzzy,
+        untranslated: lang.progress.total - lang.progress.translated - lang.progress.fuzzy,
+        progress: lang.progress.total > 0
+            ? Math.round((lang.progress.translated / lang.progress.total) * 100)
+            : 0
+    }));
+}
+/**
+ * Get a human-readable language name from a locale code
+ */
+export function getLanguageName(code) {
+    const names = {
+        en: 'English',
+        es: 'Spanish',
+        fr: 'French',
+        de: 'German',
+        it: 'Italian',
+        pt: 'Portuguese',
+        'pt-BR': 'Portuguese (Brazil)',
+        ja: 'Japanese',
+        ko: 'Korean',
+        zh: 'Chinese',
+        'zh-CN': 'Chinese (Simplified)',
+        'zh-TW': 'Chinese (Traditional)',
+        ru: 'Russian',
+        ar: 'Arabic',
+        nl: 'Dutch',
+        pl: 'Polish',
+        sv: 'Swedish',
+        da: 'Danish',
+        fi: 'Finnish',
+        no: 'Norwegian',
+        tr: 'Turkish',
+        cs: 'Czech',
+        hu: 'Hungarian',
+        ro: 'Romanian',
+        uk: 'Ukrainian',
+        vi: 'Vietnamese',
+        th: 'Thai',
+        id: 'Indonesian',
+        ms: 'Malay',
+        he: 'Hebrew',
+        hi: 'Hindi'
+    };
+    return names[code] || code.toUpperCase();
+}

package/dist/plugin/types.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Plugin configuration options
+ */
+export interface PluginOptions {
+    /** Route where editor is served (default: '/_translations') */
+    route?: string;
+    /** Path to .po files directory */
+    localesDir?: string;
+    /** Enable in production mode (premium) */
+    production?: boolean;
+    /** License key for premium features */
+    licenseKey?: string;
+    /** AI configuration (premium) */
+    ai?: {
+        provider: 'openai' | 'anthropic' | 'google';
+        apiKey?: string;
+    };
+}
+/**
+ * Represents a single translation entry
+ */
+export interface Translation {
+    msgid: string;
+    msgstr: string;
+    context?: string;
+    comments?: {
+        reference?: string;
+        translator?: string;
+        extracted?: string;
+        flag?: string;
+    };
+    fuzzy?: boolean;
+}
+/**
+ * Represents a language with its translations
+ */
+export interface Language {
+    code: string;
+    name: string;
+    path: string;
+    translations: Translation[];
+    progress: {
+        total: number;
+        translated: number;
+        fuzzy: number;
+    };
+}
+/**
+ * API response types
+ */
+export interface ApiResponse<T> {
+    success: boolean;
+    data?: T;
+    error?: string;
+}
+/**
+ * Language stats for the overview
+ */
+export interface LanguageStats {
+    code: string;
+    name: string;
+    total: number;
+    translated: number;
+    fuzzy: number;
+    untranslated: number;
+    progress: number;
+}

package/dist/plugin/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/App.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { Globe, FileText, Funnel } from '@lucide/svelte';
+	import { ModeWatcher } from 'mode-watcher';
+	import LanguageList from './components/LanguageList.svelte';
+	import TranslationEditor from './components/TranslationEditor.svelte';
+	import SearchBar from './components/SearchBar.svelte';
+	import ThemeToggle from './components/ThemeToggle.svelte';
+
+	let selectedLanguage = $state<string | null>(null);
+	let searchQuery = $state('');
+	let filter = $state<'all' | 'translated' | 'untranslated' | 'fuzzy'>('all');
+
+	const filterOptions = [
+		{ value: 'all', label: 'All' },
+		{ value: 'translated', label: 'Translated' },
+		{ value: 'untranslated', label: 'Untranslated' },
+		{ value: 'fuzzy', label: 'Fuzzy' }
+	] as const;
+
+	// Listen for .po file updates via HMR
+	if (import.meta.hot) {
+		import.meta.hot.on('lingo:po-updated', (data: { path: string }) => {
+			console.log('[lingo] .po file updated:', data.path);
+		});
+	}
+</script>
+
+<ModeWatcher />
+
+<div class="flex h-screen flex-col bg-slate-50 dark:bg-slate-900">
+	<!-- Header -->
+	<header class="flex items-center justify-between border-b border-slate-200 bg-white px-6 py-3 shadow-sm dark:border-slate-700 dark:bg-slate-800">
+		<div class="flex items-center gap-3">
+			<div class="flex items-center gap-2">
+				<Globe class="h-5 w-5 text-blue-600 dark:text-blue-400" />
+				<h1 class="text-lg font-semibold text-slate-900 dark:text-white">Lingo</h1>
+			</div>
+			<span class="text-sm text-slate-500 dark:text-slate-400">Translation Editor</span>
+		</div>
+		<div class="flex items-center gap-4">
+			<SearchBar bind:query={searchQuery} />
+			<ThemeToggle />
+		</div>
+	</header>
+
+	<!-- Main content -->
+	<main class="flex flex-1 overflow-hidden">
+		<!-- Sidebar -->
+		<aside class="w-72 overflow-y-auto border-r border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800">
+			<LanguageList bind:selected={selectedLanguage} />
+		</aside>
+
+		<!-- Content area -->
+		<section class="flex flex-1 flex-col overflow-hidden">
+			{#if selectedLanguage}
+				<!-- Filter tabs -->
+				<div class="flex items-center gap-4 border-b border-slate-200 bg-white px-6 py-3 dark:border-slate-700 dark:bg-slate-800">
+					<Funnel class="h-4 w-4 text-slate-400" />
+					<div class="flex gap-1">
+						{#each filterOptions as option (option.value)}
+							<button
+								type="button"
+								class="rounded-md px-3 py-1.5 text-sm font-medium transition-colors {filter === option.value
+									? 'bg-blue-600 text-white dark:bg-blue-500'
+									: 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700'}"
+								onclick={() => (filter = option.value)}
+							>
+								{option.label}
+							</button>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Translation editor -->
+				<TranslationEditor
+					language={selectedLanguage}
+					{searchQuery}
+					{filter}
+				/>
+			{:else}
+				<!-- Empty state -->
+				<div class="flex flex-1 items-center justify-center bg-slate-50 dark:bg-slate-900">
+					<div class="text-center">
+						<FileText class="mx-auto h-12 w-12 text-slate-300 dark:text-slate-600" />
+						<h2 class="mt-4 text-lg font-medium text-slate-900 dark:text-white">Select a language</h2>
+						<p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Choose a language from the sidebar to start editing translations</p>
+					</div>
+				</div>
+			{/if}
+		</section>
+	</main>
+</div>

package/dist/ui/App.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const App: import("svelte").Component<Record<string, never>, {}, "">;
+type App = ReturnType<typeof App>;
+export default App;

package/dist/ui/app.css

@@ -0,0 +1,64 @@
+@import "tailwindcss";
+
+/* Enable class-based dark mode for Tailwind CSS v4 */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Custom base styles */
+@layer base {
+	html {
+		font-family:
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			Roboto,
+			sans-serif;
+	}
+
+	body {
+		@apply bg-slate-50 text-slate-900 antialiased dark:bg-slate-900 dark:text-slate-100;
+	}
+}
+
+/* Custom component styles */
+@layer components {
+	.btn {
+		@apply inline-flex items-center justify-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-offset-slate-900;
+	}
+
+	.btn-primary {
+		@apply bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600;
+	}
+
+	.btn-secondary {
+		@apply bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700;
+	}
+
+	.btn-ghost {
+		@apply hover:bg-slate-100 dark:hover:bg-slate-800;
+	}
+
+	.input {
+		@apply flex h-9 w-full rounded-md border border-slate-300 bg-white px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:border-transparent disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 dark:placeholder:text-slate-500;
+	}
+
+	.badge {
+		@apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium;
+	}
+
+	.badge-success {
+		@apply bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-400;
+	}
+
+	.badge-warning {
+		@apply bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-400;
+	}
+
+	.badge-danger {
+		@apply bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400;
+	}
+
+	.card {
+		@apply rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-800;
+	}
+}

package/dist/ui/components/LanguageList.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Languages, RefreshCw, LoaderCircle, TriangleAlert, FolderOpen } from '@lucide/svelte';
+	import { getRefreshCount } from '../stores/refresh-signal.svelte';
+
+	interface LanguageStats {
+		code: string;
+		name: string;
+		total: number;
+		translated: number;
+		fuzzy: number;
+		untranslated: number;
+		progress: number;
+	}
+
+	let { selected = $bindable<string | null>(null) }: { selected: string | null } = $props();
+
+	let languages = $state<LanguageStats[]>([]);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+	let refreshing = $state(false);
+
+	onMount(async () => {
+		await loadLanguages();
+	});
+
+	// Auto-refresh when translations are updated
+	$effect(() => {
+		const count = getRefreshCount();
+		// Skip the initial mount (count is 0)
+		if (count > 0) {
+			loadLanguages();
+		}
+	});
+
+	async function loadLanguages() {
+		if (refreshing) return;
+		
+		loading = languages.length === 0;
+		refreshing = true;
+		error = null;
+
+		try {
+			const res = await fetch('./api/languages');
+			const result = await res.json();
+
+			if (!result.success) {
+				throw new Error(result.error || 'Failed to load languages');
+			}
+
+			languages = result.data || [];
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load languages';
+		} finally {
+			loading = false;
+			refreshing = false;
+		}
+	}
+
+	function getProgressColor(progress: number): string {
+		if (progress >= 90) return 'bg-emerald-500';
+		if (progress >= 50) return 'bg-amber-500';
+		return 'bg-red-500';
+	}
+
+	function getProgressTextColor(progress: number): string {
+		if (progress >= 90) return 'text-emerald-600 dark:text-emerald-400';
+		if (progress >= 50) return 'text-amber-600 dark:text-amber-400';
+		return 'text-red-600 dark:text-red-400';
+	}
+</script>
+
+<div class="flex h-full flex-col">
+	<!-- Header -->
+	<div class="flex items-center justify-between border-b border-slate-200 px-4 py-3 dark:border-slate-700">
+		<div class="flex items-center gap-2">
+			<Languages class="h-4 w-4 text-slate-400" />
+			<h2 class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Languages</h2>
+		</div>
+		<button
+			type="button"
+			class="rounded-md p-1.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600 disabled:opacity-50 dark:hover:bg-slate-700 dark:hover:text-slate-300"
+			onclick={loadLanguages}
+			disabled={refreshing}
+			title="Refresh languages"
+		>
+			<RefreshCw class="h-4 w-4 {refreshing ? 'animate-spin' : ''}" />
+		</button>
+	</div>
+
+	<!-- Content -->
+	{#if loading}
+		<div class="flex flex-1 flex-col items-center justify-center gap-2 text-slate-500 dark:text-slate-400">
+			<LoaderCircle class="h-6 w-6 animate-spin" />
+			<span class="text-sm">Loading languages...</span>
+		</div>
+	{:else if error}
+		<div class="flex flex-1 flex-col items-center justify-center gap-3 px-4 text-center">
+			<TriangleAlert class="h-8 w-8 text-red-400" />
+			<p class="text-sm text-red-600 dark:text-red-400">{error}</p>
+			<button
+				type="button"
+				class="btn btn-secondary text-sm"
+				onclick={loadLanguages}
+			>
+				Retry
+			</button>
+		</div>
+	{:else if languages.length === 0}
+		<div class="flex flex-1 flex-col items-center justify-center gap-2 px-4 text-center text-slate-500 dark:text-slate-400">
+			<FolderOpen class="h-8 w-8 text-slate-300 dark:text-slate-600" />
+			<p class="text-sm font-medium">No .po files found</p>
+			<p class="text-xs text-slate-400 dark:text-slate-500">Add .po files to your locales directory</p>
+		</div>
+	{:else}
+		<ul class="flex-1 overflow-y-auto p-2">
+			{#each languages as lang (lang.code)}
+				<li>
+					<button
+						type="button"
+						class="group w-full rounded-lg p-3 text-left transition-colors {selected === lang.code
+							? 'bg-blue-50 ring-1 ring-blue-200 dark:bg-blue-900/30 dark:ring-blue-700'
+							: 'hover:bg-slate-50 dark:hover:bg-slate-700/50'}"
+						onclick={() => (selected = lang.code)}
+					>
+						<div class="flex items-start justify-between">
+							<div>
+								<span class="block font-medium text-slate-900 dark:text-white {selected === lang.code ? 'text-blue-900 dark:text-blue-300' : ''}">
+									{lang.name}
+								</span>
+								<span class="text-xs text-slate-500 dark:text-slate-400">{lang.code}</span>
+							</div>
+							<span class="text-xs font-medium {getProgressTextColor(lang.progress)}">
+								{lang.progress}%
+							</span>
+						</div>
+
+						<!-- Progress bar -->
+						<div class="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700">
+							<div
+								class="h-full transition-all duration-300 {getProgressColor(lang.progress)}"
+								style="width: {lang.progress}%"
+							></div>
+						</div>
+
+						<!-- Stats -->
+						<div class="mt-2 flex gap-3 text-xs text-slate-500 dark:text-slate-400">
+							<span class="flex items-center gap-1">
+								<span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
+								{lang.translated}
+							</span>
+							<span class="flex items-center gap-1">
+								<span class="h-1.5 w-1.5 rounded-full bg-amber-500"></span>
+								{lang.fuzzy}
+							</span>
+							<span class="flex items-center gap-1">
+								<span class="h-1.5 w-1.5 rounded-full bg-red-500"></span>
+								{lang.untranslated}
+							</span>
+						</div>
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>

package/dist/ui/components/LanguageList.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    selected: string | null;
+};
+declare const LanguageList: import("svelte").Component<$$ComponentProps, {}, "selected">;
+type LanguageList = ReturnType<typeof LanguageList>;
+export default LanguageList;

package/dist/ui/components/ProgressBar.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	interface Props {
+		value: number;
+		max?: number;
+		showLabel?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+	}
+
+	let { value, max = 100, showLabel = true, size = 'md' }: Props = $props();
+
+	let percentage = $derived(Math.round((value / max) * 100));
+
+	let barColor = $derived.by(() => {
+		if (percentage >= 90) return 'bg-emerald-500';
+		if (percentage >= 50) return 'bg-amber-500';
+		return 'bg-red-500';
+	});
+
+	let textColor = $derived.by(() => {
+		if (percentage >= 90) return 'text-emerald-600 dark:text-emerald-400';
+		if (percentage >= 50) return 'text-amber-600 dark:text-amber-400';
+		return 'text-red-600 dark:text-red-400';
+	});
+
+	let heightClass = $derived.by(() => {
+		switch (size) {
+			case 'sm':
+				return 'h-1';
+			case 'lg':
+				return 'h-2.5';
+			default:
+				return 'h-1.5';
+		}
+	});
+</script>
+
+<div class="flex items-center gap-2">
+	<div class="flex-1 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700 {heightClass}">
+		<div
+			class="h-full transition-all duration-300 {barColor}"
+			style="width: {percentage}%"
+		></div>
+	</div>
+	{#if showLabel}
+		<span class="text-xs font-medium {textColor}">{percentage}%</span>
+	{/if}
+</div>

package/dist/ui/components/ProgressBar.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    value: number;
+    max?: number;
+    showLabel?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/ui/components/SearchBar.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { Search, X } from '@lucide/svelte';
+
+	interface Props {
+		query: string;
+	}
+
+	let { query = $bindable('') }: Props = $props();
+
+	let inputRef = $state<HTMLInputElement | null>(null);
+
+	function handleKeydown(e: KeyboardEvent) {
+		// Ctrl/Cmd + K to focus search
+		if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+			e.preventDefault();
+			inputRef?.focus();
+		}
+		// Escape to clear and blur
+		if (e.key === 'Escape' && document.activeElement === inputRef) {
+			query = '';
+			inputRef?.blur();
+		}
+	}
+
+	// Add global keyboard listener
+	$effect(() => {
+		window.addEventListener('keydown', handleKeydown);
+		return () => window.removeEventListener('keydown', handleKeydown);
+	});
+</script>
+
+<div class="relative flex items-center">
+	<Search class="absolute left-3 h-4 w-4 text-slate-400" />
+	<input
+		bind:this={inputRef}
+		type="text"
+		bind:value={query}
+		placeholder="Search translations..."
+		class="h-9 w-72 rounded-lg border border-slate-300 bg-white pl-9 pr-16 text-sm shadow-sm transition-colors placeholder:text-slate-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 dark:placeholder:text-slate-500 dark:focus:border-blue-400"
+	/>
+	{#if query}
+		<button
+			type="button"
+			class="absolute right-3 rounded p-0.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-slate-700 dark:hover:text-slate-300"
+			onclick={() => (query = '')}
+		>
+			<X class="h-4 w-4" />
+		</button>
+	{:else}
+		<kbd class="absolute right-3 flex items-center gap-0.5 rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-xs text-slate-500 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-400">
+			<span class="text-[10px]">⌘</span>K
+		</kbd>
+	{/if}
+</div>

package/dist/ui/components/SearchBar.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    query: string;
+}
+declare const SearchBar: import("svelte").Component<Props, {}, "query">;
+type SearchBar = ReturnType<typeof SearchBar>;
+export default SearchBar;

package/dist/ui/components/ThemeToggle.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Moon, Sun } from '@lucide/svelte';
+	import { toggleMode, mode } from 'mode-watcher';
+</script>
+
+<button
+	type="button"
+	onclick={toggleMode}
+	class="rounded-md p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200 transition-colors"
+	aria-label="Toggle theme"
+>
+	{#if mode.current === 'dark'}
+		<Sun class="h-5 w-5" />
+	{:else}
+		<Moon class="h-5 w-5" />
+	{/if}
+</button>