Powerpoint

<instructions>
<powerpoint_professional_suite>

<high_fidelity_creation>
The preferred method for precise layout positioning:
1. **HTML**: Create slides (720pt x 405pt). Text MUST be in `<p>`, `<h1>`-`<h6>`, or `<ul>`.
2. **Visuals**: You MUST rasterize gradients/icons as PNGs using Sharp FIRST. **Reference**: `references/html2pptx.md`.
3. **Execution**: Run `html2pptx.js` to generate the presentation.
</high_fidelity_creation>

<template_structure>
For deck editing or template mapping:
- **Audit**: Generate thumbnail grid (`scripts/thumbnail.py`) to analyze layout.
- **Duplication**: Use `scripts/rearrange.py` to duplicate and reorder slides.
- **Text Injection**: Use `scripts/replace.py` with the JSON inventory to populate content.
</template_structure>

<design_quality>
- **Fonts**: You MUST use web-safe fonts ONLY (Arial, Helvetica, Georgia).
- **Colors**: You MUST NOT use the `#` prefix in PptxGenJS hex codes (causes corruption).
- **Layout**: You SHOULD prefer two-column or full-slide layouts. You MUST NOT stack charts below text.
- **Verification**: You MUST generate a final thumbnail grid with `--cols 4` to inspect for text cutoff or overlap issues.
</design_quality>

</powerpoint_professional_suite>
</instructions>


# HTML to PowerPoint Guide

Convert HTML slides to PowerPoint presentations with accurate positioning using the `html2pptx.js` library.

## Table of Contents

1. [Creating HTML Slides](#creating-html-slides)
2. [Using the html2pptx Library](#using-the-html2pptx-library)
3. [Using PptxGenJS](#using-pptxgenjs)

---

## Creating HTML Slides

Every HTML slide must include proper body dimensions:

### Layout Dimensions

- **16:9** (default): `width: 720pt; height: 405pt`
- **4:3**: `width: 720pt; height: 540pt`
- **16:10**: `width: 720pt; height: 450pt`

### Supported Elements

- `<p>`, `<h1>`-`<h6>` - Text with styling
- `<ul>`, `<ol>` - Lists (never use manual bullets •, -, *)
- `<b>`, `<strong>` - Bold text (inline formatting)
- `<i>`, `<em>` - Italic text (inline formatting)
- `<u>` - Underlined text (inline formatting)
- `<span>` - Inline formatting with CSS styles (bold, italic, underline, color)
- `<br>` - Line breaks
- `<div>` with bg/border - Becomes shape
- `<img>` - Images
- `class="placeholder"` - Reserved space for charts (returns `{ id, x, y, w, h }`)

### Critical Text Rules

**ALL text MUST be inside `<p>`, `<h1>`-`<h6>`, `<ul>`, or `<ol>` tags:**
- ✅ Correct: `<div><p>Text here</p></div>`
- ❌ Wrong: `<div>Text here</div>` - **Text will NOT appear in PowerPoint**
- ❌ Wrong: `<span>Text</span>` - **Text will NOT appear in PowerPoint**
- Text in `<div>` or `<span>` without a text tag will be silently ignored

**NEVER use manual bullet symbols (•, -, *, etc.)** - Use `<ul>` or `<ol>` lists instead

**ONLY use web-safe fonts that are universally available:**
- ✅ Web-safe fonts: `Arial`, `Helvetica`, `Times New Roman`, `Georgia`, `Courier New`, `Verdana`, `Tahoma`, `Trebuchet MS`, `Impact`, `Comic Sans MS`
- ❌ Wrong: `'Segoe UI'`, `'SF Pro'`, `'Roboto'`, custom fonts - **Might cause rendering issues**

### Styling

- Use `display: flex` on body to prevent margin collapse from breaking overflow validation
- Use `margin` for spacing (padding included in size)
- Inline formatting: Use `<b>`, `<i>`, `<u>` tags OR `<span>` with CSS styles
  - `<span>` supports: `font-weight: bold`, `font-style: italic`, `text-decoration: underline`, `color: #rrggbb`
  - `<span>` does NOT support: `mar