llm-dom-to-pptx 1.0.0 → 1.0.2

package/README.md

@@ -4,9 +4,8 @@
 
 `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)
+https://github.com/user-attachments/assets/527efb28-b0ae-450a-9710-60cac2924acc
 
-*Left: Downloaded PPTX after conversion | Right: HTML generated by Kimi-k1.5 based on System_Prompt.md*
 
 ## 🚀 Features
 
@@ -24,10 +23,12 @@ This library depends on `PptxGenJS`.
 
 ```html
 <!-- PptxGenJS (Required) -->
+<script src="https://cdn.tailwindcss.com"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
 <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>
+<script src="https://cdn.jsdelivr.net/npm/llm-dom-to-pptx@1.0.2/dist/llm-dom-to-pptx.js"></script>
 ```
 
 ### 2. Prepare Your HTML

package/System_Prompt.md

@@ -1,162 +1,168 @@
-# **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.
+# **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)**
+
+```html
+<div id="slide-canvas" class="relative bg-slate-50 w-[960px] h-[540px] overflow-hidden text-slate-800 font-sans">
+    <!-- Header -->
+    <div class="absolute top-0 left-0 w-full px-12 py-10 z-10">
+        <span class="text-indigo-500 font-bold tracking-[0.2em] text-xs uppercase mb-2 block">Executive Summary</span>
+        <h1 class="text-4xl font-extrabold text-slate-900">Q4 Performance Overview</h1>
+    </div>
+    <!-- Cards -->
+    <div class="absolute top-40 left-0 w-full px-12 flex gap-8 z-20">
+        <!-- Card 1 -->
+        <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">
+            <span class="text-slate-400 font-bold text-xs uppercase tracking-wider">Total Revenue</span>
+            <span class="text-5xl font-extrabold text-slate-900">$1.2M</span>
+            <span class="bg-indigo-50 text-indigo-700 px-3 py-1 rounded-lg text-xs font-bold self-start">+12% YoY</span>
+        </div>
+        <!-- Card 2 -->
+        <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">
+            <span class="text-slate-400 font-bold text-xs uppercase tracking-wider">Active Users</span>
+            <span class="text-5xl font-extrabold text-slate-900">850K</span>
+            <span class="text-slate-400 text-xs">Monthly Active Users</span>
+        </div>
+    </div>
+</div>
+```
+
+### **Style 2: "Dark Tech" (High Contrast, Neon, Futuristic)**
+
+```html
+<div id="slide-canvas" class="relative bg-slate-900 w-[960px] h-[540px] overflow-hidden text-white font-sans">
+    <!-- Background Accents -->
+    <div class="absolute top-0 right-0 w-64 h-64 bg-blue-600 rounded-full opacity-20 blur-3xl"></div>
+    
+    <!-- Header -->
+    <div class="absolute top-10 left-12 z-10">
+        <h1 class="text-4xl font-bold">Server Metrics</h1>
+        <p class="text-slate-400 text-sm mt-1">Real-time status report</p>
+    </div>
+    
+    <!-- Content -->
+    <div class="absolute top-36 left-12 flex gap-6 z-20">
+        <div class="w-64 bg-slate-800 rounded-lg p-6 border border-slate-700 relative overflow-hidden">
+            <div class="absolute top-0 left-0 w-full h-1 bg-cyan-400"></div>
+            <p class="text-slate-400 text-[10px] uppercase tracking-widest">Uptime</p>
+            <p class="text-4xl font-mono font-bold text-white mt-2">99.9%</p>
+        </div>
+    </div>
+</div>
+```
+
+### **Style 3: "Swiss Grid" (Minimalist, Clean, Typography-focused)**
+
+```html
+<div id="slide-canvas" class="relative bg-stone-50 w-[960px] h-[540px] overflow-hidden text-stone-900 font-sans">
+    <!-- Sidebar -->
+    <div class="absolute top-0 left-0 w-[280px] h-full bg-stone-200 border-r border-stone-300 p-10 flex flex-col">
+        <div class="mb-10">
+            <div class="w-10 h-10 bg-black rounded-full mb-4"></div>
+            <h2 class="text-xs font-bold tracking-widest uppercase mb-1 text-stone-500">Quarter 4</h2>
+            <h1 class="text-3xl font-bold leading-tight">Sales<br>Briefing</h1>
+        </div>
+    </div>
+    <!-- Right Content -->
+    <div class="absolute top-0 left-[280px] w-[680px] h-full p-10">
+        <div class="border-b border-stone-300 pb-8">
+            <span class="text-xs font-bold text-stone-500 uppercase block mb-2">Total Revenue</span>
+            <div class="flex items-baseline gap-4">
+                <span class="text-6xl font-black tracking-tighter">$1,250,000</span>
+                <span class="text-emerald-600 font-bold text-lg">▲ 15%</span>
+            </div>
+        </div>
+    </div>
+</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

