@particle-academy/fancy-slides 0.5.1 → 0.6.1

package/dist/index.d.cts

@@ -106,7 +106,12 @@ interface SlideViewerProps {
     autoAdvanceMs?: number;
     /** Hide the bottom progress bar + slide counter. */
     hideChrome?: boolean;
-    /** Optional custom renderer for element types Slide doesn't render natively (chart/code/table/embed). */
+    /**
+     * Custom renderer for element types Slide doesn't render natively
+     * (chart/code/table/embed). Defaults to the built-in
+     * `defaultElementRegistry` so decks play fully out of the box; pass your
+     * own to override.
+     */
     renderElement?: (element: SlideElement, slideWidthPx: number) => ReactNode | undefined;
     /** Extra classes on the viewer wrapper. */
     className?: string;
@@ -176,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;
 
@@ -190,7 +205,14 @@ interface DeckEditorProps {
     /** Controlled selected slide id. Uncontrolled by default. */
     selectedSlideId?: string | null;
     onSelectedSlideChange?: (id: string | null) => void;
-    /** Optional renderer for chart / code / table / embed elements (the elements this package doesn't render natively). */
+    /**
+     * Renderer for chart / code / table / embed elements (the elements this
+     * package doesn't render natively). Defaults to the built-in
+     * `defaultElementRegistry` so the editor is full out of the box; pass your
+     * own to override (it wins entirely). The optional-peer hosts (chart/code)
+     * load fancy-echarts/fancy-code via guarded dynamic imports, so the base
+     * bundle never statically requires them.
+     */
     renderElement?: (element: SlideElement, slideWidthPx: number) => ReactNode | undefined;
     /** Hide the slide rail (e.g. for embedded use). */
     hideRail?: boolean;

package/dist/index.d.ts

@@ -106,7 +106,12 @@ interface SlideViewerProps {
     autoAdvanceMs?: number;
     /** Hide the bottom progress bar + slide counter. */
     hideChrome?: boolean;
-    /** Optional custom renderer for element types Slide doesn't render natively (chart/code/table/embed). */
+    /**
+     * Custom renderer for element types Slide doesn't render natively
+     * (chart/code/table/embed). Defaults to the built-in
+     * `defaultElementRegistry` so decks play fully out of the box; pass your
+     * own to override.
+     */
     renderElement?: (element: SlideElement, slideWidthPx: number) => ReactNode | undefined;
     /** Extra classes on the viewer wrapper. */
     className?: string;
@@ -176,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;
 
@@ -190,7 +205,14 @@ interface DeckEditorProps {
     /** Controlled selected slide id. Uncontrolled by default. */
     selectedSlideId?: string | null;
     onSelectedSlideChange?: (id: string | null) => void;
-    /** Optional renderer for chart / code / table / embed elements (the elements this package doesn't render natively). */
+    /**
+     * Renderer for chart / code / table / embed elements (the elements this
+     * package doesn't render natively). Defaults to the built-in
+     * `defaultElementRegistry` so the editor is full out of the box; pass your
+     * own to override (it wins entirely). The optional-peer hosts (chart/code)
+     * load fancy-echarts/fancy-code via guarded dynamic imports, so the base
+     * bundle never statically requires them.
+     */
     renderElement?: (element: SlideElement, slideWidthPx: number) => ReactNode | undefined;
     /** Hide the slide rail (e.g. for embedded use). */
     hideRail?: boolean;

package/dist/index.js

@@ -1,3 +1,4 @@
+import { defaultElementRegistry } from './chunk-YEJZYKVB.js';
 import { isDarkColor, SlideContext } from './chunk-WIUXPQAK.js';
 export { useIsDarkSlide, useSlideContext, useSlideTheme } from './chunk-WIUXPQAK.js';
 import { useId, useRef, useState, useEffect, useMemo, useCallback } from 'react';
@@ -916,7 +917,7 @@ function SlideViewer({
   onExit,
   autoAdvanceMs,
   hideChrome = false,
-  renderElement,
+  renderElement = defaultElementRegistry,
   className
 }) {
   const isControlled = controlledIndex !== void 0;
@@ -1406,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",
     {
@@ -1418,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 })
+        }
+      )
     }
   );
 }
@@ -2677,7 +2698,7 @@ function DeckEditor({
   onPresent,
   selectedSlideId: controlledSlideId,
   onSelectedSlideChange,
-  renderElement,
+  renderElement = defaultElementRegistry,
   hideRail = false,
   hideNotes = false,
   hideToolbar = false,