improve everything using AI

CLAUDE.md

@@ -39,25 +39,48 @@ pip install -r requirements.txt
    - Supports custom styles and random style selection
    - Each preset includes prefix, suffix, and negative prompt components
 
-4. **Page Layouts System** (`app.py:89-111`)
+4. **Page Layouts System** (`app.py:89-145`)
    - `load_page_layouts()`: Loads multi-image layouts from `page_layouts.yaml`
-   - Supports 1-4 images per page with various layout configurations
+   - `get_layout_choices()`: Returns available layouts for a given number of images
+   - `get_layout_metadata()`: Extracts panel metadata (type, focus, composition) for each position
+   - Supports 1-8 images per page with 5-6 layout variations each
    - Dynamic layout selection based on number of images
-
-5. **PDF Generation** (`app.py:166-223`)
-   - `create_pdf_with_layout()`: Creates PDF with multiple images in selected layout
+   - **Panel Metadata System**: Each panel position includes metadata that describes:
+     - `panel_type`: establishing/action/closeup/dialogue/reaction/transition/detail/splash
+     - `focus`: environment/character/characters/action/emotion/object/event
+     - `composition`: wide/tall/square/portrait/landscape
+   - Metadata is used to guide the LLM in generating appropriate scene descriptions
+
+5. **Story Generation System** (`app.py:147-265`)
+   - `generate_story_scenes()`: Uses Hugging Face InferenceClient with Qwen3-235B to generate scene descriptions
+   - Takes panel metadata as input to generate contextually appropriate content
+   - Adapts descriptions based on panel type, focus, and composition
+   - Returns structured scene data with captions and dialogue
+   - `parse_yaml_scenes()`: Parses LLM output into structured scene data
+
+6. **Image Size Calculation** (`app.py:267-330`)
+   - `get_image_size_for_position()`: Calculates precise image dimensions based on layout aspect ratio
+   - Uses 8px rounding for model compatibility while maintaining aspect ratio accuracy
+   - Ensures images fill their layout containers without floating
+   - `get_layout_position_for_image()`: Retrieves position data for a specific panel
+
+7. **PDF Generation** (`app.py:450-540`)
+   - `create_single_page_pdf()`: Creates PDF page with images arranged per layout
+   - `create_multi_page_pdf()`: Combines multiple pages into a single document
    - Uses ReportLab for high-quality PDF generation
    - Preserves image quality at 95% JPEG compression
    - A4 page size with flexible positioning system
+   - Smart filling: fills space completely when aspect ratios match (<2% difference)
 
-6. **Multi-Image Generation** (`app.py:225-307`)
-   - `infer_multiple()`: Generates multiple images and combines into PDF
+8. **Multi-Image Generation** (`app.py:545-650`)
+   - `infer_page()`: Main generation orchestrator
+   - Generates multiple images and combines into PDF
    - Progressive generation with status updates
    - Seed management for reproducibility across multiple images
    - Returns PDF file, preview image, and seed information
 
-7. **Gradio Interface** (`app.py:380-500+`)
-   - Slider for selecting 1-4 images per page
+9. **Gradio Interface** (`app.py:750-900+`)
+   - Slider for selecting 1-8 images per page
    - Dynamic layout dropdown that updates based on image count
    - Style preset dropdown with custom style text option
    - PDF download and image preview outputs

README.md

@@ -1,13 +1,49 @@
 ---
-title: Qwen Image Fast
-emoji: 🖼️
+title: AiComicFactory2
+emoji: 🦸
 colorFrom: yellow
 colorTo: green
 sdk: gradio
 sdk_version: 5.39.0
 app_file: app.py
 pinned: false
-short_description: Generate images in 8-steps
+short_description: Generate PDF comic books
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## What is this?
+
+This space is an app to generate comic books in PDF in a playful and easy way using AI.
+
+It is designed to allow people having fun, without the technical constraint of manually typing text in speech bubbles etc. It is deliberately not designed for human-based manual editing.
+
+## How can I use it?
+
+The AiComicFactory2 is a standard Python/Gradio app that is free and open-source, but you need to have access to a GPU to run it. 
+
+The easiest way is to run it directly from my space on Hugging Face using the ZeroGPU system, which allows you to benefit from a free quota that gets refilled regularly.
+
+You can subscribe to a PRO account on Hugging Face to get higher usage quotas 🫶
+
+### Running in local
+
+Alternatively if you already own your own GPU, then you simply have to install the Gradio app and run it!
+
+While the commands to use varies depending on wether you use a Python package manager and your version of python, the basic CLI workflow is usually like this:
+
+```bash
+# prerequisites not covered by this quickstart:
+# you need a terminal, Python, Git and Git LFS
+
+# Get the code using Git
+git clone git@hf.co:spaces/jbilcke-hf/AiComicFactory2
+
+cd AiComicFactory2
+
+# global install of dependencies
+# the executable might be pip3 depending on your system
+# but you should use a venv / package manager
+pip install -r requirements.txt
+
+# run the app (the executable might be python3, python3.12, python3.13 etc.. depending on your system)
+python app.py
+```

app.py

@@ -55,10 +55,10 @@ def load_page_layouts():
         print(f"Error loading page layouts: {e}")
         # Fallback to basic layouts
         return {
-            1: [{"id": "full_page", "label": "Full Page", "positions": [[0.05, 0.05, 0.9, 0.9]]}],
-            2: [{"id": "horizontal_split", "label": "Horizontal Split", "positions": [[0.05, 0.05, 0.425, 0.9], [0.525, 0.05, 0.425, 0.9]]}],
-            3: [{"id": "grid", "label": "Grid", "positions": [[0.05, 0.05, 0.283, 0.5], [0.358, 0.05, 0.283, 0.5], [0.666, 0.05, 0.283, 0.5]]}],
-            4: [{"id": "grid_2x2", "label": "2x2 Grid", "positions": [[0.05, 0.05, 0.425, 0.425], [0.525, 0.05, 0.425, 0.425], [0.05, 0.525, 0.425, 0.425], [0.525, 0.525, 0.425, 0.425]]}]
+            "1_image": [{"id": "full_page", "label": "Full Page", "positions": [[0.05, 0.05, 0.9, 0.9]]}],
+            "2_images": [{"id": "horizontal_split", "label": "Horizontal Split", "positions": [[0.05, 0.05, 0.425, 0.9], [0.525, 0.05, 0.425, 0.9]]}],
+            "3_images": [{"id": "grid", "label": "Grid", "positions": [[0.05, 0.05, 0.283, 0.5], [0.358, 0.05, 0.283, 0.5], [0.666, 0.05, 0.283, 0.5]]}],
+            "4_images": [{"id": "grid_2x2", "label": "2x2 Grid", "positions": [[0.05, 0.05, 0.425, 0.425], [0.525, 0.05, 0.425, 0.425], [0.05, 0.525, 0.425, 0.425], [0.525, 0.525, 0.425, 0.425]]}]
         }
 
 # Load layouts at startup
@@ -72,6 +72,33 @@ def get_layout_choices(num_images: int) -> List[Tuple[str, str]]:
     # Return empty list if no layouts found (shouldn't happen with our config)
     return [("Default", "default")]
 
+def get_layout_metadata(layout_id: str, num_images: int) -> List[Dict]:
+    """Get metadata for each panel in a layout.
+    
+    Args:
+        layout_id: ID of the selected layout
+        num_images: Total number of images
+        
+    Returns:
+        List of metadata dicts with panel_type, focus, composition, shot_type, and camera_angle
+    """
+    key = f"{num_images}_image" if num_images == 1 else f"{num_images}_images"
+    layouts = PAGE_LAYOUTS.get(key, [])
+    layout = next((l for l in layouts if l["id"] == layout_id), None)
+    
+    if layout and "metadata" in layout:
+        return layout["metadata"]
+    
+    # Fallback metadata if not found
+    fallback_meta = {
+        "panel_type": "action",
+        "focus": "character",
+        "composition": "square",
+        "shot_type": "medium",
+        "camera_angle": "eye_level"
+    }
+    return [fallback_meta] * num_images
+
 def get_random_style_preset():
     """Get a random style preset (excluding 'no_style' and 'random')."""
     eligible_keys = [k for k in STYLE_PRESETS.keys() if k not in ['no_style', 'random']]
@@ -125,7 +152,7 @@ def apply_style_preset(prompt, style_preset_key, custom_style_text=""):
 
 # --- Story Generation using Hugging Face InferenceClient ---
 
-def generate_story_scenes(story_prompt, num_scenes, style_context=""):
+def generate_story_scenes(story_prompt, num_scenes, style_context="", panel_metadata=None):
     """
     Generates a sequence of scene descriptions with captions and dialogues.
 
@@ -133,6 +160,7 @@ def generate_story_scenes(story_prompt, num_scenes, style_context=""):
         story_prompt: The user's story prompt
         num_scenes: Number of scenes to generate
         style_context: Optional style context to consider
+        panel_metadata: List of metadata dicts for each panel
 
     Returns:
         List of dicts with 'caption' and 'dialogue' keys
@@ -156,29 +184,105 @@ def generate_story_scenes(story_prompt, num_scenes, style_context=""):
         api_key=api_key,
     )
 
-    # Create system prompt for story generation
-    system_prompt = f"""You are a comic book story writer. Generate exactly {num_scenes} scenes for a comic page based on the user's story prompt.
+    # Build panel descriptions from metadata
+    panel_descriptions = []
+    if panel_metadata and len(panel_metadata) == num_scenes:
+        for i, meta in enumerate(panel_metadata):
+            panel_type = meta.get('panel_type', 'action')
+            focus = meta.get('focus', 'character')
+            composition = meta.get('composition', 'square')
+            shot_type = meta.get('shot_type', 'medium')
+            camera_angle = meta.get('camera_angle', 'eye_level')
+            
+            # Format shot type for readability
+            shot_display = shot_type.replace('_', ' ').title()
+            angle_display = camera_angle.replace('_', ' ').title()
+            
+            # Create a descriptive text for this panel
+            desc = f"Panel {i+1}/{num_scenes} - {composition.upper()} composition, {shot_display} shot at {angle_display} angle, {panel_type} panel focusing on {focus}"
+            panel_descriptions.append(desc)
+    else:
+        # Fallback if no metadata
+        panel_descriptions = [f"Panel {i+1}/{num_scenes}" for i in range(num_scenes)]
+
+    # Create system prompt with panel-specific guidance
+    system_prompt = f"""You are a comic book story writer with expertise in cinematography and visual storytelling. Generate exactly {num_scenes} scenes for a comic page based on the user's story prompt.
+
+PANEL LAYOUT INFORMATION:
+The page has {num_scenes} panels with the following characteristics:
+{chr(10).join(f"- {desc}" for desc in panel_descriptions)}
 
 IMPORTANT INSTRUCTIONS:
 1. Output ONLY a YAML list with exactly {num_scenes} items
 2. Each item must have exactly two fields:
    - caption: A detailed visual description of the scene (describe characters, clothing, location, action, expressions)
    - dialogue: Natural language description of what the character says/exclaims/shouts (can be empty string if no dialogue)
-3. For captions: Be very descriptive. Repeat character descriptions in each scene (appearance, clothes, etc.)
-4. For dialogue: Write it as a natural language action that will be added to the scene description
-   - Format: "The [character] says: [what they say]" or "The [character] exclaims: [what they exclaim]"
+
+3. **ADAPT EACH SCENE TO ITS PANEL TYPE:**
+   - ESTABLISHING panels: Describe the full environment, setting, atmosphere, time of day, location details
+   - ACTION panels: Focus on dynamic movement, motion lines, impact, energy, physical activity
+   - CLOSEUP panels: Describe facial features, eyes, expressions, emotions in extreme detail
+   - DIALOGUE panels: Focus on character interactions, body language during conversation
+   - REACTION panels: Emphasize emotional responses, facial expressions, body language
+   - DETAIL panels: Zoom in on specific objects, hands, symbols, or small but important elements
+   - TRANSITION panels: Show passage of time, change of location, or connecting moments
+   - SPLASH panels: Epic, dramatic, full-scene moments with maximum visual impact
+
+4. **ADAPT TO SHOT TYPE (CINEMATOGRAPHY):**
+   - EXTREME WIDE SHOT: Vast landscapes, tiny characters in massive environments, epic scale
+   - WIDE SHOT: Full scene with characters and environment, establishing context
+   - FULL SHOT: Entire character from head to toe, showing their full body and stance
+   - MEDIUM FULL SHOT: Character from knees up, showing most of body with some environment
+   - MEDIUM SHOT: Character from waist up, balanced between character and setting
+   - MEDIUM CLOSEUP: Head and shoulders, focusing on face while showing some context
+   - CLOSEUP: Face filling frame, detailed facial features and expressions
+   - EXTREME CLOSEUP: Tiny detail - just eyes, hands, mouth, or specific object filling frame
+
+5. **ADAPT TO CAMERA ANGLE:**
+   - EYE LEVEL: Neutral, straightforward angle - camera at character's eye level
+   - HIGH ANGLE: Camera looking down on subject - can make them seem vulnerable, small, or overwhelmed
+   - LOW ANGLE: Camera looking up at subject - makes them seem powerful, imposing, heroic
+   - OVERHEAD/BIRD'S EYE: Camera directly above looking down - shows spatial relationships, isolation
+   - DUTCH ANGLE/CANTED: Tilted camera - creates tension, disorientation, chaos, unease
+   - OVER THE SHOULDER (OTS): Camera behind one character looking at another - intimate conversation
+   - POV (Point of View): Camera as character's eyes - immersive, first-person perspective
+
+6. **ADAPT TO COMPOSITION:**
+   - WIDE/LANDSCAPE: Emphasize horizontal elements, panoramic views, sweeping scenes, breadth
+   - TALL/PORTRAIT: Emphasize vertical elements, full-body shots, top-to-bottom action, height
+   - SQUARE: Balanced composition, centered subjects, symmetrical arrangements
+
+7. **ADAPT TO FOCUS:**
+   - CHARACTER: Detailed character description (appearance, clothing, pose, expression)
+   - CHARACTERS (plural): Multiple people, their relationships, positioning, interactions
+   - ENVIRONMENT: Setting details, location, atmosphere, background elements, mood
+   - EVENT: What's happening, the action, the moment being captured, the incident
+   - EMOTION: Facial expression, body language, emotional state, feelings
+   - OBJECT: Detailed description of an important item, prop, symbol, or artifact
+   - ACTION: Movement, impact, dynamic poses, energy, motion
+
+8. **CONSIDER PANEL PROGRESSION:**
+   - You're creating panel X of {num_scenes} - consider where you are in the story flow
+   - Early panels (1-2/{num_scenes}): Establish setting and introduce characters
+   - Middle panels: Build action, develop conflict, show character reactions
+   - Later panels ({num_scenes-1}-{num_scenes}/{num_scenes}): Resolve the moment, provide reaction or cliffhanger
+
+9. For captions: Be VERY descriptive. Include shot type language like "wide shot of...", "close-up on...", "overhead view of...". Repeat character descriptions in each scene if needed.
+
+10. For dialogue: Write as natural language action: "The [character] says: [what they say]" or "The [character] exclaims: [what they exclaim]"
    - DO NOT include character names in the dialogue text itself
-   - Use verbs like: says, exclaims, shouts, whispers, asks, replies, thinks
-5. Keep continuity between scenes to tell a coherent story
-6. Make each scene visually distinct but connected to the narrative
+   - Use verbs like: says, exclaims, shouts, whispers, asks, replies, thinks, mutters, screams
+
+11. Keep continuity between scenes to tell a coherent story
+12. Make each scene visually distinct but connected to the narrative
 
 Example output format:
-- caption: "A young woman with long red hair wearing a blue detective coat stands in a dark alley, holding a magnifying glass up to examine mysterious glowing footprints on the wet pavement"
-  dialogue: "The detective exclaims: These tracks aren't human!"
-- caption: "The same red-haired woman in the blue coat backs away in shock as a massive shark fin emerges from a puddle in the alley, water splashing everywhere"
-  dialogue: "The detective shouts: OH NO, SHARKS IN THE CITY!"
-- caption: "The red-haired detective in blue coat runs down the alley, looking back over her shoulder at the shark fin pursuing her through the puddles"
-  dialogue: "The detective thinks to herself: I need to warn everyone!"
+- caption: "Extreme wide shot from high angle of a dark alley at night, rain pouring down heavily, neon signs casting red and blue reflections in vast puddles covering the ground, tall buildings looming menacingly on both sides creating a narrow canyon, a young woman with long red hair wearing a blue detective coat stands small in the center of the frame examining glowing footprints on the wet pavement with a magnifying glass, dramatic lighting from above"
+  dialogue: "The detective whispers to herself: These tracks... they're not human"
+- caption: "Extreme close-up at eye level of the detective's piercing green eyes widening in shock and fear, her pupils dilating rapidly, individual beads of rain clinging to her dark eyelashes, her face illuminated by an eerie pulsing blue glow from below, wrinkles forming on her forehead"
+  dialogue: ""
+- caption: "Full shot at low angle, the red-haired detective in the blue coat leaping backwards dynamically with motion blur streaks, her coat billowing dramatically, a massive jagged shark fin erupting violently from a puddle behind her, water exploding upward in huge spray with droplets frozen mid-air, her expression one of pure terror, arms flailing"
+  dialogue: "The detective shouts at the top of her lungs: OH NO! SHARKS IN THE CITY!"
 
 Generate exactly {num_scenes} scenes. Output ONLY the YAML list, no other text."""
 
