promptslide 0.2.4 → 0.2.5

package/dist/index.d.ts

@@ -346,6 +346,44 @@ interface SlideFooterProps {
 }
 declare function SlideFooter({ slideNumber, totalSlides, variant }: SlideFooterProps): react_jsx_runtime.JSX.Element | null;
 
+interface SlideRendererProps {
+    slides: SlideConfig[];
+    currentSlide: number;
+    animationStep: number;
+    totalSteps: number;
+    direction: NavigationDirection;
+    showAllAnimations: boolean;
+    transition?: SlideTransitionType;
+    directionalTransition?: boolean;
+    onTransitionComplete: () => void;
+}
+/**
+ * Renders a single slide with animated transitions.
+ * Extracted from SlideDeck so it can be reused in SlideEmbed and other contexts.
+ */
+declare function SlideRenderer({ slides, currentSlide, animationStep, totalSteps, direction, showAllAnimations, transition, directionalTransition, onTransitionComplete }: SlideRendererProps): react_jsx_runtime.JSX.Element;
+
+interface SlideEmbedProps {
+    slides: SlideConfig[];
+    transition?: SlideTransitionType;
+    directionalTransition?: boolean;
+}
+/**
+ * Headless slide viewer controlled via window.postMessage.
+ * Designed for embedding in an iframe (e.g. the registry editor preview).
+ *
+ * Inbound messages (parent → embed):
+ *   { type: "navigate", data: { slide: number } }
+ *   { type: "advance" }
+ *   { type: "goBack" }
+ *
+ * Outbound messages (embed → parent):
+ *   { type: "slideReady" }
+ *   { type: "slideState", data: { currentSlide, totalSlides, animationStep, totalSteps, titles } }
+ *   { type: "hmrUpdate" }
+ */
+declare function SlideEmbed({ slides, transition, directionalTransition }: SlideEmbedProps): react_jsx_runtime.JSX.Element;
+
 interface SlideDeckProps {
     slides: SlideConfig[];
     transition?: SlideTransitionType;
@@ -374,4 +412,4 @@ declare class SlideErrorBoundary extends React$1.Component<SlideErrorBoundaryPro
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Animated, AnimatedGroup, AnimationProvider, type AnimationType, DEFAULT_SLIDE_TRANSITION, EASE_DEFAULT, EASE_IN, EASE_MORPH, EASE_OUT, ELEMENT_SLIDE_DISTANCE, MORPH_DURATION, MORPH_TRANSITION, Morph, MorphGroup, MorphItem, MorphText, type NavigationDirection, SLIDE_DIMENSIONS, SLIDE_DISTANCE, SLIDE_TRANSITION, SLIDE_TRANSITION_DURATION, SLIDE_VARIANTS, SPRING_BOUNCY, SPRING_SMOOTH, SPRING_SNAPPY, STAGGER_DELAY, STEP_ANIMATION_DURATION, STEP_TRANSITION, type SlideComponent, type SlideConfig, SlideDeck, SlideErrorBoundary, SlideFooter, type SlideProps, SlideThemeProvider, type SlideTransitionConfig, type SlideTransitionType, type ThemeConfig, type UseSlideNavigationOptions, type UseSlideNavigationReturn, cn, createDirectionalVariants, directionalSlideX, directionalSlideY, getSlideTransition, getSlideVariants, useAnimationContext, useSlideNavigation, useTheme };
+export { Animated, AnimatedGroup, AnimationProvider, type AnimationType, DEFAULT_SLIDE_TRANSITION, EASE_DEFAULT, EASE_IN, EASE_MORPH, EASE_OUT, ELEMENT_SLIDE_DISTANCE, MORPH_DURATION, MORPH_TRANSITION, Morph, MorphGroup, MorphItem, MorphText, type NavigationDirection, SLIDE_DIMENSIONS, SLIDE_DISTANCE, SLIDE_TRANSITION, SLIDE_TRANSITION_DURATION, SLIDE_VARIANTS, SPRING_BOUNCY, SPRING_SMOOTH, SPRING_SNAPPY, STAGGER_DELAY, STEP_ANIMATION_DURATION, STEP_TRANSITION, type SlideComponent, type SlideConfig, SlideDeck, SlideEmbed, SlideErrorBoundary, SlideFooter, type SlideProps, SlideRenderer, type SlideRendererProps, SlideThemeProvider, type SlideTransitionConfig, type SlideTransitionType, type ThemeConfig, type UseSlideNavigationOptions, type UseSlideNavigationReturn, cn, createDirectionalVariants, directionalSlideX, directionalSlideY, getSlideTransition, getSlideVariants, useAnimationContext, useSlideNavigation, useTheme };

