ooxml-ui 1.25.0 → 1.26.0

package/dist/pptx/chunk-CWHK7HF4.mjs

@@ -0,0 +1,751 @@
+import { canDrillDown, THREE_VIEW_EVENTS, applyChart3DSelect, applyChart3DDrag, resolveSmartArtThreeViewSpec, elementInLocalFrame, SMARTART_3D_EDIT_LAYER_ATTRIBUTE, stripEditLayerMarkers, routeEditLayerPointerToNodes, measureSvgViewportRect, findSmartArtNodeText, resolvePalette, smartArtConnectorPaint, smartArtNodeLabel, getContainerStyle, buildChromeStyle, buildSmartArtA11y, resolveRevealedSmartArtNodes, resolveRevealedDrawingShapes, computeSmartArtElementLayout, flattenNodes, computeDrawingViewBox, projectDrawingShapes, styleShadowFilter, resolveRevealedDrawingShapeNodeIds, SMARTART_PREVIEW_ELEMENT_WIDTH, SMARTART_PREVIEW_ELEMENT_HEIGHT, buildSmartArtPreviewElement, isForwardedEditLayerEvent } from './chunk-IWUIGVWT.mjs';
+import { formatAxisValue } from './chunk-34LEUH5R.mjs';
+import { THREE_VIEW_TAG, defineThreeViewElement } from './chunk-AMW2AR7J.mjs';
+
+// src/pptx/dom/dom.ts
+function toCssPropertyName(key) {
+  return key.replace(/[A-Z]/gu, (c) => `-${c.toLowerCase()}`);
+}
+function applyStyleMap(el, style) {
+  for (const [key, value] of Object.entries(style)) {
+    if (value === void 0 || value === null) {
+      continue;
+    }
+    const property = key.startsWith("--") || key.includes("-") ? key : toCssPropertyName(key);
+    el.style.setProperty(property, String(value));
+  }
+}
+function createEl(doc, tag, className, style) {
+  const el = doc.createElement(tag);
+  if (className) {
+    el.className = className;
+  }
+  if (style) {
+    applyStyleMap(el, style);
+  }
+  return el;
+}
+var SVG_NS = "http://www.w3.org/2000/svg";
+function createSvgEl(doc, tag, attrs) {
+  const el = doc.createElementNS(SVG_NS, tag);
+  if (attrs) {
+    setSvgAttrs(el, attrs);
+  }
+  return el;
+}
+function setSvgAttrs(el, attrs) {
+  for (const [name, value] of Object.entries(attrs)) {
+    if (value !== void 0) {
+      el.setAttribute(name, String(value));
+    }
+  }
+}
+function composeTransforms(first, second) {
+  const a = first === void 0 ? "" : String(first);
+  const b = second === void 0 ? "" : String(second);
+  if (a && b) {
+    return `${a} ${b}`;
+  }
+  return a || b || void 0;
+}
+
+// src/pptx/dom/elements/three-view-reuse.ts
+var pool = null;
+function collectThreeViews(root) {
+  const views = /* @__PURE__ */ new Map();
+  for (const view of root.querySelectorAll(THREE_VIEW_TAG)) {
+    if (view.spec && !views.has(view.spec)) {
+      views.set(view.spec, view);
+    }
+  }
+  return views;
+}
+function withReusableThreeViews(views, render) {
+  const previous = pool;
+  pool = views;
+  try {
+    return render();
+  } finally {
+    pool = previous;
+  }
+}
+function takeReusableThreeView(spec) {
+  const view = pool?.get(spec) ?? null;
+  if (view) {
+    pool?.delete(spec);
+  }
+  return view;
+}
+
+// src/pptx/dom/elements/three-view.ts
+function rendering3DFlagsOf(context) {
+  return {
+    smartArt3D: context.smartArt3D,
+    surfaceChart3D: context.surfaceChart3D,
+    barChart3D: context.barChart3D,
+    lineChart3D: context.lineChart3D,
+    areaChart3D: context.areaChart3D,
+    pieChart3D: context.pieChart3D
+  };
+}
+function mountThreeViewInto(doc, wrapper, options) {
+  defineThreeViewElement(doc.defaultView?.customElements);
+  const view = takeReusableThreeView(options.spec) ?? doc.createElement(THREE_VIEW_TAG);
+  view.replaceChildren(...Array.from(wrapper.childNodes));
+  view.spec = options.spec;
+  view.interactive = options.interactive;
+  view.selectedPart = options.selectedPart ?? null;
+  view.textStyle = options.textStyle;
+  wrapper.appendChild(view);
+  return view;
+}
+function isChart3DEditable(element, context) {
+  return element.type === "chart" && Boolean(context.interactive) && Boolean(context.onChartPointChange) && Boolean(context.selectedElementIds?.has(element.id)) && canDrillDown(element);
+}
+function selectedChartPartOf(element, context) {
+  return context.chartPartSelection?.elementId === element.id ? context.chartPartSelection.part : null;
+}
+function wireChartThreeViewEvents(view, element, context, badgeHost) {
+  if (element.type !== "chart") {
+    return;
+  }
+  let badge = null;
+  const bridge = {
+    elementId: element.id,
+    chartData: element.chartData,
+    canSelect: isChart3DEditable(element, context),
+    selectedElementId: context.chartPartSelection?.elementId ?? null,
+    // There is no "clear chart part selection" hook: an empty-space click
+    // leaves the selection alone, exactly like the 2D chart.
+    setSelection: (selection) => {
+      if (selection) {
+        view.selectedPart = selection.part;
+        context.onChartPartSelect?.(element, selection.part);
+      }
+    },
+    setDragValue: (value) => {
+      if (value === null) {
+        badge?.remove();
+        badge = null;
+        return;
+      }
+      if (!badge) {
+        badge = badgeHost.ownerDocument.createElement("div");
+        badge.className = "pptxv-chart-drag-badge";
+        badgeHost.appendChild(badge);
+      }
+      badge.textContent = formatAxisValue(value);
+    },
+    commitChartData: (next) => context.onChartPointChange?.(element, next)
+  };
+  chartViewListeners.get(view)?.abort();
+  const listeners = new AbortController();
+  chartViewListeners.set(view, listeners);
+  view.addEventListener(
+    THREE_VIEW_EVENTS.select,
+    (event) => applyChart3DSelect(bridge, event.detail.part),
+    { signal: listeners.signal }
+  );
+  view.addEventListener(
+    THREE_VIEW_EVENTS.drag,
+    (event) => applyChart3DDrag(bridge, event.detail),
+    { signal: listeners.signal }
+  );
+}
+var chartViewListeners = /* @__PURE__ */ new WeakMap();
+function applyThreeViewTextStyle(el, style) {
+  for (const view of el.querySelectorAll(THREE_VIEW_TAG)) {
+    view.textStyle = style;
+  }
+}
+
+// src/pptx/dom/elements/smartart-3d.ts
+var renderSmartArt3DElement = (element, zIndex, context) => {
+  const wrapper = renderSmartArtSvg(element, zIndex, context);
+  const spec = wrapper ? resolveSmartArtThreeViewSpec(element, context.smartArt3D) : null;
+  if (!wrapper || !spec) {
+    return wrapper;
+  }
+  mountThreeViewInto(context.document, wrapper, {
+    spec,
+    interactive: Boolean(context.interactive) && !context.presenting,
+    textStyle: context.presentationStates?.get(element.id)?.textStyle
+  });
+  if (context.onSmartArtNodeTextChange && context.interactive && !context.presenting) {
+    const layer = renderSmartArtSvg(elementInLocalFrame(element), 0, context);
+    if (layer) {
+      layer.classList.add("pptxv-smartart-3d-edit-layer");
+      layer.setAttribute(SMARTART_3D_EDIT_LAYER_ATTRIBUTE, "true");
+      stripEditLayerMarkers(layer);
+      layer.setAttribute("aria-hidden", "true");
+      Object.assign(layer.style, { position: "absolute", inset: "0", zIndex: "1" });
+      for (const svg of layer.querySelectorAll("svg")) {
+        svg.style.opacity = "0";
+      }
+      wrapper.appendChild(layer);
+      routeEditLayerPointerToNodes(layer);
+    }
+  }
+  return wrapper;
+};
+
+// src/pptx/dom/elements/smartart-editable.ts
+var NODE_SELECTOR = "[data-smartart-node-id]";
+function nodeTarget(target) {
+  return target instanceof Element ? target.closest(NODE_SELECTOR) : null;
+}
+function enableSmartArtEditing(chrome, element, context) {
+  const data = element.smartArtData;
+  if (!data || !context.onSmartArtNodeTextChange && !context.onSmartArtNodeFillChange || !canDrillDown(element)) {
+    return;
+  }
+  let editor = null;
+  let swatches = null;
+  let hideTimer;
+  const cancelHide = () => clearTimeout(hideTimer);
+  const ignoredHover = (event) => chrome.closest(`[${SMARTART_3D_EDIT_LAYER_ATTRIBUTE}]`) !== null && !isForwardedEditLayerEvent(event);
+  const closeEditor = (input = editor) => {
+    if (!input || input !== editor) {
+      return;
+    }
+    editor = null;
+    input.remove();
+  };
+  chrome.addEventListener("dblclick", (event) => {
+    const target = nodeTarget(event.target);
+    const nodeId = target?.dataset.smartartNodeId;
+    if (!target || !nodeId || !context.onSmartArtNodeTextChange) {
+      return;
+    }
+    event.stopPropagation();
+    const textNode = target.querySelector("text");
+    const textRect = textNode ? measureSvgViewportRect(textNode) : null;
+    const rect = textRect && textRect.width > 0 ? textRect : measureSvgViewportRect(target);
+    if (!rect) {
+      return;
+    }
+    closeEditor();
+    swatches?.remove();
+    const input = createEl(chrome.ownerDocument, "textarea", "pptxv-smartart-node-editor", {
+      position: "absolute",
+      left: `${rect.left - 4}px`,
+      top: `${rect.top - 4}px`,
+      width: `${Math.max(48, rect.width + 8)}px`,
+      height: `${Math.max(30, rect.height + 8)}px`,
+      zIndex: "12",
+      boxSizing: "border-box",
+      padding: "4px",
+      resize: "none",
+      border: "2px solid #60a5fa",
+      borderRadius: "4px",
+      outline: "none",
+      background: "rgba(255,255,255,0.96)",
+      color: "#111827",
+      textAlign: "center"
+    });
+    editor = input;
+    input.value = findSmartArtNodeText(data, nodeId) ?? "";
+    const commit = () => {
+      if (input !== editor) {
+        return;
+      }
+      const value = input.value;
+      closeEditor(input);
+      context.onSmartArtNodeTextChange?.(element, nodeId, value);
+    };
+    input.addEventListener("blur", commit, { once: true });
+    input.addEventListener("keydown", (keyEvent) => {
+      if (keyEvent.key === "Escape") {
+        keyEvent.preventDefault();
+        closeEditor(input);
+      } else if (keyEvent.key === "Enter" && !keyEvent.shiftKey) {
+        keyEvent.preventDefault();
+        commit();
+      }
+    });
+    input.addEventListener("pointerdown", (pointerEvent) => pointerEvent.stopPropagation());
+    chrome.appendChild(input);
+    input.focus();
+    input.select();
+  });
+  chrome.addEventListener("mouseover", (event) => {
+    if (ignoredHover(event)) {
+      return;
+    }
+    const target = nodeTarget(event.target);
+    const nodeId = target?.dataset.smartartNodeId;
+    if (!target || !nodeId || !context.onSmartArtNodeFillChange || editor) {
+      return;
+    }
+    cancelHide();
+    swatches?.remove();
+    const rect = measureSvgViewportRect(target);
+    if (!rect) {
+      return;
+    }
+    swatches = createEl(chrome.ownerDocument, "div", "pptxv-smartart-node-swatches", {
+      position: "absolute",
+      left: `${Math.max(0, rect.left)}px`,
+      top: `${Math.max(0, rect.top - 26)}px`,
+      zIndex: "11",
+      display: "flex",
+      gap: "4px",
+      padding: "4px",
+      border: "1px solid rgba(148,163,184,0.7)",
+      borderRadius: "6px",
+      background: "rgba(15,23,42,0.96)",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.35)"
+    });
+    swatches.setAttribute("role", "group");
+    swatches.setAttribute("aria-label", context.t("pptx.smartArt.fillColor"));
+    for (const color of resolvePalette(data).slice(0, 6)) {
+      const button = createEl(chrome.ownerDocument, "button", "", {
+        width: "18px",
+        height: "18px",
+        padding: "0",
+        border: "1px solid rgba(255,255,255,0.8)",
+        borderRadius: "4px",
+        background: color,
+        cursor: "pointer"
+      });
+      button.type = "button";
+      button.setAttribute("data-pptx-compact", "");
+      button.setAttribute("aria-label", `${context.t("pptx.smartArt.fillColor")} ${color}`);
+      button.addEventListener("click", (clickEvent) => {
+        clickEvent.stopPropagation();
+        context.onSmartArtNodeFillChange?.(element, nodeId, color);
+        swatches?.remove();
+        swatches = null;
+      });
+      swatches.appendChild(button);
+    }
+    swatches.addEventListener("mouseenter", cancelHide);
+    swatches.addEventListener("mouseleave", () => {
+      swatches?.remove();
+      swatches = null;
+    });
+    chrome.appendChild(swatches);
+  });
+  chrome.addEventListener("mouseout", (event) => {
+    if (ignoredHover(event)) {
+      return;
+    }
+    const target = nodeTarget(event.target);
+    const to = event.relatedTarget;
+    if (!target || !swatches || to instanceof Node && (target.contains(to) || swatches.contains(to))) {
+      return;
+    }
+    cancelHide();
+    hideTimer = setTimeout(() => {
+      swatches?.remove();
+      swatches = null;
+    }, 150);
+  });
+}
+
+// src/pptx/dom/elements/smartart-svg.ts
+function appendSvgTextLines(doc, parent, options) {
+  const textEl = createSvgEl(doc, "text", {
+    x: options.x,
+    "text-anchor": options.textAnchor ?? "middle",
+    "dominant-baseline": options.dominantBaseline ?? "central",
+    fill: options.fill,
+    "font-size": options.fontSize,
+    "font-family": options.fontFamily,
+    "font-weight": options.fontWeight,
+    "font-style": options.fontStyle
+  });
+  for (const line of options.lines) {
+    const tspan = createSvgEl(doc, "tspan", { x: options.x, y: line.y });
+    tspan.textContent = line.text;
+    textEl.appendChild(tspan);
+  }
+  parent.appendChild(textEl);
+}
+function buildSvgGradientDefs(doc, gradient) {
+  const defs = createSvgEl(doc, "defs");
+  const server = gradient.kind === "radial" ? createSvgEl(doc, "radialGradient", {
+    id: gradient.id,
+    cx: gradient.cx,
+    cy: gradient.cy,
+    r: gradient.r
+  }) : createSvgEl(doc, "linearGradient", {
+    id: gradient.id,
+    x1: gradient.x1,
+    y1: gradient.y1,
+    x2: gradient.x2,
+    y2: gradient.y2
+  });
+  for (const stop of gradient.stops) {
+    server.appendChild(
+      createSvgEl(doc, "stop", {
+        offset: stop.offset,
+        "stop-color": stop.color,
+        "stop-opacity": stop.opacity
+      })
+    );
+  }
+  defs.appendChild(server);
+  return defs;
+}
+var SMARTART_SVG_STYLE = "width:100%;height:100%;pointer-events:none;display:block";
+
+// src/pptx/dom/elements/smartart-fallback.ts
+function buildSmartArtFallbackSvg(doc, layout, a11yNodes = [], nodeIds = []) {
+  const svg = createSvgEl(doc, "svg", {
+    viewBox: layout.viewBox,
+    preserveAspectRatio: "xMidYMid meet",
+    "data-layout-family": layout.family
+  });
+  svg.setAttribute("class", "pptxv-smartart-svg");
+  svg.setAttribute("style", SMARTART_SVG_STYLE);
+  for (const conn of layout.connectors) {
+    const paint = smartArtConnectorPaint(conn);
+    svg.appendChild(
+      createSvgEl(doc, "path", {
+        d: paint.d,
+        fill: "none",
+        stroke: paint.stroke,
+        "stroke-width": paint.strokeWidth,
+        opacity: paint.opacity,
+        "stroke-dasharray": paint.dash
+      })
+    );
+  }
+  const labelsById = new Map(a11yNodes.map((node) => [node.id, node.label]));
+  for (const [index, node] of layout.nodes.entries()) {
+    const nodeId = nodeIds[index];
+    const label = nodeId ? labelsById.get(nodeId) : a11yNodes[index]?.label;
+    svg.appendChild(buildFallbackNode(doc, node, layout.shadowFilter, label, nodeId));
+  }
+  return svg;
+}
+function buildFallbackNode(doc, node, shadowFilter, a11yLabel, nodeId) {
+  const g = createSvgEl(doc, "g");
+  if (nodeId) {
+    g.dataset.smartartNodeId = nodeId;
+    g.style.pointerEvents = "auto";
+    g.style.cursor = "text";
+  }
+  if (a11yLabel) {
+    g.setAttribute("role", "img");
+    g.setAttribute("aria-label", a11yLabel);
+    const title = createSvgEl(doc, "title");
+    title.textContent = a11yLabel;
+    g.appendChild(title);
+  }
+  if (shadowFilter) {
+    g.style.filter = shadowFilter;
+  }
+  const paint = {
+    fill: node.fill,
+    stroke: node.stroke,
+    "stroke-width": node.strokeWidth,
+    opacity: node.opacity
+  };
+  if (node.kind === "circle") {
+    g.appendChild(createSvgEl(doc, "circle", { cx: node.cx, cy: node.cy, r: node.r, ...paint }));
+  } else if (node.kind === "polygon") {
+    g.appendChild(createSvgEl(doc, "polygon", { points: node.points, ...paint }));
+  } else {
+    g.appendChild(
+      createSvgEl(doc, "rect", {
+        x: node.x,
+        y: node.y,
+        width: node.width,
+        height: node.height,
+        rx: node.rx,
+        ...paint
+      })
+    );
+  }
+  const label = smartArtNodeLabel(node);
+  if (label.visible) {
+    appendSvgTextLines(doc, g, {
+      lines: label.lines,
+      x: label.x,
+      fill: label.fill,
+      fontSize: label.fontSize,
+      textAnchor: label.textAnchor,
+      dominantBaseline: label.dominantBaseline,
+      fontWeight: label.fontWeight,
+      fontStyle: label.fontStyle
+    });
+  }
+  return g;
+}
+
+// src/pptx/dom/elements/smartart.ts
+var renderSmartArtElement = (element, zIndex, context) => {
+  if (element.type !== "smartArt") {
+    return null;
+  }
+  if (context.smartArt3D) {
+    return renderSmartArt3DElement(element, zIndex, context);
+  }
+  return renderSmartArtSvg(element, zIndex, context);
+};
+var renderSmartArtSvg = (element, zIndex, context) => {
+  if (element.type !== "smartArt") {
+    return null;
+  }
+  const doc = context.document;
+  const data = element.smartArtData;
+  const wrapper = createEl(
+    doc,
+    "div",
+    "pptxv-element pptxv-smartart",
+    getContainerStyle(element, zIndex)
+  );
+  wrapper.dataset.elementId = element.id;
+  wrapper.dataset.testid = `smartart-${data?.layout ?? "diagram"}`;
+  const chrome = createEl(doc, "div", "pptxv-smartart-chrome", buildChromeStyle(data?.chrome));
+  chrome.style.position = "relative";
+  wrapper.appendChild(chrome);
+  if (data) {
+    const a11y = buildSmartArtA11y(data);
+    chrome.setAttribute("role", "img");
+    chrome.setAttribute("aria-label", a11y.label);
+  }
+  const nodes = data?.nodes ?? [];
+  const drawingShapes = data?.drawingShapes ?? [];
+  const animationState = context.presentationStates?.get(element.id);
+  const { nodes: revealedNodesFull } = resolveRevealedSmartArtNodes(
+    nodes,
+    animationState,
+    data?.presLayoutVars
+  );
+  if (data && drawingShapes.length > 0) {
+    const revealedShapes = resolveRevealedDrawingShapes(drawingShapes, nodes, animationState);
+    chrome.appendChild(
+      buildDrawingShapesSvg(doc, element.id, data, buildSmartArtA11y(data).nodes, revealedShapes)
+    );
+    enableSmartArtEditing(chrome, element, context);
+    return wrapper;
+  }
+  if (data && nodes.length > 0) {
+    const revealedNodes = revealedNodesFull;
+    const layout = computeSmartArtElementLayout(
+      data,
+      revealedNodes,
+      { width: element.width, height: element.height },
+      resolvePalette(data),
+      data.style ?? "flat",
+      element.id
+    );
+    chrome.appendChild(
+      buildSmartArtFallbackSvg(
+        doc,
+        layout,
+        buildSmartArtA11y(data).nodes,
+        flattenNodes(revealedNodes).map((node) => node.id)
+      )
+    );
+    enableSmartArtEditing(chrome, element, context);
+    return wrapper;
+  }
+  const placeholder = createEl(doc, "div", "pptxv-smartart-placeholder", {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "11px",
+    color: "rgba(255,255,255,0.8)",
+    pointerEvents: "none"
+  });
+  placeholder.textContent = context.t("pptx.smartArt.placeholder");
+  chrome.appendChild(placeholder);
+  return wrapper;
+};
+function buildDrawingShapesSvg(doc, elementId, data, a11yNodes, revealedShapes) {
+  const allShapes = data.drawingShapes ?? [];
+  const style = data.style ?? "flat";
+  const viewBox = computeDrawingViewBox(allShapes);
+  const rendered = projectDrawingShapes(
+    elementId,
+    revealedShapes,
+    viewBox,
+    resolvePalette(data),
+    style
+  );
+  const shadow = styleShadowFilter(style);
+  const labelsById = new Map(a11yNodes.map((node) => [node.id, node.label]));
+  const nodeIds = resolveRevealedDrawingShapeNodeIds(allShapes, revealedShapes, data.nodes);
+  const svg = createSvgEl(doc, "svg", {
+    viewBox: `0 0 ${viewBox.width} ${viewBox.height}`,
+    preserveAspectRatio: "xMidYMid meet"
+  });
+  svg.setAttribute("class", "pptxv-smartart-svg");
+  svg.setAttribute("style", SMARTART_SVG_STYLE);
+  for (const [index, shape] of rendered.entries()) {
+    const g = createSvgEl(doc, "g");
+    const nodeId = nodeIds[index];
+    if (nodeId) {
+      g.dataset.smartartNodeId = nodeId;
+      g.style.pointerEvents = "auto";
+      g.style.cursor = "text";
+    }
+    const label = nodeId ? labelsById.get(nodeId) : void 0;
+    if (label) {
+      g.setAttribute("role", "img");
+      g.setAttribute("aria-label", label);
+      const title = createSvgEl(doc, "title");
+      title.textContent = label;
+      g.appendChild(title);
+    }
+    if (shadow) {
+      g.style.filter = shadow;
+    }
+    if (shape.gradient) {
+      g.appendChild(buildSvgGradientDefs(doc, shape.gradient));
+    }
+    if (shape.kind === "image") {
+      const image = createSvgEl(doc, "image", {
+        x: shape.x,
+        y: shape.y,
+        width: shape.width,
+        height: shape.height,
+        preserveAspectRatio: "xMidYMid meet",
+        transform: shape.transform
+      });
+      image.setAttribute("href", shape.imageUrl ?? "");
+      g.appendChild(image);
+    } else if (shape.kind === "ellipse") {
+      g.appendChild(
+        createSvgEl(doc, "ellipse", {
+          cx: shape.cx,
+          cy: shape.cy,
+          rx: shape.width / 2,
+          ry: shape.height / 2,
+          fill: shape.fill,
+          "fill-opacity": shape.fillOpacity,
+          stroke: shape.stroke,
+          "stroke-width": shape.strokeWidth,
+          transform: shape.transform
+        })
+      );
+    } else if (shape.kind === "path") {
+      g.appendChild(
+        createSvgEl(doc, "path", {
+          d: shape.pathData,
+          fill: shape.fill,
+          "fill-opacity": shape.fillOpacity,
+          stroke: shape.stroke,
+          "stroke-width": shape.strokeWidth,
+          transform: shape.pathTransform
+        })
+      );
+    } else {
+      g.appendChild(
+        createSvgEl(doc, "rect", {
+          x: shape.x,
+          y: shape.y,
+          width: shape.width,
+          height: shape.height,
+          rx: shape.rx,
+          fill: shape.fill,
+          "fill-opacity": shape.fillOpacity,
+          stroke: shape.stroke,
+          "stroke-width": shape.strokeWidth,
+          transform: shape.transform
+        })
+      );
+    }
+    if (shape.textLines.length > 0) {
+      appendSvgTextLines(doc, g, {
+        lines: shape.textLines,
+        x: shape.textX,
+        fill: shape.fontColor,
+        fontSize: shape.fontSize,
+        fontFamily: shape.fontFamily,
+        fontWeight: shape.fontWeight,
+        fontStyle: shape.fontStyle
+      });
+    }
+    svg.appendChild(g);
+  }
+  return svg;
+}
+
+// src/pptx/dom/registry.ts
+function createElementRendererRegistry() {
+  const renderers = /* @__PURE__ */ new Map();
+  let fallback = () => null;
+  return {
+    register(type, renderer) {
+      renderers.set(type, renderer);
+    },
+    unregister(type) {
+      renderers.delete(type);
+    },
+    get(type) {
+      return renderers.get(type);
+    },
+    has(type) {
+      return renderers.has(type);
+    },
+    setFallback(renderer) {
+      fallback = renderer;
+    },
+    resolve(type) {
+      return renderers.get(type) ?? fallback;
+    },
+    registeredTypes() {
+      return Array.from(renderers.keys()).sort();
+    }
+  };
+}
+
+// src/pptx/dom/smartart-insert-preview.ts
+function buildSmartArtInsertPreview(doc, t, layout, size) {
+  const scale = Math.min(
+    size.width / SMARTART_PREVIEW_ELEMENT_WIDTH,
+    size.height / SMARTART_PREVIEW_ELEMENT_HEIGHT
+  );
+  const box = createEl(doc, "div", "pptxv-smartart-option-preview", {
+    width: `${Math.round(SMARTART_PREVIEW_ELEMENT_WIDTH * scale)}px`,
+    height: `${Math.round(SMARTART_PREVIEW_ELEMENT_HEIGHT * scale)}px`,
+    overflow: "hidden",
+    pointerEvents: "none",
+    position: "relative"
+  });
+  box.setAttribute("aria-hidden", "true");
+  const stage = createEl(doc, "div", void 0, {
+    width: `${SMARTART_PREVIEW_ELEMENT_WIDTH}px`,
+    height: `${SMARTART_PREVIEW_ELEMENT_HEIGHT}px`,
+    transform: `scale(${scale})`,
+    transformOrigin: "top left",
+    position: "relative"
+  });
+  box.appendChild(stage);
+  const element = buildSmartArtPreviewElement(layout);
+  const slide = {
+    id: "smartart-preview",
+    rId: "smartart-preview",
+    slideNumber: 1,
+    elements: [element]
+  };
+  const context = {
+    document: doc,
+    slide,
+    canvasSize: { width: SMARTART_PREVIEW_ELEMENT_WIDTH, height: SMARTART_PREVIEW_ELEMENT_HEIGHT },
+    scale: 1,
+    mediaDataUrls: /* @__PURE__ */ new Map(),
+    t,
+    smartArt3D: false,
+    surfaceChart3D: false,
+    barChart3D: false,
+    lineChart3D: false,
+    areaChart3D: false,
+    pieChart3D: false,
+    presenting: false,
+    registry: createElementRendererRegistry(),
+    renderElement: () => null
+  };
+  const rendered = renderSmartArtSvg(element, 0, context);
+  if (rendered) stage.appendChild(rendered);
+  return box;
+}
+
+export { SMARTART_SVG_STYLE, appendSvgTextLines, applyStyleMap, applyThreeViewTextStyle, buildSmartArtFallbackSvg, buildSmartArtInsertPreview, buildSvgGradientDefs, collectThreeViews, composeTransforms, createEl, createElementRendererRegistry, createSvgEl, enableSmartArtEditing, isChart3DEditable, mountThreeViewInto, renderSmartArt3DElement, renderSmartArtElement, renderSmartArtSvg, rendering3DFlagsOf, selectedChartPartOf, setSvgAttrs, takeReusableThreeView, wireChartThreeViewEvents, withReusableThreeViews };