@microlee666/dom-to-pptx 1.1.4

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100
+}

package/CHANGELOG.md

@@ -0,0 +1,96 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+## [1.1.4] - 2026-01-19
+
+### Added
+- **Tailwind CSS v4 Support**: Added robust color parsing for modern CSS color formats (e.g., `oklch`, `lab`, `display-p3`) used by Tailwind v4. The library now uses canvas-based normalization to support any valid CSS color.
+- **Text Gradient Fallback**: Text with CSS gradients (e.g., `background-clip: text`) now gracefully falls back to the *first color* of the gradient string instead of rendering as invisible or black.
+- **List Marker Customization**: Support for `::marker` pseudo-element styles. Custom bullet colors and font sizes are now preserved in the generated PowerPoint.
+
+### Fixed
+- **Text Alignment**: Fixed an issue where text containers were slightly shorter than browser rendering, causing overlap with subsequent elements. Added a precision buffer to account for font metric differences.
+- **Line Breaks**: Fixed an issue where `<br>` tags with surrounding whitespace caused double line breaks in the output.
+- **Missing Elements (Cone Fix)**: Fixed a bug where empty elements with solid backgrounds and partial border radii (e.g., decorative shapes) were skipped during rasterization. We now generate a high-fidelity Vector SVG for these shapes.
+- **Inline Badges**: Improved flow for inline elements with backgrounds (badges), ensuring they align correctly with surrounding text.
+
+## [1.1.3] - 2026-01-12
+
+### Added
+- **Table Supprt**: Added support for table elements like `<table>`, `<th>` `<td>`, `<tr>` with basic css formatting.
+
+## [1.1.2] - 2026-01-08
+
+### Added
+- **Canvas Support**: Added support for `<canvas>` elements. Libraries like **ECharts** and **Chart.js** now render correctly as images instead of blank spaces.
+- **Backend Upload Support**: Added `skipDownload` option to `exportToPptx`. The function now returns a `Promise<Blob>`, allowing developers to upload the generated file to a server instead of triggering a browser download.
+- **List Configuration**: Added `listConfig` option to manually override bullet colors and spacing (before/after) globally.
+- **Icon Support in Lists**: Added logic to capture pseudo-element content (`::before`), ensuring icons (e.g., FontAwesome) inside list items are rendered correctly.
+
+### Fixed
+- **Native Lists**: HTML `<ul>` and `<ol>` lists are now rendered as a single native PowerPoint text box with real bullets, rather than disconnected text shapes.
+- **Line Height Calculation**: Fixed an issue where pixel-based CSS `line-height` was interpreted as a multiplier in PowerPoint, causing text to overlap or crush.
+- **Paragraph Spacing**: CSS `margin-top` and `margin-bottom` are now correctly converted to PowerPoint points (`paraSpaceBefore` / `paraSpaceAfter`).
+- **List Item Spacing**: Fixed a bug where list items had double line breaks, causing excessive spacing between bullets.
+
+## [1.1.1] - 2026-01-02
+
+### Fixed
+
+- Resolved an issue where ordered (`<ol>`) and unordered (`<ul>`) lists were not rendered correctly in exported PPTX files. (Fixes #8)
+- Corrected geometric shape rendering issues related to absolute positioning and percentage-based sizing to ensure accurate layout in PPTX exports. (Fixes #6)
+- Fixed text box width calculation discrepancies that caused incorrect line breaks and text wrapping in PPTX output. (Fixes #5)
+
+## [1.1.0] - 2025-12-29
+
+### Added
+
+- **Automatic Font Discovery:** The library now automatically scans the DOM for used font families, extracts their `@font-face` URLs from the document stylesheets, and embeds them into the PPTX file; Addresses Feature Request [#4].
+- **Custom Font Embedding:** Added support for manually embedding web fonts (TTF, WOFF, OTF).
+- **Font Configuration:** Added `fonts` option for manual font URLs and `autoEmbedFonts` (default: `true`) to toggle automatic detection.
+
+### Changed
+
+- **Build Configuration:** Updated Rollup build to include necessary Node.js polyfills (Buffer, Stream) for the browser bundle to support binary font manipulation.
+- **Text Detection:** Improved `isTextContainer` logic to better distinguish between pure text nodes and structural inline elements (like icons or styled spans).
+
+## [1.0.9] - 2025-12-28
+
+### Fixed
+
+- **Complex Gradients:** Fixed `linear-gradient` parsing to correctly support degree-based angles (e.g., `45deg`) and complex directional keywords (e.g., `to top right`), ensuring background gradients match the CSS exactly.
+- **Icon Visibility:** Fixed an issue where icons (Font Awesome, Material Icons, etc.) nested within list items or text containers were being treated as empty text and failing to render, fixes [#3].
+
+## [1.0.8] - 2025-12-12 (Hot-Patch)
+
+### Fixed
+
+- **Fixed SVGs not getting converted**: Seperated the logic to handle SVGs and Web Components/Icons.
+
+## [1.0.7] - 2025-12-12
+
+### Fixed
+
+- **Fix Stacking Context/Z-Index**: Implemented logic to traverse and inherit Z-index from parents. Render queue is now sorted by Z-index then DOM order, preventing text from being hidden behind background cards.
+- **Support Web Components/Icons**: Updated `createRenderItem` and `isTextContainer` to recognize `ion-icon` and custom tags. These are now rasterized via canvas rather than ignored.
+- **Fix Mixed Content (Icons + Text)**: Switched main traversal loop to use `childNodes` instead of `children`. Added specific handler for `nodeType === 3` (Text Nodes) to render orphan text residing next to icons/shapes.
+- **Fix Styled Inline Spans (Badges)**: Updated `isTextContainer` to return `false` if children have visible backgrounds or borders. This ensures elements like "Pune/Vashi" badges render as individual styled shapes instead of flattening into unstyled text runs.
+
+## [1.0.6] - 2025-12-06
+
+### Added
+
+- Standalone UMD bundle `dist/dom-to-pptx.bundle.js` which includes runtime dependencies for single-script usage.
+- `SUPPORTED.md` listing common supported HTML elements and CSS features.
+
+### Fixed
+
+- Rounded corner math: decreased false-positive circle detection and capped `rectRadius` to avoid pill-shaped elements becoming full circles.
+- Partial border-radius clipping: elements inside `overflow:hidden` are now correctly rendered with clipping preserved.
+- Very small elements (sub-pixel) rendering: lowered threshold to include tiny decorative elements (e.g., 2x2 dots).
+- Backdrop blur support: simulated `backdrop-filter: blur()` using html2canvas snapshotting.
+- CORS canvas errors: replaced fragile foreignObject rendering with safer SVG + canvas or html2canvas-based capture where appropriate.
+
+## [1.0.3] - Previous
+
+- Minor fixes and optimizations.

package/CONTRIBUTING.md

@@ -0,0 +1,72 @@
+# Contributing to dom-to-pptx
+
+We welcome contributions to `dom-to-pptx`! To ensure a smooth and effective collaboration, please follow these guidelines.
+
+## How to Contribute
+
+1.  **Fork the Repository:** Start by forking the `dom-to-pptx` repository to your GitHub account.
+2.  **Clone Your Fork:** Clone the forked repository to your local machine:
+
+    ```bash
+    git clone https://github.com/atharva9167j/dom-to-pptx.git
+    cd dom-to-pptx
+    ```
+
+3.  **Create a New Branch:** Create a new branch for your feature or bug fix:
+
+    ```bash
+    git checkout -b feature/your-feature-name
+    # or
+    git checkout -b bugfix/issue-description
+    ```
+
+4.  **Install Dependencies:** Install the project dependencies:
+
+    ```bash
+    npm install
+    ```
+
+5.  **Make Your Changes:** Implement your feature or bug fix. Ensure your code adheres to the project's coding style and passes all tests.
+
+6.  **Run Tests:** Before submitting, run the tests to ensure everything is working correctly:
+
+    ```bash
+    npm test
+    ```
+
+7.  **Lint and Format:** Ensure your code is properly linted and formatted:
+
+    ```bash
+    npm run lint
+    npm run format
+    ```
+
+8.  **Commit Your Changes:** Commit your changes with a clear and concise commit message. We follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
+
+    ```bash
+    git commit -m "feat: Add new feature"
+    # or
+    git commit -m "fix: Fix a bug"
+    ```
+
+9.  **Push to Your Fork:** Push your changes to your forked repository:
+
+    ```bash
+    git push origin feature/your-feature-name
+    ```
+
+10. **Create a Pull Request:** Open a pull request from your fork to the `master` branch of the `dom-to-pptx` repository. Provide a detailed description of your changes.
+
+## Code Style
+
+We use ESLint for linting and Prettier for code formatting. Please ensure your code passes linting and formatting checks before submitting a pull request.
+
+## Reporting Bugs
+
+If you find a bug, please open an issue on the [GitHub Issues](https://github.com/atharva9167j/dom-to-pptx/issues) page. Provide as much detail as possible, including steps to reproduce the bug, expected behavior, and actual behavior.
+
+## Feature Requests
+
+If you have a feature request, please open an issue on the [GitHub Issues](https://github.com/atharva9167j/dom-to-pptx/issues) page. Describe your idea clearly and explain why it would be beneficial to the project.
+
+Thank you for contributing!

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Atharva Dharmendra Jagtap and dom-to-pptx contributors
+
+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,310 @@
+# dom-to-pptx
+
+**The High-Fidelity HTML to PowerPoint Converter (v1.1.4)**
+
+Most HTML-to-PPTX libraries fail when faced with modern web design. They break on gradients, misalign text, ignore rounded corners, or simply take a screenshot (which isn't editable).
+
+**dom-to-pptx** is different. It is a **Coordinate Scraper & Style Engine** that traverses your DOM, calculates the exact computed styles of every element (Flexbox/Grid positions, complex gradients, shadows), and mathematically maps them to native PowerPoint shapes and text boxes. The result is a fully editable, vector-sharp presentation that looks exactly like your web view.
+
+### 🛠️ Updates in v1.1.4
+- **Tailwind CSS v4 Support** (oklch colors)
+- **Text Gradient Fallback**
+- **List Customization & Layout fixes**
+
+## Features
+
+### 🚀 New in v1.1.0
+
+- **Smart Font Embedding:** The library **automatically detects** the fonts used in your HTML, finds their URLs in your CSS, and embeds them into the PPTX. Your slides will look identical on any computer, even if the user doesn't have the fonts installed.
+- **Enhanced Icon Support:** Flawless rendering of FontAwesome, Material Icons, and SVG-based icon libraries (including gradient text icons).
+
+### 🎨 Advanced Visual Fidelity
+
+- **Complex Gradients:** Includes a built-in CSS Gradient Parser that converts `linear-gradient` strings (with multiple stops, specific angles like `45deg`, and transparency) into vector SVGs.
+- **Mathematically Accurate Shadows:** Converts CSS Cartesian shadows (`x`, `y`, `blur`) into PowerPoint's Polar coordinate system (`angle`, `distance`) for 1:1 depth matching.
+- **Anti-Halo Image Processing:** Uses off-screen HTML5 Canvas with `source-in` composite masking to render rounded images without the ugly white "halo" artifacts found in other libraries.
+- **Soft Edges/Blurs:** Accurately translates CSS `filter: blur()` into PowerPoint's soft-edge effects, preserving visual depth.
+
+### 📐 Smart Layout & Typography
+
+- **Auto-Scaling Engine:** Build your slide in HTML at **1920x1080** (or any aspect ratio). The library automatically calculates the scaling factor to fit it perfectly into a standard 16:9 PowerPoint slide.
+- **Rich Text Blocks:** Handles mixed-style text (e.g., **bold** spans inside a normal paragraph).
+- **Text Transformations:** Supports CSS `text-transform: uppercase/lowercase` and `letter-spacing`.
+
+### ⚡ Technical Capabilities
+
+- **Z-Index Handling:** Respects DOM order for correct layering of elements.
+- **Border Radius Math:** Calculates perfect corner rounding percentages based on element dimensions.
+- **Client-Side:** Runs entirely in the browser. No server required.
+
+## Installation
+
+```bash
+npm install dom-to-pptx
+```
+
+## Usage
+
+This library is intended for use in the browser (React, Vue, Svelte, Vanilla JS, etc.).
+
+### 1. Basic Example (Auto-Font Embedding)
+
+By default, `dom-to-pptx` attempts to automatically find and embed your web fonts.
+
+```javascript
+import { exportToPptx } from 'dom-to-pptx';
+
+document.getElementById('export-btn').addEventListener('click', async () => {
+  // Pass the CSS selector of the container
+  await exportToPptx('#slide-container', {
+    fileName: 'slide-presentation.pptx',
+  });
+});
+```
+
+### 2. Manual Font Configuration (Optional)
+
+If you are using external fonts (like Google Fonts) that are hosted on a server without CORS headers, automatic detection might fail. In that case, you can explicitly pass the font URLs:
+
+```javascript
+import { exportToPptx } from 'dom-to-pptx';
+
+await exportToPptx('#slide-container', {
+  fileName: 'report.pptx',
+  // Optional: Only needed if auto-detection fails due to CORS
+  fonts: [
+    {
+      name: 'Roboto',
+      url: 'https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2',
+    },
+  ],
+});
+```
+
+### 3. Multi-Slide Example
+
+To export multiple HTML elements as separate slides, pass an array of elements or selectors:
+
+```javascript
+import { exportToPptx } from 'dom-to-pptx';
+
+document.getElementById('export-btn').addEventListener('click', async () => {
+  const slideElements = document.querySelectorAll('.slide');
+  await exportToPptx(Array.from(slideElements), {
+    fileName: 'multi-slide-presentation.pptx',
+  });
+});
+```
+
+### 4. Browser Usage (Script Tags)
+
+You can use `dom-to-pptx` directly via CDN. The bundle includes all dependencies.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/dom-to-pptx@latest/dist/dom-to-pptx.bundle.js"></script>
+
+<script>
+  document.getElementById('export-btn').addEventListener('click', async () => {
+    // The library is available globally as `domToPptx`
+    await domToPptx.exportToPptx('#slide-container', {
+      fileName: 'slide.pptx',
+    });
+  });
+</script>
+```
+
+## Recommended HTML Structure
+
+We recommend building your slide container at **1920x1080px**. The library will handle the downscaling to fit the PowerPoint slide (16:9).
+
+```html
+<!-- Container (16:9 Aspect Ratio) -->
+<!-- The library will capture this background color/gradient automatically -->
+<div
+  id="slide-container"
+  class="slide w-[1000px] h-[562px] bg-white rounded-xl overflow-hidden relative shadow-2xl shadow-black/50 flex"
+>
+  <!-- Left Sidebar -->
+  <div class="w-1/3 bg-slate-900 relative overflow-hidden flex flex-col p-10 justify-between">
+    <!-- Decorative gradients -->
+    <div class="absolute top-0 left-0 w-full h-full opacity-30 pointer-events-none">
+      <div
+        class="absolute -top-20 -left-20 w-64 h-64 bg-purple-600 rounded-full blur-3xl mix-blend-screen"
+      ></div>
+      <div
+        class="absolute bottom-0 right-0 w-80 h-80 bg-indigo-600 rounded-full blur-3xl mix-blend-screen"
+      ></div>
+    </div>
+    <div class="relative z-10">
+      <div
+        class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/10 backdrop-blur-md mb-6"
+      >
+        <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
+        <span class="text-xs font-medium text-slate-300 tracking-wider">LIVE DATA</span>
+      </div>
+      <h2 class="text-4xl font-bold text-white leading-tight mb-4">
+        Quarterly <br />
+        <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-cyan-400"
+          >Performance</span
+        >
+      </h2>
+      <p class="text-slate-400 leading-relaxed">
+        Visualizing the impact of high-fidelity DOM conversion on presentation workflows.
+      </p>
+    </div>
+    <!-- Feature List (Flexbox/Grid test) -->
+    <div class="relative z-10 space-y-4">
+      <div class="flex items-center gap-3 p-3 rounded-lg bg-white/5 border border-white/5">
+        <div
+          class="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center text-indigo-400 font-bold"
+        >
+          1
+        </div>
+        <div class="text-sm text-slate-300">Pixel-perfect Shadows</div>
+      </div>
+      <div class="flex items-center gap-3 p-3 rounded-lg bg-white/5 border border-white/5">
+        <div
+          class="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-400 font-bold"
+        >
+          2
+        </div>
+        <div class="text-sm text-slate-300">Complex Gradients</div>
+      </div>
+    </div>
+  </div>
+  <!-- Right Content -->
+  <div class="w-2/3 bg-slate-50 p-10 relative">
+    <!-- Header -->
+    <div class="flex justify-between items-start mb-10">
+      <div>
+        <h3 class="text-slate-800 font-bold text-xl">Revenue Breakdown</h3>
+        <p class="text-slate-500 text-sm">Fiscal Year 2024</p>
+      </div>
+      <div class="flex -space-x-2">
+        <!-- Rounded Images Test (CORS friendly) -->
+        <img
+          class="w-10 h-10 rounded-full border-2 border-white object-cover shadow-md"
+          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&amp;fit=crop&amp;w=64&amp;h=64"
+          alt="User 1"
+        />
+        <img
+          class="w-10 h-10 rounded-full border-2 border-white object-cover shadow-md"
+          src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&amp;fit=crop&amp;w=64&amp;h=64"
+          alt="User 2"
+        />
+        <div
+          class="w-10 h-10 rounded-full border-2 border-white bg-slate-200 flex items-center justify-center text-xs font-bold text-slate-500 shadow-md"
+        >
+          +5
+        </div>
+      </div>
+    </div>
+    <!-- Grid Layout Test -->
+    <div class="grid grid-cols-2 gap-6 mb-8">
+      <!-- Card 1: Gradient & Shadow -->
+      <div
+        class="bg-white p-5 rounded-xl complex-shadow border border-slate-100 relative overflow-hidden group"
+      >
+        <div class="relative z-10">
+          <p class="text-xs font-bold text-indigo-500 uppercase tracking-wider mb-1">Total Sales</p>
+          <h4 class="text-3xl font-bold text-slate-800">$124,500</h4>
+          <div class="mt-3 flex items-center text-xs font-semibold text-green-600">
+            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
+              ></path>
+            </svg>
+            <span>+14.5%</span>
+          </div>
+        </div>
+      </div>
+      <!-- Card 2: Gradient Border/Background -->
+      <div
+        class="p-5 rounded-xl shadow-lg text-white relative overflow-hidden"
+        style="
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        "
+      >
+        <p class="text-xs font-bold text-white/80 uppercase tracking-wider mb-1">Active Users</p>
+        <h4 class="text-3xl font-bold text-white">45.2k</h4>
+        <div class="mt-3 w-full bg-black/20 rounded-full h-1.5">
+          <div class="bg-white/90 h-1.5 rounded-full" style="width: 70%"></div>
+        </div>
+      </div>
+    </div>
+    <!-- Complex Typography & Layout -->
+    <div class="bg-indigo-50/50 rounded-xl p-6 border border-indigo-100">
+      <h5 class="font-bold text-indigo-900 mb-3">Analysis Summary</h5>
+      <p class="text-indigo-800/80 text-sm leading-relaxed">
+        The
+        <span class="font-bold text-indigo-600">Q3 projection</span>
+        exceeds expectations due to the new
+        <span class="italic">optimization algorithm</span>. We observed a
+        <strong class="text-indigo-700">240% increase</strong>
+        in processing speed across all nodes.
+      </p>
+    </div>
+    <!-- Floating Badge (Absolute positioning test) -->
+    <div
+      class="absolute bottom-6 right-6 bg-white/90 backdrop-blur px-4 py-2 rounded-lg shadow-lg border border-slate-200 flex items-center gap-2"
+    >
+      <div class="w-2 h-2 rounded-full bg-red-500"></div>
+      <span class="text-xs font-bold text-slate-600 uppercase">Confidential</span>
+    </div>
+  </div>
+</div>
+```
+
+## API
+
+### `exportToPptx(elementOrSelector, options)`
+
+Returns: `Promise<Blob>` - Resolves with the generated PPTX file data (Blob).
+
+| Parameter           | Type                                                        | Description                                                                                                        |
+| :------------------ | :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------- |
+| `elementOrSelector` | `string` \| `HTMLElement` \| `Array<string \| HTMLElement>` | The DOM node(s) or ID selector(s) to convert. Can be a single element/selector or an array for multi-slide export. |
+| `options`           | `object`                                                    | Configuration object.                                                                                              |
+
+**Options Object:**
+
+| Key              | Type      | Default         | Description                                                                                              |
+| :--------------- | :-------- | :-------------- | :------------------------------------------------------------------------------------------------------- |
+| `fileName`       | `string`  | `"export.pptx"` | The name of the downloaded file.                                                                         |
+| `autoEmbedFonts` | `boolean` | `true`          | Automatically detect and embed used fonts.                                                               |
+| `fonts`          | `Array`   | `[]`            | Manual array of font objects: `{ name, url }`.                                                           |
+| `skipDownload`   | `boolean` | `false`         | If `true`, the file is not downloaded automatically. Use the returned `Blob` for custom handling (upload). |
+| `listConfig`     | `object`  | `undefined`     | Global overrides for list styles. Structure: `{ color: string, spacing: { before: number, after: number } }`. |
+
+**List Configuration Example:**
+```javascript
+listConfig: {
+  spacing: {
+    before: 10,       // Space before bullet (pt)
+    after: 5          // Space after bullet (pt)
+  }
+}
+```
+
+## Important Notes
+
+1.  **Fonts & CORS:**
+    - **Automatic Embedding:** Works perfectly for local fonts and external fonts served with correct CORS headers.
+    - **Google Fonts:** For auto-detection to work with Google Fonts, you must add `crossorigin="anonymous"` to your link tag:
+      `<link href="https://fonts.googleapis.com/..." rel="stylesheet" crossorigin="anonymous">`
+    - If a font cannot be accessed due to CORS, the library will log a warning and proceed without embedding it (PowerPoint will fallback to Arial).
+
+2.  **Layout System:** The library does not "read" Flexbox or Grid definitions directly. It measures the final `x, y, width, height` of every element relative to the slide root and places them absolutely. This ensures 100% visual accuracy regardless of the CSS layout method used.
+
+3.  **CORS Images:** External images (`<img>` tags) must also be served with `Access-Control-Allow-Origin: *` headers to be processed by the rounding/masking engine.
+
+## License
+
+MIT © [Atharva Dharmendra Jagtap](https://github.com/atharva9167j) and `dom-to-pptx` contributors.
+
+## Acknowledgements
+
+This project is built on top of [PptxGenJS](https://github.com/gitbrent/PptxGenJS). Huge thanks to the PptxGenJS maintainers and all contributors — dom-to-pptx leverages and extends their excellent work on PPTX generation.

package/SUPPORTED.md

@@ -0,0 +1,50 @@
+# Supported CSS & HTML
+
+This document lists the common CSS features, Tailwind-like utility classes, and HTML elements that dom-to-pptx understands and maps to PowerPoint shapes/text.
+
+Note: The library measures computed layout from the browser (getBoundingClientRect) and maps positions/sizes precisely to PPTX inches. If a CSS feature is not listed below it may still work because the browser computes layout and visual styles — the mapping focuses on visual fidelity.
+
+## Supported HTML elements
+
+- div, span, p, h1-h6
+- img, svg
+- ul, ol, li
+- a
+- button
+- section, article, header, footer
+- input (text), textarea (simple text extraction)
+- figure, figcaption
+
+## Supported CSS properties (rendered visually)
+
+- background-color, background-image (linear-gradient)
+- background-position, background-size (basic handling in gradients)
+- color, opacity
+- border, border-_-color, border-_-width, border-radius (per-corner)
+- box-shadow (outer shadows mapped to PPTX outer shadows)
+- filter: blur() (soft-edge rendering via SVG)
+- backdrop-filter: blur() (simulated via html2canvas snapshot)
+- transform: rotate() (extraction of rotation angle)
+- display, position, width, height, padding, margin
+- text-align, vertical-align, white-space, text-transform
+- font-family, font-size, font-weight, font-style, line-height
+
+## Common utility/Tailwind-like classes (recognized by visual result)
+
+These classes are examples; dom-to-pptx reads computed styles, so any combination that results in the same computed value will be supported.
+
+- `rounded`, `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-full`, `rounded-tr-*`, `rounded-bl-full`, etc.
+- `bg-white`, `bg-slate-50`, `bg-indigo-50`, `bg-gradient-to-r`, `from-indigo-400`, `to-cyan-400`, etc. (linear-gradients are parsed)
+- `shadow`, `shadow-md`, `shadow-lg`, `shadow-2xl` (box-shadow)
+- `flex`, `grid`, `items-center`, `justify-center`, `gap-*`
+- `p-4`, `px-6`, `py-2`, `m-4`
+- `w-*`, `h-*` (fixed pixel/percentage/wrappers — computed width/height are used)
+- `text-xs`, `text-sm`, `text-lg`, `font-bold`, `uppercase`, `italic`, `tracking-wide`
+
+## Limitations
+
+- Complex CSS animations/transitions are not exported — only the current computed visual state is captured.
+- Some advanced CSS features (CSS variables used as colors, filters beyond blur) may not map 1:1.
+- For images to be processed via canvas (rounded images), the source must be CORS-accessible (`Access-Control-Allow-Origin` header) or the image will be skipped or rendered as-is.
+
+If a style or element is critical and you find it not behaving as expected, open an issue with a minimal repro and I'll add support or provide a workaround.