Localizing AlvaBars with Paraglide (en / de / fr / es)

--- /dev/null
+++ b/project.inlang/settings.json
@@ -0,0 +1,17 @@
+{
+	"$schema": "https://inlang.com/schema/project-settings",
+	"modules": [
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
+	],
+	"plugin.inlang.messageFormat": {
+		"pathPattern": "./messages/{locale}.json"
+	},
+	"baseLocale": "en",
+	"locales": ["en", "de", "fr", "es"]
+}

--- a/vite.config.js
+++ b/vite.config.js
@@ -1,3 +1,4 @@
+import { paraglideVitePlugin } from "@inlang/paraglide-js";
 import { defineConfig } from "vite";
 import { sveltekit } from "@sveltejs/kit/vite";
 import tailwindcss from "@tailwindcss/vite";
@@
-  plugins: [tailwindcss(), sveltekit()],
+  plugins: [
+    tailwindcss(),
+    sveltekit(),
+    paraglideVitePlugin({
+      project: "./project.inlang",
+      outdir: "./src/lib/paraglide",
+      emitTsDeclarations: true,
+      // Desktop / Tauri SPA: no URL locales. Prefs write localStorage; else OS language.
+      strategy: ["localStorage", "preferredLanguage", "baseLocale"],
+    }),
+  ],

--- a/svelte.config.js
+++ b/svelte.config.js
@@
     adapter: adapter({
       fallback: "index.html",
     }),
+    // Absolute asset paths avoid locale-prefixed 404s with SPA fallback + Paraglide.
+    paths: {
+      relative: false,
+    },

--- /dev/null
+++ b/src/lib/i18n.ts
@@ -0,0 +1,56 @@
+import {
+	getLocale,
+	locales,
+	localStorageKey,
+	setLocale,
+	type Locale,
+} from "$lib/paraglide/runtime";
+import { m } from "$lib/paraglide/messages";
+
+export type AppLocalePreference = "system" | Locale;
+
+export const LOCALE_PREFERENCES = [
+	{ value: "system", label: "System" },
+	{ value: "en", label: "English" },
+	{ value: "de", label: "Deutsch" },
+	{ value: "fr", label: "Français" },
+	{ value: "es", label: "Español" },
+] as const;
+
+/** Sync Paraglide localStorage with a preference, then reload. */
+export function applyLocalePreference(pref: AppLocalePreference): void {
+	if (pref === "system") {
+		localStorage.removeItem(localStorageKey);
+		location.reload();
+		return;
+	}
+	if (getLocale() === pref) return;
+	setLocale(pref);
+}
+
+/** Apply preference on startup without forcing a reload when already matched. */
+export function syncLocaleFromPreference(pref: AppLocalePreference): void {
+	if (pref === "system") {
+		if (localStorage.getItem(localStorageKey)) {
+			localStorage.removeItem(localStorageKey);
+		}
+		return;
+	}
+	if (localStorage.getItem(localStorageKey) !== pref) {
+		localStorage.setItem(localStorageKey, pref);
+	}
+}
+
+/** Localized label for an export format preset (PNG / TIFF / SVG / PDF). */
+export function exportFormatLabel(id: ExportPresetId): string {
+	/* … m.export_png({ dpi, quality: m.quality_*() }) etc. … */
+}

--- a/src/lib/preferences.ts
+++ b/src/lib/preferences.ts
@@
 export type AppPreferences = {
 	loadSampleData: boolean;
+	/** UI language; `system` follows the OS. */
+	locale: AppLocalePreference;
 	c39: RatioCheckPrefs;
 	c25: RatioCheckPrefs;
 	itf14: Itf14Prefs;
 };
@@
 export function defaultPreferences(): AppPreferences {
 	return {
 		loadSampleData: true,
+		locale: "system",
 		c39: { ratio: 2.5, checkCalc: false, checkDisp: false },
 		/* … */
 	};
 }

--- a/src/lib/components/PreferencesDialog.svelte
+++ b/src/lib/components/PreferencesDialog.svelte
@@
+	import { LOCALE_PREFERENCES, type AppLocalePreference } from "$lib/i18n";
+	import { m } from "$lib/paraglide/messages";
@@
+	function localeOptionLabel(value: AppLocalePreference): string {
+		if (value === "system") return m.locale_system();
+		return LOCALE_PREFERENCES.find((o) => o.value === value)?.label ?? value;
+	}
@@
+				<div class="border-t border-border/80" role="separator"></div>
+
+				<section class="space-y-2">
+					<div class="space-y-1">
+						<Label class="text-xs">{m.locale_label()}</Label>
+						<Select.Root
+							type="single"
+							value={draft.locale}
+							onValueChange={(v) => {
+								if (v && LOCALE_PREFERENCES.some((o) => o.value === v)) {
+									draft.locale = v as AppLocalePreference;
+								}
+							}}
+						>
+							<Select.Trigger class="w-full">{localeLabel}</Select.Trigger>
+							<Select.Portal>
+								<Select.Content>
+									{#each LOCALE_PREFERENCES as opt}
+										<Select.Item value={opt.value} label={localeOptionLabel(opt.value)}>
+											{localeOptionLabel(opt.value)}
+										</Select.Item>
+									{/each}
+								</Select.Content>
+							</Select.Portal>
+						</Select.Root>
+					</div>
+				</section>

--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@
 	function applyPreferences(next: AppPreferences) {
+		const prevLocale = prefs.locale;
 		prefs = next;
 		savePreferences(next);
 		status = $platform === "windows" ? m.settings_saved() : m.preferences_saved();
+		if (next.locale !== prevLocale) applyLocalePreference(next.locale);
 	}

--- /dev/null
+++ b/messages/en.json
@@ -0,0 +1,12 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"locale_system": "System",
+	"locale_label": "Language",
+	"settings": "Settings",
+	"source_clipboard": "Import from clipboard",
+	"imported_rows": "Imported {count} rows",
+	"export_png": "PNG (RGB, {dpi} dpi, {quality})",
+	"sample_tomato_seed": "Tomato seed",
+	"cannot_encode": "Cannot encode \"{data}\" as {symbology}"
+	/* … full catalog ~140 keys … */
+}

--- /dev/null
+++ b/messages/es.json
@@ -0,0 +1,10 @@
+{
+	"locale_system": "Sistema",
+	"locale_label": "Idioma",
+	"settings": "Configuración",
+	"source_clipboard": "Importar desde el portapapeles",
+	"imported_rows": "Se importaron {count} filas",
+	"sample_tomato_seed": "Semillas de tomate"
+	/* … */
+}

--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@
-	let status = $state("Idle");
+	let status = $state<string>(m.idle());
@@
-	status = `Imported ${parsed.length} rows`;
+	status = m.imported_rows({ count: parsed.length });

--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@
+/** Format demo prices: `$3.49` in English, `3,49 EUR` elsewhere. */
+function formatSamplePrice(amount: number): string {
+	const fixed = amount.toFixed(2);
+	if (getLocale() === "en") {
+		return `$${fixed}`;
+	}
+	return `${fixed.replace(".", ",")} EUR`;
+}
@@
 export function sampleRows(): BarcodeRow[] {
-	/* hard-coded English gardening names */
+	const items = [
+		{ barcode: "2004387100009", above: m.sample_tomato_seed(), price: 3.49 },
+		/* … */
+	];
+	return items.map(({ barcode, above, price }) => ({
+		barcode,
+		above,
+		under: formatSamplePrice(price),
+		file: barcode,
+	}));
 }