@@ -300,64 +404,73 @@ pipe.load_lora_weights(
     "lightx2v/Qwen-Image-Lightning", weight_name="Qwen-Image-Lightning-8steps-V1.1.safetensors"
 )
 pipe.fuse_lora()
-#pipe.unload_lora_weights()
-
-#pipe.load_lora_weights("flymy-ai/qwen-image-realism-lora")
-#pipe.fuse_lora()
-#pipe.unload_lora_weights()
-
 
 # --- UI Constants and Helpers ---
 MAX_SEED = np.iinfo(np.int32).max
 
 def get_image_size_for_position(position_data, image_index, num_images, max_resolution=1024):
-    """Determines optimal image size based on its position in the layout.
-
+    """
+    Calculate EXACT image dimensions to match layout aspect ratio perfectly.
+    
+    This function calculates pixel dimensions that precisely match the aspect ratio
+    of the layout rectangle to ensure images fill their containers without floating.
+    
     Args:
-        position_data: Layout position data [x, y, width, height] in relative units
+        position_data: Layout position data [x, y, width, height] in relative units (0-1)
         image_index: Index of the current image (0-based)
         num_images: Total number of images in the layout
         max_resolution: Maximum resolution for any dimension (default 1024)
 
     Returns:
-        tuple: (width, height) optimized for the position's aspect ratio
+        tuple: (width, height) with exact aspect ratio matching the layout
     """
     if not position_data:
         return max_resolution, max_resolution  # Default square
 
     x_rel, y_rel, w_rel, h_rel = position_data
-    aspect_ratio = w_rel / h_rel if h_rel > 0 else 1.0
+    
+    # Calculate the EXACT aspect ratio from the layout rectangle
+    # This is crucial - we must match this aspect ratio precisely
+    layout_aspect_ratio = w_rel / h_rel if h_rel > 0 else 1.0
 
-    # Calculate dimensions maintaining aspect ratio
-    if aspect_ratio >= 1:  # Wider than tall
+    # Scale to max_resolution while maintaining EXACT aspect ratio
+    if layout_aspect_ratio >= 1:  # Wider than tall
         width = max_resolution
-        height = int(max_resolution / aspect_ratio)
-        # Ensure height is at least 384 for quality
-        if height < 384:
-            height = 384
-            width = int(384 * aspect_ratio)
+        height = max_resolution / layout_aspect_ratio
     else:  # Taller than wide
         height = max_resolution
-        width = int(max_resolution * aspect_ratio)
-        # Ensure width is at least 384 for quality
-        if width < 384:
-            width = 384
-            height = int(384 / aspect_ratio)
-
-    # Round to nearest 64 for better compatibility
-    width = (width // 64) * 64
-    height = (height // 64) * 64
-
-    # Ensure we don't exceed max_resolution after rounding
+        width = max_resolution * layout_aspect_ratio
+    
+    # Round to nearest 8 pixels for model compatibility
+    # Using 8px instead of 64px preserves aspect ratio much better
+    # Most diffusion models work well with multiples of 8
+    width = round(width / 8) * 8
+    height = round(height / 8) * 8
+    
+    # After rounding, ensure we maintain the aspect ratio as closely as possible
+    # and don't exceed max_resolution
     if width > max_resolution:
         width = max_resolution
+        height = round((max_resolution / layout_aspect_ratio) / 8) * 8
     if height > max_resolution:
         height = max_resolution
-
-    # Minimum size check (increased from 256 to 384 for better quality)
-    width = max(width, 384)
-    height = max(height, 384)
-
+        width = round((max_resolution * layout_aspect_ratio) / 8) * 8
+    
+    # Ensure minimum size of 256px (reduced from 384 for more flexibility)
+    # while maintaining the layout aspect ratio
+    min_size = 256
+    if width < min_size or height < min_size:
+        if layout_aspect_ratio >= 1:  # Wider image
+            width = max(min_size, width)
+            height = round((width / layout_aspect_ratio) / 8) * 8
+        else:  # Taller image
+            height = max(min_size, height)
+            width = round((height * layout_aspect_ratio) / 8) * 8
+    
+    # Final safety checks
+    width = max(min_size, min(int(width), max_resolution))
+    height = max(min_size, min(int(height), max_resolution))
+    
     return width, height
 
 def get_layout_position_for_image(layout_id, num_images, image_index):
@@ -391,7 +504,13 @@ def get_layout_position_for_image(layout_id, num_images, image_index):
             [0.666, 0.4, 0.283, 0.275], [0.666, 0.7, 0.283, 0.275]],
         6: [[0.05, 0.05, 0.425, 0.283], [0.525, 0.05, 0.425, 0.283],
             [0.05, 0.358, 0.425, 0.283], [0.525, 0.358, 0.425, 0.283],
-            [0.05, 0.666, 0.425, 0.283], [0.525, 0.666, 0.425, 0.283]]
+            [0.05, 0.666, 0.425, 0.283], [0.525, 0.666, 0.425, 0.283]],
+        7: [[0.28, 0.02, 0.44, 0.3], [0.02, 0.25, 0.3, 0.25], [0.68, 0.25, 0.3, 0.25],
+            [0.25, 0.35, 0.5, 0.3], [0.02, 0.52, 0.3, 0.25], [0.68, 0.52, 0.3, 0.25],
+            [0.28, 0.68, 0.44, 0.3]],
+        8: [[0.02, 0.02, 0.23, 0.47], [0.27, 0.02, 0.23, 0.47], [0.52, 0.02, 0.23, 0.47],
+            [0.77, 0.02, 0.21, 0.47], [0.02, 0.51, 0.23, 0.47], [0.27, 0.51, 0.23, 0.47],
+            [0.52, 0.51, 0.23, 0.47], [0.77, 0.51, 0.21, 0.47]]
     }
 
     positions = fallback_positions.get(num_images, fallback_positions[1])
@@ -522,26 +641,28 @@ def create_single_page_pdf(images: List[Image.Image], layout_id: str, num_images
         if num_images == 1:
             positions = [[0.02, 0.02, 0.96, 0.96]]
         elif num_images == 2:
-            # Horizontal split with gap
             positions = [[0.02, 0.02, 0.47, 0.96], [0.51, 0.02, 0.47, 0.96]]
         elif num_images == 3:
-            # Three horizontal panels with gaps
             positions = [[0.02, 0.2, 0.31, 0.6], [0.345, 0.2, 0.31, 0.6], [0.67, 0.2, 0.31, 0.6]]
         elif num_images == 4:
-            # 2x2 grid with gaps
             positions = [[0.02, 0.02, 0.47, 0.47], [0.51, 0.02, 0.47, 0.47],
                         [0.02, 0.51, 0.47, 0.47], [0.51, 0.51, 0.47, 0.47]]
         elif num_images == 5:
-            # Hero top with 4 small panels below
             positions = [[0.02, 0.02, 0.96, 0.44], [0.02, 0.48, 0.31, 0.5], [0.345, 0.48, 0.31, 0.5],
                         [0.67, 0.48, 0.31, 0.24], [0.67, 0.74, 0.31, 0.24]]
         elif num_images == 6:
-            # 2x3 grid with gaps
             positions = [[0.02, 0.02, 0.47, 0.31], [0.51, 0.02, 0.47, 0.31],
                         [0.02, 0.345, 0.47, 0.31], [0.51, 0.345, 0.47, 0.31],
                         [0.02, 0.67, 0.47, 0.31], [0.51, 0.67, 0.47, 0.31]]
+        elif num_images == 7:
+            positions = [[0.28, 0.02, 0.44, 0.3], [0.02, 0.25, 0.3, 0.25], [0.68, 0.25, 0.3, 0.25],
+                        [0.25, 0.35, 0.5, 0.3], [0.02, 0.52, 0.3, 0.25], [0.68, 0.52, 0.3, 0.25],
+                        [0.28, 0.68, 0.44, 0.3]]
+        elif num_images == 8:
+            positions = [[0.02, 0.02, 0.23, 0.47], [0.27, 0.02, 0.23, 0.47], [0.52, 0.02, 0.23, 0.47],
+                        [0.77, 0.02, 0.21, 0.47], [0.02, 0.51, 0.23, 0.47], [0.27, 0.51, 0.23, 0.47],
+                        [0.52, 0.51, 0.23, 0.47], [0.77, 0.51, 0.21, 0.47]]
         else:
-            # For more than 6, create a simple grid
             positions = [[0.02, 0.02, 0.96, 0.96]]
     else:
         positions = layout["positions"]
@@ -556,9 +677,6 @@ def create_single_page_pdf(images: List[Image.Image], layout_id: str, num_images
         # Add small padding between panels (1% of page dimensions)
         padding = 0.01
 
-        # Don't scale up - use the positions as defined in the layout
-        # This prevents overlapping when there are multiple images
-
         # Apply padding to prevent images from touching edges
         if x_rel < padding:
             x_rel = padding
@@ -576,38 +694,49 @@ def create_single_page_pdf(images: List[Image.Image], layout_id: str, num_images
         width = w_rel * page_width
         height = h_rel * page_height
 
-        # Calculate image aspect ratio and layout aspect ratio
+        # Calculate aspect ratios for comparison
         img_aspect = image.width / image.height
         layout_aspect = width / height
-
-        # Preserve aspect ratio while fitting in the allocated space
-        if img_aspect > layout_aspect:
-            # Image is wider than the layout space
-            new_height = width / img_aspect
-            y_offset = (height - new_height) / 2
+        aspect_diff = abs(img_aspect - layout_aspect) / layout_aspect
+        
+        # If aspect ratios match closely (within 2%), fill the space completely
+        # Otherwise, preserve aspect ratio to avoid distortion
+        if aspect_diff < 0.02:  # Less than 2% difference
+            # Aspect ratios match well - fill the space completely
             actual_width = width
-            actual_height = new_height
-            actual_x = x
-            actual_y = y + y_offset
-        else:
-            # Image is taller than the layout space
-            new_width = height * img_aspect
-            x_offset = (width - new_width) / 2
-            actual_width = new_width
             actual_height = height
-            actual_x = x + x_offset
+            actual_x = x
             actual_y = y
+        else:
+            # Significant aspect ratio difference - preserve it to avoid distortion
+            if img_aspect > layout_aspect:
+                # Image is wider than the layout space
+                new_height = width / img_aspect
+                y_offset = (height - new_height) / 2
+                actual_width = width
+                actual_height = new_height
+                actual_x = x
+                actual_y = y + y_offset
+            else:
+                # Image is taller than the layout space
+                new_width = height * img_aspect
+                x_offset = (width - new_width) / 2
+                actual_width = new_width
+                actual_height = height
+                actual_x = x + x_offset
+                actual_y = y
 
         # Convert PIL image to format suitable for ReportLab
         img_buffer = io.BytesIO()
-        # Save with good quality
         image.save(img_buffer, format='JPEG', quality=95)
         img_buffer.seek(0)
 
-        # Draw the image on the PDF preserving aspect ratio
+        # Draw the image on the PDF
+        # When aspect ratios match (aspect_diff < 0.02), we fill completely
+        # Otherwise we preserve aspect ratio to prevent distortion
         pdf.drawImage(ImageReader(img_buffer), actual_x, actual_y,
                      width=actual_width, height=actual_height,
-                     preserveAspectRatio=True, mask='auto')
+                     preserveAspectRatio=(aspect_diff >= 0.02), mask='auto')
 
     # Save the PDF
     pdf.save()
@@ -655,7 +784,7 @@ def create_multi_page_pdf(session_manager: SessionManager) -> str:
     return str(pdf_path)
 
 # --- Main Inference Function (with session support) ---
-@spaces.GPU(duration=180)  # Increased duration for up to 6 images
+@spaces.GPU(duration=240)  # Increased duration for up to 8 images
 def infer_page(
     prompt,
     guidance_scale=1.0,
@@ -677,8 +806,9 @@ def infer_page(
         num_inference_steps (int): The number of denoising steps.
         style_preset (str): The key of the style preset to apply.
         custom_style_text (str): Custom style text when 'no_style' is selected.
-        num_images (int): Number of images to generate (1-6).
+        num_images (int): Number of images to generate (1-8).
         layout (str): The layout ID for arranging images in the PDF.
+        max_resolution: Maximum resolution for any dimension.
         session_state: Current session state dictionary.
         progress (gr.Progress): A Gradio Progress object to track generation.
 
@@ -702,9 +832,20 @@ def infer_page(
     generated_images = []
     used_seeds = []
 
-    # Generate story scenes
+    # Get panel metadata for this layout
+    panel_metadata = get_layout_metadata(layout, int(num_images))
+    
+    # Debug: print metadata
+    print(f"\n=== LAYOUT METADATA for {layout} with {num_images} images ===")
+    for i, meta in enumerate(panel_metadata):
+        shot_type = meta.get('shot_type', 'medium').replace('_', ' ').title()
+        camera_angle = meta.get('camera_angle', 'eye_level').replace('_', ' ').title()
+        print(f"Panel {i+1}/{num_images}: {meta['panel_type']} | Focus: {meta['focus']} | {meta['composition']} | {shot_type} @ {camera_angle}")
+    print("=" * 80 + "\n")
+
+    # Generate story scenes with metadata
     progress(0, f"Generating story with {num_images} scenes...")
-    scenes = generate_story_scenes(prompt, int(num_images), style_preset)
+    scenes = generate_story_scenes(prompt, int(num_images), style_preset, panel_metadata)
 
     # Generate the requested number of images
     for i in range(int(num_images)):
@@ -718,6 +859,21 @@ def infer_page(
         # Use scene caption and dialogue for this image
         scene_prompt = scenes[i]['caption']
         scene_dialogue = scenes[i]['dialogue']
+        
+        # Get metadata for this panel
+        panel_meta = panel_metadata[i] if i < len(panel_metadata) else {}
+        
+        # Debug output
+        print(f"\n--- Generating Panel {i+1}/{num_images} ---")
+        print(f"Type: {panel_meta.get('panel_type', 'unknown')}")
+        print(f"Focus: {panel_meta.get('focus', 'unknown')}")
+        print(f"Composition: {panel_meta.get('composition', 'unknown')}")
+        shot_display = panel_meta.get('shot_type', 'medium').replace('_', ' ').title()
+        angle_display = panel_meta.get('camera_angle', 'eye_level').replace('_', ' ').title()
+        print(f"Shot: {shot_display} at {angle_display} angle")
+        print(f"Caption: {scene_prompt[:100]}..." if len(scene_prompt) > 100 else f"Caption: {scene_prompt}")
+        print(f"Dialogue: {scene_dialogue if scene_dialogue else '(none)'}")
+        print("-" * 80)
 
         # Generate single image with automatic aspect ratio
         image, used_seed = infer_single_auto(
@@ -767,10 +923,10 @@ def infer_single_auto(
     num_images=1,
     guidance_scale=1.0,
     num_inference_steps=8,
-    dialogue="",  # New parameter for dialogue
+    dialogue="",
     style_preset="no_style",
     custom_style_text="",
-    max_resolution=1024,  # New parameter for max resolution
+    max_resolution=1024,
 ):
     """
     Generates an image with automatically determined aspect ratio based on layout position.
