pptx-viewer-core 1.2.3 → 1.2.4

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project are documented here.
 This file is generated from [Conventional Commits](https://www.conventionalcommits.org)
 by [git-cliff](https://git-cliff.org); do not edit it by hand.
 
+## [1.2.3](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-viewer-core@1.2.3) - 2026-07-08
+
+### Documentation
+
+- **core:** Remove explicit jszip/fast-xml-parser mention from install section (by @ChristopherVR) ([6b72906](https://github.com/ChristopherVR/pptx-viewer/commit/6b72906c08447ba38a704ff4572c89d7cad7e60c))
+
 ## [1.2.2](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-viewer-core@1.2.2) - 2026-07-07
 
 ## [1.2.1](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-viewer-core@1.2.1) - 2026-07-06

package/dist/index.js

@@ -16907,6 +16907,7 @@ function getDefaultShapeType(layoutType) {
     case "cycle":
     case "target":
     case "gear":
+      return "ellipse";
     case "relationship":
     case "venn":
       return "ellipse";
@@ -16914,7 +16915,10 @@ function getDefaultShapeType(layoutType) {
       return "chevron";
     case "pyramid":
     case "funnel":
-      return "rect";
+      return "trapezoid";
+    case "timeline":
+    case "bending":
+      return "roundRect";
     default:
       return "roundRect";
   }
@@ -17004,7 +17008,7 @@ function layoutCycle(nodes, bounds, themeColorMap) {
     const ny = cy + radius * Math.sin(angle) - nodeH / 2;
     const fill = accentColor(i, themeColorMap);
     elements.push(
-      makeShapeElement(nextId("sa-cycle"), nx, ny, nodeW, nodeH, "roundRect", fill, node.text, {
+      makeShapeElement(nextId("sa-cycle"), nx, ny, nodeW, nodeH, "ellipse", fill, node.text, {
         fontSize: Math.max(7, Math.min(10, nodeW * 0.1))
       })
     );
@@ -17071,7 +17075,7 @@ function layoutPyramid(nodes, bounds, themeColorMap) {
     const x = bounds.x + (bounds.width - w) / 2;
     const y = bounds.y + padding + i * (bandH + gap);
     const fill = accentColor(i, themeColorMap);
-    return makeShapeElement(nextId("sa-pyramid"), x, y, w, bandH, "rect", fill, node.text, {
+    return makeShapeElement(nextId("sa-pyramid"), x, y, w, bandH, "trapezoid", fill, node.text, {
       fontSize: Math.max(8, Math.min(11, bandH * 0.4))
     });
   });
@@ -17820,7 +17824,7 @@ function decomposeSmartArt(smartArtData, containerBounds, themeColorMap, layoutD
     themeColorMap,
     smartArtData.colorTransform?.fillColors
   );
-  const layoutType = smartArtData.resolvedLayoutType ?? resolveLayoutFromRawType(smartArtData.layoutType);
+  const layoutType = resolveEffectiveLayoutType(smartArtData);
   const namedLayout = smartArtData.layout;
   if (namedLayout) {
     const namedResult = dispatchNamedLayout(namedLayout, nodes, containerBounds, effectiveThemeMap);
@@ -17851,6 +17855,52 @@ function dispatchLayoutByType(layoutType, nodes, containerBounds, effectiveTheme
       return layoutWithHeuristic(nodes, containerBounds, effectiveThemeMap);
   }
 }
+var LAYOUT_PRESET_TO_TYPE = {
+  basicBlockList: "list",
+  alternatingHexagons: "list",
+  horizontalBulletList: "list",
+  stackedList: "list",
+  tableList: "list",
+  trapezoidList: "list",
+  pictureAccentList: "list",
+  verticalBlockList: "list",
+  groupedList: "list",
+  pyramidList: "list",
+  horizontalPictureList: "list",
+  basicMatrix: "matrix",
+  basicPyramid: "pyramid",
+  invertedPyramid: "pyramid",
+  basicChevronProcess: "chevron",
+  continuousBlockProcess: "process",
+  segmentedProcess: "process",
+  upwardArrow: "process",
+  basicTimeline: "timeline",
+  bendingProcess: "bending",
+  stepDownProcess: "process",
+  alternatingFlow: "process",
+  descendingProcess: "process",
+  accentProcess: "process",
+  verticalChevronList: "chevron",
+  basicFunnel: "funnel",
+  basicCycle: "cycle",
+  basicPie: "cycle",
+  basicRadial: "cycle",
+  basicVenn: "relationship",
+  convergingRadial: "cycle",
+  linearVenn: "relationship",
+  basicTarget: "target",
+  interlockingGears: "gear",
+  hierarchy: "hierarchy"
+};
+function resolveEffectiveLayoutType(data) {
+  if (data.resolvedLayoutType && data.resolvedLayoutType !== "unknown") {
+    return data.resolvedLayoutType;
+  }
+  if (data.layout && LAYOUT_PRESET_TO_TYPE[data.layout]) {
+    return LAYOUT_PRESET_TO_TYPE[data.layout];
+  }
+  return resolveLayoutFromRawType(data.layoutType);
+}
 function buildEffectiveThemeMap(themeColorMap, colorTransformFills) {
   if (!colorTransformFills || colorTransformFills.length === 0) {
     return themeColorMap;
@@ -36091,14 +36141,19 @@ function transPointXml(guid, type, cxnGuid) {
 function docPointXml(docGuid, ids) {
   return `<dgm:pt modelId="${docGuid}" type="doc"><dgm:prSet loTypeId="${xmlEscape(ids.layoutUniqueId)}" loCatId="${xmlEscape(ids.layoutCategory)}" qsTypeId="${xmlEscape(ids.quickStyleUniqueId)}" qsCatId="simple" csTypeId="${xmlEscape(ids.colorsUniqueId)}" csCatId="${xmlEscape(ids.colorsCategory)}"/><dgm:spPr/>${EMPTY_TEXT_BODY}</dgm:pt>`;
 }
-function buildFabricatedDiagramDataXml(data, ids) {
-  const docGuid = newSmartArtGuid();
+function buildNodeGuidMap(nodes) {
   const guidByNodeId = /* @__PURE__ */ new Map();
-  for (const node of data.nodes) {
+  for (const node of nodes) {
     if (node.id && !guidByNodeId.has(node.id)) {
       guidByNodeId.set(node.id, GUID_MODEL_ID.test(node.id) ? node.id : newSmartArtGuid());
     }
   }
+  return guidByNodeId;
+}
+var DSP_DATA_MODEL_EXT_URI = "http://schemas.microsoft.com/office/drawing/2008/diagram";
+function buildFabricatedDiagramDataXml(data, ids, options = {}) {
+  const docGuid = newSmartArtGuid();
+  const guidByNodeId = options.guidByNodeId ?? buildNodeGuidMap(data.nodes);
   const points2 = [docPointXml(docGuid, ids)];
   const connections = [];
   const nextSrcOrd = /* @__PURE__ */ new Map();
@@ -36121,7 +36176,121 @@ function buildFabricatedDiagramDataXml(data, ids) {
     );
   }
   return `${XML_PROLOG}\r
-<dgm:dataModel ${DGM_XMLNS}><dgm:ptLst>${points2.join("")}</dgm:ptLst><dgm:cxnLst>${connections.join("")}</dgm:cxnLst><dgm:bg/><dgm:whole/></dgm:dataModel>`;
+<dgm:dataModel ${DGM_XMLNS}><dgm:ptLst>${points2.join("")}</dgm:ptLst><dgm:cxnLst>${connections.join("")}</dgm:cxnLst><dgm:bg/><dgm:whole/>${dataModelExtXml(options.drawingRelId)}</dgm:dataModel>`;
+}
+function dataModelExtXml(drawingRelId) {
+  if (!drawingRelId) {
+    return "";
+  }
+  return `<dgm:extLst><a:ext uri="${DSP_DATA_MODEL_EXT_URI}"><dsp:dataModelExt xmlns:dsp="${DSP_DATA_MODEL_EXT_URI}" relId="${xmlEscape(drawingRelId)}" minVer="http://schemas.openxmlformats.org/drawingml/2006/diagram"/></a:ext></dgm:extLst>`;
+}
+
+// src/core/core/runtime/smartart-fabrication-drawing.ts
+var DIAGRAM_DRAWING_CONTENT_TYPE = "application/vnd.ms-office.drawingml.diagramDrawing+xml";
+var DIAGRAM_DRAWING_REL_TYPE = "http://schemas.microsoft.com/office/2007/relationships/diagramDrawing";
+var DSP_XMLNS = 'xmlns:dsp="http://schemas.microsoft.com/office/drawing/2008/diagram" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"';
+var ACCENTS = ["accent1", "accent2", "accent3", "accent4", "accent5", "accent6"];
+function toEmu(px2) {
+  return Math.round(px2 * EMU_PER_PX);
+}
+function normalizeHex3(color) {
+  if (!color) {
+    return void 0;
+  }
+  const hex8 = color.replace(/^#/u, "").trim();
+  return /^[0-9A-Fa-f]{6}$/u.test(hex8) ? hex8.toUpperCase() : void 0;
+}
+function resolveShapeModelId(shape, index, nodes, guidByNodeId) {
+  const direct = guidByNodeId.get(shape.id);
+  if (direct) {
+    return direct;
+  }
+  const matched = nodes.find(
+    (node) => node.id && (shape.id === node.id || shape.id.endsWith(`-${node.id}`))
+  );
+  if (matched?.id) {
+    const guid = guidByNodeId.get(matched.id);
+    if (guid) {
+      return guid;
+    }
+  }
+  const positional = nodes[index]?.id;
+  if (positional) {
+    const guid = guidByNodeId.get(positional);
+    if (guid) {
+      return guid;
+    }
+  }
+  return newSmartArtGuid();
+}
+function textBodyXml(shape) {
+  const text = shape.text ?? "";
+  const fontColor = normalizeHex3(shape.fontColor);
+  const size = shape.fontSize && shape.fontSize > 0 ? ` sz="${Math.round(shape.fontSize * 100)}"` : "";
+  const fill = fontColor ? `<a:solidFill><a:srgbClr val="${fontColor}"/></a:solidFill>` : "";
+  const rPr = `<a:rPr lang="en-US"${size}>${fill}</a:rPr>`;
+  const run = text ? `<a:r>${rPr}<a:t>${xmlEscape(text)}</a:t></a:r>` : `<a:endParaRPr lang="en-US"/>`;
+  return `<dsp:txBody><a:bodyPr/><a:lstStyle/><a:p><a:pPr algn="ctr"/>${run}</a:p></dsp:txBody>`;
+}
+function styleXml(index) {
+  const accent = ACCENTS[index % ACCENTS.length];
+  return `<dsp:style><a:lnRef idx="2"><a:schemeClr val="${accent}"><a:shade val="50000"/></a:schemeClr></a:lnRef><a:fillRef idx="1"><a:schemeClr val="${accent}"/></a:fillRef><a:effectRef idx="0"><a:schemeClr val="${accent}"/></a:effectRef><a:fontRef idx="minor"><a:schemeClr val="lt1"/></a:fontRef></dsp:style>`;
+}
+function shapePropsXml(shape) {
+  const rot = shape.rotation ? ` rot="${Math.round(shape.rotation * 6e4)}"` : "";
+  const xfrm = `<a:xfrm${rot}><a:off x="${toEmu(shape.x)}" y="${toEmu(shape.y)}"/><a:ext cx="${toEmu(Math.max(shape.width, 1))}" cy="${toEmu(Math.max(shape.height, 1))}"/></a:xfrm>`;
+  const prst = shape.shapeType && shape.shapeType.length > 0 ? shape.shapeType : "rect";
+  const geom = `<a:prstGeom prst="${xmlEscape(prst)}"><a:avLst/></a:prstGeom>`;
+  const fillHex = normalizeHex3(shape.fillColor);
+  const fill = fillHex ? `<a:solidFill><a:srgbClr val="${fillHex}"/></a:solidFill>` : "";
+  const strokeHex = normalizeHex3(shape.strokeColor);
+  const strokeW = shape.strokeWidth && shape.strokeWidth > 0 ? ` w="${Math.round(shape.strokeWidth * 12700)}"` : "";
+  const ln = strokeHex ? `<a:ln${strokeW}><a:solidFill><a:srgbClr val="${strokeHex}"/></a:solidFill></a:ln>` : "";
+  return `<dsp:spPr>${xfrm}${geom}${fill}${ln}</dsp:spPr>`;
+}
+function shapeXml(shape, index, nodes, guidByNodeId) {
+  const modelId = resolveShapeModelId(shape, index, nodes, guidByNodeId);
+  return `<dsp:sp modelId="${modelId}"><dsp:nvSpPr><dsp:cNvPr id="0" name=""/><dsp:cNvSpPr/></dsp:nvSpPr>${shapePropsXml(shape)}${styleXml(index)}${textBodyXml(shape)}</dsp:sp>`;
+}
+function buildFabricatedDrawingXml(shapes, nodes, guidByNodeId) {
+  if (!shapes || shapes.length === 0) {
+    return void 0;
+  }
+  const body = shapes.map((shape, index) => shapeXml(shape, index, nodes, guidByNodeId)).join("");
+  return `${XML_PROLOG}\r
+<dsp:drawing ${DSP_XMLNS}><dsp:spTree><dsp:nvGrpSpPr><dsp:cNvPr id="0" name=""/><dsp:cNvGrpSpPr/></dsp:nvGrpSpPr><dsp:grpSpPr/>${body}</dsp:spTree></dsp:drawing>`;
+}
+function buildDiagramDataRelsXml(drawingRelId, drawingFileName) {
+  return `${XML_PROLOG}\r
+<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="${xmlEscape(drawingRelId)}" Type="${DIAGRAM_DRAWING_REL_TYPE}" Target="${xmlEscape(drawingFileName)}"/></Relationships>`;
+}
+function smartArtElementsToDrawingShapes(elements) {
+  if (!elements || elements.length === 0) {
+    return [];
+  }
+  const shapes = [];
+  for (const el of elements) {
+    if (el.type !== "shape") {
+      continue;
+    }
+    const shape = el;
+    shapes.push({
+      id: shape.id,
+      shapeType: shape.shapeType ?? "rect",
+      x: shape.x,
+      y: shape.y,
+      width: shape.width,
+      height: shape.height,
+      rotation: shape.rotation,
+      fillColor: shape.shapeStyle?.fillColor,
+      strokeColor: shape.shapeStyle?.strokeColor,
+      strokeWidth: shape.shapeStyle?.strokeWidth,
+      text: shape.text,
+      fontSize: shape.textStyle?.fontSize,
+      fontColor: shape.textStyle?.color
+    });
+  }
+  return shapes;
 }
 
 // src/core/core/runtime/smartart-fabrication-hierarchy.ts
@@ -36329,14 +36498,29 @@ var PptxHandlerRuntime32 = class _PptxHandlerRuntime extends PptxHandlerRuntime3
     const data = el.smartArtData;
     const family = resolveFabricatedLayoutFamily(data);
     const index = this.nextDiagramPartIndex();
+    const guidByNodeId = buildNodeGuidMap(data.nodes);
+    const drawingShapes = data.drawingShapes && data.drawingShapes.length > 0 ? data.drawingShapes : smartArtElementsToDrawingShapes(
+      decomposeSmartArt(data, {
+        x: 0,
+        y: 0,
+        width: Math.max(el.width, 1),
+        height: Math.max(el.height, 1)
+      })
+    );
+    const drawingRelId = "rId1";
+    const drawingXml = buildFabricatedDrawingXml(drawingShapes, data.nodes, guidByNodeId);
     const payloads = {
-      data: buildFabricatedDiagramDataXml(data, {
-        layoutUniqueId: fabricatedLayoutUniqueId(family),
-        layoutCategory: fabricatedLayoutCategory(family),
-        quickStyleUniqueId: FABRICATED_QUICKSTYLE_UNIQUE_ID,
-        colorsUniqueId: fabricatedColorsUniqueId(data.colorScheme),
-        colorsCategory: fabricatedColorsCategory(data.colorScheme)
-      }),
+      data: buildFabricatedDiagramDataXml(
+        data,
+        {
+          layoutUniqueId: fabricatedLayoutUniqueId(family),
+          layoutCategory: fabricatedLayoutCategory(family),
+          quickStyleUniqueId: FABRICATED_QUICKSTYLE_UNIQUE_ID,
+          colorsUniqueId: fabricatedColorsUniqueId(data.colorScheme),
+          colorsCategory: fabricatedColorsCategory(data.colorScheme)
+        },
+        { guidByNodeId, drawingRelId: drawingXml ? drawingRelId : void 0 }
+      ),
       layout: buildFabricatedLayoutDefXml(family),
       quickStyle: buildFabricatedQuickStyleXml(),
       colors: buildFabricatedColorsXml(data.colorScheme)
@@ -36360,6 +36544,19 @@ var PptxHandlerRuntime32 = class _PptxHandlerRuntime extends PptxHandlerRuntime3
       });
       relIds[kind.relAttr] = relId;
     }
+    if (drawingXml) {
+      const drawingFile = `drawing${index}.xml`;
+      const drawingPath = `ppt/diagrams/${drawingFile}`;
+      this.zip.file(drawingPath, drawingXml);
+      (this.pendingDiagramContentTypes ??= []).push({
+        partName: `/${drawingPath}`,
+        contentType: DIAGRAM_DRAWING_CONTENT_TYPE
+      });
+      this.zip.file(
+        `ppt/diagrams/_rels/data${index}.xml.rels`,
+        buildDiagramDataRelsXml(drawingRelId, drawingFile)
+      );
+    }
     const EMU = _PptxHandlerRuntime.EMU_PER_PX;
     return {
       "p:nvGraphicFramePr": {

package/dist/index.mjs

@@ -16902,6 +16902,7 @@ function getDefaultShapeType(layoutType) {
     case "cycle":
     case "target":
     case "gear":
+      return "ellipse";
     case "relationship":
     case "venn":
       return "ellipse";
@@ -16909,7 +16910,10 @@ function getDefaultShapeType(layoutType) {
       return "chevron";
     case "pyramid":
     case "funnel":
-      return "rect";
+      return "trapezoid";
+    case "timeline":
+    case "bending":
+      return "roundRect";
     default:
       return "roundRect";
   }
@@ -16999,7 +17003,7 @@ function layoutCycle(nodes, bounds, themeColorMap) {
     const ny = cy + radius * Math.sin(angle) - nodeH / 2;
     const fill = accentColor(i, themeColorMap);
     elements.push(
-      makeShapeElement(nextId("sa-cycle"), nx, ny, nodeW, nodeH, "roundRect", fill, node.text, {
+      makeShapeElement(nextId("sa-cycle"), nx, ny, nodeW, nodeH, "ellipse", fill, node.text, {
         fontSize: Math.max(7, Math.min(10, nodeW * 0.1))
       })
     );
@@ -17066,7 +17070,7 @@ function layoutPyramid(nodes, bounds, themeColorMap) {
     const x = bounds.x + (bounds.width - w) / 2;
     const y = bounds.y + padding + i * (bandH + gap);
     const fill = accentColor(i, themeColorMap);
-    return makeShapeElement(nextId("sa-pyramid"), x, y, w, bandH, "rect", fill, node.text, {
+    return makeShapeElement(nextId("sa-pyramid"), x, y, w, bandH, "trapezoid", fill, node.text, {
       fontSize: Math.max(8, Math.min(11, bandH * 0.4))
     });
   });
@@ -17815,7 +17819,7 @@ function decomposeSmartArt(smartArtData, containerBounds, themeColorMap, layoutD
     themeColorMap,
     smartArtData.colorTransform?.fillColors
   );
-  const layoutType = smartArtData.resolvedLayoutType ?? resolveLayoutFromRawType(smartArtData.layoutType);
+  const layoutType = resolveEffectiveLayoutType(smartArtData);
   const namedLayout = smartArtData.layout;
   if (namedLayout) {
     const namedResult = dispatchNamedLayout(namedLayout, nodes, containerBounds, effectiveThemeMap);
@@ -17846,6 +17850,52 @@ function dispatchLayoutByType(layoutType, nodes, containerBounds, effectiveTheme
       return layoutWithHeuristic(nodes, containerBounds, effectiveThemeMap);
   }
 }
+var LAYOUT_PRESET_TO_TYPE = {
+  basicBlockList: "list",
+  alternatingHexagons: "list",
+  horizontalBulletList: "list",
+  stackedList: "list",
+  tableList: "list",
+  trapezoidList: "list",
+  pictureAccentList: "list",
+  verticalBlockList: "list",
+  groupedList: "list",
+  pyramidList: "list",
+  horizontalPictureList: "list",
+  basicMatrix: "matrix",
+  basicPyramid: "pyramid",
+  invertedPyramid: "pyramid",
+  basicChevronProcess: "chevron",
+  continuousBlockProcess: "process",
+  segmentedProcess: "process",
+  upwardArrow: "process",
+  basicTimeline: "timeline",
+  bendingProcess: "bending",
+  stepDownProcess: "process",
+  alternatingFlow: "process",
+  descendingProcess: "process",
+  accentProcess: "process",
+  verticalChevronList: "chevron",
+  basicFunnel: "funnel",
+  basicCycle: "cycle",
+  basicPie: "cycle",
+  basicRadial: "cycle",
+  basicVenn: "relationship",
+  convergingRadial: "cycle",
+  linearVenn: "relationship",
+  basicTarget: "target",
+  interlockingGears: "gear",
+  hierarchy: "hierarchy"
+};
+function resolveEffectiveLayoutType(data) {
+  if (data.resolvedLayoutType && data.resolvedLayoutType !== "unknown") {
+    return data.resolvedLayoutType;
+  }
+  if (data.layout && LAYOUT_PRESET_TO_TYPE[data.layout]) {
+    return LAYOUT_PRESET_TO_TYPE[data.layout];
+  }
+  return resolveLayoutFromRawType(data.layoutType);
+}
 function buildEffectiveThemeMap(themeColorMap, colorTransformFills) {
   if (!colorTransformFills || colorTransformFills.length === 0) {
     return themeColorMap;
@@ -36086,14 +36136,19 @@ function transPointXml(guid, type, cxnGuid) {
 function docPointXml(docGuid, ids) {
   return `<dgm:pt modelId="${docGuid}" type="doc"><dgm:prSet loTypeId="${xmlEscape(ids.layoutUniqueId)}" loCatId="${xmlEscape(ids.layoutCategory)}" qsTypeId="${xmlEscape(ids.quickStyleUniqueId)}" qsCatId="simple" csTypeId="${xmlEscape(ids.colorsUniqueId)}" csCatId="${xmlEscape(ids.colorsCategory)}"/><dgm:spPr/>${EMPTY_TEXT_BODY}</dgm:pt>`;
 }
-function buildFabricatedDiagramDataXml(data, ids) {
-  const docGuid = newSmartArtGuid();
+function buildNodeGuidMap(nodes) {
   const guidByNodeId = /* @__PURE__ */ new Map();
-  for (const node of data.nodes) {
+  for (const node of nodes) {
     if (node.id && !guidByNodeId.has(node.id)) {
       guidByNodeId.set(node.id, GUID_MODEL_ID.test(node.id) ? node.id : newSmartArtGuid());
     }
   }
+  return guidByNodeId;
+}
+var DSP_DATA_MODEL_EXT_URI = "http://schemas.microsoft.com/office/drawing/2008/diagram";
+function buildFabricatedDiagramDataXml(data, ids, options = {}) {
+  const docGuid = newSmartArtGuid();
+  const guidByNodeId = options.guidByNodeId ?? buildNodeGuidMap(data.nodes);
   const points2 = [docPointXml(docGuid, ids)];
   const connections = [];
   const nextSrcOrd = /* @__PURE__ */ new Map();
@@ -36116,7 +36171,121 @@ function buildFabricatedDiagramDataXml(data, ids) {
     );
   }
   return `${XML_PROLOG}\r
-<dgm:dataModel ${DGM_XMLNS}><dgm:ptLst>${points2.join("")}</dgm:ptLst><dgm:cxnLst>${connections.join("")}</dgm:cxnLst><dgm:bg/><dgm:whole/></dgm:dataModel>`;
+<dgm:dataModel ${DGM_XMLNS}><dgm:ptLst>${points2.join("")}</dgm:ptLst><dgm:cxnLst>${connections.join("")}</dgm:cxnLst><dgm:bg/><dgm:whole/>${dataModelExtXml(options.drawingRelId)}</dgm:dataModel>`;
+}
+function dataModelExtXml(drawingRelId) {
+  if (!drawingRelId) {
+    return "";
+  }
+  return `<dgm:extLst><a:ext uri="${DSP_DATA_MODEL_EXT_URI}"><dsp:dataModelExt xmlns:dsp="${DSP_DATA_MODEL_EXT_URI}" relId="${xmlEscape(drawingRelId)}" minVer="http://schemas.openxmlformats.org/drawingml/2006/diagram"/></a:ext></dgm:extLst>`;
+}
+
+// src/core/core/runtime/smartart-fabrication-drawing.ts
+var DIAGRAM_DRAWING_CONTENT_TYPE = "application/vnd.ms-office.drawingml.diagramDrawing+xml";
+var DIAGRAM_DRAWING_REL_TYPE = "http://schemas.microsoft.com/office/2007/relationships/diagramDrawing";
+var DSP_XMLNS = 'xmlns:dsp="http://schemas.microsoft.com/office/drawing/2008/diagram" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"';
+var ACCENTS = ["accent1", "accent2", "accent3", "accent4", "accent5", "accent6"];
+function toEmu(px2) {
+  return Math.round(px2 * EMU_PER_PX);
+}
+function normalizeHex3(color) {
+  if (!color) {
+    return void 0;
+  }
+  const hex8 = color.replace(/^#/u, "").trim();
+  return /^[0-9A-Fa-f]{6}$/u.test(hex8) ? hex8.toUpperCase() : void 0;
+}
+function resolveShapeModelId(shape, index, nodes, guidByNodeId) {
+  const direct = guidByNodeId.get(shape.id);
+  if (direct) {
+    return direct;
+  }
+  const matched = nodes.find(
+    (node) => node.id && (shape.id === node.id || shape.id.endsWith(`-${node.id}`))
+  );
+  if (matched?.id) {
+    const guid = guidByNodeId.get(matched.id);
+    if (guid) {
+      return guid;
+    }
+  }
+  const positional = nodes[index]?.id;
+  if (positional) {
+    const guid = guidByNodeId.get(positional);
+    if (guid) {
+      return guid;
+    }
+  }
+  return newSmartArtGuid();
+}
+function textBodyXml(shape) {
+  const text = shape.text ?? "";
+  const fontColor = normalizeHex3(shape.fontColor);
+  const size = shape.fontSize && shape.fontSize > 0 ? ` sz="${Math.round(shape.fontSize * 100)}"` : "";
+  const fill = fontColor ? `<a:solidFill><a:srgbClr val="${fontColor}"/></a:solidFill>` : "";
+  const rPr = `<a:rPr lang="en-US"${size}>${fill}</a:rPr>`;
+  const run = text ? `<a:r>${rPr}<a:t>${xmlEscape(text)}</a:t></a:r>` : `<a:endParaRPr lang="en-US"/>`;
+  return `<dsp:txBody><a:bodyPr/><a:lstStyle/><a:p><a:pPr algn="ctr"/>${run}</a:p></dsp:txBody>`;
+}
+function styleXml(index) {
+  const accent = ACCENTS[index % ACCENTS.length];
+  return `<dsp:style><a:lnRef idx="2"><a:schemeClr val="${accent}"><a:shade val="50000"/></a:schemeClr></a:lnRef><a:fillRef idx="1"><a:schemeClr val="${accent}"/></a:fillRef><a:effectRef idx="0"><a:schemeClr val="${accent}"/></a:effectRef><a:fontRef idx="minor"><a:schemeClr val="lt1"/></a:fontRef></dsp:style>`;
+}
+function shapePropsXml(shape) {
+  const rot = shape.rotation ? ` rot="${Math.round(shape.rotation * 6e4)}"` : "";
+  const xfrm = `<a:xfrm${rot}><a:off x="${toEmu(shape.x)}" y="${toEmu(shape.y)}"/><a:ext cx="${toEmu(Math.max(shape.width, 1))}" cy="${toEmu(Math.max(shape.height, 1))}"/></a:xfrm>`;
+  const prst = shape.shapeType && shape.shapeType.length > 0 ? shape.shapeType : "rect";
+  const geom = `<a:prstGeom prst="${xmlEscape(prst)}"><a:avLst/></a:prstGeom>`;
+  const fillHex = normalizeHex3(shape.fillColor);
+  const fill = fillHex ? `<a:solidFill><a:srgbClr val="${fillHex}"/></a:solidFill>` : "";
+  const strokeHex = normalizeHex3(shape.strokeColor);
+  const strokeW = shape.strokeWidth && shape.strokeWidth > 0 ? ` w="${Math.round(shape.strokeWidth * 12700)}"` : "";
+  const ln = strokeHex ? `<a:ln${strokeW}><a:solidFill><a:srgbClr val="${strokeHex}"/></a:solidFill></a:ln>` : "";
+  return `<dsp:spPr>${xfrm}${geom}${fill}${ln}</dsp:spPr>`;
+}
+function shapeXml(shape, index, nodes, guidByNodeId) {
+  const modelId = resolveShapeModelId(shape, index, nodes, guidByNodeId);
+  return `<dsp:sp modelId="${modelId}"><dsp:nvSpPr><dsp:cNvPr id="0" name=""/><dsp:cNvSpPr/></dsp:nvSpPr>${shapePropsXml(shape)}${styleXml(index)}${textBodyXml(shape)}</dsp:sp>`;
+}
+function buildFabricatedDrawingXml(shapes, nodes, guidByNodeId) {
+  if (!shapes || shapes.length === 0) {
+    return void 0;
+  }
+  const body = shapes.map((shape, index) => shapeXml(shape, index, nodes, guidByNodeId)).join("");
+  return `${XML_PROLOG}\r
+<dsp:drawing ${DSP_XMLNS}><dsp:spTree><dsp:nvGrpSpPr><dsp:cNvPr id="0" name=""/><dsp:cNvGrpSpPr/></dsp:nvGrpSpPr><dsp:grpSpPr/>${body}</dsp:spTree></dsp:drawing>`;
+}
+function buildDiagramDataRelsXml(drawingRelId, drawingFileName) {
+  return `${XML_PROLOG}\r
+<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="${xmlEscape(drawingRelId)}" Type="${DIAGRAM_DRAWING_REL_TYPE}" Target="${xmlEscape(drawingFileName)}"/></Relationships>`;
+}
+function smartArtElementsToDrawingShapes(elements) {
+  if (!elements || elements.length === 0) {
+    return [];
+  }
+  const shapes = [];
+  for (const el of elements) {
+    if (el.type !== "shape") {
+      continue;
+    }
+    const shape = el;
+    shapes.push({
+      id: shape.id,
+      shapeType: shape.shapeType ?? "rect",
+      x: shape.x,
+      y: shape.y,
+      width: shape.width,
+      height: shape.height,
+      rotation: shape.rotation,
+      fillColor: shape.shapeStyle?.fillColor,
+      strokeColor: shape.shapeStyle?.strokeColor,
+      strokeWidth: shape.shapeStyle?.strokeWidth,
+      text: shape.text,
+      fontSize: shape.textStyle?.fontSize,
+      fontColor: shape.textStyle?.color
+    });
+  }
+  return shapes;
 }
 
 // src/core/core/runtime/smartart-fabrication-hierarchy.ts
@@ -36324,14 +36493,29 @@ var PptxHandlerRuntime32 = class _PptxHandlerRuntime extends PptxHandlerRuntime3
     const data = el.smartArtData;
     const family = resolveFabricatedLayoutFamily(data);
     const index = this.nextDiagramPartIndex();
+    const guidByNodeId = buildNodeGuidMap(data.nodes);
+    const drawingShapes = data.drawingShapes && data.drawingShapes.length > 0 ? data.drawingShapes : smartArtElementsToDrawingShapes(
+      decomposeSmartArt(data, {
+        x: 0,
+        y: 0,
+        width: Math.max(el.width, 1),
+        height: Math.max(el.height, 1)
+      })
+    );
+    const drawingRelId = "rId1";
+    const drawingXml = buildFabricatedDrawingXml(drawingShapes, data.nodes, guidByNodeId);
     const payloads = {
-      data: buildFabricatedDiagramDataXml(data, {
-        layoutUniqueId: fabricatedLayoutUniqueId(family),
-        layoutCategory: fabricatedLayoutCategory(family),
-        quickStyleUniqueId: FABRICATED_QUICKSTYLE_UNIQUE_ID,
-        colorsUniqueId: fabricatedColorsUniqueId(data.colorScheme),
-        colorsCategory: fabricatedColorsCategory(data.colorScheme)
-      }),
+      data: buildFabricatedDiagramDataXml(
+        data,
+        {
+          layoutUniqueId: fabricatedLayoutUniqueId(family),
+          layoutCategory: fabricatedLayoutCategory(family),
+          quickStyleUniqueId: FABRICATED_QUICKSTYLE_UNIQUE_ID,
+          colorsUniqueId: fabricatedColorsUniqueId(data.colorScheme),
+          colorsCategory: fabricatedColorsCategory(data.colorScheme)
+        },
+        { guidByNodeId, drawingRelId: drawingXml ? drawingRelId : void 0 }
+      ),
       layout: buildFabricatedLayoutDefXml(family),
       quickStyle: buildFabricatedQuickStyleXml(),
       colors: buildFabricatedColorsXml(data.colorScheme)
@@ -36355,6 +36539,19 @@ var PptxHandlerRuntime32 = class _PptxHandlerRuntime extends PptxHandlerRuntime3
       });
       relIds[kind.relAttr] = relId;
     }
+    if (drawingXml) {
+      const drawingFile = `drawing${index}.xml`;
+      const drawingPath = `ppt/diagrams/${drawingFile}`;
+      this.zip.file(drawingPath, drawingXml);
+      (this.pendingDiagramContentTypes ??= []).push({
+        partName: `/${drawingPath}`,
+        contentType: DIAGRAM_DRAWING_CONTENT_TYPE
+      });
+      this.zip.file(
+        `ppt/diagrams/_rels/data${index}.xml.rels`,
+        buildDiagramDataRelsXml(drawingRelId, drawingFile)
+      );
+    }
     const EMU = _PptxHandlerRuntime.EMU_PER_PX;
     return {
       "p:nvGraphicFramePr": {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pptx-viewer-core",
-	"version": "1.2.3",
+	"version": "1.2.4",
 	"description": "PowerPoint PPTX engine: parse, edit, serialize, and convert .pptx files. Framework-agnostic TypeScript SDK.",
 	"keywords": [
 		"angular",