style: auto-format codebase with Prettier

Applied formatting to 1487+ files using pnpm format:write - TypeScript/JavaScript files - Svelte components - Astro pages - JSON configs - Markdown docs 13 files still need manual review (Astro JSX comments)
2026-05-21 04:46:41 +02:00 · 2025-11-27 18:33:16 +01:00 · 2025-11-27 18:33:16 +01:00 · d36b321d9d
commit d36b321d9d
parent 0241f5554c
3952 changed files with 661498 additions and 739751 deletions
--- a/apps/picture/docs/BATCH_GENERATION_PLAN.md
+++ b/apps/picture/docs/BATCH_GENERATION_PLAN.md
@ -1,6 +1,7 @@
 # 🚀 Batch Generation Implementation Plan

 ## 📋 Übersicht
+
 Implementierung eines Batch Generation Systems, das es Nutzern ermöglicht, mehrere Bilder gleichzeitig mit verschiedenen Prompts oder Variationen zu generieren.

 ---
@ -8,6 +9,7 @@ Implementierung eines Batch Generation Systems, das es Nutzern ermöglicht, mehr
 ## 🎯 Ziele & Requirements

 ### Funktionale Anforderungen
+
 - **Batch-Größe**: 2-10 Bilder pro Batch
 - **Parallel Processing**: Bis zu 3 gleichzeitige Generierungen
 - **Queue Management**: FIFO-Queue für wartende Generierungen
@ -16,6 +18,7 @@ Implementierung eines Batch Generation Systems, das es Nutzern ermöglicht, mehr
 - **Fehlerbehandlung**: Einzelne Fehler stoppen nicht den ganzen Batch

 ### Nicht-Funktionale Anforderungen
+
 - **Performance**: Max. 100ms UI Response Time
 - **Skalierbarkeit**: Support für 100+ User gleichzeitig
 - **UX**: Intuitive, nicht-blockierende UI
