🐛 fix(lightwrite): add LightWriteLogo to shared-branding

- Add lightwrite to AppId type
- Add lightwrite branding config (orange theme, music note icon)
- Create LightWriteLogo.svelte component
- Update login/register pages to use proper logo component
- Fixes type-check errors in @lightwrite/web

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

@@ -4,13 +4,9 @@
 	import { browser } from '$app/environment';
 	import { LoginPage } from '@manacore/shared-auth-ui';
 	import { getLoginTranslations } from '@manacore/shared-i18n';
+	import { LightWriteLogo } from '@manacore/shared-branding';
 	import { authStore } from '$lib/stores/auth.svelte';
 
-	// Simple LightWrite Logo component
-	function LightWriteLogo() {
-		return null; // Will use appName text instead
-	}
-
 	// Get redirect URL from query params or sessionStorage
 	const redirectTo = $derived.by(() => {
 		const queryRedirect = $page.url.searchParams.get('redirectTo');

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

@@ -3,13 +3,9 @@
 	import { browser } from '$app/environment';
 	import { RegisterPage } from '@manacore/shared-auth-ui';
 	import { getRegisterTranslations } from '@manacore/shared-i18n';
+	import { LightWriteLogo } from '@manacore/shared-branding';
 	import { authStore } from '$lib/stores/auth.svelte';
 
-	// Simple LightWrite Logo component
-	function LightWriteLogo() {
-		return null; // Will use appName text instead
-	}
-
 	// Get redirect URL from sessionStorage
 	const redirectTo = $derived.by(() => {
 		if (browser) {

packages/shared-branding/src/config.ts

@@ -271,6 +271,19 @@ export const APP_BRANDING: Record<AppId, AppBranding> = {
 		logoStroke: true,
 		logoStrokeWidth: 1.5,
 	},
+	lightwrite: {
+		id: 'lightwrite',
+		name: 'LightWrite',
+		tagline: 'Beat & Lyrics Editor',
+		primaryColor: '#f97316',
+		secondaryColor: '#fb923c',
+		// Musical note with waveform icon
+		logoPath:
+			'M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3',
+		logoViewBox: '0 0 24 24',
+		logoStroke: true,
+		logoStrokeWidth: 1.5,
+	},
 };
 
 /**

packages/shared-branding/src/index.ts

@@ -35,6 +35,7 @@ export {
 	SkillTreeLogo,
 	PlantaLogo,
 	PlaygroundLogo,
+	LightWriteLogo,
 } from './logos';
 
 // Configuration

packages/shared-branding/src/logos/LightWriteLogo.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="lightwrite" {size} {color} class={className} />

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

@@ -22,3 +22,4 @@ export { default as QuestionsLogo } from './QuestionsLogo.svelte';
 export { default as SkillTreeLogo } from './SkillTreeLogo.svelte';
 export { default as PlantaLogo } from './PlantaLogo.svelte';
 export { default as PlaygroundLogo } from './PlaygroundLogo.svelte';
+export { default as LightWriteLogo } from './LightWriteLogo.svelte';

packages/shared-branding/src/types.ts

@@ -22,7 +22,8 @@ export type AppId =
 	| 'questions'
 	| 'skilltree'
 	| 'planta'
-	| 'playground';
+	| 'playground'
+	| 'lightwrite';
 
 /**
  * App branding configuration