♻️ refactor: unify web app patterns across monorepo

- Rename authStore.svelte.ts to auth.svelte.ts (manacore, manadeck, moodlit)
- Add i18n setup to Finance and Mail apps (DE, EN, FR, ES, IT)
- Add feedback pages using shared component to Finance and Mail
- Create @manacore/shared-api-client package with API client factory
- Create @manacore/shared-vite-config package with SSR config helpers
- Create @manacore/shared-stores package with toast, navigation, theme factories

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/finance/apps/web/src/lib/i18n/index.ts

@@ -0,0 +1,58 @@
+/**
+ * i18n setup for Finance app
+ * Supports: DE, EN, FR, ES, IT
+ */
+
+import { browser } from '$app/environment';
+import { init, register, locale, getLocaleFromNavigator } from 'svelte-i18n';
+
+// Supported locales
+export const supportedLocales = ['de', 'en', 'fr', 'es', 'it'] as const;
+export type SupportedLocale = (typeof supportedLocales)[number];
+
+// Register locales
+register('de', () => import('./locales/de.json'));
+register('en', () => import('./locales/en.json'));
+register('fr', () => import('./locales/fr.json'));
+register('es', () => import('./locales/es.json'));
+register('it', () => import('./locales/it.json'));
+
+// Get initial locale
+function getInitialLocale(): SupportedLocale {
+	if (browser) {
+		// Check localStorage first
+		const saved = localStorage.getItem('finance-locale');
+		if (saved && supportedLocales.includes(saved as SupportedLocale)) {
+			return saved as SupportedLocale;
+		}
+
+		// Fall back to browser language
+		const browserLocale = getLocaleFromNavigator();
+		if (browserLocale) {
+			const shortLocale = browserLocale.split('-')[0] as SupportedLocale;
+			if (supportedLocales.includes(shortLocale)) {
+				return shortLocale;
+			}
+		}
+	}
+
+	// Default to German
+	return 'de';
+}
+
+// Initialize i18n at module scope (required for SSR)
+init({
+	fallbackLocale: 'de',
+	initialLocale: getInitialLocale(),
+});
+
+// Set locale and persist
+export function setLocale(newLocale: SupportedLocale) {
+	locale.set(newLocale);
+	if (browser) {
+		localStorage.setItem('finance-locale', newLocale);
+	}
+}
+
+// Wait for locale to be loaded (useful for SSR)
+export { waitLocale } from 'svelte-i18n';

apps/finance/apps/web/src/lib/i18n/locales/de.json

@@ -0,0 +1,133 @@
+{
+	"app": {
+		"name": "Finance",
+		"loading": "Laden..."
+	},
+	"nav": {
+		"dashboard": "Übersicht",
+		"accounts": "Konten",
+		"transactions": "Transaktionen",
+		"budgets": "Budgets",
+		"categories": "Kategorien",
+		"reports": "Berichte",
+		"settings": "Einstellungen",
+		"feedback": "Feedback"
+	},
+	"auth": {
+		"login": "Anmelden",
+		"register": "Registrieren",
+		"logout": "Abmelden",
+		"forgotPassword": "Passwort vergessen",
+		"email": "E-Mail",
+		"password": "Passwort",
+		"confirmPassword": "Passwort bestätigen"
+	},
+	"dashboard": {
+		"title": "Finanzübersicht",
+		"totalBalance": "Gesamtguthaben",
+		"income": "Einnahmen",
+		"expenses": "Ausgaben",
+		"savings": "Ersparnis",
+		"recentTransactions": "Letzte Transaktionen",
+		"budgetOverview": "Budget-Übersicht"
+	},
+	"accounts": {
+		"title": "Konten",
+		"add": "Konto hinzufügen",
+		"edit": "Konto bearbeiten",
+		"delete": "Konto löschen",
+		"name": "Kontoname",
+		"type": "Kontotyp",
+		"balance": "Kontostand",
+		"currency": "Währung",
+		"noAccounts": "Keine Konten vorhanden",
+		"types": {
+			"checking": "Girokonto",
+			"savings": "Sparkonto",
+			"credit": "Kreditkarte",
+			"cash": "Bargeld",
+			"investment": "Investment"
+		}
+	},
+	"transactions": {
+		"title": "Transaktionen",
+		"add": "Transaktion hinzufügen",
+		"edit": "Transaktion bearbeiten",
+		"delete": "Transaktion löschen",
+		"amount": "Betrag",
+		"date": "Datum",
+		"description": "Beschreibung",
+		"category": "Kategorie",
+		"account": "Konto",
+		"type": "Art",
+		"noTransactions": "Keine Transaktionen vorhanden",
+		"types": {
+			"income": "Einnahme",
+			"expense": "Ausgabe",
+			"transfer": "Überweisung"
+		}
+	},
+	"budgets": {
+		"title": "Budgets",
+		"add": "Budget hinzufügen",
+		"edit": "Budget bearbeiten",
+		"delete": "Budget löschen",
+		"name": "Budgetname",
+		"amount": "Betrag",
+		"spent": "Ausgegeben",
+		"remaining": "Verbleibend",
+		"period": "Zeitraum",
+		"category": "Kategorie",
+		"noBudgets": "Keine Budgets vorhanden",
+		"periods": {
+			"weekly": "Wöchentlich",
+			"monthly": "Monatlich",
+			"yearly": "Jährlich"
+		}
+	},
+	"categories": {
+		"title": "Kategorien",
+		"add": "Kategorie hinzufügen",
+		"edit": "Kategorie bearbeiten",
+		"delete": "Kategorie löschen",
+		"name": "Name",
+		"icon": "Symbol",
+		"color": "Farbe",
+		"noCategories": "Keine Kategorien vorhanden"
+	},
+	"reports": {
+		"title": "Berichte",
+		"incomeVsExpenses": "Einnahmen vs. Ausgaben",
+		"categoryBreakdown": "Aufschlüsselung nach Kategorien",
+		"trends": "Trends",
+		"export": "Exportieren"
+	},
+	"settings": {
+		"title": "Einstellungen",
+		"general": "Allgemein",
+		"appearance": "Darstellung",
+		"currency": "Standardwährung",
+		"language": "Sprache",
+		"theme": "Design",
+		"darkMode": "Dunkelmodus",
+		"notifications": "Benachrichtigungen"
+	},
+	"common": {
+		"save": "Speichern",
+		"cancel": "Abbrechen",
+		"delete": "Löschen",
+		"edit": "Bearbeiten",
+		"add": "Hinzufügen",
+		"confirm": "Bestätigen",
+		"yes": "Ja",
+		"no": "Nein",
+		"ok": "OK",
+		"loading": "Laden...",
+		"error": "Fehler",
+		"success": "Erfolg",
+		"back": "Zurück",
+		"search": "Suchen",
+		"filter": "Filtern",
+		"sort": "Sortieren"
+	}
+}

apps/finance/apps/web/src/lib/i18n/locales/en.json

@@ -0,0 +1,133 @@
+{
+	"app": {
+		"name": "Finance",
+		"loading": "Loading..."
+	},
+	"nav": {
+		"dashboard": "Dashboard",
+		"accounts": "Accounts",
+		"transactions": "Transactions",
+		"budgets": "Budgets",
+		"categories": "Categories",
+		"reports": "Reports",
+		"settings": "Settings",
+		"feedback": "Feedback"
+	},
+	"auth": {
+		"login": "Sign In",
+		"register": "Sign Up",
+		"logout": "Sign Out",
+		"forgotPassword": "Forgot Password",
+		"email": "Email",
+		"password": "Password",
+		"confirmPassword": "Confirm Password"
+	},
+	"dashboard": {
+		"title": "Financial Overview",
+		"totalBalance": "Total Balance",
+		"income": "Income",
+		"expenses": "Expenses",
+		"savings": "Savings",
+		"recentTransactions": "Recent Transactions",
+		"budgetOverview": "Budget Overview"
+	},
+	"accounts": {
+		"title": "Accounts",
+		"add": "Add Account",
+		"edit": "Edit Account",
+		"delete": "Delete Account",
+		"name": "Account Name",
+		"type": "Account Type",
+		"balance": "Balance",
+		"currency": "Currency",
+		"noAccounts": "No accounts yet",
+		"types": {
+			"checking": "Checking",
+			"savings": "Savings",
+			"credit": "Credit Card",
+			"cash": "Cash",
+			"investment": "Investment"
+		}
+	},
+	"transactions": {
+		"title": "Transactions",
+		"add": "Add Transaction",
+		"edit": "Edit Transaction",
+		"delete": "Delete Transaction",
+		"amount": "Amount",
+		"date": "Date",
+		"description": "Description",
+		"category": "Category",
+		"account": "Account",
+		"type": "Type",
+		"noTransactions": "No transactions yet",
+		"types": {
+			"income": "Income",
+			"expense": "Expense",
+			"transfer": "Transfer"
+		}
+	},
+	"budgets": {
+		"title": "Budgets",
+		"add": "Add Budget",
+		"edit": "Edit Budget",
+		"delete": "Delete Budget",
+		"name": "Budget Name",
+		"amount": "Amount",
+		"spent": "Spent",
+		"remaining": "Remaining",
+		"period": "Period",
+		"category": "Category",
+		"noBudgets": "No budgets yet",
+		"periods": {
+			"weekly": "Weekly",
+			"monthly": "Monthly",
+			"yearly": "Yearly"
+		}
+	},
+	"categories": {
+		"title": "Categories",
+		"add": "Add Category",
+		"edit": "Edit Category",
+		"delete": "Delete Category",
+		"name": "Name",
+		"icon": "Icon",
+		"color": "Color",
+		"noCategories": "No categories yet"
+	},
+	"reports": {
+		"title": "Reports",
+		"incomeVsExpenses": "Income vs. Expenses",
+		"categoryBreakdown": "Category Breakdown",
+		"trends": "Trends",
+		"export": "Export"
+	},
+	"settings": {
+		"title": "Settings",
+		"general": "General",
+		"appearance": "Appearance",
+		"currency": "Default Currency",
+		"language": "Language",
+		"theme": "Theme",
+		"darkMode": "Dark Mode",
+		"notifications": "Notifications"
+	},
+	"common": {
+		"save": "Save",
+		"cancel": "Cancel",
+		"delete": "Delete",
+		"edit": "Edit",
+		"add": "Add",
+		"confirm": "Confirm",
+		"yes": "Yes",
+		"no": "No",
+		"ok": "OK",
+		"loading": "Loading...",
+		"error": "Error",
+		"success": "Success",
+		"back": "Back",
+		"search": "Search",
+		"filter": "Filter",
+		"sort": "Sort"
+	}
+}

apps/finance/apps/web/src/lib/i18n/locales/es.json

