ooxml-ui 0.30.1 → 1.0.0

package/dist/pptx/chunk-ADOC5JLI.mjs

@@ -0,0 +1,880 @@
+import { overflowCanvasCss, hasThreeViewOverflow, MAX_VIEW_PIXELS, NO_THREE_VIEW_OVERFLOW, getThreeRendererHost, overflowPixelSize, threeViewOverflowChanged } from './chunk-2V5ATMMB.mjs';
+import { normalizeColorsForCapture } from './chunk-7JBQPQ6G.mjs';
+
+// src/pptx/render/export-clone.ts
+function isExportIgnoredElement(element) {
+  return element.getAttribute("data-export-ignore") === "true";
+}
+function prepareExportClone(root) {
+  for (const overlay of root.querySelectorAll('[data-export-ignore="true"]')) {
+    overlay.remove();
+  }
+  for (const element of [root, ...root.querySelectorAll("*")]) {
+    for (const property of ["outline", "outline-offset", "box-shadow"]) {
+      const original = element.getAttribute(`data-export-original-${property}`);
+      if (original !== null) {
+        element.style.setProperty(property, original);
+      }
+    }
+  }
+}
+
+// src/pptx/render/chart-3d-three-loader.ts
+async function loadChart3DThree() {
+  try {
+    return await import('three');
+  } catch {
+    return null;
+  }
+}
+
+// src/pptx/three-view/scene-registry.ts
+var loaders = {
+  chart: async () => (await import('./chart-3d-view-scene-2KRQ5667.mjs')).mountChart3DView,
+  smartart: async () => (await import('./view-scene-GHBN7QMR.mjs')).mountSmartArt3DView
+};
+async function loadThreeViewScene(kind) {
+  return loaders[kind]();
+}
+
+// src/pptx/three-view/view-controller.ts
+var ThreeViewController = class {
+  opts;
+  host = null;
+  mounted = null;
+  token = 0;
+  size;
+  overflow = NO_THREE_VIEW_OVERFLOW;
+  interactive = false;
+  selectedPart = null;
+  textStyle;
+  constructor(opts) {
+    this.opts = opts;
+    this.size = opts.measure();
+  }
+  /** Mount `spec` (or clear the view for `null`). */
+  async setSpec(spec) {
+    const token = ++this.token;
+    if (!spec) {
+      this.unmount();
+      this.opts.onState("idle");
+      return;
+    }
+    if (!this.mounted) {
+      this.opts.onState("loading");
+    }
+    try {
+      const three = await loadChart3DThree();
+      if (token !== this.token) {
+        return;
+      }
+      const host = three ? getThreeRendererHost(three) : null;
+      if (!three || !host || !host.available) {
+        this.unmount();
+        this.opts.onState("unavailable");
+        return;
+      }
+      this.host = host;
+      const factory = await loadThreeViewScene(spec.kind);
+      if (token !== this.token) {
+        return;
+      }
+      const doc = this.opts.overlay.ownerDocument;
+      const overlay = doc.createElement("div");
+      overlay.style.cssText = "position:absolute;inset:0;";
+      let view = null;
+      const scene = await factory(
+        spec.spec,
+        {
+          three,
+          size: this.size,
+          eventTarget: this.opts.eventTarget,
+          overlay,
+          document: doc,
+          interactive: this.interactive,
+          requestRender: () => {
+            if (view) {
+              host.requestRender(view);
+            }
+          },
+          emit: (event) => {
+            if (token === this.token) {
+              this.opts.onSceneEvent(event);
+            }
+          }
+        }
+      );
+      if (token !== this.token) {
+        scene.dispose();
+        return;
+      }
+      view = {
+        canvas: this.opts.canvas,
+        pixelSize: () => overflowPixelSize(this.size, this.overflow),
+        isVisible: this.opts.isVisible,
+        draw: (renderer) => scene.render(renderer),
+        isAnimating: () => scene.isAnimating?.() ?? false
+      };
+      this.unmount();
+      this.opts.overlay.appendChild(overlay);
+      this.mounted = { scene, view, overlay };
+      this.syncOverflow();
+      scene.setSelectedPart?.(this.selectedPart);
+      if (this.textStyle) {
+        scene.setTextStyle?.(this.textStyle);
+      }
+      host.register(view);
+      this.opts.onState("ready");
+    } catch (error) {
+      if (token !== this.token) {
+        return;
+      }
+      console.warn("[pptx-three-view] scene failed to mount; showing the 2D fallback", error);
+      this.unmount();
+      this.opts.onState("error");
+    }
+  }
+  /** Re-measure; resizes the scene and redraws when anything changed. */
+  remeasure(force = false) {
+    const next = this.opts.measure();
+    const changed = force || next.width !== this.size.width || next.height !== this.size.height || next.pixelWidth !== this.size.pixelWidth || next.pixelHeight !== this.size.pixelHeight;
+    if (!changed) {
+      return;
+    }
+    this.size = next;
+    this.mounted?.scene.resize(next);
+    this.syncOverflow();
+    this.requestRender();
+  }
+  /** Read the mounted scene's overflow and report a change to the element. */
+  syncOverflow() {
+    const next = this.mounted?.scene.overflow?.() ?? NO_THREE_VIEW_OVERFLOW;
+    if (!threeViewOverflowChanged(next, this.overflow)) {
+      return;
+    }
+    this.overflow = next;
+    this.opts.onOverflow?.(next);
+  }
+  requestRender() {
+    if (this.mounted && this.host) {
+      this.host.requestRender(this.mounted.view);
+    }
+  }
+  setInteractive(on) {
+    this.interactive = on;
+    this.mounted?.scene.setInteractive?.(on);
+    this.requestRender();
+  }
+  setSelectedPart(part) {
+    this.selectedPart = part;
+    this.mounted?.scene.setSelectedPart?.(part);
+    this.requestRender();
+  }
+  setTextStyle(style) {
+    this.textStyle = style;
+    this.mounted?.scene.setTextStyle?.(style);
+    this.requestRender();
+  }
+  /**
+   * Draw this view synchronously (export / snapshot), even when it is off
+   * screen, then any other pending views.
+   */
+  flush() {
+    if (this.mounted) {
+      this.remeasure();
+      this.host?.drawNow(this.mounted.view);
+    }
+    this.host?.flushNow();
+  }
+  dispose() {
+    this.token++;
+    this.unmount();
+  }
+  unmount() {
+    const current = this.mounted;
+    if (!current) {
+      return;
+    }
+    this.mounted = null;
+    this.syncOverflow();
+    this.host?.unregister(current.view);
+    current.overlay.remove();
+    try {
+      current.scene.dispose();
+    } catch (error) {
+      console.warn("[pptx-three-view] scene dispose failed", error);
+    }
+  }
+};
+
+// src/pptx/three-view/view-size.ts
+var MAX_DEVICE_PIXEL_RATIO = 2;
+function computeThreeViewSize(layoutWidth, layoutHeight, screenWidth, screenHeight, devicePixelRatio) {
+  const width = Math.max(1, layoutWidth);
+  const height = Math.max(1, layoutHeight);
+  const dpr = Math.min(MAX_DEVICE_PIXEL_RATIO, Math.max(1, devicePixelRatio || 1));
+  const onScreenW = screenWidth > 0 ? screenWidth : width;
+  const onScreenH = screenHeight > 0 ? screenHeight : height;
+  const clamp = (px) => Math.max(1, Math.min(MAX_VIEW_PIXELS, Math.round(px)));
+  return {
+    width,
+    height,
+    pixelWidth: clamp(onScreenW * dpr),
+    pixelHeight: clamp(onScreenH * dpr)
+  };
+}
+var IDENTITY = { a: 1, b: 0, c: 0, d: 1 };
+function compose(outer, inner) {
+  return {
+    a: outer.a * inner.a + outer.c * inner.b,
+    b: outer.b * inner.a + outer.d * inner.b,
+    c: outer.a * inner.c + outer.c * inner.d,
+    d: outer.b * inner.c + outer.d * inner.d
+  };
+}
+function parseComputedTransform(value) {
+  const match = /^(matrix3d|matrix)\(([^)]*)\)$/u.exec((value ?? "").trim());
+  if (!match) {
+    return null;
+  }
+  const n = (match[2] ?? "").split(",").map((part) => Number.parseFloat(part));
+  const at = match[1] === "matrix3d" ? [0, 1, 4, 5] : [0, 1, 2, 3];
+  const [a, b, c, d] = at.map((i) => n[i]);
+  return [a, b, c, d].every((v) => v !== void 0 && Number.isFinite(v)) ? { a, b, c, d } : null;
+}
+function matrixScale(m) {
+  return { x: Math.hypot(m.a, m.b), y: Math.hypot(m.c, m.d) };
+}
+function parentOf(node) {
+  if (node.parentElement) {
+    return node.parentElement;
+  }
+  const root = node.getRootNode?.();
+  return root && "host" in root ? root.host ?? null : null;
+}
+function measureTransformScale(element) {
+  const win = element.ownerDocument?.defaultView;
+  if (!win) {
+    return { x: 1, y: 1 };
+  }
+  let total = IDENTITY;
+  for (let node = element; node; node = parentOf(node)) {
+    const style = win.getComputedStyle(node);
+    if (style.scale && style.scale !== "none") {
+      const [sx = "1", sy = sx] = style.scale.split(/\s+/u);
+      const x = Number.parseFloat(sx);
+      const y = Number.parseFloat(sy);
+      if (Number.isFinite(x) && Number.isFinite(y)) {
+        total = compose({ a: x, b: 0, c: 0, d: y }, total);
+      }
+    }
+    const transform = parseComputedTransform(style.transform);
+    if (transform) {
+      total = compose(transform, total);
+    }
+  }
+  return matrixScale(total);
+}
+function measureThreeViewSize(element) {
+  const win = element.ownerDocument?.defaultView;
+  const layoutWidth = element.clientWidth;
+  const layoutHeight = element.clientHeight;
+  const scale = measureTransformScale(element);
+  return computeThreeViewSize(
+    layoutWidth,
+    layoutHeight,
+    layoutWidth * scale.x,
+    layoutHeight * scale.y,
+    win?.devicePixelRatio ?? 1
+  );
+}
+
+// src/pptx/three-view/element.ts
+var THREE_VIEW_TAG = "pptx-three-view";
+var THREE_VIEW_MARKER_ATTR = "data-pptx-three-view";
+var ZOOM_POLL_MS = 400;
+var SHADOW_CSS = `
+:host { display: block; position: relative; width: 100%; height: 100%; contain: layout paint; }
+.fallback { position: absolute; inset: 0; }
+.stage { position: absolute; inset: 0; visibility: hidden; }
+canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
+.hit { position: absolute; inset: 0; }
+:host([data-overflow]) { contain: layout; }
+.overlay { position: absolute; inset: 0; pointer-events: none; }
+:host([data-state='ready']) .fallback { display: none; }
+:host([data-state='ready']) .stage { visibility: visible; }
+`;
+function createElementClass() {
+  class PptxThreeView extends HTMLElement {
+    static observedAttributes = ["interactive"];
+    #spec = null;
+    #state = "idle";
+    #selectedPart = null;
+    #textStyle;
+    #controller = null;
+    #canvas = null;
+    #overflow = NO_THREE_VIEW_OVERFLOW;
+    #visible = true;
+    #resize = null;
+    #intersect = null;
+    #poll = null;
+    #teardownPending = false;
+    get spec() {
+      return this.#spec;
+    }
+    set spec(value) {
+      if (value === this.#spec) {
+        return;
+      }
+      this.#spec = value;
+      void this.#controller?.setSpec(value);
+    }
+    get interactive() {
+      return this.hasAttribute("interactive");
+    }
+    set interactive(on) {
+      this.toggleAttribute("interactive", Boolean(on));
+    }
+    get selectedPart() {
+      return this.#selectedPart;
+    }
+    set selectedPart(part) {
+      this.#selectedPart = part ?? null;
+      this.#controller?.setSelectedPart(this.#selectedPart);
+    }
+    get textStyle() {
+      return this.#textStyle;
+    }
+    set textStyle(style) {
+      this.#textStyle = style;
+      this.#controller?.setTextStyle(style);
+    }
+    get state() {
+      return this.#state;
+    }
+    get canvas() {
+      return this.#canvas;
+    }
+    get overflowInsets() {
+      return this.#overflow;
+    }
+    flush() {
+      this.#controller?.flush();
+    }
+    attributeChangedCallback(name) {
+      if (name === "interactive") {
+        this.#controller?.setInteractive(this.interactive);
+      }
+    }
+    connectedCallback() {
+      this.setAttribute(THREE_VIEW_MARKER_ATTR, "");
+      if (this.#controller) {
+        this.#teardownPending = false;
+        return;
+      }
+      const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+      if (!this.#canvas) {
+        root.innerHTML = `<style>${SHADOW_CSS}</style><div class="fallback" part="fallback"><slot></slot></div><div class="stage" part="stage"><canvas></canvas><div class="hit" part="hit"></div><div class="overlay" part="overlay"></div></div>`;
+        this.#canvas = root.querySelector("canvas");
+      }
+      const canvas = this.#canvas;
+      const overlay = root.querySelector(".overlay");
+      const hit = root.querySelector(".hit");
+      this.#controller = new ThreeViewController({
+        canvas,
+        overlay,
+        // Pointer input lands on the element box only, never on the part
+        // of an overflowing canvas that reaches over its neighbours.
+        eventTarget: hit,
+        measure: () => measureThreeViewSize(this),
+        isVisible: () => this.isConnected && this.#visible,
+        onState: (state) => this.#setState(state),
+        onSceneEvent: (event) => this.#dispatchSceneEvent(event),
+        onOverflow: (overflow) => this.#setOverflow(overflow)
+      });
+      this.#controller.setInteractive(this.interactive);
+      this.#controller.setSelectedPart(this.#selectedPart);
+      this.#controller.setTextStyle(this.#textStyle);
+      this.#observe();
+      void this.#controller.setSpec(this.#spec);
+    }
+    disconnectedCallback() {
+      this.#teardownPending = true;
+      queueMicrotask(() => {
+        if (this.#teardownPending && !this.isConnected) {
+          this.#teardown();
+        }
+      });
+    }
+    #teardown() {
+      this.#teardownPending = false;
+      this.#resize?.disconnect();
+      this.#intersect?.disconnect();
+      if (this.#poll !== null) {
+        clearInterval(this.#poll);
+      }
+      this.#resize = null;
+      this.#intersect = null;
+      this.#poll = null;
+      this.#controller?.dispose();
+      this.#controller = null;
+    }
+    #observe() {
+      const win = this.ownerDocument.defaultView;
+      if (win && "ResizeObserver" in win) {
+        this.#resize = new win.ResizeObserver(() => this.#controller?.remeasure());
+        this.#resize.observe(this);
+      }
+      if (win && "IntersectionObserver" in win) {
+        this.#intersect = new win.IntersectionObserver((entries) => {
+          const entry = entries[entries.length - 1];
+          this.#visible = entry ? entry.isIntersecting : true;
+          if (this.#visible) {
+            this.#controller?.remeasure(true);
+          }
+        });
+        this.#intersect.observe(this);
+      }
+      this.#poll = setInterval(() => {
+        if (this.#visible && this.#state === "ready") {
+          this.#controller?.remeasure();
+        }
+      }, ZOOM_POLL_MS);
+    }
+    #setOverflow(overflow) {
+      this.#overflow = overflow;
+      if (this.#canvas) {
+        this.#canvas.style.cssText = overflowCanvasCss(overflow);
+      }
+      this.toggleAttribute("data-overflow", hasThreeViewOverflow(overflow));
+    }
+    #setState(state) {
+      this.#state = state;
+      this.setAttribute("data-state", state);
+      this.dispatchEvent(
+        new CustomEvent("pptx-three-state", { detail: { state }, bubbles: true, composed: true })
+      );
+    }
+    #dispatchSceneEvent(event) {
+      if (event.type === "select") {
+        this.dispatchEvent(
+          new CustomEvent("pptx-three-select", {
+            detail: { part: event.part },
+            bubbles: true,
+            composed: true
+          })
+        );
+        return;
+      }
+      this.dispatchEvent(
+        new CustomEvent("pptx-three-drag", { detail: event.detail, bubbles: true, composed: true })
+      );
+    }
+  }
+  return PptxThreeView;
+}
+function defineThreeViewElement(registry) {
+  if (typeof HTMLElement === "undefined") {
+    return;
+  }
+  const target = registry ?? (typeof customElements === "undefined" ? void 0 : customElements);
+  if (!target || target.get(THREE_VIEW_TAG)) {
+    return;
+  }
+  target.define(THREE_VIEW_TAG, createElementClass());
+}
+
+// src/pptx/three-view/export-snapshot.ts
+var THREE_VIEW_SETTLE_TIMEOUT_MS = 4e3;
+var THREE_VIEW_SNAPSHOT_ATTR = "data-three-view-snapshot";
+var VIEW_SELECTOR = `${THREE_VIEW_TAG}, [${THREE_VIEW_MARKER_ATTR}]`;
+function viewsUnder(root) {
+  const views = [...root.querySelectorAll(VIEW_SELECTOR)];
+  const self = root;
+  if (typeof self.matches === "function" && self.matches(VIEW_SELECTOR)) {
+    views.unshift(root);
+  }
+  return views;
+}
+function isSettled(view) {
+  const state = view.state ?? view.getAttribute("data-state");
+  if (state === "loading") {
+    return false;
+  }
+  return !(state === "idle" && view.spec);
+}
+async function settleThreeViews(root, timeoutMs = THREE_VIEW_SETTLE_TIMEOUT_MS) {
+  const pending = viewsUnder(root).filter((view) => !isSettled(view));
+  if (pending.length > 0) {
+    await new Promise((resolve) => {
+      const timer = setTimeout(done, timeoutMs);
+      const onState = () => {
+        if (pending.every(isSettled)) {
+          done();
+        }
+      };
+      function done() {
+        clearTimeout(timer);
+        for (const view of pending) {
+          view.removeEventListener("pptx-three-state", onState);
+        }
+        resolve();
+      }
+      for (const view of pending) {
+        view.addEventListener("pptx-three-state", onState);
+      }
+      onState();
+    });
+  }
+  for (const view of viewsUnder(root)) {
+    if (view.state === "ready") {
+      view.flush?.();
+    }
+  }
+}
+function snapshotDataUrl(view) {
+  if (view.state !== "ready") {
+    return null;
+  }
+  view.flush?.();
+  const canvas = view.canvas;
+  if (!canvas || canvas.width === 0 || canvas.height === 0) {
+    return null;
+  }
+  try {
+    return canvas.toDataURL("image/png");
+  } catch {
+    return null;
+  }
+}
+var FILL_CSS = "position:absolute;left:0;top:0;width:100%;height:100%;display:block;";
+function overlayCopy(original, doc) {
+  const overlay = original.shadowRoot?.querySelector(".overlay");
+  if (!overlay || overlay.childNodes.length === 0) {
+    return null;
+  }
+  const copy = doc.createElement("div");
+  copy.setAttribute(THREE_VIEW_SNAPSHOT_ATTR, "overlay");
+  copy.style.cssText = `${FILL_CSS}pointer-events:none;`;
+  for (const child of overlay.childNodes) {
+    copy.appendChild(doc.importNode(child, true));
+  }
+  return copy;
+}
+function snapshotThreeViewsIntoClone(originalRoot, cloneRoot) {
+  const originals = viewsUnder(originalRoot);
+  const clones = viewsUnder(cloneRoot);
+  const count = Math.min(originals.length, clones.length);
+  for (let i = 0; i < count; i++) {
+    const original = originals[i];
+    const clone = clones[i];
+    const url = snapshotDataUrl(original);
+    if (!url) {
+      continue;
+    }
+    const doc = clone.ownerDocument;
+    const img = doc.createElement("img");
+    img.setAttribute(THREE_VIEW_SNAPSHOT_ATTR, "true");
+    img.setAttribute("src", url);
+    img.setAttribute("alt", "");
+    const insets = original.overflowInsets;
+    img.style.cssText = `${FILL_CSS}${insets ? overflowCanvasCss(insets) : ""}`;
+    const overlay = overlayCopy(original, doc);
+    const layers = overlay ? [img, overlay] : [img];
+    clone.replaceChildren(...layers);
+    clone.shadowRoot?.replaceChildren(...layers.map((layer) => layer.cloneNode(true)));
+    const width = original.clientWidth;
+    const height = original.clientHeight;
+    clone.style.display = "block";
+    clone.style.position = "relative";
+    if (hasThreeViewOverflow(insets)) {
+      clone.style.overflow = "visible";
+    }
+    if (width > 0 && height > 0) {
+      clone.style.width = `${width}px`;
+      clone.style.height = `${height}px`;
+    }
+  }
+}
+
+// src/pptx/export/css-preprocessing-flatten.ts
+function parseBlurValue(filter) {
+  const match = filter.match(/blur\(\s*([\d.]+)\s*px\s*\)/i);
+  return match ? parseFloat(match[1]) : 0;
+}
+function flattenBackdropFilter(root) {
+  const elements = root.querySelectorAll("*");
+  const view = root.ownerDocument?.defaultView ?? window;
+  const flatten = (el) => {
+    const htmlEl = el;
+    if (!htmlEl.style) {
+      return;
+    }
+    const computed = view.getComputedStyle(htmlEl);
+    const backdropFilter = computed.getPropertyValue("backdrop-filter") || computed.getPropertyValue("-webkit-backdrop-filter");
+    if (!backdropFilter || backdropFilter === "none") {
+      return;
+    }
+    const blurPx = parseBlurValue(backdropFilter);
+    htmlEl.style.setProperty("backdrop-filter", "none");
+    htmlEl.style.setProperty("-webkit-backdrop-filter", "none");
+    if (blurPx > 0) {
+      const currentBg = computed.getPropertyValue("background-color");
+      if (!currentBg || currentBg === "transparent" || currentBg === "rgba(0, 0, 0, 0)") {
+        const opacity = Math.min(0.85, 0.4 + blurPx * 0.02);
+        htmlEl.style.setProperty("background-color", `rgba(255, 255, 255, ${opacity.toFixed(2)})`);
+      }
+    }
+  };
+  flatten(root);
+  elements.forEach(flatten);
+}
+var BLEND_MODE_OPACITY_MAP = {
+  multiply: 0.85,
+  screen: 0.9,
+  overlay: 0.8,
+  darken: 0.9,
+  lighten: 0.9,
+  "color-dodge": 0.85,
+  "color-burn": 0.85,
+  "hard-light": 0.8,
+  "soft-light": 0.9,
+  difference: 0.7,
+  exclusion: 0.75,
+  hue: 0.85,
+  saturation: 0.85,
+  color: 0.85,
+  luminosity: 0.85
+};
+function flattenMixBlendMode(root) {
+  const elements = root.querySelectorAll("*");
+  const view = root.ownerDocument?.defaultView ?? window;
+  const flatten = (el) => {
+    const htmlEl = el;
+    if (!htmlEl.style) {
+      return;
+    }
+    const computed = view.getComputedStyle(htmlEl);
+    const blendMode = computed.getPropertyValue("mix-blend-mode");
+    if (!blendMode || blendMode === "normal") {
+      return;
+    }
+    htmlEl.style.setProperty("mix-blend-mode", "normal");
+    const currentOpacity = parseFloat(computed.getPropertyValue("opacity") || "1");
+    const blendOpacity = BLEND_MODE_OPACITY_MAP[blendMode] ?? 1;
+    const combinedOpacity = currentOpacity * blendOpacity;
+    if (combinedOpacity < 1) {
+      htmlEl.style.setProperty("opacity", combinedOpacity.toFixed(2));
+    }
+  };
+  flatten(root);
+  elements.forEach(flatten);
+}
+var TRANSFORM_3D_RE = /(?:translate3d|rotate3d|scale3d|matrix3d|perspective|translateZ|rotateX|rotateY|scaleZ)\s*\(/gi;
+function has3dTransform(transformValue) {
+  if (!transformValue || transformValue === "none") {
+    return false;
+  }
+  const re = /(?:translate3d|rotate3d|scale3d|matrix3d|perspective|translateZ|rotateX|rotateY|scaleZ)\s*\(/i;
+  return re.test(transformValue);
+}
+function flatten3dTransform(transformValue) {
+  if (!transformValue || transformValue === "none") {
+    return transformValue;
+  }
+  TRANSFORM_3D_RE.lastIndex = 0;
+  if (!TRANSFORM_3D_RE.test(transformValue)) {
+    return transformValue;
+  }
+  TRANSFORM_3D_RE.lastIndex = 0;
+  let result = transformValue;
+  result = result.replace(
+    /translate3d\(([^()]*(?:\([^()]*\)[^()]*)*)\)/gi,
+    (match, args) => {
+      const parts = args.split(",");
+      if (parts.length < 3) {
+        return match;
+      }
+      return `translate(${parts[0].trim()}, ${parts[1].trim()})`;
+    }
+  );
+  result = result.replace(/translateZ\([^)]*\)/gi, "");
+  result = result.replace(/scale3d\(([^()]*(?:\([^()]*\)[^()]*)*)\)/gi, (match, args) => {
+    const parts = args.split(",");
+    if (parts.length < 3) {
+      return match;
+    }
+    return `scale(${parts[0].trim()}, ${parts[1].trim()})`;
+  });
+  result = result.replace(/scaleZ\([^)]*\)/gi, "");
+  result = result.replace(/rotate[XY]\([^)]*\)/gi, "");
+  result = result.replace(/rotate3d\([^)]*\)/gi, "");
+  result = result.replace(/perspective\([^)]*\)/gi, "");
+  result = result.replace(/matrix3d\(([^)]*)\)/gi, (_match, args) => {
+    const vals = args.split(",").map((v) => parseFloat(v.trim()));
+    if (vals.length === 16 && vals.every((v) => !isNaN(v))) {
+      return `matrix(${vals[0]}, ${vals[1]}, ${vals[4]}, ${vals[5]}, ${vals[12]}, ${vals[13]})`;
+    }
+    return "";
+  });
+  result = result.replace(/\s{2,}/g, " ").trim();
+  if (!result) {
+    return "none";
+  }
+  if (result === "matrix(1, 0, 0, 1, 0, 0)") {
+    return "none";
+  }
+  return result;
+}
+function flatten3dTransforms(root) {
+  const elements = root.querySelectorAll("*");
+  const view = root.ownerDocument?.defaultView ?? window;
+  const flatten = (el) => {
+    const htmlEl = el;
+    if (!htmlEl.style) {
+      return;
+    }
+    const computed = view.getComputedStyle(htmlEl);
+    const transform = computed.getPropertyValue("transform");
+    if (!transform || transform === "none") {
+      return;
+    }
+    TRANSFORM_3D_RE.lastIndex = 0;
+    if (TRANSFORM_3D_RE.test(transform)) {
+      TRANSFORM_3D_RE.lastIndex = 0;
+      const flattened = flatten3dTransform(transform);
+      htmlEl.style.setProperty("transform", flattened);
+    }
+  };
+  flatten(root);
+  elements.forEach(flatten);
+}
+function removeUnsupportedFeatures(root) {
+  const elements = root.querySelectorAll("*");
+  const view = root.ownerDocument?.defaultView ?? window;
+  const clean = (el) => {
+    const htmlEl = el;
+    if (!htmlEl.style) {
+      return;
+    }
+    const computed = view.getComputedStyle(htmlEl);
+    const maskImage = computed.getPropertyValue("mask-image") || computed.getPropertyValue("-webkit-mask-image");
+    if (maskImage && maskImage !== "none") {
+      if (maskImage.includes("url(") && !maskImage.includes("data:")) {
+        htmlEl.style.setProperty("mask-image", "none");
+        htmlEl.style.setProperty("-webkit-mask-image", "none");
+      }
+    }
+    const textStroke = computed.getPropertyValue("-webkit-text-stroke");
+    if (textStroke && textStroke !== "0px" && textStroke !== "0px rgb(0, 0, 0)") {
+      const strokeMatch = textStroke.match(/([\d.]+)px\s+(.*)/);
+      if (strokeMatch) {
+        const width = parseFloat(strokeMatch[1]);
+        const colour = strokeMatch[2] || "black";
+        const offsets = [
+          [width, 0],
+          [-width, 0],
+          [0, width],
+          [0, -width]
+        ];
+        const shadows = offsets.map(([x, y]) => `${x}px ${y}px 0 ${colour}`).join(", ");
+        const existing = computed.getPropertyValue("text-shadow");
+        const combined = existing && existing !== "none" ? `${existing}, ${shadows}` : shadows;
+        htmlEl.style.setProperty("text-shadow", combined);
+        htmlEl.style.setProperty("-webkit-text-stroke", "0");
+      }
+    }
+  };
+  clean(root);
+  elements.forEach(clean);
+}
+
+// src/pptx/export/css-preprocessing.ts
+var VAR_DEPENDENT_PROPERTIES = [
+  "color",
+  "background-color",
+  "background",
+  "background-image",
+  "border-color",
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color",
+  "outline-color",
+  "box-shadow",
+  "text-shadow",
+  "opacity",
+  "font-size",
+  "line-height",
+  "letter-spacing",
+  "border-radius",
+  "padding",
+  "margin",
+  "gap",
+  "width",
+  "height",
+  "max-width",
+  "max-height",
+  "min-width",
+  "min-height",
+  "fill",
+  "stroke",
+  "stop-color"
+];
+function resolveCustomProperties(root) {
+  const elements = root.querySelectorAll("*");
+  const view = root.ownerDocument?.defaultView ?? window;
+  const resolve = (el) => {
+    const htmlEl = el;
+    if (!htmlEl.style) {
+      return;
+    }
+    const computed = view.getComputedStyle(htmlEl);
+    for (const prop of VAR_DEPENDENT_PROPERTIES) {
+      const inlineValue = htmlEl.style.getPropertyValue(prop);
+      if (inlineValue && inlineValue.includes("var(")) {
+        const computedValue = computed.getPropertyValue(prop);
+        if (computedValue) {
+          htmlEl.style.setProperty(prop, computedValue);
+        }
+      }
+    }
+  };
+  resolve(root);
+  elements.forEach(resolve);
+}
+function preprocessCssForCapture(root, options = {}) {
+  const {
+    resolveCustomProperties: doResolve = true,
+    flattenBackdropFilter: doFlattenBackdrop = true,
+    flattenMixBlendMode: doFlattenBlend = true,
+    flatten3dTransforms: doFlatten3d = true,
+    removeUnsupportedFeatures: doRemoveUnsupported = true
+  } = options;
+  if (doResolve) {
+    resolveCustomProperties(root);
+  }
+  if (doFlattenBackdrop) {
+    flattenBackdropFilter(root);
+  }
+  if (doFlattenBlend) {
+    flattenMixBlendMode(root);
+  }
+  if (doFlatten3d) {
+    flatten3dTransforms(root);
+  }
+  if (doRemoveUnsupported) {
+    removeUnsupportedFeatures(root);
+  }
+}
+
+// src/pptx/export/html2canvas-clone.ts
+async function prepareHtml2CanvasClone(original, doc, clonedEl) {
+  await settleThreeViews(original);
+  snapshotThreeViewsIntoClone(original, clonedEl);
+  prepareExportClone(clonedEl);
+  await normalizeColorsForCapture(doc, clonedEl);
+  preprocessCssForCapture(clonedEl);
+}
+
+export { MAX_DEVICE_PIXEL_RATIO, THREE_VIEW_MARKER_ATTR, THREE_VIEW_SETTLE_TIMEOUT_MS, THREE_VIEW_SNAPSHOT_ATTR, THREE_VIEW_TAG, computeThreeViewSize, defineThreeViewElement, flatten3dTransform, flatten3dTransforms, flattenBackdropFilter, flattenMixBlendMode, has3dTransform, isExportIgnoredElement, parseBlurValue, prepareExportClone, prepareHtml2CanvasClone, preprocessCssForCapture, removeUnsupportedFeatures, resolveCustomProperties, settleThreeViews, snapshotThreeViewsIntoClone };