---

## 🎨 DESIGN ANALYSIS & PLAN

### Current State Analysis

**WordPress Single Post Template:**
- Uses emojis (📅, 📝, ✍️, 📁, 🏷️) in header metadata
- Shows all metadata including internal/debug data (Content ID, Task ID, Sector ID, Cluster ID, etc.)
- SEO section shows Meta Title & Meta Description in header (should be hidden from users)
- "Section Spotlight" label is hardcoded
- Images not optimally distributed - one per section sequentially
- Container max-width: 1200px

**App ContentViewTemplate:**
- Uses icons properly via component imports
- Similar "Section Spotlight" label issue
- Better image handling with aspect ratio detection
- Shows extensive metadata in header (Meta Title, Meta Description, Primary/Secondary Keywords)
- Container max-width: 1440px

---

## 📐 DESIGN PLAN

### 1. CSS Container Width Update

```
.igny8-content-container {
  max-width: 1280px;           /* Default for screens <= 1600px */
}

@media (min-width: 1600px) {
  .igny8-content-container {
    max-width: 1530px;         /* For screens > 1600px */
  }
}
```

---

### 2. WordPress Header Redesign

**USER-FACING FIELDS (Keep in Header):**
| Field | Display | Icon | Notes |
|-------|---------|------|-------|
| Title | H1 | - | Post title |
| Status Badge | Published/Draft/etc | - | Post status |
| Posted Date | Formatted date | Calendar SVG | Publication date |
| Word Count | Formatted number | Document SVG | Content word count |
| Author | Author name | User SVG | Post author |
| Topic | Cluster name (clickable)| Compass SVG | Display cluster_name as "Topic" |
| Categories | Badge list (Parent > Child clicakble) | Folder SVG | WP Categories |
| Tags | Badge list (clickable)| Tag SVG | WP Tags |

**NON-USER FIELDS (Move to Metadata Section - Editor+ only):**
- Content ID, Task ID
- Content Type, Structure
- Cluster ID (keep cluster_name as Topic in header)
- Sector ID, Sector Name
- Primary Keyword, Secondary Keywords
- Meta Title, Meta Description
- Source, Last Synced

---

### 3. Section Label Redesign

**Current:** "Section Spotlight" (generic text)

**New Approach - Keyword/Tag Matching Algorithm:**

1. **Source Data:**
   - Get all WordPress tags assigned to the post
   - Get all WordPress categories assigned to the post  
   - Get primary keyword from post meta
   - Get secondary keywords from post meta (if available)

2. **Matching Logic:**
   - For each section heading (H2), perform case-insensitive partial matching
   - Check if any tag name appears in the heading text
   - Check if any category name appears in the heading text
   - Check if primary/secondary keywords appear in the heading text
   - Prioritize: Primary Keyword > Tags > Categories > Secondary Keywords

3. **Display Rules:**
   - If matches found: Display up to 2 matched keywords/tags as badges
   - If no matches: Display topic (cluster_name) or leave section without label badges
   - Never display generic "Section Spotlight" text

4. **Badge Styling:**
   ```
   [Primary Match] [Secondary Match]  ← styled badges replacing "Section Spotlight"
   ```

**Colors:**
- Primary badge: `theme-color @ 15% opacity` background, `theme-color` text
- Secondary badge: `theme-color @ 8% opacity` background, `theme-color @ 80%` text

