feat: add onboarding to 6 new apps and feature intro step to all 16 apps

Add onboarding with feature overview, preference selection, and tips to
Zitare, Mukke, Photos, Planta, SkillTree, and Questions. Insert a new
first "features" info step into all 10 existing onboarding flows so every
app now starts with a core-features overview page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/mukke/apps/web/package.json

@@ -52,6 +52,7 @@
 		"@manacore/shared-theme-ui": "workspace:*",
 		"@manacore/shared-ui": "workspace:*",
 		"@manacore/shared-utils": "workspace:*",
+		"@manacore/shared-app-onboarding": "workspace:*",
 		"@mukke/shared": "workspace:*",
 		"butterchurn": "^2.6.7",
 		"butterchurn-presets": "^2.4.7",

apps/mukke/apps/web/src/lib/stores/app-onboarding.svelte.ts

@@ -0,0 +1,64 @@
+import { createAppOnboardingStore, type AppOnboardingStep } from '@manacore/shared-app-onboarding';
+import { userSettings } from './user-settings.svelte';
+
+const mukkeOnboardingSteps: AppOnboardingStep[] = [
+	{
+		id: 'features',
+		type: 'info',
+		question: 'Willkommen bei Mukke!',
+		description: 'Das kann Mukke für dich tun:',
+		emoji: '🎵',
+		gradient: { from: 'purple-500', to: 'purple-700' },
+		bullets: [
+			'Musik-Bibliothek mit Alben & Künstlern',
+			'Playlists erstellen & verwalten',
+			'Beat-Editor mit Waveform-Visualisierung',
+			'BPM-Erkennung & Lyrics-Sync',
+		],
+	},
+	{
+		id: 'viewMode',
+		type: 'select',
+		question: 'Wie möchtest du deine Bibliothek sehen?',
+		description: 'Du kannst die Ansicht jederzeit wechseln.',
+		emoji: '📚',
+		gradient: { from: 'indigo-500', to: 'indigo-700' },
+		options: [
+			{
+				id: 'grid',
+				label: 'Grid-Ansicht',
+				description: 'Cover-Art im Raster (Empfohlen)',
+				emoji: '🎨',
+			},
+			{
+				id: 'list',
+				label: 'Listenansicht',
+				description: 'Kompakte Liste mit Details',
+				emoji: '📋',
+			},
+		],
+		defaultValue: 'grid',
+	},
+	{
+		id: 'welcome',
+		type: 'info',
+		question: 'Deine Musik wartet!',
+		description: 'Hier sind einige Tipps:',
+		emoji: '🎉',
+		gradient: { from: 'primary', to: 'primary/70' },
+		bullets: [
+			'Lade Songs per Drag & Drop hoch',
+			'ID3-Tags werden automatisch erkannt',
+			'Erstelle Projekte im Beat-Editor',
+			'Exportiere synchronisierte Lyrics als LRC oder SRT',
+		],
+	},
+];
+
+export const mukkeOnboarding = createAppOnboardingStore({
+	appId: 'mukke',
+	steps: mukkeOnboardingSteps,
+	userSettings,
+	onComplete: async () => {},
+	onSkip: async () => {},
+});

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

@@ -0,0 +1,18 @@
+import { browser } from '$app/environment';
+import { createUserSettingsStore } from '@manacore/shared-theme';
+import { authStore } from './auth.svelte';
+
+function getAuthUrl(): string {
+	if (browser && typeof window !== 'undefined') {
+		const injectedUrl = (window as unknown as { __PUBLIC_MANA_CORE_AUTH_URL__?: string })
+			.__PUBLIC_MANA_CORE_AUTH_URL__;
+		return injectedUrl || 'http://localhost:3001';
+	}
+	return 'http://localhost:3001';
+}
+
+export const userSettings = createUserSettingsStore({
+	appId: 'mukke',
+	authUrl: getAuthUrl(),
+	getAccessToken: () => authStore.getValidToken(),
+});

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

@@ -3,6 +3,8 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { theme } from '$lib/stores/theme.svelte';
+	import { MiniOnboardingModal } from '@manacore/shared-app-onboarding';
+	import { mukkeOnboarding } from '$lib/stores/app-onboarding.svelte';
 
 	let { children } = $props();
 
@@ -34,4 +36,8 @@
 	<div class="min-h-screen bg-background text-foreground">
 		{@render children()}
 	</div>
+
+	{#if mukkeOnboarding.shouldShow}
+		<MiniOnboardingModal store={mukkeOnboarding} appName="Mukke" appEmoji="🎵" />
+	{/if}
 {/if}