refactor: consolidate app logos into shared-branding package (Tier 4)

- Add pre-configured logo components to @manacore/shared-branding:
  - MemoroLogo, ManaCoreLogo, ManaDeckLogo, StorytellerLogo
- Update all apps to import logos from shared-branding
- Remove redundant local logo wrapper components from each app

This reduces code duplication by centralizing app logos while
maintaining the same API for consumers.

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

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

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

@@ -1,26 +0,0 @@
-<script lang="ts">
-	interface Props {
-		size?: number;
-		color?: string;
-	}
-
-	let { size = 55, color = '#6366f1' }: Props = $props();
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	width={size}
-	height={size}
-	viewBox="0 0 24 24"
-	fill={color}
->
-	<!-- Book/Story icon -->
-	<path
-		d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
-		stroke={color}
-		stroke-width="1.5"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		fill="none"
-	/>
-</svg>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { LoginPage } from '@manacore/shared-auth-ui';
-	import StorytellerLogo from '$lib/components/StorytellerLogo.svelte';
+	import { StorytellerLogo } from '@manacore/shared-branding';
 	import AppSlider from '$lib/components/AppSlider.svelte';
 	import { authStore } from '$lib/stores/authStore.svelte';
 

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { RegisterPage } from '@manacore/shared-auth-ui';
-	import StorytellerLogo from '$lib/components/StorytellerLogo.svelte';
+	import { StorytellerLogo } from '@manacore/shared-branding';
+	import AppSlider from '$lib/components/AppSlider.svelte';
 	import { authStore } from '$lib/stores/authStore.svelte';
 
 	async function handleSignUp(email: string, password: string) {
@@ -10,13 +11,17 @@
 </script>
 
 <RegisterPage
-	appName="Storyteller"
+	appName="Märchenzauber"
 	logo={StorytellerLogo}
-	primaryColor="#6366f1"
+	primaryColor="#FF6B9D"
 	onSignUp={handleSignUp}
 	goto={goto}
 	successRedirect="/dashboard"
 	loginPath="/login"
-	lightBackground="#f5f5f5"
-	darkBackground="#121212"
-/>
+	lightBackground="#fff5f8"
+	darkBackground="#1a1218"
+>
+	{#snippet appSlider()}
+		<AppSlider />
+	{/snippet}
+</RegisterPage>

manacore/apps/web/src/lib/components/ManaCoreLogo.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	interface Props {
-		size?: number;
-		color?: string;
-	}
-
-	let { size = 55, color = '#6366f1' }: Props = $props();
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	width={size}
-	height={size}
-	viewBox="0 0 24 24"
-	fill="none"
->
-	<!-- M letter for ManaCore -->
-	<text
-		x="50%"
-		y="55%"
-		dominant-baseline="middle"
-		text-anchor="middle"
-		font-size="16"
-		font-weight="bold"
-		fill={color}
-	>
-		M
-	</text>
-</svg>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { LoginPage } from '@manacore/shared-auth-ui';
-	import ManaCoreLogo from '$lib/components/ManaCoreLogo.svelte';
+	import { ManaCoreLogo } from '@manacore/shared-branding';
 	import AppSlider from '$lib/components/AppSlider.svelte';
 	import { authStore } from '$lib/stores/authStore.svelte';
 

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { RegisterPage } from '@manacore/shared-auth-ui';
-	import ManaCoreLogo from '$lib/components/ManaCoreLogo.svelte';
+	import { ManaCoreLogo } from '@manacore/shared-branding';
+	import AppSlider from '$lib/components/AppSlider.svelte';
 	import { authStore } from '$lib/stores/authStore.svelte';
 
 	async function handleSignUp(email: string, password: string) {
@@ -19,4 +20,8 @@
 	loginPath="/login"
 	lightBackground="#f3f4f6"
 	darkBackground="#121212"
-/>
+>
+	{#snippet appSlider()}
+		<AppSlider />
+	{/snippet}
+</RegisterPage>

manadeck/apps/web/src/lib/components/ManaDeckLogo.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	interface Props {
-		size?: number;
-		color?: string;
-	}
-
-	let { size = 55, color = '#8b5cf6' }: Props = $props();
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	width={size}
-	height={size}
-	viewBox="0 0 24 24"
-	fill="none"
-	stroke={color}
-	stroke-width="1.5"
-	stroke-linecap="round"
-	stroke-linejoin="round"
->
-	<!-- Cards/Deck icon -->
-	<rect x="2" y="4" width="20" height="16" rx="2" />
-	<path d="M6 2v2" />
-	<path d="M18 2v2" />
-	<path d="M6 20v2" />
-	<path d="M18 20v2" />
-	<path d="M2 10h20" />
-</svg>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { LoginPage } from '@manacore/shared-auth-ui';
-	import ManaDeckLogo from '$lib/components/ManaDeckLogo.svelte';
+	import { ManaDeckLogo } from '@manacore/shared-branding';
 	import AppSlider from '$lib/components/AppSlider.svelte';
 	import { authStore } from '$lib/stores/authStore.svelte';
 

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { RegisterPage } from '@manacore/shared-auth-ui';
-	import ManaDeckLogo from '$lib/components/ManaDeckLogo.svelte';
+	import { ManaDeckLogo } from '@manacore/shared-branding';
+	import AppSlider from '$lib/components/AppSlider.svelte';
 	import { authStore } from '$lib/stores/authStore.svelte';
 
 	async function handleSignUp(email: string, password: string) {
@@ -19,4 +20,8 @@
 	loginPath="/login"
 	lightBackground="#faf5ff"
 	darkBackground="#1a1625"
-/>
+>
+	{#snippet appSlider()}
+		<AppSlider />
+	{/snippet}
+</RegisterPage>

memoro/apps/web/src/lib/components/MemoroLogo.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	interface Props {
-		color?: string;
-		size?: number;
-		class?: string;
-	}
-
-	let { color = '#F7D44C', size = 24, class: className = '' }: Props = $props();
-</script>
-
-<div class={className} style="width: {size}px; height: {size}px;">
-	<svg width={size} height={size} viewBox="0 0 280 280">
-		<path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			d="M280 140C280 217.32 217.32 280 140 280C62.6801 280 0 217.32 0 140C0 62.6801 62.6801 0 140 0C217.32 0 280 62.6801 280 140ZM247.988 140C247.988 199.64 199.64 241.988 140 241.988C80.3598 241.988 32.0118 199.64 32.0118 140C32.0118 111.918 36.7308 95.3397 54.3005 76.1331C58.5193 71.5212 70.5 63 79.3937 74.511L119.781 131.788C134.5 149 149 147 160.218 131.788L200.605 74.5101C208 64 221.48 71.5203 225.699 76.1321C243.269 95.3388 247.988 111.918 247.988 140Z"
-			fill={color}
-		/>
-	</svg>
-</div>

memoro/apps/web/src/routes/(public)/login/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { LoginPage, setGoogleClientId, setAppleConfig } from '@manacore/shared-auth-ui';
-	import MemoroLogo from '$lib/components/MemoroLogo.svelte';
+	import { MemoroLogo } from '@manacore/shared-branding';
+	import AppSlider from '$lib/components/AppSlider.svelte';
 	import { auth } from '$lib/stores/auth';
 	import { env } from '$lib/config/env';
 	import { onMount } from 'svelte';
@@ -43,4 +44,8 @@
 	registerPath="/register"
 	lightBackground="#dddddd"
 	darkBackground="#101010"
-/>
+>
+	{#snippet appSlider()}
+		<AppSlider />
+	{/snippet}
+</LoginPage>

memoro/apps/web/src/routes/(public)/register/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { RegisterPage } from '@manacore/shared-auth-ui';
-	import MemoroLogo from '$lib/components/MemoroLogo.svelte';
+	import { MemoroLogo } from '@manacore/shared-branding';
+	import AppSlider from '$lib/components/AppSlider.svelte';
 	import { auth } from '$lib/stores/auth';
 
 	async function handleSignUp(email: string, password: string) {
@@ -19,4 +20,8 @@
 	loginPath="/login"
 	lightBackground="#dddddd"
 	darkBackground="#101010"
-/>
+>
+	{#snippet appSlider()}
+		<AppSlider />
+	{/snippet}
+</RegisterPage>

packages/shared-branding/src/index.ts

@@ -3,15 +3,24 @@
  *
  * This package provides:
  * - App logos (AppLogo, AppLogoWithName)
+ * - Pre-configured app logos (MemoroLogo, ManaCoreLogo, etc.)
  * - Mana icon (ManaIcon)
  * - Branding configuration (colors, names, taglines)
  */
 
-// Components
+// Generic Components
 export { default as AppLogo } from './AppLogo.svelte';
 export { default as AppLogoWithName } from './AppLogoWithName.svelte';
 export { default as ManaIcon } from './ManaIcon.svelte';
 
+// Pre-configured App Logos
+export {
+	MemoroLogo,
+	ManaCoreLogo,
+	ManaDeckLogo,
+	StorytellerLogo
+} from './logos';
+
 // Configuration
 export { APP_BRANDING, getAppBranding, getAllAppBrandings } from './config';
 

packages/shared-branding/src/logos/ManaCoreLogo.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import AppLogo from '../AppLogo.svelte';
+
+	interface Props {
+		size?: number;
+		color?: string;
+		class?: string;
+	}
+
+	let { size = 55, color, class: className = '' }: Props = $props();
+</script>
+
+<AppLogo app="manacore" {size} {color} class={className} />

packages/shared-branding/src/logos/ManaDeckLogo.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import AppLogo from '../AppLogo.svelte';
+
+	interface Props {
+		size?: number;
+		color?: string;
+		class?: string;
+	}
+
+	let { size = 55, color, class: className = '' }: Props = $props();
+</script>
+
+<AppLogo app="manadeck" {size} {color} class={className} />

packages/shared-branding/src/logos/MemoroLogo.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import AppLogo from '../AppLogo.svelte';
+
+	interface Props {
+		size?: number;
+		color?: string;
+		class?: string;
+	}
+
+	let { size = 55, color, class: className = '' }: Props = $props();
+</script>
+
+<AppLogo app="memoro" {size} {color} class={className} />

packages/shared-branding/src/logos/StorytellerLogo.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import AppLogo from '../AppLogo.svelte';
+
+	interface Props {
+		size?: number;
+		color?: string;
+		class?: string;
+	}
+
+	let { size = 55, color, class: className = '' }: Props = $props();
+</script>
+
+<AppLogo app="maerchenzauber" {size} {color} class={className} />

packages/shared-branding/src/logos/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Pre-configured app logo components
+ * These provide convenient shortcuts for each app's logo
+ */
+export { default as MemoroLogo } from './MemoroLogo.svelte';
+export { default as ManaCoreLogo } from './ManaCoreLogo.svelte';
+export { default as ManaDeckLogo } from './ManaDeckLogo.svelte';
+export { default as StorytellerLogo } from './StorytellerLogo.svelte';