@@ -780,7 +936,15 @@ def infer_single_auto(
 
     # Automatically determine image size based on position with custom max resolution
     width, height = get_image_size_for_position(position_data, image_index, num_images, max_resolution)
-
+    
+    # Calculate layout aspect ratio for verification
+    if position_data:
+        x_rel, y_rel, w_rel, h_rel = position_data
+        layout_aspect = w_rel / h_rel if h_rel > 0 else 1.0
+        image_aspect = width / height
+        aspect_error = abs(image_aspect - layout_aspect) / layout_aspect * 100
+        print(f"Image {image_index + 1}/{num_images}: Layout aspect={layout_aspect:.4f}, Image aspect={image_aspect:.4f}, Error={aspect_error:.2f}%")
+    
     # Set up the generator for reproducibility
     generator = torch.Generator(device="cuda").manual_seed(seed)
 
@@ -793,7 +957,6 @@ def infer_single_auto(
 
     # Add dialogue to the prompt if present
     if dialogue and dialogue.strip():
-        # Simply append the dialogue as it's already properly formatted from the LLM
         styled_prompt = f"{styled_prompt}. {dialogue.strip()}"
 
     # Use style negative prompt if available, otherwise default
@@ -811,12 +974,11 @@ def infer_single_auto(
         height=height,
         num_inference_steps=num_inference_steps,
         generator=generator,
-        true_cfg_scale=guidance_scale, # Use true_cfg_scale for this model
+        true_cfg_scale=guidance_scale,
     ).images[0]
 
     # Convert to grayscale if using manga_no_color style
     if style_preset == "manga_no_color":
-        # Convert to grayscale while preserving quality
         image = image.convert('L').convert('RGB')
 
     return image, seed
@@ -980,10 +1142,10 @@ with gr.Blocks(css=css) as demo:
                 num_images_slider = gr.Slider(
                     label="Images per page",
                     minimum=1,
-                    maximum=6,
+                    maximum=8,
                     step=1,
                     value=1,
-                    info="Number of images to generate for the PDF (1-6)"
+                    info="Number of images to generate for the PDF (1-8)"
                 )
 
                 # Page layout dropdown
@@ -1032,17 +1194,19 @@ with gr.Blocks(css=css) as demo:
                 with gr.Accordion("Examples", open=True):
                     styled_examples = [
                         ["A capybara wearing a suit holding a sign that reads Hello World", "no_style", "", 1],
-                        ["sharks raining down on san francisco", "anime", "", 2],
-                        ["A beautiful landscape with mountains and a lake", "watercolor", "", 3],
-                        ["A knight fighting a dragon", "medieval", "", 4],
-                        ["Space battle with laser beams", "sci-fi", "", 5],
-                        ["Detective investigating a mystery", "noir", "", 6],
+                        ["Two astronauts discovering alien technology on Mars", "flying_saucer", "", 2],
+                        ["Detective solving a mystery in a noir city", "manga_no_color", "", 3],
+                        ["Epic battle between robots and monsters", "american_comic_90", "", 4],
+                        ["Journey through an enchanted forest", "franco_belgian", "", 5],
+                        ["Space station crew dealing with an emergency", "render", "", 6],
+                        ["Medieval knights on a quest", "medieval", "", 7],
+                        ["Superhero team assembling for final battle", "american_comic_90", "", 8],
                     ]
 
                     gr.Examples(
                         examples=styled_examples,
                         inputs=[prompt, style_preset, custom_style_text, num_images_slider],
-                        outputs=None,  # Don't show outputs for examples
+                        outputs=None,
                         fn=None,
                         cache_examples=False
                     )

page_layouts.yaml

@@ -1,245 +1,1442 @@
 # Page layouts configuration for multi-image PDF generation
 # Each layout defines how images are arranged on a page
 # Positions are defined as (x, y, width, height) in relative units (0-1)
+# Coordinate system: (0,0) is top-left, X increases right, Y increases down
+#
+# Panel metadata helps guide image generation:
+# - panel_type: establishing/action/closeup/dialogue/reaction/transition/detail/splash
+# - focus: environment/character/characters/action/emotion/object/event
+# - composition: wide/tall/square/portrait/landscape
+# - shot_type: extreme_wide/wide/full/medium_full/medium/medium_closeup/closeup/extreme_closeup
+# - camera_angle: eye_level/high_angle/low_angle/overhead/dutch_angle/over_shoulder/pov
 
 layouts:
   1_image:
-    - id: "full_page"
-      label: "Full Page"
-      description: "Single image covering the full page"
+    - id: "full_bleed"
+      label: "Full Bleed"
+      description: "Single image filling entire page"
       positions:
-        - [0.02, 0.02, 0.96, 0.96]  # x, y, width, height (2% margins)
+        - [0.0, 0.0, 1.0, 1.0]
+      metadata:
+        - {panel_type: "splash", focus: "event", composition: "square", shot_type: "full", camera_angle: "eye_level"}
+
+    - id: "classic_frame"
+      label: "Classic Frame"
+      description: "Single image with traditional margins"
+      positions:
+        - [0.05, 0.05, 0.9, 0.9]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "square", shot_type: "wide", camera_angle: "high_angle"}
+
+    - id: "portrait_focus"
+      label: "Portrait Focus"
+      description: "Vertical emphasis for character shots"
+      positions:
+        - [0.15, 0.02, 0.7, 0.96]
+      metadata:
+        - {panel_type: "closeup", focus: "character", composition: "portrait", shot_type: "medium_closeup", camera_angle: "eye_level"}
+
+    - id: "cinematic_wide"
+      label: "Cinematic Wide"
+      description: "Wide letterbox format"
+      positions:
+        - [0.02, 0.25, 0.96, 0.5]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide", shot_type: "extreme_wide", camera_angle: "eye_level"}
+
+    - id: "floating_center"
+      label: "Floating Center"
+      description: "Centered with breathing room"
+      positions:
+        - [0.1, 0.15, 0.8, 0.7]
+      metadata:
+        - {panel_type: "dialogue", focus: "character", composition: "square", shot_type: "medium", camera_angle: "eye_level"}
 
   2_images:
     - id: "horizontal_split"
-      label: "Layout A - Horizontal Split"
-      description: "Two images side by side"
+      label: "Even Split"
+      description: "Two equal panels side by side"
       positions:
-        - [0.02, 0.02, 0.47, 0.96]  # Left image
-        - [0.51, 0.02, 0.47, 0.96]  # Right image
+        - [0.02, 0.02, 0.47, 0.96]
+        - [0.51, 0.02, 0.47, 0.96]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "portrait", shot_type: "wide", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "character", composition: "portrait", shot_type: "full", camera_angle: "low_angle"}
 
     - id: "vertical_split"
-      label: "Layout B - Vertical Split"
-      description: "Two images stacked vertically"
+      label: "Top & Bottom"
+      description: "Stacked panels"
       positions:
-        - [0.02, 0.02, 0.96, 0.47]  # Top image
-        - [0.02, 0.51, 0.96, 0.47]  # Bottom image
+        - [0.02, 0.02, 0.96, 0.47]
+        - [0.02, 0.51, 0.96, 0.47]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide", shot_type: "extreme_wide", camera_angle: "high_angle"}
+        - {panel_type: "action", focus: "event", composition: "wide", shot_type: "full", camera_angle: "eye_level"}
 
-    - id: "dominant_left"
-      label: "Layout C - Large Left"
-      description: "Large image on left, small on right"
+    - id: "hero_sidekick"
+      label: "Hero & Sidekick"
+      description: "Large main panel with small detail"
       positions:
-        - [0.02, 0.02, 0.65, 0.96]  # Large left image
-        - [0.69, 0.2, 0.29, 0.6]  # Small right image
+        - [0.02, 0.02, 0.65, 0.96]
+        - [0.69, 0.25, 0.29, 0.5]
+      metadata:
+        - {panel_type: "action", focus: "character", composition: "portrait", shot_type: "full", camera_angle: "eye_level"}
+        - {panel_type: "reaction", focus: "emotion", composition: "portrait", shot_type: "closeup", camera_angle: "eye_level"}
 
-    - id: "dominant_top"
-      label: "Layout D - Large Top"
-      description: "Large image on top, small on bottom"
+    - id: "before_after"
+      label: "Before & After"
+      description: "Cause and effect layout"
       positions:
-        - [0.02, 0.02, 0.96, 0.65]  # Large top image
-        - [0.2, 0.69, 0.6, 0.29]  # Small bottom image
+        - [0.02, 0.02, 0.96, 0.44]
+        - [0.02, 0.48, 0.96, 0.5]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide", shot_type: "wide", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "wide", shot_type: "medium_full", camera_angle: "dutch_angle"}
 
-  3_images:
-    - id: "grid_horizontal"
-      label: "Layout A - Horizontal Strip"
-      description: "Three images in a row"
+    - id: "diagonal_tension"
+      label: "Diagonal Tension"
+      description: "Overlapping dynamic panels"
       positions:
-        - [0.02, 0.2, 0.31, 0.6]  # Left
-        - [0.345, 0.2, 0.31, 0.6]  # Middle
-        - [0.67, 0.2, 0.31, 0.6]  # Right
+        - [0.02, 0.02, 0.6, 0.6]
+        - [0.38, 0.38, 0.6, 0.6]
+      metadata:
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "medium", camera_angle: "high_angle"}
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "medium", camera_angle: "low_angle"}
 
-    - id: "grid_vertical"
-      label: "Layout B - Vertical Strip"
-      description: "Three images in a column"
+  3_images:
+    - id: "triptych"
+      label: "Triptych"
+      description: "Three equal vertical panels"
       positions:
-        - [0.2, 0.02, 0.6, 0.31]  # Top
-        - [0.2, 0.345, 0.6, 0.31]  # Middle
-        - [0.2, 0.67, 0.6, 0.31]  # Bottom
+        - [0.02, 0.02, 0.31, 0.96]
+        - [0.345, 0.02, 0.31, 0.96]
+        - [0.67, 0.02, 0.31, 0.96]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "portrait", shot_type: "wide", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "character", composition: "portrait", shot_type: "full", camera_angle: "eye_level"}
+        - {panel_type: "reaction", focus: "emotion", composition: "portrait", shot_type: "medium_closeup", camera_angle: "eye_level"}
 
     - id: "hero_top"
-      label: "Layout C - Hero Top"
-      description: "Large image on top, two small below"
+      label: "Establishing Shot"
+      description: "Large top panel with details below"
+      positions:
+        - [0.02, 0.02, 0.96, 0.5]
+        - [0.02, 0.54, 0.47, 0.44]
+        - [0.51, 0.54, 0.47, 0.44]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide", shot_type: "extreme_wide", camera_angle: "high_angle"}
+        - {panel_type: "action", focus: "character", composition: "square", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "reaction", focus: "emotion", composition: "square", shot_type: "closeup", camera_angle: "eye_level"}
+
+    - id: "l_shape"
+      label: "L-Shape Flow"
+      description: "Reading flow in L pattern"
+      positions:
+        - [0.02, 0.02, 0.47, 0.47]
+        - [0.51, 0.02, 0.47, 0.47]
+        - [0.02, 0.51, 0.96, 0.47]
+      metadata:
+        - {panel_type: "dialogue", focus: "character", composition: "square", shot_type: "medium_closeup", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "square", shot_type: "medium_closeup", camera_angle: "over_shoulder"}
+        - {panel_type: "action", focus: "event", composition: "wide", shot_type: "full", camera_angle: "eye_level"}
+
+    - id: "spotlight"
+      label: "Spotlight"
+      description: "Central focus with side panels"
       positions:
-        - [0.02, 0.02, 0.96, 0.55]  # Large top
-        - [0.02, 0.59, 0.47, 0.39]  # Bottom left
-        - [0.51, 0.59, 0.47, 0.39]  # Bottom right
+        - [0.02, 0.15, 0.28, 0.7]
+        - [0.32, 0.02, 0.36, 0.96]
+        - [0.7, 0.15, 0.28, 0.7]
+      metadata:
+        - {panel_type: "reaction", focus: "character", composition: "portrait", shot_type: "medium_closeup", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "character", composition: "portrait", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "reaction", focus: "character", composition: "portrait", shot_type: "closeup", camera_angle: "eye_level"}
 
-    - id: "hero_left"
-      label: "Layout D - Hero Left"
-      description: "Large image on left, two small on right"
+    - id: "vertical_flow"
+      label: "Vertical Flow"
+      description: "Three stacked panels for sequential action"
       positions:
-        - [0.02, 0.02, 0.55, 0.96]  # Large left
-        - [0.59, 0.02, 0.39, 0.47]  # Top right
-        - [0.59, 0.51, 0.39, 0.47]  # Bottom right
+        - [0.02, 0.02, 0.96, 0.31]
+        - [0.02, 0.345, 0.96, 0.31]
+        - [0.02, 0.67, 0.96, 0.31]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide", shot_type: "wide", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "wide", shot_type: "medium_full", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "wide", shot_type: "medium", camera_angle: "dutch_angle"}
 
-    - id: "diagonal"
-      label: "Layout E - Diagonal"
-      description: "Diagonal arrangement"
+    - id: "manga_action"
+      label: "Manga Action"
+      description: "Dynamic manga-style layout"
       positions:
-        - [0.05, 0.05, 0.4, 0.4]  # Top left
-        - [0.3, 0.3, 0.4, 0.4]  # Center
-        - [0.55, 0.55, 0.4, 0.4]  # Bottom right
+        - [0.52, 0.02, 0.46, 0.45]
+        - [0.02, 0.02, 0.48, 0.65]
+        - [0.02, 0.69, 0.96, 0.29]
+      metadata:
+        - {panel_type: "reaction", focus: "emotion", composition: "square", shot_type: "closeup", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "character", composition: "portrait", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "event", composition: "wide", shot_type: "wide", camera_angle: "overhead"}
 
   4_images:
     - id: "grid_2x2"
