@extend-ai/react-pptx 0.2.2 → 0.2.4

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

@@ -42,6 +42,92 @@ function throwIfAborted(signal) {
   }
 }
 
+// ../../node_modules/.pnpm/@extend-ai+office-fonts@https+++github.com+extend-hq+rust-office+releases+download+office-fon_7r4y6vimjxvcmpreabk5ezevri/node_modules/@extend-ai/office-fonts/families.js
+var families = [
+  { id: "carlito", family: "Carlito", original: "Calibri", load: () => import('./carlito-data-LDQ4YMUR.js') },
+  { id: "arimo", family: "Arimo", original: "Arial", load: () => import('./arimo-data-4NQ7UA57.js') },
+  { id: "tinos", family: "Tinos", original: "Times New Roman", load: () => import('./tinos-data-IPPHZ4Y6.js') },
+  { id: "cousine", family: "Cousine", original: "Courier New", load: () => import('./cousine-data-IPO23HJ5.js') },
+  { id: "intos", family: "Intos", original: "Aptos", load: () => import('./intos-data-55TEPAXO.js') },
+  { id: "intos-narrow", family: "Intos Narrow", original: "Aptos Narrow", load: () => import('./intos-narrow-data-FHJNOFRV.js') }
+];
+
+// ../../node_modules/.pnpm/@extend-ai+office-fonts@https+++github.com+extend-hq+rust-office+releases+download+office-fon_7r4y6vimjxvcmpreabk5ezevri/node_modules/@extend-ai/office-fonts/runtime.js
+var registry = /* @__PURE__ */ Symbol.for("@extend-ai/office-fonts/loads/v2");
+var loads = globalThis[registry] ??= /* @__PURE__ */ new WeakMap();
+var normalize = (family) => family.trim().replace(/^["']|["']$/g, "").toLowerCase();
+var primary = (family) => family.split(",")[0];
+var lookup = new Map(families.flatMap((family) => [family.original, family.family].map((name) => [normalize(name), family])));
+var variants = [
+  { style: "normal", weight: "400", suffix: "" },
+  { style: "normal", weight: "700", suffix: " Bold" },
+  { style: "italic", weight: "400", suffix: " Italic" },
+  { style: "italic", weight: "700", suffix: " Bold Italic" }
+];
+function matches(face, family, variant) {
+  const weight = face.weight === "normal" ? "400" : face.weight === "bold" ? "700" : face.weight;
+  const range = weight.split(/\s+/).map(Number);
+  return normalize(face.family) === normalize(family) && face.style === variant.style && Number(variant.weight) >= range[0] && Number(variant.weight) <= (range[1] ?? range[0]);
+}
+async function loadOfficeFonts(target = globalThis.document, requestedFamilies = ["Calibri"]) {
+  const FontFaceClass = target?.defaultView?.FontFace ?? globalThis.FontFace;
+  if (!target?.fonts || !FontFaceClass) return;
+  const fonts = target.fonts;
+  let entries = loads.get(fonts);
+  if (!entries) loads.set(fonts, entries = /* @__PURE__ */ new Map());
+  const selected = new Set([...requestedFamilies].map((name) => normalize(primary(name))));
+  await Promise.all([...selected].map(async (key) => {
+    const definition = lookup.get(key);
+    if (!definition) return;
+    const previous = entries.get(key);
+    if (previous && (!previous.ready || previous.faces.every((face) => fonts.has(face)))) return previous.promise;
+    const family = key === normalize(definition.original) ? definition.original : definition.family;
+    const state = { ready: false, faces: [], promise: void 0 };
+    state.promise = (async () => {
+      const added = [];
+      try {
+        const results = await Promise.allSettled(variants.map(async (variant, index) => {
+          const existing = [...fonts].filter((face2) => matches(face2, family, variant) && face2.status !== "error");
+          if (existing.length) {
+            const loaded = await Promise.allSettled(existing.map((face2) => face2.load()));
+            const available = loaded.flatMap((result) => result.status === "fulfilled" ? [result.value] : []);
+            if (available.length) return available;
+          }
+          let face;
+          if (family === definition.original) {
+            try {
+              face = await new FontFaceClass(family, `local("${family}${variant.suffix}")`, variant).load();
+            } catch {
+              face = void 0;
+            }
+          }
+          if (!face) {
+            const { faces: assets } = await definition.load();
+            face = new FontFaceClass(family, `url("${assets[index].source}")`, variant);
+            fonts.add(face);
+            added.push(face);
+            await face.load();
+          } else {
+            fonts.add(face);
+            added.push(face);
+          }
+          return [face];
+        }));
+        const failure = results.find((result) => result.status === "rejected");
+        if (failure) throw failure.reason;
+        state.faces = results.flatMap((result) => result.value);
+        state.ready = true;
+      } catch (error) {
+        for (const face of added) fonts.delete(face);
+        entries.delete(key);
+        throw error;
+      }
+    })();
+    entries.set(key, state);
+    return state.promise;
+  }));
+}
+
 // src/fonts.ts
 var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
   "serif",
@@ -58,17 +144,18 @@ var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
   "fangsong"
 ]);
 var OFFICE_FONT_FALLBACKS = {
-  aptos: ["Aptos", "Segoe UI", "Arial", "sans-serif"],
+  aptos: ["Aptos", "Intos", "Segoe UI", "Arial", "sans-serif"],
+  "aptos narrow": ["Aptos Narrow", "Intos Narrow", "Arial", "sans-serif"],
   "aptos display": ["Aptos Display", "Segoe UI", "Arial", "sans-serif"],
   calibri: ["Calibri", "Carlito", "Arial", "sans-serif"],
   "calibri light": ["Calibri Light", "Carlito", "Arial", "sans-serif"],
   cambria: ["Cambria", "Caladea", "Georgia", "serif"],
   "cambria math": ["Cambria Math", "STIX Two Math", "STIXGeneral", "math"],
-  arial: ["Arial", "Liberation Sans", "Helvetica", "sans-serif"],
+  arial: ["Arial", "Arimo", "Liberation Sans", "Helvetica", "sans-serif"],
   "arial narrow": ["Arial Narrow", "Liberation Sans Narrow", "Arial", "sans-serif"],
   "arial unicode ms": ["Arial Unicode MS", "Noto Sans", "Segoe UI Symbol", "sans-serif"],
-  "times new roman": ["Times New Roman", "Liberation Serif", "Times", "serif"],
-  "courier new": ["Courier New", "Liberation Mono", "Courier", "monospace"],
+  "times new roman": ["Times New Roman", "Tinos", "Liberation Serif", "Times", "serif"],
+  "courier new": ["Courier New", "Cousine", "Liberation Mono", "Courier", "monospace"],
   consolas: ["Consolas", "Cascadia Mono", "Liberation Mono", "monospace"],
   "century gothic": ["Century Gothic", "Avenir Next", "Futura", "Arial", "sans-serif"],
   "franklin gothic medium": ["Franklin Gothic Medium", "Arial", "sans-serif"],
@@ -142,9 +229,9 @@ function serializeFamily(family) {
   if (GENERIC_FAMILIES.has(family.toLowerCase())) return family;
   return `"${family.replaceAll('"', '\\"')}"`;
 }
-function uniqueFamilies(families) {
+function uniqueFamilies(families2) {
   const seen = /* @__PURE__ */ new Set();
-  return families.filter((family) => {
+  return families2.filter((family) => {
     const key = normalizeFamily(family).toLowerCase();
     if (!key || seen.has(key)) return false;
     seen.add(key);
@@ -153,14 +240,14 @@ function uniqueFamilies(families) {
 }
 function resolvePptxFontFamily(fontFamily2, options = {}) {
   const requested = parseFamilyList(fontFamily2);
-  const primary = requested[0] ?? "";
-  const configured = options.fallbacks?.[primary] ?? options.fallbacks?.[primary.toLowerCase()];
+  const primary2 = requested[0] ?? "";
+  const configured = options.fallbacks?.[primary2] ?? options.fallbacks?.[primary2.toLowerCase()];
   const configuredList = typeof configured === "string" ? [configured] : configured ?? [];
-  const office = options.useOfficeFallbacks === false ? [] : OFFICE_FONT_FALLBACKS[primary.toLowerCase()] ?? [];
-  const lower = primary.toLowerCase();
+  const office = options.useOfficeFallbacks === false ? [] : OFFICE_FONT_FALLBACKS[primary2.toLowerCase()] ?? [];
+  const lower = primary2.toLowerCase();
   const generic = /serif|times|cambria|mincho|ming|song|batang|david|garamond|palatino/.test(lower) ? ["Noto Serif", "Noto Serif CJK SC", "serif"] : [...UNIVERSAL_SANS_FALLBACKS];
   return uniqueFamilies([
-    ...primary ? [primary] : [],
+    ...primary2 ? [primary2] : [],
     ...configuredList,
     ...office,
     ...requested.slice(1),
@@ -269,6 +356,27 @@ var PptxFontManager = class {
         message: `The supplied font \u201C${family}\u201D could not be loaded; a compatible fallback will be used.`
       });
     });
+    if (this.options.useOfficeFallbacks !== false) {
+      const families2 = /* @__PURE__ */ new Set(["Calibri"]);
+      const seen = /* @__PURE__ */ new Set();
+      const collect = (value) => {
+        if (!value || typeof value !== "object" || seen.has(value)) return;
+        seen.add(value);
+        for (const [key, child] of Object.entries(value)) {
+          if (/fontFamily$/i.test(key) && typeof child === "string") families2.add(child);
+          else if (child && typeof child === "object") collect(child);
+        }
+      };
+      collect(presentation.slides);
+      collect(presentation.masters);
+      collect(presentation.layouts);
+      for (const theme of presentation.themes) {
+        for (const family of [...Object.values(theme.majorFonts ?? {}), ...Object.values(theme.minorFonts ?? {})]) {
+          if (family) families2.add(family);
+        }
+      }
+      await loadOfficeFonts(document, families2).catch(() => void 0);
+    }
     if (document.fonts && this.options.waitForFonts !== false) {
       await timeout(
         Promise.resolve(document.fonts.ready).then(() => void 0),
@@ -278,28 +386,28 @@ 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];
-      if (!primary || primary.startsWith("+") || GENERIC_FAMILIES.has(primary.toLowerCase()))
+      const primary2 = parseFamilyList(raw)[0];
+      if (!primary2 || primary2.startsWith("+") || GENERIC_FAMILIES.has(primary2.toLowerCase()))
         continue;
       if (element instanceof HTMLElement || element instanceof SVGElement) {
         element.style.fontFamily = resolvePptxFontFamily(raw, this.options);
       }
-      if (this.options.reportMissingFonts === false || this.loadedFamilies.has(primary.toLowerCase()) || browserHasFont(primary)) {
+      if (this.options.reportMissingFonts === false || this.loadedFamilies.has(primary2.toLowerCase()) || browserHasFont(primary2)) {
         continue;
       }
       this.warn({
         code: "missing-font",
         severity: "warning",
-        feature: primary,
+        feature: primary2,
         ...slideIndex === void 0 ? {} : { slideIndex },
-        message: `Font \u201C${primary}\u201D is not available in this browser; the configured fallback stack is being used.`
+        message: `Font \u201C${primary2}\u201D is not available in this browser; the configured fallback stack is being used.`
       });
     }
   }
@@ -3377,11 +3485,11 @@ function getCategoryLabels(chart) {
     return series.categories.every((value) => normalizeCategoryLabel(value).length === 0);
   }) || !hasAnyExplicitCategory;
   return Array.from({ length: categoryCount }, (_, categoryIndex) => {
-    const primary = primaryCategories[categoryIndex];
-    if (primary != null) {
-      const normalizedPrimary = normalizeCategoryLabel(primary);
+    const primary2 = primaryCategories[categoryIndex];
+    if (primary2 != null) {
+      const normalizedPrimary = normalizeCategoryLabel(primary2);
       if (normalizedPrimary.length > 0) {
-        return formatCategoryLabel(chart, primary, normalizedPrimary);
+        return formatCategoryLabel(chart, primary2, normalizedPrimary);
       }
     }
     const fallback = chart.series.map((series) => series.categories[categoryIndex]).find((value) => normalizeCategoryLabel(value).length > 0);
@@ -8457,6 +8565,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 +8635,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 = () => {
@@ -9446,10 +9615,10 @@ function runFontFamily(run) {
     run.complexScriptFontFamily,
     run.symbolFontFamily
   ];
-  const families = ordered.filter(
+  const families2 = ordered.filter(
     (family, index) => Boolean(family) && ordered.indexOf(family) === index
   );
-  return families.length > 0 ? families.join(", ") : void 0;
+  return families2.length > 0 ? families2.join(", ") : void 0;
 }
 function createTextRunElement(run, paragraph, fontScale) {
   const href = safeHyperlink(run.hyperlink);
@@ -12596,12 +12765,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(