promptslide 0.2.4 → 0.2.6

package/src/commands/publish.mjs

@@ -4,11 +4,16 @@ import { join, basename, relative, extname } from "node:path"
 import { bold, green, cyan, red, dim } from "../utils/ansi.mjs"
 import { requireAuth } from "../utils/auth.mjs"
 import { captureSlideAsDataUri, isPlaywrightAvailable } from "../utils/export.mjs"
-import { publishToRegistry, registryItemExists, searchRegistry, updateLockfileItem, readLockfile, hashContent, detectPackageManager, requestUploadTokens, uploadBinaryToBlob, assetFileToSlug, detectAssetDepsInContent } from "../utils/registry.mjs"
-import { prompt, confirm, closePrompts } from "../utils/prompts.mjs"
+import { publishToRegistry, registryItemExists, searchRegistry, updateLockfileItem, updateLockfilePublishConfig, readLockfile, hashContent, detectPackageManager, requestUploadTokens, uploadBinaryToBlob, assetFileToSlug, detectAssetDepsInContent } from "../utils/registry.mjs"
+import { prompt, confirm, select, closePrompts } from "../utils/prompts.mjs"
 import { parseDeckConfig } from "../utils/deck-config.mjs"
 
 function readDeckPrefix(cwd) {
+  // Prefer stored prefix from lockfile (user's previous choice)
+  const lock = readLockfile(cwd)
+  if (lock.deckPrefix) return lock.deckPrefix
+
+  // Fall back to package.json name
   try {
     const pkg = JSON.parse(readFileSync(join(cwd, "package.json"), "utf-8"))
     return (pkg.name || "").toLowerCase()
@@ -402,22 +407,17 @@ export async function publish(args) {
       process.exit(1)
     }
 
-    console.log(`  ${bold("Available files:")}`)
-    available.forEach((f, i) => {
-      console.log(`    ${dim(`${i + 1}.`)} ${f.target}${f.path}`)
-    })
-    console.log(`    ${dim("─".repeat(30))}`)
-    console.log(`    ${dim(`${available.length + 1}.`)} ${bold("Entire deck")}`)
+    console.log(`  ${bold("What do you want to publish?")}`)
     console.log()
 
-    const choice = await prompt("Select file number:", "1")
-    const idx = parseInt(choice, 10) - 1
+    const options = [
+      ...available.map(f => `${f.target}${f.path}`),
+      "Entire deck"
+    ]
+    const idx = await select(options, options.length - 1)
 
     if (idx === available.length) {
       typeOverride = "deck"
-    } else if (idx < 0 || idx >= available.length) {
-      console.error(`  ${red("Error:")} Invalid selection.`)
-      process.exit(1)
     } else {
       filePath = relative(cwd, available[idx].fullPath)
     }
@@ -432,10 +432,34 @@ export async function publish(args) {
       process.exit(1)
     }
 
-    const deckPrefix = await promptDeckPrefix(cwd, true)
-    const dirName = basename(cwd)
-    const deckBaseSlug = dirName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")
-    const deckSlug = `${deckPrefix}/${deckBaseSlug}`
+    // Check if a deck slug already exists in the lockfile
+    const existingLock = readLockfile(cwd)
+    const existingSlug = existingLock.deckSlug
+    let deckPrefix, deckSlug
+
+    if (existingSlug) {
+      console.log(`  ${dim("Previously published as")} ${cyan(existingSlug)}`)
+      console.log()
+      const reuse = await confirm(`  Publish to ${bold(existingSlug)}?`)
+
+      if (reuse) {
+        deckSlug = existingSlug
+        deckPrefix = existingSlug.split("/")[0]
+      } else {
+        deckPrefix = await promptDeckPrefix(cwd, true)
+        const dirName = basename(cwd)
+        const deckBaseSlug = dirName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")
+        deckSlug = `${deckPrefix}/${deckBaseSlug}`
+      }
+    } else {
+      deckPrefix = await promptDeckPrefix(cwd, true)
+      const dirName = basename(cwd)
+      const deckBaseSlug = dirName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")
+      deckSlug = `${deckPrefix}/${deckBaseSlug}`
+    }
+
+    // Persist prefix for next time (slug is saved after successful publish)
+    updateLockfilePublishConfig(cwd, { deckPrefix })
 
     // Walk public/ to collect assets and build reference set
     const publicDir = join(cwd, "public")
@@ -721,6 +745,7 @@ export async function publish(args) {
     const assetSlugs = publicAssets.map(a => assetFileToSlug(deckPrefix, a.relativePath))
     const allDeckDeps = [...slideSlugs, ...assetSlugs]
 
+    let deckItemId = null
     try {
       const result = await publishToRegistry({
         type: "deck",
@@ -736,6 +761,8 @@ export async function publish(args) {
       }, auth)
       console.log(`  [${itemIndex}/${totalItems}] ${green("✓")} deck ${cyan(deckSlug)} ${dim(`v${result.version}`)}`)
       updateLockfileItem(cwd, deckSlug, result.version ?? 0, {})
+      updateLockfilePublishConfig(cwd, { deckSlug })
+      deckItemId = result.id
       published++
     } catch (err) {
       console.log(`  [${itemIndex}/${totalItems}] ${red("✗")} deck ${dim(deckSlug)}: ${err.message}`)
@@ -744,6 +771,9 @@ export async function publish(args) {
 
     console.log()
     console.log(`  ${bold("Done:")} ${green(`${published} published`)}${skipped ? `, ${skipped} unchanged` : ""}${failed ? `, ${red(`${failed} failed`)}` : ""}`)
+    if (auth.organizationSlug && deckItemId) {
+      console.log(`  View: ${cyan(`${auth.registry}/${auth.organizationSlug}/items/${deckItemId}`)}`)
+    }
     console.log(`  Install: ${cyan(`promptslide add ${deckSlug}`)}`)
     console.log()
     closePrompts()
@@ -782,6 +812,10 @@ export async function publish(args) {
   // Prompt for deck prefix (required)
   const deckPrefix = await promptDeckPrefix(cwd, true)
   const slug = `${deckPrefix}/${baseSlug}`
+
+  // Persist prefix for next time
+  updateLockfilePublishConfig(cwd, { deckPrefix })
+
   console.log(`  Slug: ${cyan(slug)}`)
   console.log()
 
@@ -919,6 +953,9 @@ export async function publish(args) {
     const verTag = result.version ? ` v${result.version}` : ""
     console.log(`  ${green("✓")} Published ${bold(slug)}${verTag} to ${auth.organizationName || "registry"}`)
     console.log(`  Status: ${result.status || "published"}`)
+    if (auth.organizationSlug && result.id) {
+      console.log(`  View: ${cyan(`${auth.registry}/${auth.organizationSlug}/items/${result.id}`)}`)
+    }
     console.log(`  Install: ${cyan(`promptslide add ${slug}`)}`)
 
     // Track in lockfile

package/src/commands/pull.mjs

@@ -0,0 +1,228 @@
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from "node:fs"
+import { execFileSync } from "node:child_process"
+import { join, dirname, resolve, sep } from "node:path"
+
+import { bold, green, cyan, red, yellow, dim } from "../utils/ansi.mjs"
+import { requireAuth } from "../utils/auth.mjs"
+import {
+  fetchRegistryItem,
+  resolveRegistryDependencies,
+  detectPackageManager,
+  getInstallCommand,
+  readLockfile,
+  updateLockfileItem,
+  hashContent,
+  hashFile,
+  isFileDirty
+} from "../utils/registry.mjs"
+import {
+  toPascalCase,
+  addSlideToDeckConfig,
+  replaceDeckConfig
+} from "../utils/deck-config.mjs"
+import { confirm, closePrompts } from "../utils/prompts.mjs"
+
+export async function pull(args) {
+  const cwd = process.cwd()
+
+  console.log()
+  console.log(`  ${bold("promptslide")} ${dim("pull")}`)
+  console.log()
+
+  if (args[0] === "--help" || args[0] === "-h") {
+    console.log(`  ${bold("Usage:")} promptslide pull ${dim("[--force]")}`)
+    console.log()
+    console.log(`  Pull the latest version of your deck from the registry.`)
+    console.log(`  Reads the deck slug from the lockfile (set during publish).`)
+    console.log()
+    console.log(`  ${bold("Options:")}`)
+    console.log(`    --force    Overwrite locally modified files without prompting`)
+    console.log()
+    process.exit(0)
+  }
+
+  const force = args.includes("--force")
+  const auth = requireAuth()
+
+  // Read deckSlug from lockfile
+  const lock = readLockfile(cwd)
+  const deckSlug = lock.deckSlug
+
+  if (!deckSlug) {
+    console.error(`  ${red("Error:")} No deck slug found in lockfile.`)
+    console.error(`  ${dim("Run")} ${cyan("promptslide publish --type deck")} ${dim("first to set it.")}`)
+    console.log()
+    process.exit(1)
+  }
+
+  console.log(`  Pulling deck ${bold(deckSlug)}...`)
+  console.log()
+
+  // Fetch the deck manifest from the registry
+  let deckItem
+  try {
+    deckItem = await fetchRegistryItem(deckSlug, auth)
+  } catch (err) {
+    console.error(`  ${red("Error:")} ${err.message}`)
+    process.exit(1)
+  }
+
+  const versionTag = deckItem.version ? ` ${dim(`v${deckItem.version}`)}` : ""
+  console.log(`  Found ${bold(deckItem.title || deckItem.name)} ${dim(`(${deckItem.type})`)}${versionTag}`)
+
+  // Resolve all dependencies (slides, layouts, themes, assets)
+  let resolved
+  try {
+    resolved = await resolveRegistryDependencies(deckItem, auth, cwd)
+  } catch (err) {
+    console.error(`  ${red("Error resolving dependencies:")} ${err.message}`)
+    process.exit(1)
+  }
+
+  const itemCount = resolved.items.length
+  const fileCount = resolved.items.reduce((sum, i) => sum + (i.files?.length || 0), 0)
+  console.log(`  Resolved ${bold(String(itemCount))} items with ${bold(String(fileCount))} files`)
+  console.log()
+
+  // Write files
+  const written = []
+  const writtenByItem = new Map()
+
+  for (const regItem of resolved.items) {
+    if (!regItem.files?.length) continue
+
+    const fileHashes = {}
+
+    for (const file of regItem.files) {
+      const targetPath = resolve(cwd, file.target, file.path)
+      if (!targetPath.startsWith(cwd + sep)) {
+        console.log(`  ${red("Error:")} Invalid file path: ${file.target}${file.path}`)
+        continue
+      }
+      const targetDir = dirname(targetPath)
+      const relativePath = file.target + file.path
+      const newHash = hashContent(file.content)
+
+      if (existsSync(targetPath)) {
+        // Check if content is identical
+        const dataUriMatch = file.content.match(/^data:[^;]+;base64,/)
+        let identical
+        if (dataUriMatch) {
+          const newBuf = Buffer.from(file.content.slice(dataUriMatch[0].length), "base64")
+          const existingBuf = readFileSync(targetPath)
+          identical = newBuf.equals(existingBuf)
+        } else {
+          identical = hashFile(targetPath) === newHash
+        }
+
+        if (identical) {
+          fileHashes[relativePath] = newHash
+          continue
+        }
+
+        // Check if file has local modifications
+        const lockEntry = lock.items[regItem.name]
+        const storedHash = lockEntry?.files?.[relativePath]
+        if (!force) {
+          if (storedHash && isFileDirty(cwd, relativePath, storedHash)) {
+            // File was tracked and has been locally modified
+            const overwrite = await confirm(
+              `  ${yellow("!")} ${relativePath} has local changes. Overwrite?`,
+              false
+            )
+            if (!overwrite) {
+              fileHashes[relativePath] = storedHash
+              console.log(`  ${dim("Skipped")} ${relativePath}`)
+              continue
+            }
+          } else if (!storedHash) {
+            // File exists but not in lockfile (first pull or untracked)
+            const overwrite = await confirm(`  Overwrite ${relativePath}? ${dim("(local changes will be lost)")}`, false)
+            if (!overwrite) {
+              console.log(`  ${dim("Skipped")} ${relativePath}`)
+              continue
+            }
+          }
+        }
+      }
+
+      // Write the file
+      mkdirSync(targetDir, { recursive: true })
+      const dataUriPrefix = file.content.match(/^data:[^;]+;base64,/)
+      if (dataUriPrefix) {
+        writeFileSync(targetPath, Buffer.from(file.content.slice(dataUriPrefix[0].length), "base64"))
+      } else {
+        writeFileSync(targetPath, file.content, "utf-8")
+      }
+      fileHashes[relativePath] = newHash
+      written.push({ item: regItem, file })
+      console.log(`  ${green("+")} ${cyan(relativePath)}`)
+    }
+
+    if (Object.keys(fileHashes).length > 0) {
+      writtenByItem.set(regItem.name, { regItem, fileHashes })
+    }
+  }
+
+  // Update lockfile for all resolved items
+  for (const [name, { regItem, fileHashes }] of writtenByItem) {
+    updateLockfileItem(cwd, name, regItem.version ?? 0, fileHashes)
+  }
+
+  // Also update the deck manifest entry itself (has no files)
+  updateLockfileItem(cwd, deckSlug, deckItem.version ?? 0, {})
+
+  // Update deck-config.ts
+  if (deckItem.type === "deck" && deckItem.meta?.slides) {
+    const shouldReplace = await confirm("  Replace deck-config.ts with pulled deck config?", true)
+    if (shouldReplace) {
+      const slides = deckItem.meta.slides.map(s => ({
+        componentName: toPascalCase(s.slug),
+        importPath: `@/slides/${s.slug}`,
+        steps: s.steps,
+        section: s.section
+      }))
+      replaceDeckConfig(cwd, slides, {
+        transition: deckItem.meta.transition,
+        directionalTransition: deckItem.meta.directionalTransition
+      })
+      console.log(`  ${green("+")} Replaced ${cyan("deck-config.ts")} ${dim(`(${slides.length} slides)`)}`)
+    } else {
+      // Append individual slides
+      for (const s of deckItem.meta.slides) {
+        const componentName = toPascalCase(s.slug)
+        const importPath = `@/slides/${s.slug}`
+        const updated = addSlideToDeckConfig(cwd, { componentName, importPath, steps: s.steps, section: s.section })
+        if (updated) {
+          console.log(`  ${green("+")} Added ${componentName} to ${cyan("deck-config.ts")}`)
+        }
+      }
+    }
+  }
+
+  // Install npm dependencies
+  if (Object.keys(resolved.npmDeps).length > 0 && existsSync(join(cwd, "package.json"))) {
+    const pm = detectPackageManager(cwd)
+    const pkgList = Object.entries(resolved.npmDeps).map(([name, ver]) => `${name}@${ver}`)
+    const { cmd, args: installArgs, display } = getInstallCommand(pm, pkgList)
+    console.log()
+    console.log(`  ${dim(`Installing dependencies: ${display}`)}`)
+    try {
+      execFileSync(cmd, installArgs, { cwd, stdio: "inherit" })
+      console.log(`  ${green("+")} Dependencies installed`)
+    } catch {
+      console.log(`  ${red("!")} Dependency installation failed. Run manually:`)
+      console.log(`    ${display}`)
+    }
+  }
+
+  // Summary
+  console.log()
+  if (written.length === 0) {
+    console.log(`  ${green("+")} Everything is up to date.`)
+  } else {
+    console.log(`  ${green("+")} Pulled ${bold(String(written.length))} file(s) from ${bold(deckSlug)}`)
+  }
+  console.log()
+  closePrompts()
+}

package/src/commands/studio.mjs

@@ -8,6 +8,9 @@ export async function studio(args) {
   const cwd = process.cwd()
   const portArg = args.find(a => a.startsWith("--port="))
   const port = portArg ? parseInt(portArg.split("=")[1], 10) : 5173
+  const hasHost = args.includes("--host") || args.some(a => a.startsWith("--host="))
+  const hostArg = args.find(a => a.startsWith("--host="))
+  const host = hasHost ? (hostArg ? hostArg.split("=")[1] || "0.0.0.0" : "0.0.0.0") : undefined
 
   ensureTsConfig(cwd)
 
@@ -18,7 +21,11 @@ export async function studio(args) {
   const config = createViteConfig({ cwd, mode: "development" })
   const server = await createServer({
     ...config,
-    server: { port, strictPort: false }
+    server: {
+      port,
+      strictPort: false,
+      ...(host && { host, allowedHosts: true })
+    }
   })
 
   await server.listen()

package/src/core/index.ts

@@ -63,6 +63,13 @@ export type { ThemeConfig } from "./types"
 // Shared Footer
 export { SlideFooter } from "./layouts/shared-footer"
 
+// SlideRenderer
+export { SlideRenderer } from "./slide-renderer"
+export type { SlideRendererProps } from "./slide-renderer"
+
+// SlideEmbed
+export { SlideEmbed } from "./slide-embed"
+
 // SlideDeck
 export { SlideDeck } from "./slide-deck"
 

package/src/core/slide-deck.tsx

@@ -1,14 +1,14 @@
-import { AnimatePresence, LayoutGroup, motion } from "framer-motion"
+import { LayoutGroup } from "framer-motion"
 import { ChevronLeft, ChevronRight, Download, Grid3X3, List, Maximize, Monitor } from "lucide-react"
 import { useCallback, useEffect, useRef, useState } from "react"
 
 import type { SlideTransitionType } from "./transitions"
 import type { SlideConfig } from "./types"
 
-import { SLIDE_DIMENSIONS, SLIDE_TRANSITION } from "./animation-config"
+import { SLIDE_DIMENSIONS } from "./animation-config"
 import { AnimationProvider } from "./animation-context"
 import { SlideErrorBoundary } from "./slide-error-boundary"
-import { DEFAULT_SLIDE_TRANSITION, getSlideVariants } from "./transitions"
+import { SlideRenderer } from "./slide-renderer"
 import { useSlideNavigation } from "./use-slide-navigation"
 import { cn } from "./utils"
 
@@ -177,18 +177,6 @@ export function SlideDeck({ slides, transition, directionalTransition }: SlideDe
     return () => window.removeEventListener("keydown", handleKeyDown)
   }, [advance, goBack, viewMode, togglePresentationMode])
 
-  // Per-slide transition resolution
-  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 (
     <div className="min-h-screen w-full bg-neutral-950 text-foreground">
       <style>{`
@@ -299,73 +287,31 @@ export function SlideDeck({ slides, transition, directionalTransition }: SlideDe
                   transformOrigin: "center center"
                 }}
               >
-                <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>
+                <SlideRenderer
+                  slides={slides}
+                  currentSlide={currentSlide}
+                  animationStep={animationStep}
+                  totalSteps={totalSteps}
+                  direction={direction}
+                  showAllAnimations={showAllAnimations}
+                  transition={transition}
+                  directionalTransition={directionalTransition}
+                  onTransitionComplete={onTransitionComplete}
+                />
               </div>
             ) : (
               <div className="relative aspect-video w-full max-w-7xl overflow-hidden rounded-xl border border-neutral-800 bg-black shadow-2xl">
-                <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>
+                <SlideRenderer
+                  slides={slides}
+                  currentSlide={currentSlide}
+                  animationStep={animationStep}
+                  totalSteps={totalSteps}
+                  direction={direction}
+                  showAllAnimations={showAllAnimations}
+                  transition={transition}
+                  directionalTransition={directionalTransition}
+                  onTransitionComplete={onTransitionComplete}
+                />
               </div>
             )}
           </LayoutGroup>
@@ -427,9 +373,15 @@ export function SlideDeck({ slides, transition, directionalTransition }: SlideDe
                       className="h-full w-full origin-top-left scale-[0.25]"
                       style={{ width: "400%", height: "400%" }}
                     >
-                      <SlideErrorBoundary slideIndex={index} slideTitle={slideConfig.title}>
-                        <SlideComponent slideNumber={index + 1} totalSlides={slides.length} />
-                      </SlideErrorBoundary>
+                      <AnimationProvider
+                        currentStep={slideConfig.steps}
+                        totalSteps={slideConfig.steps}
+                        showAllAnimations={true}
+                      >
+                        <SlideErrorBoundary slideIndex={index} slideTitle={slideConfig.title}>
+                          <SlideComponent slideNumber={index + 1} totalSlides={slides.length} />
+                        </SlideErrorBoundary>
+                      </AnimationProvider>
                     </div>
                     <div className="absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" />
                     <div className="absolute bottom-2 left-2 rounded bg-black/70 px-2 py-1 text-xs font-medium text-white">