promptslide 0.3.16 → 0.3.18

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "promptslide",
-  "version": "0.3.16",
+  "version": "0.3.18",
   "description": "CLI and slide engine for PromptSlide presentations",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./src/commands/*": "./src/commands/*"
+  "keywords": [
+    "cli",
+    "presentations",
+    "promptslide",
+    "react",
+    "slides",
+    "vite"
+  ],
+  "license": "MIT",
+  "author": "prompticeu",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/prompticeu/promptslide.git"
   },
   "bin": {
     "promptslide": "src/index.mjs"
@@ -22,47 +26,43 @@
     "CHANGELOG.md",
     "README.md"
   ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./src/commands/*": "./src/commands/*"
+  },
   "scripts": {
     "build": "tsup",
     "test": "node --test test/*.test.mjs",
     "prepublishOnly": "npm run build"
   },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/prompticeu/promptslide.git"
-  },
-  "author": "prompticeu",
-  "keywords": [
-    "slides",
-    "presentations",
-    "cli",
-    "react",
-    "promptslide",
-    "vite"
-  ],
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.13",
     "@vitejs/plugin-react": "^4.5.2",
     "clsx": "^2.1.1",
     "lucide-react": "^0.552.0",
+    "playwright": "^1.50.0",
     "postcss": "^8.5.6",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.13",
-    "playwright": "^1.50.0",
+    "typescript": "^5.9.3",
     "vite": "^6.3.5"
   },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1"
+  },
   "peerDependencies": {
     "framer-motion": "^12.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "devDependencies": {
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
-  },
   "engines": {
     "node": ">=18.0.0"
   }

package/src/commands/clone.mjs

@@ -5,10 +5,14 @@ import { fileURLToPath } from "node:url"
 import { bold, green, cyan, red, dim, yellow } from "../utils/ansi.mjs"
 import { requireAuth } from "../utils/auth.mjs"
 import { hexToOklch } from "../utils/colors.mjs"
-import { closePrompts } from "../utils/prompts.mjs"
-import { fetchRegistryItem, resolveRegistryDependencies, writeLockfile } from "../utils/registry.mjs"
 import { toPascalCase, replaceDeckConfig } from "../utils/deck-config.mjs"
 import { collectRegistrySlideSlugs, partitionDeckSlides } from "../utils/deck-sync.mjs"
+import { closePrompts } from "../utils/prompts.mjs"
+import {
+  fetchRegistryItem,
+  resolveRegistryDependencies,
+  writeLockfile
+} from "../utils/registry.mjs"
 import { ensureTsConfig } from "../utils/tsconfig.mjs"
 
 const __filename = fileURLToPath(import.meta.url)
@@ -63,7 +67,9 @@ export async function clone(args) {
   }
 
   if (item.type !== "deck") {
-    console.error(`  ${red("Error:")} "${slug}" is a ${item.type}, not a deck. Only decks can be cloned.`)
+    console.error(
+      `  ${red("Error:")} "${slug}" is a ${item.type}, not a deck. Only decks can be cloned.`
+    )
     process.exit(1)
   }
 
@@ -75,8 +81,12 @@ export async function clone(args) {
     const localParts = CLI_VERSION.match(/^(\d+)\.(\d+)/)
     if (pubParts && localParts && pubParts[2] !== localParts[2]) {
       console.log()
-      console.log(`  ${yellow("⚠")} This deck was published with promptslide ${bold(`v${item.promptslideVersion}`)}`)
-      console.log(`    You have ${bold(`v${CLI_VERSION}`)} installed — some slides may need updating.`)
+      console.log(
+        `  ${yellow("⚠")} This deck was published with promptslide ${bold(`v${item.promptslideVersion}`)}`
+      )
+      console.log(
+        `    You have ${bold(`v${CLI_VERSION}`)} installed — some slides may need updating.`
+      )
     }
   }
 
@@ -100,7 +110,11 @@ export async function clone(args) {
   const replacements = [
     {
       path: join(targetDir, "package.json"),
-      values: { "{{PROJECT_SLUG}}": dirName, "{{PROJECT_NAME}}": projectName, "{{PROMPTSLIDE_VERSION}}": `^${CLI_VERSION}` }
+      values: {
+        "{{PROJECT_SLUG}}": dirName,
+        "{{PROJECT_NAME}}": projectName,
+        "{{PROMPTSLIDE_VERSION}}": `^${CLI_VERSION}`
+      }
     },
     {
       path: join(targetDir, "src", "theme.ts"),
@@ -149,7 +163,10 @@ export async function clone(args) {
 
       const dataUriPrefix = file.content.match(/^data:[^;]+;base64,/)
       if (dataUriPrefix) {
-        writeFileSync(targetPath, Buffer.from(file.content.slice(dataUriPrefix[0].length), "base64"))
+        writeFileSync(
+          targetPath,
+          Buffer.from(file.content.slice(dataUriPrefix[0].length), "base64")
+        )
       } else {
         writeFileSync(targetPath, file.content, "utf-8")
       }
@@ -168,6 +185,7 @@ export async function clone(args) {
     const slides = available.map(s => ({
       componentName: s.componentName || toPascalCase(s.slug),
       importPath: `@/slides/${s.slug}`,
+      id: s.id,
       steps: s.steps,
       section: s.section
     }))
@@ -175,7 +193,9 @@ export async function clone(args) {
       transition: item.meta.transition,
       directionalTransition: item.meta.directionalTransition
     })
-    console.log(`  ${green("✓")} Generated ${cyan("deck-config.ts")} ${dim(`(${slides.length} slides)`)}`)
+    console.log(
+      `  ${green("✓")} Generated ${cyan("deck-config.ts")} ${dim(`(${slides.length} slides)`)}`
+    )
   }
 
   // 7. Add npm dependencies
@@ -195,24 +215,37 @@ export async function clone(args) {
   if (item.id) {
     try {
       const annotationsRes = await fetch(`${auth.registry}/api/items/${item.id}/annotations`, {
-        headers: { Authorization: `Bearer ${auth.token}`, ...(auth.organizationId ? { "X-Organization-Id": auth.organizationId } : {}) }
+        headers: {
+          Authorization: `Bearer ${auth.token}`,
+          ...(auth.organizationId ? { "X-Organization-Id": auth.organizationId } : {})
+        }
       })
       if (annotationsRes.ok) {
         const data = await annotationsRes.json()
         const annotations = data.annotations ?? []
         if (annotations.length > 0) {
-          const annotationsFile = { version: 1, annotations: annotations.map(a => ({
-            id: a.id,
-            slideIndex: a.slideIndex,
-            slideTitle: a.slideTitle,
-            target: a.target,
-            body: a.body,
-            createdAt: a.createdAt,
-            status: a.status,
-            ...(a.resolution ? { resolution: a.resolution } : {})
-          })) }
-          writeFileSync(join(targetDir, "annotations.json"), JSON.stringify(annotationsFile, null, 2) + "\n", "utf-8")
-          console.log(`  ${green("✓")} Pulled ${cyan("annotations.json")} ${dim(`(${annotations.length} annotation${annotations.length === 1 ? "" : "s"})`)}`)
+          const annotationsFile = {
+            version: 1,
+            annotations: annotations.map(a => ({
+              id: a.id,
+              slideIndex: a.slideIndex,
+              ...(a.slideId ? { slideId: a.slideId } : {}),
+              slideTitle: a.slideTitle,
+              target: a.target,
+              body: a.body,
+              createdAt: a.createdAt,
+              status: a.status,
+              ...(a.resolution ? { resolution: a.resolution } : {})
+            }))
+          }
+          writeFileSync(
+            join(targetDir, "annotations.json"),
+            JSON.stringify(annotationsFile, null, 2) + "\n",
+            "utf-8"
+          )
+          console.log(
+            `  ${green("✓")} Pulled ${cyan("annotations.json")} ${dim(`(${annotations.length} annotation${annotations.length === 1 ? "" : "s"})`)}`
+          )
         }
       }
     } catch {

package/src/commands/pull.mjs

@@ -1,9 +1,11 @@
-import { existsSync, readFileSync, writeFileSync, mkdirSync } from "node:fs"
 import { execFileSync } from "node:child_process"
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from "node:fs"
 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 { toPascalCase, addSlideToDeckConfig, replaceDeckConfig } from "../utils/deck-config.mjs"
+import { confirm, closePrompts } from "../utils/prompts.mjs"
 import {
   fetchRegistryItem,
   resolveRegistryDependencies,
@@ -15,13 +17,7 @@ import {
   hashFile,
   isFileDirty
 } from "../utils/registry.mjs"
-import {
-  toPascalCase,
-  addSlideToDeckConfig,
-  replaceDeckConfig
-} from "../utils/deck-config.mjs"
 import { collectRegistrySlideSlugs, partitionDeckSlides } from "../utils/deck-sync.mjs"
-import { confirm, closePrompts } from "../utils/prompts.mjs"
 
 export async function pull(args) {
   const cwd = process.cwd()
@@ -51,7 +47,9 @@ export async function pull(args) {
 
   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.error(
+      `  ${dim("Run")} ${cyan("promptslide publish --type deck")} ${dim("first to set it.")}`
+    )
     console.log()
     process.exit(1)
   }
@@ -69,7 +67,9 @@ export async function pull(args) {
   }
 
   const versionTag = deckItem.version ? ` ${dim(`v${deckItem.version}`)}` : ""
-  console.log(`  Found ${bold(deckItem.title || deckItem.name)} ${dim(`(${deckItem.type})`)}${versionTag}`)
+  console.log(
+    `  Found ${bold(deckItem.title || deckItem.name)} ${dim(`(${deckItem.type})`)}${versionTag}`
+  )
 
   // Resolve all dependencies (slides, layouts, themes, assets)
   let resolved
@@ -138,7 +138,10 @@ export async function pull(args) {
             }
           } 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)
+            const overwrite = await confirm(
+              `  Overwrite ${relativePath}? ${dim("(local changes will be lost)")}`,
+              false
+            )
             if (!overwrite) {
               console.log(`  ${dim("Skipped")} ${relativePath}`)
               continue
@@ -151,7 +154,10 @@ export async function pull(args) {
       mkdirSync(targetDir, { recursive: true })
       const dataUriPrefix = file.content.match(/^data:[^;]+;base64,/)
       if (dataUriPrefix) {
-        writeFileSync(targetPath, Buffer.from(file.content.slice(dataUriPrefix[0].length), "base64"))
+        writeFileSync(
+          targetPath,
+          Buffer.from(file.content.slice(dataUriPrefix[0].length), "base64")
+        )
       } else {
         writeFileSync(targetPath, file.content, "utf-8")
       }
@@ -186,6 +192,7 @@ export async function pull(args) {
       const slides = available.map(s => ({
         componentName: s.componentName || toPascalCase(s.slug),
         importPath: `@/slides/${s.slug}`,
+        id: s.id,
         steps: s.steps,
         section: s.section
       }))
@@ -193,13 +200,21 @@ export async function pull(args) {
         transition: deckItem.meta.transition,
         directionalTransition: deckItem.meta.directionalTransition
       })
-      console.log(`  ${green("+")} Replaced ${cyan("deck-config.ts")} ${dim(`(${slides.length} slides)`)}`)
+      console.log(
+        `  ${green("+")} Replaced ${cyan("deck-config.ts")} ${dim(`(${slides.length} slides)`)}`
+      )
     } else {
       // Append individual slides
       for (const s of available) {
         const componentName = s.componentName || toPascalCase(s.slug)
         const importPath = `@/slides/${s.slug}`
-        const updated = addSlideToDeckConfig(cwd, { componentName, importPath, steps: s.steps, section: s.section })
+        const updated = addSlideToDeckConfig(cwd, {
+          componentName,
+          importPath,
+          steps: s.steps,
+          id: s.id,
+          section: s.section
+        })
         if (updated) {
           console.log(`  ${green("+")} Added ${componentName} to ${cyan("deck-config.ts")}`)
         }
@@ -227,24 +242,37 @@ export async function pull(args) {
   if (deckItem.id) {
     try {
       const annotationsRes = await fetch(`${auth.registry}/api/items/${deckItem.id}/annotations`, {
-        headers: { Authorization: `Bearer ${auth.token}`, ...(auth.organizationId ? { "X-Organization-Id": auth.organizationId } : {}) }
+        headers: {
+          Authorization: `Bearer ${auth.token}`,
+          ...(auth.organizationId ? { "X-Organization-Id": auth.organizationId } : {})
+        }
       })
       if (annotationsRes.ok) {
         const data = await annotationsRes.json()
         const annotations = data.annotations ?? []
         if (annotations.length > 0) {
-          const annotationsFile = { version: 1, annotations: annotations.map(a => ({
-            id: a.id,
-            slideIndex: a.slideIndex,
-            slideTitle: a.slideTitle,
-            target: a.target,
-            body: a.body,
-            createdAt: a.createdAt,
-            status: a.status,
-            ...(a.resolution ? { resolution: a.resolution } : {})
-          })) }
-          writeFileSync(join(cwd, "annotations.json"), JSON.stringify(annotationsFile, null, 2) + "\n", "utf-8")
-          console.log(`  ${green("+")} ${cyan("annotations.json")} ${dim(`(${annotations.length} annotation${annotations.length === 1 ? "" : 's'})`)}`)
+          const annotationsFile = {
+            version: 1,
+            annotations: annotations.map(a => ({
+              id: a.id,
+              slideIndex: a.slideIndex,
+              ...(a.slideId ? { slideId: a.slideId } : {}),
+              slideTitle: a.slideTitle,
+              target: a.target,
+              body: a.body,
+              createdAt: a.createdAt,
+              status: a.status,
+              ...(a.resolution ? { resolution: a.resolution } : {})
+            }))
+          }
+          writeFileSync(
+            join(cwd, "annotations.json"),
+            JSON.stringify(annotationsFile, null, 2) + "\n",
+            "utf-8"
+          )
+          console.log(
+            `  ${green("+")} ${cyan("annotations.json")} ${dim(`(${annotations.length} annotation${annotations.length === 1 ? "" : "s"})`)}`
+          )
         }
       }
     } catch {
@@ -257,7 +285,9 @@ export async function pull(args) {
   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(
+      `  ${green("+")} Pulled ${bold(String(written.length))} file(s) from ${bold(deckSlug)}`
+    )
   }
   console.log()
   closePrompts()

package/src/commands/studio.mjs

@@ -1,6 +1,7 @@
 import { createServer } from "vite"
 
 import { bold, dim } from "../utils/ansi.mjs"
+import { registerStudioServer } from "../utils/studio-discovery.mjs"
 import { ensureTsConfig } from "../utils/tsconfig.mjs"
 import { createViteConfig } from "../vite/config.mjs"
 
@@ -10,7 +11,7 @@ export async function studio(args) {
   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
+  const host = hasHost ? (hostArg ? hostArg.split("=")[1] || "0.0.0.0" : "0.0.0.0") : "127.0.0.1"
 
   ensureTsConfig(cwd)
 
@@ -18,17 +19,20 @@ export async function studio(args) {
   console.log(`  ${bold("promptslide")} ${dim("studio")}`)
   console.log()
 
-  const config = createViteConfig({ cwd, mode: "development" })
+  const config = createViteConfig({ cwd, mode: "development", editor: !hasHost })
   const server = await createServer({
     ...config,
     server: {
       port,
+      host,
       strictPort: false,
-      ...(host && { host, allowedHosts: true })
+      ...(hasHost && { allowedHosts: true })
     }
   })
 
   await server.listen()
+  const baseUrl = server.resolvedUrls?.local[0]
+  if (baseUrl) registerStudioServer(cwd, baseUrl)
   server.printUrls()
   server.bindCLIShortcuts({ print: true })
 }

package/src/commands/to-image.mjs

@@ -8,6 +8,8 @@ export async function toImage(args) {
   const slidePath = args[0]
   const outputIndex = args.indexOf("-o")
   const output = outputIndex !== -1 ? args[outputIndex + 1] : null
+  const portArg = args.find(arg => arg.startsWith("--port="))
+  const studioPort = portArg ? Number(portArg.slice(7)) : undefined
 
   if (!slidePath || slidePath === "--help" || slidePath === "-h") {
     console.log()
@@ -15,6 +17,7 @@ export async function toImage(args) {
     console.log()
     console.log(`  ${bold("Options:")}`)
     console.log(`    -o <file>  Output file path (default: <slide-name>.png)`)
+    console.log(`    --port=N   Studio port to reuse (default: auto-discover)`)
     console.log()
     console.log(`  ${bold("Examples:")}`)
     console.log(`    ${dim("promptslide to-image src/slides/slide-title.tsx")}`)
@@ -26,7 +29,9 @@ export async function toImage(args) {
   if (!(await isPlaywrightAvailable())) {
     console.error()
     console.error(`  ${red("Error:")} Playwright is required for image export.`)
-    console.error(`  Install it with: ${bold("npm install -D playwright && npx playwright install chromium")}`)
+    console.error(
+      `  Install it with: ${bold("npm install -D playwright && npx playwright install chromium")}`
+    )
     console.error()
     process.exit(1)
   }
@@ -36,10 +41,18 @@ export async function toImage(args) {
   console.log()
   console.log(`  ${dim("Capturing screenshot...")}`)
 
-  const buffer = await captureSlideScreenshot({
-    cwd: process.cwd(),
-    slidePath
-  })
+  let buffer
+  try {
+    buffer = await captureSlideScreenshot({
+      cwd: process.cwd(),
+      slidePath,
+      studioPort
+    })
+  } catch (error) {
+    console.error(`  ${red("Error:")} ${error.message}`)
+    process.exitCode = 1
+    return
+  }
 
   if (!buffer) {
     console.error(`  ${red("Error:")} Failed to capture screenshot.`)

package/src/commands/to-pdf.mjs

@@ -0,0 +1,27 @@
+import { writeFileSync } from "node:fs"
+import { resolve } from "node:path"
+
+import { bold, green, dim, red } from "../utils/ansi.mjs"
+import { captureDeckPdf } from "../utils/export.mjs"
+
+export async function toPdf(args) {
+  if (args.includes("--help") || args.includes("-h")) {
+    console.log(`  ${bold("Usage:")} promptslide to-pdf [-o slides.pdf] [--port=N]`)
+    return
+  }
+  const outputIndex = args.indexOf("-o")
+  const output = resolve(outputIndex >= 0 ? args[outputIndex + 1] : "slides.pdf")
+  const portArg = args.find(arg => arg.startsWith("--port="))
+  const studioPort = portArg ? Number(portArg.slice(7)) : undefined
+  console.log(`  ${dim("Rendering deck PDF...")}`)
+  let pdf
+  try {
+    pdf = await captureDeckPdf({ cwd: process.cwd(), studioPort })
+  } catch (error) {
+    console.error(`  ${red("Error:")} ${error.message}`)
+    process.exitCode = 1
+    return
+  }
+  writeFileSync(output, pdf)
+  console.log(`  ${green("✓")} Saved to ${bold(output)}`)
+}

package/src/core/animated.tsx

@@ -48,7 +48,7 @@ const animationVariants: Record<AnimationType, Variants> = {
 }
 
 interface AnimatedProps {
-  /** Which step reveals this content (1-indexed) */
+  /** Which step reveals this content (0 = visible from slide entry) */
   step: number
   /** Animation type */
   animation?: AnimationType
@@ -83,7 +83,7 @@ export function Animated({
 
   return (
     <motion.div
-      initial="hidden"
+      initial={isVisible ? false : "hidden"}
       animate={isVisible ? "visible" : "hidden"}
       variants={animationVariants[animation]}
       transition={{
@@ -138,7 +138,7 @@ export function AnimatedGroup({
 
   return (
     <motion.div
-      initial="hidden"
+      initial={isVisible ? false : "hidden"}
       animate={isVisible ? "visible" : "hidden"}
       variants={containerVariants}
       className={className}

package/src/core/annotations/adapters/http.ts

@@ -38,6 +38,14 @@ export function createHttpAdapter(): AnnotationStorageAdapter {
     async remove(id) {
       cache = cache.filter(a => a.id !== id)
       await saveAll(cache)
+    },
+    async update(id, patch) {
+      cache = cache.map(a => (a.id === id ? { ...a, ...patch } : a))
+      await saveAll(cache)
+    },
+    async replaceAll(annotations) {
+      cache = annotations
+      await saveAll(cache)
     }
   }
 }