@@ -0,0 +1,133 @@
+{
+	"app": {
+		"name": "Finance",
+		"loading": "Cargando..."
+	},
+	"nav": {
+		"dashboard": "Panel",
+		"accounts": "Cuentas",
+		"transactions": "Transacciones",
+		"budgets": "Presupuestos",
+		"categories": "Categorías",
+		"reports": "Informes",
+		"settings": "Configuración",
+		"feedback": "Feedback"
+	},
+	"auth": {
+		"login": "Iniciar sesión",
+		"register": "Registrarse",
+		"logout": "Cerrar sesión",
+		"forgotPassword": "Olvidé mi contraseña",
+		"email": "Correo electrónico",
+		"password": "Contraseña",
+		"confirmPassword": "Confirmar contraseña"
+	},
+	"dashboard": {
+		"title": "Resumen financiero",
+		"totalBalance": "Saldo total",
+		"income": "Ingresos",
+		"expenses": "Gastos",
+		"savings": "Ahorros",
+		"recentTransactions": "Transacciones recientes",
+		"budgetOverview": "Resumen de presupuesto"
+	},
+	"accounts": {
+		"title": "Cuentas",
+		"add": "Añadir cuenta",
+		"edit": "Editar cuenta",
+		"delete": "Eliminar cuenta",
+		"name": "Nombre de cuenta",
+		"type": "Tipo de cuenta",
+		"balance": "Saldo",
+		"currency": "Moneda",
+		"noAccounts": "Sin cuentas",
+		"types": {
+			"checking": "Cuenta corriente",
+			"savings": "Cuenta de ahorro",
+			"credit": "Tarjeta de crédito",
+			"cash": "Efectivo",
+			"investment": "Inversión"
+		}
+	},
+	"transactions": {
+		"title": "Transacciones",
+		"add": "Añadir transacción",
+		"edit": "Editar transacción",
+		"delete": "Eliminar transacción",
+		"amount": "Importe",
+		"date": "Fecha",
+		"description": "Descripción",
+		"category": "Categoría",
+		"account": "Cuenta",
+		"type": "Tipo",
+		"noTransactions": "Sin transacciones",
+		"types": {
+			"income": "Ingreso",
+			"expense": "Gasto",
+			"transfer": "Transferencia"
+		}
+	},
+	"budgets": {
+		"title": "Presupuestos",
+		"add": "Añadir presupuesto",
+		"edit": "Editar presupuesto",
+		"delete": "Eliminar presupuesto",
+		"name": "Nombre del presupuesto",
+		"amount": "Importe",
+		"spent": "Gastado",
+		"remaining": "Restante",
+		"period": "Período",
+		"category": "Categoría",
+		"noBudgets": "Sin presupuestos",
+		"periods": {
+			"weekly": "Semanal",
+			"monthly": "Mensual",
+			"yearly": "Anual"
+		}
+	},
+	"categories": {
+		"title": "Categorías",
+		"add": "Añadir categoría",
+		"edit": "Editar categoría",
+		"delete": "Eliminar categoría",
+		"name": "Nombre",
+		"icon": "Icono",
+		"color": "Color",
+		"noCategories": "Sin categorías"
+	},
+	"reports": {
+		"title": "Informes",
+		"incomeVsExpenses": "Ingresos vs. Gastos",
+		"categoryBreakdown": "Desglose por categoría",
+		"trends": "Tendencias",
+		"export": "Exportar"
+	},
+	"settings": {
+		"title": "Configuración",
+		"general": "General",
+		"appearance": "Apariencia",
+		"currency": "Moneda predeterminada",
+		"language": "Idioma",
+		"theme": "Tema",
+		"darkMode": "Modo oscuro",
+		"notifications": "Notificaciones"
+	},
+	"common": {
+		"save": "Guardar",
+		"cancel": "Cancelar",
+		"delete": "Eliminar",
+		"edit": "Editar",
+		"add": "Añadir",
+		"confirm": "Confirmar",
+		"yes": "Sí",
+		"no": "No",
+		"ok": "OK",
+		"loading": "Cargando...",
+		"error": "Error",
+		"success": "Éxito",
+		"back": "Atrás",
+		"search": "Buscar",
+		"filter": "Filtrar",
+		"sort": "Ordenar"
+	}
+}

apps/finance/apps/web/src/lib/i18n/locales/fr.json

@@ -0,0 +1,133 @@
+{
+	"app": {
+		"name": "Finance",
+		"loading": "Chargement..."
+	},
+	"nav": {
+		"dashboard": "Tableau de bord",
+		"accounts": "Comptes",
+		"transactions": "Transactions",
+		"budgets": "Budgets",
+		"categories": "Catégories",
+		"reports": "Rapports",
+		"settings": "Paramètres",
+		"feedback": "Feedback"
+	},
+	"auth": {
+		"login": "Se connecter",
+		"register": "S'inscrire",
+		"logout": "Se déconnecter",
+		"forgotPassword": "Mot de passe oublié",
+		"email": "E-mail",
+		"password": "Mot de passe",
+		"confirmPassword": "Confirmer le mot de passe"
+	},
+	"dashboard": {
+		"title": "Aperçu financier",
+		"totalBalance": "Solde total",
+		"income": "Revenus",
+		"expenses": "Dépenses",
+		"savings": "Épargne",
+		"recentTransactions": "Transactions récentes",
+		"budgetOverview": "Aperçu du budget"
+	},
+	"accounts": {
+		"title": "Comptes",
+		"add": "Ajouter un compte",
+		"edit": "Modifier le compte",
+		"delete": "Supprimer le compte",
+		"name": "Nom du compte",
+		"type": "Type de compte",
+		"balance": "Solde",
+		"currency": "Devise",
+		"noAccounts": "Aucun compte",
+		"types": {
+			"checking": "Compte courant",
+			"savings": "Compte épargne",
+			"credit": "Carte de crédit",
+			"cash": "Espèces",
+			"investment": "Investissement"
+		}
+	},
+	"transactions": {
+		"title": "Transactions",
+		"add": "Ajouter une transaction",
+		"edit": "Modifier la transaction",
+		"delete": "Supprimer la transaction",
+		"amount": "Montant",
+		"date": "Date",
+		"description": "Description",
+		"category": "Catégorie",
+		"account": "Compte",
+		"type": "Type",
+		"noTransactions": "Aucune transaction",
+		"types": {
+			"income": "Revenu",
+			"expense": "Dépense",
+			"transfer": "Virement"
+		}
+	},
+	"budgets": {
+		"title": "Budgets",
+		"add": "Ajouter un budget",
+		"edit": "Modifier le budget",
+		"delete": "Supprimer le budget",
+		"name": "Nom du budget",
+		"amount": "Montant",
+		"spent": "Dépensé",
+		"remaining": "Restant",
+		"period": "Période",
+		"category": "Catégorie",
+		"noBudgets": "Aucun budget",
+		"periods": {
+			"weekly": "Hebdomadaire",
+			"monthly": "Mensuel",
+			"yearly": "Annuel"
+		}
+	},
+	"categories": {
+		"title": "Catégories",
+		"add": "Ajouter une catégorie",
+		"edit": "Modifier la catégorie",
+		"delete": "Supprimer la catégorie",
+		"name": "Nom",
+		"icon": "Icône",
+		"color": "Couleur",
+		"noCategories": "Aucune catégorie"
+	},
+	"reports": {
+		"title": "Rapports",
+		"incomeVsExpenses": "Revenus vs. Dépenses",
+		"categoryBreakdown": "Répartition par catégorie",
+		"trends": "Tendances",
+		"export": "Exporter"
+	},
+	"settings": {
+		"title": "Paramètres",
+		"general": "Général",
+		"appearance": "Apparence",
+		"currency": "Devise par défaut",
+		"language": "Langue",
+		"theme": "Thème",
+		"darkMode": "Mode sombre",
+		"notifications": "Notifications"
+	},
+	"common": {
+		"save": "Enregistrer",
+		"cancel": "Annuler",
+		"delete": "Supprimer",
+		"edit": "Modifier",
+		"add": "Ajouter",
+		"confirm": "Confirmer",
+		"yes": "Oui",
+		"no": "Non",
+		"ok": "OK",
+		"loading": "Chargement...",
+		"error": "Erreur",
+		"success": "Succès",
+		"back": "Retour",
+		"search": "Rechercher",
+		"filter": "Filtrer",
+		"sort": "Trier"
+	}
+}

apps/finance/apps/web/src/lib/i18n/locales/it.json

@@ -0,0 +1,133 @@
+{
+	"app": {
+		"name": "Finance",
+		"loading": "Caricamento..."
+	},
+	"nav": {
+		"dashboard": "Panoramica",
+		"accounts": "Conti",
+		"transactions": "Transazioni",
+		"budgets": "Budget",
+		"categories": "Categorie",
+		"reports": "Report",
+		"settings": "Impostazioni",
+		"feedback": "Feedback"
+	},
+	"auth": {
+		"login": "Accedi",
+		"register": "Registrati",
+		"logout": "Esci",
+		"forgotPassword": "Password dimenticata",
+		"email": "E-mail",
+		"password": "Password",
+		"confirmPassword": "Conferma password"
+	},
+	"dashboard": {
+		"title": "Panoramica finanziaria",
+		"totalBalance": "Saldo totale",
+		"income": "Entrate",
+		"expenses": "Spese",
+		"savings": "Risparmi",
+		"recentTransactions": "Transazioni recenti",
+		"budgetOverview": "Panoramica budget"
+	},
+	"accounts": {
+		"title": "Conti",
+		"add": "Aggiungi conto",
+		"edit": "Modifica conto",
+		"delete": "Elimina conto",
+		"name": "Nome conto",
+		"type": "Tipo conto",
+		"balance": "Saldo",
+		"currency": "Valuta",
+		"noAccounts": "Nessun conto",
+		"types": {
+			"checking": "Conto corrente",
+			"savings": "Conto risparmio",
+			"credit": "Carta di credito",
+			"cash": "Contanti",
+			"investment": "Investimento"
+		}
+	},
+	"transactions": {
+		"title": "Transazioni",
+		"add": "Aggiungi transazione",
+		"edit": "Modifica transazione",
+		"delete": "Elimina transazione",
+		"amount": "Importo",
+		"date": "Data",
+		"description": "Descrizione",
+		"category": "Categoria",
+		"account": "Conto",
+		"type": "Tipo",
+		"noTransactions": "Nessuna transazione",
+		"types": {
+			"income": "Entrata",
+			"expense": "Spesa",
+			"transfer": "Trasferimento"
+		}
+	},
+	"budgets": {
+		"title": "Budget",
+		"add": "Aggiungi budget",
+		"edit": "Modifica budget",
+		"delete": "Elimina budget",
+		"name": "Nome budget",
+		"amount": "Importo",
+		"spent": "Speso",
+		"remaining": "Rimanente",
+		"period": "Periodo",
+		"category": "Categoria",
+		"noBudgets": "Nessun budget",
+		"periods": {
+			"weekly": "Settimanale",
+			"monthly": "Mensile",
+			"yearly": "Annuale"
+		}
+	},
+	"categories": {
+		"title": "Categorie",
+		"add": "Aggiungi categoria",
+		"edit": "Modifica categoria",
+		"delete": "Elimina categoria",
+		"name": "Nome",
+		"icon": "Icona",
+		"color": "Colore",
+		"noCategories": "Nessuna categoria"
+	},
+	"reports": {
+		"title": "Report",
+		"incomeVsExpenses": "Entrate vs. Spese",
+		"categoryBreakdown": "Suddivisione per categoria",
+		"trends": "Tendenze",
+		"export": "Esporta"
+	},
+	"settings": {
+		"title": "Impostazioni",
+		"general": "Generale",
+		"appearance": "Aspetto",
+		"currency": "Valuta predefinita",
+		"language": "Lingua",
+		"theme": "Tema",
+		"darkMode": "Modalità scura",
+		"notifications": "Notifiche"
+	},
+	"common": {
+		"save": "Salva",
+		"cancel": "Annulla",
+		"delete": "Elimina",
+		"edit": "Modifica",
+		"add": "Aggiungi",
+		"confirm": "Conferma",
+		"yes": "Sì",
+		"no": "No",
+		"ok": "OK",
+		"loading": "Caricamento...",
+		"error": "Errore",
+		"success": "Successo",
+		"back": "Indietro",
+		"search": "Cerca",
+		"filter": "Filtra",
+		"sort": "Ordina"
+	}
+}