package/dist/index.js

@@ -495,10 +495,8 @@ function SlideFooter({ slideNumber, totalSlides, variant = "default" }) {
   ] });
 }
 
-// src/core/slide-deck.tsx
-import { AnimatePresence, LayoutGroup, motion as motion3 } from "framer-motion";
-import { ChevronLeft, ChevronRight, Download, Grid3X3, List, Maximize, Monitor } from "lucide-react";
-import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+// src/core/slide-renderer.tsx
+import { AnimatePresence, motion as motion3 } from "framer-motion";
 
 // src/core/slide-error-boundary.tsx
 import React from "react";
@@ -538,6 +536,169 @@ var SlideErrorBoundary = class extends React.Component {
   }
 };
 
+// src/core/slide-renderer.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function SlideRenderer({
+  slides,
+  currentSlide,
+  animationStep,
+  totalSteps,
+  direction,
+  showAllAnimations,
+  transition,
+  directionalTransition,
+  onTransitionComplete
+}) {
+  const currentSlideTransition = slides[currentSlide]?.transition;
+  const transitionType = currentSlideTransition ?? transition ?? DEFAULT_SLIDE_TRANSITION;
+  const isDirectional = directionalTransition ?? false;
+  const slideVariants = getSlideVariants(
+    { type: transitionType, directional: isDirectional },
+    direction
+  );
+  const CurrentSlideComponent = slides[currentSlide].component;
+  return /* @__PURE__ */ jsx7(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx7(
+    motion3.div,
+    {
+      variants: slideVariants,
+      initial: "enter",
+      animate: "center",
+      exit: "exit",
+      transition: SLIDE_TRANSITION,
+      onAnimationComplete: (definition) => {
+        if (definition === "center") {
+          onTransitionComplete();
+        }
+      },
+      className: "absolute inset-0 h-full w-full",
+      children: /* @__PURE__ */ jsx7(
+        AnimationProvider,
+        {
+          currentStep: animationStep,
+          totalSteps,
+          showAllAnimations,
+          children: /* @__PURE__ */ jsx7(
+            SlideErrorBoundary,
+            {
+              slideIndex: currentSlide,
+              slideTitle: slides[currentSlide]?.title,
+              children: /* @__PURE__ */ jsx7(
+                CurrentSlideComponent,
+                {
+                  slideNumber: currentSlide + 1,
+                  totalSlides: slides.length
+                }
+              )
+            }
+          )
+        }
+      )
+    },
+    currentSlide
+  ) });
+}
+
+// src/core/slide-embed.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function SlideEmbed({ slides, transition, directionalTransition }) {
+  const [scale, setScale] = useState2(1);
+  const {
+    currentSlide,
+    animationStep,
+    totalSteps,
+    direction,
+    showAllAnimations,
+    advance,
+    goBack,
+    goToSlide,
+    onTransitionComplete
+  } = useSlideNavigation({ slides });
+  useEffect2(() => {
+    const state = {
+      currentSlide,
+      totalSlides: slides.length,
+      animationStep,
+      totalSteps,
+      titles: slides.map((s) => s.title || "")
+    };
+    window.parent.postMessage({ type: "slideState", data: state }, "*");
+  }, [currentSlide, animationStep, totalSteps, slides]);
+  useEffect2(() => {
+    window.parent.postMessage({ type: "slideReady" }, "*");
+  }, []);
+  useEffect2(() => {
+    const hot = import.meta.hot;
+    if (hot) {
+      hot.on("vite:afterUpdate", () => {
+        window.parent.postMessage({ type: "hmrUpdate" }, "*");
+      });
+    }
+  }, []);
+  const handleMessage = useCallback2(
+    (event) => {
+      const { type, data } = event.data || {};
+      switch (type) {
+        case "navigate":
+          if (typeof data?.slide === "number") goToSlide(data.slide);
+          break;
+        case "advance":
+          advance();
+          break;
+        case "goBack":
+          goBack();
+          break;
+      }
+    },
+    [advance, goBack, goToSlide]
+  );
+  useEffect2(() => {
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [handleMessage]);
+  useEffect2(() => {
+    const calculateScale = () => {
+      const scaleX = window.innerWidth / SLIDE_DIMENSIONS.width;
+      const scaleY = window.innerHeight / SLIDE_DIMENSIONS.height;
+      setScale(Math.min(scaleX, scaleY));
+    };
+    calculateScale();
+    window.addEventListener("resize", calculateScale);
+    return () => window.removeEventListener("resize", calculateScale);
+  }, []);
+  return /* @__PURE__ */ jsx8("div", { className: "flex h-screen w-screen items-center justify-center overflow-hidden bg-black", children: /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: "relative overflow-hidden bg-black",
+      style: {
+        width: SLIDE_DIMENSIONS.width,
+        height: SLIDE_DIMENSIONS.height,
+        transform: `scale(${scale})`,
+        transformOrigin: "center center"
+      },
+      children: /* @__PURE__ */ jsx8(
+        SlideRenderer,
+        {
+          slides,
+          currentSlide,
+          animationStep,
+          totalSteps,
+          direction,
+          showAllAnimations,
+          transition,
+          directionalTransition,
+          onTransitionComplete
+        }
+      )
+    }
+  ) });
+}
+
+// src/core/slide-deck.tsx
+import { LayoutGroup } from "framer-motion";
+import { ChevronLeft, ChevronRight, Download, Grid3X3, List, Maximize, Monitor } from "lucide-react";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef, useState as useState3 } from "react";
+
 // src/core/utils.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -546,16 +707,16 @@ function cn(...inputs) {
 }
 
 // src/core/slide-deck.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 function SlideExportView({ slides, slideIndex }) {