**Implementation Function (Pseudo-code):**
```php
function igny8_get_section_badges($heading, $post_id) {
    $badges = [];
    $heading_lower = strtolower($heading);
    
    // Get post taxonomies and keywords
    $tags = get_the_tags($post_id);
    $categories = get_the_category($post_id);
    $primary_kw = get_post_meta($post_id, '_igny8_primary_keyword', true);
    $secondary_kws = get_post_meta($post_id, '_igny8_secondary_keywords', true);
    
    // Priority 1: Primary keyword
    if ($primary_kw && stripos($heading_lower, strtolower($primary_kw)) !== false) {
        $badges[] = ['text' => $primary_kw, 'type' => 'primary'];
    }
    
    // Priority 2: Tags
    if ($tags && count($badges) < 2) {
        foreach ($tags as $tag) {
            if (stripos($heading_lower, strtolower($tag->name)) !== false) {
                $badges[] = ['text' => $tag->name, 'type' => 'tag'];
                if (count($badges) >= 2) break;
            }
        }
    }
    
    // Priority 3: Categories
    if ($categories && count($badges) < 2) {
        foreach ($categories as $cat) {
            if (stripos($heading_lower, strtolower($cat->name)) !== false) {
                $badges[] = ['text' => $cat->name, 'type' => 'category'];
                if (count($badges) >= 2) break;
            }
        }
    }
    
    // Priority 4: Secondary keywords
    if ($secondary_kws && count($badges) < 2) {
        $kw_array = is_array($secondary_kws) ? $secondary_kws : explode(',', $secondary_kws);
        foreach ($kw_array as $kw) {
            $kw = trim($kw);
            if (stripos($heading_lower, strtolower($kw)) !== false) {
                $badges[] = ['text' => $kw, 'type' => 'keyword'];
                if (count($badges) >= 2) break;
            }
        }
    }
    
    return $badges;
}
```

---

### 4. Image Distribution Strategy

**Available Images (4 total):**
- Position 0: Square (1024×1024)
- Position 1: Landscape (1536×1024 or 1920×1080)
- Position 2: Square (1024×1024)
- Position 3: Landscape (1536×1024 or 1920×1080)

**Distribution Plan - First 4 Sections (with descriptions):**

| Section | Image Position | Type | Width | Alignment | Description |
|---------|---------------|------|-------|-----------|-------------|
| **Featured** | Position 1 | Landscape | 100% max 1024px | Center | Show prompt on first use |
| **Section 1** | Position 0 | Square | 50% | Right | With description + widget placeholder below |
| **Section 2** | Position 3 | Landscape | 100% max 1024px | Full width | With description |
| **Section 3** | Position 2 | Square | 50% | Left | With description + widget placeholder below |
| **Section 4** | Position 1 (reuse) | Landscape | 100% max 1024px | Full width | With description |

**Distribution Plan - Sections 5-7+ (reuse without descriptions):**

| Section | Reuse Image | Type | Width | Alignment | Description |
|---------|-------------|------|-------|-----------|-------------|
| **Section 5** | Featured (pos 1) | Landscape | 100% max 1024px | Full width | NO description |
| **Section 6** | Position 0 | Square | 50% | Right | NO description + widget placeholder |
| **Section 7** | Position 3 | Landscape | 100% max 1024px | Full width | NO description |
| **Section 8+** | Cycle through all 4 | Based on type | Based on type | Based on type | NO description |

**Special Case - Tables:**
- When section contains `<table>` element, always place full-width landscape image BEFORE table
- Use next available landscape image (Position 1 or 3)
- Max width: 1024px, centered
- Spacing: `margin-bottom: 2rem` before table
- Override normal section pattern when table detected

**Image Reuse Rules:**
- Images 1-4 used in first 4 sections WITH descriptions/prompts
- Sections 5+ reuse same images WITHOUT descriptions/prompts
- Use CSS classes: `.igny8-image-first-use` vs `.igny8-image-reuse`
- Maintain same layout pattern (square = 50%, landscape = 100%)

**Widget Placeholders:**
- Show only below square images (left/right aligned)
- Empty div with class `.igny8-widget-placeholder`
- Space reserved for future widget insertion
- Controlled via plugin settings (future implementation)