-      label: "Layout A - 2x2 Grid"
-      description: "Four equal images in a grid"
+      label: "Classic Grid"
+      description: "Traditional 2x2 layout"
+      positions:
+        - [0.02, 0.02, 0.47, 0.47]
+        - [0.51, 0.02, 0.47, 0.47]
+        - [0.02, 0.51, 0.47, 0.47]
+        - [0.51, 0.51, 0.47, 0.47]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "square", shot_type: "wide", camera_angle: "high_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "square", shot_type: "medium_closeup", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "reaction", focus: "emotion", composition: "square", shot_type: "closeup", camera_angle: "eye_level"}
+
+    - id: "widescreen"
+      label: "Widescreen Strips"
+      description: "Four cinematic horizontal strips"
+      positions:
+        - [0.02, 0.02, 0.96, 0.23]
+        - [0.02, 0.27, 0.96, 0.23]
+        - [0.02, 0.52, 0.96, 0.23]
+        - [0.02, 0.77, 0.96, 0.21]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide", shot_type: "extreme_wide", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "characters", composition: "wide", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "wide", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "reaction", focus: "emotion", composition: "wide", shot_type: "medium_closeup", camera_angle: "eye_level"}
+
+    - id: "hero_cluster"
+      label: "Hero with Cluster"
+      description: "Large panel with three supporting"
+      positions:
+        - [0.02, 0.02, 0.6, 0.63]
+        - [0.64, 0.02, 0.34, 0.3]
+        - [0.64, 0.34, 0.34, 0.31]
+        - [0.02, 0.67, 0.96, 0.31]
+      metadata:
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "detail", focus: "object", composition: "landscape", shot_type: "extreme_closeup", camera_angle: "eye_level"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape", shot_type: "closeup", camera_angle: "eye_level"}
+        - {panel_type: "transition", focus: "environment", composition: "wide", shot_type: "wide", camera_angle: "eye_level"}
+
+    - id: "comic_strip"
+      label: "Comic Strip"
+      description: "Newspaper strip style"
+      positions:
+        - [0.02, 0.3, 0.23, 0.4]
+        - [0.27, 0.3, 0.23, 0.4]
+        - [0.52, 0.3, 0.23, 0.4]
+        - [0.77, 0.3, 0.21, 0.4]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "portrait", shot_type: "full", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "characters", composition: "portrait", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "portrait", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "reaction", focus: "emotion", composition: "portrait", shot_type: "closeup", camera_angle: "eye_level"}
+
+    - id: "z_pattern"
+      label: "Z-Pattern"
+      description: "Natural reading flow in Z shape"
+      positions:
+        - [0.02, 0.02, 0.47, 0.35]
+        - [0.51, 0.02, 0.47, 0.35]
+        - [0.02, 0.39, 0.47, 0.59]
+        - [0.51, 0.39, 0.47, 0.59]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape", shot_type: "wide", camera_angle: "high_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "character", composition: "portrait", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "event", composition: "portrait", shot_type: "medium_full", camera_angle: "dutch_angle"}
+
+    - id: "explosion"
+      label: "Explosion"
+      description: "Central impact with surrounding panels"
+      positions:
+        - [0.02, 0.02, 0.35, 0.35]
+        - [0.63, 0.02, 0.35, 0.35]
+        - [0.27, 0.27, 0.46, 0.46]
+        - [0.02, 0.63, 0.96, 0.35]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "square", shot_type: "wide", camera_angle: "eye_level"}
+        - {panel_type: "detail", focus: "object", composition: "square", shot_type: "extreme_closeup", camera_angle: "overhead"}
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "medium", camera_angle: "low_angle"}
+        - {panel_type: "reaction", focus: "characters", composition: "wide", shot_type: "medium_full", camera_angle: "eye_level"}
+
+  5_images:
+    - id: "hero_banner"
+      label: "Hero Banner"
+      description: "Wide establishing shot with four panels below"
+      positions:
+        - [0.02, 0.02, 0.96, 0.38]
+        - [0.02, 0.42, 0.47, 0.28]
+        - [0.51, 0.42, 0.47, 0.28]
+        - [0.02, 0.72, 0.47, 0.26]
+        - [0.51, 0.72, 0.47, 0.26]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide", shot_type: "extreme_wide", camera_angle: "high_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "over_shoulder"}
+        - {panel_type: "action", focus: "event", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape", shot_type: "closeup", camera_angle: "eye_level"}
+
+    - id: "manga_vertical"
+      label: "Manga Vertical"
+      description: "Japanese right-to-left vertical flow"
+      positions:
+        - [0.52, 0.02, 0.46, 0.32]
+        - [0.02, 0.02, 0.48, 0.32]
+        - [0.52, 0.36, 0.46, 0.3]
+        - [0.02, 0.36, 0.48, 0.3]
+        - [0.02, 0.68, 0.96, 0.3]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape", shot_type: "wide", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "character", composition: "landscape", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape", shot_type: "closeup", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "wide", shot_type: "full", camera_angle: "overhead"}
+
+    - id: "pyramid"
+      label: "Pyramid"
+      description: "Building tension from top to bottom"
+      positions:
+        - [0.25, 0.02, 0.5, 0.25]
+        - [0.02, 0.29, 0.47, 0.3]
+        - [0.51, 0.29, 0.47, 0.3]
+        - [0.02, 0.61, 0.31, 0.37]
+        - [0.67, 0.61, 0.31, 0.37]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape", shot_type: "wide", camera_angle: "high_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "over_shoulder"}
+        - {panel_type: "action", focus: "event", composition: "portrait", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "event", composition: "portrait", shot_type: "medium", camera_angle: "dutch_angle"}
+
+    - id: "spotlight_drama"
+      label: "Spotlight Drama"
+      description: "Central focus with corner details"
+      positions:
+        - [0.02, 0.02, 0.35, 0.35]
+        - [0.63, 0.02, 0.35, 0.35]
+        - [0.22, 0.22, 0.56, 0.56]
+        - [0.02, 0.63, 0.35, 0.35]
+        - [0.63, 0.63, 0.35, 0.35]
+      metadata:
+        - {panel_type: "detail", focus: "object", composition: "square", shot_type: "extreme_closeup", camera_angle: "overhead"}
+        - {panel_type: "detail", focus: "object", composition: "square", shot_type: "extreme_closeup", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "character", composition: "square", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "reaction", focus: "emotion", composition: "square", shot_type: "closeup", camera_angle: "low_angle"}
+        - {panel_type: "reaction", focus: "emotion", composition: "square", shot_type: "closeup", camera_angle: "high_angle"}
+
+    - id: "euro_bd"
+      label: "Euro BD Classic"
+      description: "Franco-Belgian structured layout"
+      positions:
+        - [0.02, 0.02, 0.47, 0.29]
+        - [0.51, 0.02, 0.47, 0.29]
+        - [0.02, 0.33, 0.96, 0.31]
+        - [0.02, 0.66, 0.47, 0.32]
+        - [0.51, 0.66, 0.47, 0.32]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape", shot_type: "wide", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "wide", shot_type: "full", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "characters", composition: "landscape", shot_type: "medium", camera_angle: "over_shoulder"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape", shot_type: "medium_closeup", camera_angle: "eye_level"}
+
+    - id: "action_burst"
+      label: "Action Burst"
+      description: "Dynamic superhero action layout"
+      positions:
+        - [0.02, 0.02, 0.55, 0.55]
+        - [0.59, 0.02, 0.39, 0.26]
+        - [0.59, 0.3, 0.39, 0.27]
+        - [0.02, 0.59, 0.47, 0.39]
+        - [0.51, 0.59, 0.47, 0.39]
+      metadata:
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "detail", focus: "object", composition: "landscape", shot_type: "extreme_closeup", camera_angle: "eye_level"}
+        - {panel_type: "closeup", focus: "emotion", composition: "landscape", shot_type: "closeup", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "character", composition: "landscape", shot_type: "medium_full", camera_angle: "dutch_angle"}
+        - {panel_type: "reaction", focus: "characters", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+
+  6_images:
+    - id: "classic_grid"
+      label: "Classic 2x3 Grid"
+      description: "Traditional American comic layout"
+      positions:
+        - [0.02, 0.02, 0.47, 0.31]
+        - [0.51, 0.02, 0.47, 0.31]
+        - [0.02, 0.345, 0.47, 0.31]
+        - [0.51, 0.345, 0.47, 0.31]
+        - [0.02, 0.67, 0.47, 0.31]
+        - [0.51, 0.67, 0.47, 0.31]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape", shot_type: "wide", camera_angle: "high_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "over_shoulder"}
+        - {panel_type: "action", focus: "event", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "landscape", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape", shot_type: "closeup", camera_angle: "eye_level"}
+
+    - id: "hero_surround"
+      label: "Hero Surrounded"
+      description: "Large central panel with five around it"
       positions:
-        - [0.02, 0.02, 0.47, 0.47]  # Top left
-        - [0.51, 0.02, 0.47, 0.47]  # Top right
-        - [0.02, 0.51, 0.47, 0.47]  # Bottom left
-        - [0.51, 0.51, 0.47, 0.47]  # Bottom right
+        - [0.02, 0.02, 0.31, 0.28]
+        - [0.67, 0.02, 0.31, 0.28]
+        - [0.02, 0.7, 0.31, 0.28]
+        - [0.67, 0.7, 0.31, 0.28]
+        - [0.25, 0.25, 0.5, 0.5]
+        - [0.35, 0.35, 0.63, 0.33]
+      metadata:
+        - {panel_type: "detail", focus: "object", composition: "square", shot_type: "extreme_closeup", camera_angle: "overhead"}
+        - {panel_type: "detail", focus: "object", composition: "square", shot_type: "extreme_closeup", camera_angle: "eye_level"}
+        - {panel_type: "detail", focus: "object", composition: "square", shot_type: "closeup", camera_angle: "low_angle"}
+        - {panel_type: "detail", focus: "character", composition: "square", shot_type: "closeup", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "character", composition: "square", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "event", composition: "landscape", shot_type: "medium", camera_angle: "dutch_angle"}
 
-    - id: "strip_horizontal"
-      label: "Layout B - Horizontal Strip"
-      description: "Four images in a row"
+    - id: "staircase"
+      label: "Staircase"
+      description: "Diagonal reading flow"
       positions:
-        - [0.05, 0.3, 0.2125, 0.4]  # First
-        - [0.2875, 0.3, 0.2125, 0.4]  # Second
-        - [0.525, 0.3, 0.2125, 0.4]  # Third
-        - [0.7625, 0.3, 0.2125, 0.4]  # Fourth
+        - [0.02, 0.02, 0.45, 0.3]
+        - [0.49, 0.02, 0.49, 0.3]
+        - [0.02, 0.34, 0.45, 0.3]
+        - [0.49, 0.34, 0.49, 0.3]
+        - [0.02, 0.66, 0.45, 0.32]
+        - [0.49, 0.66, 0.49, 0.32]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape", shot_type: "wide", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "over_shoulder"}
+        - {panel_type: "action", focus: "event", composition: "landscape", shot_type: "medium_full", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "character", composition: "landscape", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape", shot_type: "closeup", camera_angle: "eye_level"}
 
-    - id: "strip_vertical"
-      label: "Layout C - Vertical Strip"
-      description: "Four images in a column"
+    - id: "splash_detail"
+      label: "Splash with Details"
+      description: "Full-page moment with detail insets"
       positions:
-        - [0.3, 0.05, 0.4, 0.2125]  # First
-        - [0.3, 0.2875, 0.4, 0.2125]  # Second
-        - [0.3, 0.525, 0.4, 0.2125]  # Third
-        - [0.3, 0.7625, 0.4, 0.2125]  # Fourth
+        - [0.05, 0.05, 0.4, 0.4]
+        - [0.55, 0.05, 0.4, 0.4]
+        - [0.05, 0.55, 0.4, 0.4]
+        - [0.55, 0.55, 0.4, 0.4]
+        - [0.25, 0.25, 0.5, 0.5]
+        - [0.35, 0.35, 0.3, 0.3]
+      metadata:
+        - {panel_type: "detail", focus: "environment", composition: "square", shot_type: "closeup", camera_angle: "eye_level"}
+        - {panel_type: "detail", focus: "object", composition: "square", shot_type: "extreme_closeup", camera_angle: "overhead"}
+        - {panel_type: "detail", focus: "object", composition: "square", shot_type: "closeup", camera_angle: "low_angle"}
+        - {panel_type: "detail", focus: "character", composition: "square", shot_type: "closeup", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "closeup", focus: "emotion", composition: "square", shot_type: "extreme_closeup", camera_angle: "eye_level"}
 
-    - id: "hero_with_strip"
-      label: "Layout D - Hero with Strip"
-      description: "One large image with three small ones"
+    - id: "manga_4koma_plus"
+      label: "Manga 4-Koma Plus"
+      description: "Japanese 4-panel with header/footer"
       positions:
-        - [0.05, 0.05, 0.6, 0.6]  # Large main
-        - [0.7, 0.05, 0.25, 0.283]  # Small top
-        - [0.7, 0.358, 0.25, 0.283]  # Small middle
-        - [0.7, 0.666, 0.25, 0.283]  # Small bottom
+        - [0.02, 0.02, 0.96, 0.15]
+        - [0.02, 0.19, 0.47, 0.25]
+        - [0.51, 0.19, 0.47, 0.25]
+        - [0.02, 0.46, 0.47, 0.25]
+        - [0.51, 0.46, 0.47, 0.25]
+        - [0.02, 0.73, 0.96, 0.25]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide", shot_type: "extreme_wide", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium", camera_angle: "over_shoulder"}
+        - {panel_type: "action", focus: "event", composition: "landscape", shot_type: "medium_full", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "landscape", shot_type: "full", camera_angle: "dutch_angle"}
+        - {panel_type: "reaction", focus: "emotion", composition: "wide", shot_type: "medium_closeup", camera_angle: "eye_level"}
+
+    - id: "tension_build"
+      label: "Tension Builder"
+      description: "Progressive revelation layout"
+      positions:
+        - [0.02, 0.02, 0.96, 0.22]
+        - [0.02, 0.26, 0.47, 0.22]
+        - [0.51, 0.26, 0.47, 0.22]
+        - [0.02, 0.5, 0.31, 0.48]
+        - [0.345, 0.5, 0.31, 0.48]
+        - [0.67, 0.5, 0.31, 0.48]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide", shot_type: "wide", camera_angle: "high_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "over_shoulder"}
+        - {panel_type: "action", focus: "character", composition: "portrait", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "character", composition: "portrait", shot_type: "medium_full", camera_angle: "dutch_angle"}
+        - {panel_type: "closeup", focus: "emotion", composition: "portrait", shot_type: "extreme_closeup", camera_angle: "eye_level"}
+
+  7_images:
+    - id: "hero_hexagon"
+      label: "Hero Hexagon"
+      description: "Central focus with six surrounding"
+      positions:
+        - [0.28, 0.02, 0.44, 0.3]
+        - [0.02, 0.25, 0.3, 0.25]
+        - [0.68, 0.25, 0.3, 0.25]
+        - [0.25, 0.35, 0.5, 0.3]
+        - [0.02, 0.52, 0.3, 0.25]
+        - [0.68, 0.52, 0.3, 0.25]
+        - [0.28, 0.68, 0.44, 0.3]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape", shot_type: "wide", camera_angle: "high_angle"}
+        - {panel_type: "detail", focus: "object", composition: "landscape", shot_type: "closeup", camera_angle: "eye_level"}
+        - {panel_type: "detail", focus: "object", composition: "landscape", shot_type: "extreme_closeup", camera_angle: "overhead"}
+        - {panel_type: "action", focus: "character", composition: "landscape", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "over_shoulder"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape", shot_type: "closeup", camera_angle: "eye_level"}
+
+    - id: "narrative_flow"
+      label: "Narrative Flow"
+      description: "Story progression with varied sizes"
+      positions:
+        - [0.02, 0.02, 0.47, 0.28]
+        - [0.51, 0.02, 0.47, 0.28]
+        - [0.02, 0.32, 0.96, 0.24]
+        - [0.02, 0.58, 0.31, 0.4]
+        - [0.345, 0.58, 0.31, 0.4]
+        - [0.67, 0.58, 0.31, 0.2]
+        - [0.67, 0.8, 0.31, 0.18]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape", shot_type: "wide", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "wide", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "character", composition: "portrait", shot_type: "full", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "character", composition: "portrait", shot_type: "medium_full", camera_angle: "dutch_angle"}
+        - {panel_type: "closeup", focus: "emotion", composition: "portrait", shot_type: "closeup", camera_angle: "low_angle"}
+        - {panel_type: "detail", focus: "object", composition: "portrait", shot_type: "extreme_closeup", camera_angle: "overhead"}
+
+    - id: "double_spread"
+      label: "Double Feature"
+      description: "Two hero panels with details"
+      positions:
+        - [0.02, 0.02, 0.47, 0.45]
+        - [0.51, 0.02, 0.47, 0.45]
+        - [0.02, 0.49, 0.31, 0.24]
+        - [0.345, 0.49, 0.31, 0.24]
+        - [0.67, 0.49, 0.31, 0.24]
+        - [0.02, 0.75, 0.47, 0.23]
+        - [0.51, 0.75, 0.47, 0.23]
+      metadata:
+        - {panel_type: "action", focus: "event", composition: "portrait", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "event", composition: "portrait", shot_type: "full", camera_angle: "high_angle"}
+        - {panel_type: "detail", focus: "object", composition: "landscape", shot_type: "extreme_closeup", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "eye_level"}
+        - {panel_type: "detail", focus: "object", composition: "landscape", shot_type: "closeup", camera_angle: "overhead"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape", shot_type: "closeup", camera_angle: "eye_level"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape", shot_type: "medium_closeup", camera_angle: "over_shoulder"}
+
+    - id: "spiral_narrative"
+      label: "Spiral Narrative"
+      description: "Circular reading flow"
+      positions:
+        - [0.28, 0.02, 0.44, 0.25]
+        - [0.52, 0.15, 0.46, 0.25]
+        - [0.52, 0.42, 0.46, 0.25]
+        - [0.28, 0.55, 0.44, 0.25]
+        - [0.02, 0.42, 0.44, 0.25]
+        - [0.02, 0.15, 0.44, 0.25]
+        - [0.3, 0.3, 0.4, 0.22]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape", shot_type: "wide", camera_angle: "high_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "landscape", shot_type: "medium_full", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "landscape", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "over_shoulder"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape", shot_type: "closeup", camera_angle: "eye_level"}
+        - {panel_type: "closeup", focus: "character", composition: "landscape", shot_type: "extreme_closeup", camera_angle: "pov"}
+
+    - id: "action_montage"
+      label: "Action Montage"
+      description: "Fast-paced action sequence"
+      positions:
+        - [0.02, 0.02, 0.96, 0.3]
+        - [0.02, 0.34, 0.31, 0.3]
+        - [0.345, 0.34, 0.31, 0.3]
+        - [0.67, 0.34, 0.31, 0.3]
+        - [0.02, 0.66, 0.23, 0.32]
+        - [0.27, 0.66, 0.23, 0.32]
+        - [0.52, 0.66, 0.46, 0.32]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide", shot_type: "extreme_wide", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "medium", camera_angle: "dutch_angle"}
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "medium_full", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "full", camera_angle: "high_angle"}
+        - {panel_type: "closeup", focus: "emotion", composition: "portrait", shot_type: "closeup", camera_angle: "low_angle"}
+        - {panel_type: "closeup", focus: "emotion", composition: "portrait", shot_type: "extreme_closeup", camera_angle: "eye_level"}
+        - {panel_type: "reaction", focus: "characters", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+
+    - id: "cinematic_sequence"
+      label: "Cinematic Sequence"
+      description: "Movie-like panel progression"
+      positions:
+        - [0.02, 0.02, 0.96, 0.28]
+        - [0.02, 0.32, 0.47, 0.2]
+        - [0.51, 0.32, 0.47, 0.2]
+        - [0.02, 0.54, 0.31, 0.21]
+        - [0.345, 0.54, 0.31, 0.21]
+        - [0.67, 0.54, 0.31, 0.21]
+        - [0.02, 0.77, 0.96, 0.21]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide", shot_type: "extreme_wide", camera_angle: "high_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "over_shoulder"}
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "medium_full", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "full", camera_angle: "dutch_angle"}
+        - {panel_type: "closeup", focus: "emotion", composition: "square", shot_type: "extreme_closeup", camera_angle: "pov"}
+        - {panel_type: "reaction", focus: "characters", composition: "wide", shot_type: "medium", camera_angle: "eye_level"}
+
+  8_images:
+    - id: "mega_grid"
+      label: "Mega Grid"
+      description: "Classic 4x2 grid"
+      positions:
+        - [0.02, 0.02, 0.23, 0.47]
+        - [0.27, 0.02, 0.23, 0.47]
+        - [0.52, 0.02, 0.23, 0.47]
+        - [0.77, 0.02, 0.21, 0.47]
+        - [0.02, 0.51, 0.23, 0.47]
+        - [0.27, 0.51, 0.23, 0.47]
+        - [0.52, 0.51, 0.23, 0.47]
+        - [0.77, 0.51, 0.21, 0.47]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "portrait", shot_type: "wide", camera_angle: "high_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "portrait", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "portrait", shot_type: "medium_closeup", camera_angle: "over_shoulder"}
+        - {panel_type: "action", focus: "event", composition: "portrait", shot_type: "medium_full", camera_angle: "eye_level"}
+        - {panel_type: "action", focus: "event", composition: "portrait", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "character", composition: "portrait", shot_type: "medium", camera_angle: "dutch_angle"}
+        - {panel_type: "closeup", focus: "emotion", composition: "portrait", shot_type: "closeup", camera_angle: "eye_level"}
+        - {panel_type: "reaction", focus: "emotion", composition: "portrait", shot_type: "extreme_closeup", camera_angle: "low_angle"}
+
+    - id: "chapter_opener"
+      label: "Chapter Opener"
+      description: "Splash page with progressive reveal"
+      positions:
+        - [0.02, 0.02, 0.96, 0.45]
+        - [0.02, 0.49, 0.23, 0.24]
+        - [0.27, 0.49, 0.23, 0.24]
+        - [0.52, 0.49, 0.23, 0.24]
+        - [0.77, 0.49, 0.21, 0.24]
+        - [0.02, 0.75, 0.23, 0.23]
+        - [0.27, 0.75, 0.23, 0.23]
+        - [0.52, 0.75, 0.46, 0.23]
+      metadata:
+        - {panel_type: "splash", focus: "environment", composition: "wide", shot_type: "extreme_wide", camera_angle: "high_angle"}
+        - {panel_type: "detail", focus: "object", composition: "square", shot_type: "extreme_closeup", camera_angle: "overhead"}
+        - {panel_type: "detail", focus: "character", composition: "square", shot_type: "closeup", camera_angle: "low_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "square", shot_type: "medium_closeup", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "square", shot_type: "medium", camera_angle: "over_shoulder"}
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "medium_full", camera_angle: "eye_level"}
+        - {panel_type: "closeup", focus: "emotion", composition: "square", shot_type: "extreme_closeup", camera_angle: "pov"}
+        - {panel_type: "reaction", focus: "characters", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+
+    - id: "parallel_stories"
+      label: "Parallel Stories"
+      description: "Two simultaneous narratives"
+      positions:
+        - [0.02, 0.02, 0.47, 0.23]
+        - [0.51, 0.02, 0.47, 0.23]
+        - [0.02, 0.27, 0.47, 0.23]
+        - [0.51, 0.27, 0.47, 0.23]
+        - [0.02, 0.52, 0.47, 0.23]
+        - [0.51, 0.52, 0.47, 0.23]
+        - [0.02, 0.77, 0.47, 0.21]
+        - [0.51, 0.77, 0.47, 0.21]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape", shot_type: "wide", camera_angle: "eye_level"}
+        - {panel_type: "establishing", focus: "environment", composition: "landscape", shot_type: "wide", camera_angle: "high_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "over_shoulder"}
+        - {panel_type: "action", focus: "event", composition: "landscape", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "event", composition: "landscape", shot_type: "medium_full", camera_angle: "dutch_angle"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape", shot_type: "closeup", camera_angle: "eye_level"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape", shot_type: "closeup", camera_angle: "eye_level"}
+
+    - id: "hero_explosion"
+      label: "Hero Explosion"
+      description: "Central impact radiating outward"
+      positions:
+        - [0.02, 0.02, 0.3, 0.3]
+        - [0.68, 0.02, 0.3, 0.3]
+        - [0.02, 0.68, 0.3, 0.3]
+        - [0.68, 0.68, 0.3, 0.3]
+        - [0.34, 0.02, 0.32, 0.28]
+        - [0.02, 0.34, 0.28, 0.32]
+        - [0.7, 0.34, 0.28, 0.32]
+        - [0.34, 0.7, 0.32, 0.28]
+      metadata:
+        - {panel_type: "detail", focus: "object", composition: "square", shot_type: "closeup", camera_angle: "overhead"}
+        - {panel_type: "detail", focus: "object", composition: "square", shot_type: "extreme_closeup", camera_angle: "eye_level"}
+        - {panel_type: "detail", focus: "character", composition: "square", shot_type: "closeup", camera_angle: "low_angle"}
+        - {panel_type: "detail", focus: "character", composition: "square", shot_type: "closeup", camera_angle: "high_angle"}
+        - {panel_type: "action", focus: "event", composition: "landscape", shot_type: "medium", camera_angle: "dutch_angle"}
+        - {panel_type: "action", focus: "event", composition: "portrait", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "event", composition: "portrait", shot_type: "medium_full", camera_angle: "high_angle"}
+        - {panel_type: "closeup", focus: "emotion", composition: "landscape", shot_type: "extreme_closeup", camera_angle: "pov"}
+
+    - id: "magazine_style"
+      label: "Magazine Style"
+      description: "Editorial layout with varied sizes"
+      positions:
+        - [0.02, 0.02, 0.63, 0.35]
+        - [0.67, 0.02, 0.31, 0.35]
+        - [0.02, 0.39, 0.31, 0.28]
+        - [0.35, 0.39, 0.31, 0.28]
+        - [0.68, 0.39, 0.3, 0.28]
+        - [0.02, 0.69, 0.31, 0.29]
+        - [0.35, 0.69, 0.31, 0.29]
+        - [0.68, 0.69, 0.3, 0.29]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape", shot_type: "wide", camera_angle: "high_angle"}
+        - {panel_type: "dialogue", focus: "character", composition: "portrait", shot_type: "medium", camera_angle: "eye_level"}
+        - {panel_type: "detail", focus: "object", composition: "square", shot_type: "extreme_closeup", camera_angle: "overhead"}
+        - {panel_type: "action", focus: "event", composition: "square", shot_type: "medium_full", camera_angle: "eye_level"}
+        - {panel_type: "dialogue", focus: "character", composition: "square", shot_type: "medium_closeup", camera_angle: "over_shoulder"}
+        - {panel_type: "action", focus: "character", composition: "square", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "closeup", focus: "emotion", composition: "square", shot_type: "closeup", camera_angle: "eye_level"}
+        - {panel_type: "reaction", focus: "emotion", composition: "square", shot_type: "extreme_closeup", camera_angle: "pov"}
+
+    - id: "epic_finale"
+      label: "Epic Finale"
+      description: "Climactic page layout"
+      positions:
+        - [0.02, 0.02, 0.31, 0.25]
+        - [0.345, 0.02, 0.31, 0.25]
+        - [0.67, 0.02, 0.31, 0.25]
+        - [0.02, 0.29, 0.47, 0.4]
+        - [0.51, 0.29, 0.47, 0.4]
+        - [0.02, 0.71, 0.31, 0.27]
+        - [0.345, 0.71, 0.31, 0.27]
+        - [0.67, 0.71, 0.31, 0.27]
+      metadata:
+        - {panel_type: "detail", focus: "object", composition: "landscape", shot_type: "extreme_closeup", camera_angle: "overhead"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape", shot_type: "medium_closeup", camera_angle: "eye_level"}
+        - {panel_type: "detail", focus: "object", composition: "landscape", shot_type: "closeup", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "event", composition: "portrait", shot_type: "full", camera_angle: "low_angle"}
+        - {panel_type: "action", focus: "event", composition: "portrait", shot_type: "full", camera_angle: "high_angle"}
+        - {panel_type: "closeup", focus: "emotion", composition: "landscape", shot_type: "closeup", camera_angle: "eye_level"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape", shot_type: "extreme_closeup", camera_angle: "pov"}
+        - {panel_type: "reaction", focus: "characters", composition: "landscape", shot_type: "medium", camera_angle: "eye_level"}
+# Page layouts configuration for multi-image PDF generation
+# Each layout defines how images are arranged on a page
+# Positions are defined as (x, y, width, height) in relative units (0-1)
+# Coordinate system: (0,0) is top-left, X increases right, Y increases down
+#
+# Panel metadata helps guide image generation:
+# - panel_type: establishing/action/closeup/dialogue/reaction/transition/detail/splash
+# - focus: environment/character/characters/action/emotion/object/event
+# - composition: wide/tall/square/portrait/landscape
+
+layouts:
+  1_image:
+    - id: "full_bleed"
+      label: "Full Bleed"
+      description: "Single image filling entire page"
+      positions:
+        - [0.0, 0.0, 1.0, 1.0]
+      metadata:
+        - {panel_type: "splash", focus: "event", composition: "square"}
+
+    - id: "classic_frame"
+      label: "Classic Frame"
+      description: "Single image with traditional margins"
+      positions:
+        - [0.05, 0.05, 0.9, 0.9]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "square"}
+
+    - id: "portrait_focus"
+      label: "Portrait Focus"
+      description: "Vertical emphasis for character shots"
+      positions:
+        - [0.15, 0.02, 0.7, 0.96]
+      metadata:
+        - {panel_type: "closeup", focus: "character", composition: "portrait"}
+
+    - id: "cinematic_wide"
+      label: "Cinematic Wide"
+      description: "Wide letterbox format"
+      positions:
+        - [0.02, 0.25, 0.96, 0.5]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide"}
+
+    - id: "floating_center"
+      label: "Floating Center"
+      description: "Centered with breathing room"
+      positions:
+        - [0.1, 0.15, 0.8, 0.7]
+      metadata:
+        - {panel_type: "dialogue", focus: "character", composition: "square"}
+
+  2_images:
+    - id: "horizontal_split"
+      label: "Even Split"
+      description: "Two equal panels side by side"
+      positions:
+        - [0.02, 0.02, 0.47, 0.96]
+        - [0.51, 0.02, 0.47, 0.96]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "portrait"}
+        - {panel_type: "action", focus: "character", composition: "portrait"}
+
+    - id: "vertical_split"
+      label: "Top & Bottom"
+      description: "Stacked panels"
+      positions:
+        - [0.02, 0.02, 0.96, 0.47]
+        - [0.02, 0.51, 0.96, 0.47]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide"}
+        - {panel_type: "action", focus: "event", composition: "wide"}
+
+    - id: "hero_sidekick"
+      label: "Hero & Sidekick"
+      description: "Large main panel with small detail"
+      positions:
+        - [0.02, 0.02, 0.65, 0.96]
+        - [0.69, 0.25, 0.29, 0.5]
+      metadata:
+        - {panel_type: "action", focus: "character", composition: "portrait"}
+        - {panel_type: "reaction", focus: "emotion", composition: "portrait"}
+
+    - id: "before_after"
+      label: "Before & After"
+      description: "Cause and effect layout"
+      positions:
+        - [0.02, 0.02, 0.96, 0.44]
+        - [0.02, 0.48, 0.96, 0.5]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide"}
+        - {panel_type: "action", focus: "event", composition: "wide"}
+
+    - id: "diagonal_tension"
+      label: "Diagonal Tension"
+      description: "Overlapping dynamic panels"
+      positions:
+        - [0.02, 0.02, 0.6, 0.6]
+        - [0.38, 0.38, 0.6, 0.6]
+      metadata:
+        - {panel_type: "action", focus: "event", composition: "square"}
+        - {panel_type: "action", focus: "event", composition: "square"}
+
+  3_images:
+    - id: "triptych"
+      label: "Triptych"
+      description: "Three equal vertical panels"
+      positions:
+        - [0.02, 0.02, 0.31, 0.96]
+        - [0.345, 0.02, 0.31, 0.96]
+        - [0.67, 0.02, 0.31, 0.96]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "portrait"}
+        - {panel_type: "action", focus: "character", composition: "portrait"}
+        - {panel_type: "reaction", focus: "emotion", composition: "portrait"}
+
+    - id: "hero_top"
+      label: "Establishing Shot"
+      description: "Large top panel with details below"
+      positions:
+        - [0.02, 0.02, 0.96, 0.5]
+        - [0.02, 0.54, 0.47, 0.44]
+        - [0.51, 0.54, 0.47, 0.44]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide"}
+        - {panel_type: "action", focus: "character", composition: "square"}
+        - {panel_type: "reaction", focus: "emotion", composition: "square"}
 
     - id: "l_shape"
-      label: "Layout E - L Shape"
-      description: "L-shaped arrangement"
+      label: "L-Shape Flow"
+      description: "Reading flow in L pattern"
+      positions:
+        - [0.02, 0.02, 0.47, 0.47]
+        - [0.51, 0.02, 0.47, 0.47]
+        - [0.02, 0.51, 0.96, 0.47]
+      metadata:
+        - {panel_type: "dialogue", focus: "character", composition: "square"}
+        - {panel_type: "dialogue", focus: "character", composition: "square"}
+        - {panel_type: "action", focus: "event", composition: "wide"}
+
+    - id: "spotlight"
+      label: "Spotlight"
+      description: "Central focus with side panels"
+      positions:
+        - [0.02, 0.15, 0.28, 0.7]
+        - [0.32, 0.02, 0.36, 0.96]
+        - [0.7, 0.15, 0.28, 0.7]
+      metadata:
+        - {panel_type: "reaction", focus: "character", composition: "portrait"}
+        - {panel_type: "action", focus: "character", composition: "portrait"}
+        - {panel_type: "reaction", focus: "character", composition: "portrait"}
+
+    - id: "vertical_flow"
+      label: "Vertical Flow"
+      description: "Three stacked panels for sequential action"
+      positions:
+        - [0.02, 0.02, 0.96, 0.31]
+        - [0.02, 0.345, 0.96, 0.31]
+        - [0.02, 0.67, 0.96, 0.31]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide"}
+        - {panel_type: "action", focus: "event", composition: "wide"}
+        - {panel_type: "action", focus: "event", composition: "wide"}
+
+    - id: "manga_action"
+      label: "Manga Action"
+      description: "Dynamic manga-style layout"
+      positions:
+        - [0.52, 0.02, 0.46, 0.45]
+        - [0.02, 0.02, 0.48, 0.65]
+        - [0.02, 0.69, 0.96, 0.29]
+      metadata:
+        - {panel_type: "reaction", focus: "emotion", composition: "square"}
+        - {panel_type: "action", focus: "character", composition: "portrait"}
+        - {panel_type: "action", focus: "event", composition: "wide"}
+
+  4_images:
+    - id: "grid_2x2"
+      label: "Classic Grid"
+      description: "Traditional 2x2 layout"
+      positions:
+        - [0.02, 0.02, 0.47, 0.47]
+        - [0.51, 0.02, 0.47, 0.47]
+        - [0.02, 0.51, 0.47, 0.47]
+        - [0.51, 0.51, 0.47, 0.47]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "square"}
+        - {panel_type: "dialogue", focus: "character", composition: "square"}
+        - {panel_type: "action", focus: "event", composition: "square"}
+        - {panel_type: "reaction", focus: "emotion", composition: "square"}
+
+    - id: "widescreen"
+      label: "Widescreen Strips"
+      description: "Four cinematic horizontal strips"
+      positions:
+        - [0.02, 0.02, 0.96, 0.23]
+        - [0.02, 0.27, 0.96, 0.23]
+        - [0.02, 0.52, 0.96, 0.23]
+        - [0.02, 0.77, 0.96, 0.21]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide"}
+        - {panel_type: "dialogue", focus: "characters", composition: "wide"}
+        - {panel_type: "action", focus: "event", composition: "wide"}
+        - {panel_type: "reaction", focus: "emotion", composition: "wide"}
+
+    - id: "hero_cluster"
+      label: "Hero with Cluster"
+      description: "Large panel with three supporting"
       positions:
