pptx-react-viewer 2.16.0 → 2.16.2

package/dist/{chunk-P3Y3OMAD.js → chunk-4GX347MG.js}

@@ -101994,39 +101994,11 @@ function getImageFitStyle(el) {
   if (!isImageLikeElement(el)) {
     return uncropped;
   }
-  const frLeft = el.fillRectLeft ?? 0;
-  const frTop = el.fillRectTop ?? 0;
-  const frRight = el.fillRectRight ?? 0;
-  const frBottom = el.fillRectBottom ?? 0;
-  const hasFillRect = Math.abs(frLeft) + Math.abs(frTop) + Math.abs(frRight) + Math.abs(frBottom) > 1e-4;
-  const placementTransform = hasFillRect ? `translate(${round2(frLeft * 100)}%, ${round2(frTop * 100)}%) scale(${round6(
-    Math.max(0.01, 1 - frLeft - frRight)
-  )}, ${round6(Math.max(0.01, 1 - frTop - frBottom))})` : "";
-  const cropLeft = clampCropValue(el.cropLeft);
-  const cropTop = clampCropValue(el.cropTop);
-  const cropRight = clampCropValue(el.cropRight);
-  const cropBottom = clampCropValue(el.cropBottom);
-  const hasCrop = cropLeft + cropRight > 1e-4 || cropTop + cropBottom > 1e-4;
-  if (!hasCrop && !hasFillRect) {
+  const { placement, crop } = imageFitTransformParts(el);
+  if (!placement && !crop) {
     return uncropped;
   }
-  let cropTransform = "";
-  if (hasCrop) {
-    const horizontalScale = cropLeft + cropRight >= 0.99 ? 0.99 / (cropLeft + cropRight) : 1;
-    const verticalScale = cropTop + cropBottom >= 0.99 ? 0.99 / (cropTop + cropBottom) : 1;
-    const left = clampCropValue(cropLeft * horizontalScale);
-    const right = clampCropValue(cropRight * horizontalScale);
-    const top = clampCropValue(cropTop * verticalScale);
-    const bottom = clampCropValue(cropBottom * verticalScale);
-    const remainingWidth = Math.max(0.01, 1 - left - right);
-    const remainingHeight = Math.max(0.01, 1 - top - bottom);
-    const tx = Math.round(-left / remainingWidth * 1e4) / 100;
-    const ty = Math.round(-top / remainingHeight * 1e4) / 100;
-    const sx = Math.round(1 / remainingWidth * 1e6) / 1e6;
-    const sy = Math.round(1 / remainingHeight * 1e6) / 1e6;
-    cropTransform = `translate(${tx}%, ${ty}%) scale(${sx}, ${sy})`;
-  }
-  const transform = [placementTransform, cropTransform].filter(Boolean).join(" ");
+  const transform = [placement, crop].filter(Boolean).join(" ");
   return {
     position: "absolute",
     width: "100%",
@@ -102038,6 +102010,47 @@ function getImageFitStyle(el) {
     transform
   };
 }
+var IDENTITY_TRANSFORM_PAIR = "translate(0%, 0%) scale(1, 1)";
+function imageFitTransformParts(el) {
+  if (!isImageLikeElement(el)) {
+    return { placement: "", crop: "" };
+  }
+  const frLeft = el.fillRectLeft ?? 0;
+  const frTop = el.fillRectTop ?? 0;
+  const frRight = el.fillRectRight ?? 0;
+  const frBottom = el.fillRectBottom ?? 0;
+  const hasFillRect = Math.abs(frLeft) + Math.abs(frTop) + Math.abs(frRight) + Math.abs(frBottom) > 1e-4;
+  const placement = hasFillRect ? `translate(${round2(frLeft * 100)}%, ${round2(frTop * 100)}%) scale(${round6(
+    Math.max(0.01, 1 - frLeft - frRight)
+  )}, ${round6(Math.max(0.01, 1 - frTop - frBottom))})` : "";
+  const cropLeft = clampCropValue(el.cropLeft);
+  const cropTop = clampCropValue(el.cropTop);
+  const cropRight = clampCropValue(el.cropRight);
+  const cropBottom = clampCropValue(el.cropBottom);
+  if (cropLeft + cropRight <= 1e-4 && cropTop + cropBottom <= 1e-4) {
+    return { placement, crop: "" };
+  }
+  const horizontalScale = cropLeft + cropRight >= 0.99 ? 0.99 / (cropLeft + cropRight) : 1;
+  const verticalScale = cropTop + cropBottom >= 0.99 ? 0.99 / (cropTop + cropBottom) : 1;
+  const left = clampCropValue(cropLeft * horizontalScale);
+  const right = clampCropValue(cropRight * horizontalScale);
+  const top = clampCropValue(cropTop * verticalScale);
+  const bottom = clampCropValue(cropBottom * verticalScale);
+  const remainingWidth = Math.max(0.01, 1 - left - right);
+  const remainingHeight = Math.max(0.01, 1 - top - bottom);
+  const tx = Math.round(-left / remainingWidth * 1e4) / 100;
+  const ty = Math.round(-top / remainingHeight * 1e4) / 100;
+  const sx = Math.round(1 / remainingWidth * 1e6) / 1e6;
+  const sy = Math.round(1 / remainingHeight * 1e6) / 1e6;
+  return { placement, crop: `translate(${tx}%, ${ty}%) scale(${sx}, ${sy})` };
+}
+function buildImageFitTransform(el, padToIdentity = false) {
+  const { placement, crop } = imageFitTransformParts(el);
+  if (!padToIdentity) {
+    return [placement, crop].filter(Boolean).join(" ");
+  }
+  return `${placement || IDENTITY_TRANSFORM_PAIR} ${crop || IDENTITY_TRANSFORM_PAIR}`;
+}
 function round2(value) {
   return Math.round(value * 100) / 100;
 }
@@ -107783,8 +107796,118 @@ function buildTextRunFilterChain(style) {
   }
   return parts.length > 0 ? parts.join(" ") : void 0;
 }
-var POWERPOINT_METRIC_TRACKING_EM = 3e-3;
-var POWERPOINT_METRIC_TRACKING = `${POWERPOINT_METRIC_TRACKING_EM}em`;
+var ADVANCE_STEPS_PER_PX = 6;
+var MAX_TRACKING_PX_PER_CHAR = 1 / (2 * ADVANCE_STEPS_PER_PX);
+var MAX_CACHE_ENTRIES = 2e4;
+var measureContext;
+var trackingCache = /* @__PURE__ */ new Map();
+var fontsHookInstalled = false;
+function installFontLoadHook() {
+  if (fontsHookInstalled || typeof document === "undefined") {
+    return;
+  }
+  fontsHookInstalled = true;
+  document.fonts?.addEventListener?.("loadingdone", () => {
+    trackingCache = /* @__PURE__ */ new Map();
+  });
+}
+function getMeasureContext() {
+  if (measureContext !== void 0) {
+    return measureContext;
+  }
+  if (typeof document === "undefined") {
+    measureContext = null;
+    return null;
+  }
+  installFontLoadHook();
+  measureContext = document.createElement("canvas").getContext("2d");
+  return measureContext;
+}
+function toCanvasFont(font) {
+  const size = font.fontSizePx && font.fontSizePx > 0 ? font.fontSizePx : DEFAULT_TEXT_FONT_SIZE;
+  const family = font.fontFamily || DEFAULT_FONT_FAMILY;
+  return `${font.italic ? "italic " : ""}${font.bold ? "bold " : ""}${size}px ${family}`;
+}
+function advancesOf(ctx, canvasFont, chars) {
+  ctx.font = canvasFont;
+  ctx.fontKerning = "none";
+  const advances = [];
+  let previous = 0;
+  let prefix = "";
+  for (const char of chars) {
+    prefix += char;
+    const width = ctx.measureText(prefix).width;
+    advances.push(width - previous);
+    previous = width;
+  }
+  return advances;
+}
+function resolveMetricTrackingPx(text2, font) {
+  if (!text2) {
+    return 0;
+  }
+  const canvasFont = toCanvasFont(font);
+  const key = `${canvasFont}\0${text2}`;
+  const cached = trackingCache.get(key);
+  if (cached !== void 0) {
+    return cached;
+  }
+  const ctx = getMeasureContext();
+  if (!ctx) {
+    return 0;
+  }
+  const chars = [...text2];
+  let powerPoint = 0;
+  for (const advance of advancesOf(ctx, canvasFont, chars)) {
+    powerPoint += Math.round(advance * ADVANCE_STEPS_PER_PX);
+  }
+  ctx.fontKerning = "auto";
+  const natural = ctx.measureText(text2).width;
+  if (!(natural > 0)) {
+    return 0;
+  }
+  powerPoint /= ADVANCE_STEPS_PER_PX;
+  const limit = MAX_TRACKING_PX_PER_CHAR;
+  const raw = (powerPoint - natural) / chars.length;
+  const tracking = Math.min(limit, Math.max(-limit, raw));
+  if (trackingCache.size >= MAX_CACHE_ENTRIES) {
+    trackingCache = /* @__PURE__ */ new Map();
+  }
+  trackingCache.set(key, tracking);
+  return tracking;
+}
+function isBreakBoundary(previous, next) {
+  const previousSpace = /\s/u.test(previous);
+  const nextSpace = /\s/u.test(next);
+  if (previousSpace !== nextSpace) {
+    return true;
+  }
+  return previous === "-" && next !== "-" && !nextSpace;
+}
+function splitRunForMetrics(text2, font) {
+  const chars = [...text2];
+  if (chars.length < 2 || !getMeasureContext()) {
+    return [{ text: text2, tracking: resolveMetricTrackingPx(text2, font) }];
+  }
+  const pieces = [];
+  let current = chars[0];
+  for (let i = 1; i < chars.length; i++) {
+    if (isBreakBoundary(chars[i - 1], chars[i])) {
+      pieces.push(current);
+      current = "";
+    }
+    current += chars[i];
+  }
+  pieces.push(current);
+  if (pieces.length === 1) {
+    return [{ text: text2, tracking: resolveMetricTrackingPx(text2, font) }];
+  }
+  return pieces.map((piece) => ({ text: piece, tracking: resolveMetricTrackingPx(piece, font) }));
+}
+function pieceLetterSpacing(authoredPx, tracking) {
+  const spacing = authoredPx + tracking;
+  return spacing === 0 ? void 0 : `${spacing}px`;
+}
 function resolveParagraphStrutFontSize(segments, bodyFontSize) {
   let largest;
   for (const segment of segments) {
@@ -107895,6 +108018,43 @@ function correspondingGroup(group2, candidates) {
     return sameBox(group2, candidate);
   });
 }
+var CHILD_OVERLAP_RATIO = 0.5;
+function boxOverlapRatio(a, b) {
+  const left = Math.max(a.x, b.x);
+  const top = Math.max(a.y, b.y);
+  const right = Math.min(a.x + a.width, b.x + b.width);
+  const bottom = Math.min(a.y + a.height, b.y + b.height);
+  if (right <= left || bottom <= top) {
+    return 0;
+  }
+  const intersection = (right - left) * (bottom - top);
+  const union = a.width * a.height + b.width * b.height - intersection;
+  return union > 0 ? intersection / union : 0;
+}
+function childrenPair(a, b) {
+  const morphName = getElementMorphName(a);
+  if (morphName !== void 0 && getElementMorphName(b) === morphName) {
+    return true;
+  }
+  if (a.name && a.name === b.name) {
+    return true;
+  }
+  return boxOverlapRatio(a, b) >= CHILD_OVERLAP_RATIO;
+}
+function childrenCorrespond(a, b) {
+  if (a.length !== b.length || a.length === 0) {
+    return false;
+  }
+  const unclaimed = b.map((child22) => child22);
+  for (const child22 of a) {
+    const index = unclaimed.findIndex((candidate) => childrenPair(child22, candidate));
+    if (index < 0) {
+      return false;
+    }
+    unclaimed.splice(index, 1);
+  }
+  return true;
+}
 function flattenMorphElements(elements, counterpart, offsetX = 0, offsetY = 0) {
   const out = [];
   for (const element of elements) {
@@ -107902,7 +108062,7 @@ function flattenMorphElements(elements, counterpart, offsetX = 0, offsetY = 0) {
     if (children8 && containsMorphNamedDescendant(element)) {
       const twin = correspondingGroup(element, counterpart);
       const twinChildren = twin ? groupChildren(twin) ?? [] : void 0;
-      if (twinChildren) {
+      if (twinChildren && childrenCorrespond(children8, twinChildren)) {
         out.push(
           ...flattenMorphElements(children8, twinChildren, offsetX + element.x, offsetY + element.y)
         );
@@ -108122,6 +108282,7 @@ function interpolateOutline(from, to, t) {
   return parts.join(" ");
 }
 var MORPH_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+var MORPH_CROSSFADE_EASING = "cubic-bezier(0.2, 0, 0.4, 1)";
 var MORPH_FADE_OUT_HOLD_PERCENT = 4;
 var MORPH_FADE_OUT_END_PERCENT = 23;
 var MORPH_FADE_IN_START_PERCENT = 42;
@@ -108187,6 +108348,88 @@ ${body}
     keyframes
   };
 }
+var CROP_EPSILON = 1e-4;
+function cropInsets(element) {
+  if (!isImageLikeElement(element)) {
+    return [0, 0, 0, 0, 0, 0, 0, 0];
+  }
+  return [
+    element.cropLeft ?? 0,
+    element.cropTop ?? 0,
+    element.cropRight ?? 0,
+    element.cropBottom ?? 0,
+    element.fillRectLeft ?? 0,
+    element.fillRectTop ?? 0,
+    element.fillRectRight ?? 0,
+    element.fillRectBottom ?? 0
+  ];
+}
+function morphImageCropChanged(fromElement, toElement) {
+  if (!isImageLikeElement(fromElement) || !isImageLikeElement(toElement)) {
+    return false;
+  }
+  const from = cropInsets(fromElement);
+  const to = cropInsets(toElement);
+  return from.some((value, index) => Math.abs(value - to[index]) > CROP_EPSILON);
+}
+function cropKeyframes(name, fromTransform, toTransform) {
+  return `
+@keyframes ${name} {
+	from {
+		transform-origin: top left;
+		transform: ${fromTransform};
+	}
+	to {
+		transform-origin: top left;
+		transform: ${toTransform};
+	}
+}`;
+}
+function generateImageCropMorphAnimations(pairs2, durationMs) {
+  const animations = [];
+  for (let index = 0; index < pairs2.length; index++) {
+    const { fromElement, toElement } = pairs2[index];
+    if (!morphImageCropChanged(fromElement, toElement)) {
+      continue;
+    }
+    const safeName = `pptx-morph-crop-${index}-${toElement.id.replace(/[^a-zA-Z0-9]/gu, "")}`;
+    animations.push({
+      elementId: toElement.id,
+      target: "image",
+      animation: `${safeName} ${durationMs}ms ${MORPH_EASING} forwards`,
+      keyframes: cropKeyframes(
+        safeName,
+        buildImageFitTransform(fromElement, true),
+        buildImageFitTransform(toElement, true)
+      )
+    });
+  }
+  return animations;
+}
+function generateImageCropGhostAnimations(pairs2, durationMs, ghostIds) {
+  const animations = [];
+  for (let index = 0; index < pairs2.length; index++) {
+    const { fromElement, toElement } = pairs2[index];
+    if (ghostIds && !ghostIds.has(fromElement.id)) {
+      continue;
+    }
+    if (!morphImageCropChanged(fromElement, toElement)) {
+      continue;
+    }
+    const safeName = `pptx-morph-crop-ghost-${index}-${fromElement.id.replace(/[^a-zA-Z0-9]/gu, "")}`;
+    animations.push({
+      elementId: fromElement.id,
+      target: "image",
+      animation: `${safeName} ${durationMs}ms ${MORPH_EASING} forwards`,
+      keyframes: cropKeyframes(
+        safeName,
+        buildImageFitTransform(fromElement, true),
+        buildImageFitTransform(toElement, true)
+      )
+    });
+  }
+  return animations;
+}
 var TEXT_MAX_DEPTH = 8;
 function elementText(element, depth = 0) {
   const own = element.text ?? "";
@@ -108360,6 +108603,69 @@ function matchMorphElementsFull(fromSlide, toSlide) {
   const unmatchedTo = toElements.filter((el) => !usedTo.has(el.id));
   return { pairs: pairs2, unmatchedFrom, unmatchedTo };
 }
+function travelledBox(from, to) {
+  const boxes = to ? [from, to] : [from];
+  return {
+    left: Math.min(...boxes.map((element) => element.x)),
+    top: Math.min(...boxes.map((element) => element.y)),
+    right: Math.max(...boxes.map((element) => element.x + element.width)),
+    bottom: Math.max(...boxes.map((element) => element.y + element.height))
+  };
+}
+function boxesOverlap(a, b) {
+  return a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom;
+}
+function buildMorphMergedOrder(outgoing, incoming, pairs2) {
+  const partnerOf = new Map(pairs2.map((pair) => [pair.toElement.id, pair.fromElement.id]));
+  const outgoingIndex = new Map(outgoing.map((element, index) => [element.id, index]));
+  const rank = /* @__PURE__ */ new Map();
+  let next = 0;
+  let cursor = 0;
+  const flushOutgoingBelow = (limit) => {
+    while (cursor < limit) {
+      const element = outgoing[cursor];
+      cursor += 1;
+      if (!rank.has(element.id)) {
+        rank.set(element.id, next);
+        next += 1;
+      }
+    }
+  };
+  for (const element of incoming) {
+    const partner = partnerOf.get(element.id);
+    const partnerIndex = partner === void 0 ? void 0 : outgoingIndex.get(partner);
+    if (partner === void 0 || partnerIndex === void 0) {
+      rank.set(element.id, next);
+      next += 1;
+      continue;
+    }
+    flushOutgoingBelow(partnerIndex + 1);
+    rank.set(element.id, rank.get(partner) ?? next);
+  }
+  flushOutgoingBelow(outgoing.length);
+  return rank;
+}
+function resolveMorphOverlayArrivals(outgoing, incoming, pairs2, holdingGhostIds) {
+  const rank = buildMorphMergedOrder(outgoing, incoming, pairs2);
+  const matched = new Set(pairs2.map((pair) => pair.toElement.id));
+  const counterpart = new Map(pairs2.map((pair) => [pair.fromElement.id, pair.toElement]));
+  const ghosts = outgoing.filter((element) => holdingGhostIds.has(element.id)).map((element) => ({
+    rank: rank.get(element.id) ?? 0,
+    box: travelledBox(element, counterpart.get(element.id))
+  }));
+  const lifted = /* @__PURE__ */ new Set();
+  for (const element of incoming) {
+    if (matched.has(element.id)) {
+      continue;
+    }
+    const mine = rank.get(element.id) ?? 0;
+    const box = travelledBox(element);
+    if (ghosts.some((ghost) => ghost.rank < mine && boxesOverlap(ghost.box, box))) {
+      lifted.add(element.id);
+    }
+  }
+  return lifted;
+}
 function tokenizeText(element, mode) {
   if (!hasTextProperties(element) || !element.text) {
     return [];
@@ -108595,19 +108901,7 @@ function morphPairNeedsCrossfade(fromElement, toElement) {
 }
 var GEOMETRY_EPSILON = 0.5;
 function isInertMorphPair(fromElement, toElement) {
-  return Math.abs(fromElement.x - toElement.x) <= GEOMETRY_EPSILON && Math.abs(fromElement.y - toElement.y) <= GEOMETRY_EPSILON && Math.abs(fromElement.width - toElement.width) <= GEOMETRY_EPSILON && Math.abs(fromElement.height - toElement.height) <= GEOMETRY_EPSILON && (fromElement.rotation ?? 0) === (toElement.rotation ?? 0) && Boolean(fromElement.flipHorizontal) === Boolean(toElement.flipHorizontal) && Boolean(fromElement.flipVertical) === Boolean(toElement.flipVertical) && (fromElement.opacity ?? 1) === (toElement.opacity ?? 1) && !morphPairNeedsCrossfade(fromElement, toElement);
-}
-function travelledBox(from, to) {
-  const boxes = to ? [from, to] : [from];
-  return {
-    left: Math.min(...boxes.map((element) => element.x)),
-    top: Math.min(...boxes.map((element) => element.y)),
-    right: Math.max(...boxes.map((element) => element.x + element.width)),
-    bottom: Math.max(...boxes.map((element) => element.y + element.height))
-  };
-}
-function boxesOverlap(a, b) {
-  return a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom;
+  return !morphImageCropChanged(fromElement, toElement) && Math.abs(fromElement.x - toElement.x) <= GEOMETRY_EPSILON && Math.abs(fromElement.y - toElement.y) <= GEOMETRY_EPSILON && Math.abs(fromElement.width - toElement.width) <= GEOMETRY_EPSILON && Math.abs(fromElement.height - toElement.height) <= GEOMETRY_EPSILON && (fromElement.rotation ?? 0) === (toElement.rotation ?? 0) && Boolean(fromElement.flipHorizontal) === Boolean(toElement.flipHorizontal) && Boolean(fromElement.flipVertical) === Boolean(toElement.flipVertical) && (fromElement.opacity ?? 1) === (toElement.opacity ?? 1) && !morphPairNeedsCrossfade(fromElement, toElement);
 }
 function resolveMorphGhostIds(outgoingElements, pairs2) {
   const counterparts = new Map(pairs2.map((pair) => [pair.fromElement.id, pair.toElement]));
@@ -108629,6 +108923,10 @@ function crossfadeIncomingMayFadeIn(element) {
   if (image.imagePath || image.svgPath) {
     return false;
   }
+  const children8 = element.children;
+  if (children8?.length) {
+    return children8.every((child22) => crossfadeIncomingMayFadeIn(child22));
+  }
   if (!hasShapeProperties(element)) {
     return true;
   }
@@ -108662,13 +108960,15 @@ function generateMorphAnimations(pairs2, durationMs, _mode = "object", ghostIds)
     const inert = ghosted && isInertMorphPair(fromElement, toElement);
     const crossfadesIn = !inert && morphPairNeedsCrossfade(fromElement, toElement) && crossfadeIncomingMayFadeIn(toElement);
     const fromProps = [
-      `		transform: translate(${dx}px, ${dy}px) scale(${sx}, ${sy}) rotate(${fromRot}deg)${flips};`,
-      `		opacity: ${inert ? 0 : crossfadesIn ? 0 : fromOpacity};`
+      `		transform: translate(${dx}px, ${dy}px) scale(${sx}, ${sy}) rotate(${fromRot}deg)${flips};`
     ];
     const toProps = [
-      `		transform: translate(0, 0) scale(1, 1) rotate(${toRot}deg)${flips};`,
-      `		opacity: ${inert ? 0 : toOpacity};`
+      `		transform: translate(0, 0) scale(1, 1) rotate(${toRot}deg)${flips};`
     ];
+    if (!crossfadesIn) {
+      fromProps.push(`		opacity: ${inert ? 0 : fromOpacity};`);
+      toProps.push(`		opacity: ${inert ? 0 : toOpacity};`);
+    }
     const colorInterp = buildColorInterpolationProps(fromElement, toElement);
     if (colorInterp) {
       fromProps.push(`		background-color: ${colorInterp.fromBg};`);
@@ -108687,10 +108987,18 @@ ${fromProps.join("\n")}
 	to {
 ${toProps.join("\n")}
 	}
-}`;
+}${crossfadesIn ? `
+@keyframes ${safeName}-fade {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: ${toOpacity};
+	}
+}` : ""}`;
     animations.push({
       elementId: toElement.id,
-      animation: `${safeName} ${durationMs}ms ${MORPH_EASING} forwards`,
+      animation: `${safeName} ${durationMs}ms ${MORPH_EASING} forwards${crossfadesIn ? `, ${safeName}-fade ${durationMs}ms ${MORPH_CROSSFADE_EASING} forwards` : ""}`,
       keyframes
     });
   }
@@ -108712,22 +109020,31 @@ function generateMorphGhostAnimations(pairs2, durationMs, startIndex, ghostIds)
     const fromRot = fromElement.rotation ?? 0;
     const toRot = shortestRotationTarget(fromRot, toElement.rotation ?? 0);
     const flips = `${fromElement.flipHorizontal ? " scaleX(-1)" : ""}${fromElement.flipVertical ? " scaleY(-1)" : ""}`;
+    const opacity2 = fromElement.opacity ?? 1;
     const keyframes = `
 @keyframes ${safeName} {
 	from {
 		transform-origin: center;
-		transform: translate(0, 0) scale(1, 1) rotate(${fromRot}deg)${flips};
-		opacity: ${fromElement.opacity ?? 1};
+		transform: translate(0, 0) scale(1, 1) rotate(${fromRot}deg)${flips};${fadesOut ? "" : `
+		opacity: ${opacity2};`}
 	}
 	to {
 		transform-origin: center;
-		transform: translate(${dx}px, ${dy}px) scale(${sx}, ${sy}) rotate(${toRot}deg)${flips};
-		opacity: ${fadesOut ? 0 : fromElement.opacity ?? 1};
+		transform: translate(${dx}px, ${dy}px) scale(${sx}, ${sy}) rotate(${toRot}deg)${flips};${fadesOut ? "" : `
+		opacity: ${opacity2};`}
 	}
-}`;
+}${fadesOut ? `
+@keyframes ${safeName}-fade {
+	from {
+		opacity: ${opacity2};
+	}
+	to {
+		opacity: 0;
+	}
+}` : ""}`;
     animations.push({
       elementId: fromElement.id,
-      animation: `${safeName} ${durationMs}ms ${MORPH_EASING} forwards`,
+      animation: `${safeName} ${durationMs}ms ${MORPH_EASING} forwards${fadesOut ? `, ${safeName}-fade ${durationMs}ms ${MORPH_CROSSFADE_EASING} forwards` : ""}`,
       keyframes
     });
   }
@@ -108837,6 +109154,7 @@ function generateFullMorphTransition(fromSlide, toSlide, durationMs, mode = "obj
       allAnimations.push(geo);
     }
   }
+  allAnimations.push(...generateImageCropMorphAnimations(matchResult.pairs, durationMs));
   if (mode === "word" || mode === "character") {
     for (let i = 0; i < matchResult.pairs.length; i++) {
       const pair = matchResult.pairs[i];
@@ -108853,6 +109171,7 @@ function generateFullMorphTransition(fromSlide, toSlide, durationMs, mode = "obj
     ghostIds
   );
   allAnimations.push(...ghosts);
+  allAnimations.push(...generateImageCropGhostAnimations(matchResult.pairs, durationMs, ghostIds));
   const fadeOuts = generateUnmatchedFadeOutAnimations(
     matchResult.unmatchedFrom,
     durationMs,
@@ -108867,6 +109186,16 @@ function generateFullMorphTransition(fromSlide, toSlide, durationMs, mode = "obj
   allAnimations.push(...fadeIns);
   return allAnimations;
 }
+var LIFTED_HIDDEN_NAME = "pptx-morph-lifted-hidden";
+var LIFTED_HIDDEN_KEYFRAMES = `
+@keyframes ${LIFTED_HIDDEN_NAME} {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 0;
+	}
+}`;
 function morphOptionToMode(option) {
   if (option === "byWord") {
     return "word";
@@ -108889,26 +109218,79 @@ function buildMorphTransitionPlan(fromSlide, toSlide, durationMs, mode = "object
   const outgoingIds = new Set(flattenedOutgoing.map((element) => element.id));
   const incomingAnimations = /* @__PURE__ */ new Map();
   const outgoingAnimations = /* @__PURE__ */ new Map();
+  const incomingImageAnimations = /* @__PURE__ */ new Map();
+  const outgoingImageAnimations = /* @__PURE__ */ new Map();
   const keyframes = [];
   for (const animation of animations) {
     keyframes.push(animation.keyframes);
-    if (outgoingIds.has(animation.elementId)) {
-      outgoingAnimations.set(animation.elementId, animation.animation);
-    } else {
-      incomingAnimations.set(animation.elementId, animation.animation);
-    }
+    const isOutgoing = outgoingIds.has(animation.elementId);
+    const target = animation.target === "image" ? isOutgoing ? outgoingImageAnimations : incomingImageAnimations : isOutgoing ? outgoingAnimations : incomingAnimations;
+    target.set(animation.elementId, animation.animation);
   }
   const outgoingElements = flattenedOutgoing.filter(
     (element) => outgoingAnimations.has(element.id)
   );
+  const flattenedIncoming = flattenMorphElements(toSlide.elements, fromSlide.elements);
+  const holdingGhostIds = new Set(
+    match.pairs.filter(
+      (candidate) => outgoingAnimations.has(candidate.fromElement.id) && !morphPairNeedsCrossfade(candidate.fromElement, candidate.toElement)
+    ).map((candidate) => candidate.fromElement.id)
+  );
+  const lifted = resolveMorphOverlayArrivals(
+    flattenedOutgoing,
+    flattenedIncoming,
+    match.pairs,
+    holdingGhostIds
+  );
+  const overlayIncomingAnimations = /* @__PURE__ */ new Map();
+  for (const id of lifted) {
+    const animation = incomingAnimations.get(id);
+    if (animation === void 0) {
+      continue;
+    }
+    overlayIncomingAnimations.set(id, animation);
+    incomingAnimations.set(id, `${LIFTED_HIDDEN_NAME} ${durationMs}ms linear forwards`);
+  }
+  if (overlayIncomingAnimations.size > 0) {
+    keyframes.push(LIFTED_HIDDEN_KEYFRAMES);
+  }
+  const overlayIncomingElements = flattenedIncoming.filter(
+    (element) => overlayIncomingAnimations.has(element.id)
+  );
   return {
     keyframesCss: keyframes.join("\n"),
     incomingAnimations,
     outgoingAnimations,
+    incomingImageAnimations,
+    outgoingImageAnimations,
+    overlayIncomingAnimations,
     outgoingElements,
+    overlayIncomingElements,
     durationMs
   };
 }
+function cssAttributeValue(value) {
+  return value.replace(/\\/gu, "\\\\").replace(/"/gu, '\\"');
+}
+function buildMorphAnimationRules(plan, scopeAttribute, which = "incoming", only) {
+  const prefix = scopeAttribute ? `[${scopeAttribute}] ` : "";
+  const rules = [];
+  const emit = (animations, suffix) => {
+    for (const [elementId, animation] of animations) {
+      rules.push(
+        `${prefix}[data-element-id="${cssAttributeValue(elementId)}"]${suffix} { animation: ${animation}; }`
+      );
+    }
+  };
+  if (only !== "image") {
+    emit(
+      which === "outgoing" ? plan.outgoingAnimations : which === "lifted" ? plan.overlayIncomingAnimations : plan.incomingAnimations,
+      ""
+    );
+  }
+  emit(which === "outgoing" ? plan.outgoingImageAnimations : plan.incomingImageAnimations, " img");
+  return rules.join("\n");
+}
 function hexToRgb6(hex10) {
   const clean = hex10.replace(/^#/u, "");
   return {
@@ -119085,6 +119467,69 @@ function mediaTransportVisible(surface) {
   }
   return surface.canvasTransport;
 }
+function mediaFallbackVisual(surface, input) {
+  const contentOnly = surface.presenting || surface.preview;
+  if (contentOnly) {
+    return { poster: input.hasPoster, dimPoster: false, badge: "none", placeholder: "none" };
+  }
+  const missing = input.missing === true;
+  if (input.hasPoster) {
+    return {
+      poster: true,
+      dimPoster: missing,
+      badge: missing ? "missing" : "play",
+      placeholder: "none"
+    };
+  }
+  return {
+    poster: false,
+    dimPoster: false,
+    badge: "none",
+    placeholder: missing ? "missing" : "typed"
+  };
+}
+var MEDIA_FALLBACK_ICONS = {
+  play: ["M5 3 L19 12 L5 21 Z"],
+  missing: ["M12 2 a10 10 0 1 0 0 20 a10 10 0 1 0 0-20", "M4 4 L20 20"],
+  audio: [
+    "M9 18V5l12-2v13",
+    "M6 15 a3 3 0 1 0 0 6 a3 3 0 1 0 0-6",
+    "M18 13 a3 3 0 1 0 0 6 a3 3 0 1 0 0-6"
+  ]
+};
+function mediaFallbackIcon(visual, mediaType) {
+  if (visual.badge === "missing" || visual.placeholder === "missing") {
+    return MEDIA_FALLBACK_ICONS.missing;
+  }
+  if (visual.badge === "play") {
+    return MEDIA_FALLBACK_ICONS.play;
+  }
+  if (visual.placeholder === "typed") {
+    if (mediaType === "audio") {
+      return MEDIA_FALLBACK_ICONS.audio;
+    }
+    if (mediaType === "video") {
+      return MEDIA_FALLBACK_ICONS.play;
+    }
+  }
+  return [];
+}
+function mediaFallbackLabelKey(visual, mediaType) {
+  if (visual.badge === "missing" || visual.placeholder === "missing") {
+    return "pptx.media.notFound";
+  }
+  if (visual.placeholder !== "typed") {
+    return void 0;
+  }
+  if (mediaType === "video") {
+    return "pptx.media.videoClip";
+  }
+  if (mediaType === "audio") {
+    return "pptx.media.audioClip";
+  }
+  return "pptx.elementType.media";
+}
+var MEDIA_CHROME_ATTRIBUTE = "data-pptx-media-chrome";
 var persistentAudioMap = /* @__PURE__ */ new Map();
 function registerPersistentAudio(elementId, dataUrl, mimetype, loop, volume, trimStartSec) {
   if (persistentAudioMap.has(elementId) || typeof document === "undefined") {
@@ -123353,6 +123798,7 @@ exports.LINK_TOOLTIP_PANEL_CLASS = LINK_TOOLTIP_PANEL_CLASS;
 exports.LOCAL_SYNC_ORIGIN = LOCAL_SYNC_ORIGIN;
 exports.MATERIAL_PRESETS = MATERIAL_PRESETS;
 exports.MAX_ZOOM_SCALE = MAX_ZOOM_SCALE;
+exports.MEDIA_CHROME_ATTRIBUTE = MEDIA_CHROME_ATTRIBUTE;
 exports.MIN_ZOOM_SCALE = MIN_ZOOM_SCALE;
 exports.MOBILE_BREAKPOINT = MOBILE_BREAKPOINT;
 exports.MOTION_PATH_FAMILIES = MOTION_PATH_FAMILIES;
@@ -123367,7 +123813,6 @@ exports.OUTLINE_SLIDE_ATTR = OUTLINE_SLIDE_ATTR;
 exports.OUTLINE_VIEW_ATTR = OUTLINE_VIEW_ATTR;
 exports.PATTERN_OPTIONS = PATTERN_OPTIONS;
 exports.PEN_COLORS = PEN_COLORS;
-exports.POWERPOINT_METRIC_TRACKING = POWERPOINT_METRIC_TRACKING;
 exports.PRESENTATION_CHANNEL_NAME = PRESENTATION_CHANNEL_NAME;
 exports.PRESENTATION_HASH = PRESENTATION_HASH;
 exports.PRESENTATION_MESSAGE_ORIGIN = PRESENTATION_MESSAGE_ORIGIN;
@@ -123480,6 +123925,7 @@ exports.buildHollowHitOutline = buildHollowHitOutline;
 exports.buildInitialGuides = buildInitialGuides;
 exports.buildInnerShadowCssFromShapeStyle = buildInnerShadowCssFromShapeStyle;
 exports.buildJoinCollaborationConfig = buildJoinCollaborationConfig;
+exports.buildMorphAnimationRules = buildMorphAnimationRules;
 exports.buildMorphTransitionPlan = buildMorphTransitionPlan;
 exports.buildMotionPathPreview = buildMotionPathPreview;
 exports.buildMultiLayerShadowCss = buildMultiLayerShadowCss;
@@ -123755,6 +124201,9 @@ exports.mapOutlineKey = mapOutlineKey;
 exports.mapPresentationKey = mapPresentationKey;
 exports.mapPresentationWheel = mapPresentationWheel;
 exports.mayLeaveSlideShow = mayLeaveSlideShow;
+exports.mediaFallbackIcon = mediaFallbackIcon;
+exports.mediaFallbackLabelKey = mediaFallbackLabelKey;
+exports.mediaFallbackVisual = mediaFallbackVisual;
 exports.mediaPlaybackAttributes = mediaPlaybackAttributes;
 exports.mediaTransportVisible = mediaTransportVisible;
 exports.mergeAdditiveSelection = mergeAdditiveSelection;
@@ -123801,6 +124250,7 @@ exports.parseDrawingColorOpacity = parseDrawingColorOpacity;
 exports.parsePanoseString = parsePanoseString;
 exports.parsePpactionUrl = parsePpactionUrl;
 exports.pickSupportedMimeType = pickSupportedMimeType;
+exports.pieceLetterSpacing = pieceLetterSpacing;
 exports.placeAudienceWindow = placeAudienceWindow;
 exports.placeCaretAtEnd = placeCaretAtEnd;
 exports.polygonsToSvgPath = polygonsToSvgPath;
@@ -123861,6 +124311,7 @@ exports.resolveGroupChildFill = resolveGroupChildFill;
 exports.resolveInkColor = resolveInkColor;
 exports.resolveInkOpacity = resolveInkOpacity;
 exports.resolveInkWidth = resolveInkWidth;
+exports.resolveMetricTrackingPx = resolveMetricTrackingPx;
 exports.resolveOleType = resolveOleType;
 exports.resolveParagraphAlign = resolveParagraphAlign;
 exports.resolveParagraphRtl = resolveParagraphRtl;
@@ -123924,6 +124375,7 @@ exports.slideProgressPercent = slideProgressPercent;
 exports.slideStatusLabel = slideStatusLabel;
 exports.snapBoxToGrid = snapBoxToGrid;
 exports.splitCell = splitCell;
+exports.splitRunForMetrics = splitRunForMetrics;
 exports.splitSeriesByAxis = splitSeriesByAxis;
 exports.stepPresenterZoom = stepPresenterZoom;
 exports.stopAllPersistentAudio = stopAllPersistentAudio;