**Implementation Notes:**
```php
// Check for table in section content
function igny8_section_has_table($section_html) {
    return (stripos($section_html, '<table') !== false);
}

// Get image aspect ratio from position
function igny8_get_image_aspect($position) {
    // Even positions (0, 2) = square
    // Odd positions (1, 3) = landscape
    return ($position % 2 === 0) ? 'square' : 'landscape';
}

// Determine if image should show description
function igny8_show_image_description($section_index) {
    // First 4 sections (0-3) show descriptions
    return ($section_index < 4);
}
```

---

### 5. Image Alignment with Tables

When section contains a `<table>`:
- Place landscape image ABOVE the table
- Full width (max 800px)
- Proper spacing: `margin-bottom: 2rem`
- Table should not wrap around image

---

### 6. Responsive Image Width Rules

```css
/* Landscape images */
.igny8-image-landscape {
  max-width: 1024px;  /* Updated from 800px */
  width: 100%;
  margin: 0 auto;
  display: block;
}

.igny8-image-landscape.igny8-image-reuse {
  /* No description shown on reuse */
}

/* Single square image - Right aligned */
.igny8-image-square-right {
  max-width: 50%;
  margin-left: auto;
  float: right;
  margin-left: 2rem;
  margin-bottom: 2rem;
}

/* Single square image - Left aligned */
.igny8-image-square-left {
  max-width: 50%;
  margin-right: auto;
  float: left;
  margin-right: 2rem;
  margin-bottom: 2rem;
}

/* Widget placeholder below square images */
.igny8-widget-placeholder {
  clear: both;
  min-height: 200px;
  padding: 1.5rem;
  margin-top: 1rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  display: none; /* Hidden by default, shown when widgets enabled */
}

.igny8-widget-placeholder.igny8-widgets-enabled {
  display: block;
}

/* Table-specific image positioning */
.igny8-image-before-table {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto 2rem;
  display: block;
}
```

---

### 7. Role-Based Visibility

**Metadata Section (Bottom):**
```php
<?php if (current_user_can('edit_posts')): ?>
<div class="igny8-metadata-footer igny8-editor-only">
  <!-- All internal metadata here -->
</div>
<?php endif; ?>
```

**Visible only to:**
- Editor
- Administrator
- Author (for their own posts)

---

### 8. Header Icon Set (Replace Emojis)

Create inline SVG icons matching theme color:

```php
// Calendar Icon
<svg class="igny8-icon" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
</svg>

// Document Icon (Word Count)
<svg class="igny8-icon" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z"/>
</svg>

// User Icon (Author)
<svg class="igny8-icon" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"/>
</svg>

// Compass Icon (Topic/Cluster)
<svg class="igny8-icon" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"/>
</svg>

// Folder Icon (Categories)
<svg class="igny8-icon" viewBox="0 0 20 20" fill="currentColor">
  <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
</svg>

// Tag Icon (Tags)
<svg class="igny8-icon" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z"/>
</svg>
```

Icon styling:
```css
.igny8-icon {
  width: 1rem;
  height: 1rem;
  color: var(--igny8-theme-color, currentColor);
  opacity: 0.8;
  display: inline-block;
  vertical-align: middle;
}
```

---

### 9. Table of Contents

**Position:** Below featured image, before intro section

**Content:** List all H2 headings from content

**Features:**
- Clickable links with smooth scroll to sections
- Collapsible/expandable (optional)
- Numbered list matching section numbers
- Sticky positioning option (future setting)

**Implementation:**
```php
function igny8_generate_table_of_contents($content) {
    $toc_items = [];
    
    // Parse content for H2 headings
    preg_match_all('/<h2[^>]*>(.*?)<\/h2>/i', $content, $matches);
    
    if (!empty($matches[1])) {
        foreach ($matches[1] as $index => $heading) {
            $heading_text = strip_tags($heading);
            $slug = sanitize_title($heading_text);
            $toc_items[] = [
                'number' => $index + 1,
                'text' => $heading_text,
                'id' => $slug
            ];
        }
    }
    
    return $toc_items;
}
```

