promptslide 0.2.4 → 0.2.6

package/src/core/slide-embed.tsx

@@ -0,0 +1,141 @@
+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 = () => {
+      setScale(window.innerWidth / SLIDE_DIMENSIONS.width)
+    }
+
+    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/index.mjs

@@ -31,6 +31,7 @@ function printHelp() {
   console.log(`    add ${dim("<name>")}     Install a slide/deck from the registry`)
   console.log(`    publish ${dim("[file]")} Publish a slide to the registry`)
   console.log(`    update ${dim("[name]")}  Check for and apply updates`)
+  console.log(`    pull            Pull the latest deck from the registry`)
   console.log(`    remove ${dim("<name>")}  Remove an installed item`)
   console.log(`    info ${dim("<name>")}    Show details about a registry item`)
   console.log(`    search ${dim("<query>")} Search the registry`)
@@ -99,6 +100,11 @@ switch (command) {
     await update(args)
     break
   }
+  case "pull": {
+    const { pull } = await import("./commands/pull.mjs")
+    await pull(args)
+    break
+  }
   case "search": {
     const { search } = await import("./commands/search.mjs")
     await search(args)

package/src/utils/auth.mjs

@@ -20,7 +20,8 @@ export function loadAuth() {
       registry: data.registry || DEFAULT_REGISTRY,
       token: data.token,
       organizationId: data.organizationId || null,
-      organizationName: data.organizationName || null
+      organizationName: data.organizationName || null,
+      organizationSlug: data.organizationSlug || null
     }
   } catch {
     return null
@@ -30,13 +31,14 @@ export function loadAuth() {
 /**
  * Save auth credentials to ~/.promptslide/auth.json.
  */
-export function saveAuth({ registry, token, organizationId, organizationName }) {
+export function saveAuth({ registry, token, organizationId, organizationName, organizationSlug }) {
   mkdirSync(AUTH_DIR, { recursive: true })
   const data = {
     registry: registry || DEFAULT_REGISTRY,
     token,
     organizationId: organizationId || null,
-    organizationName: organizationName || null
+    organizationName: organizationName || null,
+    organizationSlug: organizationSlug || null
   }
   writeFileSync(AUTH_FILE, JSON.stringify(data, null, 2) + "\n", { encoding: "utf-8", mode: 0o600 })
 }

package/src/utils/prompts.mjs

@@ -52,3 +52,73 @@ export function confirm(question, defaultYes = true) {
     })
   })
 }
+
+/**
+ * Arrow-key select prompt. Returns the index of the chosen option.
+ * @param {string[]} options - Display labels for each option
+ * @param {number} defaultIndex - Initially highlighted index
+ * @returns {Promise<number>}
+ */
+export function select(options, defaultIndex = 0) {
+  if (!process.stdin.isTTY) return Promise.resolve(defaultIndex)
+
+  // Pause readline so we can use raw mode
+  if (_rl) { _rl.pause() }
+
+  return new Promise(resolve => {
+    let cursor = defaultIndex
+    const { stdin, stdout } = process
+
+    const render = () => {
+      // Move up to overwrite previous render (except first time)
+      if (render._drawn) stdout.write(`\x1b[${options.length}A`)
+      for (let i = 0; i < options.length; i++) {
+        const prefix = i === cursor ? "  \x1b[36m❯\x1b[0m " : "    "
+        const label = i === cursor ? `\x1b[1m${options[i]}\x1b[0m` : dim(options[i])
+        stdout.write(`\x1b[2K${prefix}${label}\n`)
+      }
+      render._drawn = true
+    }
+
+    stdin.setRawMode(true)
+    stdin.resume()
+    render()
+
+    const onData = (buf) => {
+      const key = buf.toString()
+
+      // Ctrl+C
+      if (key === "\x03") {
+        stdin.setRawMode(false)
+        stdin.removeListener("data", onData)
+        if (_rl) { _rl.resume() }
+        process.exit(0)
+      }
+
+      // Up arrow or k
+      if (key === "\x1b[A" || key === "k") {
+        cursor = (cursor - 1 + options.length) % options.length
+        render()
+        return
+      }
+
+      // Down arrow or j
+      if (key === "\x1b[B" || key === "j") {
+        cursor = (cursor + 1) % options.length
+        render()
+        return
+      }
+
+      // Enter
+      if (key === "\r" || key === "\n") {
+        stdin.setRawMode(false)
+        stdin.removeListener("data", onData)
+        stdin.pause()
+        if (_rl) { _rl.resume() }
+        resolve(cursor)
+      }
+    }
+
+    stdin.on("data", onData)
+  })
+}

package/src/utils/registry.mjs

@@ -79,6 +79,18 @@ export function updateLockfileItem(cwd, slug, version, files) {
   writeLockfile(cwd, lock)
 }
 
+/**
+ * Store publish configuration (deckPrefix, deckSlug) in the lockfile.
+ * @param {string} cwd
+ * @param {{ deckPrefix?: string, deckSlug?: string }} config
+ */
+export function updateLockfilePublishConfig(cwd, config) {
+  const lock = readLockfile(cwd)
+  if (config.deckPrefix !== undefined) lock.deckPrefix = config.deckPrefix
+  if (config.deckSlug !== undefined) lock.deckSlug = config.deckSlug
+  writeLockfile(cwd, lock)
+}
+
 /**
  * Remove a single item from the lockfile.
  * @param {string} cwd

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 && (