-  const [ready, setReady] = useState2(false);
+  const [ready, setReady] = useState3(false);
   const clampedIndex = Math.max(0, Math.min(slideIndex, slides.length - 1));
   const slideConfig = slides[clampedIndex];
   const SlideComponent = slideConfig.component;
-  useEffect2(() => {
+  useEffect3(() => {
     setReady(true);
   }, []);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       "data-export-ready": ready ? "true" : void 0,
@@ -566,31 +727,31 @@ function SlideExportView({ slides, slideIndex }) {
         position: "relative",
         background: "black"
       },
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx9(
         AnimationProvider,
         {
           currentStep: slideConfig.steps,
           totalSteps: slideConfig.steps,
           showAllAnimations: true,
-          children: /* @__PURE__ */ jsx7(SlideErrorBoundary, { slideIndex: clampedIndex, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx7(SlideComponent, { slideNumber: clampedIndex + 1, totalSlides: slides.length }) })
+          children: /* @__PURE__ */ jsx9(SlideErrorBoundary, { slideIndex: clampedIndex, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx9(SlideComponent, { slideNumber: clampedIndex + 1, totalSlides: slides.length }) })
         }
       )
     }
   );
 }
 function SlideDeck({ slides, transition, directionalTransition }) {
-  const [exportParams] = useState2(() => {
+  const [exportParams] = useState3(() => {
     if (typeof window === "undefined") return null;
     const params = new URLSearchParams(window.location.search);
     if (params.get("export") !== "true") return null;
     return { slideIndex: parseInt(params.get("slide") || "0", 10) };
   });
   if (exportParams) {
-    return /* @__PURE__ */ jsx7(SlideExportView, { slides, slideIndex: exportParams.slideIndex });
+    return /* @__PURE__ */ jsx9(SlideExportView, { slides, slideIndex: exportParams.slideIndex });
   }
-  const [viewMode, setViewMode] = useState2("slide");
-  const [isPresentationMode, setIsPresentationMode] = useState2(false);
-  const [scale, setScale] = useState2(1);
+  const [viewMode, setViewMode] = useState3("slide");
+  const [isPresentationMode, setIsPresentationMode] = useState3(false);
+  const [scale, setScale] = useState3(1);
   const containerRef = useRef(null);
   const {
     currentSlide,
@@ -605,21 +766,21 @@ function SlideDeck({ slides, transition, directionalTransition }) {
   } = useSlideNavigation({
     slides
   });
-  const togglePresentationMode = useCallback2(async () => {
+  const togglePresentationMode = useCallback3(async () => {
     if (!document.fullscreenElement) {
       await document.documentElement.requestFullscreen();
     } else {
       await document.exitFullscreen();
     }
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     const handleFullscreenChange = () => {
       setIsPresentationMode(!!document.fullscreenElement);
     };
     document.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     const calculateScale = () => {
       if (!isPresentationMode) {
         setScale(1);
@@ -647,7 +808,7 @@ function SlideDeck({ slides, transition, directionalTransition }) {
       window.print();
     }, 100);
   };
-  useEffect2(() => {
+  useEffect3(() => {
     const handleKeyDown = (e) => {
       if (e.key === "f" || e.key === "F") {
         togglePresentationMode();
@@ -669,16 +830,8 @@ function SlideDeck({ slides, transition, directionalTransition }) {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [advance, goBack, viewMode, togglePresentationMode]);
-  const currentSlideTransition = slides[currentSlide]?.transition;
-  const transitionType = currentSlideTransition ?? transition ?? DEFAULT_SLIDE_TRANSITION;
-  const isDirectional = directionalTransition ?? false;
-  const slideVariants = getSlideVariants(
-    { type: transitionType, directional: isDirectional },
-    direction
-  );
-  const CurrentSlideComponent = slides[currentSlide].component;
   return /* @__PURE__ */ jsxs3("div", { className: "min-h-screen w-full bg-neutral-950 text-foreground", children: [
-    /* @__PURE__ */ jsx7("style", { children: `
+    /* @__PURE__ */ jsx9("style", { children: `
         @media print {
           @page {
             size: 1920px 1080px;
@@ -707,7 +860,7 @@ function SlideDeck({ slides, transition, directionalTransition }) {
           isPresentationMode && "hidden"
         ),
         children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx9(
             "button",
             {
               onClick: () => setViewMode("slide"),
@@ -716,10 +869,10 @@ function SlideDeck({ slides, transition, directionalTransition }) {
                 viewMode === "slide" && "bg-neutral-800 text-white"
               ),
               title: "Presentation View",
-              children: /* @__PURE__ */ jsx7(Monitor, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx9(Monitor, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx9(
             "button",
             {
               onClick: () => setViewMode("list"),
@@ -728,10 +881,10 @@ function SlideDeck({ slides, transition, directionalTransition }) {
                 viewMode === "list" && "bg-neutral-800 text-white"
               ),
               title: "List View",
-              children: /* @__PURE__ */ jsx7(List, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx9(List, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx9(
             "button",
             {
               onClick: () => setViewMode("grid"),
@@ -740,26 +893,26 @@ function SlideDeck({ slides, transition, directionalTransition }) {
                 viewMode === "grid" && "bg-neutral-800 text-white"
               ),
               title: "Grid View",
-              children: /* @__PURE__ */ jsx7(Grid3X3, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx9(Grid3X3, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsx7("div", { className: "mx-1 w-px bg-neutral-800" }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx9("div", { className: "mx-1 w-px bg-neutral-800" }),
+          /* @__PURE__ */ jsx9(
             "button",
             {
               onClick: handleExportPdf,
               className: "rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white",
               title: "Download PDF",
-              children: /* @__PURE__ */ jsx7(Download, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx9(Download, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx9(
             "button",
             {
               onClick: togglePresentationMode,
               className: "rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white",
               title: "Present (F)",
-              children: /* @__PURE__ */ jsx7(Maximize, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx9(Maximize, { className: "h-4 w-4" })
             }
           )
         ]
@@ -780,7 +933,7 @@ function SlideDeck({ slides, transition, directionalTransition }) {
           if (e.key === "Enter" || e.key === " ") advance();
         } : void 0,
         children: [
-          /* @__PURE__ */ jsx7(LayoutGroup, { id: "slide-deck", children: isPresentationMode ? /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx9(LayoutGroup, { id: "slide-deck", children: isPresentationMode ? /* @__PURE__ */ jsx9(
             "div",
             {
               className: "pointer-events-none relative overflow-hidden bg-black",
@@ -790,92 +943,42 @@ function SlideDeck({ slides, transition, directionalTransition }) {
                 transform: `scale(${scale})`,
                 transformOrigin: "center center"
               },
-              children: /* @__PURE__ */ jsx7(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx7(
-                motion3.div,
-                {
-                  variants: slideVariants,
-                  initial: "enter",
-                  animate: "center",
-                  exit: "exit",
-                  transition: SLIDE_TRANSITION,
-                  onAnimationComplete: (definition) => {
-                    if (definition === "center") {
-                      onTransitionComplete();
-                    }
-                  },
-                  className: "absolute inset-0 h-full w-full",
-                  children: /* @__PURE__ */ jsx7(
-                    AnimationProvider,
-                    {
-                      currentStep: animationStep,
-                      totalSteps,
-                      showAllAnimations,
-                      children: /* @__PURE__ */ jsx7(
-                        SlideErrorBoundary,
-                        {
-                          slideIndex: currentSlide,
-                          slideTitle: slides[currentSlide]?.title,
-                          children: /* @__PURE__ */ jsx7(
-                            CurrentSlideComponent,
-                            {
-                              slideNumber: currentSlide + 1,
-                              totalSlides: slides.length
-                            }
-                          )
-                        }
-                      )
-                    }
-                  )
-                },
-                currentSlide
-              ) })
-            }
-          ) : /* @__PURE__ */ jsx7("div", { className: "relative aspect-video w-full max-w-7xl overflow-hidden rounded-xl border border-neutral-800 bg-black shadow-2xl", children: /* @__PURE__ */ jsx7(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx7(
-            motion3.div,
-            {
-              variants: slideVariants,
-              initial: "enter",
-              animate: "center",
-              exit: "exit",
-              transition: SLIDE_TRANSITION,
-              onAnimationComplete: (definition) => {
-                if (definition === "center") {
-                  onTransitionComplete();
-                }
-              },
-              className: "absolute inset-0 h-full w-full",
-              children: /* @__PURE__ */ jsx7(
-                AnimationProvider,
+              children: /* @__PURE__ */ jsx9(
+                SlideRenderer,
                 {
-                  currentStep: animationStep,
+                  slides,
+                  currentSlide,
+                  animationStep,
                   totalSteps,
+                  direction,
                   showAllAnimations,
-                  children: /* @__PURE__ */ jsx7(
-                    SlideErrorBoundary,
-                    {
-                      slideIndex: currentSlide,
-                      slideTitle: slides[currentSlide]?.title,
-                      children: /* @__PURE__ */ jsx7(
-                        CurrentSlideComponent,
-                        {
-                          slideNumber: currentSlide + 1,
-                          totalSlides: slides.length
-                        }
-                      )
-                    }
-                  )
+                  transition,
+                  directionalTransition,
+                  onTransitionComplete
                 }
               )
-            },
-            currentSlide
-          ) }) }) }),
+            }
+          ) : /* @__PURE__ */ jsx9("div", { className: "relative aspect-video w-full max-w-7xl overflow-hidden rounded-xl border border-neutral-800 bg-black shadow-2xl", children: /* @__PURE__ */ jsx9(
+            SlideRenderer,
+            {
+              slides,
+              currentSlide,
+              animationStep,
+              totalSteps,
+              direction,
+              showAllAnimations,
+              transition,
+              directionalTransition,
+              onTransitionComplete
+            }
+          ) }) }),
           !isPresentationMode && /* @__PURE__ */ jsxs3("div", { className: "mt-6 flex items-center gap-4", children: [
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 onClick: goBack,
                 className: "rounded-full border border-neutral-800 bg-black/50 p-2 text-neutral-400 backdrop-blur-sm transition-colors hover:bg-neutral-900 hover:text-white",
-                children: /* @__PURE__ */ jsx7(ChevronLeft, { className: "h-5 w-5" })
+                children: /* @__PURE__ */ jsx9(ChevronLeft, { className: "h-5 w-5" })
               }
             ),
             /* @__PURE__ */ jsxs3("div", { className: "flex min-w-[4rem] flex-col items-center", children: [
@@ -884,26 +987,26 @@ function SlideDeck({ slides, transition, directionalTransition }) {
                 " / ",
                 slides.length
               ] }),
-              slides[currentSlide]?.title && /* @__PURE__ */ jsx7("span", { className: "mt-0.5 text-xs text-neutral-600", children: slides[currentSlide].title })
+              slides[currentSlide]?.title && /* @__PURE__ */ jsx9("span", { className: "mt-0.5 text-xs text-neutral-600", children: slides[currentSlide].title })
             ] }),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 onClick: advance,
                 className: "rounded-full border border-neutral-800 bg-black/50 p-2 text-neutral-400 backdrop-blur-sm transition-colors hover:bg-neutral-900 hover:text-white",
-                children: /* @__PURE__ */ jsx7(ChevronRight, { className: "h-5 w-5" })
+                children: /* @__PURE__ */ jsx9(ChevronRight, { className: "h-5 w-5" })
               }
             )
           ] })
         ]
       }
     ),
-    viewMode === "grid" && /* @__PURE__ */ jsx7("div", { className: "mx-auto max-w-7xl p-8 pt-16 print:hidden", children: /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4", children: slides.map((slideConfig, index) => {
+    viewMode === "grid" && /* @__PURE__ */ jsx9("div", { className: "mx-auto max-w-7xl p-8 pt-16 print:hidden", children: /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4", children: slides.map((slideConfig, index) => {
       const SlideComponent = slideConfig.component;
       const prevSection = index > 0 ? slides[index - 1]?.section : void 0;
       const showSectionHeader = slideConfig.section && slideConfig.section !== prevSection;
       return /* @__PURE__ */ jsxs3("div", { className: showSectionHeader ? "col-span-full" : void 0, children: [
-        showSectionHeader && /* @__PURE__ */ jsx7("h3", { className: "mt-4 mb-3 text-xs font-bold tracking-[0.2em] text-neutral-500 uppercase first:mt-0", children: slideConfig.section }),
+        showSectionHeader && /* @__PURE__ */ jsx9("h3", { className: "mt-4 mb-3 text-xs font-bold tracking-[0.2em] text-neutral-500 uppercase first:mt-0", children: slideConfig.section }),
         /* @__PURE__ */ jsxs3(
           "button",
           {
@@ -913,22 +1016,30 @@ function SlideDeck({ slides, transition, directionalTransition }) {
             },
             className: "group relative aspect-video w-full overflow-hidden rounded-lg border border-neutral-800 bg-black shadow-sm transition-all hover:border-primary hover:shadow-lg hover:shadow-primary/10",
             children: [
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx9(
                 "div",
                 {
                   className: "h-full w-full origin-top-left scale-[0.25]",
                   style: { width: "400%", height: "400%" },
-                  children: /* @__PURE__ */ jsx7(SlideErrorBoundary, { slideIndex: index, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx7(SlideComponent, { slideNumber: index + 1, totalSlides: slides.length }) })
+                  children: /* @__PURE__ */ jsx9(
+                    AnimationProvider,
+                    {
+                      currentStep: slideConfig.steps,
+                      totalSteps: slideConfig.steps,
+                      showAllAnimations: true,
+                      children: /* @__PURE__ */ jsx9(SlideErrorBoundary, { slideIndex: index, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx9(SlideComponent, { slideNumber: index + 1, totalSlides: slides.length }) })
+                    }
+                  )
                 }
               ),
-              /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" }),
-              /* @__PURE__ */ jsx7("div", { className: "absolute bottom-2 left-2 rounded bg-black/70 px-2 py-1 text-xs font-medium text-white", children: slideConfig.title ? `${index + 1}. ${slideConfig.title}` : index + 1 })
+              /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" }),
+              /* @__PURE__ */ jsx9("div", { className: "absolute bottom-2 left-2 rounded bg-black/70 px-2 py-1 text-xs font-medium text-white", children: slideConfig.title ? `${index + 1}. ${slideConfig.title}` : index + 1 })
             ]
           }
         )
       ] }, index);
     }) }) }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9(
       "div",
       {
         className: cn(
@@ -936,19 +1047,19 @@ function SlideDeck({ slides, transition, directionalTransition }) {
           "print:m-0 print:block print:max-w-none print:p-0",
           viewMode === "list" ? "block" : "hidden print:block"
         ),
-        children: /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-1 gap-8 print:block", children: slides.map((slideConfig, index) => {
+        children: /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-1 gap-8 print:block", children: slides.map((slideConfig, index) => {
           const SlideComponent = slideConfig.component;
-          return /* @__PURE__ */ jsx7(
+          return /* @__PURE__ */ jsx9(
             "div",
             {
               className: "aspect-video w-full overflow-hidden rounded-xl border border-neutral-800 bg-black shadow-sm print:relative print:m-0 print:h-[1080px] print:w-[1920px] print:break-after-page print:overflow-hidden print:rounded-none print:border-0 print:shadow-none",
-              children: /* @__PURE__ */ jsx7("div", { className: "h-full w-full print:h-[720px] print:w-[1280px] print:origin-top-left print:scale-[1.5]", children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx9("div", { className: "h-full w-full print:h-[720px] print:w-[1280px] print:origin-top-left print:scale-[1.5]", children: /* @__PURE__ */ jsx9(
                 AnimationProvider,
                 {
                   currentStep: slideConfig.steps,
                   totalSteps: slideConfig.steps,
                   showAllAnimations: true,
-                  children: /* @__PURE__ */ jsx7(SlideErrorBoundary, { slideIndex: index, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx7(SlideComponent, { slideNumber: index + 1, totalSlides: slides.length }) })
+                  children: /* @__PURE__ */ jsx9(SlideErrorBoundary, { slideIndex: index, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx9(SlideComponent, { slideNumber: index + 1, totalSlides: slides.length }) })
                 }
               ) })
             },
@@ -987,8 +1098,10 @@ export {
   STEP_ANIMATION_DURATION,
   STEP_TRANSITION,
   SlideDeck,
+  SlideEmbed,
   SlideErrorBoundary,
   SlideFooter,
+  SlideRenderer,
   SlideThemeProvider,
   cn,
   createDirectionalVariants,