@particle-academy/fancy-slides 0.6.0 → 0.6.1

package/dist/index.d.cts

@@ -181,6 +181,16 @@ interface SlideThumbnailProps {
  * presenter view, and anywhere else a deck wants to show its slides as
  * thumbnails. Re-uses the shared <Slide> so the layout matches the viewer
  * exactly — no second rendering path.
+ *
+ * The slide is rendered at its full DESIGN width and the whole thing is
+ * CSS-`scale()`d down to the thumbnail size (the same approach fancy-artboard
+ * uses for its piece previews). Scaling the rendered output — rather than
+ * rendering the slide *at* the thumbnail width — is what makes heavy embedded
+ * surfaces (ECharts charts, the fancy-code editor) shrink proportionally:
+ * those render at fixed internal font sizes that ignore `slideWidthPx`, so a
+ * directly-undersized render leaves them oversized in the thumb. A uniform
+ * transform shrinks everything identically, so the thumb is a faithful
+ * miniature of the live slide.
  */
 declare function SlideThumbnail({ slide, theme, width, active, onClick, onContextMenu, renderElement, className, style, }: SlideThumbnailProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -181,6 +181,16 @@ interface SlideThumbnailProps {
  * presenter view, and anywhere else a deck wants to show its slides as
  * thumbnails. Re-uses the shared <Slide> so the layout matches the viewer
  * exactly — no second rendering path.
+ *
+ * The slide is rendered at its full DESIGN width and the whole thing is
+ * CSS-`scale()`d down to the thumbnail size (the same approach fancy-artboard
+ * uses for its piece previews). Scaling the rendered output — rather than
+ * rendering the slide *at* the thumbnail width — is what makes heavy embedded
+ * surfaces (ECharts charts, the fancy-code editor) shrink proportionally:
+ * those render at fixed internal font sizes that ignore `slideWidthPx`, so a
+ * directly-undersized render leaves them oversized in the thumb. A uniform
+ * transform shrinks everything identically, so the thumb is a faithful
+ * miniature of the live slide.
  */
 declare function SlideThumbnail({ slide, theme, width, active, onClick, onContextMenu, renderElement, className, style, }: SlideThumbnailProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -1407,6 +1407,11 @@ function SlideThumbnail({
   className,
   style
 }) {
+  const resolved = resolveTheme(theme);
+  const ratio = resolved.aspectRatio ?? 16 / 9;
+  const designWidth = resolved.slideWidth ?? 1280;
+  const scale = width / designWidth;
+  const height = width / ratio;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1419,12 +1424,27 @@ function SlideThumbnail({
         boxShadow: active ? "0 0 0 3px rgba(139, 92, 246, 0.2)" : "0 1px 2px rgba(0,0,0,0.05)",
         background: "#ffffff",
         width,
+        height,
         ...style
       },
       onClick,
       onContextMenu,
       "data-fancy-slides-thumbnail": slide.id,
-      children: /* @__PURE__ */ jsx(Slide, { slide, theme, width, renderElement })
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: designWidth,
+            height: designWidth / ratio,
+            transform: `scale(${scale})`,
+            transformOrigin: "top left",
+            // The thumb owns interaction — charts/code/iframes inside the
+            // scaled slide shouldn't capture clicks.
+            pointerEvents: "none"
+          },
+          children: /* @__PURE__ */ jsx(Slide, { slide, theme, width: designWidth, renderElement })
+        }
+      )
     }
   );
 }