**HTML Structure:**
```html
<nav class="igny8-table-of-contents">
    <div class="igny8-toc-header">
        <span class="igny8-toc-icon">📑</span>
        <h3>Table of Contents</h3>
    </div>
    <ol class="igny8-toc-list">
        <?php foreach ($toc_items as $item): ?>
        <li class="igny8-toc-item">
            <a href="#<?php echo esc_attr($item['id']); ?>" class="igny8-toc-link">
                <span class="igny8-toc-number"><?php echo $item['number']; ?>.</span>
                <span class="igny8-toc-text"><?php echo esc_html($item['text']); ?></span>
            </a>
        </li>
        <?php endforeach; ?>
    </ol>
</nav>
```

**CSS:**
```css
.igny8-table-of-contents {
    background: var(--wp--preset--color--base, #ffffff);
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.igny8-toc-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.igny8-toc-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.igny8-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.igny8-toc-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.igny8-toc-link:hover {
    background: rgba(0, 0, 0, 0.04);
}

.igny8-toc-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(59, 130, 246, 0.1);
    color: rgba(59, 130, 246, 1);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.igny8-toc-text {
    flex: 1;
    font-size: 0.9375rem;
}
```

**Settings (Future Implementation):**
```php
// Plugin settings for TOC
$igny8_toc_settings = [
    'enabled' => true,
    'show_numbers' => true,
    'collapsible' => false,
    'sticky' => false,
    'min_headings' => 3, // Only show if 3+ H2 headings
];
```

---

### 10. Widget System

**Widget Placeholders:**

Widgets appear below square images (left/right aligned) where there's natural space.

**Placeholder Function:**
```php
function igny8_render_widget_placeholder($position, $section_index) {
    // Check if widgets are enabled in settings
    $widgets_enabled = get_option('igny8_widgets_enabled', false);
    
    if (!$widgets_enabled) {
        return '';
    }
    
    $placeholder_class = 'igny8-widget-placeholder igny8-widgets-enabled';
    $placeholder_class .= ' igny8-widget-' . $position; // left or right
    $placeholder_class .= ' igny8-widget-section-' . $section_index;
    
    ?>
    <div class="<?php echo esc_attr($placeholder_class); ?>" 
         data-widget-position="<?php echo esc_attr($position); ?>"
         data-section-index="<?php echo esc_attr($section_index); ?>">
        <!-- Widget content will be inserted here via settings -->
        <?php do_action('igny8_widget_placeholder', $position, $section_index); ?>
    </div>
    <?php
}
```

**Widget Settings (Future Implementation):**
```php
// Plugin settings for widgets
$igny8_widget_settings = [
    'enabled' => false,
    'sections' => [
        'section_1' => [
            'position' => 'right',
            'widget_type' => 'related_posts', // or 'custom_html', 'ad_unit', etc.
            'content' => '',
        ],
        'section_3' => [
            'position' => 'left',
            'widget_type' => 'newsletter_signup',
            'content' => '',
        ],
    ],
];
```

**Widget Types (Future):**
- Related Posts
- Newsletter Signup
- Ad Units
- Custom HTML
- Social Share Buttons
- Author Bio
- Call-to-Action Boxes

---

### 11. Updated Structure Overview

