feat: unify UI components, AppSlider, and login screens across apps

SUMMARY:
Consolidate shared UI components into @manacore/shared-ui and add
AppSlider to all login screens for a consistent Mana ecosystem experience.

CHANGES:

1. UI Components Migration:
   - Added Card.svelte to @manacore/shared-ui with variants (elevated, outlined, ghost)
   - Migrated Manacore (7 files) and Manadeck (7 files) to use shared-ui
   - Removed local ui/ directories from both apps (8 components total)

2. AppSlider Unification:
   - Created shared AppSlider in @manacore/shared-ui with configurable props
   - Props: apps[], title, isDark, statusLabels, comingSoonLabel, openAppLabel, onAppClick
   - Supports both i18n and static text configurations
   - Updated Memoro AppSlider to use shared component with svelte-i18n
   - Updated Manacore AppSlider to use shared component
   - Created new AppSlider for ManaDeck and Märchenzauber

3. Login Page Enhancements:
   - Extended LoginPage in @manacore/shared-auth-ui with new snippets:
     - appSlider: Renders AppSlider at bottom (initial mode only)
     - headerControls: Renders controls (theme toggle, etc.) top-right
   - Updated all app login pages to include AppSlider:
     - ManaCore: indigo theme (#6366f1)
     - ManaDeck: violet theme (#8b5cf6)
     - Märchenzauber: pink theme (#FF6B9D)

4. Subscription Page Consolidation:
   - Created SubscriptionPage component in @manacore/shared-subscription-ui
   - Moved subscription data (plans, packages, costs) to shared package
   - Reduced subscription page code from ~100 to ~18 lines per app

FILES CHANGED:
- packages/shared-ui: Added Card, AppSlider, updated exports
- packages/shared-auth-ui: Extended LoginPage with snippets
- packages/shared-subscription-ui: Added SubscriptionPage, data files
- manacore/web: Migrated 7 files to shared-ui, updated login
- manadeck/web: Migrated 7 files to shared-ui, added AppSlider, updated login
- maerchenzauber/web: Added AppSlider, updated login
- memoro/web: Updated AppSlider to use shared component

DELETED (moved to shared packages):
- manacore/web/src/lib/components/ui/* (3 files)
- manadeck/web/src/lib/components/ui/* (5 files)
- memoro/web/src/lib/data/*.json (3 files)
- Various pnpm-lock.yaml and pnpm-workspace.yaml files

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

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

maerchenzauber/apps/web/package.json

@@ -15,6 +15,7 @@
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/kit": "^2.47.1",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/postcss": "^4.1.17",
 		"autoprefixer": "^10.4.22",
 		"postcss": "^8.5.6",
 		"svelte": "^5.41.0",
@@ -29,10 +30,12 @@
 		"@manacore/shared-config": "workspace:*",
 		"@manacore/shared-i18n": "workspace:*",
 		"@manacore/shared-icons": "workspace:*",
-		"@manacore/shared-supabase": "workspace:*",
 		"@manacore/shared-subscription-types": "workspace:*",
 		"@manacore/shared-subscription-ui": "workspace:*",
+		"@manacore/shared-supabase": "workspace:*",
 		"@manacore/shared-tailwind": "workspace:*",
+		"@manacore/shared-theme": "workspace:*",
+		"@manacore/shared-theme-ui": "workspace:*",
 		"@manacore/shared-types": "workspace:*",
 		"@manacore/shared-ui": "workspace:*",
 		"@manacore/shared-utils": "workspace:*",

maerchenzauber/apps/web/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

maerchenzauber/apps/web/src/app.css

@@ -1 +1,5 @@
-@import "tailwindcss";
+@import '@manacore/shared-tailwind/themes.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

maerchenzauber/apps/web/src/lib/components/AppSlider.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { AppSlider, type AppItem } from '@manacore/shared-ui';
+
+	const apps: AppItem[] = [
+		{
+			name: 'Memoro',
+			description: 'AI Voice Memos',
+			longDescription: 'Transform your voice recordings into organized, searchable notes with AI-powered transcription and insights.',
+			icon: '/images/app-icons/memoro-logo-gradient.png',
+			color: '#f8d62b',
+			comingSoon: false,
+			status: 'published'
+		},
+		{
+			name: 'Märchenzauber',
+			description: 'AI Story Creator',
+			longDescription: 'Create magical personalized stories for children with AI-generated illustrations and consistent characters.',
+			icon: '/images/app-icons/maerchenzauber-logo-gradient.png',
+			color: '#FF6B9D',
+			comingSoon: false,
+			status: 'beta'
+		},
+		{
+			name: 'ManaDeck',
+			description: 'AI Flashcards',
+			longDescription: 'Create and study smart flashcards with AI-powered spaced repetition for efficient learning.',
+			icon: '/images/app-icons/manadeck-logo-gradient.png',
+			color: '#8b5cf6',
+			comingSoon: true,
+			status: 'development'
+		},
+		{
+			name: 'Manacore',
+			description: 'Central Hub',
+			longDescription: 'Your central hub for managing all Mana applications, subscriptions, and account settings.',
+			icon: '/images/app-icons/manacore-logo-gradient.png',
+			color: '#6366f1',
+			comingSoon: true,
+			status: 'development'
+		}
+	];
+
+	function handleAppClick(app: AppItem, index: number) {
+		console.log('Opening app:', app.name);
+	}
+</script>
+
+<AppSlider
+	{apps}
+	title="Part of the Mana Ecosystem"
+	isDark={false}
+	onAppClick={handleAppClick}
+/>

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

@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { LoginPage } from '@manacore/shared-auth-ui';
 	import StorytellerLogo from '$lib/components/StorytellerLogo.svelte';
+	import AppSlider from '$lib/components/AppSlider.svelte';
 	import { authStore } from '$lib/stores/authStore.svelte';
 
 	async function handleSignIn(email: string, password: string) {
@@ -18,9 +19,9 @@
 </script>
 
 <LoginPage
-	appName="Storyteller"
+	appName="Märchenzauber"
 	logo={StorytellerLogo}
-	primaryColor="#6366f1"
+	primaryColor="#FF6B9D"
 	onSignIn={handleSignIn}
 	onSignInWithGoogle={handleSignInWithGoogle}
 	onForgotPassword={handleForgotPassword}
@@ -29,6 +30,10 @@
 	enableApple={true}
 	successRedirect="/dashboard"
 	registerPath="/register"
-	lightBackground="#f5f5f5"
-	darkBackground="#121212"
-/>
+	lightBackground="#fff5f8"
+	darkBackground="#1a1218"
+>
+	{#snippet appSlider()}
+		<AppSlider />
+	{/snippet}
+</LoginPage>