llm-dom-to-pptx 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 The Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,78 @@
+# llm-dom-to-pptx
+
+**Turn AI-generated HTML into native, editable PowerPoint slides.**
+
+`llm-dom-to-pptx` is a lightweight JavaScript library designed to bridge the gap between LLM-generated web designs (HTML/CSS) and Office productivity tools. Unlike screenshot-based tools, this library parses the DOM to create **fully editable** shapes, text blocks, and tables in PowerPoint.
+
+![Demo Comparison](demo/demo.png)
+
+*Left: Downloaded PPTX after conversion | Right: HTML generated by Kimi-k1.5 based on System_Prompt.md*
+
+## 🚀 Features
+
+- **Semantic Parsing**: Intelligently maps HTML structure (Flexbox, Grid, Tables) to PPTX layouts.
+- **Style Preservation**: captures background colors, rounded corners, borders, shadows, and fonts.
+- **Text Precision**: Handles complex text runs, bolding, colors, and alignments.
+- **Zero Backend**: Runs entirely in the browser using [PptxGenJS](https://gitbrent.github.io/PptxGenJS/).
+
+## 📦 Installation & Usage
+
+You can use the library directly via a script tag (e.g., via CDN once hosted, or locally).
+
+### 1. Include Dependencies
+This library depends on `PptxGenJS`.
+
+```html
+<!-- PptxGenJS (Required) -->
+<script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.min.js"></script>
+
+<!-- llm-dom-to-pptx -->
+<script src="dist/llm-dom-to-pptx.js"></script>
+```
+
+### 2. Prepare Your HTML
+Create a container for your slide. A fixed width (e.g., 960px) works best for 16:9 mapping.
+
+```html
+<div id="slide-canvas" style="width: 960px; height: 540px; background: white;">
+    <!-- Your AI-generated content here -->
+    <h1>Quarterly Report</h1>
+    <p>Success driven by innovation.</p>
+</div>
+```
+
+### 3. Export to PPTX
+Call the export function when ready.
+
+```javascript
+// Export using the element ID
+window.LLMDomToPptx.export('slide-canvas', { fileName: 'My_AI_Presentation.pptx' });
+```
+
+## 🧠 The Secret Sauce: System Prompt & Spec
+
+**Crucial:** This library is not a generic "convert any website to PPTX" tool. It is designed to work with **LLM-generated HTML** that follows specific constraints (the "Laws of Physics").
+
+To get good results, you must instruct your LLM (GPT-4, Claude 3.5, etc.) to generate HTML that this parser understands.
+
+### 1. The System Prompt
+We have provided a robust `System_Prompt.md` file in this repo. You **MUST** use this (or a variation of it) when asking an LLM to generate slides.
+
+**Key constraints enforced by the prompt:**
+*   **Root Container:** `<div id="slide-canvas" style="width: 960px; height: 540px;">`
+*   **Layouts:** Uses absolute positioning for major sections, Flexbox for internals.
+*   **Shapes:** Defines how CSS `border-radius` maps to PPTX Shapes (Rectangles vs Ellipses).
+*   **Typography:** Enforces standard fonts that map to PPTX-safe fonts.
+
+### 2. The Spec
+We will include a more complete version of the specification in future updates to fully explain all supported DOM and CSS elements.
+
+## 🙏 Acknowledgements
+
+*   **PptxGenJS**: The core engine that powers the PPTX generation.
+*   **Open Source Community**: For the continuous inspiration and tools.
+
+---
+
+
+

package/System_Prompt.md

@@ -0,0 +1,162 @@
+# **System Prompt: The "PPTX-Native" Designer**
+
+**Role:** You are a specialized **UI/UX Engineer** & **Presentation Designer**.
+
+**Task:** Generate HTML/Tailwind CSS code that serves as the source for a custom **DOM-to-PPTX Conversion Engine**.
+
+**Goal:** Create a 16:9 slide layout that is technically parseable but visually indistinguishable from a premium, professionally designed PowerPoint slide.
+
+## **1\. ⚙️ TECHNICAL CONSTRAINTS (The "Laws of Physics")**
+
+*Your code must strictly adhere to these rules for the custom parser to work. Violating these will cause the slide to render incorrectly.*
+
+### **A. Canvas & Coordinate System**
+
+1. **Root Container:** All content **MUST** be placed inside a root container with specific ID and dimensions:  
+1. \<div id="slide-canvas" class="relative bg-white w-\[960px\] h-\[540px\] overflow-hidden font-sans"\>  
+2.     \<\!-- Content goes here \--\>  
+3. \</div\>  
+2.   
+3. **Fixed Dimensions:** Always use **960px width** by **540px height**. Do not use w-full or h-screen for the root.  
+4. **Layout Strategy (Hybrid):**  
+   * **Top-Level (Layers):** Use **Absolute Positioning (absolute)** for high-level containers (Header, Sidebar, Main Content Area). The parser maps top/left pixels directly to PPTX coordinates.  
+   * **Internal (Content):** Use **Flexbox (flex)** *inside* those absolute containers to align text, icons, and numbers.  
+   * **NO Grid:** Do not use CSS Grid (grid) for the main layout, as the parser's coordinate mapping for grid gaps is limited.
+
+### **B. Shape & Style Recognition rules**
+
+1. **Rectangles:** Any div with a background-color becomes a PPTX Rectangle.  
+2. **Circles:** A div with equal width/height AND rounded-full (Border Radius ≥ 50%) becomes a PPTX Ellipse.  
+3. **Shadows:** Use Tailwind's shadow-lg, shadow-xl. The parser converts box-shadow to PPTX outer shadows.  
+4. **Borders:**  
+   * **Uniform:** border border-slate-200 converts to a shape outline.  
+   * **The "Strip Hack" (Crucial):** The parser has special logic for **Left Borders**. Use border-l-4 border-blue-500 (on a div with transparent or white bg) to create decorative colored strips on cards. This is highly recommended for "Card" designs.
+5. **Tables (Native Support):**
+   * Use standard <table>, <thead>, <tbody>, <tr>, <td>, <th>.
+   * The parser converts these into native PPTX tables.
+   * **Style limitations:** Use border, bg-gray-100, text-center on the <td>/<th> cells directly.
+
+### **C. Unsupported / Forbidden**
+
+* ❌ **No Gradients:** Use solid colors only. Complex gradients render poorly.  
+* ❌ **No Clip-Path:** Do not use CSS polygons; they will render as full rectangles.  
+* ❌ **No Pseudo-elements:** Avoid ::before / ::after. Use real DOM nodes.
+
+## **2\. 🎨 VISUAL DESIGN GUIDELINES (The "Aesthetics")**
+
+*Avoid the "Default HTML/Bootstrap" look. Follow these rules for a Premium SaaS Dashboard look.*
+
+### **A. Typography & Hierarchy**
+
+* **Contrast is Key:** Do not make all text the same size.  
+  * **Primary Metric:** Huge, Bold, Dark (e.g., text-5xl font-extrabold text-slate-900).  
+  * **Labels/Eyebrows:** Tiny, Uppercase, Spaced, Light (e.g., text-\[10px\] uppercase tracking-\[0.2em\] text-slate-400 font-bold).  
+  * **Body Text:** Small, Readable, Low Contrast (e.g., text-xs text-slate-500).  
+* **Font Family:** Always use standard sans-serif (font-sans / Inter).  
+* **Line Height:** For large headings, use tight line height (leading-tight or leading-none) to prevent ugly vertical gaps.
+
+### **B. Spacing & Layout**
+
+* **Generous Padding:** Avoid cramming content. Use p-6 or p-8 for cards.  
+* **Grid Alignment:** Use flex gap-6 or gap-8 to ensure consistent spacing between cards.  
+* **Breathing Room:** Leave empty space (white space) to guide the eye. Do not fill every pixel.
+
+### **C. Color Palette Strategy (60-30-10 Rule)**
+
+* **60% Neutral:** bg-slate-50 or bg-white (Backgrounds). Use off-white for the canvas to add depth.  
+* **30% Secondary:** slate-200, slate-800 (Borders, Dividers).  
+* **10% Accent:** indigo-600, emerald-500, rose-500 (Key metrics, Buttons).  
+* **No Pure Black:** Never use \#000000. Use text-slate-900 or text-gray-800.
+
+### **D. Card Design (Physicality)**
+
+* **Definition:** Cards should look like physical objects.  
+* **Style:** bg-white rounded-xl shadow-lg border border-slate-100.  
+* **Accents:** Add a splash of color using the "Strip Hack" (e.g., border-l-4 border-indigo-500).
+
+### **C. Table Design (If using tables)**
+
+* **Headers:** Use a light background (bg-slate-50) and bold text (font-bold) for <thead>.
+* **Borders:** Use simple borders (border-b border-slate-200) for rows. Avoid heavy grid lines on every cell.
+* **Spacing:** Use padding (p-3) in cells to keep data readable.
+
+## **3\. 💡 FEW-SHOT EXAMPLES (Copy these styles)**
+
+### **Style 1: "Soft Modern" (Cards, Shadows, Friendly)**
+
+4. \<div id="slide-canvas" class="relative bg-slate-50 w-\[960px\] h-\[540px\] overflow-hidden text-slate-800 font-sans"\>  
+5.     \<\!-- Header \--\>  
+6.     \<div class="absolute top-0 left-0 w-full px-12 py-10 z-10"\>  
+7.         \<span class="text-indigo-500 font-bold tracking-\[0.2em\] text-xs uppercase mb-2 block"\>Executive Summary\</span\>  
+8.         \<h1 class="text-4xl font-extrabold text-slate-900"\>Q4 Performance Overview\</h1\>  
+9.     \</div\>  
+10.     \<\!-- Cards \--\>  
+11.     \<div class="absolute top-40 left-0 w-full px-12 flex gap-8 z-20"\>  
+12.         \<\!-- Card 1 \--\>  
+13.         \<div class="flex-1 bg-white h-56 rounded-2xl shadow-xl border border-slate-200 border-l-8 border-l-indigo-500 p-8 flex flex-col justify-between"\>  
+14.             \<span class="text-slate-400 font-bold text-xs uppercase tracking-wider"\>Total Revenue\</span\>  
+15.             \<span class="text-5xl font-extrabold text-slate-900"\>$1.2M\</span\>  
+16.             \<span class="bg-indigo-50 text-indigo-700 px-3 py-1 rounded-lg text-xs font-bold self-start"\>+12% YoY\</span\>  
+17.         \</div\>  
+18.         \<\!-- Card 2 \--\>  
+19.         \<div class="flex-1 bg-white h-56 rounded-2xl shadow-xl border border-slate-200 border-l-8 border-l-emerald-500 p-8 flex flex-col justify-between"\>  
+20.             \<span class="text-slate-400 font-bold text-xs uppercase tracking-wider"\>Active Users\</span\>  
+21.             \<span class="text-5xl font-extrabold text-slate-900"\>850K\</span\>  
+22.             \<span class="text-slate-400 text-xs"\>Monthly Active Users\</span\>  
+23.         \</div\>  
+24.     \</div\>  
+25. \</div\>
+
+### **Style 2: "Dark Tech" (High Contrast, Neon, Futuristic)**
+
+26. \<div id="slide-canvas" class="relative bg-slate-900 w-\[960px\] h-\[540px\] overflow-hidden text-white font-sans"\>  
+27.     \<\!-- Background Accents \--\>  
+28.     \<div class="absolute top-0 right-0 w-64 h-64 bg-blue-600 rounded-full opacity-20 blur-3xl"\>\</div\>  
+29.       
+30.     \<\!-- Header \--\>  
+31.     \<div class="absolute top-10 left-12 z-10"\>  
+32.         \<h1 class="text-4xl font-bold"\>Server Metrics\</h1\>  
+33.         \<p class="text-slate-400 text-sm mt-1"\>Real-time status report\</p\>  
+34.     \</div\>  
+35.       
+36.     \<\!-- Content \--\>  
+37.     \<div class="absolute top-36 left-12 flex gap-6 z-20"\>  
+38.         \<div class="w-64 bg-slate-800 rounded-lg p-6 border border-slate-700 relative overflow-hidden"\>  
+39.             \<div class="absolute top-0 left-0 w-full h-1 bg-cyan-400"\>\</div\>  
+40.             \<p class="text-slate-400 text-\[10px\] uppercase tracking-widest"\>Uptime\</p\>  
+41.             \<p class="text-4xl font-mono font-bold text-white mt-2"\>99.9%\</p\>  
+42.         \</div\>  
+43.     \</div\>  
+44. \</div\>
+
+### **Style 3: "Swiss Grid" (Minimalist, Clean, Typography-focused)**
+
+45. \<div id="slide-canvas" class="relative bg-stone-50 w-\[960px\] h-\[540px\] overflow-hidden text-stone-900 font-sans"\>  
+46.     \<\!-- Sidebar \--\>  
+47.     \<div class="absolute top-0 left-0 w-\[280px\] h-full bg-stone-200 border-r border-stone-300 p-10 flex flex-col"\>  
+48.         \<div class="mb-10"\>  
+49.             \<div class="w-10 h-10 bg-black rounded-full mb-4"\>\</div\>  
+50.             \<h2 class="text-xs font-bold tracking-widest uppercase mb-1 text-stone-500"\>Quarter 4\</h2\>  
+51.             \<h1 class="text-3xl font-bold leading-tight"\>Sales\<br\>Briefing\</h1\>  
+52.         \</div\>  
+53.     \</div\>  
+54.     \<\!-- Right Content \--\>  
+55.     \<div class="absolute top-0 left-\[280px\] w-\[680px\] h-full p-10"\>  
+56.         \<div class="border-b border-stone-300 pb-8"\>  
+57.             \<span class="text-xs font-bold text-stone-500 uppercase block mb-2"\>Total Revenue\</span\>  
+58.             \<div class="flex items-baseline gap-4"\>  
+59.                 \<span class="text-6xl font-black tracking-tighter"\>$1,250,000\</span\>  
+60.                 \<span class="text-emerald-600 font-bold text-lg"\>▲ 15%\</span\>  
+61.             \</div\>  
+62.         \</div\>  
+63.     \</div\>  
+64. \</div\>
+
+## **4\. 🚀 FINAL INSTRUCTION**
+
+Generate the HTML code for the user's request based on the guidelines above.
+
+1. **Output ONLY the HTML** starting with the \<div id="slide-canvas"\> tag.  
+2. Ensure all CSS uses valid **Tailwind CSS** utility classes.  
+3. **Check:** Did you use 960px width? Did you use absolute for layout? Did you use high contrast typography?  
+4. **Use Tables:** if the user asks for detailed data comparisons or lists with multiple columns.

package/dist/llm-dom-to-pptx.js

@@ -0,0 +1,565 @@
+/**
+ * LLM DOM to PPTX - v1.0.0
+ * Converts Semantic HTML/CSS (e.g. from LLMs) into editable PPTX.
+ * 
+ * Dependencies:
+ * - PptxGenJS (https://gitbrent.github.io/PptxGenJS/)
+ */
+
+(function (root) {
+    'use strict';
+
+    // --- 1. Font Mapping Utilities ---
+
+    const FONT_MAP = {
+        // Sans-Serif
+        "Inter": "Arial",
+        "Roboto": "Arial",
+        "Open Sans": "Calibri",
+        "Lato": "Calibri",
+        "Montserrat": "Arial",
+        "Source Sans Pro": "Arial",
+        "Noto Sans": "Arial",
+        "Helvetica": "Arial",
+        "San Francisco": "Arial",
+        "Segoe UI": "Segoe UI",
+        "System-UI": "Segoe UI",
+
+        // Serif
+        "Times New Roman": "Times New Roman",
+        "Georgia": "Georgia",
+        "Merriweather": "Times New Roman",
+        "Playfair Display": "Georgia",
+
+        // Monospace
+        "Courier New": "Courier New",
+        "Fira Code": "Courier New",
+        "Roboto Mono": "Courier New",
+
+        // Fallbacks
+        "sans-serif": "Arial",
+        "serif": "Times New Roman",
+        "monospace": "Courier New"
+    };
+
+    /**
+     * Returns a PPTX-safe font name based on the input web font family.
+     */
+    function getSafeFont(fontFamily) {
+        if (!fontFamily) return "Arial";
+        const clean = fontFamily.replace(/['"]/g, '');
+        const fonts = clean.split(',').map(f => f.trim());
+        for (let f of fonts) {
+            if (FONT_MAP[f]) return FONT_MAP[f];
+            const key = Object.keys(FONT_MAP).find(k => k.toLowerCase() === f.toLowerCase());
+            if (key) return FONT_MAP[key];
+        }
+        return "Arial";
+    }
+
+    // --- 2. Color & Unit Utilities ---
+
+    /**
+     * Parses a color string into Hex and Transparency (%).
+     * Handles #Hex, rgb(), and rgba().
+     * @returns {Object|null} { color: "RRGGBB", transparency: 0-100 } or null
+     */
+    function parseColor(colorStr, opacity = 1) {
+        if (!colorStr || colorStr === 'rgba(0, 0, 0, 0)' || colorStr === 'transparent') return null;
+
+        let r, g, b, a = 1;
+
+        if (colorStr.startsWith('#')) {
+            const hex = colorStr.substring(1);
+            if (hex.length === 3) {
+                r = parseInt(hex[0] + hex[0], 16);
+                g = parseInt(hex[1] + hex[1], 16);
+                b = parseInt(hex[2] + hex[2], 16);
+            } else {
+                r = parseInt(hex.substring(0, 2), 16);
+                g = parseInt(hex.substring(2, 4), 16);
+                b = parseInt(hex.substring(4, 6), 16);
+            }
+        } else if (colorStr.startsWith('rgb')) {
+            const values = colorStr.match(/(\d+(\.\d+)?)/g);
+            if (!values || values.length < 3) return null;
+            r = parseFloat(values[0]);
+            g = parseFloat(values[1]);
+            b = parseFloat(values[2]);
+            if (values.length > 3) {
+                a = parseFloat(values[3]);
+            }
+        } else {
+            return null;
+        }
+
+        // Combine CSS opacity with Color Alpha
+        const finalAlpha = a * opacity;
+
+        // Convert to Hex string "RRGGBB"
+        const toHex = (n) => {
+            const h = Math.round(n).toString(16);
+            return h.length === 1 ? '0' + h : h;
+        };
+        const hex = toHex(r) + toHex(g) + toHex(b);
+
+        // Calculate Transparency Percent (0 = Opaque, 100 = Transparent)
+        // PPTX gen uses percent transparency
+        const transparency = Math.round((1 - finalAlpha) * 100);
+
+        return {
+            color: hex,
+            transparency: transparency
+        };
+    }
+
+    // Deprecated but kept for compatibility references if any
+    function rgbToHex(rgb) {
+        const p = parseColor(rgb);
+        return p ? '#' + p.color : null;
+    }
+
+    const PPI = 96;
+    const SLIDE_WIDTH_PX = 960; // Default reference width
+    const PPT_WIDTH_IN = 10;
+
+    // We calculate generic scale based on 960px. 
+    // If the user's container is different, we might want to adjust, 
+    // but usually 960px is a good "logical" width for a slide.
+    const SCALE = PPT_WIDTH_IN / SLIDE_WIDTH_PX;
+
+    function pxToInch(px) {
+        return parseFloat(px) * SCALE;
+    }
+
+    // --- 3. Main Export Function ---
+
+    /**
+     * Exports a DOM element to PPTX.
+     * @param {string|HTMLElement} elementOrId - The DOM element or ID to export.
+     * @param {object} options - Options { fileName: "presentation.pptx" }
+     */
+    async function exportToPPTX(elementOrId = 'slide-canvas', options = {}) {
+        const fileName = options.fileName || "presentation.pptx";
+
+        console.log(`Starting PPTX Export for ${elementOrId}...`);
+
+        if (typeof PptxGenJS === 'undefined') {
+            console.error("PptxGenJS is not loaded. Please include it via CDN.");
+            alert("Error: PptxGenJS library missing.");
+            return;
+        }
+
+        const pres = new PptxGenJS();
+        pres.layout = 'LAYOUT_16x9';
+
+        const slide = pres.addSlide();
+
+        // Resolve Container
+        let container;
+        if (typeof elementOrId === 'string') {
+            container = document.getElementById(elementOrId);
+        } else {
+            container = elementOrId;
+        }
+
+        if (!container) {
+            console.error(`Slide container '${elementOrId}' not found!`);
+            return;
+        }
+
+        const containerRect = container.getBoundingClientRect();
+
+        // --- 0. Slide Background ---
+        const containerStyle = window.getComputedStyle(container);
+        const bgParsed = parseColor(containerStyle.backgroundColor);
+        if (bgParsed) {
+            slide.background = { color: bgParsed.color, transparency: bgParsed.transparency };
+        }
+
+        // Visited nodes set to prevent ghosting/duplication
+        const processedNodes = new Set();
+
+        // --- Helper: recurse gather text runs ---
+        function collectTextRuns(node, parentStyle) {
+            let runs = [];
+            if (!node) return runs;
+
+            // Skip non-visible if element
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const s = window.getComputedStyle(node);
+                if (s.display === 'none' || s.visibility === 'hidden' || parseFloat(s.opacity) === 0) return runs;
+            }
+
+            node.childNodes.forEach(child => {
+                if (child.nodeType === Node.TEXT_NODE) {
+                    const text = child.textContent;
+                    if (!text) return;
+
+                    // Inherit style from parent element if current is text node
+                    const style = (node.nodeType === Node.ELEMENT_NODE) ? window.getComputedStyle(node) : parentStyle;
+
+                    const colorParsed = parseColor(style.color, parseFloat(style.opacity) || 1);
+                    const fontSize = parseFloat(style.fontSize);
+                    const fontWeight = (style.fontWeight === '700' || style.fontWeight === 'bold' || parseInt(style.fontWeight) >= 600);
+
+                    // Normalize Whitespace:
+                    // 1. Newlines/Tabs -> Space
+                    let runText = text.replace(/[\r\n\t]+/g, ' ');
+
+                    if (style.textTransform === 'uppercase') runText = runText.toUpperCase();
+
+                    if (!runText) return;
+
+                    const runOpts = {
+                        color: colorParsed ? colorParsed.color : '000000',
+                        fontSize: fontSize * 0.75, // px to pt
+                        bold: fontWeight,
+                        fontFace: getSafeFont(style.fontFamily),
+                        charSpacing: (style.letterSpacing && style.letterSpacing !== 'normal') ? parseFloat(style.letterSpacing) : 0,
+                        breakLine: false
+                    };
+
+                    if (colorParsed && colorParsed.transparency > 0) {
+                        runOpts.transparency = colorParsed.transparency;
+                    }
+
+                    // highlight (background color) support
+                    const bgParsed = parseColor(style.backgroundColor, parseFloat(style.opacity) || 1);
+                    if (bgParsed && bgParsed.transparency < 100) {
+                        runOpts.highlight = bgParsed.color;
+                    }
+
+                    runs.push({
+                        text: runText,
+                        options: runOpts
+                    });
+                } else if (child.nodeType === Node.ELEMENT_NODE) {
+                    if (child.tagName === 'BR') {
+                        runs.push({ text: '', options: { breakLine: true } });
+                    } else {
+                        runs.push(...collectTextRuns(child, window.getComputedStyle(child)));
+                    }
+                }
+            });
+            return runs;
+        }
+
+        // --- Helper: Identify logical Text Block ---
+        function isTextBlock(node) {
+            if (node.nodeType !== Node.ELEMENT_NODE) return false;
+            if (node.childNodes.length === 0) return false;
+
+            let hasText = false;
+            node.childNodes.forEach(c => {
+                if (c.nodeType === Node.TEXT_NODE && c.textContent.trim().length > 0) hasText = true;
+            });
+            return hasText;
+        }
+
+        function processNode(node) {
+            if (node.nodeType !== Node.ELEMENT_NODE) return;
+            if (processedNodes.has(node)) return;
+            processedNodes.add(node);
+
+            const style = window.getComputedStyle(node);
+            const rect = node.getBoundingClientRect();
+            const opacity = parseFloat(style.opacity) || 1;
+
+            // Skip invisible
+            if (style.display === 'none' || style.visibility === 'hidden' || opacity === 0) return;
+
+            // Skip zero size (unless overflow)
+            if (rect.width < 1 || rect.height < 1) return;
+
+            // Relative Coordinates
+            const x = pxToInch(rect.left - containerRect.left);
+            const y = pxToInch(rect.top - containerRect.top);
+            const w = pxToInch(rect.width);
+            const h = pxToInch(rect.height);
+
+            // --- TABLE HANDLING ---
+            if (node.tagName === 'TABLE') {
+                // Shadow Handler (Updated)
+                if (style.boxShadow && style.boxShadow !== 'none') {
+                    let tableBg = style.backgroundColor;
+                    let tableOp = parseFloat(style.opacity) || 1;
+                    let shadowFill = parseColor(tableBg, tableOp);
+
+                    if (!shadowFill || shadowFill.transparency === 100) {
+                        shadowFill = { color: 'FFFFFF', transparency: 99 };
+                    }
+
+                    // Now we trust 'h' matches sum(rowHeights) because we enforce it below.
+                    slide.addShape(pres.ShapeType.rect, {
+                        x: x, y: y, w: w, h: h,
+                        fill: { color: shadowFill.color, transparency: shadowFill.transparency },
+                        shadow: { type: 'outer', angle: 45, blur: 10, offset: 4, opacity: 0.3 },
+                        rectRadius: 0
+                    });
+                }
+
+                const tableRows = [];
+                let colWidths = [];
+                let rowHeights = []; // New strictly mapped row heights
+
+                if (node.rows.length > 0) {
+                    colWidths = Array.from(node.rows[0].cells).map(c => pxToInch(c.getBoundingClientRect().width));
+
+                    // Capture exact row heights
+                    rowHeights = Array.from(node.rows).map(r => pxToInch(r.getBoundingClientRect().height));
+                }
+
+                Array.from(node.rows).forEach(row => {
+                    const rowData = [];
+                    Array.from(row.cells).forEach(cell => {
+                        const cStyle = window.getComputedStyle(cell);
+                        const cRuns = collectTextRuns(cell, cStyle);
+
+                        // backgroundColor fallback: Cell -> Row -> Row Parent (tbody/thead) -> Table
+                        let effectiveBg = cStyle.backgroundColor;
+                        let effectiveOpacity = parseFloat(cStyle.opacity) || 1;
+
+                        if ((!effectiveBg || effectiveBg === 'rgba(0, 0, 0, 0)' || effectiveBg === 'transparent') && row) {
+                            const rStyle = window.getComputedStyle(row);
+                            effectiveBg = rStyle.backgroundColor;
+                            effectiveOpacity = parseFloat(rStyle.opacity) || 1;
+
+                            if ((!effectiveBg || effectiveBg === 'rgba(0, 0, 0, 0)' || effectiveBg === 'transparent') && row.parentElement) {
+                                const pStyle = window.getComputedStyle(row.parentElement);
+                                effectiveBg = pStyle.backgroundColor;
+                                effectiveOpacity = parseFloat(pStyle.opacity) || 1;
+                            }
+                        }
+
+                        const bgP = parseColor(effectiveBg, effectiveOpacity);
+                        // Borders logic handles separately or assumes solid for now
+                        const bCP = parseColor(cStyle.borderColor);
+
+                        let vAlign = 'top';
+                        if (cStyle.verticalAlign === 'middle') vAlign = 'middle';
+                        if (cStyle.verticalAlign === 'bottom') vAlign = 'bottom';
+
+                        const pt = (parseFloat(cStyle.paddingTop) || 0) * 0.75;
+                        const pr = (parseFloat(cStyle.paddingRight) || 0) * 0.75;
+                        const pb = (parseFloat(cStyle.paddingBottom) || 0) * 0.75;
+                        const pl = (parseFloat(cStyle.paddingLeft) || 0) * 0.75;
+                        const margin = [pt, pr, pb, pl];
+
+                        const getBdr = (w, c, s) => {
+                            if (!w || parseFloat(w) === 0 || s === 'none') return null;
+                            const co = parseColor(c) || { color: '000000' };
+                            return { pt: parseFloat(w) * 0.75, color: co.color };
+                        };
+
+                        const bTop = getBdr(cStyle.borderTopWidth, cStyle.borderTopColor, cStyle.borderTopStyle);
+                        const bRight = getBdr(cStyle.borderRightWidth, cStyle.borderRightColor, cStyle.borderRightStyle);
+                        const bBot = getBdr(cStyle.borderBottomWidth, cStyle.borderBottomColor, cStyle.borderBottomStyle);
+                        const bLeft = getBdr(cStyle.borderLeftWidth, cStyle.borderLeftColor, cStyle.borderLeftStyle);
+
+                        const cellOpts = {
+                            valign: vAlign,
+                            align: cStyle.textAlign === 'center' ? 'center' : (cStyle.textAlign === 'right' ? 'right' : 'left'),
+                            margin: margin,
+                            border: [bTop, bRight, bBot, bLeft]
+                        };
+
+                        if (bgP && bgP.transparency < 100) {
+                            cellOpts.fill = { color: bgP.color };
+                            if (bgP.transparency > 0) cellOpts.fill.transparency = bgP.transparency;
+                        }
+
+                        rowData.push({
+                            text: cRuns,
+                            options: cellOpts
+                        });
+
+                        const markChildren = (n) => {
+                            processedNodes.add(n);
+                            Array.from(n.children).forEach(markChildren);
+                        }
+                        markChildren(cell);
+                        processedNodes.add(cell);
+                    });
+                    tableRows.push(rowData);
+                    processedNodes.add(row);
+                });
+
+                if (tableRows.length > 0) {
+                    slide.addTable(tableRows, {
+                        x: x, y: y, w: w, colW: colWidths, rowH: rowHeights, autoPage: true
+                    });
+                }
+                processedNodes.add(node);
+                return;
+            }
+
+            // --- A. BACKGROUNDS & BORDERS ---
+            const bgParsed = parseColor(style.backgroundColor, opacity);
+            const borderW = parseFloat(style.borderWidth) || 0;
+            const borderParsed = parseColor(style.borderColor);
+
+            let hasFill = bgParsed && bgParsed.transparency < 100;
+            let hasBorder = borderW > 0 && borderParsed;
+
+            let shapeOpts = { x, y, w, h };
+
+            const borderRadius = parseFloat(style.borderRadius) || 0;
+            // Strict circle check
+            const isCircle = (Math.abs(rect.width - rect.height) < 2) && (borderRadius >= rect.width / 2 - 1);
+
+            // Shadow Support
+            if (style.boxShadow && style.boxShadow !== 'none') {
+                shapeOpts.shadow = { type: 'outer', angle: 45, blur: 6, offset: 2, opacity: 0.2 };
+            }
+
+            // --- Radius Logic ---
+            let shapeType = pres.ShapeType.rect;
+            if (isCircle) {
+                shapeType = pres.ShapeType.ellipse;
+            } else if (borderRadius > 0) {
+                const minDim = Math.min(rect.width, rect.height);
+                let ratio = borderRadius / (minDim / 2);
+                shapeOpts.rectRadius = Math.min(ratio, 1.0);
+                shapeType = pres.ShapeType.roundRect || 'roundRect';
+            }
+
+            // --- Border Logic ---
+            if (hasBorder && style.borderLeftWidth === style.borderRightWidth) {
+                shapeOpts.line = { color: borderParsed.color, width: borderW * 0.75 };
+            } else {
+                shapeOpts.line = null;
+            }
+
+            // --- B. LEFT ACCENT BORDER (Custom Strategy) ---
+            const lW = parseFloat(style.borderLeftWidth) || 0;
+            const leftBorderParsed = parseColor(style.borderLeftColor);
+
+            const hasLeftBorder = lW > 0 && leftBorderParsed && style.borderStyle !== 'none';
+
+            if (hasLeftBorder && !shapeOpts.line) {
+                if (hasFill) {
+                    // Underlay Strategy
+                    const underlayOpts = { ...shapeOpts };
+                    underlayOpts.fill = { color: leftBorderParsed.color };
+                    underlayOpts.line = null;
+                    slide.addShape(shapeType, underlayOpts);
+
+                    // Adjust Main Shape
+                    const borderInch = pxToInch(lW);
+                    shapeOpts.x += borderInch;
+                    shapeOpts.w -= borderInch;
+                    delete shapeOpts.shadow; // Remove duplicate shadow
+                } else {
+                    // Side Strip Strategy
+                    slide.addShape(pres.ShapeType.rect, {
+                        x: x, y: y, w: pxToInch(lW), h: h,
+                        fill: { color: leftBorderParsed.color },
+                        rectRadius: isCircle ? 0 : (shapeOpts.rectRadius || 0)
+                    });
+                }
+            }
+
+            // Draw Main Shape
+            if (hasFill) {
+                shapeOpts.fill = { color: bgParsed.color };
+                if (bgParsed.transparency > 0) {
+                    shapeOpts.fill.transparency = bgParsed.transparency;
+                }
+                slide.addShape(shapeType, shapeOpts);
+            } else if (hasBorder && shapeOpts.line) {
+                slide.addShape(shapeType, shapeOpts);
+            }
+
+            // --- Gradient Fallback ---
+            if (style.backgroundImage && style.backgroundImage.includes('gradient')) {
+                // If it's a bar/strip
+                if (rect.height < 15 && rect.width > 100) {
+                    slide.addShape(pres.ShapeType.rect, {
+                        x: x, y: y, w: w, h: h,
+                        fill: { color: '4F46E5' } // Fallback
+                    });
+                }
+            }
+
+            // --- C. TEXT CONTENT ---
+            if (isTextBlock(node)) {
+
+                // Extra check: If this is a very deep node, does it have children that are also text blocks?
+                // Logic: isTextBlock returns true if it has text nodes.
+
+                const runs = collectTextRuns(node, style);
+
+                if (runs.length > 0) {
+                    if (runs.length > 0) {
+                        runs[0].text = runs[0].text.replace(/^\s+/, '');
+                        runs[runs.length - 1].text = runs[runs.length - 1].text.replace(/\s+$/, '');
+                    }
+                    const validRuns = runs.filter(r => r.text !== '' || r.options.breakLine);
+
+                    if (validRuns.length > 0) {
+                        let align = 'left';
+                        if (style.textAlign === 'center') align = 'center';
+                        if (style.textAlign === 'right') align = 'right';
+                        if (style.textAlign === 'justify') align = 'justify';
+
+                        let valign = 'top';
+                        const pt = parseFloat(style.paddingTop) || 0;
+                        const pb = parseFloat(style.paddingBottom) || 0;
+                        const boxH = rect.height;
+                        const textH = parseFloat(style.fontSize) * 1.2;
+
+                        if (style.display.includes('flex') && style.alignItems === 'center') valign = 'middle';
+                        else if (Math.abs(pt - pb) < 5 && pt > 5) valign = 'middle';
+                        else if (boxH < 40 && boxH > textH) valign = 'middle';
+
+                        if (style.display.includes('flex')) {
+                            if (style.justifyContent === 'center') align = 'center';
+                            else if (style.justifyContent === 'flex-end' || style.justifyContent === 'right') align = 'right';
+                        }
+                        if (node.tagName === 'SPAN') {
+                            align = 'center'; valign = 'middle';
+                        }
+
+                        const widthBuffer = pxToInch(4);
+                        const inset = Math.max(0, pxToInch(Math.min(pt, parseFloat(style.paddingLeft) || 0)));
+
+                        slide.addText(runs, {
+                            x: x, y: y, w: w + widthBuffer, h: h,
+                            align: align, valign: valign, margin: 0, inset: inset,
+                            autoFit: false, wrap: true
+                        });
+                    }
+
+                    // Mark children as processed
+                    const markSeen = (n) => {
+                        n.childNodes.forEach(c => {
+                            if (c.nodeType === Node.ELEMENT_NODE) {
+                                processedNodes.add(c);
+                                markSeen(c);
+                            }
+                        });
+                    };
+                    markSeen(node);
+                }
+            } else {
+                Array.from(node.children).forEach(processNode);
+            }
+        }
+
+        // Start Processing
+        Array.from(container.children).forEach(processNode);
+
+        // Save
+        pres.writeFile({ fileName: fileName });
+    }
+
+    // --- Exports ---
+    root.LLMDomToPptx = {
+        export: exportToPPTX
+    };
+
+    // Keep old global for compatibility if needed
+    root.exportToPPTX = exportToPPTX;
+
+})(window);

package/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "llm-dom-to-pptx",
+    "version": "1.0.0",
+    "description": "Turn AI-generated HTML/CSS into native, editable PowerPoint slides.",
+    "main": "dist/llm-dom-to-pptx.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "keywords": [
+        "pptx",
+        "powerpoint",
+        "html-to-pptx",
+        "llm",
+        "ai",
+        "dom",
+        "presentation"
+    ],
+    "author": "User",
+    "license": "MIT",
+    "files": [
+        "dist",
+        "README.md",
+        "System_Prompt.md"
+    ],
+    "peerDependencies": {
+        "pptxgenjs": "^3.12.0"
+    }
+}