apps/finance/apps/web/src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '../app.css';
+	import '$lib/i18n';
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { authStore } from '$lib/stores';

apps/finance/apps/web/src/routes/feedback/+page.svelte

@@ -1,124 +1,20 @@
 <script lang="ts">
-	let type = $state<'bug' | 'feature' | 'other'>('feature');
+	import { FeedbackPage } from '@manacore/shared-feedback-ui';
-	let message = $state('');
+	import { createFeedbackService } from '@manacore/shared-feedback-service';
-	let email = $state('');
+	import { authStore } from '$lib/stores/auth.svelte';
-	let isSubmitting = $state(false);
-	let success = $state(false);
-	let error = $state<string | null>(null);
 
-	async function handleSubmit(e: Event) {
+	const feedbackService = createFeedbackService({
-		e.preventDefault();
+		appName: 'finance',
-		isSubmitting = true;
+		apiUrl: 'http://localhost:3001', // Mana Core API
-		error = null;
+	});
 
-		try {
+	async function handleSubmit(data: { type: string; message: string; email?: string }) {
-			// TODO: Implement feedback submission
+		const token = await authStore.getAccessToken();
-			console.log('Feedback:', { type, message, email });
+		return feedbackService.submit({
-			success = true;
+			...data,
-		} catch (e) {
+			token: token || undefined,
-			error = e instanceof Error ? e.message : 'Feedback konnte nicht gesendet werden';
+		});
-		} finally {
-			isSubmitting = false;
-		}
 	}
 </script>
 
-<svelte:head>
+<FeedbackPage appName="Finance" onSubmit={handleSubmit} userEmail={authStore.user?.email} />
-	<title>Feedback | Finance</title>
-</svelte:head>
-
-<div class="mx-auto max-w-2xl space-y-6">
-	<h1 class="text-2xl font-bold">Feedback</h1>
-
-	{#if success}
-		<div class="rounded-lg border border-green-500/50 bg-green-500/10 p-8 text-center">
-			<div class="mb-4 text-4xl">✅</div>
-			<h2 class="text-xl font-semibold text-green-600">Vielen Dank für Ihr Feedback!</h2>
-			<p class="mt-2 text-muted-foreground">Wir werden uns Ihre Nachricht ansehen.</p>
-			<a
-				href="/"
-				class="mt-4 inline-block rounded-lg bg-primary px-6 py-2 text-primary-foreground hover:bg-primary/90"
-			>
-				Zurück zur Startseite
-			</a>
-		</div>
-	{:else}
-		<form onsubmit={handleSubmit} class="space-y-6">
-			<div class="rounded-lg border border-border bg-card p-6">
-				<h2 class="mb-4 text-lg font-semibold">Was möchten Sie uns mitteilen?</h2>
-
-				<div class="mb-4 flex gap-2">
-					<button
-						type="button"
-						onclick={() => (type = 'bug')}
-						class="rounded-lg px-4 py-2 {type === 'bug'
-							? 'bg-red-500 text-white'
-							: 'border border-border hover:bg-accent'}"
-					>
-						🐛 Bug melden
-					</button>
-					<button
-						type="button"
-						onclick={() => (type = 'feature')}
-						class="rounded-lg px-4 py-2 {type === 'feature'
-							? 'bg-blue-500 text-white'
-							: 'border border-border hover:bg-accent'}"
-					>
-						💡 Feature-Wunsch
-					</button>
-					<button
-						type="button"
-						onclick={() => (type = 'other')}
-						class="rounded-lg px-4 py-2 {type === 'other'
-							? 'bg-gray-500 text-white'
-							: 'border border-border hover:bg-accent'}"
-					>
-						💬 Sonstiges
-					</button>
-				</div>
-
-				<div class="space-y-4">
-					<div>
-						<label for="message" class="mb-1 block text-sm font-medium">Ihre Nachricht</label>
-						<textarea
-							id="message"
-							bind:value={message}
-							required
-							rows="6"
-							class="w-full rounded-lg border border-border bg-background px-3 py-2"
-							placeholder="Beschreiben Sie Ihr Anliegen..."
-						></textarea>
-					</div>
-
-					<div>
-						<label for="email" class="mb-1 block text-sm font-medium">E-Mail (optional)</label>
-						<input
-							id="email"
-							type="email"
-							bind:value={email}
-							class="w-full rounded-lg border border-border bg-background px-3 py-2"
-							placeholder="ihre@email.de"
-						/>
-						<p class="mt-1 text-xs text-muted-foreground">
-							Falls wir Rückfragen haben oder Sie über Updates informieren möchten
-						</p>
-					</div>
-				</div>
-			</div>
-
-			{#if error}
-				<div class="rounded-lg bg-destructive/10 p-4 text-destructive">{error}</div>
-			{/if}
-
-			<div class="flex justify-end">
-				<button
-					type="submit"
-					disabled={isSubmitting || !message.trim()}
-					class="rounded-lg bg-primary px-6 py-2 text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-				>
-					{isSubmitting ? 'Senden...' : 'Feedback senden'}
-				</button>
-			</div>
-		</form>
-	{/if}
-</div>

apps/mail/apps/web/src/lib/i18n/index.ts

@@ -0,0 +1,58 @@
+/**
+ * i18n setup for Mail app
+ * Supports: DE, EN, FR, ES, IT
+ */
+
+import { browser } from '$app/environment';
+import { init, register, locale, getLocaleFromNavigator } from 'svelte-i18n';
+
+// Supported locales
+export const supportedLocales = ['de', 'en', 'fr', 'es', 'it'] as const;
+export type SupportedLocale = (typeof supportedLocales)[number];
+
+// Register locales
+register('de', () => import('./locales/de.json'));
+register('en', () => import('./locales/en.json'));
+register('fr', () => import('./locales/fr.json'));
+register('es', () => import('./locales/es.json'));
+register('it', () => import('./locales/it.json'));
+
+// Get initial locale
+function getInitialLocale(): SupportedLocale {
+	if (browser) {
+		// Check localStorage first
+		const saved = localStorage.getItem('mail-locale');
+		if (saved && supportedLocales.includes(saved as SupportedLocale)) {
+			return saved as SupportedLocale;
+		}
+
+		// Fall back to browser language
+		const browserLocale = getLocaleFromNavigator();
+		if (browserLocale) {
+			const shortLocale = browserLocale.split('-')[0] as SupportedLocale;
+			if (supportedLocales.includes(shortLocale)) {
+				return shortLocale;
+			}
+		}
+	}
+
+	// Default to German
+	return 'de';
+}
+
+// Initialize i18n at module scope (required for SSR)
+init({
+	fallbackLocale: 'de',
+	initialLocale: getInitialLocale(),
+});
+
+// Set locale and persist
+export function setLocale(newLocale: SupportedLocale) {
+	locale.set(newLocale);
+	if (browser) {
+		localStorage.setItem('mail-locale', newLocale);
+	}
+}
+
+// Wait for locale to be loaded (useful for SSR)
+export { waitLocale } from 'svelte-i18n';

apps/mail/apps/web/src/lib/i18n/locales/de.json

@@ -0,0 +1,105 @@
+{
+	"app": {
+		"name": "Mail",
+		"loading": "Laden..."
+	},
+	"nav": {
+		"inbox": "Posteingang",
+		"sent": "Gesendet",
+		"drafts": "Entwürfe",
+		"starred": "Markiert",
+		"archive": "Archiv",
+		"trash": "Papierkorb",
+		"spam": "Spam",
+		"settings": "Einstellungen",
+		"feedback": "Feedback"
+	},
+	"auth": {
+		"login": "Anmelden",
+		"register": "Registrieren",
+		"logout": "Abmelden",
+		"forgotPassword": "Passwort vergessen",
+		"email": "E-Mail",
+		"password": "Passwort",
+		"confirmPassword": "Passwort bestätigen"
+	},
+	"email": {
+		"compose": "Neue E-Mail",
+		"reply": "Antworten",
+		"replyAll": "Allen antworten",
+		"forward": "Weiterleiten",
+		"delete": "Löschen",
+		"archive": "Archivieren",
+		"markRead": "Als gelesen markieren",
+		"markUnread": "Als ungelesen markieren",
+		"star": "Mit Stern markieren",
+		"unstar": "Stern entfernen",
+		"to": "An",
+		"cc": "CC",
+		"bcc": "BCC",
+		"subject": "Betreff",
+		"body": "Nachricht",
+		"send": "Senden",
+		"saveDraft": "Als Entwurf speichern",
+		"discard": "Verwerfen",
+		"attachments": "Anhänge",
+		"addAttachment": "Anhang hinzufügen",
+		"noEmails": "Keine E-Mails",
+		"noSubject": "(Kein Betreff)",
+		"from": "Von",
+		"date": "Datum"
+	},
+	"folders": {
+		"title": "Ordner",
+		"add": "Ordner hinzufügen",
+		"edit": "Ordner bearbeiten",
+		"delete": "Ordner löschen",
+		"name": "Ordnername"
+	},
+	"labels": {
+		"title": "Labels",
+		"add": "Label hinzufügen",
+		"edit": "Label bearbeiten",
+		"delete": "Label löschen",
+		"name": "Labelname",
+		"color": "Farbe"
+	},
+	"accounts": {
+		"title": "E-Mail-Konten",
+		"add": "Konto hinzufügen",
+		"edit": "Konto bearbeiten",
+		"delete": "Konto löschen",
+		"name": "Kontoname",
+		"address": "E-Mail-Adresse",
+		"default": "Standardkonto"
+	},
+	"settings": {
+		"title": "Einstellungen",
+		"general": "Allgemein",
+		"appearance": "Darstellung",
+		"accounts": "Konten",
+		"signature": "Signatur",
+		"language": "Sprache",
+		"theme": "Design",
+		"darkMode": "Dunkelmodus",
+		"notifications": "Benachrichtigungen"
+	},
+	"common": {
+		"save": "Speichern",
+		"cancel": "Abbrechen",
+		"delete": "Löschen",
+		"edit": "Bearbeiten",
+		"add": "Hinzufügen",
+		"confirm": "Bestätigen",
+		"yes": "Ja",
+		"no": "Nein",
+		"ok": "OK",
+		"loading": "Laden...",
+		"error": "Fehler",
+		"success": "Erfolg",
+		"back": "Zurück",
+		"search": "Suchen",
+		"select": "Auswählen",
+		"selectAll": "Alle auswählen"
+	}
+}

apps/mail/apps/web/src/lib/i18n/locales/en.json

@@ -0,0 +1,105 @@
+{
+	"app": {
+		"name": "Mail",
+		"loading": "Loading..."
+	},
+	"nav": {
+		"inbox": "Inbox",
+		"sent": "Sent",
+		"drafts": "Drafts",
+		"starred": "Starred",
+		"archive": "Archive",
+		"trash": "Trash",
+		"spam": "Spam",
+		"settings": "Settings",
+		"feedback": "Feedback"
+	},
+	"auth": {
+		"login": "Sign In",
+		"register": "Sign Up",
+		"logout": "Sign Out",
+		"forgotPassword": "Forgot Password",
+		"email": "Email",
+		"password": "Password",
+		"confirmPassword": "Confirm Password"
+	},
+	"email": {
+		"compose": "Compose",
+		"reply": "Reply",
+		"replyAll": "Reply All",
+		"forward": "Forward",
+		"delete": "Delete",
+		"archive": "Archive",
+		"markRead": "Mark as read",
+		"markUnread": "Mark as unread",
+		"star": "Star",
+		"unstar": "Unstar",
+		"to": "To",
+		"cc": "CC",
+		"bcc": "BCC",
+		"subject": "Subject",
+		"body": "Message",
+		"send": "Send",
+		"saveDraft": "Save as draft",
+		"discard": "Discard",
+		"attachments": "Attachments",
+		"addAttachment": "Add attachment",
+		"noEmails": "No emails",
+		"noSubject": "(No subject)",
+		"from": "From",
+		"date": "Date"
+	},
+	"folders": {
+		"title": "Folders",
+		"add": "Add Folder",
+		"edit": "Edit Folder",
+		"delete": "Delete Folder",
+		"name": "Folder name"
+	},
+	"labels": {
+		"title": "Labels",
+		"add": "Add Label",
+		"edit": "Edit Label",
+		"delete": "Delete Label",
+		"name": "Label name",
+		"color": "Color"
+	},
+	"accounts": {
+		"title": "Email Accounts",
+		"add": "Add Account",
+		"edit": "Edit Account",
+		"delete": "Delete Account",
+		"name": "Account name",
+		"address": "Email address",
+		"default": "Default account"
+	},
+	"settings": {
+		"title": "Settings",
+		"general": "General",
+		"appearance": "Appearance",
+		"accounts": "Accounts",
+		"signature": "Signature",
+		"language": "Language",
+		"theme": "Theme",
+		"darkMode": "Dark Mode",
+		"notifications": "Notifications"
+	},
+	"common": {
+		"save": "Save",
+		"cancel": "Cancel",
+		"delete": "Delete",
+		"edit": "Edit",
+		"add": "Add",
+		"confirm": "Confirm",
+		"yes": "Yes",
+		"no": "No",
+		"ok": "OK",
+		"loading": "Loading...",
+		"error": "Error",
+		"success": "Success",
+		"back": "Back",
+		"search": "Search",
+		"select": "Select",
+		"selectAll": "Select all"
+	}
+}

apps/mail/apps/web/src/lib/i18n/locales/es.json

@@ -0,0 +1,105 @@
+{
+	"app": {
+		"name": "Mail",
+		"loading": "Cargando..."
+	},
+	"nav": {
+		"inbox": "Bandeja de entrada",
+		"sent": "Enviados",
+		"drafts": "Borradores",
+		"starred": "Destacados",
+		"archive": "Archivo",
+		"trash": "Papelera",
+		"spam": "Spam",
+		"settings": "Configuración",
+		"feedback": "Feedback"
+	},
+	"auth": {
+		"login": "Iniciar sesión",
+		"register": "Registrarse",
+		"logout": "Cerrar sesión",
+		"forgotPassword": "Olvidé mi contraseña",
+		"email": "Correo electrónico",
+		"password": "Contraseña",
+		"confirmPassword": "Confirmar contraseña"
+	},
+	"email": {
+		"compose": "Redactar",
+		"reply": "Responder",
+		"replyAll": "Responder a todos",
+		"forward": "Reenviar",
+		"delete": "Eliminar",
+		"archive": "Archivar",
+		"markRead": "Marcar como leído",
+		"markUnread": "Marcar como no leído",
+		"star": "Destacar",
+		"unstar": "Quitar destacado",
+		"to": "Para",
+		"cc": "CC",
+		"bcc": "CCO",
+		"subject": "Asunto",
+		"body": "Mensaje",
+		"send": "Enviar",
+		"saveDraft": "Guardar como borrador",
+		"discard": "Descartar",
+		"attachments": "Adjuntos",
+		"addAttachment": "Añadir adjunto",
+		"noEmails": "Sin correos",
+		"noSubject": "(Sin asunto)",
+		"from": "De",
+		"date": "Fecha"
+	},
+	"folders": {
+		"title": "Carpetas",
+		"add": "Añadir carpeta",
+		"edit": "Editar carpeta",
+		"delete": "Eliminar carpeta",
+		"name": "Nombre de carpeta"
+	},
+	"labels": {
+		"title": "Etiquetas",
+		"add": "Añadir etiqueta",
+		"edit": "Editar etiqueta",
+		"delete": "Eliminar etiqueta",
+		"name": "Nombre de etiqueta",
+		"color": "Color"
+	},
+	"accounts": {
+		"title": "Cuentas de correo",
+		"add": "Añadir cuenta",
+		"edit": "Editar cuenta",
+		"delete": "Eliminar cuenta",
+		"name": "Nombre de cuenta",
+		"address": "Dirección de correo",
+		"default": "Cuenta predeterminada"
+	},
+	"settings": {
+		"title": "Configuración",
+		"general": "General",
+		"appearance": "Apariencia",
+		"accounts": "Cuentas",
+		"signature": "Firma",
+		"language": "Idioma",
+		"theme": "Tema",
+		"darkMode": "Modo oscuro",
+		"notifications": "Notificaciones"
+	},
+	"common": {
+		"save": "Guardar",
+		"cancel": "Cancelar",
+		"delete": "Eliminar",
+		"edit": "Editar",
+		"add": "Añadir",
+		"confirm": "Confirmar",
+		"yes": "Sí",
+		"no": "No",
+		"ok": "OK",
+		"loading": "Cargando...",
+		"error": "Error",
+		"success": "Éxito",
+		"back": "Atrás",
+		"search": "Buscar",
+		"select": "Seleccionar",
+		"selectAll": "Seleccionar todo"
+	}
+}

apps/mail/apps/web/src/lib/i18n/locales/fr.json

@@ -0,0 +1,105 @@
+{
+	"app": {
+		"name": "Mail",
+		"loading": "Chargement..."
+	},
+	"nav": {
+		"inbox": "Boîte de réception",
+		"sent": "Envoyés",
+		"drafts": "Brouillons",
+		"starred": "Favoris",
+		"archive": "Archives",
+		"trash": "Corbeille",
+		"spam": "Spam",
+		"settings": "Paramètres",
+		"feedback": "Feedback"
+	},
+	"auth": {
+		"login": "Se connecter",
+		"register": "S'inscrire",
+		"logout": "Se déconnecter",
+		"forgotPassword": "Mot de passe oublié",
+		"email": "E-mail",
+		"password": "Mot de passe",
+		"confirmPassword": "Confirmer le mot de passe"
+	},
+	"email": {
+		"compose": "Nouveau message",
+		"reply": "Répondre",
+		"replyAll": "Répondre à tous",
+		"forward": "Transférer",
+		"delete": "Supprimer",
+		"archive": "Archiver",
+		"markRead": "Marquer comme lu",
+		"markUnread": "Marquer comme non lu",
+		"star": "Ajouter aux favoris",
+		"unstar": "Retirer des favoris",
+		"to": "À",
+		"cc": "CC",
+		"bcc": "CCI",
+		"subject": "Objet",
+		"body": "Message",
+		"send": "Envoyer",
+		"saveDraft": "Enregistrer comme brouillon",
+		"discard": "Annuler",
+		"attachments": "Pièces jointes",
+		"addAttachment": "Ajouter une pièce jointe",
+		"noEmails": "Aucun e-mail",
+		"noSubject": "(Sans objet)",
+		"from": "De",
+		"date": "Date"
+	},
+	"folders": {
+		"title": "Dossiers",
+		"add": "Ajouter un dossier",
+		"edit": "Modifier le dossier",
+		"delete": "Supprimer le dossier",
+		"name": "Nom du dossier"
+	},
+	"labels": {
+		"title": "Libellés",
+		"add": "Ajouter un libellé",
+		"edit": "Modifier le libellé",
+		"delete": "Supprimer le libellé",
+		"name": "Nom du libellé",
+		"color": "Couleur"
+	},
+	"accounts": {
+		"title": "Comptes e-mail",
+		"add": "Ajouter un compte",
+		"edit": "Modifier le compte",
+		"delete": "Supprimer le compte",
+		"name": "Nom du compte",
+		"address": "Adresse e-mail",
+		"default": "Compte par défaut"
+	},
+	"settings": {
+		"title": "Paramètres",
+		"general": "Général",
+		"appearance": "Apparence",
+		"accounts": "Comptes",
+		"signature": "Signature",
+		"language": "Langue",
+		"theme": "Thème",
+		"darkMode": "Mode sombre",
+		"notifications": "Notifications"
+	},
+	"common": {
+		"save": "Enregistrer",
+		"cancel": "Annuler",
+		"delete": "Supprimer",
+		"edit": "Modifier",
+		"add": "Ajouter",
+		"confirm": "Confirmer",
+		"yes": "Oui",
+		"no": "Non",
+		"ok": "OK",
+		"loading": "Chargement...",
+		"error": "Erreur",
+		"success": "Succès",
+		"back": "Retour",
+		"search": "Rechercher",
+		"select": "Sélectionner",
+		"selectAll": "Tout sélectionner"
+	}
+}

apps/mail/apps/web/src/lib/i18n/locales/it.json

@@ -0,0 +1,105 @@
+{
+	"app": {
+		"name": "Mail",
+		"loading": "Caricamento..."
+	},
+	"nav": {
+		"inbox": "Posta in arrivo",
+		"sent": "Inviati",
+		"drafts": "Bozze",
+		"starred": "Speciali",
+		"archive": "Archivio",
+		"trash": "Cestino",
+		"spam": "Spam",
+		"settings": "Impostazioni",
+		"feedback": "Feedback"
+	},
+	"auth": {
+		"login": "Accedi",
+		"register": "Registrati",
+		"logout": "Esci",
+		"forgotPassword": "Password dimenticata",
+		"email": "E-mail",
+		"password": "Password",
+		"confirmPassword": "Conferma password"
+	},
+	"email": {
+		"compose": "Scrivi",
+		"reply": "Rispondi",
+		"replyAll": "Rispondi a tutti",
+		"forward": "Inoltra",
+		"delete": "Elimina",
+		"archive": "Archivia",
+		"markRead": "Segna come letto",
+		"markUnread": "Segna come non letto",
+		"star": "Aggiungi a speciali",
+		"unstar": "Rimuovi da speciali",
+		"to": "A",
+		"cc": "CC",
+		"bcc": "CCN",
+		"subject": "Oggetto",
+		"body": "Messaggio",
+		"send": "Invia",
+		"saveDraft": "Salva come bozza",
+		"discard": "Elimina",
+		"attachments": "Allegati",
+		"addAttachment": "Aggiungi allegato",
+		"noEmails": "Nessuna email",
+		"noSubject": "(Nessun oggetto)",
+		"from": "Da",
+		"date": "Data"
+	},
+	"folders": {
+		"title": "Cartelle",
+		"add": "Aggiungi cartella",
+		"edit": "Modifica cartella",
+		"delete": "Elimina cartella",
+		"name": "Nome cartella"
+	},
+	"labels": {
+		"title": "Etichette",
+		"add": "Aggiungi etichetta",
+		"edit": "Modifica etichetta",
+		"delete": "Elimina etichetta",
+		"name": "Nome etichetta",
+		"color": "Colore"
+	},
+	"accounts": {
+		"title": "Account email",
+		"add": "Aggiungi account",
+		"edit": "Modifica account",
+		"delete": "Elimina account",
+		"name": "Nome account",
+		"address": "Indirizzo email",
+		"default": "Account predefinito"
+	},
+	"settings": {
+		"title": "Impostazioni",
+		"general": "Generale",
+		"appearance": "Aspetto",
+		"accounts": "Account",
+		"signature": "Firma",
+		"language": "Lingua",
+		"theme": "Tema",
+		"darkMode": "Modalità scura",
+		"notifications": "Notifiche"
+	},
+	"common": {
+		"save": "Salva",
+		"cancel": "Annulla",
+		"delete": "Elimina",
+		"edit": "Modifica",
+		"add": "Aggiungi",
+		"confirm": "Conferma",
+		"yes": "Sì",
+		"no": "No",
+		"ok": "OK",
+		"loading": "Caricamento...",
+		"error": "Errore",
+		"success": "Successo",
+		"back": "Indietro",
+		"search": "Cerca",
+		"select": "Seleziona",
+		"selectAll": "Seleziona tutto"
+	}
+}

apps/mail/apps/web/src/routes/+layout.svelte

@@ -9,6 +9,7 @@
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { accountsStore } from '$lib/stores/accounts.svelte';
 	import { foldersStore } from '$lib/stores/folders.svelte';
+	import '$lib/i18n';
 	import '../app.css';
 
 	let { children } = $props();

apps/mail/apps/web/src/routes/feedback/+page.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { FeedbackPage } from '@manacore/shared-feedback-ui';
+	import { createFeedbackService } from '@manacore/shared-feedback-service';
+	import { authStore } from '$lib/stores/auth.svelte';
+
+	const feedbackService = createFeedbackService({
+		appName: 'mail',
+		apiUrl: 'http://localhost:3001', // Mana Core API
+	});
+
+	async function handleSubmit(data: { type: string; message: string; email?: string }) {
+		const token = await authStore.getAccessToken();
+		return feedbackService.submit({
+			...data,
+			token: token || undefined,
+		});
+	}
+</script>
+
+<FeedbackPage appName="Mail" onSubmit={handleSubmit} userEmail={authStore.user?.email} />

apps/manacore/apps/web/src/lib/api/base-client.ts

@@ -4,7 +4,7 @@
  * Provides authenticated fetch with exponential backoff retry.
  */
 
-import { authStore } from '$lib/stores/authStore.svelte';
+import { authStore } from '$lib/stores/auth.svelte';
 
 /**
  * Retry configuration

apps/manacore/apps/web/src/lib/api/credits.ts

@@ -3,7 +3,7 @@
  * Handles credit balance, transactions, and packages
  */
 
-import { authStore } from '$lib/stores/authStore.svelte';
+import { authStore } from '$lib/stores/auth.svelte';
 
 const MANA_AUTH_URL = 'http://localhost:3001'; // TODO: Use PUBLIC_MANA_CORE_AUTH_URL from env
 

apps/manacore/apps/web/src/lib/api/feedback.ts

@@ -3,7 +3,7 @@
  */
 
 import { createFeedbackService } from '@manacore/shared-feedback-service';
-import { authStore } from '$lib/stores/authStore.svelte';
+import { authStore } from '$lib/stores/auth.svelte';
 
 const MANA_AUTH_URL = 'http://localhost:3001'; // TODO: Use PUBLIC_MANA_CORE_AUTH_URL from env
 

apps/manacore/apps/web/src/lib/stores/user-settings.svelte.ts

@@ -8,7 +8,7 @@
  */
 
 import { createUserSettingsStore } from '@manacore/shared-theme';
-import { authStore } from './authStore.svelte';
+import { authStore } from './auth.svelte';
 
 // TODO: Use PUBLIC_MANA_CORE_AUTH_URL from env when available
 const MANA_AUTH_URL = 'http://localhost:3001';

apps/manacore/apps/web/src/routes/(app)/+layout.svelte

@@ -10,7 +10,7 @@
 	import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n';
 	import { setLocale, supportedLocales } from '$lib/i18n';
 	import { theme } from '$lib/stores/theme';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 	import { userSettings } from '$lib/stores/user-settings.svelte';
 	import {
 		isSidebarMode as sidebarModeStore,

apps/manacore/apps/web/src/routes/(app)/dashboard/+page.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { PageHeader } from '@manacore/shared-ui';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 	import { dashboardStore } from '$lib/stores/dashboard.svelte';
 	import DashboardGrid from '$lib/components/dashboard/DashboardGrid.svelte';
 

apps/manacore/apps/web/src/routes/(app)/feedback/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { FeedbackPage } from '@manacore/shared-feedback-ui';
 	import { feedbackService } from '$lib/api/feedback';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 </script>
 
 <FeedbackPage {feedbackService} appName="ManaCore" currentUserId={authStore.user?.id} />

apps/manacore/apps/web/src/routes/(app)/profile/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ProfilePage } from '@manacore/shared-profile-ui';
 	import type { UserProfile, ProfileActions } from '@manacore/shared-profile-ui';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 	import { goto } from '$app/navigation';
 
 	// Map auth store user to UserProfile

apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { Button, Input, Card, PageHeader } from '@manacore/shared-ui';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 	import { creditsService, type CreditBalance } from '$lib/api/credits';
 	import { userSettings } from '$lib/stores/user-settings.svelte';
 	import type { NavPosition, ThemeMode } from '@manacore/shared-theme';
@@ -33,12 +33,16 @@
 
 	// Navigation position handler
 	async function handleNavPositionChange(position: NavPosition) {
-		await userSettings.updateGlobal({ nav: { ...userSettings.globalSettings.nav, desktopPosition: position } });
+		await userSettings.updateGlobal({
+			nav: { ...userSettings.globalSettings.nav, desktopPosition: position },
+		});
 	}
 
 	// Sidebar collapsed handler
 	async function handleSidebarChange(collapsed: boolean) {
-		await userSettings.updateGlobal({ nav: { ...userSettings.globalSettings.nav, sidebarCollapsed: collapsed } });
+		await userSettings.updateGlobal({
+			nav: { ...userSettings.globalSettings.nav, sidebarCollapsed: collapsed },
+		});
 	}
 
 	// Theme mode handler
@@ -48,7 +52,9 @@
 
 	// Color scheme handler
 	async function handleColorSchemeChange(colorScheme: string) {
-		await userSettings.updateGlobal({ theme: { ...userSettings.globalSettings.theme, colorScheme } });
+		await userSettings.updateGlobal({
+			theme: { ...userSettings.globalSettings.theme, colorScheme },
+		});
 	}
 
 	// Locale handler
@@ -202,11 +208,14 @@
 							<div class="flex items-center justify-between py-3 border-b border-border">
 								<div>
 									<p class="font-medium">Position (Desktop)</p>
-									<p class="text-sm text-muted-foreground">Position der Navigation auf großen Bildschirmen</p>
+									<p class="text-sm text-muted-foreground">
+										Position der Navigation auf großen Bildschirmen
+									</p>
 								</div>
 								<div class="flex gap-2">
 									<button
-										class="px-4 py-2 text-sm font-medium rounded-lg transition-colors {userSettings.globalSettings.nav.desktopPosition === 'top'
+										class="px-4 py-2 text-sm font-medium rounded-lg transition-colors {userSettings
+											.globalSettings.nav.desktopPosition === 'top'
 											? 'bg-primary text-primary-foreground'
 											: 'bg-surface-hover hover:bg-surface-hover/80'}"
 										onclick={() => handleNavPositionChange('top')}