**WordPress Single Post:**
```
┌─────────────────────────────────────────────┐
│ HEADER                                       │
│  ← Back to Posts                            │
│                                             │
│  [H1 Title]              [Status Badge]     │
│                                             │
│  📅 Posted: Date  📄 Words  👤 Author       │
│  🧭 Topic: Cluster Name                     │
│  📁 [Category Badges]  🏷️ [Tag Badges]      │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│ FEATURED IMAGE (Landscape, max 1024px)      │
│                                             │
│  [Image Prompt - first use only]            │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│ TABLE OF CONTENTS                           │
│  📑 Table of Contents                       │
│    1. Section Heading One                   │
│    2. Section Heading Two                   │
│    3. Section Heading Three                 │
│    ... (clickable, smooth scroll)           │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│ INTRO SECTION                               │
│  Opening Narrative                          │
│  [Content...]                               │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│ SECTION 1                                   │
│  [Keyword Badge] [Tag Badge]                │
│  1  [H2 Heading]                            │
│                                             │
│  ┌──────────────┐ ┌──────────────────────┐ │
│  │              │ │                      │ │
│  │   Content    │ │  Square Image (50%)  │ │
│  │              │ │    Right Aligned     │ │
│  │              │ │  [Image Description] │ │
│  └──────────────┘ └──────────────────────┘ │
│                    [Widget Placeholder]     │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│ SECTION 2                                   │
│  [Keyword Badge]                            │
│  2  [H2 Heading]                            │
│                                             │
│  ┌───────────────────────────────────────┐ │
│  │   Landscape Image (100% max 1024px)   │ │
│  │        [Image Description]            │ │
│  └───────────────────────────────────────┘ │
│                                             │
│  [Content...]                               │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│ SECTION 3                                   │
│  [Keyword Badge] [Tag Badge]                │
│  3  [H2 Heading]                            │
│                                             │
│  ┌──────────────────────┐ ┌──────────────┐ │
│  │                      │ │              │ │
│  │  Square Image (50%)  │ │   Content    │ │
│  │    Left Aligned      │ │              │ │
│  │  [Image Description] │ │              │ │
│  └──────────────────────┘ └──────────────┘ │
│  [Widget Placeholder]                       │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│ SECTION 4 (with table example)             │
│  [Keyword Badge]                            │
│  4  [H2 Heading]                            │
│                                             │
│  ┌───────────────────────────────────────┐ │
│  │   Landscape Image (100% max 1024px)   │ │
│  │        [Image Description]            │ │
│  └───────────────────────────────────────┘ │
│                                             │
│  [Content before table...]                  │
│                                             │
│  ┌───────────────────────────────────────┐ │
│  │        TABLE                          │ │
│  │  [Data rows and columns]              │ │
│  └───────────────────────────────────────┘ │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│ SECTION 5 (reuse - no description)          │
│  [Keyword Badge]                            │
│  5  [H2 Heading]                            │
│                                             │
│  ┌───────────────────────────────────────┐ │
│  │ Featured Image REUSED (no caption)    │ │
│  └───────────────────────────────────────┘ │
│                                             │
│  [Content...]                               │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│ SECTION 6 (reuse - no description)          │
│  [Tag Badge]                                │
│  6  [H2 Heading]                            │
│                                             │
│  ┌──────────────┐ ┌──────────────────────┐ │
│  │   Content    │ │  Square Image REUSED │ │
│  │              │ │    (no caption)      │ │
│  └──────────────┘ └──────────────────────┘ │
│                    [Widget Placeholder]     │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│ METADATA FOOTER (Editor+ only)              │
│  ▸ View IGNY8 Metadata                      │
│    - Content ID: 123                        │
│    - Task ID: 456                           │
│    - Meta Title: ...                        │
│    - Meta Description: ...                  │
│    - Primary Keyword: ...                   │
│    - Secondary Keywords: [list]             │
│    - Cluster ID: 789                        │
│    - Sector: Industry Name                  │
│    - Source: AI Generated                   │
│    - Last Synced: Date/Time                 │
└─────────────────────────────────────────────┘
```

---

### 12. App ContentViewTemplate Updates

**Changes to body section only (not header):**

1. **Remove "Section Spotlight" label** - Replace with keyword badge matching system
2. **Add Table of Contents** below featured image (matching WordPress implementation)
3. **Match image layout rules** from WordPress template:
   - Section 1: Square right-aligned 50% (with description)
   - Section 2: Landscape full width max 1024px (with description)
   - Section 3: Square left-aligned 50% (with description)
   - Section 4: Landscape full width max 1024px (with description)
   - Sections 5+: Reuse images without descriptions