@@ -1,5 +1,5 @@
 /**
- * LLM DOM to PPTX - v1.0.0
+ * LLM DOM to PPTX - v1.0.2
  * Converts Semantic HTML/CSS (e.g. from LLMs) into editable PPTX.
  * 
  * Dependencies:
@@ -153,7 +153,10 @@
         const pres = new PptxGenJS();
         pres.layout = 'LAYOUT_16x9';
 
-        const slide = pres.addSlide();
+        const PPT_HEIGHT_IN = 5.625; // 16:9 aspect ratio of 10 inch width
+
+        let slide = pres.addSlide();
+        let currentSlideYOffset = 0; // Tracks Y offset for multi-page support
 
         // Resolve Container
         let container;
@@ -204,8 +207,7 @@
                     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, ' ');
+                    let runText = text.replace(/\s+/g, ' ');
 
                     if (style.textTransform === 'uppercase') runText = runText.toUpperCase();
 
@@ -216,7 +218,6 @@
                         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
                     };
 
@@ -224,10 +225,32 @@
                         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;
+                    // NOTE: We intentionally do NOT apply 'highlight' here because:
+                    // 1. If this text is in a parent that has a background, that background
+                    //    is already drawn as a shape by processNode.
+                    // 2. Adding highlight would create duplicate/overlapping backgrounds.
+                    // 3. PPTX highlight is meant for inline text highlighting, not block backgrounds.
+
+                    // Border-bottom as text underline support (only for inline/paragraph elements)
+                    // Common pattern: <span class="border-b-2 border-b-indigo-500">text</span>
+                    // Exclude headings (h1-h6) as they use border-b as section separators
+                    const parentTag = node.tagName ? node.tagName.toUpperCase() : '';
+                    const isInlineOrParagraph = ['SPAN', 'P', 'A', 'LABEL', 'STRONG', 'EM', 'B', 'I'].includes(parentTag);
+
+                    const borderBottomWidth = parseFloat(style.borderBottomWidth) || 0;
+                    const borderBottomStyle = style.borderBottomStyle;
+                    if (isInlineOrParagraph && borderBottomWidth > 0 && borderBottomStyle !== 'none') {
+                        runOpts.underline = { style: 'sng' }; // Single underline
+                        // Try to get underline color from border color
+                        const borderColorParsed = parseColor(style.borderBottomColor);
+                        if (borderColorParsed) {
+                            runOpts.underline.color = borderColorParsed.color;
+                        }
+                    }
+
+                    // CSS text-decoration: underline support
+                    if (style.textDecoration && style.textDecoration.includes('underline')) {
+                        runOpts.underline = { style: 'sng' };
                     }
 
                     runs.push({
@@ -274,13 +297,18 @@
 
             // 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);
+            const y = pxToInch(rect.top - containerRect.top) - currentSlideYOffset;
+            let w = pxToInch(rect.width);
+            let h = pxToInch(rect.height);
+
+            // Enforce minimum dimensions for very thin elements (like h-px lines)
+            const MIN_DIM = 0.02; // ~2px in PowerPoint
+            if (h < MIN_DIM && h > 0) h = MIN_DIM;
+            if (w < MIN_DIM && w > 0) w = MIN_DIM;
 
             // --- TABLE HANDLING ---
             if (node.tagName === 'TABLE') {
-                // Shadow Handler (Updated)
+                // Shadow Handler
                 if (style.boxShadow && style.boxShadow !== 'none') {
                     let tableBg = style.backgroundColor;
                     let tableOp = parseFloat(style.opacity) || 1;
@@ -290,7 +318,6 @@
                         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 },
@@ -301,12 +328,10 @@
 
                 const tableRows = [];
                 let colWidths = [];
-                let rowHeights = []; // New strictly mapped row heights
+                let rowHeights = [];
 
                 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));
                 }
 
@@ -316,7 +341,6 @@
                         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;
 
@@ -333,28 +357,41 @@
                         }
 
                         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 pt = pxToInch(parseFloat(cStyle.paddingTop) || 0);
+                        const pr = pxToInch(parseFloat(cStyle.paddingRight) || 0);
+                        const pb = pxToInch(parseFloat(cStyle.paddingBottom) || 0);
+                        const pl = pxToInch(parseFloat(cStyle.paddingLeft) || 0);
                         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 getBdr = (w, c, s, fallbackW, fallbackC, fallbackS) => {
+                            if (w && parseFloat(w) > 0 && s !== 'none') {
+                                const co = parseColor(c) || { color: '000000' };
+                                return { pt: parseFloat(w) * 0.75, color: co.color };
+                            }
+                            if (fallbackW && parseFloat(fallbackW) > 0 && fallbackS !== 'none') {
+                                const co = parseColor(fallbackC) || { color: '000000' };
+                                return { pt: parseFloat(fallbackW) * 0.75, color: co.color };
+                            }
+                            return null;
                         };
 
-                        const bTop = getBdr(cStyle.borderTopWidth, cStyle.borderTopColor, cStyle.borderTopStyle);
+                        const rStyle = row ? window.getComputedStyle(row) : null;
+                        let rbTopW = 0, rbTopC = null, rbTopS = 'none';
+                        let rbBotW = 0, rbBotC = null, rbBotS = 'none';
+
+                        if (rStyle) {
+                            rbTopW = rStyle.borderTopWidth; rbTopC = rStyle.borderTopColor; rbTopS = rStyle.borderTopStyle;
+                            rbBotW = rStyle.borderBottomWidth; rbBotC = rStyle.borderBottomColor; rbBotS = rStyle.borderBottomStyle;
+                        }
+
+                        const bTop = getBdr(cStyle.borderTopWidth, cStyle.borderTopColor, cStyle.borderTopStyle, rbTopW, rbTopC, rbTopS);
                         const bRight = getBdr(cStyle.borderRightWidth, cStyle.borderRightColor, cStyle.borderRightStyle);
-                        const bBot = getBdr(cStyle.borderBottomWidth, cStyle.borderBottomColor, cStyle.borderBottomStyle);
+                        const bBot = getBdr(cStyle.borderBottomWidth, cStyle.borderBottomColor, cStyle.borderBottomStyle, rbBotW, rbBotC, rbBotS);
                         const bLeft = getBdr(cStyle.borderLeftWidth, cStyle.borderLeftColor, cStyle.borderLeftStyle);
 
                         const cellOpts = {
@@ -386,9 +423,25 @@
                 });
 
                 if (tableRows.length > 0) {
-                    slide.addTable(tableRows, {
-                        x: x, y: y, w: w, colW: colWidths, rowH: rowHeights, autoPage: true
-                    });
+                    const availableH = PPT_HEIGHT_IN - y - 0.5;
+                    if (h <= availableH) {
+                        slide.addTable(tableRows, {
+                            x: x, y: y, w: w, colW: colWidths, rowH: rowHeights, autoPage: false
+                        });
+                    } else {
+                        console.warn('Table does not fit on current slide, splitting manually (disabled autoPage)...');
+                        if (y > 1.0) {
+                            slide = pres.addSlide();
+                            currentSlideYOffset += PPT_HEIGHT_IN;
+                            slide.addTable(tableRows, {
+                                x: x, y: y, w: w, colW: colWidths, rowH: rowHeights, autoPage: false
+                            });
+                        } else {
+                            slide.addTable(tableRows, {
+                                x: x, y: y, w: w, colW: colWidths, rowH: rowHeights, autoPage: false
+                            });
+                        }
+                    }
                 }
                 processedNodes.add(node);
                 return;
@@ -404,7 +457,14 @@
 
             let shapeOpts = { x, y, w, h };
 
+            // -- NEW: Precise Border Radius Logic --
+            const rtl = parseFloat(style.borderTopLeftRadius) || 0;
+            const rtr = parseFloat(style.borderTopRightRadius) || 0;
+            const rbr = parseFloat(style.borderBottomRightRadius) || 0;
+            const rbl = parseFloat(style.borderBottomLeftRadius) || 0;
+
             const borderRadius = parseFloat(style.borderRadius) || 0;
+
             // Strict circle check
             const isCircle = (Math.abs(rect.width - rect.height) < 2) && (borderRadius >= rect.width / 2 - 1);
 
@@ -413,20 +473,62 @@
                 shapeOpts.shadow = { type: 'outer', angle: 45, blur: 6, offset: 2, opacity: 0.2 };
             }
 
-            // --- Radius Logic ---
             let shapeType = pres.ShapeType.rect;
+            let rotation = 0;
+
             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';
+            } else {
+                // Determine Shape based on corners
+                // Case 1: All Uniform
+                if (rtl === rtr && rtr === rbr && rbr === rbl && rtl > 0) {
+                    const minDim = Math.min(rect.width, rect.height);
+                    let ratio = rtl / (minDim / 2);
+                    shapeOpts.rectRadius = Math.min(ratio, 1.0);
+                    shapeType = pres.ShapeType.roundRect;
+                }
+                // Case 2: Vertical Rounding (Left or Right) -> PptxGenJS doesn't inherently support 'Right Rounded' well without rotation?
+                // Actually PptxGenJS has 'round2SameRect' which is Top Corners Rounded by default.
+
+                // Case 3: Top Rounded (Common in cards)
+                else if (rtl > 0 && rtr > 0 && rbr === 0 && rbl === 0) {
+                    shapeType = pres.ShapeType.round2SameRect;
+                    // Rotate? Default is Top.
+                    rotation = 0;
+                }
+                // Case 4: Bottom Rounded
+                else if (rtl === 0 && rtr === 0 && rbr > 0 && rbl > 0) {
+                    shapeType = pres.ShapeType.round2SameRect;
+                    rotation = 180;
+                }
+                // Case 5: Single corners or diagonal? Fallback to rect (Square) to avoid "All Rounded" bug.
+                else if (borderRadius > 0) {
+                    // It has some radius, but not uniform and not simple top/bottom pair.
+                    // Fallback: If we use 'roundRect' it rounds all. 
+                    // Better to use 'rect' (Sharp) than incorrect 'roundRect' for things like "only top-left".
+                    shapeType = pres.ShapeType.rect;
+                }
+            }
+
+            if (rotation !== 0) {
+                shapeOpts.rotate = rotation;
             }
 
             // --- Border Logic ---
-            if (hasBorder && style.borderLeftWidth === style.borderRightWidth) {
-                shapeOpts.line = { color: borderParsed.color, width: borderW * 0.75 };
+            // Check all 4 sides for true uniformity
+            const bTop = parseFloat(style.borderTopWidth) || 0;
+            const bRight = parseFloat(style.borderRightWidth) || 0;
+            const bBot = parseFloat(style.borderBottomWidth) || 0;
+            const bLeft = parseFloat(style.borderLeftWidth) || 0;
+
+            const isUniformBorder = (bTop === bRight && bRight === bBot && bBot === bLeft && bTop > 0);
+
+            if (isUniformBorder && borderParsed) {
+                const lineOpts = { color: borderParsed.color, width: bTop * 0.75 };
+                if (borderParsed.transparency > 0) {
+                    lineOpts.transparency = borderParsed.transparency;
+                }
+                shapeOpts.line = lineOpts;
             } else {
                 shapeOpts.line = null;
             }
@@ -434,24 +536,24 @@
             // --- 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 (hasLeftBorder && !isUniformBorder) {
                 if (hasFill) {
-                    // Underlay Strategy
                     const underlayOpts = { ...shapeOpts };
                     underlayOpts.fill = { color: leftBorderParsed.color };
                     underlayOpts.line = null;
+
+                    // If rotated, the underlay needs careful handling. 
+                    // Simpler: Just draw a side strip if rotation is involved, or complex underlay.
+                    // For now, keep original logic but verify rotation impact.
                     slide.addShape(shapeType, underlayOpts);
 
-                    // Adjust Main Shape
                     const borderInch = pxToInch(lW);
                     shapeOpts.x += borderInch;
                     shapeOpts.w -= borderInch;
-                    delete shapeOpts.shadow; // Remove duplicate shadow
+                    delete shapeOpts.shadow;
                 } else {
-                    // Side Strip Strategy
                     slide.addShape(pres.ShapeType.rect, {
                         x: x, y: y, w: pxToInch(lW), h: h,
                         fill: { color: leftBorderParsed.color },
@@ -460,6 +562,110 @@
                 }
             }
 
+            // --- B2. RIGHT ACCENT BORDER (Custom Strategy) ---
+            const rW = parseFloat(style.borderRightWidth) || 0;
+            const rightBorderParsed = parseColor(style.borderRightColor);
+            const hasRightBorder = rW > 0 && rightBorderParsed && style.borderRightStyle !== 'none';
+
+            if (hasRightBorder && !isUniformBorder) {
+                if (hasFill) {
+                    const underlayOpts = { ...shapeOpts };
+                    underlayOpts.fill = { color: rightBorderParsed.color };
+                    if (rightBorderParsed.transparency > 0) {
+                        underlayOpts.fill.transparency = rightBorderParsed.transparency;
+                    }
+                    underlayOpts.line = null;
+                    slide.addShape(shapeType, underlayOpts);
+
+                    // Shrink main shape from right to reveal right border
+                    const borderInch = pxToInch(rW);
+                    shapeOpts.w -= borderInch;
+                    delete shapeOpts.shadow;
+                } else {
+                    // No fill: Draw simple strip at right edge
+                    const stripOpts = {
+                        x: x + w - pxToInch(rW), y: y, w: pxToInch(rW), h: h,
+                        fill: { color: rightBorderParsed.color }
+                    };
+                    if (rightBorderParsed.transparency > 0) {
+                        stripOpts.fill.transparency = rightBorderParsed.transparency;
+                    }
+                    slide.addShape(pres.ShapeType.rect, stripOpts);
+                }
+            }
+
+            // --- C. TOP ACCENT BORDER (Underlay Strategy - BEFORE main shape) ---
+            const tW = parseFloat(style.borderTopWidth) || 0;
+            const topBorderParsed = parseColor(style.borderTopColor);
+            const hasTopBorder = tW > 0 && topBorderParsed && style.borderTopStyle !== 'none';
+
+            if (hasTopBorder && !isUniformBorder) {
+                if (hasFill) {
+                    // Draw full shape in border color as underlay
+                    const underlayOpts = { ...shapeOpts };
+                    underlayOpts.fill = { color: topBorderParsed.color };
+                    if (topBorderParsed.transparency > 0) {
+                        underlayOpts.fill.transparency = topBorderParsed.transparency;
+                    }
+                    underlayOpts.line = null;
+                    slide.addShape(shapeType, underlayOpts);
+
+                    // Offset main shape to reveal top border
+                    const borderInch = pxToInch(tW);
+                    shapeOpts.y += borderInch;
+                    shapeOpts.h -= borderInch;
+                    delete shapeOpts.shadow;
+                } else {
+                    // No fill: Draw simple strip
+                    const stripOpts = {
+                        x: x, y: y, w: w, h: pxToInch(tW),
+                        fill: { color: topBorderParsed.color }
+                    };
+                    if (topBorderParsed.transparency > 0) {
+                        stripOpts.fill.transparency = topBorderParsed.transparency;
+                    }
+                    slide.addShape(pres.ShapeType.rect, stripOpts);
+                }
+            }
+
+            // --- D. BOTTOM ACCENT BORDER (Underlay Strategy - BEFORE main shape) ---
+            const bW = parseFloat(style.borderBottomWidth) || 0;
+            const bottomBorderParsed = parseColor(style.borderBottomColor);
+            const hasBottomBorder = bW > 0 && bottomBorderParsed && style.borderBottomStyle !== 'none';
+
+            if (hasBottomBorder && !isUniformBorder) {
+                if (hasFill && !hasTopBorder) {
+                    // Only do underlay if we didn't already do it for top border
+                    const underlayOpts = { ...shapeOpts };
+                    underlayOpts.fill = { color: bottomBorderParsed.color };
+                    if (bottomBorderParsed.transparency > 0) {
+                        underlayOpts.fill.transparency = bottomBorderParsed.transparency;
+                    }
+                    underlayOpts.line = null;
+                    slide.addShape(shapeType, underlayOpts);
+
+                    // Shrink main shape from bottom to reveal bottom border
+                    const borderInch = pxToInch(bW);
+                    shapeOpts.h -= borderInch;
+                    delete shapeOpts.shadow;
+                } else if (hasFill && hasTopBorder) {
+                    // Both top and bottom: already have underlay, just shrink from bottom too
+                    const borderInch = pxToInch(bW);
+                    shapeOpts.h -= borderInch;
+                } else {
+                    // No fill: Draw simple strip at bottom
+                    const bH = pxToInch(bW);
+                    const stripOpts = {
+                        x: x, y: y + h - bH, w: w, h: bH,
+                        fill: { color: bottomBorderParsed.color }
+                    };
+                    if (bottomBorderParsed.transparency > 0) {
+                        stripOpts.fill.transparency = bottomBorderParsed.transparency;
+                    }
+                    slide.addShape(pres.ShapeType.rect, stripOpts);
+                }
+            }
+
             // Draw Main Shape
             if (hasFill) {
                 shapeOpts.fill = { color: bgParsed.color };
@@ -473,23 +679,17 @@
 
             // --- 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
+                        fill: { color: '4F46E5' }
                     });
                 }
             }
 
             // --- 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+/, '');
@@ -504,34 +704,48 @@
                         if (style.textAlign === 'justify') align = 'justify';
 
                         let valign = 'top';
-                        const pt = parseFloat(style.paddingTop) || 0;
-                        const pb = parseFloat(style.paddingBottom) || 0;
+                        const ptPx = parseFloat(style.paddingTop) || 0;
+                        const pbPx = parseFloat(style.paddingBottom) || 0;
+                        const plPx = parseFloat(style.paddingLeft) || 0;
+                        const prPx = parseFloat(style.paddingRight) || 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 (Math.abs(ptPx - pbPx) < 5 && ptPx > 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)));
+                        // Convert to Inches for Geometry
+                        const pt = pxToInch(ptPx);
+                        const pr = pxToInch(prPx);
+                        const pb = pxToInch(pbPx);
+                        const pl = pxToInch(plPx);
+
+                        // Geometry Shift Strategy for Padding
+                        let tx = x + pl;
+                        let ty = y + pt;
+                        let tw = w - pl - pr;
+                        let th = h - pt - pb;
+
+                        if (tw < 0) tw = 0;
+                        if (th < 0) th = 0;
 
+                        const widthBuffer = pxToInch(12);
+
+                        // We use inset:0 because we already applied padding via x/y/w/h
                         slide.addText(runs, {
-                            x: x, y: y, w: w + widthBuffer, h: h,
-                            align: align, valign: valign, margin: 0, inset: inset,
+                            x: tx, y: ty, w: tw + widthBuffer, h: th,
+                            align: align, valign: valign, margin: 0, inset: 0,
                             autoFit: false, wrap: true
                         });
                     }
 
-                    // Mark children as processed
                     const markSeen = (n) => {
                         n.childNodes.forEach(c => {
                             if (c.nodeType === Node.ELEMENT_NODE) {
@@ -543,12 +757,39 @@
                     markSeen(node);
                 }
             } else {
-                Array.from(node.children).forEach(processNode);
+                // -- NEW: Z-INDEX SORTING & RECURSION --
+
+                // Get all element children
+                const children = Array.from(node.children);
+
+                // Map to object with z-index
+                const sortedChildren = children.map(c => {
+                    const zStr = window.getComputedStyle(c).zIndex;
+                    return {
+                        node: c,
+                        zIndex: (zStr === 'auto') ? 0 : parseInt(zStr)
+                    };
+                });
+
+                // Sort: ascending z-index
+                sortedChildren.sort((a, b) => a.zIndex - b.zIndex);
+
+                // Recurse
+                sortedChildren.forEach(item => processNode(item.node));
             }
         }
 
-        // Start Processing
-        Array.from(container.children).forEach(processNode);
+        // Start Processing (Sorted Top-Level Children)
+        const rootChildren = Array.from(container.children).map(c => {
+            const zStr = window.getComputedStyle(c).zIndex;
+            return {
+                node: c,
+                zIndex: (zStr === 'auto') ? 0 : parseInt(zStr)
+            };
+        });
+        rootChildren.sort((a, b) => a.zIndex - b.zIndex);
+
+        rootChildren.forEach(item => processNode(item.node));
 
         // Save
         pres.writeFile({ fileName: fileName });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "llm-dom-to-pptx",
-    "version": "1.0.0",
+    "version": "1.0.2",
     "description": "Turn AI-generated HTML/CSS into native, editable PowerPoint slides.",
     "main": "dist/llm-dom-to-pptx.js",
     "scripts": {