@@ -214,7 +223,8 @@
 										Oben
 									</button>
 									<button
-										class="px-4 py-2 text-sm font-medium rounded-lg transition-colors {userSettings.globalSettings.nav.desktopPosition === 'bottom'
+										class="px-4 py-2 text-sm font-medium rounded-lg transition-colors {userSettings
+											.globalSettings.nav.desktopPosition === 'bottom'
 											? 'bg-primary text-primary-foreground'
 											: 'bg-surface-hover hover:bg-surface-hover/80'}"
 										onclick={() => handleNavPositionChange('bottom')}
@@ -230,13 +240,16 @@
 									<p class="text-sm text-muted-foreground">Standard-Zustand der Sidebar</p>
 								</div>
 								<button
-									class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors {userSettings.globalSettings.nav.sidebarCollapsed
+									class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors {userSettings
+										.globalSettings.nav.sidebarCollapsed
 										? 'bg-primary'
 										: 'bg-gray-200 dark:bg-gray-700'}"
-									onclick={() => handleSidebarChange(!userSettings.globalSettings.nav.sidebarCollapsed)}
+									onclick={() =>
+										handleSidebarChange(!userSettings.globalSettings.nav.sidebarCollapsed)}
 								>
 									<span
-										class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform {userSettings.globalSettings.nav.sidebarCollapsed
+										class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform {userSettings
+											.globalSettings.nav.sidebarCollapsed
 											? 'translate-x-6'
 											: 'translate-x-1'}"
 									></span>
@@ -257,7 +270,8 @@
 								</div>
 								<div class="flex gap-2">
 									<button
-										class="px-3 py-2 text-sm font-medium rounded-lg transition-colors {userSettings.globalSettings.theme.mode === 'light'
+										class="px-3 py-2 text-sm font-medium rounded-lg transition-colors {userSettings
+											.globalSettings.theme.mode === 'light'
 											? 'bg-primary text-primary-foreground'
 											: 'bg-surface-hover hover:bg-surface-hover/80'}"
 										onclick={() => handleThemeModeChange('light')}
@@ -265,7 +279,8 @@
 										Hell
 									</button>
 									<button
-										class="px-3 py-2 text-sm font-medium rounded-lg transition-colors {userSettings.globalSettings.theme.mode === 'dark'
+										class="px-3 py-2 text-sm font-medium rounded-lg transition-colors {userSettings
+											.globalSettings.theme.mode === 'dark'
 											? 'bg-primary text-primary-foreground'
 											: 'bg-surface-hover hover:bg-surface-hover/80'}"
 										onclick={() => handleThemeModeChange('dark')}