4. **Featured image** max 1024px centered
5. **Widget placeholders** below square images (empty for now)
6. **Table detection** - full-width image before tables

**Implementation Priority:**
- Phase 1: Update image sizing (1024px max)
- Phase 2: Implement keyword badge matching
- Phase 3: Add table of contents component
- Phase 4: Add widget placeholder divs

---

## Summary of Files to Update

| File | Changes | Priority |
|------|---------|----------|
| `igny8-content-template.css` | Container width breakpoints, image sizing classes, TOC styles, widget placeholder styles | 🔴 High |
| `igny8-header.php` | Remove emojis, add SVG icons, add Topic field, remove SEO/internal metadata | 🔴 High |
| `igny8-metadata.php` | Add role check (`current_user_can('edit_posts')`), include all moved metadata fields | 🔴 High |
| `igny8-content-sections.php` | Keyword badge matching logic, smart image distribution (Section 1-4 pattern), widget placeholders | 🔴 High |
| `igny8-featured-image.php` | Max 1024px, landscape priority | 🟡 Medium |
| `includes/template-functions.php` | Add helper functions: `igny8_get_section_badges()`, `igny8_section_has_table()`, `igny8_show_image_description()`, `igny8_generate_table_of_contents()` | 🔴 High |
| `ContentViewTemplate.tsx` | Match section labels, image layouts, add TOC component, widget placeholders | 🟡 Medium |
| **New File**: `parts/igny8-table-of-contents.php` | Table of contents component | 🟡 Medium |
| **New File**: `admin/settings-page.php` | Widget settings, TOC settings (future) | 🟢 Low |

---

## Configuration Settings (Future Implementation)

```php
// Plugin settings structure
$igny8_plugin_settings = [
    'table_of_contents' => [
        'enabled' => true,
        'show_numbers' => true,
        'collapsible' => false,
        'sticky' => false,
        'min_headings' => 3,
        'position' => 'after_featured_image', // or 'before_content', 'floating'
    ],
    'widgets' => [
        'enabled' => false,
        'sections' => [
            'section_1' => [
                'position' => 'right',
                'widget_type' => 'none', // 'related_posts', 'custom_html', 'ad_unit', etc.
                'content' => '',
            ],
            'section_3' => [
                'position' => 'left',
                'widget_type' => 'none',
                'content' => '',
            ],
        ],
    ],
    'images' => [
        'featured_max_width' => 1024,
        'landscape_max_width' => 1024,
        'square_width_percentage' => 50,
        'show_descriptions_sections' => 4, // Show descriptions in first N sections
    ],
    'badges' => [
        'show_section_badges' => true,
        'max_badges_per_section' => 2,
        'badge_sources' => ['primary_keyword', 'tags', 'categories', 'secondary_keywords'], // Priority order
    ],
];
```

---

## Implementation Phases

### Phase 1: Core Template Updates (Week 1)
- ✅ Update CSS container widths and image sizing
- ✅ Replace emojis with SVG icons in header
- ✅ Add Topic field to header
- ✅ Move metadata to bottom with role check
- ✅ Implement keyword badge matching logic

### Phase 2: Advanced Features (Week 2)
- ✅ Table of contents component
- ✅ Table detection and image positioning
- ✅ Image reuse logic (sections 5+)

### Phase 3: App Sync (Week 3)
- ✅ Update ContentViewTemplate.tsx to match WordPress
- ✅ Add TOC component to React app
- ✅ Sync image layouts and sizing

### Phase 4: Settings & Configuration (Week 4)
- ⏳ Plugin settings page
- ⏳ TOC configuration options
- ⏳ Widget management interface
- ⏳ Badge display preferences

---

**Last Updated:** January 10, 2026  
**Document Version:** 2.0  
**Status:** Design Complete - Ready for Implementation