@extend-ai/react-pptx 0.2.1 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @extend-ai/react-pptx
 
+## 0.2.3
+
+- Use the Rust Office crates by Extend and refresh the bundled WebAssembly.
+
+## 0.2.2
+
+### Patch Changes
+
+- f4cb3b0: Fix paragraph styling in placeholders and render PowerPoint's default table style.
+
+  - Slide paragraphs no longer take their `lvl`/`marL` from the layout placeholder's prompt paragraphs ("Click to edit Master text styles", "Second level", …). They inherit only through `a:lstStyle`, which stops plain bullet lists from stair-stepping.
+  - A placeholder without a `type` (e.g. `<p:ph idx="1"/>`) defaults to `obj` per ECMA-376 and now uses the master's `bodyStyle` instead of `otherStyle`, restoring its bullets, indents and size.
+  - When `ppt/tableStyles.xml` doesn't define the requested style, the built-in "Medium Style 2 - Accent 1" (`{5C22544A-7EE6-4342-B048-85BDC9FD1C3A}`, PowerPoint's default) is used, so its fills, banding and borders render.
+
 ## 0.2.1
 
 ### Patch Changes

package/README.md

@@ -118,6 +118,16 @@ the parser worker. A `Response` is supported on the main thread because it canno
 reliably to a worker. `initWasm()` optionally accepts the same source when eager initialization
 is useful.
 