@@ -273,7 +288,8 @@
 										Dunkel
 									</button>
 									<button
-										class="px-3 py-2 text-sm font-medium rounded-lg transition-colors {userSettings.globalSettings.theme.mode === 'system'
+										class="px-3 py-2 text-sm font-medium rounded-lg transition-colors {userSettings
+											.globalSettings.theme.mode === 'system'
 											? 'bg-primary text-primary-foreground'
 											: 'bg-surface-hover hover:bg-surface-hover/80'}"
 										onclick={() => handleThemeModeChange('system')}
@@ -289,14 +305,10 @@
 									<p class="text-sm text-muted-foreground">Akzentfarbe der Benutzeroberfläche</p>
 								</div>
 								<div class="flex gap-2">
-									{#each [
+									{#each [{ id: 'ocean', label: 'Ozean', color: 'bg-blue-500' }, { id: 'forest', label: 'Wald', color: 'bg-green-500' }, { id: 'sunset', label: 'Sonnenuntergang', color: 'bg-orange-500' }, { id: 'lavender', label: 'Lavendel', color: 'bg-purple-500' }] as scheme}
-										{ id: 'ocean', label: 'Ozean', color: 'bg-blue-500' },
-										{ id: 'forest', label: 'Wald', color: 'bg-green-500' },
-										{ id: 'sunset', label: 'Sonnenuntergang', color: 'bg-orange-500' },
-										{ id: 'lavender', label: 'Lavendel', color: 'bg-purple-500' }
-									] as scheme}
 										<button