-        - [0.05, 0.05, 0.425, 0.425]  # Top left (large)
-        - [0.525, 0.05, 0.425, 0.425]  # Top right (large)
-        - [0.05, 0.525, 0.425, 0.425]  # Bottom left
-        - [0.525, 0.7, 0.425, 0.25]  # Bottom right (small)
+        - [0.02, 0.02, 0.6, 0.63]
+        - [0.64, 0.02, 0.34, 0.3]
+        - [0.64, 0.34, 0.34, 0.31]
+        - [0.02, 0.67, 0.96, 0.31]
+      metadata:
+        - {panel_type: "action", focus: "event", composition: "square"}
+        - {panel_type: "detail", focus: "object", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape"}
+        - {panel_type: "transition", focus: "environment", composition: "wide"}
+
+    - id: "comic_strip"
+      label: "Comic Strip"
+      description: "Newspaper strip style"
+      positions:
+        - [0.02, 0.3, 0.23, 0.4]
+        - [0.27, 0.3, 0.23, 0.4]
+        - [0.52, 0.3, 0.23, 0.4]
+        - [0.77, 0.3, 0.21, 0.4]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "portrait"}
+        - {panel_type: "dialogue", focus: "characters", composition: "portrait"}
+        - {panel_type: "action", focus: "event", composition: "portrait"}
+        - {panel_type: "reaction", focus: "emotion", composition: "portrait"}
+
+    - id: "z_pattern"
+      label: "Z-Pattern"
+      description: "Natural reading flow in Z shape"
+      positions:
+        - [0.02, 0.02, 0.47, 0.35]
+        - [0.51, 0.02, 0.47, 0.35]
+        - [0.02, 0.39, 0.47, 0.59]
+        - [0.51, 0.39, 0.47, 0.59]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "action", focus: "character", composition: "portrait"}
+        - {panel_type: "action", focus: "event", composition: "portrait"}
+
+    - id: "explosion"
+      label: "Explosion"
+      description: "Central impact with surrounding panels"
+      positions:
+        - [0.02, 0.02, 0.35, 0.35]
+        - [0.63, 0.02, 0.35, 0.35]
+        - [0.27, 0.27, 0.46, 0.46]
+        - [0.02, 0.63, 0.96, 0.35]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "square"}
+        - {panel_type: "detail", focus: "object", composition: "square"}
+        - {panel_type: "action", focus: "event", composition: "square"}
+        - {panel_type: "reaction", focus: "characters", composition: "wide"}
 
   5_images:
