pptx-react-viewer 4.73.1 → 4.74.0

package/CHANGELOG.md

@@ -7,6 +7,12 @@ A release listed with no entries carried no Conventional Commit in this package'
 scope: scripts/release-plan.mjs releases whenever any published file changes, not only on
 conventional commits.
 
+## [4.74.0](https://github.com/ChristopherVR/ooxml/releases/tag/pptx-react-viewer@4.74.0) - 2026-11-11
+
+### Features
+
+- **pptx:** Export a slide thumbnail building block in every binding ([#242](https://github.com/ChristopherVR/ooxml/issues/242)) ([f717202](https://github.com/ChristopherVR/ooxml/commit/f717202d7af2cbb01b65cf2d02f598bff1dbb492))
+
 ## [4.73.1](https://github.com/ChristopherVR/ooxml/releases/tag/pptx-react-viewer@4.73.1) - 2026-11-09
 
 ### Dependencies

package/dist/{chunk-YLJSLYQS.js → chunk-D4WC35PL.js}

@@ -36,6 +36,113 @@ function useThemeStyle(theme) {
     return vars;
   }, [theme]);
 }
+function getReactSlideBackgroundStyle(slide, slideSize) {
+  const style = pptx.getSlideBackgroundStyle(slide, slideSize);
+  return {
+    backgroundColor: style["background-color"],
+    backgroundImage: slide?.backgroundImage ? void 0 : style["background-image"],
+    backgroundSize: style["background-size"],
+    backgroundRepeat: style["background-repeat"]
+  };
+}
+function SlideThumbnailImpl({
+  slide,
+  templateElements,
+  canvasSize,
+  previewWidth,
+  fieldContext,
+  tableStyleContext
+}) {
+  const safeCanvasWidth = Math.max(canvasSize.width, 1);
+  const safeCanvasHeight = Math.max(canvasSize.height, 1);
+  const layout = pptx.slideThumbnailLayout(
+    safeCanvasWidth,
+    safeCanvasHeight,
+    previewWidth ?? chunkP2COO2QO_js.SLIDE_NAV_THUMBNAIL_WIDTH
+  );
+  const { height: previewHeight, scale } = layout;
+  const previewElements = pptx.buildPreviewElements(slide, templateElements);
+  const slideFieldContext = pptx.deriveSlideFieldContext(fieldContext, slide);
+  const { t } = chunkP2COO2QO_js.useTranslation();
+  const transitionBadge = pptx.slideThumbnailTransitionBadge(slide, t);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: previewWidth === void 0 ? "relative w-full overflow-hidden rounded border border-border bg-white" : "relative w-full overflow-hidden bg-white",
+      style: {
+        height: previewHeight,
+        ...getReactSlideBackgroundStyle(slide, {
+          widthPx: safeCanvasWidth,
+          heightPx: safeCanvasHeight
+        })
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "absolute top-0 left-0 origin-top-left",
+            style: {
+              width: safeCanvasWidth,
+              height: safeCanvasHeight,
+              transform: `scale(${scale})`,
+              transformOrigin: "top left",
+              ...pptx.deviceStrokeStageStyle(scale)
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(chunkXG4WSJ4O_js.SlideBackgroundImageLayer, { slide }),
+              previewElements.map((element, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                chunkXG4WSJ4O_js.StaticElementRenderer,
+                {
+                  element,
+                  activeSlide: slide,
+                  allSlides: [slide],
+                  zIndex: index,
+                  fieldContext: slideFieldContext,
+                  tableStyleContext
+                },
+                element.id
+              ))
+            ]
+          }
+        ),
+        transitionBadge && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-pptx-thumbnail-transition": "",
+            title: transitionBadge.title,
+            style: pptx.slideThumbnailTransitionBadgeStyle(layout),
+            children: transitionBadge.label
+          }
+        )
+      ]
+    }
+  );
+}
+function slideThumbnailPropsEqual(prev, next) {
+  if (prev.previewWidth !== next.previewWidth) {
+    return false;
+  }
+  if (prev.slide !== next.slide) {
+    return false;
+  }
+  if (prev.templateElements !== next.templateElements) {
+    return false;
+  }
+  if (prev.fieldContext !== next.fieldContext) {
+    return false;
+  }
+  if (prev.tableStyleContext !== next.tableStyleContext) {
+    return false;
+  }
+  if (prev.canvasSize.width !== next.canvasSize.width || prev.canvasSize.height !== next.canvasSize.height) {
+    return false;
+  }
+  return true;
+}
+var SlideThumbnail = /* @__PURE__ */ React108__default.default.memo(
+  SlideThumbnailImpl,
+  slideThumbnailPropsEqual
+);
 function getInitials(name) {
   const parts = name.trim().split(/\s+/u);
   if (parts.length >= 2) {
@@ -525,134 +632,6 @@ function SlideContextMenu({
     }
   );
 }
-function getReactSlideBackgroundStyle(slide, slideSize) {
-  const style = pptx.getSlideBackgroundStyle(slide, slideSize);
-  return {
-    backgroundColor: style["background-color"],
-    backgroundImage: slide?.backgroundImage ? void 0 : style["background-image"],
-    backgroundSize: style["background-size"],
-    backgroundRepeat: style["background-repeat"]
-  };
-}
-function SlideThumbnailImpl({
-  slide,
-  templateElements,
-  canvasSize,
-  previewWidth,
-  fieldContext,
-  tableStyleContext
-}) {
-  const safeCanvasWidth = Math.max(canvasSize.width, 1);
-  const safeCanvasHeight = Math.max(canvasSize.height, 1);
-  const width = previewWidth ?? chunkP2COO2QO_js.SLIDE_NAV_THUMBNAIL_WIDTH;
-  const scale = width / safeCanvasWidth;
-  const previewHeight = pptx.editorThumbnailHeight(safeCanvasWidth, safeCanvasHeight, width);
-  const previewElements = pptx.buildPreviewElements(slide, templateElements);
-  const slideFieldContext = pptx.deriveSlideFieldContext(fieldContext, slide);
-  const { t } = chunkP2COO2QO_js.useTranslation();
-  const transitionLabel = slide.transition ? (() => {
-    const opt = chunkP2COO2QO_js.SLIDE_TRANSITION_OPTIONS.find((o) => o.value === slide.transition?.type);
-    return opt ? t(opt.i18nKey) : slide.transition.type;
-  })() : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: previewWidth === void 0 ? "relative w-full overflow-hidden rounded border border-border bg-white" : "relative w-full overflow-hidden bg-white",
-      style: {
-        height: previewHeight,
-        ...getReactSlideBackgroundStyle(slide, {
-          widthPx: safeCanvasWidth,
-          heightPx: safeCanvasHeight
-        })
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "absolute top-0 left-0 origin-top-left",
-          style: {
-            width: safeCanvasWidth,
-            height: safeCanvasHeight,
-            transform: `scale(${scale})`,
-            transformOrigin: "top left",
-            ...pptx.deviceStrokeStageStyle(scale)
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(chunkXG4WSJ4O_js.SlideBackgroundImageLayer, { slide }),
-            slide.transition && slide.transition.type !== "none" && slide.transition.type !== "cut" && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "absolute top-0.5 right-0.5 z-10 px-1 py-px rounded bg-primary/80 text-[7px] text-white leading-tight pointer-events-none",
-                title: t("pptx.slideThumbnail.transitionTooltip", { name: transitionLabel }),
-                children: transitionLabel
-              }
-            ),
-            previewElements.map((element, index) => /* @__PURE__ */ jsxRuntime.jsx(
-              chunkXG4WSJ4O_js.StaticElementRenderer,
-              {
-                element,
-                activeSlide: slide,
-                allSlides: [slide],
-                zIndex: index,
-                fieldContext: slideFieldContext,
-                tableStyleContext
-              },
-              element.id
-            ))
-          ]
-        }
-      )
-    }
-  );
-}
-function slideThumbnailPropsEqual(prev, next) {
-  if (prev.previewWidth !== next.previewWidth) {
-    return false;
-  }
-  if (prev.slide.id !== next.slide.id) {
-    return false;
-  }
-  if (prev.slide.isDirty !== next.slide.isDirty) {
-    return false;
-  }
-  if (prev.slide.hidden !== next.slide.hidden) {
-    return false;
-  }
-  if (prev.slide.elements !== next.slide.elements) {
-    return false;
-  }
-  if (prev.slide.showMasterShapes !== next.slide.showMasterShapes) {
-    return false;
-  }
-  if (prev.slide.backgroundColor !== next.slide.backgroundColor) {
-    return false;
-  }
-  if (prev.slide.backgroundImage !== next.slide.backgroundImage) {
-    return false;
-  }
-  if (prev.slide.backgroundGradient !== next.slide.backgroundGradient) {
-    return false;
-  }
-  if (prev.slide.backgroundPattern !== next.slide.backgroundPattern) {
-    return false;
-  }
-  if (prev.templateElements !== next.templateElements) {
-    return false;
-  }
-  if (prev.fieldContext !== next.fieldContext) {
-    return false;
-  }
-  if (prev.tableStyleContext !== next.tableStyleContext) {
-    return false;
-  }
-  if (prev.canvasSize.width !== next.canvasSize.width || prev.canvasSize.height !== next.canvasSize.height) {
-    return false;
-  }
-  return true;
-}
-var SlideThumbnail = /* @__PURE__ */ React108__default.default.memo(
-  SlideThumbnailImpl,
-  slideThumbnailPropsEqual
-);
 function LazyThumbnailInner({
   slide,
   templateElements,
@@ -2853,7 +2832,7 @@ function AccountPage() {
     refreshUsage();
     setTimeout(() => setCleared(false), 4e3);
   };
-  const version = "4.73.1" ;
+  const version = "4.74.0" ;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 max-w-[700px] space-y-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cardClass, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "flex items-center gap-2 text-sm font-semibold", children: [
@@ -10600,17 +10579,8 @@ function SlideCardImpl({
     }
   );
 }
-function arePropsEqual(prev, next) {
-  if (prev.slide.id !== next.slide.id) {
-    return false;
-  }
-  if (prev.slide.isDirty !== next.slide.isDirty) {
-    return false;
-  }
-  if (prev.slide.hidden !== next.slide.hidden) {
-    return false;
-  }
-  if (prev.slide.elements !== next.slide.elements) {
+function slideCardPropsEqual(prev, next) {
+  if (prev.slide !== next.slide) {
     return false;
   }
   if (prev.index !== next.index) {
@@ -10642,7 +10612,7 @@ function arePropsEqual(prev, next) {
   }
   return true;
 }
-var SlideCard = /* @__PURE__ */ React108__default.default.memo(SlideCardImpl, arePropsEqual);
+var SlideCard = /* @__PURE__ */ React108__default.default.memo(SlideCardImpl, slideCardPropsEqual);
 var ICON_CLASS = "h-3.5 w-3.5 text-muted-foreground";
 function SorterContextMenu({
   x,
@@ -13970,28 +13940,7 @@ function ScaledSlidePreviewImpl({
   );
 }
 function scaledSlidePreviewPropsEqual(prev, next) {
-  if (prev.slide.id !== next.slide.id) {
-    return false;
-  }
-  if (prev.slide.isDirty !== next.slide.isDirty) {
-    return false;
-  }
-  if (prev.slide.hidden !== next.slide.hidden) {
-    return false;
-  }
-  if (prev.slide.elements !== next.slide.elements) {
-    return false;
-  }
-  if (prev.slide.showMasterShapes !== next.slide.showMasterShapes) {
-    return false;
-  }
-  if (prev.slide.backgroundColor !== next.slide.backgroundColor) {
-    return false;
-  }
-  if (prev.slide.backgroundImage !== next.slide.backgroundImage) {
-    return false;
-  }
-  if (prev.slide.backgroundGradient !== next.slide.backgroundGradient) {
+  if (prev.slide !== next.slide) {
     return false;
   }
   if (prev.templateElements !== next.templateElements) {
@@ -35646,6 +35595,7 @@ exports.PptxI18nProvider = PptxI18nProvider;
 exports.SlideCanvas = SlideCanvas;
 exports.SlideTemplateGalleryDialog = SlideTemplateGalleryDialog;
 exports.SlideTemplatePreview = SlideTemplatePreview;
+exports.SlideThumbnail = SlideThumbnail;
 exports.SlidesPaneSidebar = SlidesPaneSidebar;
 exports.Toolbar = Toolbar;
 exports.UserAvatarBar = UserAvatarBar;