-											class="w-8 h-8 rounded-full transition-all {scheme.color} {userSettings.globalSettings.theme.colorScheme === scheme.id
+											class="w-8 h-8 rounded-full transition-all {scheme.color} {userSettings
+												.globalSettings.theme.colorScheme === scheme.id
 												? 'ring-2 ring-offset-2 ring-primary'
 												: 'hover:scale-110'}"
 											onclick={() => handleColorSchemeChange(scheme.id)}
@@ -319,15 +331,10 @@
 									<p class="text-sm text-muted-foreground">Sprache der Benutzeroberfläche</p>
 								</div>
 								<div class="flex gap-2">
-									{#each [
+									{#each [{ id: 'de', label: 'DE' }, { id: 'en', label: 'EN' }, { id: 'fr', label: 'FR' }, { id: 'es', label: 'ES' }, { id: 'it', label: 'IT' }] as lang}
-										{ id: 'de', label: 'DE' },
-										{ id: 'en', label: 'EN' },
-										{ id: 'fr', label: 'FR' },
-										{ id: 'es', label: 'ES' },
-										{ id: 'it', label: 'IT' }
-									] as lang}
 										<button
-											class="px-3 py-2 text-sm font-medium rounded-lg transition-colors {userSettings.globalSettings.locale === lang.id
+											class="px-3 py-2 text-sm font-medium rounded-lg transition-colors {userSettings
+												.globalSettings.locale === lang.id
 												? 'bg-primary text-primary-foreground'
 												: 'bg-surface-hover hover:bg-surface-hover/80'}"
 											onclick={() => handleLocaleChange(lang.id)}