+## Examples
+
+See `@extend-ai/react-pptx` in action in these live [Extend UI](https://www.extend.ai/ui) examples. Click a screenshot to open the demo and integration docs.
+
+### [PowerPoint Viewer](https://www.extend.ai/ui/docs/components/pptx-viewer)
+
+Explore slide navigation, zoom, and presentation previews.
+
+[![PowerPoint viewer with a presentation slide and navigation controls](https://raw.githubusercontent.com/extend-hq/react-pptx/main/docs/readme-assets/extend-ui-pptx-viewer.png)](https://www.extend.ai/ui/docs/components/pptx-viewer)
+
 ## Fonts
 
 Fonts embedded in a `.pptx` are decoded by the Rust parser and registered before the first

package/THIRD_PARTY_LICENSES/extend-office.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 CrowdView Inc, dba Extend
+
+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/THIRD_PARTY_NOTICES.md

@@ -1,10 +1,13 @@
 # Third-party notices
 
-## Chart rendering stack (vendored from @extend-ai/react-xlsx)
+## PowerPoint parsing and chart rendering
 
-The chart renderer and chart model builder in `src/charts/` are vendored from
-[`@extend-ai/react-xlsx`](https://github.com/extend-hq/react-xlsx) (MIT) so
-PowerPoint charts render with the same styles and colors as Excel charts.
+The browser runtime bundles the PowerPoint parser and chart renderer from
+[rust-office](https://github.com/extend-hq/rust-office). Its MIT license
+is included in the published package at `THIRD_PARTY_LICENSES/rust-office.txt`.
+
+The React chart renderer and chart model builder used for fallback rendering
+are vendored from [`@extend-ai/react-xlsx`](https://github.com/extend-hq/react-xlsx) (MIT).
 
 The chart libraries `d3-scale`, `d3-shape`, `d3-hierarchy`, `d3-geo` (ISC,
 Copyright Mike Bostock), `topojson-client` (ISC), and

package/dist/index.d.ts

@@ -273,6 +273,8 @@ interface ChartNode extends BaseSlideNode {
      * fields above remain available for search and fallbacks.
      */
     chartXml?: string;
+    /** Chart artwork at the dimensions of the slide frame. */
+    chartSvg?: string;
     /** Companion Microsoft chart style part (`style*.xml`), when present. */
     chartStyleXml?: string;
     /** Companion Microsoft chart color style part (`colors*.xml`), when present. */

package/dist/index.js

@@ -278,11 +278,11 @@ var PptxFontManager = class {
     this.options.onFontsReady?.();
   }
   applyTo(root, slideIndex) {
-    const elements = [
+    const elements2 = [
       root,
       ...root.querySelectorAll('[style*="font-family"], [font-family]')
     ];
-    for (const element of elements) {
+    for (const element of elements2) {
       const raw = (element instanceof HTMLElement || element instanceof SVGElement ? element.style.fontFamily : "") || element.getAttribute("font-family");
       if (!raw) continue;
       const primary = parseFamilyList(raw)[0];
@@ -8457,6 +8457,64 @@ var MemoChartSvg = React2.memo(function MemoChartSvg2({
   );
 }, (prev, next) => prev.chart === next.chart && prev.onChartElementDoubleClick === next.onChartElementDoubleClick && prev.onChartElementPointerDown === next.onChartElementPointerDown && prev.palette === next.palette && prev.rect.height === next.rect.height && prev.rect.width === next.rect.width && prev.rect.left === next.rect.left && prev.rect.top === next.rect.top && prev.selectedChartElement === next.selectedChartElement);
 
+// src/charts/shared-chart-svg.ts
+var svgNamespace = "http://www.w3.org/2000/svg";
+var elements = new Set(
+  "svg g rect circle ellipse path polygon polyline line text tspan defs clipPath linearGradient radialGradient stop pattern filter feDropShadow".split(
+    " "
+  )
+);
+var attributes = new Set(
+  "width height viewBox x y x1 y1 x2 y2 cx cy rx ry r d points transform id dx dy fill fill-opacity fill-rule stroke stroke-opacity stroke-width stroke-dasharray stroke-linecap stroke-linejoin clip-path filter opacity font-family font-size font-weight font-style text-anchor textLength lengthAdjust offset stop-color stop-opacity gradientUnits gradientTransform fx fy fr patternUnits patternContentUnits shape-rendering stdDeviation flood-color flood-opacity overflow data-chart-kind data-chart-series data-chart-point data-chart-x data-chart-y data-docx-series data-docx-point".split(" ")
+);
+var paints = /* @__PURE__ */ new Set(["fill", "stroke", "filter", "clip-path", "stop-color", "flood-color"]);
+var sequence = 0;
+function mountSharedChart(container, markup, label) {
+  if (markup.includes("<!") || markup.includes("<?")) return false;
+  const svg = new DOMParser().parseFromString(markup, "image/svg+xml").documentElement;
+  if (svg.localName !== "svg") return false;
+  const prefix = `rpv-chart-${++sequence}-`;
+  for (const element of [svg, ...Array.from(svg.querySelectorAll("*"))]) {
+    if (element.namespaceURI !== svgNamespace || !elements.has(element.localName)) return false;
+    for (const attribute of Array.from(element.attributes)) {
+      const { name, value } = attribute;
+      if (name === "xmlns" && element === svg && value === svgNamespace) continue;
+      if (attribute.namespaceURI || !attributes.has(name)) return false;
+      if (name === "id") {
+        if (!/^[a-zA-Z_][\w.-]*$/.test(value)) return false;
+        element.id = prefix + value;
+      } else if (paints.has(name)) {
+        const reference = /^url\(#([\w.-]+)\)$/.exec(value);
+        if (reference) element.setAttribute(name, `url(#${prefix}${reference[1]})`);
+        else if (!/^(?:#[\da-fA-F]{3,8}|[a-zA-Z]+|rgba?\([\d.% ,]+\))$/.test(value)) return false;
+      }
+    }
+    const series = element.getAttribute("data-chart-series");
+    if (series === null) continue;
+    element.setAttribute("data-xlsx-chart-series-index", series);
+    const point = element.getAttribute("data-chart-point");
+    if (point !== null) element.setAttribute("data-xlsx-chart-point-index", point);
+    const kind = element.getAttribute("data-chart-kind");
+    if (kind === "bar") element.setAttribute("data-xlsx-chart-selection-mode", "seriesFirst");
+    if (kind === "legendEntry") element.setAttribute("data-xlsx-chart-element-kind", "legendEntry");
+    if (kind === "point") {
+      const hit = svg.ownerDocument.createElementNS(svgNamespace, "circle");
+      hit.setAttribute("cx", element.getAttribute("data-chart-x") ?? "0");
+      hit.setAttribute("cy", element.getAttribute("data-chart-y") ?? "0");
+      hit.setAttribute("r", "5");
+      hit.setAttribute("fill", "transparent");
+      element.append(hit);
+    }
+    element.setAttribute("cursor", "pointer");
+  }
+  const view = container.ownerDocument.importNode(svg, true);
+  view.style.cssText = "width:100%;height:100%;display:block;";
+  view.setAttribute("role", "img");
+  view.setAttribute("aria-label", label);
+  container.replaceChildren(view);
+  return true;
+}
+
 // src/charts/chart-host.tsx
 var CHART_HOST_PALETTE = {
   border: "#e4e4e7",
@@ -8469,6 +8527,9 @@ function chartNeedsRegionMapAtlas(chart) {
 }
 function renderChartInto(container, node, theme) {
   try {
+    if (node.chartSvg && mountSharedChart(container, node.chartSvg, node.title ?? node.name ?? "Chart")) {
+      return true;
+    }
     const themePalette = buildThemePaletteFromPresentationTheme(theme);
     const chart = buildPptxChart(node, themePalette);
     const render = () => {
@@ -12596,12 +12657,12 @@ async function inlineResources(root, signal) {
     }
     return pending;
   };
-  const elements = [root, ...root.querySelectorAll("*")];
+  const elements2 = [root, ...root.querySelectorAll("*")];
   await Promise.all(
-    elements.flatMap((element) => {
+    elements2.flatMap((element) => {
       const attributeNames = ["src", "poster", ...element.localName === "image" ? ["href"] : []];
-      const attributes = attributeNames.map((name) => ({ name, value: element.getAttribute(name) })).filter((entry) => Boolean(entry.value));
-      const attributeTasks = attributes.map(async ({ name, value }) => {
+      const attributes2 = attributeNames.map((name) => ({ name, value: element.getAttribute(name) })).filter((entry) => Boolean(entry.value));
+      const attributeTasks = attributes2.map(async ({ name, value }) => {
         element.setAttribute(name, await inline(value));
       });
       const styleTasks = Array.from(