Commit Message feat: implement comprehensive shared packages architecture for monorepo SUMMARY: Introduce 10 shared packages to unify common code across all 4 web apps, reducing ~3,000 lines of duplicated code and establishing consistent patterns for authentication, UI components, theming, and utilities. NEW SHARED PACKAGES: - @manacore/shared-auth: Unified auth logic (token management, JWT utils, fetch interceptor, storage/device/network adapters) - @manacore/shared-auth-ui: Reusable auth UI (LoginPage, RegisterPage, OAuth buttons for Google/Apple) - @manacore/shared-tailwind: Unified Tailwind config with 4 themes (lume, nature, stone, ocean) and light/dark mode support - @manacore/shared-icons: Phosphor-based icon library (40+ icons) - @manacore/shared-ui: Atomic design system (Text, Button, Badge, Toggle, Input, Modal) - @manacore/shared-i18n: Unified i18n setup with locale detection - @manacore/shared-config: Environment validation with Zod - @manacore/shared-subscriptio n-types: Subscription type definitions - @manacore/shared-subscriptio n-ui: Subscription UI components (planned) EXTENDED PACKAGES: - @manacore/shared-types: Added auth.ts, theme.ts, ui.ts, common.ts - @manacore/shared-utils: Added format.ts, validation.ts APP MIGRATIONS: - memoro/web: Migrated login (549→46 LOC), tailwind (165→12 LOC), removed 15+ duplicate components - manacore/web: Migrated to client-side auth with shared-auth, added new components (Icon, ThemeToggle, Logo) - manadeck/web: Replaced local authService/tokenManager with shared-auth, migrated auth pages - maerchenzauber/web: Added auth setup, stores, components, routes DELETED FILES (migrated to shared packages): - OAuth buttons (Google/Apple) from memoro, manacore, manadeck - Local authService, tokenManager, deviceManager, jwt utils - Duplicate Modal, Toggle, Text components - iconPaths and ManaIcon components - Subscription-related components (CostCard, PackageCard, etc.) BENEFITS: - 92% reduction in login page code - 93% reduction in tailwind config code - Consistent theming across all apps - Single source of truth for auth logic - Easier maintenance and updates BREAKING CHANGES: - Icon imports now from @manacore/shared-icons - Modal imports from @manacore/shared-ui - OAuth config via setGoogleCl ientId()/setAppleConfig()

packages/shared-ui/src/organisms/Modal.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Icon } from '@manacore/shared-icons';
+	import Text from '../atoms/Text.svelte';
+
+	interface Props {
+		visible: boolean;
+		onClose: () => void;
+		title?: string;
+		icon?: Snippet;
+		children: Snippet;
+		footer?: Snippet;
+		maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+		showHeader?: boolean;
+	}
+
+	let { visible, onClose, title, icon, children, footer, maxWidth = 'lg', showHeader = true }: Props = $props();
+
+	const maxWidthClasses = {
+		sm: 'max-w-sm',
+		md: 'max-w-md',
+		lg: 'max-w-lg',
+		xl: 'max-w-xl',
+		'2xl': 'max-w-2xl',
+		'3xl': 'max-w-3xl'
+	};
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			onClose();
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape' && visible) {
+			onClose();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if visible}
+	<!-- Modal Backdrop -->
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+		onclick={handleBackdropClick}
+		role="dialog"
+		aria-modal="true"
+	>
+		<!-- Modal Content -->
+		<div
+			class="relative flex max-h-[90vh] w-full {maxWidthClasses[maxWidth]} flex-col rounded-xl border border-theme bg-menu shadow-xl"
+			onclick={(e) => e.stopPropagation()}
+		>
+			{#if showHeader}
+				<!-- Header -->
+				<div class="flex items-center justify-between p-6 border-b border-theme">
+					<div class="flex items-center gap-2 flex-1">
+						{#if icon}
+							{@render icon()}
+						{/if}
+						{#if title}
+							<Text variant="large" weight="semibold">
+								{title}
+							</Text>
+						{/if}
+					</div>
+					<button
+						onclick={onClose}
+						class="p-2 rounded-full hover:bg-menu-hover transition-colors"
+						aria-label="Close"
+					>
+						<Icon name="x" size={20} class="text-theme-muted" />
+					</button>
+				</div>
+			{/if}
+
+			<!-- Body (scrollable) -->
+			<div class="flex-1 overflow-y-auto p-6">
+				{@render children()}
+			</div>
+
+			<!-- Footer (optional) -->
+			{#if footer}
+				<div class="border-t border-theme p-6">
+					{@render footer()}
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}

packages/shared-ui/src/organisms/index.ts

@@ -0,0 +1 @@
+export { default as Modal } from './Modal.svelte';