@@ -342,7 +349,9 @@
 
 					{#if userSettings.syncing}
 						<div class="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
-							<div class="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
+							<div
+								class="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"
+							></div>
 							<span>Einstellungen werden synchronisiert...</span>
 						</div>
 					{/if}

apps/manacore/apps/web/src/routes/(auth)/forgot-password/+page.svelte

@@ -3,7 +3,7 @@
 	import { ForgotPasswordPage } from '@manacore/shared-auth-ui';
 	import { ManaCoreLogo } from '@manacore/shared-branding';
 	import AppSlider from '$lib/components/AppSlider.svelte';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 
 	async function handleForgotPassword(email: string) {
 		return authStore.forgotPassword(email);

apps/manacore/apps/web/src/routes/(auth)/login/+page.svelte

@@ -6,7 +6,7 @@
 	import { getLoginTranslations } from '@manacore/shared-i18n';
 	import AppSlider from '$lib/components/AppSlider.svelte';
 	import LanguageSelector from '$lib/components/LanguageSelector.svelte';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 
 	// Get translations based on current locale
 	const translations = $derived(getLoginTranslations($locale || 'de'));

apps/manacore/apps/web/src/routes/(auth)/register/+page.svelte

@@ -3,7 +3,7 @@
 	import { RegisterPage } from '@manacore/shared-auth-ui';
 	import { ManaCoreLogo } from '@manacore/shared-branding';
 	import AppSlider from '$lib/components/AppSlider.svelte';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 
 	async function handleSignUp(email: string, password: string) {
 		return authStore.signUp(email, password);

apps/manacore/apps/web/src/routes/+layout.svelte

@@ -2,7 +2,7 @@
 	import '../app.css';
 	import { onMount } from 'svelte';
 	import { theme } from '$lib/stores/theme';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 
 	let { children } = $props();
 

apps/manadeck/apps/web/src/lib/stores/user-settings.svelte.ts

@@ -8,7 +8,7 @@
  */
 
 import { createUserSettingsStore } from '@manacore/shared-theme';
-import { authStore } from './authStore.svelte';
+import { authStore } from './auth.svelte';
 
 const MANA_AUTH_URL = 'http://localhost:3001';
 

apps/manadeck/apps/web/src/routes/(app)/+layout.svelte

@@ -3,7 +3,7 @@
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 	import { locale } from 'svelte-i18n';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 	import { userSettings } from '$lib/stores/user-settings.svelte';
 	import { theme } from '$lib/stores/theme';
 	import {

apps/manadeck/apps/web/src/routes/(app)/feedback/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { FeedbackPage } from '@manacore/shared-feedback-ui';
 	import { feedbackService } from '$lib/api/feedback';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 </script>
 
 <FeedbackPage {feedbackService} appName="ManaDeck" currentUserId={authStore.user?.id} />

apps/manadeck/apps/web/src/routes/(app)/profile/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ProfilePage } from '@manacore/shared-profile-ui';
 	import type { UserProfile, ProfileActions } from '@manacore/shared-profile-ui';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 	import { goto } from '$app/navigation';
 
 	// Map auth store user to UserProfile

apps/manadeck/apps/web/src/routes/(auth)/forgot-password/+page.svelte

@@ -3,7 +3,7 @@
 	import { ForgotPasswordPage } from '@manacore/shared-auth-ui';
 	import { ManaDeckLogo } from '@manacore/shared-branding';
 	import AppSlider from '$lib/components/AppSlider.svelte';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 
 	async function handleForgotPassword(email: string) {
 		return authStore.forgotPassword(email);

apps/manadeck/apps/web/src/routes/(auth)/login/+page.svelte

@@ -6,7 +6,7 @@
 	import { getLoginTranslations } from '@manacore/shared-i18n';
 	import AppSlider from '$lib/components/AppSlider.svelte';
 	import LanguageSelector from '$lib/components/LanguageSelector.svelte';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 
 	// Get translations based on current locale
 	const translations = $derived(getLoginTranslations($locale || 'de'));

apps/manadeck/apps/web/src/routes/(auth)/register/+page.svelte

@@ -3,7 +3,7 @@
 	import { RegisterPage } from '@manacore/shared-auth-ui';
 	import { ManaDeckLogo } from '@manacore/shared-branding';
 	import AppSlider from '$lib/components/AppSlider.svelte';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 
 	async function handleSignUp(email: string, password: string) {
 		return authStore.signUp(email, password);

apps/manadeck/apps/web/src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 
 	onMount(async () => {
 		await authStore.initialize();

apps/moodlit/apps/web/src/lib/api/feedback.ts

@@ -3,7 +3,7 @@
  */
 
 import { createFeedbackService } from '@manacore/shared-feedback-service';
-import { authStore } from '$lib/stores/authStore.svelte';
+import { authStore } from '$lib/stores/auth.svelte';
 
 const MANA_AUTH_URL = 'http://localhost:3001';
 

apps/moodlit/apps/web/src/routes/(app)/+layout.svelte

@@ -3,7 +3,7 @@
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 	import { locale, _ } from 'svelte-i18n';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 	import { theme } from '$lib/stores/theme';
 	import {
 		isSidebarMode as sidebarModeStore,

apps/moodlit/apps/web/src/routes/(app)/feedback/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { FeedbackPage } from '@manacore/shared-feedback-ui';
 	import { feedbackService } from '$lib/api/feedback';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 </script>
 
 <FeedbackPage {feedbackService} appName="Moodlit" currentUserId={authStore.user?.id} />

apps/moodlit/apps/web/src/routes/(auth)/forgot-password/+page.svelte

@@ -6,7 +6,7 @@
 	import { getForgotPasswordTranslations } from '@manacore/shared-i18n';
 	import AppSlider from '$lib/components/AppSlider.svelte';
 	import LanguageSelector from '$lib/components/LanguageSelector.svelte';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 
 	// Get translations based on current locale
 	const translations = $derived(getForgotPasswordTranslations($locale || 'de'));

apps/moodlit/apps/web/src/routes/(auth)/login/+page.svelte

@@ -6,7 +6,7 @@
 	import { getLoginTranslations } from '@manacore/shared-i18n';
 	import AppSlider from '$lib/components/AppSlider.svelte';
 	import LanguageSelector from '$lib/components/LanguageSelector.svelte';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 
 	// Get translations based on current locale
 	const translations = $derived(getLoginTranslations($locale || 'de'));

apps/moodlit/apps/web/src/routes/(auth)/register/+page.svelte

@@ -6,7 +6,7 @@
 	import { getRegisterTranslations } from '@manacore/shared-i18n';
 	import AppSlider from '$lib/components/AppSlider.svelte';
 	import LanguageSelector from '$lib/components/LanguageSelector.svelte';
-	import { authStore } from '$lib/stores/authStore.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
 
 	// Get translations based on current locale
 	const translations = $derived(getRegisterTranslations($locale || 'de'));

packages/shared-api-client/package.json

@@ -0,0 +1,17 @@
+{
+	"name": "@manacore/shared-api-client",
+	"version": "1.0.0",
+	"private": true,
+	"type": "module",
+	"main": "./src/index.ts",
+	"types": "./src/index.ts",
+	"exports": {
+		".": "./src/index.ts"
+	},
+	"scripts": {
+		"type-check": "tsc --noEmit"
+	},
+	"devDependencies": {
+		"typescript": "^5.0.0"
+	}
+}

packages/shared-api-client/src/client.ts

@@ -0,0 +1,218 @@
+/**
+ * Shared API Client Factory
+ * Creates a configured API client for making authenticated requests.
+ */
+
+import type { ApiResponse, FetchOptions, HttpMethod } from './types';
+
+export interface ApiClientConfig {
+	/** Base URL for the API (e.g., 'http://localhost:3002') */
+	baseUrl: string;
+	/** Optional API prefix (default: '/api') */
+	apiPrefix?: string;
+	/** Function to get the current auth token */
+	getToken?: () => Promise<string | null> | string | null;
+	/** Whether running in browser environment */
+	isBrowser?: boolean;
+	/** Local storage key for token fallback */
+	tokenStorageKey?: string;
+}
+
+export interface ApiClient {
+	/** Make a GET request */
+	get: <T>(endpoint: string, options?: Omit<FetchOptions, 'method'>) => Promise<ApiResponse<T>>;
+	/** Make a POST request */
+	post: <T>(
+		endpoint: string,
+		body?: unknown,
+		options?: Omit<FetchOptions, 'method' | 'body'>
+	) => Promise<ApiResponse<T>>;
+	/** Make a PUT request */
+	put: <T>(
+		endpoint: string,
+		body?: unknown,
+		options?: Omit<FetchOptions, 'method' | 'body'>
+	) => Promise<ApiResponse<T>>;
+	/** Make a PATCH request */
+	patch: <T>(
+		endpoint: string,
+		body?: unknown,
+		options?: Omit<FetchOptions, 'method' | 'body'>
+	) => Promise<ApiResponse<T>>;
+	/** Make a DELETE request */
+	delete: <T>(endpoint: string, options?: Omit<FetchOptions, 'method'>) => Promise<ApiResponse<T>>;
+	/** Make a request with any method */
+	request: <T>(endpoint: string, options?: FetchOptions) => Promise<ApiResponse<T>>;
+	/** Upload a single file */
+	uploadFile: <T>(endpoint: string, file: File, token?: string) => Promise<ApiResponse<T>>;
+	/** Upload multiple files */
+	uploadFiles: <T>(endpoint: string, files: File[], token?: string) => Promise<ApiResponse<T>>;
+}
+
+/**
+ * Create an API client with the given configuration.
+ */
+export function createApiClient(config: ApiClientConfig): ApiClient {
+	const { baseUrl, apiPrefix = '/api', getToken, isBrowser = true, tokenStorageKey } = config;
+
+	async function getAuthToken(providedToken?: string): Promise<string | undefined> {
+		if (providedToken) return providedToken;
+
+		if (getToken) {
+			const token = await getToken();
+			if (token) return token;
+		}
+
+		// Fallback to localStorage if in browser and key provided
+		if (isBrowser && tokenStorageKey && typeof localStorage !== 'undefined') {
+			return localStorage.getItem(tokenStorageKey) || undefined;
+		}
+
+		return undefined;
+	}
+
+	async function request<T>(endpoint: string, options: FetchOptions = {}): Promise<ApiResponse<T>> {
+		const { method = 'GET', body, token, isFormData = false, headers: customHeaders } = options;
+
+		const authToken = await getAuthToken(token);
+
+		try {
+			const headers: Record<string, string> = { ...customHeaders };
+
+			// Don't set Content-Type for FormData - browser sets it automatically with boundary
+			if (!isFormData) {
+				headers['Content-Type'] = 'application/json';
+			}
+
+			if (authToken) {
+				headers['Authorization'] = `Bearer ${authToken}`;
+			}
+
+			const url = `${baseUrl}${apiPrefix}${endpoint}`;
+			const response = await fetch(url, {
+				method,
+				headers,
+				body: isFormData ? (body as FormData) : body ? JSON.stringify(body) : undefined,
+			});
+
+			if (!response.ok) {
+				const errorData = await response.json().catch(() => ({}));
+				return {
+					data: null,
+					error: new Error(errorData.message || `API error: ${response.status}`),
+				};
+			}
+
+			// Handle empty responses (204 No Content)
+			if (response.status === 204) {
+				return { data: null, error: null };
+			}
+
+			const data = await response.json();
+			return { data, error: null };
+		} catch (error) {
+			return {
+				data: null,
+				error: error instanceof Error ? error : new Error('Unknown error'),
+			};
+		}
+	}
+
+	async function uploadFile<T>(
+		endpoint: string,
+		file: File,
+		token?: string
+	): Promise<ApiResponse<T>> {
+		const authToken = await getAuthToken(token);
+
+		try {
+			const formData = new FormData();
+			formData.append('file', file);
+
+			const headers: Record<string, string> = {};
+			if (authToken) {
+				headers['Authorization'] = `Bearer ${authToken}`;
+			}
+
+			const response = await fetch(`${baseUrl}${apiPrefix}${endpoint}`, {
+				method: 'POST',
+				headers,
+				body: formData,
+			});
+
+			if (!response.ok) {
+				const errorData = await response.json().catch(() => ({}));
+				return {
+					data: null,
+					error: new Error(errorData.message || `Upload error: ${response.status}`),
+				};
+			}
+
+			const data = await response.json();
+			return { data, error: null };
+		} catch (error) {
+			return {
+				data: null,
+				error: error instanceof Error ? error : new Error('Upload failed'),
+			};
+		}
+	}
+
+	async function uploadFiles<T>(
+		endpoint: string,
+		files: File[],
+		token?: string
+	): Promise<ApiResponse<T>> {
+		const authToken = await getAuthToken(token);
+
+		try {
+			const formData = new FormData();
+			files.forEach((file) => {
+				formData.append('files', file);
+			});
+
+			const headers: Record<string, string> = {};
+			if (authToken) {
+				headers['Authorization'] = `Bearer ${authToken}`;
+			}
+
+			const response = await fetch(`${baseUrl}${apiPrefix}${endpoint}`, {
+				method: 'POST',
+				headers,
+				body: formData,
+			});
+
+			if (!response.ok) {
+				const errorData = await response.json().catch(() => ({}));
+				return {
+					data: null,
+					error: new Error(errorData.message || `Upload error: ${response.status}`),
+				};
+			}
+
+			const data = await response.json();
+			return { data, error: null };
+		} catch (error) {
+			return {
+				data: null,
+				error: error instanceof Error ? error : new Error('Upload failed'),
+			};
+		}
+	}
+
+	return {
+		get: <T>(endpoint: string, options?: Omit<FetchOptions, 'method'>) =>
+			request<T>(endpoint, { ...options, method: 'GET' }),
+		post: <T>(endpoint: string, body?: unknown, options?: Omit<FetchOptions, 'method' | 'body'>) =>
+			request<T>(endpoint, { ...options, method: 'POST', body }),
+		put: <T>(endpoint: string, body?: unknown, options?: Omit<FetchOptions, 'method' | 'body'>) =>
+			request<T>(endpoint, { ...options, method: 'PUT', body }),
+		patch: <T>(endpoint: string, body?: unknown, options?: Omit<FetchOptions, 'method' | 'body'>) =>
+			request<T>(endpoint, { ...options, method: 'PATCH', body }),
+		delete: <T>(endpoint: string, options?: Omit<FetchOptions, 'method'>) =>
+			request<T>(endpoint, { ...options, method: 'DELETE' }),
+		request,
+		uploadFile,
+		uploadFiles,
+	};
+}

packages/shared-api-client/src/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Shared API Client for ManaCore Apps
+ * Provides a unified way to make API calls with authentication.
+ */
+
+export { createApiClient, type ApiClientConfig, type ApiClient } from './client';
+export { type ApiResponse, type FetchOptions, type HttpMethod } from './types';

packages/shared-api-client/src/types.ts

@@ -0,0 +1,18 @@
+/**
+ * Shared API Client Types
+ */
+
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+
+export interface FetchOptions {
+	method?: HttpMethod;
+	body?: unknown;
+	token?: string;
+	isFormData?: boolean;
+	headers?: Record<string, string>;
+}
+
+export interface ApiResponse<T> {
+	data: T | null;
+	error: Error | null;
+}

packages/shared-api-client/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"declaration": true,
+		"declarationMap": true,
+		"outDir": "./dist",
+		"rootDir": "./src"
+	},
+	"include": ["src/**/*"],
+	"exclude": ["node_modules", "dist"]
+}

packages/shared-stores/package.json

@@ -0,0 +1,21 @@
+{
+	"name": "@manacore/shared-stores",
+	"version": "1.0.0",
+	"private": true,
+	"type": "module",
+	"main": "./src/index.ts",
+	"types": "./src/index.ts",
+	"exports": {
+		".": "./src/index.ts"
+	},
+	"scripts": {
+		"type-check": "echo 'Skipping: shared-stores uses Svelte 5 runes, type-checked at build time'"
+	},
+	"devDependencies": {
+		"svelte": "^5.0.0",
+		"typescript": "^5.0.0"
+	},
+	"dependencies": {
+		"@manacore/shared-auth": "workspace:*"
+	}
+}

packages/shared-stores/src/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared Store Factories for ManaCore Apps
+ * Provides reusable Svelte 5 runes-based stores.
+ */
+
+export { createToastStore, type Toast, type ToastStore, type ToastType } from './toast.svelte';
+export {
+	createNavigationStore,
+	type NavigationItem,
+	type NavigationStore,
+} from './navigation.svelte';
+export { createThemeStore, type ThemeStore, type ThemeMode } from './theme.svelte';

packages/shared-stores/src/navigation.svelte.ts

@@ -0,0 +1,117 @@
+/**
+ * Navigation Store Factory
+ * Creates a navigation state store with Svelte 5 runes.
+ */
+
+export interface NavigationItem {
+	href: string;
+	label: string;
+	icon?: string;
+	badge?: string | number;
+	children?: NavigationItem[];
+}
+
+export interface NavigationStore {
+	readonly items: NavigationItem[];
+	readonly isOpen: boolean;
+	readonly isSidebarMode: boolean;
+	readonly isCollapsed: boolean;
+	setItems: (items: NavigationItem[]) => void;
+	toggle: () => void;
+	open: () => void;
+	close: () => void;
+	setSidebarMode: (isSidebar: boolean) => void;
+	setCollapsed: (collapsed: boolean) => void;
+}
+
+export interface NavigationStoreConfig {
+	/** Initial navigation items */
+	initialItems?: NavigationItem[];
+	/** Storage key for persisting sidebar mode */
+	storageKey?: string;
+	/** Whether to start in sidebar mode */
+	defaultSidebarMode?: boolean;
+	/** Whether to start collapsed */
+	defaultCollapsed?: boolean;
+}
+
+/**
+ * Create a navigation store with Svelte 5 runes.
+ */
+export function createNavigationStore(config: NavigationStoreConfig = {}): NavigationStore {
+	const {
+		initialItems = [],
+		storageKey,
+		defaultSidebarMode = false,
+		defaultCollapsed = false,
+	} = config;
+
+	let items = $state<NavigationItem[]>(initialItems);
+	let isOpen = $state(false);
+	let isSidebarMode = $state(defaultSidebarMode);
+	let isCollapsed = $state(defaultCollapsed);
+
+	// Load from localStorage if available
+	if (storageKey && typeof localStorage !== 'undefined') {
+		const savedSidebar = localStorage.getItem(`${storageKey}-sidebar`);
+		const savedCollapsed = localStorage.getItem(`${storageKey}-collapsed`);
+
+		if (savedSidebar !== null) {
+			isSidebarMode = savedSidebar === 'true';
+		}
+		if (savedCollapsed !== null) {
+			isCollapsed = savedCollapsed === 'true';
+		}
+	}
+
+	function setItems(newItems: NavigationItem[]) {
+		items = newItems;
+	}
+
+	function toggle() {
+		isOpen = !isOpen;
+	}
+
+	function open() {
+		isOpen = true;
+	}
+
+	function close() {
+		isOpen = false;
+	}
+
+	function setSidebarMode(sidebar: boolean) {
+		isSidebarMode = sidebar;
+		if (storageKey && typeof localStorage !== 'undefined') {
+			localStorage.setItem(`${storageKey}-sidebar`, String(sidebar));
+		}
+	}
+
+	function setCollapsed(collapsed: boolean) {
+		isCollapsed = collapsed;
+		if (storageKey && typeof localStorage !== 'undefined') {
+			localStorage.setItem(`${storageKey}-collapsed`, String(collapsed));
+		}
+	}
+
+	return {
+		get items() {
+			return items;
+		},
+		get isOpen() {
+			return isOpen;
+		},
+		get isSidebarMode() {
+			return isSidebarMode;
+		},
+		get isCollapsed() {
+			return isCollapsed;
+		},
+		setItems,
+		toggle,
+		open,
+		close,
+		setSidebarMode,
+		setCollapsed,
+	};
+}

packages/shared-stores/src/theme.svelte.ts

@@ -0,0 +1,125 @@
+/**
+ * Theme Store Factory
+ * Creates a theme state store with Svelte 5 runes.
+ */
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+
+export interface ThemeStore {
+	readonly isDark: boolean;
+	readonly mode: ThemeMode;
+	readonly variant: string;
+	initialize: () => () => void;
+	setMode: (mode: ThemeMode) => void;
+	setVariant: (variant: string) => void;
+	toggle: () => void;
+}
+
+export interface ThemeStoreConfig {
+	/** Storage key prefix (default: 'theme') */
+	storagePrefix?: string;
+	/** Default theme mode */
+	defaultMode?: ThemeMode;
+	/** Default theme variant */
+	defaultVariant?: string;
+	/** CSS class to add/remove for dark mode */
+	darkClass?: string;
+	/** Data attribute for variant */
+	variantAttribute?: string;
+}
+
+/**
+ * Create a theme store with Svelte 5 runes.
+ */
+export function createThemeStore(config: ThemeStoreConfig = {}): ThemeStore {
+	const {
+		storagePrefix = 'theme',
+		defaultMode = 'system',
+		defaultVariant = 'default',
+		darkClass = 'dark',
+		variantAttribute = 'data-theme',
+	} = config;
+
+	let isDark = $state(false);
+	let mode = $state<ThemeMode>(defaultMode);
+	let variant = $state(defaultVariant);
+
+	function updateTheme() {
+		if (typeof window === 'undefined') return;
+
+		let shouldBeDark = false;
+		if (mode === 'dark') {
+			shouldBeDark = true;
+		} else if (mode === 'system') {
+			shouldBeDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		}
+
+		isDark = shouldBeDark;
+		document.documentElement.classList.toggle(darkClass, isDark);
+	}
+
+	function initialize(): () => void {
+		if (typeof window === 'undefined') return () => {};
+
+		// Load from localStorage
+		const savedMode = localStorage.getItem(`${storagePrefix}-mode`) as ThemeMode | null;
+		const savedVariant = localStorage.getItem(`${storagePrefix}-variant`);
+
+		if (savedMode) mode = savedMode;
+		if (savedVariant) {
+			variant = savedVariant;
+			document.documentElement.setAttribute(variantAttribute, variant);
+		}
+
+		updateTheme();
+
+		// Listen for system theme changes
+		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+		const handleChange = () => {
+			if (mode === 'system') {
+				updateTheme();
+			}
+		};
+
+		mediaQuery.addEventListener('change', handleChange);
+		return () => mediaQuery.removeEventListener('change', handleChange);
+	}
+
+	function setMode(newMode: ThemeMode) {
+		mode = newMode;
+		if (typeof localStorage !== 'undefined') {
+			localStorage.setItem(`${storagePrefix}-mode`, newMode);
+		}
+		updateTheme();
+	}
+
+	function setVariant(newVariant: string) {
+		variant = newVariant;
+		if (typeof localStorage !== 'undefined') {
+			localStorage.setItem(`${storagePrefix}-variant`, newVariant);
+		}
+		if (typeof document !== 'undefined') {
+			document.documentElement.setAttribute(variantAttribute, newVariant);
+		}
+	}
+
+	function toggle() {
+		setMode(isDark ? 'light' : 'dark');
+	}
+
+	return {
+		get isDark() {
+			return isDark;
+		},
+		get mode() {
+			return mode;
+		},
+		get variant() {
+			return variant;
+		},
+		initialize,
+		setMode,
+		setVariant,
+		toggle,
+	};
+}

packages/shared-stores/src/toast.svelte.ts

@@ -0,0 +1,76 @@
+/**
+ * Toast Store Factory
+ * Creates a toast notification store with Svelte 5 runes.
+ */
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+export interface Toast {
+	id: string;
+	type: ToastType;
+	message: string;
+	duration?: number;
+}
+
+export interface ToastStore {
+	readonly toasts: Toast[];
+	show: (message: string, type?: ToastType, duration?: number) => void;
+	success: (message: string, duration?: number) => void;
+	error: (message: string, duration?: number) => void;
+	info: (message: string, duration?: number) => void;
+	warning: (message: string, duration?: number) => void;
+	dismiss: (id: string) => void;
+	clear: () => void;
+}
+
+export interface ToastStoreConfig {
+	/** Default duration in milliseconds (default: 5000) */
+	defaultDuration?: number;
+	/** Maximum number of toasts visible at once */
+	maxToasts?: number;
+}
+
+/**
+ * Create a toast store with Svelte 5 runes.
+ */
+export function createToastStore(config: ToastStoreConfig = {}): ToastStore {
+	const { defaultDuration = 5000, maxToasts = 5 } = config;
+
+	let toasts = $state<Toast[]>([]);
+
+	function generateId(): string {
+		return Math.random().toString(36).substring(2, 9);
+	}
+
+	function show(message: string, type: ToastType = 'info', duration: number = defaultDuration) {
+		const id = generateId();
+		const toast: Toast = { id, type, message, duration };
+
+		toasts = [...toasts.slice(-(maxToasts - 1)), toast];
+
+		if (duration > 0) {
+			setTimeout(() => dismiss(id), duration);
+		}
+	}
+
+	function dismiss(id: string) {
+		toasts = toasts.filter((t) => t.id !== id);
+	}
+
+	function clear() {
+		toasts = [];
+	}
+
+	return {
+		get toasts() {
+			return toasts;
+		},
+		show,
+		success: (message: string, duration?: number) => show(message, 'success', duration),
+		error: (message: string, duration?: number) => show(message, 'error', duration),
+		info: (message: string, duration?: number) => show(message, 'info', duration),
+		warning: (message: string, duration?: number) => show(message, 'warning', duration),
+		dismiss,
+		clear,
+	};
+}

packages/shared-stores/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"declaration": true,
+		"declarationMap": true,
+		"outDir": "./dist",
+		"rootDir": "./src"
+	},
+	"include": ["src/**/*"],
+	"exclude": ["node_modules", "dist"]
+}

packages/shared-vite-config/package.json

@@ -0,0 +1,18 @@
+{
+	"name": "@manacore/shared-vite-config",
+	"version": "1.0.0",
+	"private": true,
+	"type": "module",
+	"main": "./src/index.ts",
+	"types": "./src/index.ts",
+	"exports": {
+		".": "./src/index.ts"
+	},
+	"scripts": {
+		"type-check": "tsc --noEmit"
+	},
+	"devDependencies": {
+		"typescript": "^5.0.0",
+		"vite": "^6.0.0"
+	}
+}

packages/shared-vite-config/src/index.ts

@@ -0,0 +1,130 @@
+/**
+ * Shared Vite Configuration for ManaCore Web Apps
+ * Provides consistent SSR and optimization settings.
+ */
+
+import type { UserConfig } from 'vite';
+
+/**
+ * Common ManaCore shared packages that need SSR configuration.
+ * These packages contain Svelte 5 runes or other client-side state.
+ */
+export const MANACORE_SHARED_PACKAGES = [
+	'@manacore/shared-icons',
+	'@manacore/shared-ui',
+	'@manacore/shared-tailwind',
+	'@manacore/shared-theme',
+	'@manacore/shared-theme-ui',
+	'@manacore/shared-feedback-ui',
+	'@manacore/shared-feedback-service',
+	'@manacore/shared-feedback-types',
+	'@manacore/shared-auth',
+	'@manacore/shared-auth-ui',
+	'@manacore/shared-branding',
+	'@manacore/shared-subscription-ui',
+	'@manacore/shared-profile-ui',
+	'@manacore/shared-i18n',
+	'@manacore/shared-api-client',
+] as const;
+
+export interface ViteConfigOptions {
+	/** Server port */
+	port: number;
+	/** Additional packages to include in noExternal (e.g., app-specific shared packages) */
+	additionalPackages?: string[];
+	/** Additional packages to exclude from optimization */
+	additionalExcludes?: string[];
+	/** Override default shared packages (if you need a subset) */
+	sharedPackages?: string[];
+}
+
+/**
+ * Get the SSR noExternal configuration for ManaCore apps.
+ */
+export function getSsrNoExternal(additionalPackages: string[] = []): string[] {
+	return [...MANACORE_SHARED_PACKAGES, ...additionalPackages];
+}
+
+/**
+ * Get the optimizeDeps exclude configuration for ManaCore apps.
+ */
+export function getOptimizeDepsExclude(additionalExcludes: string[] = []): string[] {
+	return [...MANACORE_SHARED_PACKAGES, ...additionalExcludes];
+}
+
+/**
+ * Create a base Vite configuration for ManaCore SvelteKit apps.
+ * Merge this with your app-specific configuration.
+ */
+export function createViteConfig(options: ViteConfigOptions): Partial<UserConfig> {
+	const { port, additionalPackages = [], additionalExcludes = [] } = options;
+
+	const packages = options.sharedPackages || [...MANACORE_SHARED_PACKAGES];
+	const noExternal = [...packages, ...additionalPackages];
+	const exclude = [...packages, ...additionalExcludes];
+
+	return {
+		server: {
+			port,
+			strictPort: true,
+		},
+		ssr: {
+			noExternal,
+		},
+		optimizeDeps: {
+			exclude,
+		},
+	};
+}
+
+/**
+ * Merge base config with app-specific plugins and settings.
+ * Use this in your vite.config.ts:
+ *
+ * @example
+ * ```ts
+ * import { sveltekit } from '@sveltejs/kit/vite';
+ * import tailwindcss from '@tailwindcss/vite';
+ * import { defineConfig } from 'vite';
+ * import { createViteConfig, mergeViteConfig } from '@manacore/shared-vite-config';
+ *
+ * const baseConfig = createViteConfig({
+ *   port: 5174,
+ *   additionalPackages: ['@chat/shared'],
+ * });
+ *
+ * export default defineConfig(mergeViteConfig(baseConfig, {
+ *   plugins: [tailwindcss(), sveltekit()],
+ * }));
+ * ```
+ */
+export function mergeViteConfig(
+	baseConfig: Partial<UserConfig>,
+	appConfig: Partial<UserConfig>
+): UserConfig {
+	return {
+		...baseConfig,
+		...appConfig,
+		server: {
+			...baseConfig.server,
+			...appConfig.server,
+		},
+		ssr: {
+			...baseConfig.ssr,
+			...appConfig.ssr,
+			noExternal: [
+				...((baseConfig.ssr?.noExternal as string[]) || []),
+				...((appConfig.ssr?.noExternal as string[]) || []),
+			],
+		},
+		optimizeDeps: {
+			...baseConfig.optimizeDeps,
+			...appConfig.optimizeDeps,
+			exclude: [
+				...(baseConfig.optimizeDeps?.exclude || []),
+				...(appConfig.optimizeDeps?.exclude || []),
+			],
+		},
+		plugins: [...(baseConfig.plugins || []), ...(appConfig.plugins || [])],
+	};
+}

packages/shared-vite-config/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"declaration": true,
+		"declarationMap": true,
+		"outDir": "./dist",
+		"rootDir": "./src"
+	},
+	"include": ["src/**/*"],
+	"exclude": ["node_modules", "dist"]
+}