-    - id: "us_comic_action"
-      label: "US Comic - Action Scene"
-      description: "Classic American superhero comic layout with large establishing shot"
-      positions:
-        - [0.02, 0.02, 0.96, 0.44]   # Wide establishing shot (panoramic)
-        - [0.02, 0.48, 0.31, 0.5]    # Action panel 1
-        - [0.345, 0.48, 0.31, 0.5]   # Action panel 2
-        - [0.67, 0.48, 0.31, 0.24]   # Close-up 1
-        - [0.67, 0.74, 0.31, 0.24]   # Close-up 2
-
-    - id: "manga_vertical_flow"
-      label: "Manga - Vertical Flow"
-      description: "Japanese manga style with vertical reading flow"
-      positions:
-        - [0.51, 0.02, 0.47, 0.38]   # Top right (read first in manga)
-        - [0.02, 0.02, 0.47, 0.38]   # Top left
-        - [0.51, 0.42, 0.47, 0.28]   # Middle right
-        - [0.02, 0.42, 0.47, 0.28]   # Middle left
-        - [0.02, 0.72, 0.96, 0.26]   # Bottom wide panel
-
-    - id: "euro_bd_grid"
-      label: "European BD - Clear Grid"
-      description: "Franco-Belgian clear line style with regular panels"
-      positions:
-        - [0.02, 0.02, 0.47, 0.31]   # Row 1 left
-        - [0.51, 0.02, 0.47, 0.31]   # Row 1 right
-        - [0.02, 0.345, 0.96, 0.31]  # Row 2 wide
-        - [0.02, 0.67, 0.47, 0.31]   # Row 3 left
-        - [0.51, 0.67, 0.47, 0.31]   # Row 3 right
-
-    - id: "diagonal_dynamic"
-      label: "Dynamic Diagonal"
-      description: "Action-oriented diagonal composition"
-      positions:
-        - [0.05, 0.05, 0.5, 0.4]    # Large top left
-        - [0.6, 0.05, 0.35, 0.25]   # Small top right
-        - [0.3, 0.35, 0.4, 0.3]     # Center focus
-        - [0.05, 0.7, 0.35, 0.25]   # Bottom left
-        - [0.6, 0.7, 0.35, 0.25]    # Bottom right
-
-    - id: "spiral_focus"
-      label: "Spiral Focus"
-      description: "Panels arranged in a spiral leading to center"
-      positions:
-        - [0.05, 0.05, 0.35, 0.35]   # Top left
-        - [0.425, 0.05, 0.525, 0.25] # Top wide
-        - [0.7, 0.35, 0.25, 0.6]     # Right tall
-        - [0.425, 0.7, 0.525, 0.25]  # Bottom wide
-        - [0.25, 0.35, 0.4, 0.3]     # Center focus
+    - id: "hero_banner"
+      label: "Hero Banner"
+      description: "Wide establishing shot with four panels below"
+      positions:
+        - [0.02, 0.02, 0.96, 0.38]
+        - [0.02, 0.42, 0.47, 0.28]
+        - [0.51, 0.42, 0.47, 0.28]
+        - [0.02, 0.72, 0.47, 0.26]
+        - [0.51, 0.72, 0.47, 0.26]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape"}
+
+    - id: "manga_vertical"
+      label: "Manga Vertical"
+      description: "Japanese right-to-left vertical flow"
+      positions:
+        - [0.52, 0.02, 0.46, 0.32]
+        - [0.02, 0.02, 0.48, 0.32]
+        - [0.52, 0.36, 0.46, 0.3]
+        - [0.02, 0.36, 0.48, 0.3]
+        - [0.02, 0.68, 0.96, 0.3]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "action", focus: "character", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "wide"}
+
+    - id: "pyramid"
+      label: "Pyramid"
+      description: "Building tension from top to bottom"
+      positions:
+        - [0.25, 0.02, 0.5, 0.25]
+        - [0.02, 0.29, 0.47, 0.3]
+        - [0.51, 0.29, 0.47, 0.3]
+        - [0.02, 0.61, 0.31, 0.37]
+        - [0.67, 0.61, 0.31, 0.37]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "portrait"}
+        - {panel_type: "action", focus: "event", composition: "portrait"}
+
+    - id: "spotlight_drama"
+      label: "Spotlight Drama"
+      description: "Central focus with corner details"
+      positions:
+        - [0.02, 0.02, 0.35, 0.35]
+        - [0.63, 0.02, 0.35, 0.35]
+        - [0.22, 0.22, 0.56, 0.56]
+        - [0.02, 0.63, 0.35, 0.35]
+        - [0.63, 0.63, 0.35, 0.35]
+      metadata:
+        - {panel_type: "detail", focus: "object", composition: "square"}
+        - {panel_type: "detail", focus: "object", composition: "square"}
+        - {panel_type: "action", focus: "character", composition: "square"}
+        - {panel_type: "reaction", focus: "emotion", composition: "square"}
+        - {panel_type: "reaction", focus: "emotion", composition: "square"}
+
+    - id: "euro_bd"
+      label: "Euro BD Classic"
+      description: "Franco-Belgian structured layout"
+      positions:
+        - [0.02, 0.02, 0.47, 0.29]
+        - [0.51, 0.02, 0.47, 0.29]
+        - [0.02, 0.33, 0.96, 0.31]
+        - [0.02, 0.66, 0.47, 0.32]
+        - [0.51, 0.66, 0.47, 0.32]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "wide"}
+        - {panel_type: "dialogue", focus: "characters", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape"}
+
+    - id: "action_burst"
+      label: "Action Burst"
+      description: "Dynamic superhero action layout"
+      positions:
+        - [0.02, 0.02, 0.55, 0.55]
+        - [0.59, 0.02, 0.39, 0.26]
+        - [0.59, 0.3, 0.39, 0.27]
+        - [0.02, 0.59, 0.47, 0.39]
+        - [0.51, 0.59, 0.47, 0.39]
+      metadata:
+        - {panel_type: "action", focus: "event", composition: "square"}
+        - {panel_type: "detail", focus: "object", composition: "landscape"}
+        - {panel_type: "closeup", focus: "emotion", composition: "landscape"}
+        - {panel_type: "action", focus: "character", composition: "landscape"}
+        - {panel_type: "reaction", focus: "characters", composition: "landscape"}
 
   6_images:
-    - id: "classic_comic_grid"
-      label: "Classic Comic Grid"
-      description: "Traditional 2x3 American comic book grid"
-      positions:
-        - [0.02, 0.02, 0.47, 0.31]   # Row 1 left
-        - [0.51, 0.02, 0.47, 0.31]   # Row 1 right
-        - [0.02, 0.345, 0.47, 0.31]  # Row 2 left
-        - [0.51, 0.345, 0.47, 0.31]  # Row 2 right
-        - [0.02, 0.67, 0.47, 0.31]   # Row 3 left
-        - [0.51, 0.67, 0.47, 0.31]   # Row 3 right
-
-    - id: "manga_4koma"
-      label: "Manga - 4-Koma Plus"
-      description: "Japanese 4-panel strip with header and footer"
-      positions:
-        - [0.02, 0.02, 0.96, 0.16]   # Header panel
-        - [0.02, 0.2, 0.47, 0.23]    # Strip 1
-        - [0.51, 0.2, 0.47, 0.23]    # Strip 2
-        - [0.02, 0.45, 0.47, 0.23]   # Strip 3
-        - [0.51, 0.45, 0.47, 0.23]   # Strip 4
-        - [0.02, 0.7, 0.96, 0.28]    # Footer/punchline
-
-    - id: "euro_bd_cinematic"
-      label: "European BD - Cinematic"
-      description: "Cinematic European style with varied panel sizes"
-      positions:
-        - [0.02, 0.02, 0.96, 0.28]   # Wide establishing
-        - [0.02, 0.32, 0.31, 0.28]   # Small 1
-        - [0.345, 0.32, 0.31, 0.28]  # Small 2
-        - [0.67, 0.32, 0.31, 0.28]   # Small 3
-        - [0.02, 0.62, 0.47, 0.36]   # Medium left
-        - [0.51, 0.62, 0.47, 0.36]   # Medium right
-
-    - id: "action_sequence"
-      label: "Action Sequence"
-      description: "Fast-paced action scene layout"
-      positions:
-        - [0.02, 0.02, 0.65, 0.38]   # Large action shot
-        - [0.69, 0.02, 0.29, 0.18]   # Speed line 1
-        - [0.69, 0.22, 0.29, 0.18]   # Speed line 2
-        - [0.02, 0.42, 0.31, 0.56]   # Vertical impact 1
-        - [0.345, 0.42, 0.31, 0.56]  # Vertical impact 2
-        - [0.67, 0.42, 0.31, 0.56]   # Vertical impact 3
-
-    - id: "storytelling_flow"
-      label: "Storytelling Flow"
-      description: "Natural reading flow for narrative scenes"
-      positions:
-        - [0.05, 0.05, 0.425, 0.25]  # Scene 1
-        - [0.525, 0.05, 0.425, 0.25] # Scene 2
-        - [0.05, 0.35, 0.9, 0.2]     # Wide transition
-        - [0.05, 0.6, 0.425, 0.35]   # Scene 3
-        - [0.525, 0.6, 0.425, 0.175] # Scene 4a
-        - [0.525, 0.8, 0.425, 0.175] # Scene 4b
-
-    - id: "focus_surround"
-      label: "Focus with Details"
-      description: "Central focus with surrounding detail panels"
-      positions:
-        - [0.25, 0.25, 0.5, 0.5]     # Large center focus
-        - [0.05, 0.05, 0.35, 0.15]   # Top left detail
-        - [0.6, 0.05, 0.35, 0.15]    # Top right detail
-        - [0.05, 0.8, 0.35, 0.15]    # Bottom left detail
-        - [0.6, 0.8, 0.35, 0.15]     # Bottom right detail
-        - [0.05, 0.4, 0.15, 0.3]     # Left side detail
+    - id: "classic_grid"
+      label: "Classic 2x3 Grid"
+      description: "Traditional American comic layout"
+      positions:
+        - [0.02, 0.02, 0.47, 0.31]
+        - [0.51, 0.02, 0.47, 0.31]
+        - [0.02, 0.345, 0.47, 0.31]
+        - [0.51, 0.345, 0.47, 0.31]
+        - [0.02, 0.67, 0.47, 0.31]
+        - [0.51, 0.67, 0.47, 0.31]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape"}
+
+    - id: "hero_surround"
+      label: "Hero Surrounded"
+      description: "Large central panel with five around it"
+      positions:
+        - [0.02, 0.02, 0.31, 0.28]
+        - [0.67, 0.02, 0.31, 0.28]
+        - [0.02, 0.7, 0.31, 0.28]
+        - [0.67, 0.7, 0.31, 0.28]
+        - [0.25, 0.25, 0.5, 0.5]
+        - [0.35, 0.35, 0.63, 0.33]
+      metadata:
+        - {panel_type: "detail", focus: "object", composition: "square"}
+        - {panel_type: "detail", focus: "object", composition: "square"}
+        - {panel_type: "detail", focus: "object", composition: "square"}
+        - {panel_type: "detail", focus: "object", composition: "square"}
+        - {panel_type: "action", focus: "character", composition: "square"}
+        - {panel_type: "action", focus: "event", composition: "landscape"}
+
+    - id: "staircase"
+      label: "Staircase"
+      description: "Diagonal reading flow"
+      positions:
+        - [0.02, 0.02, 0.45, 0.3]
+        - [0.49, 0.02, 0.49, 0.3]
+        - [0.02, 0.34, 0.45, 0.3]
+        - [0.49, 0.34, 0.49, 0.3]
+        - [0.02, 0.66, 0.45, 0.32]
+        - [0.49, 0.66, 0.49, 0.32]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "landscape"}
+        - {panel_type: "action", focus: "character", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape"}
+
+    - id: "splash_detail"
+      label: "Splash with Details"
+      description: "Full-page moment with detail insets"
+      positions:
+        - [0.05, 0.05, 0.4, 0.4]
+        - [0.55, 0.05, 0.4, 0.4]
+        - [0.05, 0.55, 0.4, 0.4]
+        - [0.55, 0.55, 0.4, 0.4]
+        - [0.25, 0.25, 0.5, 0.5]
+        - [0.35, 0.35, 0.3, 0.3]
+      metadata:
+        - {panel_type: "detail", focus: "environment", composition: "square"}
+        - {panel_type: "detail", focus: "object", composition: "square"}
+        - {panel_type: "detail", focus: "object", composition: "square"}
+        - {panel_type: "detail", focus: "character", composition: "square"}
+        - {panel_type: "action", focus: "event", composition: "square"}
+        - {panel_type: "closeup", focus: "emotion", composition: "square"}
+
+    - id: "manga_4koma_plus"
+      label: "Manga 4-Koma Plus"
+      description: "Japanese 4-panel with header/footer"
+      positions:
+        - [0.02, 0.02, 0.96, 0.15]
+        - [0.02, 0.19, 0.47, 0.25]
+        - [0.51, 0.19, 0.47, 0.25]
+        - [0.02, 0.46, 0.47, 0.25]
+        - [0.51, 0.46, 0.47, 0.25]
+        - [0.02, 0.73, 0.96, 0.25]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "wide"}
+
+    - id: "tension_build"
+      label: "Tension Builder"
+      description: "Progressive revelation layout"
+      positions:
+        - [0.02, 0.02, 0.96, 0.22]
+        - [0.02, 0.26, 0.47, 0.22]
+        - [0.51, 0.26, 0.47, 0.22]
+        - [0.02, 0.5, 0.31, 0.48]
+        - [0.345, 0.5, 0.31, 0.48]
+        - [0.67, 0.5, 0.31, 0.48]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "action", focus: "character", composition: "portrait"}
+        - {panel_type: "action", focus: "character", composition: "portrait"}
+        - {panel_type: "closeup", focus: "emotion", composition: "portrait"}
+
+  7_images:
+    - id: "hero_hexagon"
+      label: "Hero Hexagon"
+      description: "Central focus with six surrounding"
+      positions:
+        - [0.28, 0.02, 0.44, 0.3]
+        - [0.02, 0.25, 0.3, 0.25]
+        - [0.68, 0.25, 0.3, 0.25]
+        - [0.25, 0.35, 0.5, 0.3]
+        - [0.02, 0.52, 0.3, 0.25]
+        - [0.68, 0.52, 0.3, 0.25]
+        - [0.28, 0.68, 0.44, 0.3]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape"}
+        - {panel_type: "detail", focus: "object", composition: "landscape"}
+        - {panel_type: "detail", focus: "object", composition: "landscape"}
+        - {panel_type: "action", focus: "character", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape"}
+
+    - id: "narrative_flow"
+      label: "Narrative Flow"
+      description: "Story progression with varied sizes"
+      positions:
+        - [0.02, 0.02, 0.47, 0.28]
+        - [0.51, 0.02, 0.47, 0.28]
+        - [0.02, 0.32, 0.96, 0.24]
+        - [0.02, 0.58, 0.31, 0.4]
+        - [0.345, 0.58, 0.31, 0.4]
+        - [0.67, 0.58, 0.31, 0.2]
+        - [0.67, 0.8, 0.31, 0.18]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "wide"}
+        - {panel_type: "action", focus: "character", composition: "portrait"}
+        - {panel_type: "action", focus: "character", composition: "portrait"}
+        - {panel_type: "closeup", focus: "emotion", composition: "portrait"}
+        - {panel_type: "detail", focus: "object", composition: "portrait"}
+
+    - id: "double_spread"
+      label: "Double Feature"
+      description: "Two hero panels with details"
+      positions:
+        - [0.02, 0.02, 0.47, 0.45]
+        - [0.51, 0.02, 0.47, 0.45]
+        - [0.02, 0.49, 0.31, 0.24]
+        - [0.345, 0.49, 0.31, 0.24]
+        - [0.67, 0.49, 0.31, 0.24]
+        - [0.02, 0.75, 0.47, 0.23]
+        - [0.51, 0.75, 0.47, 0.23]
+      metadata:
+        - {panel_type: "action", focus: "event", composition: "portrait"}
+        - {panel_type: "action", focus: "event", composition: "portrait"}
+        - {panel_type: "detail", focus: "object", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "detail", focus: "object", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape"}
+
+    - id: "spiral_narrative"
+      label: "Spiral Narrative"
+      description: "Circular reading flow"
+      positions:
+        - [0.28, 0.02, 0.44, 0.25]
+        - [0.52, 0.15, 0.46, 0.25]
+        - [0.52, 0.42, 0.46, 0.25]
+        - [0.28, 0.55, 0.44, 0.25]
+        - [0.02, 0.42, 0.44, 0.25]
+        - [0.02, 0.15, 0.44, 0.25]
+        - [0.3, 0.3, 0.4, 0.22]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape"}
+        - {panel_type: "closeup", focus: "character", composition: "landscape"}
+
+    - id: "action_montage"
+      label: "Action Montage"
+      description: "Fast-paced action sequence"
+      positions:
+        - [0.02, 0.02, 0.96, 0.3]
+        - [0.02, 0.34, 0.31, 0.3]
+        - [0.345, 0.34, 0.31, 0.3]
+        - [0.67, 0.34, 0.31, 0.3]
+        - [0.02, 0.66, 0.23, 0.32]
+        - [0.27, 0.66, 0.23, 0.32]
+        - [0.52, 0.66, 0.46, 0.32]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide"}
+        - {panel_type: "action", focus: "event", composition: "square"}
+        - {panel_type: "action", focus: "event", composition: "square"}
+        - {panel_type: "action", focus: "event", composition: "square"}
+        - {panel_type: "closeup", focus: "emotion", composition: "portrait"}
+        - {panel_type: "closeup", focus: "emotion", composition: "portrait"}
+        - {panel_type: "reaction", focus: "characters", composition: "landscape"}
+
+    - id: "cinematic_sequence"
+      label: "Cinematic Sequence"
+      description: "Movie-like panel progression"
+      positions:
+        - [0.02, 0.02, 0.96, 0.28]
+        - [0.02, 0.32, 0.47, 0.2]
+        - [0.51, 0.32, 0.47, 0.2]
+        - [0.02, 0.54, 0.31, 0.21]
+        - [0.345, 0.54, 0.31, 0.21]
+        - [0.67, 0.54, 0.31, 0.21]
+        - [0.02, 0.77, 0.96, 0.21]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "wide"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "square"}
+        - {panel_type: "action", focus: "event", composition: "square"}
+        - {panel_type: "closeup", focus: "emotion", composition: "square"}
+        - {panel_type: "reaction", focus: "characters", composition: "wide"}
+
+  8_images:
+    - id: "mega_grid"
+      label: "Mega Grid"
+      description: "Classic 4x2 grid"
+      positions:
+        - [0.02, 0.02, 0.23, 0.47]
+        - [0.27, 0.02, 0.23, 0.47]
+        - [0.52, 0.02, 0.23, 0.47]
+        - [0.77, 0.02, 0.21, 0.47]
+        - [0.02, 0.51, 0.23, 0.47]
+        - [0.27, 0.51, 0.23, 0.47]
+        - [0.52, 0.51, 0.23, 0.47]
+        - [0.77, 0.51, 0.21, 0.47]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "portrait"}
+        - {panel_type: "dialogue", focus: "character", composition: "portrait"}
+        - {panel_type: "dialogue", focus: "character", composition: "portrait"}
+        - {panel_type: "action", focus: "event", composition: "portrait"}
+        - {panel_type: "action", focus: "event", composition: "portrait"}
+        - {panel_type: "action", focus: "character", composition: "portrait"}
+        - {panel_type: "closeup", focus: "emotion", composition: "portrait"}
+        - {panel_type: "reaction", focus: "emotion", composition: "portrait"}
+
+    - id: "chapter_opener"
+      label: "Chapter Opener"
+      description: "Splash page with progressive reveal"
+      positions:
+        - [0.02, 0.02, 0.96, 0.45]
+        - [0.02, 0.49, 0.23, 0.24]
+        - [0.27, 0.49, 0.23, 0.24]
+        - [0.52, 0.49, 0.23, 0.24]
+        - [0.77, 0.49, 0.21, 0.24]
+        - [0.02, 0.75, 0.23, 0.23]
+        - [0.27, 0.75, 0.23, 0.23]
+        - [0.52, 0.75, 0.46, 0.23]
+      metadata:
+        - {panel_type: "splash", focus: "environment", composition: "wide"}
+        - {panel_type: "detail", focus: "object", composition: "square"}
+        - {panel_type: "detail", focus: "character", composition: "square"}
+        - {panel_type: "dialogue", focus: "character", composition: "square"}
+        - {panel_type: "dialogue", focus: "character", composition: "square"}
+        - {panel_type: "action", focus: "event", composition: "square"}
+        - {panel_type: "closeup", focus: "emotion", composition: "square"}
+        - {panel_type: "reaction", focus: "characters", composition: "landscape"}
+
+    - id: "parallel_stories"
+      label: "Parallel Stories"
+      description: "Two simultaneous narratives"
+      positions:
+        - [0.02, 0.02, 0.47, 0.23]
+        - [0.51, 0.02, 0.47, 0.23]
+        - [0.02, 0.27, 0.47, 0.23]
+        - [0.51, 0.27, 0.47, 0.23]
+        - [0.02, 0.52, 0.47, 0.23]
+        - [0.51, 0.52, 0.47, 0.23]
+        - [0.02, 0.77, 0.47, 0.21]
+        - [0.51, 0.77, 0.47, 0.21]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape"}
+        - {panel_type: "establishing", focus: "environment", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape"}
+
+    - id: "hero_explosion"
+      label: "Hero Explosion"
+      description: "Central impact radiating outward"
+      positions:
+        - [0.02, 0.02, 0.3, 0.3]
+        - [0.68, 0.02, 0.3, 0.3]
+        - [0.02, 0.68, 0.3, 0.3]
+        - [0.68, 0.68, 0.3, 0.3]
+        - [0.34, 0.02, 0.32, 0.28]
+        - [0.02, 0.34, 0.28, 0.32]
+        - [0.7, 0.34, 0.28, 0.32]
+        - [0.34, 0.7, 0.32, 0.28]
+      metadata:
+        - {panel_type: "detail", focus: "object", composition: "square"}
+        - {panel_type: "detail", focus: "object", composition: "square"}
+        - {panel_type: "detail", focus: "character", composition: "square"}
+        - {panel_type: "detail", focus: "character", composition: "square"}
+        - {panel_type: "action", focus: "event", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "portrait"}
+        - {panel_type: "action", focus: "event", composition: "portrait"}
+        - {panel_type: "closeup", focus: "emotion", composition: "landscape"}
+
+    - id: "magazine_style"
+      label: "Magazine Style"
+      description: "Editorial layout with varied sizes"
+      positions:
+        - [0.02, 0.02, 0.63, 0.35]
+        - [0.67, 0.02, 0.31, 0.35]
+        - [0.02, 0.39, 0.31, 0.28]
+        - [0.35, 0.39, 0.31, 0.28]
+        - [0.68, 0.39, 0.3, 0.28]
+        - [0.02, 0.69, 0.31, 0.29]
+        - [0.35, 0.69, 0.31, 0.29]
+        - [0.68, 0.69, 0.3, 0.29]
+      metadata:
+        - {panel_type: "establishing", focus: "environment", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "portrait"}
+        - {panel_type: "detail", focus: "object", composition: "square"}
+        - {panel_type: "action", focus: "event", composition: "square"}
+        - {panel_type: "dialogue", focus: "character", composition: "square"}
+        - {panel_type: "action", focus: "character", composition: "square"}
+        - {panel_type: "closeup", focus: "emotion", composition: "square"}
+        - {panel_type: "reaction", focus: "emotion", composition: "square"}
+
+    - id: "epic_finale"
+      label: "Epic Finale"
+      description: "Climactic page layout"
+      positions:
+        - [0.02, 0.02, 0.31, 0.25]
+        - [0.345, 0.02, 0.31, 0.25]
+        - [0.67, 0.02, 0.31, 0.25]
+        - [0.02, 0.29, 0.47, 0.4]
+        - [0.51, 0.29, 0.47, 0.4]
+        - [0.02, 0.71, 0.31, 0.27]
+        - [0.345, 0.71, 0.31, 0.27]
+        - [0.67, 0.71, 0.31, 0.27]
+      metadata:
+        - {panel_type: "detail", focus: "object", composition: "landscape"}
+        - {panel_type: "dialogue", focus: "character", composition: "landscape"}
+        - {panel_type: "detail", focus: "object", composition: "landscape"}
+        - {panel_type: "action", focus: "event", composition: "portrait"}
+        - {panel_type: "action", focus: "event", composition: "portrait"}
+        - {panel_type: "closeup", focus: "emotion", composition: "landscape"}
+        - {panel_type: "reaction", focus: "emotion", composition: "landscape"}
+        - {panel_type: "reaction", focus: "characters", composition: "landscape"}