promptslide 0.2.3 → 0.2.5

package/src/core/slide-embed.tsx

@@ -0,0 +1,143 @@
+import { useCallback, useEffect, useState } from "react"
+
+import type { SlideTransitionType } from "./transitions"
+import type { SlideConfig } from "./types"
+
+import { SLIDE_DIMENSIONS } from "./animation-config"
+import { SlideRenderer } from "./slide-renderer"
+import { useSlideNavigation } from "./use-slide-navigation"
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface SlideEmbedProps {
+  slides: SlideConfig[]
+  transition?: SlideTransitionType
+  directionalTransition?: boolean
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+/**
+ * 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" }
+ */
+export function SlideEmbed({ slides, transition, directionalTransition }: SlideEmbedProps) {
+  const [scale, setScale] = useState(1)
+
+  const {
+    currentSlide,
+    animationStep,
+    totalSteps,
+    direction,
+    showAllAnimations,
+    advance,
+    goBack,
+    goToSlide,
+    onTransitionComplete
+  } = useSlideNavigation({ slides })
+
+  // Post slide state to parent whenever it changes
+  useEffect(() => {
+    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])
+
+  // Signal readiness on mount
+  useEffect(() => {
+    window.parent.postMessage({ type: "slideReady" }, "*")
+  }, [])
+
+  // Listen for Vite HMR updates
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const hot = (import.meta as any).hot as { on: (event: string, cb: () => void) => void } | undefined
+    if (hot) {
+      hot.on("vite:afterUpdate", () => {
+        window.parent.postMessage({ type: "hmrUpdate" }, "*")
+      })
+    }
+  }, [])
+
+  // Listen for inbound messages from parent
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      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]
+  )
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage)
+    return () => window.removeEventListener("message", handleMessage)
+  }, [handleMessage])
+
+  // Scale to fill viewport
+  useEffect(() => {
+    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 (
+    <div className="flex h-screen w-screen items-center justify-center overflow-hidden bg-black">
+      <div
+        className="relative overflow-hidden bg-black"
+        style={{
+          width: SLIDE_DIMENSIONS.width,
+          height: SLIDE_DIMENSIONS.height,
+          transform: `scale(${scale})`,
+          transformOrigin: "center center"
+        }}
+      >
+        <SlideRenderer
+          slides={slides}
+          currentSlide={currentSlide}
+          animationStep={animationStep}
+          totalSteps={totalSteps}
+          direction={direction}
+          showAllAnimations={showAllAnimations}
+          transition={transition}
+          directionalTransition={directionalTransition}
+          onTransitionComplete={onTransitionComplete}
+        />
+      </div>
+    </div>
+  )
+}

package/src/core/slide-renderer.tsx

@@ -0,0 +1,91 @@
+import { AnimatePresence, motion } from "framer-motion"
+
+import type { SlideTransitionType } from "./transitions"
+import type { NavigationDirection, SlideConfig } from "./types"
+
+import { SLIDE_TRANSITION } from "./animation-config"
+import { AnimationProvider } from "./animation-context"
+import { SlideErrorBoundary } from "./slide-error-boundary"
+import { DEFAULT_SLIDE_TRANSITION, getSlideVariants } from "./transitions"
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface SlideRendererProps {
+  slides: SlideConfig[]
+  currentSlide: number
+  animationStep: number
+  totalSteps: number
+  direction: NavigationDirection
+  showAllAnimations: boolean
+  transition?: SlideTransitionType
+  directionalTransition?: boolean
+  onTransitionComplete: () => void
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+/**
+ * Renders a single slide with animated transitions.
+ * Extracted from SlideDeck so it can be reused in SlideEmbed and other contexts.
+ */
+export function SlideRenderer({
+  slides,
+  currentSlide,
+  animationStep,
+  totalSteps,
+  direction,
+  showAllAnimations,
+  transition,
+  directionalTransition,
+  onTransitionComplete
+}: SlideRendererProps) {
+  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 (
+    <AnimatePresence initial={false}>
+      <motion.div
+        key={currentSlide}
+        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"
+      >
+        <AnimationProvider
+          currentStep={animationStep}
+          totalSteps={totalSteps}
+          showAllAnimations={showAllAnimations}
+        >
+          <SlideErrorBoundary
+            slideIndex={currentSlide}
+            slideTitle={slides[currentSlide]?.title}
+          >
+            <CurrentSlideComponent
+              slideNumber={currentSlide + 1}
+              totalSlides={slides.length}
+            />
+          </SlideErrorBoundary>
+        </AnimationProvider>
+      </motion.div>
+    </AnimatePresence>
+  )
+}

package/src/vite/plugin.mjs

@@ -2,6 +2,8 @@ const VIRTUAL_ENTRY_ID = "virtual:promptslide-entry"
 const RESOLVED_VIRTUAL_ENTRY_ID = "\0" + VIRTUAL_ENTRY_ID
 const VIRTUAL_EXPORT_ID = "virtual:promptslide-export"
 const RESOLVED_VIRTUAL_EXPORT_ID = "\0" + VIRTUAL_EXPORT_ID
+const VIRTUAL_EMBED_ID = "virtual:promptslide-embed"
+const RESOLVED_VIRTUAL_EMBED_ID = "\0" + VIRTUAL_EMBED_ID
 
 function getHtmlTemplate() {
   return `<!doctype html>
@@ -89,6 +91,45 @@ createRoot(document.getElementById("root")).render(
 `
 }
 
+function getEmbedHtmlTemplate() {
+  return `<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PromptSlide Embed</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/@id/${VIRTUAL_EMBED_ID}"></script>
+  </body>
+</html>`
+}
+
+function getEmbedEntryModule(root) {
+  return `
+import { StrictMode, createElement } from "react"
+import { createRoot } from "react-dom/client"
+import { SlideEmbed, SlideThemeProvider } from "promptslide"
+import "${root}/src/globals.css"
+import { slides } from "${root}/src/deck-config"
+
+let theme = {}
+try {
+  const themeMod = await import("${root}/src/theme")
+  theme = themeMod.theme || themeMod.default || {}
+} catch {}
+
+createRoot(document.getElementById("root")).render(
+  createElement(StrictMode, null,
+    createElement(SlideThemeProvider, { theme },
+      createElement(SlideEmbed, { slides })
+    )
+  )
+)
+`
+}
+
 export function promptslidePlugin({ root: initialRoot } = {}) {
   let root = initialRoot
   let exportSlidePath = null
@@ -104,14 +145,27 @@ export function promptslidePlugin({ root: initialRoot } = {}) {
     resolveId(id) {
       if (id === VIRTUAL_ENTRY_ID) return RESOLVED_VIRTUAL_ENTRY_ID
       if (id === VIRTUAL_EXPORT_ID) return RESOLVED_VIRTUAL_EXPORT_ID
+      if (id === VIRTUAL_EMBED_ID) return RESOLVED_VIRTUAL_EMBED_ID
     },
 
     load(id) {
       if (id === RESOLVED_VIRTUAL_ENTRY_ID) return getEntryModule(root)
       if (id === RESOLVED_VIRTUAL_EXPORT_ID) return getExportEntryModule(root, exportSlidePath || "src/slides/slide-title.tsx")
+      if (id === RESOLVED_VIRTUAL_EMBED_ID) return getEmbedEntryModule(root)
     },
 
     configureServer(server) {
+      // Pre-middleware: serve /embed route
+      server.middlewares.use(async (req, res, next) => {
+        const url = new URL(req.url, "http://localhost")
+        if (url.pathname !== "/embed" && url.pathname !== "/embed/") return next()
+
+        const html = await server.transformIndexHtml("/embed", getEmbedHtmlTemplate())
+        res.setHeader("Content-Type", "text/html")
+        res.statusCode = 200
+        res.end(html)
+      })
+
       // Pre-middleware: intercept export URLs before Vite's SPA fallback rewrites them
       server.middlewares.use(async (req, res, next) => {
         const url = new URL(req.url, "http://localhost")

package/templates/default/package.json

@@ -9,7 +9,7 @@
     "preview": "promptslide preview"
   },
   "dependencies": {
-    "promptslide": "^0.2.0",
+    "promptslide": "{{PROMPTSLIDE_VERSION}}",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.22",
     "lucide-react": "^0.552.0",

package/templates/default/src/layouts/slide-layout-centered.tsx

@@ -48,7 +48,7 @@ export function SlideLayoutCentered({
       )}
 
       {/* Content Area */}
-      <div className="min-h-0 w-full flex-1 overflow-hidden pt-2">{children}</div>
+      <div className="flex min-h-0 w-full flex-1 flex-col justify-center overflow-hidden">{children}</div>
 
       {/* Footer */}
       {!hideFooter && (