@ -39,7 +42,7 @@ CREATE TABLE batch_generations (
  status TEXT CHECK (status IN ('pending', 'processing', 'completed', 'partial', 'failed')),
  created_at TIMESTAMPTZ DEFAULT NOW(),
  completed_at TIMESTAMPTZ,
-  
+
  -- Shared settings for the batch
  model_id TEXT,
  model_version TEXT,
@ -47,10 +50,10 @@ CREATE TABLE batch_generations (
  height INTEGER,
  steps INTEGER,
  guidance_scale FLOAT,
-  
+
  CONSTRAINT valid_counts CHECK (
-    completed_count >= 0 AND 
-    failed_count >= 0 AND 
+    completed_count >= 0 AND
+    failed_count >= 0 AND
    completed_count + failed_count <= total_count
  )
 );
@ -67,7 +70,7 @@ CREATE INDEX idx_image_generations_batch ON image_generations(batch_id, batch_in

 -- Real-time Subscriptions View
 CREATE VIEW batch_progress AS
-SELECT 
+SELECT
  bg.id,
  bg.user_id,
  bg.total_count,
@ -81,8 +84,8 @@ SELECT
      'index', ig.batch_index,
      'prompt', ig.prompt,
      'status', ig.status,
-      'progress', 
-        CASE 
+      'progress',
+        CASE
          WHEN ig.status = 'completed' THEN 100
          WHEN ig.status = 'processing' THEN 50
          WHEN ig.status = 'failed' THEN -1
@ -98,23 +101,24 @@ GROUP BY bg.id;
 ### 2. Backend Architecture

 #### Edge Function: `batch-generate-images`
+
 ```typescript
 // Neue Edge Function für Batch Processing
 interface BatchRequest {
-  prompts: Array<{
-    text: string;
-    negative_prompt?: string;
-    seed?: number;
-  }>;
-  shared_settings: {
-    model_id: string;
-    model_version: string;
-    width: number;
-    height: number;
-    steps: number;
-    guidance_scale: number;
-  };
-  batch_name?: string;
+	prompts: Array<{
+		text: string;
+		negative_prompt?: string;
+		seed?: number;
+	}>;
+	shared_settings: {
+		model_id: string;
+		model_version: string;
+		width: number;
+		height: number;
+		steps: number;
+		guidance_scale: number;
+	};
+	batch_name?: string;
 }

 // Workflow:
@ -126,21 +130,22 @@ interface BatchRequest {
 ```

 #### Queue Worker System
+
 ```typescript
 // Background worker (kann als Cron Job oder separate Edge Function laufen)
 interface QueueWorker {
-  // Polls für neue Jobs alle 5 Sekunden
-  pollInterval: 5000;
-  
-  // Max parallel Generierungen pro User
-  maxParallelPerUser: 3;
-  
-  // Global max parallel
-  maxParallelGlobal: 20;
-  
-  // Retry Logic
-  maxRetries: 3;
-  retryDelay: [5000, 10000, 30000]; // Exponential backoff
+	// Polls für neue Jobs alle 5 Sekunden
+	pollInterval: 5000;
+
+	// Max parallel Generierungen pro User
+	maxParallelPerUser: 3;
+
+	// Global max parallel
+	maxParallelGlobal: 20;
+
+	// Retry Logic
+	maxRetries: 3;
+	retryDelay: [5000, 10000, 30000]; // Exponential backoff
 }
 ```

@ -151,55 +156,56 @@ interface QueueWorker {
 ```typescript
 // components/batch/BatchGenerationModal.tsx
 interface BatchGenerationModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit: (batch: BatchRequest) => void;
+	isOpen: boolean;
+	onClose: () => void;
+	onSubmit: (batch: BatchRequest) => void;
 }

 // components/batch/BatchPromptInput.tsx
 interface BatchPromptInputProps {
-  prompts: PromptItem[];
-  onChange: (prompts: PromptItem[]) => void;
-  maxPrompts: number;
+	prompts: PromptItem[];
+	onChange: (prompts: PromptItem[]) => void;
+	maxPrompts: number;
 }

 // components/batch/BatchProgressTracker.tsx
 interface BatchProgressTrackerProps {
-  batchId: string;
-  onComplete?: () => void;
-  onItemClick?: (itemId: string) => void;
+	batchId: string;
+	onComplete?: () => void;
+	onItemClick?: (itemId: string) => void;
 }

 // components/batch/BatchResultsGrid.tsx
 interface BatchResultsGridProps {
-  batchId: string;
-  results: BatchResult[];
-  onSaveAll: () => void;
-  onDeleteAll: () => void;
+	batchId: string;
+	results: BatchResult[];
+	onSaveAll: () => void;
+	onDeleteAll: () => void;
 }
 ```

 #### Neuer Store: `batchStore.ts`
+
 ```typescript
 interface BatchStore {
-  // State
-  activeBatches: Map<string, BatchGeneration>;
-  currentBatch: BatchGeneration | null;
-  
-  // Actions
-  createBatch: (request: BatchRequest) => Promise<string>;
-  subscribeToBatch: (batchId: string) => void;
-  unsubscribeFromBatch: (batchId: string) => void;
-  
-  // Batch Actions
-  saveAllImages: (batchId: string) => Promise<void>;
-  deleteAllImages: (batchId: string) => Promise<void>;
-  retryFailed: (batchId: string) => Promise<void>;
-  
-  // UI State
-  isBatchModalOpen: boolean;
-  openBatchModal: () => void;
-  closeBatchModal: () => void;
+	// State
+	activeBatches: Map<string, BatchGeneration>;
+	currentBatch: BatchGeneration | null;
+
+	// Actions
+	createBatch: (request: BatchRequest) => Promise<string>;
+	subscribeToBatch: (batchId: string) => void;
+	unsubscribeFromBatch: (batchId: string) => void;
+
+	// Batch Actions
+	saveAllImages: (batchId: string) => Promise<void>;
+	deleteAllImages: (batchId: string) => Promise<void>;
+	retryFailed: (batchId: string) => Promise<void>;
+
+	// UI State
+	isBatchModalOpen: boolean;
+	openBatchModal: () => void;
+	closeBatchModal: () => void;
 }
 ```

@ -214,6 +220,7 @@ interface BatchStore {
   - Öffnet Modal/Neue Seite

 2. **Prompt-Eingabe**
+
   ```
   ┌─────────────────────────────────────┐
   │ Batch Generation (3/10)             │
@ -236,6 +243,7 @@ interface BatchStore {
   ```

 3. **Progress Tracking**
+
   ```
   ┌─────────────────────────────────────┐
   │ Generating Batch "My Batch"         │
@ -266,6 +274,7 @@ interface BatchStore {
   ```

 ### Mobile Responsiveness
+
 - Swipeable prompt cards auf Mobile
 - Bottom Sheet für Batch Modal
 - Compact Progress View als Notification Bar
@ -275,24 +284,28 @@ interface BatchStore {
 ## 📝 Implementierungsschritte

 ### Phase 1: Backend Foundation (3 Tage)
+
 - [ ] Datenbank-Schema erstellen und migrieren
 - [ ] Batch Edge Function implementieren
 - [ ] Queue Worker Logik entwickeln
 - [ ] Error Handling & Retry Logic

 ### Phase 2: Core Frontend (3 Tage)
+
 - [ ] BatchStore mit Zustand implementieren
 - [ ] Batch Generation Modal UI
 - [ ] Prompt Input Komponenten
 - [ ] Real-time Subscriptions Setup

 ### Phase 3: Progress & Results (2 Tage)
+
 - [ ] Progress Tracker Komponente
 - [ ] Real-time Updates via Supabase
 - [ ] Results Grid mit Actions
 - [ ] Batch Management (Save/Delete All)

 ### Phase 4: Polish & Edge Cases (2 Tage)
+
 - [ ] Error States & Recovery
 - [ ] Loading States & Skeletons
 - [ ] Mobile Optimierung
@ -304,68 +317,73 @@ interface BatchStore {
 ## 🔧 Technische Details

 ### Parallel Processing Logic
+
 ```typescript
 // Pseudo-Code für Queue Worker
 async function processQueue() {
-  // Get active generations per user
-  const activeByUser = await getActiveGenerationsGroupedByUser();
-  
-  // Find users with capacity
-  const usersWithCapacity = activeByUser.filter(u => 
-    u.activeCount < MAX_PARALLEL_PER_USER
-  );
-  
-  // Get next pending generations
-  const pending = await getNextPendingGenerations({
-    limit: MAX_PARALLEL_GLOBAL - currentActiveTotal,
-    excludeUsers: usersAtCapacity
-  });
-  
-  // Start generations
-  for (const gen of pending) {
-    startGeneration(gen);
-  }
+	// Get active generations per user
+	const activeByUser = await getActiveGenerationsGroupedByUser();
+
+	// Find users with capacity
+	const usersWithCapacity = activeByUser.filter((u) => u.activeCount < MAX_PARALLEL_PER_USER);
+
+	// Get next pending generations
+	const pending = await getNextPendingGenerations({
+		limit: MAX_PARALLEL_GLOBAL - currentActiveTotal,
+		excludeUsers: usersAtCapacity,
+	});
+
+	// Start generations
+	for (const gen of pending) {
+		startGeneration(gen);
+	}
 }
 ```

 ### Real-time Updates
+
 ```typescript
 // Frontend Subscription
 useEffect(() => {
-  const subscription = supabase
-    .channel(`batch_${batchId}`)
-    .on('postgres_changes', {
-      event: 'UPDATE',
-      schema: 'public',
-      table: 'image_generations',
-      filter: `batch_id=eq.${batchId}`
-    }, (payload) => {
-      updateBatchProgress(payload.new);
-    })
-    .subscribe();
-    
-  return () => subscription.unsubscribe();
+	const subscription = supabase
+		.channel(`batch_${batchId}`)
+		.on(
+			'postgres_changes',
+			{
+				event: 'UPDATE',
+				schema: 'public',
+				table: 'image_generations',
+				filter: `batch_id=eq.${batchId}`,
+			},
+			(payload) => {
+				updateBatchProgress(payload.new);
+			}
+		)
+		.subscribe();
+
+	return () => subscription.unsubscribe();
 }, [batchId]);
 ```

 ### Error Recovery
+
 ```typescript
 // Automatic Retry mit Exponential Backoff
 async function retryGeneration(genId: string, attempt: number) {
-  const delays = [5000, 15000, 30000];
-  const delay = delays[Math.min(attempt, delays.length - 1)];
-  
-  await wait(delay);
-  
-  try {
-    await generateImage(genId);
-  } catch (error) {
-    if (attempt < MAX_RETRIES - 1) {
-      await retryGeneration(genId, attempt + 1);
-    } else {
-      await markAsFailed(genId, error);
-    }
-  }
+	const delays = [5000, 15000, 30000];
+	const delay = delays[Math.min(attempt, delays.length - 1)];
+
+	await wait(delay);
+
+	try {
+		await generateImage(genId);
+	} catch (error) {
+		if (attempt < MAX_RETRIES - 1) {
+			await retryGeneration(genId, attempt + 1);
+		} else {
+			await markAsFailed(genId, error);
+		}
+	}
 }
 ```

@ -374,12 +392,14 @@ async function retryGeneration(genId: string, attempt: number) {
 ## 📊 Success Metrics

 ### Performance KPIs
+
 - **Queue Processing Time**: < 10s für Start der ersten Generierung
 - **Parallel Efficiency**: 80%+ GPU Utilization
 - **Error Rate**: < 5% Failed Generations
 - **User Wait Time**: < 2min für 5-Bilder Batch

 ### User Experience KPIs
+
 - **Adoption Rate**: 30% der aktiven User nutzen Batch
 - **Completion Rate**: 90% der gestarteten Batches werden komplett
 - **Satisfaction**: 4.5+ Stars für Feature
@ -389,19 +409,25 @@ async function retryGeneration(genId: string, attempt: number) {
 ## 🚨 Risiken & Mitigationen

 ### Risiko 1: API Rate Limits
-**Mitigation**: 
+
+**Mitigation**:
+
 - Intelligentes Queue Management
 - User-basierte Rate Limits
 - Fallback auf sequentielle Verarbeitung

 ### Risiko 2: Kosten-Explosion
+
 **Mitigation**:
+
 - Credits-System parallel implementieren
 - Batch-Limits pro User/Tag
 - Cost Alerts & Monitoring

 ### Risiko 3: UI Complexity
+
 **Mitigation**:
+
 - Progressive Disclosure (Simple/Advanced Mode)
 - Gute Defaults
 - In-App Tutorial
@ -411,12 +437,14 @@ async function retryGeneration(genId: string, attempt: number) {
 ## 🎯 MVP Scope (für erste Version)

 ### Included ✅
+
 - Basis Batch Generation (bis 5 Bilder)
 - Einfache Progress Anzeige
 - Save All / Delete All Actions
 - Desktop & Mobile UI

 ### Excluded ❌ (für später)
+
 - Variations Mode
 - Custom Seeds pro Prompt
 - Batch Templates
@ -428,10 +456,12 @@ async function retryGeneration(genId: string, attempt: number) {
 ## 📅 Timeline

 **Woche 1**:
+
 - Mo-Mi: Backend Implementation
 - Do-Fr: Core Frontend

 **Woche 2**:
+
 - Mo-Di: Progress & Results UI
 - Mi-Do: Testing & Bug Fixes
 - Fr: Documentation & Release
@ -440,4 +470,4 @@ async function retryGeneration(genId: string, attempt: number) {

 ---

-*Erstellt: Januar 2025*
+_Erstellt: Januar 2025_
--- a/apps/picture/docs/NEXT_FEATURES.md
+++ b/apps/picture/docs/NEXT_FEATURES.md
@ -1,10 +1,13 @@
 # Next Features - Picture App

 ## 📋 Übersicht
+
 Dieses Dokument listet die geplanten Features für die Picture App auf, priorisiert nach Wichtigkeit und Implementierungsaufwand.

 ## 🎯 Aktuelle Features (bereits implementiert)
+
 ### ✅ Core Features
+
 - **Authentifizierung**: Login, Registrierung, Passwort-Reset
 - **Bildgenerierung**: Integration mit Replicate API, Multiple Models (Flux, Ideogram, Imagen, etc.)
 - **Galerie**: Persönliche Bildsammlung mit Favoriten
@ -15,6 +18,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 - **Quick Generate Bar**: Schnelle Bildgenerierung aus der Galerie

 ### ✅ Technische Features
+
 - Supabase Backend (Auth, Database, Storage)
 - Edge Functions für Bildgenerierung
 - React Native mit Expo
@ -26,8 +30,9 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 ## 🚀 Priority 1 - Must Have (Sofort umsetzen)

 ### 1. **Batch Generation**
+
 - **Beschreibung**: Mehrere Bilder gleichzeitig generieren
- **Details**: 
+- **Details**:
  - Queue System für parallele Generierungen
  - Fortschrittsanzeige für jede Generierung
  - Batch-Aktionen (alle speichern/löschen)
@ -35,6 +40,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 - **Impact**: Hoch

 ### 2. **Erweiterte Prompt-Verwaltung**
+
 - **Beschreibung**: Prompt-History und -Templates
 - **Details**:
  - Speichern erfolgreicher Prompts als Templates
@ -45,6 +51,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 - **Impact**: Hoch

 ### 3. **Collections/Alben**
+
 - **Beschreibung**: Bilder in Sammlungen organisieren
 - **Details**:
  - Private und öffentliche Collections
@ -55,6 +62,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 - **Impact**: Hoch

 ### 4. **Social Features - Basis**
+
 - **Beschreibung**: Community-Interaktionen erweitern
 - **Details**:
  - Kommentare zu öffentlichen Bildern
@ -69,6 +77,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 ## 🎨 Priority 2 - Should Have (Nächste Phase)

 ### 5. **Advanced Generation Settings**
+
 - **Beschreibung**: Mehr Kontrolle über Generierungsparameter
 - **Details**:
  - Negative Prompts UI
@ -80,6 +89,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 - **Impact**: Mittel

 ### 6. **Image-to-Image Generation**
+
 - **Beschreibung**: Bilder als Input für neue Generierungen
 - **Details**:
  - Upload eigener Bilder als Referenz
@ -90,6 +100,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 - **Impact**: Hoch

 ### 7. **Credits/Usage System**
+
 - **Beschreibung**: Verbrauchsbasiertes System
 - **Details**:
  - Credit-Balance pro User
@ -100,6 +111,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 - **Impact**: Kritisch für Monetarisierung

 ### 8. **Advanced Search & Discovery**
+
 - **Beschreibung**: Verbesserte Such- und Entdeckungsfunktionen
 - **Details**:
  - Volltextsuche in Prompts
@ -115,6 +127,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 ## 💡 Priority 3 - Nice to Have (Zukunft)

 ### 9. **Remix & Collaboration**
+
 - **Beschreibung**: Zusammenarbeit zwischen Usern
 - **Details**:
  - Remix anderer Bilder (mit Attribution)
@ -125,6 +138,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 - **Impact**: Mittel

 ### 10. **AI Assistant**
+
 - **Beschreibung**: Intelligente Prompt-Hilfe
 - **Details**:
  - Prompt Enhancement/Verbesserung
@ -135,6 +149,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 - **Impact**: Mittel

 ### 11. **Export & Integration**
+
 - **Beschreibung**: Export-Optionen und Third-Party Integrationen
 - **Details**:
  - Bulk Export (ZIP)
@ -146,6 +161,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 - **Impact**: Niedrig-Mittel

 ### 12. **Advanced Analytics**
+
 - **Beschreibung**: Detaillierte Statistiken
 - **Details**:
  - Generation Success Rate
@ -161,16 +177,19 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 ## 🐛 Bug Fixes & Improvements

 ### Sofort beheben
+
 1. **Model Loading State**: Manchmal bleibt der Loading State hängen
 2. **Image Upload Progress**: Fehlende Fortschrittsanzeige beim Upload
 3. **Error Handling**: Bessere Fehlermeldungen bei API-Timeouts

 ### Performance Optimierungen
+
 1. **Image Lazy Loading**: Implementierung für große Galerien
 2. **Cache Strategy**: Verbessertes Caching für geladene Bilder
 3. **Offline Support**: Basis-Funktionalität ohne Internet

 ### UX Verbesserungen
+
 1. **Onboarding Flow**: Tutorial für neue User
 2. **Empty States**: Bessere Hinweise bei leeren Ansichten
 3. **Loading States**: Skeleton Screens statt Spinner
@ -181,12 +200,14 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 ## 📊 Technische Schulden

 ### Refactoring Needed
+
 1. **Store Consolidation**: BearStore entfernen, durch echte Stores ersetzen
 2. **Type Safety**: Strikte TypeScript Types überall
 3. **Error Boundary**: Global Error Handling implementieren
 4. **Testing**: Unit Tests für kritische Funktionen

 ### Infrastructure
+
 1. **CI/CD Pipeline**: Automatische Builds und Deployments
 2. **Monitoring**: Sentry oder ähnliches für Error Tracking
 3. **Analytics**: Mixpanel/Amplitude Integration
@ -197,6 +218,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 ## 🎯 MVP für nächstes Major Release (v2.0)

 ### Must Have für v2.0
+
 1. ✅ Batch Generation
 2. ✅ Prompt Templates & History
 3. ✅ Collections
@ -204,6 +226,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 5. ✅ Credits System

 ### Ziel-Timeline
+
 - **Phase 1** (2 Wochen): Batch Generation + Prompt Management
 - **Phase 2** (2 Wochen): Collections + Social Basics
 - **Phase 3** (1 Woche): Credits System
@ -214,6 +237,7 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 ## 💭 Experimentelle Ideen

 ### Für später evaluieren
+
 - **AR View**: Generierte Bilder in AR anzeigen
 - **Voice Prompts**: Spracheingabe für Prompts
 - **Live Generation**: Streaming der Bildgenerierung
@ -226,17 +250,20 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi
 ## 📝 Notes

 ### User Feedback (zu sammeln)
+
 - Welche Features sind am wichtigsten?
 - Pain Points bei der aktuellen Version?
 - Pricing-Modell Präferenzen?

 ### Konkurrenz-Analyse
+
 - Midjourney: Discord Integration, Community
 - DALL-E: Einfachheit, Integration in ChatGPT
 - Stable Diffusion: Open Source, Flexibilität
 - Leonardo AI: Game Assets Focus

 ### Monetarisierung Strategie
+
 1. **Freemium**: X Credits pro Monat gratis
 2. **Subscription Tiers**: Basic, Pro, Enterprise
 3. **Pay-per-Use**: Zusätzliche Credits kaufen
@ -244,4 +271,4 @@ Dieses Dokument listet die geplanten Features für die Picture App auf, priorisi

 ---

-*Letzte Aktualisierung: Januar 2025*
+_Letzte Aktualisierung: Januar 2025_
--- a/apps/picture/docs/SETUP_REPLICATE.md
+++ b/apps/picture/docs/SETUP_REPLICATE.md
@ -59,14 +59,17 @@ supabase secrets set REPLICATE_API_KEY=dein_replicate_token --project-ref mjuvnn
 ## Fehlerbehebung

 ### "Replicate API key not configured"
+
 - Stelle sicher, dass der API Key korrekt in Supabase Secrets gespeichert ist
 - Der Key muss genau `REPLICATE_API_KEY` heißen

 ### "Unauthorized" oder "Invalid token"
+
 - Überprüfe, ob der Token korrekt kopiert wurde
 - Stelle sicher, dass der Token noch gültig ist (nicht gelöscht wurde)

 ### Bilder werden nicht angezeigt
+
 - Überprüfe, ob der Storage Bucket `generated-images` öffentlich ist
 - Gehe zu Supabase Dashboard → Storage → generated-images → Policies
 - Der Bucket sollte auf "Public" gesetzt sein
@ -79,4 +82,4 @@ Die Edge Function verwendet aktuell SDXL 1.0. Du kannst andere Modelle verwenden
 - **Stable Diffusion 2.1**: `db21e45d3f7023abc2a46ee38a23973f6dce16bb082a930b0c49861f96d1e5bf`
 - **SDXL Lightning** (schneller): `727e49a643e999d602a896c774a0658ffefea21465756a6ce24b7ea4165eba6a`

-Weitere Modelle findest du auf [replicate.com/explore](https://replicate.com/explore)
+Weitere Modelle findest du auf [replicate.com/explore](https://replicate.com/explore)
--- a/apps/picture/docs/UMAMI_SETUP.md
+++ b/apps/picture/docs/UMAMI_SETUP.md
@ -9,11 +9,13 @@ Umami Analytics has been integrated into both the landing page and web app to pr
 ## Architecture

 ### Landing Page (Astro)
+
 - **Location**: `apps/landing/src/layouts/Layout.astro`
 - **Framework**: Astro
 - **Integration**: Script tag in `<head>` section

 ### Web App (SvelteKit)
+
 - **Location**: `apps/web/src/routes/+layout.svelte`
 - **Framework**: SvelteKit
 - **Integration**: Script tag in `<svelte:head>` section
@ -30,6 +32,7 @@ PUBLIC_UMAMI_WEBSITE_ID=your-website-id
 ### Setting up Environment Variables

 #### For Landing Page
+
 Create or update `apps/landing/.env`:

 ```bash
@ -38,6 +41,7 @@ PUBLIC_UMAMI_WEBSITE_ID=your-landing-website-id
 ```

 #### For Web App
+
 Create or update `apps/web/.env`:

 ```bash
@ -50,13 +54,16 @@ PUBLIC_UMAMI_WEBSITE_ID=your-webapp-website-id
 ## Features

 ### Privacy-First Tracking
+
 - ✅ **Do Not Track**: Respects browser DNT settings via `data-do-not-track="true"`
 - ✅ **No Cookies**: Umami doesn't use cookies by default
 - ✅ **GDPR Compliant**: No personal data collection
 - ✅ **Conditional Loading**: Only loads when environment variables are set

 ### Automatic Tracking
+
 The integration automatically tracks:
+
 - Page views
 - Referrers
 - Browser/device information (anonymized)
@ -69,12 +76,14 @@ The integration automatically tracks:
 You have two options:

 #### Option A: Use Umami Cloud
+
 1. Sign up at [umami.is](https://umami.is)
 2. Create a new website for your landing page
 3. Create another website for your web app
 4. Copy the website IDs

 #### Option B: Self-Host Umami
+
 1. Follow the [Umami self-hosting guide](https://umami.is/docs/install)
 2. Deploy Umami to your preferred platform
 3. Create websites for both apps
@ -83,6 +92,7 @@ You have two options:
 ### 2. Configure Environment Variables

 #### Development
+
 1. Copy `.env.example` to `.env` in both `apps/landing` and `apps/web`
 2. Add your Umami credentials:
   ```bash
@ -91,19 +101,23 @@ You have two options:
   ```

 #### Production
+
 Add the environment variables to your deployment platform:

 **Vercel/Netlify:**
+
 - Go to Project Settings → Environment Variables
 - Add `PUBLIC_UMAMI_URL` and `PUBLIC_UMAMI_WEBSITE_ID`

 **Other platforms:**
+
 - Follow your platform's documentation for setting environment variables
 - Ensure variables are prefixed with `PUBLIC_` to be exposed to the client

 ### 3. Verify Integration

 1. Start your development servers:
+
   ```bash
   # Landing page
   cd apps/landing
@ -140,67 +154,68 @@ To verify Umami is working:
 ## Troubleshooting

 ### Script Not Loading
+
 - ✅ Verify environment variables are set correctly
 - ✅ Ensure `PUBLIC_` prefix is used
 - ✅ Check that Umami instance is accessible
 - ✅ Restart dev server after adding env vars

 ### No Data in Dashboard
+
 - ✅ Verify website ID matches the one in Umami
 - ✅ Check browser console for errors
 - ✅ Ensure ad blocker is disabled
 - ✅ Verify network requests are successful

 ### Development vs Production
+
 - In development: Tracking works but may be blocked by ad blockers
 - In production: Use a custom domain for Umami to avoid ad blockers (e.g., `analytics.yourdomain.com`)

 ## Advanced Configuration

 ### Custom Events
+
 To track custom events, use the Umami JavaScript API:

 ```typescript
 // Track a custom event
 if (window.umami) {
-  window.umami.track('button_click', {
-    button_name: 'sign_up'
-  });
+	window.umami.track('button_click', {
+		button_name: 'sign_up',
+	});
 }
 ```

 ### Domain Filtering
+
 To only track specific domains, add `data-domains` attribute:

 ```html
 <script
-  defer
-  src="..."
-  data-website-id="..."
-  data-domains="yourdomain.com,www.yourdomain.com"
+	defer
+	src="..."
+	data-website-id="..."
+	data-domains="yourdomain.com,www.yourdomain.com"
 ></script>
 ```

 ### Disable Automatic Tracking
+
 To disable automatic page view tracking:

 ```html
-<script
-  defer
-  src="..."
-  data-website-id="..."
-  data-auto-track="false"
-></script>
+<script defer src="..." data-website-id="..." data-auto-track="false"></script>
 ```

 Then manually track page views:

 ```typescript
 if (window.umami) {
-  window.umami.track(props => ({
-    ...props,
-    url: '/custom-page'
-  }));
+	window.umami.track((props) => ({
+		...props,
+		url: '/custom-page',
+	}));
 }
 ```

@ -222,5 +237,6 @@ if (window.umami) {
 ## Support

 For issues specific to:
+
 - **Umami**: [Umami Discord](https://discord.gg/4dz4zcXYrQ)
 - **Integration**: Create an issue in this repository
--- a/apps/picture/docs/archive/QUICK_WINS.md
+++ b/apps/picture/docs/archive/QUICK_WINS.md
@ -13,6 +13,7 @@ Alle **Quick Wins** (< 30min each) wurden erfolgreich durchgeführt!
 **Problem**: `generate.tsx:334` - Verwendung von `setShowBatchProgress` ohne Deklaration

 **Lösung**:
+
 ```typescript
 // Hinzugefügt in generate.tsx:59
 const [showBatchProgress, setShowBatchProgress] = useState(false);
@ -33,6 +34,7 @@ const [showBatchProgress, setShowBatchProgress] = useState(false);
 ### Neue Datei: `utils/logger.ts`

 Features:
+
 - **Development vs Production**: Logs nur in Dev-Mode
 - **Verschiedene Log-Levels**: `debug`, `info`, `warn`, `error`, `success`
 - **Performance-Logger**: `perfLogger.start()` / `perfLogger.end()`
@ -40,12 +42,14 @@ Features:
 - **Vorbereitet für Sentry**: TODO-Marker für Integration

 ### Migrierte Dateien:
+
 1. ✅ `services/imageGeneration.ts` - Vollständig migriert
 2. ✅ `store/modelStore.ts` - Vollständig migriert
 3. ✅ `contexts/AuthContext.tsx` - Vollständig migriert
 4. ✅ `app/_layout.tsx` - Vollständig migriert

 ### Beispiel:
+
 ```typescript
 // Vorher
 console.log('Loading models');
@ -66,17 +70,20 @@ logger.error('Error:', error);
 **Gelöschte Imports**:

 ### `app/(tabs)/generate.tsx`
+
 - ❌ `Pressable` (nicht verwendet)
 - ❌ `Ionicons` (nicht verwendet)
 - ✅ Unused state `showBatchProgress` entfernt

 ### `app/(tabs)/profile.tsx`
+
 - ❌ `ViewStyle` (nicht verwendet)
 - ❌ `TextStyle` (nicht verwendet)
 - ❌ `router` (nicht verwendet)
 - ✅ Unused state `loading` entfernt

 ### `app/(tabs)/index.tsx`
+
 - ❌ `TextStyle` (nicht verwendet)
 - ✅ Unused styles entfernt:
  - `tagFilterLabelStyle`
@ -91,6 +98,7 @@ logger.error('Error:', error);
 **Befehl**: `npm run format`

 **Ergebnisse**:
+
 - ✅ Code automatisch formatiert (Prettier)
 - ✅ Auto-fixable ESLint-Regeln angewendet
 - ✅ Konsistente Code-Formatierung
@ -98,11 +106,13 @@ logger.error('Error:', error);
 ### Verbleibende Warnungen (nicht kritisch):

 **React Hooks Dependencies** (6 Warnungen):
+
 - `useEffect` dependency arrays könnten erweitert werden
 - Nicht kritisch, da bestehende Logik korrekt funktioniert
 - Kann bei nächstem Refactoring behoben werden

 **Sonstige** (5 Warnungen):
+
 - Duplicate props in `explore.tsx:501` - sollte geprüft werden
 - `documentDirectory` Import-Problem in `image/[id].tsx` - FileSystem API

@ -111,10 +121,12 @@ logger.error('Error:', error);
 ## 📊 Statistik

 ### Dateien erstellt
+
 - ✅ `utils/logger.ts` (85 Zeilen)
 - ✅ `QUICK_WINS.md` (diese Datei)

 ### Dateien geändert
+
 - ✅ `services/imageGeneration.ts` - Logger integriert
 - ✅ `store/modelStore.ts` - Logger integriert
 - ✅ `contexts/AuthContext.tsx` - Logger integriert
@ -124,12 +136,14 @@ logger.error('Error:', error);
 - ✅ `app/(tabs)/index.tsx` - Imports + unused styles gefixt

 ### Gelöste Probleme
+
 - ✅ 1 TypeScript-Fehler (fehlende Variable)
 - ✅ ~40 console.log Statements ersetzt
 - ✅ 12 ESLint-Warnungen behoben
 - ✅ 8 unused Imports entfernt

 ### Zeit benötigt
+
 - ⏱️ **~25 Minuten** (unter dem 30min-Ziel!)

 ---
@ -137,12 +151,14 @@ logger.error('Error:', error);
 ## 🎯 Verbesserungen

 ### Code Quality
+
 - **Type Safety**: ✅ Keine TypeScript-Fehler mehr
 - **Logging**: ✅ Production-ready Logger-System
 - **Clean Code**: ✅ Keine ungenutzten Imports
 - **Formatting**: ✅ Konsistente Formatierung

 ### Production Readiness
+
 - ✅ Logs werden nur in Development angezeigt
 - ✅ Error-Tracking bereit für Sentry-Integration
 - ✅ Performance-Logging vorbereitet
@ -153,13 +169,15 @@ logger.error('Error:', error);
 ## 🚀 Nächste Schritte

 ### Sofort möglich (bereits vorbereitet)
+
 1. **Sentry Integration**
+
   ```typescript
   // In utils/logger.ts - Einfach auskommentieren
   error: (...args: any[]) => {
-     console.error('[ERROR]', ...args);
-     // Sentry.captureException(args[0]); // ✅ Aktivieren
-   }
+   	console.error('[ERROR]', ...args);
+   	// Sentry.captureException(args[0]); // ✅ Aktivieren
+   };
   ```

 2. **Verbleibende console.logs migrieren**
@ -169,6 +187,7 @@ logger.error('Error:', error);
   - Geschätzte Zeit: 10 min

 ### Empfohlen (nächster Schritt)
+
 3. **React Hooks Dependencies fixen**
   - 6 useEffect-Warnungen
   - Meistens: `// eslint-disable-next-line react-hooks/exhaustive-deps` hinzufügen
@ -218,6 +237,7 @@ networkLogger.error('/api/generate', error);
 ## ✨ Fazit

 Alle **Quick Wins** erfolgreich abgeschlossen:
+
 - ✅ TypeScript-Fehler behoben
 - ✅ Logger-System implementiert
 - ✅ Console.logs in kritischen Dateien migriert
--- a/apps/picture/docs/archive/REFACTORING.md
+++ b/apps/picture/docs/archive/REFACTORING.md
@ -9,13 +9,14 @@ Dieses Dokument fasst die durchgeführten Refactorings zusammen (Datum: 2025-10-
 **Problem**: Die Funktion `createBatch` wurde in `app/(tabs)/generate.tsx` verwendet, war aber nicht aus dem Store importiert.

 **Lösung**: Import aus `useBatchStore()` hinzugefügt:
+
 ```typescript
 const {
-  isBatchModalOpen,
-  openBatchModal,
-  closeBatchModal,
-  activeBatches,
-  createBatch  // ✅ Hinzugefügt
+	isBatchModalOpen,
+	openBatchModal,
+	closeBatchModal,
+	activeBatches,
+	createBatch, // ✅ Hinzugefügt
 } = useBatchStore();
 ```

@ -38,6 +39,7 @@ const {
 **Problem**: Keine React Error Boundaries im Projekt vorhanden. Bei Fehlern würde die gesamte App abstürzen ohne Feedback an den User.

 **Lösung**:
+
 - Neue `ErrorBoundary` Komponente erstellt mit:
  - Schönem Fehler-UI
  - "Erneut versuchen" Button
@ -52,6 +54,7 @@ const {
 **Geänderte Datei**: `app/_layout.tsx`

 **Features**:
+
 - ✅ Catch React-Fehler auf höchster Ebene
 - ✅ Zeigt benutzerfreundliche Fehleranzeige
 - ✅ Reset-Funktion zum erneuten Versuchen
@ -63,6 +66,7 @@ const {
 ### 4. Constants zentralisieren

 **Problem**: Magic Numbers und Konstanten waren über verschiedene Dateien verstreut:
+
 - `PAGE_SIZE = 20` in `index.tsx`
 - `PAGE_SIZE = 30` in `explore.tsx`
 - `TAB_BAR_HEIGHT = 49` in `explore.tsx`
@ -71,38 +75,45 @@ const {
 **Lösung**: Drei neue Konstanten-Dateien erstellt:

 #### `constants/pagination.ts`
+
 ```typescript
 export const PAGINATION = {
-  GALLERY_PAGE_SIZE: 20,
-  EXPLORE_PAGE_SIZE: 30,
-  INITIAL_LOAD: 20,
-  LOAD_MORE_THRESHOLD: 0.5,
+	GALLERY_PAGE_SIZE: 20,
+	EXPLORE_PAGE_SIZE: 30,
+	INITIAL_LOAD: 20,
+	LOAD_MORE_THRESHOLD: 0.5,
 } as const;
 ```

 #### `constants/layout.ts`
+
 ```typescript
 export const LAYOUT = {
-  TAB_BAR_HEIGHT: 49,
-  QUICK_GENERATE_BAR_HEIGHT: 60,
-  FILTER_BAR_HEIGHT: 50,
-  PADDING: {
-    xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
-  },
-  GRID: {
-    COLUMN_SPACING: 48,
-    COLUMNS: 2,
-  },
+	TAB_BAR_HEIGHT: 49,
+	QUICK_GENERATE_BAR_HEIGHT: 60,
+	FILTER_BAR_HEIGHT: 50,
+	PADDING: {
+		xs: 4,
+		sm: 8,
+		md: 16,
+		lg: 24,
+		xl: 32,
+	},
+	GRID: {
+		COLUMN_SPACING: 48,
+		COLUMNS: 2,
+	},
 } as const;

 export const ANIMATION = {
-  SHORT: 150,
-  MEDIUM: 250,
-  LONG: 350,
+	SHORT: 150,
+	MEDIUM: 250,
+	LONG: 350,
 } as const;
 ```

 #### `constants/index.ts`
+
 ```typescript
 export * from './colors';
 export * from './layout';
@ -110,10 +121,12 @@ export * from './pagination';
 ```

 **Geänderte Dateien**:
+
 - `app/(tabs)/index.tsx` - Verwendet jetzt `PAGINATION` und `LAYOUT`
 - `app/(tabs)/explore.tsx` - Verwendet jetzt `PAGINATION`, `LAYOUT` und `ANIMATION`

 **Vorteile**:
+
 - ✅ Single source of truth für alle Konstanten
 - ✅ Einfachere Wartung
 - ✅ Type-safe mit `as const`
@ -127,6 +140,7 @@ export * from './pagination';
 ### ESLint Warnings behoben

 **Behobene Warnings**:
+
 1. ✅ Doppelte Imports von `react-native-safe-area-context` in `explore.tsx`
 2. ✅ Ungenutzte Variable `Ionicons` in `index.tsx`
 3. ✅ Ungenutzte Variablen in `generate.tsx`:
--- a/apps/picture/docs/development/CONTEXT_MENU_EXAMPLES.md
+++ b/apps/picture/docs/development/CONTEXT_MENU_EXAMPLES.md
@ -7,23 +7,23 @@ import ContextMenu from 'react-native-context-menu-view';
 import { View, Text, Image } from 'react-native';

 function BasicExample() {
-  return (
-    <ContextMenu
-      actions={[
-        { title: 'Save', systemIcon: 'square.and.arrow.down' },
-        { title: 'Share', systemIcon: 'square.and.arrow.up' },
-        { title: 'Delete', destructive: true, systemIcon: 'trash' }
-      ]}
-      onPress={(e) => {
-        console.log('Action pressed:', e.nativeEvent.name);
-        // Handle action based on e.nativeEvent.index or e.nativeEvent.name
-      }}
-    >
-      <View className="p-4 bg-gray-100 rounded-lg">
-        <Text>Long press me!</Text>
-      </View>
-    </ContextMenu>
-  );
+	return (
+		<ContextMenu
+			actions={[
+				{ title: 'Save', systemIcon: 'square.and.arrow.down' },
+				{ title: 'Share', systemIcon: 'square.and.arrow.up' },
+				{ title: 'Delete', destructive: true, systemIcon: 'trash' },
+			]}
+			onPress={(e) => {
+				console.log('Action pressed:', e.nativeEvent.name);
+				// Handle action based on e.nativeEvent.index or e.nativeEvent.name
+			}}
+		>
+			<View className="p-4 bg-gray-100 rounded-lg">
+				<Text>Long press me!</Text>
+			</View>
+		</ContextMenu>
+	);
 }
 ```

@ -33,31 +33,31 @@ function BasicExample() {
 import ContextMenu from 'react-native-context-menu-view';

 function SubmenuExample() {
-  return (
-    <ContextMenu
-      actions={[
-        { title: 'Save', systemIcon: 'square.and.arrow.down' },
-        {
-          title: 'Export',
-          systemIcon: 'square.and.arrow.up.on.square',
-          // Nested submenu actions
-          actions: [
-            { title: 'Export as PDF', systemIcon: 'doc.fill' },
-            { title: 'Export as Image', systemIcon: 'photo' },
-            { title: 'Export as Video', systemIcon: 'video' }
-          ]
-        },
-        { title: 'Delete', destructive: true, systemIcon: 'trash' }
-      ]}
-      onPress={(e) => {
-        console.log('Action:', e.nativeEvent.name);
-      }}
-    >
-      <View className="p-4 bg-blue-100 rounded-lg">
-        <Text>Long press for submenu!</Text>
-      </View>
-    </ContextMenu>
-  );
+	return (
+		<ContextMenu
+			actions={[
+				{ title: 'Save', systemIcon: 'square.and.arrow.down' },
+				{
+					title: 'Export',
+					systemIcon: 'square.and.arrow.up.on.square',
+					// Nested submenu actions
+					actions: [
+						{ title: 'Export as PDF', systemIcon: 'doc.fill' },
+						{ title: 'Export as Image', systemIcon: 'photo' },
+						{ title: 'Export as Video', systemIcon: 'video' },
+					],
+				},
+				{ title: 'Delete', destructive: true, systemIcon: 'trash' },
+			]}
+			onPress={(e) => {
+				console.log('Action:', e.nativeEvent.name);
+			}}
+		>
+			<View className="p-4 bg-blue-100 rounded-lg">
+				<Text>Long press for submenu!</Text>
+			</View>
+		</ContextMenu>
+	);
 }
 ```

@ -67,24 +67,21 @@ function SubmenuExample() {
 import ContextMenu from 'react-native-context-menu-view';

 function PreviewExample() {
-  return (
-    <ContextMenu
-      actions={[
-        { title: 'Edit', systemIcon: 'pencil' },
-        { title: 'Duplicate', systemIcon: 'plus.square.on.square' },
-        { title: 'Delete', destructive: true, systemIcon: 'trash' }
-      ]}
-      onPress={(e) => {
-        console.log('Action:', e.nativeEvent.name);
-      }}
-      previewBackgroundColor="white"
-    >
-      <Image
-        source={{ uri: 'https://example.com/image.jpg' }}
-        className="w-full h-48 rounded-lg"
-      />
-    </ContextMenu>
-  );
+	return (
+		<ContextMenu
+			actions={[
+				{ title: 'Edit', systemIcon: 'pencil' },
+				{ title: 'Duplicate', systemIcon: 'plus.square.on.square' },
+				{ title: 'Delete', destructive: true, systemIcon: 'trash' },
+			]}
+			onPress={(e) => {
+				console.log('Action:', e.nativeEvent.name);
+			}}
+			previewBackgroundColor="white"
+		>
+			<Image source={{ uri: 'https://example.com/image.jpg' }} className="w-full h-48 rounded-lg" />
+		</ContextMenu>
+	);
 }
 ```

@ -96,57 +93,53 @@ import * as MediaLibrary from 'expo-media-library';
 import * as FileSystem from 'expo-file-system';

 function GeneratedImageMenu({ imageUrl }: { imageUrl: string }) {
-  const handleSave = async () => {
-    // Request permissions
-    const { status } = await MediaLibrary.requestPermissionsAsync();
-    if (status !== 'granted') {
-      alert('Permission required to save images');
-      return;
-    }
+	const handleSave = async () => {
+		// Request permissions
+		const { status } = await MediaLibrary.requestPermissionsAsync();
+		if (status !== 'granted') {
+			alert('Permission required to save images');
+			return;
+		}

-    // Download and save image
-    const fileUri = FileSystem.documentDirectory + 'generated-image.jpg';
-    await FileSystem.downloadAsync(imageUrl, fileUri);
-    await MediaLibrary.createAssetAsync(fileUri);
-    alert('Image saved!');
-  };
+		// Download and save image
+		const fileUri = FileSystem.documentDirectory + 'generated-image.jpg';
+		await FileSystem.downloadAsync(imageUrl, fileUri);
+		await MediaLibrary.createAssetAsync(fileUri);
+		alert('Image saved!');
+	};

-  return (
-    <ContextMenu
-      actions={[
-        { title: 'Save to Photos', systemIcon: 'square.and.arrow.down' },
-        { title: 'Share', systemIcon: 'square.and.arrow.up' },
-        {
-          title: 'More Options',
-          actions: [
-            { title: 'Set as Wallpaper', systemIcon: 'photo.on.rectangle' },
-            { title: 'Copy', systemIcon: 'doc.on.doc' },
-            { title: 'View Details', systemIcon: 'info.circle' }
-          ]
-        },
-        { title: 'Delete', destructive: true, systemIcon: 'trash' }
-      ]}
-      onPress={(e) => {
-        switch(e.nativeEvent.index) {
-          case 0: // Save to Photos
-            handleSave();
-            break;
-          case 1: // Share
-            // Implement share
-            break;
-          case 2: // Delete
-            // Implement delete
-            break;
-        }
-      }}
-    >
-      <Image
-        source={{ uri: imageUrl }}
-        className="w-full h-full rounded-lg"
-        resizeMode="cover"
-      />
-    </ContextMenu>
-  );
+	return (
+		<ContextMenu
+			actions={[
+				{ title: 'Save to Photos', systemIcon: 'square.and.arrow.down' },
+				{ title: 'Share', systemIcon: 'square.and.arrow.up' },
+				{
+					title: 'More Options',
+					actions: [
+						{ title: 'Set as Wallpaper', systemIcon: 'photo.on.rectangle' },
+						{ title: 'Copy', systemIcon: 'doc.on.doc' },
+						{ title: 'View Details', systemIcon: 'info.circle' },
+					],
+				},
+				{ title: 'Delete', destructive: true, systemIcon: 'trash' },
+			]}
+			onPress={(e) => {
+				switch (e.nativeEvent.index) {
+					case 0: // Save to Photos
+						handleSave();
+						break;
+					case 1: // Share
+						// Implement share
+						break;
+					case 2: // Delete
+						// Implement delete
+						break;
+				}
+			}}
+		>
+			<Image source={{ uri: imageUrl }} className="w-full h-full rounded-lg" resizeMode="cover" />
+		</ContextMenu>
+	);
 }
 ```

@ -154,13 +147,13 @@ function GeneratedImageMenu({ imageUrl }: { imageUrl: string }) {

 ```tsx
 interface Action {
-  title: string;                    // Action title
-  systemIcon?: string;              // SF Symbol name (iOS only)
-  icon?: string;                    // Custom icon (Android)
-  destructive?: boolean;            // Red text for destructive actions
-  disabled?: boolean;               // Disable the action
-  inlineChildren?: boolean;         // Show submenu items inline
-  actions?: Action[];               // Nested submenu actions
+	title: string; // Action title
+	systemIcon?: string; // SF Symbol name (iOS only)
+	icon?: string; // Custom icon (Android)
+	destructive?: boolean; // Red text for destructive actions
+	disabled?: boolean; // Disable the action
+	inlineChildren?: boolean; // Show submenu items inline
+	actions?: Action[]; // Nested submenu actions
 }
 ```

@ -185,16 +178,16 @@ The library also works on Android with Material Design menus:

 ```tsx
 <ContextMenu
-  actions={[
-    { title: 'Save', icon: 'save' },  // Use Android icon names
-    { title: 'Share', icon: 'share' },
-    { title: 'Delete', destructive: true, icon: 'delete' }
-  ]}
-  onPress={(e) => {
-    console.log('Action:', e.nativeEvent.index);
-  }}
+	actions={[
+		{ title: 'Save', icon: 'save' }, // Use Android icon names
+		{ title: 'Share', icon: 'share' },
+		{ title: 'Delete', destructive: true, icon: 'delete' },
+	]}
+	onPress={(e) => {
+		console.log('Action:', e.nativeEvent.index);
+	}}
 >
-  <YourComponent />
+	<YourComponent />
 </ContextMenu>
 ```

--- a/apps/picture/docs/features/IMAGE_PERFORMANCE_OPTIMIZATION.md
+++ b/apps/picture/docs/features/IMAGE_PERFORMANCE_OPTIMIZATION.md
@ -7,6 +7,7 @@ Diese Dokumentation beschreibt alle Optimierungen, die implementiert wurden, um
 **Datum:** Oktober 2025
 **Status:** ✅ Implementiert & Erweitert
 **Impact:**
+
 - -60-80% schnellere Ladezeiten
 - -95% weniger DB Queries
 - -40-98% weniger Datenverbrauch
@ -45,6 +46,7 @@ Diese Dokumentation beschreibt alle Optimierungen, die implementiert wurden, um
 ### 1. expo-image Integration ⭐ Höchste Priorität

 **Warum expo-image?**
+
 - Built-in Memory + Disk Caching
 - Native Performance
 - Progressive Loading Support
@ -58,23 +60,25 @@ Diese Dokumentation beschreibt alle Optimierungen, die implementiert wurden, um
 import { Image } from 'expo-image';

 <Image
-  source={{ uri: thumbnailUrl }}
-  style={{ width: imageSize, height: imageSize }}
-  contentFit="cover"
-  transition={200}
-  cachePolicy="memory-disk"
-  placeholder={{ blurhash: 'L5H2EC=PM+yV0g-mq.wG9c010J}I' }}
-  placeholderContentFit="cover"
-/>
+	source={{ uri: thumbnailUrl }}
+	style={{ width: imageSize, height: imageSize }}
+	contentFit="cover"
+	transition={200}
+	cachePolicy="memory-disk"
+	placeholder={{ blurhash: 'L5H2EC=PM+yV0g-mq.wG9c010J}I' }}
+	placeholderContentFit="cover"
+/>;
 ```

 **Vorteile:**
+
 - ✅ Automatisches Memory + Disk Caching
 - ✅ 200ms Fade-in Transition
 - ✅ BlurHash Placeholder für sofortiges visuelles Feedback
 - ✅ Bessere Performance als RN Image

 **Dateien geändert:**
+
 - `components/ImageCard.tsx` (2 Instanzen)
 - `app/image/[id].tsx` (Detail Screen)

@ -83,70 +87,75 @@ import { Image } from 'expo-image';
 ### 2. Supabase Query Optimierung ⭐⭐ Sehr wichtig

 **Problem:**
+
 ```tsx
 // VORHER: 60+ Queries für 20 Bilder
-const enhancedImages = await Promise.all(imageData.map(async (img) => {
-  const [_, likesData] = await Promise.all([
-    fetchImageTags(img.id),              // Query 1
-    supabase.from('image_likes')         // Query 2
-      .select('*', { count: 'exact' })
-      .eq('image_id', img.id)
-  ]);
+const enhancedImages = await Promise.all(
+	imageData.map(async (img) => {
+		const [_, likesData] = await Promise.all([
+			fetchImageTags(img.id), // Query 1
+			supabase
+				.from('image_likes') // Query 2
+				.select('*', { count: 'exact' })
+				.eq('image_id', img.id),
+		]);

-  const { data: userLike } = await supabase  // Query 3
-    .from('image_likes')
-    .select('id')
-    .eq('image_id', img.id)
-    .eq('user_id', user.id)
-    .single();
-  // ... 3 Queries pro Bild!
-}));
+		const { data: userLike } = await supabase // Query 3
+			.from('image_likes')
+			.select('id')
+			.eq('image_id', img.id)
+			.eq('user_id', user.id)
+			.single();
+		// ... 3 Queries pro Bild!
+	})
+);
 ```

 **Lösung: Batch Queries**
+
 ```tsx
 // NACHHER: Nur 3 Queries total!
 // 1. Batch fetch alle Tags parallel
-await Promise.all(imageData.map(img => fetchImageTags(img.id)));
+await Promise.all(imageData.map((img) => fetchImageTags(img.id)));

 // 2. Alle Likes in EINER Query
-const imageIds = imageData.map(img => img.id);
+const imageIds = imageData.map((img) => img.id);
 const [likesCountData, userLikesData] = await Promise.all([
-  supabase
-    .from('image_likes')
-    .select('image_id')
-    .in('image_id', imageIds),  // Alle auf einmal!
+	supabase.from('image_likes').select('image_id').in('image_id', imageIds), // Alle auf einmal!

-  user ? supabase
-    .from('image_likes')
-    .select('image_id')
-    .in('image_id', imageIds)
-    .eq('user_id', user.id)
-    : Promise.resolve({ data: [] })
+	user
+		? supabase
+				.from('image_likes')
+				.select('image_id')
+				.in('image_id', imageIds)
+				.eq('user_id', user.id)
+		: Promise.resolve({ data: [] }),
 ]);

 // 3. Lookup Maps für O(1) Access
 const likesCountMap = new Map<string, number>();
-likesCountData.data?.forEach(like => {
-  likesCountMap.set(like.image_id, (likesCountMap.get(like.image_id) || 0) + 1);
+likesCountData.data?.forEach((like) => {
+	likesCountMap.set(like.image_id, (likesCountMap.get(like.image_id) || 0) + 1);
 });

-const userLikesSet = new Set(userLikesData.data?.map(like => like.image_id) || []);
+const userLikesSet = new Set(userLikesData.data?.map((like) => like.image_id) || []);

 // 4. Combine in O(n)
-const enhancedImages = imageData.map(img => ({
-  ...img,
-  likes_count: likesCountMap.get(img.id) || 0,
-  user_has_liked: userLikesSet.has(img.id)
+const enhancedImages = imageData.map((img) => ({
+	...img,
+	likes_count: likesCountMap.get(img.id) || 0,
+	user_has_liked: userLikesSet.has(img.id),
 }));
 ```

 **Resultat:**
+
 - **Vorher:** 60+ Queries
 - **Nachher:** 3 Queries
 - **Reduktion:** -95% 🔥

 **Datei geändert:**
+
 - `app/(tabs)/explore/index.tsx` (Lines 185-219)

 ---
@ -155,12 +164,12 @@ const enhancedImages = imageData.map(img => ({

 **Strategie:**

-| View Mode | Größe | Auflösung | Dateigröße | Ersparnis |
-|-----------|-------|-----------|------------|-----------|
-| `grid5` | tiny | 100x100px | ~10 KB | -98% |
-| `grid3` | small | 200x200px | ~30 KB | -94% |
-| `single` | medium | 400x400px | ~80 KB | -84% |
-| Detail | full | Original | ~500 KB | 0% (volle Qualität) |
+| View Mode | Größe  | Auflösung | Dateigröße | Ersparnis           |
+| --------- | ------ | --------- | ---------- | ------------------- |
+| `grid5`   | tiny   | 100x100px | ~10 KB     | -98%                |
+| `grid3`   | small  | 200x200px | ~30 KB     | -94%                |
+| `single`  | medium | 400x400px | ~80 KB     | -84%                |
+| Detail    | full   | Original  | ~500 KB    | 0% (volle Qualität) |

 **Implementierung:**

@ -170,38 +179,39 @@ const enhancedImages = imageData.map(img => ({
 export type ThumbnailSize = 'tiny' | 'small' | 'medium' | 'full';

 export function getThumbnailUrl(
-  publicUrl: string | null,
-  size: ThumbnailSize = 'medium'
+	publicUrl: string | null,
+	size: ThumbnailSize = 'medium'
 ): string | null {
-  if (!publicUrl) return null;
+	if (!publicUrl) return null;

-  const dimensions: Record<ThumbnailSize, number> = {
-    tiny: 100,    // grid5
-    small: 200,   // grid3
-    medium: 400,  // single
-    full: 0,      // Original
-  };
+	const dimensions: Record<ThumbnailSize, number> = {
+		tiny: 100, // grid5
+		small: 200, // grid3
+		medium: 400, // single
+		full: 0, // Original
+	};

-  const targetSize = dimensions[size];
-  if (targetSize === 0) return publicUrl; // Full resolution
+	const targetSize = dimensions[size];
+	if (targetSize === 0) return publicUrl; // Full resolution

-  const url = new URL(publicUrl);
-  url.searchParams.set('width', targetSize.toString());
-  url.searchParams.set('height', targetSize.toString());
-  url.searchParams.set('resize', 'cover');
-  url.searchParams.set('quality', '80');
+	const url = new URL(publicUrl);
+	url.searchParams.set('width', targetSize.toString());
+	url.searchParams.set('height', targetSize.toString());
+	url.searchParams.set('resize', 'cover');
+	url.searchParams.set('quality', '80');

-  return url.toString();
+	return url.toString();
 }

-export function getSizeForViewMode(
-  viewMode: 'single' | 'grid3' | 'grid5'
-): ThumbnailSize {
-  switch (viewMode) {
-    case 'grid5': return 'tiny';
-    case 'grid3': return 'small';
-    case 'single': return 'medium';
-  }
+export function getSizeForViewMode(viewMode: 'single' | 'grid3' | 'grid5'): ThumbnailSize {
+	switch (viewMode) {
+		case 'grid5':
+			return 'tiny';
+		case 'grid3':
+			return 'small';
+		case 'single':
+			return 'medium';
+	}
 }
 ```

@ -212,19 +222,21 @@ export function getSizeForViewMode(
 const thumbnailUrl = getThumbnailUrl(publicUrl, getSizeForViewMode(viewMode));

 <Image
-  source={{ uri: thumbnailUrl }}
-  // ... rest of props
-/>
+	source={{ uri: thumbnailUrl }}
+	// ... rest of props
+/>;
 ```

 **Wie es funktioniert:**

 Original URL:
+
 ```
 https://xxx.supabase.co/storage/v1/object/public/generated-images/image.webp
 ```

 Thumbnail URL (grid5):
+
 ```
 https://xxx.supabase.co/storage/v1/object/public/generated-images/image.webp
  ?width=100
@ -236,6 +248,7 @@ https://xxx.supabase.co/storage/v1/object/public/generated-images/image.webp
 Supabase generiert und cached diese Transformationen automatisch!

 **Dateien:**
+
 - `utils/image.ts` (neu erstellt)
 - `components/ImageCard.tsx` (nutzt Thumbnails)
 - `app/image/[id].tsx` (nutzt 'full' für Detail View)
@ -249,18 +262,17 @@ Supabase generiert und cached diese Transformationen automatisch!
 ```tsx
 // app/(tabs)/explore/index.tsx & app/(tabs)/index/index.tsx
 <FlatList
-  data={filteredImages}
-  renderItem={renderImage}
-  keyExtractor={(item) => item.id}
+	data={filteredImages}
+	renderItem={renderImage}
+	keyExtractor={(item) => item.id}
+	// Performance Props:
+	removeClippedSubviews={Platform.OS === 'android'} // Entfernt Views außerhalb Viewport
+	maxToRenderPerBatch={10} // Weniger Items pro Render-Batch
+	windowSize={5} // Kleineres Render-Fenster
+	initialNumToRender={6} // Schnellerer Initial Load
+	updateCellsBatchingPeriod={50} // Häufigere Updates

-  // Performance Props:
-  removeClippedSubviews={Platform.OS === 'android'}  // Entfernt Views außerhalb Viewport
-  maxToRenderPerBatch={10}                           // Weniger Items pro Render-Batch
-  windowSize={5}                                     // Kleineres Render-Fenster
-  initialNumToRender={6}                             // Schnellerer Initial Load
-  updateCellsBatchingPeriod={50}                     // Häufigere Updates
-
-  // ... rest of props
+	// ... rest of props
 />
 ```

@ -273,6 +285,7 @@ Supabase generiert und cached diese Transformationen automatisch!
 - **updateCellsBatchingPeriod**: Wie oft die Render-Queue geleert wird (ms)

 **Dateien geändert:**
+
 - `app/(tabs)/explore/index.tsx`
 - `app/(tabs)/index/index.tsx`

@ -282,29 +295,32 @@ Supabase generiert und cached diese Transformationen automatisch!

 ### Erwarteter Gewinn

-| Metrik | Vorher | Nachher | Verbesserung |
-|--------|--------|---------|--------------|
-| **Initiales Laden** | ~3-4s | ~1-1.5s | **-60-70%** |
-| **DB Queries (Explore)** | 60+ | 3 | **-95%** |
-| **Scrolling FPS** | ~40 FPS | ~55-60 FPS | **+40-50%** |
-| **Cache Hits (2nd Load)** | 0% | 80%+ | **+80%** |
-| **Datenverbrauch (Grid5)** | ~10 MB | ~200 KB | **-98%** |
-| **Datenverbrauch (Grid3)** | ~10 MB | ~600 KB | **-94%** |
-| **Datenverbrauch (Single)** | ~10 MB | ~1.6 MB | **-84%** |
+| Metrik                      | Vorher  | Nachher    | Verbesserung |
+| --------------------------- | ------- | ---------- | ------------ |
+| **Initiales Laden**         | ~3-4s   | ~1-1.5s    | **-60-70%**  |
+| **DB Queries (Explore)**    | 60+     | 3          | **-95%**     |
+| **Scrolling FPS**           | ~40 FPS | ~55-60 FPS | **+40-50%**  |
+| **Cache Hits (2nd Load)**   | 0%      | 80%+       | **+80%**     |
+| **Datenverbrauch (Grid5)**  | ~10 MB  | ~200 KB    | **-98%**     |
+| **Datenverbrauch (Grid3)**  | ~10 MB  | ~600 KB    | **-94%**     |
+| **Datenverbrauch (Single)** | ~10 MB  | ~1.6 MB    | **-84%**     |

 ### Real-World Szenario: 20 Bilder laden

 **Grid5 View:**
+
 - Vorher: 20 × 500 KB = 10 MB
 - Nachher: 20 × 10 KB = 200 KB
 - **Ersparnis: 9.8 MB (-98%)**

 **Grid3 View:**
+
 - Vorher: 20 × 500 KB = 10 MB
 - Nachher: 20 × 30 KB = 600 KB
 - **Ersparnis: 9.4 MB (-94%)**

 **Single View:**
+
 - Vorher: 20 × 500 KB = 10 MB
 - Nachher: 20 × 80 KB = 1.6 MB
 - **Ersparnis: 8.4 MB (-84%)**
@ -314,9 +330,11 @@ Supabase generiert und cached diese Transformationen automatisch!
 ## Code-Änderungen Übersicht

 ### Neue Dateien
+
 - ✨ `utils/image.ts` - Thumbnail URL Generation

 ### Geänderte Dateien
+
 1. `package.json` - expo-image Package hinzugefügt
 2. `components/ImageCard.tsx` - expo-image + Thumbnail Support
 3. `app/(tabs)/explore/index.tsx` - Batch Queries + FlatList Props
@ -324,9 +342,10 @@ Supabase generiert und cached diese Transformationen automatisch!
 5. `app/image/[id].tsx` - expo-image + Full Resolution

 ### Dependencies
+
 ```json
 {
-  "expo-image": "~3.0.9"
+	"expo-image": "~3.0.9"
 }
 ```

@ -335,6 +354,7 @@ Supabase generiert und cached diese Transformationen automatisch!
 ## Testing Checklist

 ### Funktionalität
+
 - [ ] Bilder laden korrekt in allen View-Modes (single, grid3, grid5)
 - [ ] Thumbnails werden korrekt generiert
 - [ ] Detail-Screen zeigt volle Auflösung
@ -342,12 +362,14 @@ Supabase generiert und cached diese Transformationen automatisch!
 - [ ] BlurHash Placeholder wird angezeigt

 ### Performance
+
 - [ ] Initiales Laden ist spürbar schneller
 - [ ] Scrolling ist flüssiger (60 FPS)
 - [ ] Weniger Datenverbrauch (check Developer Tools)
 - [ ] Keine Memory Leaks

 ### Edge Cases
+
 - [ ] Bilder ohne public_url zeigen Placeholder
 - [ ] Offline-Modus zeigt gecachte Bilder
 - [ ] Wechsel zwischen View-Modes funktioniert
@ -362,6 +384,7 @@ Supabase generiert und cached diese Transformationen automatisch!
 **Problem:** Alle Bilder hatten denselben generic BlurHash

 **Lösung:**
+
 - Neue DB Column `blurhash` in `images` Tabelle
 - BlurHash wird an ImageCard übergeben
 - Individueller Placeholder pro Bild
@ -376,14 +399,15 @@ ALTER TABLE images ADD COLUMN IF NOT EXISTS blurhash TEXT;
 ```tsx
 // ImageCard.tsx
 <Image
-  source={{ uri: thumbnailUrl }}
-  placeholder={{
-    blurhash: blurhash || 'L5H2EC=PM+yV0g-mq.wG9c010J}I' // Fallback
-  }}
+	source={{ uri: thumbnailUrl }}
+	placeholder={{
+		blurhash: blurhash || 'L5H2EC=PM+yV0g-mq.wG9c010J}I', // Fallback
+	}}
 />
 ```

 **Dateien:**
+
 - Migration: `supabase/migrations/add_blurhash_to_images.sql`
 - Utility: `utils/blurhash.ts`
 - Updated: `components/ImageCard.tsx`, beide Screens
@ -404,16 +428,17 @@ const thumbnailUrl = getThumbnailUrl(publicUrl, getSizeForViewMode(viewMode));
 const tinyThumbnailUrl = getThumbnailUrl(publicUrl, 'tiny'); // 100x100px

 <Image
-  source={{ uri: thumbnailUrl }}
-  placeholder={
-    tinyThumbnailUrl
-      ? { uri: tinyThumbnailUrl } // Progressive!
-      : { blurhash: blurhash || DEFAULT_BLURHASH }
-  }
-/>
+	source={{ uri: thumbnailUrl }}
+	placeholder={
+		tinyThumbnailUrl
+			? { uri: tinyThumbnailUrl } // Progressive!
+			: { blurhash: blurhash || DEFAULT_BLURHASH }
+	}
+/>;
 ```

 **Ablauf:**
+
 1. BlurHash erscheint sofort (0ms)
 2. Tiny Thumbnail lädt (~50-100ms, ~2 KB)
 3. Richtiges Thumbnail lädt (~200-500ms, ~10-80 KB)
@ -434,30 +459,31 @@ const tinyThumbnailUrl = getThumbnailUrl(publicUrl, 'tiny'); // 100x100px
 ```tsx
 // app/(tabs)/index/index.tsx & explore/index.tsx
 useEffect(() => {
-  if (!pagination.hasMore || pagination.loading) return;
+	if (!pagination.hasMore || pagination.loading) return;

-  const prefetchNextPage = async () => {
-    // Fetch IDs der nächsten Page
-    const { data } = await supabase
-      .from('images')
-      .select('id, public_url')
-      .range(nextPageStart, nextPageEnd);
+	const prefetchNextPage = async () => {
+		// Fetch IDs der nächsten Page
+		const { data } = await supabase
+			.from('images')
+			.select('id, public_url')
+			.range(nextPageStart, nextPageEnd);

-    // Prefetch Thumbnails
-    data?.forEach(img => {
-      const thumbnailUrl = getThumbnailUrl(img.public_url, thumbnailSize);
-      if (thumbnailUrl) {
-        Image.prefetch(thumbnailUrl);
-      }
-    });
-  };
+		// Prefetch Thumbnails
+		data?.forEach((img) => {
+			const thumbnailUrl = getThumbnailUrl(img.public_url, thumbnailSize);
+			if (thumbnailUrl) {
+				Image.prefetch(thumbnailUrl);
+			}
+		});
+	};

-  const timeoutId = setTimeout(prefetchNextPage, 500); // Debounced
-  return () => clearTimeout(timeoutId);
+	const timeoutId = setTimeout(prefetchNextPage, 500); // Debounced
+	return () => clearTimeout(timeoutId);
 }, [pagination.page, viewMode]);
 ```

 **Features:**
+
 - Prefetcht erste 6 Bilder der nächsten Page
 - 500ms Debounce um excessive Requests zu vermeiden
 - Silent fail (nicht-kritisch)
@ -478,32 +504,32 @@ useEffect(() => {
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import * as Haptics from 'expo-haptics';

-const pinchGesture = Gesture.Pinch()
-  .onEnd((event) => {
-    // Debounce: min 300ms zwischen Gesten
-    if (now - lastGestureTime.current < 300) return;
+const pinchGesture = Gesture.Pinch().onEnd((event) => {
+	// Debounce: min 300ms zwischen Gesten
+	if (now - lastGestureTime.current < 300) return;

-    // Pinch-Out (scale > 1.15): Zoom in = größere Bilder
-    if (event.scale > 1.15) {
-      if (galleryViewMode === 'grid5') setGalleryViewMode('grid3');
-      else if (galleryViewMode === 'grid3') setGalleryViewMode('single');
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    }
-    // Pinch-In (scale < 0.85): Zoom out = kleinere Bilder
-    else if (event.scale < 0.85) {
-      if (galleryViewMode === 'single') setGalleryViewMode('grid3');
-      else if (galleryViewMode === 'grid3') setGalleryViewMode('grid5');
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    }
-  });
+	// Pinch-Out (scale > 1.15): Zoom in = größere Bilder
+	if (event.scale > 1.15) {
+		if (galleryViewMode === 'grid5') setGalleryViewMode('grid3');
+		else if (galleryViewMode === 'grid3') setGalleryViewMode('single');
+		Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+	}
+	// Pinch-In (scale < 0.85): Zoom out = kleinere Bilder
+	else if (event.scale < 0.85) {
+		if (galleryViewMode === 'single') setGalleryViewMode('grid3');
+		else if (galleryViewMode === 'grid3') setGalleryViewMode('grid5');
+		Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+	}
+});

 // Wrap FlatList
 <GestureDetector gesture={pinchGesture}>
-  <FlatList {...props} />
-</GestureDetector>
+	<FlatList {...props} />
+</GestureDetector>;
 ```

 **Features:**
+
 - Pinch-Out: grid5 → grid3 → single (größere Bilder)
 - Pinch-In: single → grid3 → grid5 (kleinere Bilder)
 - Haptisches Feedback bei jedem Wechsel
@ -511,6 +537,7 @@ const pinchGesture = Gesture.Pinch()
 - Threshold: >1.15 für Zoom-In, <0.85 für Zoom-Out

 **Dateien:**
+
 - `app/(tabs)/index/index.tsx`

 **Impact:** Natürliche iOS Photos-ähnliche UX, schneller View-Wechsel ohne Button-Klick
@ -520,19 +547,23 @@ const pinchGesture = Gesture.Pinch()
 ## Nächste mögliche Optimierungen

 ### 1. BlurHash Generation beim Upload (Server-Side)
+
 - BlurHash automatisch bei Edge Function generieren
 - Direkt in DB speichern
 - Aktuell: Manuell/Client-Side

 ### 3. Progressive JPEG/WebP
+
 - Bilder in progressivem Format hochladen
 - Besseres Ladeverhalten

 ### 4. Image CDN
+
 - CloudFlare Images oder imgix für zusätzliche Optimierung
 - Automatische Format-Konvertierung (WebP, AVIF)

 ### 5. Lazy Loading für Tags/Likes
+
 - Tags/Likes nur on-demand laden
 - Reduziert initiale Query-Komplexität weiter

@ -545,6 +576,7 @@ const pinchGesture = Gesture.Pinch()
 Supabase nutzt imgproxy unter der Haube:

 **Unterstützte Parameter:**
+
 - `width` - Zielbreite
 - `height` - Zielhöhe
 - `resize` - Resize-Mode (cover, contain, fill)
@ -552,27 +584,32 @@ Supabase nutzt imgproxy unter der Haube:
 - `format` - Output-Format (webp, jpg, png)

 **Caching:**
+
 - Erste Transformation: ~500ms
 - Weitere Requests: ~50ms (cached)
 - Cache-Duration: 1 Jahr

 **Limits:**
+
 - Max Size: 2500x2500px
 - Max File Size: 5MB

 ### expo-image Caching

 **Memory Cache:**
+
 - LRU (Least Recently Used) Policy
 - Größe: ~50-100 Bilder
 - Lebensdauer: Bis App-Neustart

 **Disk Cache:**
+
 - Location: `FileSystem.cacheDirectory`
 - Größe: Unbegrenzt (aber OS kann löschen)
 - Lebensdauer: Persistent

 **Cache Management:**
+
 ```tsx
 // Cache manuell leeren
 import { Image } from 'expo-image';
@ -586,23 +623,27 @@ await Image.clearDiskCache();
 ## Troubleshooting

 ### Bilder laden nicht
+
 1. Check Supabase Storage Permissions
 2. Verify public_url ist korrekt
 3. Check Network Tab für Fehler
 4. Cache leeren und neu versuchen

 ### Thumbnails falsche Größe
+
 1. Verify URL Parameter sind korrekt
 2. Check Supabase Storage Transformations Settings
 3. Test mit direkter URL im Browser

 ### Performance nicht besser
+
 1. Enable React Native Performance Monitor
 2. Check FlatList Props sind gesetzt
 3. Verify expo-image ist installiert
 4. Profile mit React DevTools

 ### Cache funktioniert nicht
+
 1. Check `cachePolicy="memory-disk"`
 2. Verify URLs sind stabil (keine Query-Params ändern)
 3. Clear Cache und neu testen
--- a/apps/picture/docs/features/SHARED_UI_COMPONENTS.md
+++ b/apps/picture/docs/features/SHARED_UI_COMPONENTS.md
@ -7,30 +7,36 @@ Plan für ein geteiltes UI-Komponenten-System über 10+ Apps hinweg. Ziel ist es
 ## Strategie: CLI-Tool (shadcn-style) mit optionalem Tailwind-Preset

 ### Phase 1: CLI-Tool für Component Copy-Paste (Start hier)
+
 **Zeitaufwand:** 1-2 Tage

 Wir starten mit einem simplen Ansatz:
+
 - Zentrales Git-Repo mit UI-Components
 - CLI-Tool das Components in Apps kopiert
 - Components gehören dann der App (volle Kontrolle)
 - Keine NPM-Dependencies für Components

 **Vorteile dieser Reihenfolge:**
+
 - Schneller Start, kein Over-Engineering
 - Wir lernen welche Design-Patterns sich wirklich wiederholen
 - Kein zweites System am Anfang
 - CLI-Tool validiert ob der Ansatz überhaupt funktioniert

 ### Phase 2: Tailwind-Preset (optional, später)
+
 **Zeitaufwand:** 2-3 Stunden
 **Wann:** Nach 1-3 Monaten, wenn wir sehen was sich wiederholt

 Falls wir merken dass bestimmte Design-Tokens (Farben, Spacing, etc.) überall gleich sind:
+
 - Extrahieren in ein kleines Tailwind-Config NPM package
 - Components im Library-Repo updaten zu nutzen das Preset
 - Bestehende Apps können updaten (optional)

 **Migration ist einfach:**
+
 - Preset Package erstellen
 - Components refactoren: `bg-[#3B82F6]` → `bg-brand-primary`
 - Apps installieren Preset und re-adden Components
@ -44,6 +50,7 @@ Falls wir merken dass bestimmte Design-Tokens (Farben, Spacing, etc.) überall g
 **Repository:** `github.com/memoro/ui` (Monorepo)

 **Repository Struktur:**
+
 ```
 memoro-ui/
 ├── packages/
@ -90,42 +97,43 @@ memoro-ui/
 ```

 **registry.json Beispiel:**
+
 ```json
 {
-  "components": {
-    "ui": {
-      "button": {
-        "name": "Button",
-        "files": ["Button.tsx"],
-        "category": "ui",
-        "dependencies": [],
-        "description": "A pressable button component with variants"
-      },
-      "input": {
-        "name": "Input",
-        "files": ["Input.tsx"],
-        "category": "ui",
-        "dependencies": [],
-        "description": "Text input with label and error states"
-      }
-    },
-    "navigation": {
-      "header": {
-        "name": "Header",
-        "files": ["Header.tsx"],
-        "category": "navigation",
-        "dependencies": [],
-        "description": "App header with title and optional actions"
-      },
-      "tab-bar": {
-        "name": "TabBar",
-        "files": ["TabBar.tsx"],
-        "category": "navigation",
-        "dependencies": [],
-        "description": "Bottom tab bar navigation component"
-      }
-    }
-  }
+	"components": {
+		"ui": {
+			"button": {
+				"name": "Button",
+				"files": ["Button.tsx"],
+				"category": "ui",
+				"dependencies": [],
+				"description": "A pressable button component with variants"
+			},
+			"input": {
+				"name": "Input",
+				"files": ["Input.tsx"],
+				"category": "ui",
+				"dependencies": [],
+				"description": "Text input with label and error states"
+			}
+		},
+		"navigation": {
+			"header": {
+				"name": "Header",
+				"files": ["Header.tsx"],
+				"category": "navigation",
+				"dependencies": [],
+				"description": "App header with title and optional actions"
+			},
+			"tab-bar": {
+				"name": "TabBar",
+				"files": ["TabBar.tsx"],
+				"category": "navigation",
+				"dependencies": [],
+				"description": "Bottom tab bar navigation component"
+			}
+		}
+	}
 }
 ```

@ -134,26 +142,31 @@ memoro-ui/
 **Commands:**

 **`npx @memoro/ui add <component>`**
+
 - Kopiert Component-Code in `app/components/ui/`
 - Prüft ob Component bereits existiert
 - Fragt bei Konflikten nach (überschreiben/skip)
 - Zeigt Success-Message mit Import-Beispiel

 **`npx @memoro/ui list`**
+
 - Zeigt alle verfügbaren Components
 - Zeigt welche bereits in der App sind
 - Zeigt Beschreibung jedes Components

 **`npx @memoro/ui update <component>`**
+
 - Updated einen existierenden Component
 - Zeigt Diff der Änderungen
 - Fragt nach Bestätigung

 **`npx @memoro/ui diff <component>`**
+
 - Zeigt Unterschiede zwischen lokaler und Library-Version
 - Hilfreich um zu sehen ob lokale Anpassungen gemacht wurden

 **Optional später:**
+
 - `init` - Erstellt `components/ui/` Ordner
 - `remove` - Entfernt Component aus App
 - `sync` - Updated alle Components auf einmal
@ -161,6 +174,7 @@ memoro-ui/
 ### 3. Component Development Workflow

 **Neuer Component:**
+
 1. Entwickle Component in `ui-components/components/`
 2. Teste in Preview-App
 3. Schreibe README mit Usage-Beispielen
@ -168,12 +182,14 @@ memoro-ui/
 5. Commit & Push

 **Component nutzen:**
+
 1. In App: `npx @memoro/ui add button`
 2. Component liegt jetzt in `app/components/ui/Button.tsx`
 3. Importieren: `import { Button } from '@/components/ui/Button'`
 4. Bei Bedarf app-spezifisch anpassen

 **Component updaten:**
+
 1. Änderungen in Library-Repo
 2. Apps können entscheiden ob sie updaten wollen
 3. `npx @memoro/ui update button` in jeweiliger App
@ -184,27 +200,32 @@ memoro-ui/
 **Jeder Component sollte haben:**

 **Consistent API:**
+
 - Props sind konsistent benannt über alle Components
 - `variant`, `size`, `disabled` patterns
 - `className` für custom Tailwind classes
 - `children` wo sinnvoll

 **TypeScript:**
+
 - Vollständige Type definitions
 - Exported Types für Props
 - Generic Support wo nötig

 **Accessibility:**
+
 - ARIA labels wo nötig
 - Keyboard navigation
 - Screen reader support

 **Styling:**
+
 - NativeWind/Tailwind classes
 - Responsive by default
 - Dark mode ready (später)

 **Documentation:**
+
 - README.md mit:
  - Beschreibung
  - Props table
@ -214,12 +235,14 @@ memoro-ui/
 ### 5. Preview/Development App

 **Expo App in ui-components/preview:**
+
 - Live preview aller Components
 - Test auf echten Devices
 - QR-Code für schnelles Testen
 - Optional: Storybook integration

 **Zweck:**
+
 - Entwickle Components in Isolation
 - Visual testing
 - Dokumentation als Live-Demo
@ -232,12 +255,14 @@ memoro-ui/
 **UI Components (`packages/components/ui/`):**

 **Layout:**
+
 - Container
 - Stack (VStack/HStack)
 - Spacer
 - Divider

 **Input:**
+
 - Button
 - Input (TextInput)
 - Checkbox
@ -245,6 +270,7 @@ memoro-ui/
 - Slider

 **Display:**
+
 - Text (mit Typography variants)
 - Card
 - Badge
@ -252,17 +278,20 @@ memoro-ui/
 - Image (mit Loading states)

 **Feedback:**
+
 - Alert
 - Toast
 - Spinner/Loading
 - Progress

 **Overlay:**
+
 - Modal
 - Sheet (Bottom sheet)
 - Dropdown

 **Navigation Components (`packages/components/navigation/`):**
+
 - Header (mit Title, Back Button, Actions)
 - TabBar (Bottom Tab Navigation)
 - BackButton
@ -272,25 +301,30 @@ memoro-ui/
 ### 7. Naming Conventions

 **Component Files:**
+
 - PascalCase: `Button.tsx`, `TextInput.tsx`
 - Co-located files: `Button.stories.tsx`, `Button.test.tsx`

 **Registry IDs:**
+
 - kebab-case: `button`, `text-input`
 - Matches CLI usage: `npx ui add text-input`

 **Variants:**
+
 - lowercase: `primary`, `secondary`, `outline`
 - Sizes: `sm`, `md`, `lg`, `xl`

 ### 8. Version Strategy (später relevant)

 **Phase 1 (jetzt):**
+
 - Keine Versionierung nötig
 - Components werden kopiert = keine Breaking changes
 - Apps besitzen den Code

 **Phase 2 (wenn nötig):**
+
 - Semantic versioning für CLI-Tool
 - Component changelog in README
 - Breaking changes werden dokumentiert
@ -299,11 +333,13 @@ memoro-ui/
 ### 9. Testing Strategy

 **CLI-Tool:**
+
 - Unit tests für file operations
 - Integration tests für add/update commands
 - Test mit dummy Expo app

 **Components:**
+
 - Visual testing in Preview app
 - Optional: Jest + React Native Testing Library
 - Manual testing auf iOS/Android
@ -333,6 +369,7 @@ memoro-ui/
   - Wenn wiederverwendbar: zu Library hinzufügen

 **Für neue Apps:**
+
 - Start projekt
 - Setup `.npmrc` mit `@memoro:registry=https://npm.pkg.github.com`
 - `npx @memoro/ui init` (erstellt structure)
@ -342,18 +379,21 @@ memoro-ui/
 ### 11. Documentation

 **README in Library Repo:**
+
 - Was ist das System
 - Wie installiert man CLI
 - Quick start guide
 - Component overview mit Links

 **Per-Component README:**
+
 - Props documentation
 - Usage examples
 - Variants showcase
 - Do's and Don'ts

 **Changelog:**
+
 - Tracked in Library repo
 - Breaking changes highlighted
 - Migration guides wenn nötig
@ -361,6 +401,7 @@ memoro-ui/
 ### 12. Future Enhancements (Phase 2+)

 **Wenn Tailwind-Preset hinzukommt:**
+
 - Mini NPM package: `@memoro/tailwind-preset`
 - Ebenfalls via GitHub Packages publiziert
 - Components nutzen Design tokens
@ -368,6 +409,7 @@ memoro-ui/
 - Migration guide für bestehende Components

 **Weitere Features:**
+
 - Theming system (Light/Dark mode)
 - Animation presets
 - Icon set integration
@ -375,6 +417,7 @@ memoro-ui/
 - Data fetching patterns (optional)

 **Tooling:**
+
 - VSCode snippets für Components
 - GitHub Actions für automated testing
 - Automated screenshot testing
@ -385,17 +428,20 @@ memoro-ui/
 ## Success Metrics

 **Phase 1 (CLI-Tool):**
+
 - ✅ 10+ wiederverwendbare Components
 - ✅ CLI-Tool funktioniert in allen Apps
 - ✅ Mindestens 2 Apps nutzen das System
 - ✅ Zeit für neue App-Features: -30%

 **Phase 2 (Tailwind-Preset):**
+
 - ✅ Design tokens extrahiert
 - ✅ Konsistente Farben/Spacing über alle Apps
 - ✅ Design updates in <1 Tag für alle Apps

 **Overall:**
+
 - ✅ Neue App in <1 Tag bootstrap-bar
 - ✅ UI consistency über alle Apps
 - ✅ Component reuse rate >60%
@ -406,27 +452,32 @@ memoro-ui/
 ## Timeline

 **Week 1-2: Setup**
+
 - UI-Components Repo erstellen
 - CLI-Tool Grundstruktur
 - Registry system
 - Preview app setup

 **Week 3-4: Core Components**
+
 - 5 wichtigste Components entwickeln
 - Testing in Preview app
 - Documentation schreiben

 **Week 5: First Migration**
+
 - "picture" App als Test
 - 2-3 Components migrieren
 - Learnings dokumentieren

 **Week 6+: Iteration**
+
 - Mehr Components hinzufügen
 - Weitere Apps migrieren
 - CLI verbessern basierend auf Feedback

 **Month 2-3: Optional Tailwind-Preset**
+
 - Nur wenn es sich als nötig erweist
 - Design tokens extrahieren
 - Components refactoren
@ -437,17 +488,21 @@ memoro-ui/
 ## Decisions Made

 ### 1. Package Naming ✅
+
 **Entscheidung:** `@memoro/ui`

 **Reasoning:**
+
 - Klarer, einprägsamer Name
 - Namespace `@memoro` für alle zukünftigen Packages
 - Konsistent für späteres `@memoro/tailwind-preset`

 ### 2. Registry ✅
+
 **Entscheidung:** GitHub Packages

 **Reasoning:**
+
 - ✅ Kostenlos für private Repos
 - ✅ Bereits in GitHub - keine extra Infrastruktur
 - ✅ Einfache CI/CD Integration mit GitHub Actions
@ -455,18 +510,20 @@ memoro-ui/
 - ✅ Kann später zu Private NPM migriert werden wenn nötig

 **Setup Details:**
+
 ```json
 // package.json im CLI-Tool
 {
-  "name": "@memoro/ui",
-  "repository": "https://github.com/[username]/memoro-ui",
-  "publishConfig": {
-    "registry": "https://npm.pkg.github.com"
-  }
+	"name": "@memoro/ui",
+	"repository": "https://github.com/[username]/memoro-ui",
+	"publishConfig": {
+		"registry": "https://npm.pkg.github.com"
+	}
 }
 ```

 **Usage in Apps:**
+
 ```bash
 # .npmrc in jeder App
@memoro:registry=https://npm.pkg.github.com
@ -480,10 +537,12 @@ npx @memoro/ui add button
 ```

 **GitHub Personal Access Token (PAT) benötigt mit:**
+
 - `read:packages` - Um Packages zu installieren
 - `write:packages` - Um zu publizieren (nur für Maintainer)

 **CI/CD Setup (GitHub Actions):**
+
 ```yaml
 - name: Setup NPM for GitHub Packages
  run: |
@ -494,59 +553,72 @@ npx @memoro/ui add button
 ---

 ### 3. Component Scope ✅
+
 **Entscheidung:** UI-Components + Navigation Components

 **Included:**
+
 - ✅ UI-Components (Button, Input, Card, Badge, Avatar, etc.)
 - ✅ Navigation Components (Header, TabBar, BackButton, etc.)

 **Excluded (für jetzt):**
+
 - ❌ Form validation helpers
 - ❌ Data display (Lists, Tables, Pagination)
 - ❌ Complex business logic components

 **Reasoning:**
+
 - Navigation components sind essentiell für jede App
 - Wiederholen sich über alle Apps hinweg
 - Bleiben UI-fokussiert ohne Business-Logik
 - Können später erweitert werden wenn Bedarf entsteht

 ### 4. Testing Strategy ✅
+
 **Entscheidung:** Manual Testing in Phase 1

 **Phase 1:**
+
 - Manual testing in Preview App
 - Visual verification auf iOS/Android
 - Component usage testing in real apps

 **Phase 2 (später):**
+
 - Automated tests wenn Library >5 Components hat
 - Jest + React Native Testing Library
 - Visual regression testing (optional)

 **Reasoning:**
+
 - Schneller Start ohne Testing-Overhead
 - Preview App bietet gute visuelle Kontrolle
 - Automated tests später wenn Library stabiler ist

 ### 5. Preview App ✅
+
 **Entscheidung:** Lokale Expo App

 **Setup:**
+
 - Expo App im Monorepo unter `packages/preview/`
 - Dev Client für native Features
 - Hot reload während Component-Development

 **Reasoning:**
+
 - ✅ Mehr Kontrolle als Expo Snack
 - ✅ Native Features testbar (z.B. Haptics, Gestures)
 - ✅ Läuft im gleichen Repo - einfaches Development
 - ✅ Kann mit Components in `packages/components/` direkt arbeiten

 ### 6. Repository Structure ✅
+
 **Entscheidung:** Monorepo mit pnpm workspaces

 **Structure:**
+
 ```
 memoro-ui/
 ├── packages/
@ -569,12 +641,14 @@ memoro-ui/
 ```

 **pnpm-workspace.yaml:**
+
 ```yaml
 packages:
  - 'packages/*'
 ```

 **Reasoning:**
+
 - ✅ Alles in einem Repo - einfacher zu entwickeln
 - ✅ Shared dependencies zwischen Packages
 - ✅ pnpm = schneller & effizienter als npm/yarn
@ -582,31 +656,36 @@ packages:
 - ✅ CLI kann direkt auf Components zugreifen

 ### 7. GitHub Organization ✅
+
 **Entscheidung:** GitHub Organization `@memoro`

 **Setup:**
+
 - Neue GitHub Org: `memoro` (oder `memoro-ui`)
 - Repo: `github.com/memoro/ui` (oder ähnlich)
 - Package: `@memoro/ui`

 **Package Configuration:**
+
 ```json
 {
-  "name": "@memoro/ui",
-  "repository": "https://github.com/memoro/ui",
-  "publishConfig": {
-    "registry": "https://npm.pkg.github.com"
-  }
+	"name": "@memoro/ui",
+	"repository": "https://github.com/memoro/ui",
+	"publishConfig": {
+		"registry": "https://npm.pkg.github.com"
+	}
 }
 ```

 **Reasoning:**
+
 - ✅ Professioneller Auftritt
 - ✅ Namespace für zukünftige Packages (`@memoro/tailwind-preset`)
 - ✅ Einfacher Team-Management später
 - ✅ Klare Trennung von Personal Projects

 **GitHub Org Setup:**
+
 1. Erstelle neue Org: https://github.com/organizations/plan
 2. Invite Members (wenn Team)
 3. Setup Package Permissions
@ -619,6 +698,7 @@ packages:
 **Alle Haupt-Entscheidungen getroffen! ✅**

 Optionale Entscheidungen für später:
+
 - **Icon System:** Eigenes Icon-Set oder bestehende Library? (@expo/vector-icons, react-native-heroicons)
 - **Animation Library:** Reanimated, Moti, oder custom?
 - **TypeScript Strictness:** Wie streng? (strict mode, exactOptionalPropertyTypes, etc.)
@ -628,6 +708,7 @@ Optionale Entscheidungen für später:
 ## Next Steps

 ### Phase 1: Repository Setup
+
 1. ✅ Plan dokumentiert
 2. ✅ Alle Entscheidungen getroffen
 3. ⏳ GitHub Organization `memoro` erstellen
@ -638,18 +719,21 @@ Optionale Entscheidungen für später:
   - registry.json erstellen

 ### Phase 2: Preview App Setup
+
 6. ⏳ Expo App in `packages/preview/` aufsetzen
   - Expo Router konfigurieren
   - NativeWind/Tailwind einrichten
   - Tabs für UI & Navigation Components

 ### Phase 3: CLI-Tool Prototyp
+
 7. ⏳ CLI-Tool Grundstruktur bauen
   - TypeScript setup
   - Commands: add, list, diff, update
   - GitHub Packages publish konfigurieren

 ### Phase 4: Erste Components
+
 8. ⏳ Ersten UI Component entwickeln (Button)
   - Component code in `packages/components/ui/Button/`
   - README schreiben
@ -662,6 +746,7 @@ Optionale Entscheidungen für später:
   - registry.json eintragen

 ### Phase 5: Testing in Real App
+
 10. ⏳ CLI publishen zu GitHub Packages
 11. ⏳ In "picture" App testen
    - `.npmrc` setup
--- a/apps/picture/docs/features/WEB_FRAMEWORK_COMPARISON.md
+++ b/apps/picture/docs/features/WEB_FRAMEWORK_COMPARISON.md
@ -12,6 +12,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ## Tech Stack Unabhängigkeit

 ### **SvelteKit** ✅ Unabhängiger
+
 - **Compiler-basiert** - kompiliert zu Vanilla JS
 - Keine Runtime Framework (React, Vue, etc.)
 - Kleinere Abhängigkeiten
@ -19,6 +20,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 - Zukunftssicherer durch Web Standards

 ### **Next.js** ⚠️ React-Ökosystem
+
 - Fest an React gebunden
 - Braucht React Ökosystem (React Query, etc.)
 - Größere Bundle Sizes
@ -29,6 +31,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ## Performance

 ### **SvelteKit** 🚀
+
 - **Extrem schnell** - kein Virtual DOM
 - Kleinere Bundles (20-30% weniger)
 - Schnelleres First Paint
@ -36,6 +39,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 - Beispiel: 50KB vs 150KB initial

 ### **Next.js** 👍
+
 - Gut, aber schwerer
 - Virtual DOM Overhead
 - Hydration kann langsam sein
@ -48,6 +52,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ### **SvelteKit**

 **Vorteile:**
+
 - **Weniger Boilerplate** - 30-40% weniger Code
 - Intuitivere Syntax
 - Eingebaute Animationen/Transitions
@ -55,17 +60,19 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 - Server Load Functions elegant

 **Beispiel:**
+
 ```svelte
 <script>
-  let count = 0; // Kein useState!
+	let count = 0; // Kein useState!
 </script>

 <button on:click={() => count++}>
-  {count}
+	{count}
 </button>
 ```

 **Nachteile:**
+
 - Kleinere Community
 - Weniger StackOverflow Antworten
 - Weniger UI Libraries
@ -73,6 +80,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ### **Next.js**

 **Vorteile:**
+
 - **Riesige Community** - jedes Problem schon gelöst
 - Tonnen von Libraries
 - Mehr Devs verfügbar (Hiring)
@ -80,6 +88,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 - Besserer Support

 **Nachteile:**
+
 - Mehr Boilerplate
 - Komplexer (App Router vs Pages Router)
 - Hooks-Lernkurve
@ -90,6 +99,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ## Supabase Integration

 ### **Beide gleich gut** ✅
+
 - Supabase JS Client funktioniert überall
 - SSR Auth beide gut
 - Beide haben offizielle Guides
@ -97,10 +107,12 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ### **Unterschiede:**

 **SvelteKit:**
+
 - Hooks in `+page.server.ts` natürlicher
 - Load Functions cleaner

 **Next.js:**
+
 - Mehr Beispiele online
 - Mehr Tutorials verfügbar

@ -109,6 +121,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ## Routing & SSR

 ### **SvelteKit** 💚
+
 - **File-based Routing** - `+page.svelte`
 - Einfacher als Next.js
 - Layouts intuitiver
@ -116,6 +129,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 - Weniger Magic

 ### **Next.js** 💛
+
 - File-based Routing - aber komplizierter
 - App Router vs Pages Router Verwirrung
 - Mehr Konzepte (RSC, Server Actions)
@ -128,6 +142,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ### **Next.js** ✅ Größer

 **UI Libraries:**
+
 - Shadcn/ui (top!)
 - Material UI
 - Chakra UI
@ -136,6 +151,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 - Tausende mehr

 **Sonstiges:**
+
 - Jede Library hat React Support
 - Auth: NextAuth perfekt integriert
 - Payments: Stripe Beispiele überall
@ -143,6 +159,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ### **SvelteKit** ⚠️ Kleiner, wachsend

 **UI Libraries:**
+
 - Skeleton UI
 - DaisyUI (Tailwind-based)
 - Carbon Components
@ -150,6 +167,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 - Weniger Auswahl

 **Aber:**
+
 - Kann CSS Frameworks nutzen (Tailwind, UnoCSS)
 - Viele Web Components nutzbar

@ -158,6 +176,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ## Image Handling (kritisch für Picture App!)

 ### **Next.js** ✅ Exzellent
+
 - `next/image` Component eingebaut
 - Automatische Optimierung
 - WebP/AVIF Konvertierung
@ -166,6 +185,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 - **Produktionsreif out of the box**

 ### **SvelteKit** ⚠️ Braucht Setup
+
 - Kein eingebautes Image Optimization
 - Manuell mit Vite Plugins (vite-imagetools)
 - Oder externe Services (Cloudinary, imgix)
@ -185,10 +205,12 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ### **Unterschiede:**

 **Next.js:**
+
 - Optimiert für Vercel
 - Einige Features nur auf Vercel

 **SvelteKit:**
+
 - Adapter-System flexibler
 - Läuft überall gleich gut

@ -197,12 +219,14 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ## Code Sharing mit React Native

 ### **Next.js** ✅ Einfacher
+
 - Beide nutzen React
 - Components **teilweise** portierbar
 - Gleiche Patterns (Hooks)
 - Logic besser teilbar

 ### **SvelteKit** ⚠️ Schwieriger
+
 - Komplett andere Syntax
 - Nur Business Logic teilbar
 - UI muss komplett neu
@ -212,11 +236,13 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ## Hiring & Team

 ### **Next.js** ✅
+
 - Jeder React Dev kann Next.js
 - Größerer Talent Pool
 - Einfacher zu ersetzen

 ### **SvelteKit** ⚠️
+
 - Kleinere Developer Base
 - Schwieriger zu finden
 - Aber: React Devs lernen es schnell
@ -226,12 +252,14 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ## Long-term Maintenance

 ### **SvelteKit** ✅ Stabiler
+
 - Weniger Breaking Changes
 - Klare Roadmap
 - Web Standards fokussiert
 - Weniger Refactoring nötig

 ### **Next.js** ⚠️ Schnelle Evolution
+
 - App Router große Änderung (2023)
 - React Server Components komplex
 - Viel Churn
@ -241,24 +269,25 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun

 ## Feature-Matrix für Picture App

-| Feature | Next.js | SvelteKit | Gewinner |
-|---------|---------|-----------|----------|
-| Image Optimization | ✅ Exzellent | ⚠️ Manuell | Next.js |
-| Performance | 👍 Gut | 🚀 Besser | SvelteKit |
-| Supabase Integration | ✅ Gut | ✅ Gut | Unentschieden |
-| Auth | ✅ NextAuth | ✅ Hooks | Unentschieden |
-| Animations | 👍 Libraries | ✅ Native | SvelteKit |
-| SEO | ✅ Gut | ✅ Gut | Unentschieden |
-| Community Support | ✅ Riesig | ⚠️ Klein | Next.js |
-| Bundle Size | ⚠️ Größer | ✅ Kleiner | SvelteKit |
-| Code Sharing RN | ✅ React | ❌ Neu | Next.js |
-| Developer Experience | 👍 Gut | ✅ Besser | SvelteKit |
+| Feature              | Next.js      | SvelteKit  | Gewinner      |
+| -------------------- | ------------ | ---------- | ------------- |
+| Image Optimization   | ✅ Exzellent | ⚠️ Manuell | Next.js       |
+| Performance          | 👍 Gut       | 🚀 Besser  | SvelteKit     |
+| Supabase Integration | ✅ Gut       | ✅ Gut     | Unentschieden |
+| Auth                 | ✅ NextAuth  | ✅ Hooks   | Unentschieden |
+| Animations           | 👍 Libraries | ✅ Native  | SvelteKit     |
+| SEO                  | ✅ Gut       | ✅ Gut     | Unentschieden |
+| Community Support    | ✅ Riesig    | ⚠️ Klein   | Next.js       |
+| Bundle Size          | ⚠️ Größer    | ✅ Kleiner | SvelteKit     |
+| Code Sharing RN      | ✅ React     | ❌ Neu     | Next.js       |
+| Developer Experience | 👍 Gut       | ✅ Besser  | SvelteKit     |

 ---

 ## Entscheidungsmatrix

 ### **Wähle SvelteKit wenn:**
+
 - ✅ Maximale Unabhängigkeit wichtig
 - ✅ Performance kritisch
 - ✅ Bereit für Image Optimization Setup
@ -266,6 +295,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 - ✅ Kleine, fokussierte Community okay

 ### **Wähle Next.js wenn:**
+
 - ✅ Schnelle Time-to-Market wichtig
 - ✅ Image Optimization out-of-the-box benötigt
 - ✅ React-Synergien mit Mobile gewünscht
@ -302,6 +332,7 @@ Für eine Bilder-App mit gleichwertigen Mobile (React Native) und Web Anforderun
 ```

 **Regeln:**
+
 1. ❌ **Keine Next.js spezifischen Features** außer Image und Routing
 2. ✅ **Business Logic in `/shared`** auslagern
 3. ✅ **Vercel-unabhängig deployen** (z.B. Cloudflare, Netlify)
@ -329,6 +360,7 @@ Phase 3: Optional - Migration zu SvelteKit wenn Next.js nervt
 **Warum NICHT Expo Web?**

 Die App nutzt viele native-only Features:
+
 - `react-native-worklets` (JSI/Native)
 - `react-native-reanimated` (Native Animations)
 - `react-native-pager-view` (Native Views)
@ -336,6 +368,7 @@ Die App nutzt viele native-only Features:
 - Gesten, Zoom, Blur...

 **Probleme:**
+
 - 2-5 Tage Debugging für Mocks
 - Ständige Workarounds
 - Limitierte Features
@ -359,15 +392,18 @@ Die App nutzt viele native-only Features:
 ## Ressourcen

 ### Next.js
+
 - [Next.js Docs](https://nextjs.org/docs)
 - [Next.js + Supabase](https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs)
 - [Next.js Image Optimization](https://nextjs.org/docs/app/building-your-application/optimizing/images)

 ### SvelteKit (für Zukunft)
+
 - [SvelteKit Docs](https://kit.svelte.dev/docs)
 - [SvelteKit + Supabase](https://supabase.com/docs/guides/getting-started/tutorials/with-sveltekit)

 ### Monorepo Setup
+
 - [Turborepo](https://turbo.build/repo/docs)
 - [pnpm Workspaces](https://pnpm.io/workspaces)

--- a/apps/picture/docs/models/README.md
+++ b/apps/picture/docs/models/README.md
@ -5,42 +5,49 @@ This directory contains documentation for all supported image generation models
 ## Available Models

 ### 1. [Ideogram V3 Turbo](./ideogram-v3-turbo.md)
+
 - **Best for**: Text rendering, logos, marketing materials
 - **Speed**: Fast (10s)
 - **Cost**: $0.02
 - **Special**: Excellent text generation capabilities

 ### 2. [Google Imagen 4 Fast](./imagen-4-fast.md)
+
 - **Best for**: Photorealistic images, portraits, product shots
 - **Speed**: Very Fast (8s)
 - **Cost**: $0.03
 - **Special**: Superior photorealism and coherence

 ### 3. [ByteDance SeeDream 3](./seedream-3.md)
+
 - **Best for**: Creative artwork, style mixing, illustrations
 - **Speed**: Moderate (12s)
 - **Cost**: $0.025
 - **Special**: Excellent artistic versatility

 ### 4. [FLUX Schnell](./flux-schnell.md)
+
 - **Best for**: Rapid prototyping, quick iterations
 - **Speed**: Ultra-fast (4s)
 - **Cost**: $0.01
 - **Special**: Fastest generation time

 ### 5. [FLUX Krea Dev](./flux-krea-dev.md)
+
 - **Best for**: Creative development, concept art
 - **Speed**: Moderate (15s)
 - **Cost**: $0.04
 - **Special**: Enhanced for creative workflows

 ### 6. [Recraft V3 SVG](./recraft-v3-svg.md)
+
 - **Best for**: Vector graphics, logos, icons
 - **Speed**: Moderate (20s)
 - **Cost**: $0.05
 - **Special**: Generates scalable SVG files

 ### 7. [Qwen Image](./qwen-image.md)
+
 - **Best for**: Multilingual content, Asian markets
 - **Speed**: Fast (10s)
 - **Cost**: $0.03
@ -48,37 +55,44 @@ This directory contains documentation for all supported image generation models

 ## Quick Comparison

-| Model | Speed | Quality | Text | Realism | Art | Aspect Ratios | Cost |
-|-------|-------|---------|------|---------|-----|---------------|------|
-| Ideogram V3 Turbo | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | 15 ratios | $0.02 |
-| Imagen 4 Fast | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | 5 ratios | $0.03 |
-| SeeDream 3 | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | 9 ratios + custom | $0.025 |
-| FLUX Schnell | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | 11 ratios | $0.01 |
-| FLUX Krea Dev | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | 11 ratios | $0.04 |
-| Recraft V3 SVG | ⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | N/A | ⭐⭐⭐⭐ | 16 ratios | $0.05 |
-| Qwen Image | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | 7 ratios | $0.03 |
+| Model             | Speed      | Quality    | Text       | Realism    | Art        | Aspect Ratios     | Cost   |
+| ----------------- | ---------- | ---------- | ---------- | ---------- | ---------- | ----------------- | ------ |
+| Ideogram V3 Turbo | ⭐⭐⭐⭐   | ⭐⭐⭐⭐   | ⭐⭐⭐⭐⭐ | ⭐⭐⭐     | ⭐⭐⭐     | 15 ratios         | $0.02  |
+| Imagen 4 Fast     | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐       | ⭐⭐⭐⭐⭐ | ⭐⭐⭐     | 5 ratios          | $0.03  |
+| SeeDream 3        | ⭐⭐⭐     | ⭐⭐⭐⭐   | ⭐⭐⭐     | ⭐⭐⭐     | ⭐⭐⭐⭐⭐ | 9 ratios + custom | $0.025 |
+| FLUX Schnell      | ⭐⭐⭐⭐⭐ | ⭐⭐⭐     | ⭐⭐       | ⭐⭐⭐     | ⭐⭐⭐     | 11 ratios         | $0.01  |
+| FLUX Krea Dev     | ⭐⭐⭐     | ⭐⭐⭐⭐   | ⭐⭐⭐     | ⭐⭐⭐     | ⭐⭐⭐⭐   | 11 ratios         | $0.04  |
+| Recraft V3 SVG    | ⭐⭐       | ⭐⭐⭐⭐   | ⭐⭐⭐⭐   | N/A        | ⭐⭐⭐⭐   | 16 ratios         | $0.05  |
+| Qwen Image        | ⭐⭐⭐⭐   | ⭐⭐⭐⭐   | ⭐⭐⭐⭐   | ⭐⭐⭐⭐   | ⭐⭐⭐⭐   | 7 ratios          | $0.03  |

 ## Choosing the Right Model

 ### For Text in Images
+
 Choose **Ideogram V3 Turbo** - It has the best text rendering capabilities

 ### For Photorealism
+
 Choose **Google Imagen 4 Fast** - Best for realistic photographs

 ### For Speed
+
 Choose **FLUX Schnell** - Ultra-fast 4-second generation

 ### For Artistic Work
+
 Choose **SeeDream 3** - Most versatile for creative styles

 ### For Logos/Icons
+
 Choose **Recraft V3 SVG** - Only model that generates scalable vectors

 ### For Multilingual
+
 Choose **Qwen Image** - Best for non-English prompts

 ### For Budget
+
 Choose **FLUX Schnell** - Most cost-effective at $0.01

 ## API Integration
@ -93,4 +107,4 @@ All models are integrated through the Replicate API and can be selected via the

 ## Model Updates

-Models are regularly updated by their providers. Version numbers are tracked in the database to ensure consistency. Check individual model documentation for specific capabilities and limitations.
+Models are regularly updated by their providers. Version numbers are tracked in the database to ensure consistency. Check individual model documentation for specific capabilities and limitations.
--- a/apps/picture/docs/models/flux-1-1-pro.md
+++ b/apps/picture/docs/models/flux-1-1-pro.md
@ -1,9 +1,11 @@
 # FLUX 1.1 Pro

 ## Overview
+
 FLUX 1.1 Pro is Black Forest Labs' flagship professional image generation model for 2025. It represents the pinnacle of the FLUX model family, delivering state-of-the-art image quality, exceptional prompt adherence, and unprecedented generation speed. This model is 6x faster than its predecessor while producing even higher quality results up to 4 megapixels.

 ## Model Details
+
 - **Provider**: Black Forest Labs
 - **Replicate ID**: `black-forest-labs/flux-1.1-pro`
 - **Version**: Latest stable version (1.1)
@ -11,6 +13,7 @@ FLUX 1.1 Pro is Black Forest Labs' flagship professional image generation model
 - **Status**: Production-ready, industry standard

 ## Key Features
+
 - **Ultra-High Quality**: Best-in-class image generation quality
 - **6x Faster**: Significantly improved inference speed over FLUX 1.0 Pro
 - **High Resolution**: Up to 4 megapixel (2048x2048) output
@ -20,6 +23,7 @@ FLUX 1.1 Pro is Black Forest Labs' flagship professional image generation model
 - **Compositional Guidance**: Supports image prompts for layout control

 ## Default Parameters
+
 - **Resolution**: 1024x1024
 - **Steps**: 1 (single-step generation for speed)
 - **Guidance Scale**: 3.5
@ -28,7 +32,9 @@ FLUX 1.1 Pro is Black Forest Labs' flagship professional image generation model
 - **Supports Image-to-Image**: Yes (via image prompt)

 ## Supported Aspect Ratios
+
 **9 professional aspect ratios**:
+
 - **Square**: 1:1
 - **Standard**: 4:3, 3:4
 - **Photo**: 3:2, 2:3
@ -36,6 +42,7 @@ FLUX 1.1 Pro is Black Forest Labs' flagship professional image generation model
 - **Widescreen**: 16:9, 9:16

 ## Supported Resolutions
+
 - **Width Range**: 256px - 1440px
 - **Height Range**: 256px - 1440px
 - **Constraint**: Both dimensions must be multiples of 32
@ -45,23 +52,29 @@ FLUX 1.1 Pro is Black Forest Labs' flagship professional image generation model
 ## Advanced Features

 ### Image Prompts (Compositional Guidance)
+
 Use reference images to guide the composition and structure of generated images while allowing the model to reinterpret the content based on your text prompt.

 ### Safety Tolerance
+
 Configurable safety filter (1-6 scale):
+
 - **1**: Strictest filtering
 - **2**: Default, balanced filtering
 - **6**: Most permissive

 ### Prompt Upsampling
+
 Optional feature that automatically enhances and expands your prompt for potentially better results.

 ### Output Formats
+
 - **WebP**: Default, best compression
 - **JPG**: Wide compatibility
 - **PNG**: Lossless quality

 ## Best Use Cases
+
 - Professional marketing materials
 - High-quality product photography
 - Advertising campaigns
@ -76,24 +89,28 @@ Optional feature that automatically enhances and expands your prompt for potenti
 ## Example Prompts

 ### Professional Photography
+
 ```
 A professional product photograph of a luxury watch on black marble,
 studio lighting, macro details, reflections, high-end commercial style
 ```

 ### Editorial Illustration
+
 ```
 Editorial illustration for tech magazine cover, AI and human collaboration,
 modern minimalist style, vibrant colors, geometric elements
 ```

 ### Brand Marketing
+
 ```
 Lifestyle photograph of a young professional using a laptop in a modern
 coffee shop, natural morning light, candid moment, warm tones
 ```

 ### Creative Concept
+
 ```
 Surreal scene of a floating island with waterfalls cascading into clouds,
 cinematic lighting, photorealistic style, dramatic atmosphere
@ -102,6 +119,7 @@ cinematic lighting, photorealistic style, dramatic atmosphere
 ## Tips for Best Results

 ### Prompt Engineering
+
 - Be specific and descriptive about desired style
 - Include lighting and atmosphere details
 - Specify composition and framing when needed
@ -109,23 +127,27 @@ cinematic lighting, photorealistic style, dramatic atmosphere
 - Use professional terminology for technical accuracy

 ### Quality Optimization
+
 - Use 1024x1024 or higher for best detail
 - Enable prompt upsampling for complex scenes
 - Specify output format based on use case (PNG for highest quality)
 - Use seed values for consistent results across iterations

 ### Speed vs. Quality
+
 - Default settings already optimized for both
 - Single-step generation is surprisingly high quality
 - For absolute best results, use maximum resolution
 - Image prompts add minimal processing time

 ### Composition Control
+
 - Use image prompts to maintain consistent layouts
 - Combine with detailed text prompts for best results
 - Reference images guide structure, not style

 ## Strengths
+
 - **Industry-Leading Quality**: Consistently produces professional-grade images
 - **Exceptional Speed**: 6x faster than previous generation
 - **Prompt Understanding**: Superior interpretation of complex prompts
@ -136,36 +158,40 @@ cinematic lighting, photorealistic style, dramatic atmosphere
 - **Fine Details**: Captures intricate textures and subtle elements

 ## Limitations
+
 - **No Negative Prompts**: Cannot explicitly exclude elements
 - **Premium Pricing**: Higher cost reflects professional quality
 - **Single-Step Only**: Fixed at 1 step (though this is optimized)
 - **Safety Filter**: May occasionally block artistic nudity or violence

 ## Performance Metrics
+
 - **Generation Time**: ~4 seconds average (at 1024x1024)
 - **Quality Score**: Top performer in industry benchmarks
 - **Prompt Adherence**: Highest accuracy in Text-to-Image Benchmark 2025
 - **Success Rate**: >99% successful generations

 ## Cost
+
 **$0.04 per generation** (regardless of resolution)

-*Premium pricing for professional-grade quality and speed*
+_Premium pricing for professional-grade quality and speed_

 ## Comparison with Other FLUX Models

-| Feature | FLUX 1.1 Pro | FLUX Dev | FLUX Schnell |
-|---------|--------------|----------|--------------|
-| Quality | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
-| Speed | 6x faster | Baseline | 8x faster |
-| Steps | 1 | 50 | 4 |
-| Resolution | Up to 4MP | Up to 1MP | Up to 1MP |
-| Cost | $0.04 | $0.025 | $0.003 |
-| Use Case | Professional | Development | Budget/Volume |
+| Feature    | FLUX 1.1 Pro | FLUX Dev    | FLUX Schnell  |
+| ---------- | ------------ | ----------- | ------------- |
+| Quality    | ⭐⭐⭐⭐⭐   | ⭐⭐⭐⭐    | ⭐⭐⭐        |
+| Speed      | 6x faster    | Baseline    | 8x faster     |
+| Steps      | 1            | 50          | 4             |
+| Resolution | Up to 4MP    | Up to 1MP   | Up to 1MP     |
+| Cost       | $0.04        | $0.025      | $0.003        |
+| Use Case   | Professional | Development | Budget/Volume |

 ## When to Use FLUX 1.1 Pro

 ### ✅ Choose FLUX 1.1 Pro When:
+
 - Quality is the top priority
 - You need professional, client-ready results
 - Time-sensitive projects requiring both speed and quality
@ -175,6 +201,7 @@ cinematic lighting, photorealistic style, dramatic atmosphere
 - Maximum prompt adherence required

 ### ❌ Consider Alternatives When:
+
 - Budget is extremely limited → use FLUX Schnell ($0.003 vs $0.04)
 - High-volume generation (1000+ images) → use FLUX Schnell
 - Rapid prototyping only → use FLUX Schnell
@ -184,12 +211,14 @@ cinematic lighting, photorealistic style, dramatic atmosphere
 ## Technical Details

 ### Model Architecture
+
 - 12 billion parameter rectified flow transformer
 - Optimized inference pipeline for 6x speed improvement
 - Enhanced prompt encoding for better adherence
 - Advanced attention mechanisms for fine details

 ### Optimization
+
 - Single-step distillation from multi-step model
 - Hardware acceleration optimized
 - Efficient memory usage
@ -207,12 +236,15 @@ cinematic lighting, photorealistic style, dramatic atmosphere
 ## Integration Notes

 ### API Usage
+
 Works seamlessly with Replicate's standard API structure. No special configuration needed.

 ### Batch Processing
+
 Can be parallelized for high-volume generation. Recommended for production workflows.

 ### Caching
+
 Use seed values and exact prompts for cacheable, reproducible results.

 ## Conclusion
--- a/apps/picture/docs/models/flux-krea-dev.md
+++ b/apps/picture/docs/models/flux-krea-dev.md
@ -1,20 +1,24 @@
 # FLUX Krea Dev

 ## Overview
+
 FLUX Krea Dev is an enhanced version of the FLUX model optimized for creative development. It combines the flexibility of the FLUX architecture with Krea's improvements for artistic and development workflows.

 ## Model Details
+
 - **Provider**: Black Forest Labs
 - **Replicate ID**: `black-forest-labs/flux-krea-dev`
 - **Version**: `c63e8a1037b9e90ce614e30bb44c837e1b1e86bb1f0adc6f1bb7f0e3ad088e3f`

 ## Key Features
+
 - **Creative Enhancement**: Optimized for artistic workflows
 - **Developer-Friendly**: Designed with API integration in mind
 - **Style Flexibility**: Excellent at various artistic styles
 - **Quality Balance**: Good balance between speed and quality

 ## Default Parameters
+
 - **Resolution**: 1024x1024
 - **Steps**: 30
 - **Guidance Scale**: 7.5
@ -22,17 +26,21 @@ FLUX Krea Dev is an enhanced version of the FLUX model optimized for creative de
 - **Supports Seed**: Yes

 ## Supported Aspect Ratios
+
 **11 aspect ratios**:
+
 - **Square**: 1:1
 - **Landscape**: 4:3, 3:2, 5:4, 16:9, 21:9
 - **Portrait**: 3:4, 2:3, 4:5, 9:16, 9:21

 ## Supported Resolutions
+
 - **Megapixel Options**: 0.25 MP or 1 MP (default)
 - **Maximum**: 1440x1440 pixels in any dimension
 - Dimensions automatically rounded to multiples of 32

 ## Best Use Cases
+
 - Creative development and prototyping
 - Artistic experimentation
 - Style exploration
@ -40,11 +48,13 @@ FLUX Krea Dev is an enhanced version of the FLUX model optimized for creative de
 - Game and media asset generation

 ## Example Prompts
+
 1. "Concept art for a steampunk airship with brass details and Victorian aesthetics"
 2. "A surreal landscape with floating islands and bioluminescent plants"
 3. "Character design sheet for a fantasy warrior with multiple poses and expressions"

 ## Tips for Best Results
+
 - Take advantage of the model's creative flexibility
 - Experiment with unusual style combinations
 - Use detailed artistic terminology
@ -52,14 +62,17 @@ FLUX Krea Dev is an enhanced version of the FLUX model optimized for creative de
 - Excellent for mood boards and concept work

 ## Strengths
+
 - Enhanced creative capabilities
 - Good at understanding artistic concepts
 - Reliable for professional workflows
 - Balanced performance

 ## Limitations
+
 - Slightly slower than Schnell variant (15 seconds)
 - May require more detailed prompts for specific outcomes

 ## Cost
-Estimated at $0.04 per generation
+
+Estimated at $0.04 per generation
--- a/apps/picture/docs/models/flux-schnell.md
+++ b/apps/picture/docs/models/flux-schnell.md
@ -1,20 +1,24 @@
 # FLUX Schnell

 ## Overview
+
 FLUX Schnell (German for "fast") is Black Forest Labs' speed-optimized image generation model. It delivers high-quality results in record time while maintaining the artistic excellence of the FLUX model family. **With the lowest cost per generation at just $0.003, it's the most economical choice for high-volume projects.**

 ## Model Details
+
 - **Provider**: Black Forest Labs
 - **Replicate ID**: `black-forest-labs/flux-schnell`
 - **Version**: Latest stable version

 ## Key Features
+
 - **Ultra-Fast Generation**: One of the fastest models available
 - **Consistent Quality**: Maintains high quality despite speed
 - **Prompt Adherence**: Excellent understanding of prompt instructions
 - **Efficient Processing**: Low computational requirements

 ## Default Parameters
+
 - **Resolution**: 1024x1024
 - **Steps**: 4 (optimized for speed)
 - **Guidance Scale**: 3.5
@ -22,17 +26,21 @@ FLUX Schnell (German for "fast") is Black Forest Labs' speed-optimized image gen
 - **Supports Seed**: Yes

 ## Supported Aspect Ratios
+
 **11 aspect ratios**:
+
 - **Square**: 1:1
 - **Landscape**: 4:3, 3:2, 5:4, 16:9, 21:9
 - **Portrait**: 3:4, 2:3, 4:5, 9:16, 9:21

 ## Supported Resolutions
+
 - **Megapixel Options**: 0.25 MP (fast) or 1 MP (standard)
 - Automatically calculated based on aspect ratio
 - All dimensions must be multiples of 32

 ## Best Use Cases
+
 - Rapid prototyping and iteration
 - Real-time applications
 - High-volume generation needs
@ -40,11 +48,13 @@ FLUX Schnell (German for "fast") is Black Forest Labs' speed-optimized image gen
 - Testing prompt variations

 ## Example Prompts
+
 1. "A minimalist logo design for a tech startup, geometric shapes, blue and white"
 2. "Portrait of a robot chef cooking in a futuristic kitchen"
 3. "Abstract art piece with flowing colors representing music and rhythm"

 ## Tips for Best Results
+
 - Keep prompts clear and concise for speed
 - Use simple, direct descriptions
 - Ideal for iterative workflows
@ -52,6 +62,7 @@ FLUX Schnell (German for "fast") is Black Forest Labs' speed-optimized image gen
 - Perfect for time-sensitive projects

 ## Strengths
+
 - **Cheapest model available** ($0.003 per generation)
 - Extremely fast generation (~5 seconds)
 - Reliable and consistent
@ -60,10 +71,12 @@ FLUX Schnell (German for "fast") is Black Forest Labs' speed-optimized image gen
 - Perfect for high-volume/budget-conscious projects

 ## Limitations
+
 - May sacrifice some fine details for speed
 - Best for standard styles rather than highly specialized ones

 ## Cost
+
 **$0.003 per generation** (~333 images for $1)

-*The most cost-effective model available - over 6x cheaper than most alternatives!*
+_The most cost-effective model available - over 6x cheaper than most alternatives!_
--- a/apps/picture/docs/models/ideogram-v3-turbo.md
+++ b/apps/picture/docs/models/ideogram-v3-turbo.md
@ -1,20 +1,24 @@
 # Ideogram V3 Turbo

 ## Overview
+
 Ideogram V3 Turbo is a fast, high-quality text-to-image generation model with exceptional text rendering capabilities. This model excels at generating images with readable, accurate text embedded within them.

 ## Model Details
+
 - **Provider**: Ideogram AI
 - **Replicate ID**: `ideogram-ai/ideogram-v3-turbo`
 - **Version**: `adfd685c1f08e0a1091e8c3e2e1c8c1c6aca2cb1c73cf37e982b965fb40e5c42`

 ## Key Features
+
 - **Excellent Text Rendering**: Superior ability to generate readable text within images
 - **Fast Generation**: Optimized for quick results (typically 10 seconds)
 - **High Quality**: Produces professional-quality images
 - **Versatile Styles**: Supports various artistic and photographic styles

 ## Default Parameters
+
 - **Resolution**: 1024x1024
 - **Steps**: 30
 - **Guidance Scale**: 7.5
@ -22,18 +26,22 @@ Ideogram V3 Turbo is a fast, high-quality text-to-image generation model with ex
 - **Supports Seed**: Yes

 ## Supported Aspect Ratios
+
 **Extensive Support** - 15 different aspect ratios:
+
 - **Square**: 1:1
 - **Landscape**: 3:2, 4:3, 5:4, 16:10, 16:9, 2:1, 3:1
 - **Portrait**: 2:3, 3:4, 4:5, 10:16, 9:16, 1:2, 1:3
 - **Ultra-wide**: 21:9 (custom)

 ## Supported Resolutions
+
 - **Minimum**: 512x512
 - **Maximum**: 1536x1536 (in any dimension)
 - Flexible resolution combinations from 512x1536 to 1536x512

 ## Best Use Cases
+
 - Marketing materials with text overlays
 - Logo designs and branding
 - Posters and advertisements
@ -41,11 +49,13 @@ Ideogram V3 Turbo is a fast, high-quality text-to-image generation model with ex
 - Any image requiring embedded text

 ## Example Prompts
+
 1. "A vintage travel poster for Paris with bold text saying 'Visit Paris' in art deco style"
 2. "A modern tech company logo with the text 'TechCorp' in sleek metallic letters"
 3. "A coffee shop menu board with handwritten chalk text listing various drinks"

 ## Tips for Best Results
+
 - Be specific about text placement and style
 - Describe the font style you want (bold, handwritten, serif, etc.)
 - Include context about the overall image composition
@ -53,9 +63,11 @@ Ideogram V3 Turbo is a fast, high-quality text-to-image generation model with ex
 - Specify text color and background contrast for readability

 ## Limitations
+
 - Complex multi-paragraph text may be challenging
 - Very small text might not be perfectly legible
 - Special characters and non-Latin scripts may have varying results

 ## Cost
-Estimated at $0.02 per generation
+
+Estimated at $0.02 per generation
--- a/apps/picture/docs/models/imagen-4-fast.md
+++ b/apps/picture/docs/models/imagen-4-fast.md
@ -1,20 +1,24 @@
 # Google Imagen 4 Fast

 ## Overview
+
 Google's Imagen 4 Fast is a state-of-the-art image generation model that balances speed with exceptional quality and coherence. It leverages Google's advanced AI research to produce highly realistic and contextually accurate images.

 ## Model Details
+
 - **Provider**: Google
 - **Replicate ID**: `google/imagen-4-fast`
 - **Version**: `39d3ddaf89f8eadd0f728bb96f6c1a95e99a0e06f3bb4e893d7a039f69a04f94`

 ## Key Features
+
 - **Photorealistic Quality**: Excels at generating realistic photographs
 - **Semantic Understanding**: Strong comprehension of complex prompts
 - **Fast Processing**: Optimized for speed (typically 8 seconds)
 - **Consistent Results**: Reliable output quality across various prompts

 ## Default Parameters
+
 - **Resolution**: 1024x1024
 - **Steps**: 30
 - **Guidance Scale**: 7.5
@ -22,17 +26,21 @@ Google's Imagen 4 Fast is a state-of-the-art image generation model that balance
 - **Supports Seed**: Yes

 ## Supported Aspect Ratios
+
 **5 standard ratios**:
+
 - **Square**: 1:1
 - **Landscape**: 16:9, 4:3
 - **Portrait**: 9:16, 3:4

 ## Supported Resolutions
+
 - Automatically determined by aspect ratio selection
 - High-quality output at all supported ratios
 - Optimized for each aspect ratio

 ## Best Use Cases
+
 - Photorealistic portraits and scenes
 - Product photography
 - Architectural visualizations
@ -40,11 +48,13 @@ Google's Imagen 4 Fast is a state-of-the-art image generation model that balance
 - Editorial and documentary-style images

 ## Example Prompts
+
 1. "A professional headshot of a business executive in a modern office, soft natural lighting"
 2. "A hyperrealistic product shot of a luxury watch on black velvet background"
 3. "An aerial view of a sustainable city with green rooftops and solar panels"

 ## Tips for Best Results
+
 - Use detailed descriptions for photorealistic results
 - Specify lighting conditions (golden hour, studio lighting, etc.)
 - Include camera settings for photography-style shots
@ -52,14 +62,17 @@ Google's Imagen 4 Fast is a state-of-the-art image generation model that balance
 - Use professional photography terminology

 ## Strengths
+
 - Excellent at human faces and expressions
 - Superior understanding of spatial relationships
 - High-quality texture rendering
 - Natural lighting and shadows

 ## Limitations
+
 - May require more specific prompting for artistic styles
 - Best suited for realistic rather than abstract content

 ## Cost
-Estimated at $0.03 per generation
+
+Estimated at $0.03 per generation
--- a/apps/picture/docs/models/qwen-image.md
+++ b/apps/picture/docs/models/qwen-image.md
@ -1,20 +1,24 @@
 # Qwen Image

 ## Overview
+
 Qwen Image is Alibaba's advanced image generation model that combines strong multilingual understanding with high-quality image generation capabilities. It's particularly notable for its excellent handling of Asian languages and cultural contexts.

 ## Model Details
+
 - **Provider**: Qwen (Alibaba)
 - **Replicate ID**: `qwen/qwen-image`
 - **Version**: `9bc5cb891bfe948b11c7bb9e63ccb1c7e03c4cf53e89b963a99e673f84c5d8ef`

 ## Key Features
+
 - **Multilingual Excellence**: Superior understanding of Chinese, Japanese, Korean, and other languages
 - **Cultural Awareness**: Strong understanding of diverse cultural contexts
 - **Balanced Quality**: Good balance of speed and image quality
 - **Versatile Styles**: Handles both Eastern and Western artistic styles

 ## Default Parameters
+
 - **Resolution**: 1024x1024
 - **Steps**: 30
 - **Guidance Scale**: 7.5
@ -22,19 +26,23 @@ Qwen Image is Alibaba's advanced image generation model that combines strong mul
 - **Supports Seed**: Yes

 ## Supported Aspect Ratios
+
 **7 aspect ratios**:
+
 - **Square**: 1:1
 - **Landscape**: 4:3, 3:2, 16:9
 - **Portrait**: 3:4, 2:3, 9:16

 ## Supported Resolutions
+
 - **Custom Range**: 512x512 to 2048x2048
- **Quality Modes**: 
+- **Quality Modes**:
  - "optimize_for_quality" (higher resolution)
  - "optimize_for_speed" (lower resolution)
 - Custom width/height override available

 ## Best Use Cases
+
 - Multilingual content creation
 - Asian market visuals
 - Cultural and traditional artwork
@ -42,11 +50,13 @@ Qwen Image is Alibaba's advanced image generation model that combines strong mul
 - Educational illustrations

 ## Example Prompts
+
 1. "Traditional Chinese garden with pavilion, koi pond, and cherry blossoms in spring"
 2. "Modern Tokyo street fashion, young person in Harajuku style clothing"
 3. "Korean traditional hanbok in modern minimalist style illustration"

 ## Tips for Best Results
+
 - Can handle prompts in multiple languages effectively
 - Excellent for culture-specific imagery
 - Good at combining traditional and modern elements
@ -54,19 +64,23 @@ Qwen Image is Alibaba's advanced image generation model that combines strong mul
 - Works well with detailed scene descriptions

 ## Strengths
+
 - Best-in-class for Asian language prompts
 - Excellent cultural representation
 - Good at traditional art styles
 - Reliable and consistent output

 ## Limitations
+
 - May require more specific prompting for Western styles
 - Generation time moderate (10 seconds)

 ## Special Features
+
 - Accepts prompts in Chinese, Japanese, Korean, and English
 - Understands cultural nuances and symbols
 - Good at generating text in Asian languages

 ## Cost
-Estimated at $0.03 per generation
+
+Estimated at $0.03 per generation
--- a/apps/picture/docs/models/recraft-v3-svg.md
+++ b/apps/picture/docs/models/recraft-v3-svg.md
@ -1,20 +1,24 @@
 # Recraft V3 SVG

 ## Overview
+
 Recraft V3 SVG is a unique model specialized in generating vector graphics and illustrations in SVG format. Unlike raster-based models, it creates scalable vector graphics perfect for logos, icons, and illustrations that need to work at any size.

 ## Model Details
+
 - **Provider**: Recraft AI
 - **Replicate ID**: `recraft-ai/recraft-v3-svg`
 - **Version**: `4747c02d57e6a055f96a74e5c6e7f9dd72e6f9c49a08f802e03f42b2c59e2bbf`

 ## Key Features
+
 - **Vector Output**: Generates true SVG files, not raster images
 - **Infinite Scalability**: Images can be scaled to any size without quality loss
 - **Clean Graphics**: Produces clean, professional vector illustrations
 - **Design-Ready**: Output ready for use in design software

 ## Default Parameters
+
 - **Resolution**: 1024x1024 (initial render size)
 - **Steps**: 30
 - **Guidance Scale**: 7.5
@ -22,14 +26,18 @@ Recraft V3 SVG is a unique model specialized in generating vector graphics and i
 - **Supports Seed**: Yes

 ## Supported Aspect Ratios
+
 **16 aspect ratios**:
+
 - **Square**: 1:1
 - **Landscape**: 4:3, 3:2, 16:9, 2:1, 7:5, 5:4, 5:3
 - **Portrait**: 3:4, 2:3, 9:16, 1:2, 5:7, 4:5, 3:5
 - **Custom**: "Not set" option available

 ## Supported Resolutions
+
 **Preset resolutions based on aspect ratio**:
+
 - 1024x1024 (1:1)
 - 1365x1024 (4:3), 1024x1365 (3:4)
 - 1536x1024 (3:2), 1024x1536 (2:3)
@ -39,6 +47,7 @@ Recraft V3 SVG is a unique model specialized in generating vector graphics and i
 - Note: As SVG, output can be scaled infinitely

 ## Best Use Cases
+
 - Logo design and branding
 - Icon sets and UI elements
 - Technical illustrations
@ -47,11 +56,13 @@ Recraft V3 SVG is a unique model specialized in generating vector graphics and i
 - Web illustrations

 ## Example Prompts
+
 1. "A minimalist logo of a mountain with sunrise, flat design, vector style"
 2. "Set of weather icons in outlined style, simple and clean"
 3. "Abstract geometric pattern with circles and triangles, modern art style"

 ## Tips for Best Results
+
 - Use terms like "vector", "flat design", "minimalist"
 - Specify simple, clean compositions
 - Avoid requesting photorealistic details
@ -59,21 +70,25 @@ Recraft V3 SVG is a unique model specialized in generating vector graphics and i
 - Request "icon style" or "logo style" for best results

 ## Strengths
+
 - Only model that generates true vector graphics
 - Perfect for scalable designs
 - Clean, professional output
 - Ideal for commercial design work

 ## Limitations
+
 - Cannot generate photorealistic images
 - Limited to vector-appropriate styles
 - No support for negative prompts
 - Best for simple to moderate complexity

 ## Output Format
+
 - SVG (Scalable Vector Graphics)
 - Can be edited in Adobe Illustrator, Inkscape, etc.
 - Web-ready and print-ready

 ## Cost
-Estimated at $0.05 per generation
+
+Estimated at $0.05 per generation
--- a/apps/picture/docs/models/seedream-3.md
+++ b/apps/picture/docs/models/seedream-3.md
@ -1,20 +1,24 @@
 # ByteDance SeeDream 3

 ## Overview
+
 SeeDream 3 is ByteDance's advanced image generation model known for its creative capabilities and artistic flexibility. It excels at producing diverse styles ranging from photorealistic to highly stylized artwork.

 ## Model Details
+
 - **Provider**: ByteDance
 - **Replicate ID**: `bytedance/seedream-3`
 - **Version**: `3c96fbed56fa0e9c6c06bb014f8be529821f5ea8e37e887fb20d3fb2fe10e1e8`

 ## Key Features
+
 - **Creative Versatility**: Excellent at both realistic and artistic styles
 - **Style Mixing**: Can blend multiple artistic styles effectively
 - **Detail Richness**: Produces images with intricate details
 - **Cultural Diversity**: Strong understanding of diverse cultural contexts

 ## Default Parameters
+
 - **Resolution**: 1024x1024
 - **Steps**: 30
 - **Guidance Scale**: 7.5
@ -22,13 +26,16 @@ SeeDream 3 is ByteDance's advanced image generation model known for its creative
 - **Supports Seed**: Yes

 ## Supported Aspect Ratios
+
 **9 aspect ratios including custom**:
+
 - **Square**: 1:1
 - **Landscape**: 4:3, 3:2, 16:9, 21:9
 - **Portrait**: 3:4, 2:3, 9:16
 - **Custom**: Any ratio within resolution limits

 ## Supported Resolutions
+
 - **Minimum**: 512x512
 - **Maximum**: 2048x2048
 - **Size Presets**:
@ -37,6 +44,7 @@ SeeDream 3 is ByteDance's advanced image generation model known for its creative
  - Small: Shortest dimension 512px

 ## Best Use Cases
+
 - Digital artwork and illustrations
 - Character design and concept art
 - Fantasy and sci-fi scenes
@ -44,11 +52,13 @@ SeeDream 3 is ByteDance's advanced image generation model known for its creative
 - Creative advertising visuals

 ## Example Prompts
+
 1. "A cyberpunk street market in Tokyo at night, neon lights reflecting on wet pavement"
 2. "Traditional Chinese ink painting of mountains with modern city skyline in background"
 3. "A whimsical illustration of a tea party in an enchanted forest, Studio Ghibli style"

 ## Tips for Best Results
+
 - Experiment with style combinations (e.g., "watercolor and digital art")
 - Include atmospheric descriptions for mood
 - Specify color palettes for consistent aesthetics
@ -56,14 +66,17 @@ SeeDream 3 is ByteDance's advanced image generation model known for its creative
 - Combine realistic elements with fantastical concepts

 ## Strengths
+
 - Excellent style transfer and mixing
 - Strong at creating atmospheric scenes
 - Good understanding of artistic movements
 - Handles complex compositions well

 ## Limitations
+
 - Generation time slightly longer than some alternatives (12 seconds)
 - May need refinement for ultra-photorealistic results

 ## Cost
-Estimated at $0.025 per generation
+
+Estimated at $0.025 per generation
--- a/apps/picture/docs/models/seedream-4.md
+++ b/apps/picture/docs/models/seedream-4.md
@ -1,14 +1,17 @@
 # ByteDance SeeDream 4

 ## Overview
+
 SeeDream 4 is ByteDance's latest generation image model featuring unified text-to-image generation and precise single-sentence editing capabilities. It offers significant improvements over SeeDream 3 with higher resolution support and more flexible workflows.

 ## Model Details
+
 - **Provider**: ByteDance
 - **Replicate ID**: `bytedance/seedream-4`
 - **Version**: `054cd8c667f535616fd66710ce20c8949bf64ac3d9a3459e338f026424be8bec`

 ## Key Features
+
 - **Unified Architecture**: Single model for both generation and editing
 - **Ultra High Resolution**: Up to 4K (4096x4096) output
 - **Multi-Reference Support**: Use up to 10 reference images
@ -17,6 +20,7 @@ SeeDream 4 is ByteDance's latest generation image model featuring unified text-t
 - **Consistent Characters**: Maintains character consistency across multiple outputs

 ## Default Parameters
+
 - **Resolution**: 2048x2048 (2K preset)
 - **Steps**: 50 (automatic based on size preset)
 - **Guidance Scale**: 7.5 (automatic)
@ -25,7 +29,9 @@ SeeDream 4 is ByteDance's latest generation image model featuring unified text-t
 - **Supports Image-to-Image**: Yes (via image_input array)

 ## Supported Aspect Ratios
+
 **8 fixed ratios**:
+
 - **Square**: 1:1
 - **Landscape**: 4:3, 16:9, 3:2, 21:9
 - **Portrait**: 3:4, 9:16, 2:3
@ -33,12 +39,14 @@ SeeDream 4 is ByteDance's latest generation image model featuring unified text-t
 Additionally supports "match_input_image" when using reference images.

 ## Size Presets
+
 - **1K**: Best for quick previews (1024-2047px)
 - **2K**: Balanced quality and speed (2048-3071px) - Default
 - **4K**: Maximum quality (4096px)
 - **Custom**: Specify exact width/height (1024-4096px range)

 ## Best Use Cases
+
 - Character consistency across multiple scenes
 - High-resolution commercial imagery
 - Image editing with natural language prompts
@ -47,11 +55,13 @@ Additionally supports "match_input_image" when using reference images.
 - Batch creation of variations

 ## Example Prompts
+
 1. "A professional portrait of a woman in business attire, modern office background, natural lighting"
 2. "A selection of photos of this character [reference] exploring a bookshop called 'SeeDream 4'"
 3. "Multiple views of a futuristic car design, different angles and lighting"

 ## Tips for Best Results
+
 - Use the 2K preset for optimal balance of quality and speed
 - Leverage multi-reference input for character consistency
 - Use natural language for precise editing instructions
@ -60,6 +70,7 @@ Additionally supports "match_input_image" when using reference images.
 - For ultra-high quality, use 4K preset

 ## Strengths
+
 - Exceptional high-resolution output (up to 4K)
 - Unified generation and editing workflow
 - Excellent character consistency
@ -68,16 +79,20 @@ Additionally supports "match_input_image" when using reference images.
 - Natural language editing

 ## Limitations
+
 - No manual seed control
 - No negative prompt support
 - Fixed aspect ratios only (no completely custom ratios)
 - Slightly higher cost than SeeDream 3 ($0.03 vs $0.025)

 ## Cost
+
 $0.03 per generation (regardless of resolution)

 ## Migration from SeeDream 3
+
 If you're upgrading from SeeDream 3:
+
 - Resolution limits increased: 2048x2048 → 4096x4096
 - New parameter structure (size presets instead of raw dimensions)
 - Removed: seed support, negative prompts