promptslide 0.2.0 → 0.2.2

package/src/utils/export.mjs

@@ -0,0 +1,115 @@
+import { execSync } from "node:child_process"
+import { dirname, join } from "node:path"
+import { fileURLToPath } from "node:url"
+
+import { createServer } from "vite"
+
+import { ensureTsConfig } from "./tsconfig.mjs"
+import { createViteConfig } from "../vite/config.mjs"
+
+/**
+ * Check if Playwright is available.
+ * @returns {Promise<boolean>}
+ */
+export async function isPlaywrightAvailable() {
+  try {
+    await import("playwright")
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Ensure the Chromium browser binary is installed.
+ * Attempts a launch and auto-installs if the binary is missing.
+ * @param {import("playwright").BrowserType} chromium
+ */
+async function ensureChromium(chromium) {
+  try {
+    const browser = await chromium.launch({ headless: true })
+    await browser.close()
+  } catch (err) {
+    if (err.message && err.message.includes("Executable doesn't exist")) {
+      const pwIndex = fileURLToPath(import.meta.resolve("playwright"))
+      const cliPath = join(dirname(pwIndex), "cli.js")
+      execSync(`node "${cliPath}" install chromium`, { stdio: "inherit" })
+    } else {
+      throw err
+    }
+  }
+}
+
+/**
+ * Capture a screenshot of a specific slide.
+ * @param {{ cwd: string, slidePath: string, width?: number, height?: number }} opts
+ * @returns {Promise<Buffer | null>} PNG buffer, or null if Playwright is not installed
+ */
+export async function captureSlideScreenshot({ cwd, slidePath, width = 1280, height = 720 }) {
+  let chromium
+  try {
+    const pw = await import("playwright")
+    chromium = pw.chromium
+  } catch {
+    return null
+  }
+
+  await ensureChromium(chromium)
+
+  ensureTsConfig(cwd)
+
+  const config = createViteConfig({ cwd, mode: "development" })
+  const server = await createServer({
+    ...config,
+    server: { port: 0, strictPort: false },
+    logLevel: "silent"
+  })
+  await server.listen()
+
+  const address = server.httpServer.address()
+  const port = typeof address === "object" ? address.port : 0
+  const url = `http://localhost:${port}/?export=true&slidePath=${encodeURIComponent(slidePath)}`
+
+  let browser
+  try {
+    browser = await chromium.launch({ headless: true })
+    const page = await browser.newPage({ viewport: { width, height } })
+
+    const errors = []
+    page.on("pageerror", err => errors.push(err.message))
+
+    await page.goto(url, { waitUntil: "domcontentloaded", timeout: 15000 })
+    await page.waitForSelector("[data-export-ready='true']", { timeout: 15000 }).catch(err => {
+      if (errors.length) {
+        throw new Error(`${err.message}\n  Browser errors:\n    ${errors.join("\n    ")}`)
+      }
+      throw err
+    })
+    await page.waitForTimeout(200)
+
+    const element = await page.$("[data-export-ready='true']")
+    const screenshot = await element.screenshot({ type: "png" })
+
+    return screenshot
+  } finally {
+    if (browser) await browser.close().catch(() => {})
+    await server.close()
+  }
+}
+
+/**
+ * Capture a slide and return as base64 data URI.
+ * Returns null if Playwright is not available or capture fails.
+ * @param {{ cwd: string, slidePath: string }} opts
+ * @returns {Promise<string | null>}
+ */
+export async function captureSlideAsDataUri({ cwd, slidePath }) {
+  try {
+    const buffer = await captureSlideScreenshot({ cwd, slidePath })
+    if (!buffer) return null
+    return `data:image/png;base64,${buffer.toString("base64")}`
+  } catch (err) {
+    console.error(`  Screenshot error: ${err.message}`)
+    return null
+  }
+}

package/src/utils/registry.mjs

@@ -0,0 +1,319 @@
+import { createHash } from "node:crypto"
+import { existsSync, readFileSync, writeFileSync } from "node:fs"
+import { join } from "node:path"
+
+const LOCKFILE = ".promptslide-lock.json"
+
+/**
+ * Read the lockfile from a project directory.
+ * @param {string} cwd
+ * @returns {{ items: Record<string, { version: number, installedAt: string }> }}
+ */
+export function readLockfile(cwd) {
+  const path = join(cwd, LOCKFILE)
+  if (!existsSync(path)) return { items: {} }
+  try {
+    return JSON.parse(readFileSync(path, "utf-8"))
+  } catch {
+    console.warn(`  Warning: ${LOCKFILE} is corrupt or unreadable. Starting fresh.`)
+    return { items: {} }
+  }
+}
+
+/**
+ * Write the lockfile to a project directory.
+ * @param {string} cwd
+ * @param {{ items: Record<string, { version: number, installedAt: string }> }} data
+ */
+export function writeLockfile(cwd, data) {
+  writeFileSync(join(cwd, LOCKFILE), JSON.stringify(data, null, 2) + "\n", "utf-8")
+}
+
+/**
+ * Hash a string with SHA-256 and return the hex digest.
+ * @param {string} content
+ * @returns {string}
+ */
+export function hashContent(content) {
+  return createHash("sha256").update(content, "utf-8").digest("hex")
+}
+
+/**
+ * Hash a file on disk. Returns null if the file doesn't exist.
+ * @param {string} filePath - Absolute path
+ * @returns {string | null}
+ */
+export function hashFile(filePath) {
+  if (!existsSync(filePath)) return null
+  return hashContent(readFileSync(filePath, "utf-8"))
+}
+
+/**
+ * Check if a file on disk differs from its stored hash.
+ * Returns true if the file has been modified or doesn't exist.
+ * @param {string} cwd
+ * @param {string} relativePath - e.g. "src/slides/hero.tsx"
+ * @param {string} storedHash
+ * @returns {boolean}
+ */
+export function isFileDirty(cwd, relativePath, storedHash) {
+  const currentHash = hashFile(join(cwd, relativePath))
+  if (!currentHash) return true
+  return currentHash !== storedHash
+}
+
+/**
+ * Add or update a single item in the lockfile.
+ * @param {string} cwd
+ * @param {string} slug
+ * @param {number} version
+ * @param {Record<string, string>} files - Map of relative paths to content hashes
+ */
+export function updateLockfileItem(cwd, slug, version, files) {
+  const lock = readLockfile(cwd)
+  lock.items[slug] = {
+    version,
+    installedAt: new Date().toISOString().split("T")[0],
+    files
+  }
+  writeLockfile(cwd, lock)
+}
+
+/**
+ * Remove a single item from the lockfile.
+ * @param {string} cwd
+ * @param {string} slug
+ */
+export function removeLockfileItem(cwd, slug) {
+  const lock = readLockfile(cwd)
+  delete lock.items[slug]
+  writeLockfile(cwd, lock)
+}
+
+/**
+ * Build common auth headers for registry API requests.
+ * @param {{ token: string, organizationId?: string }} auth
+ * @returns {Record<string, string>}
+ */
+function authHeaders(auth) {
+  const headers = { Authorization: `Bearer ${auth.token}` }
+  if (auth.organizationId) {
+    headers["X-Organization-Id"] = auth.organizationId
+  }
+  return headers
+}
+
+/**
+ * Fetch the user's organizations from the registry.
+ * @param {{ registry: string, token: string }} auth
+ * @returns {Promise<{ id: string, name: string, slug: string, role: string }[]>}
+ */
+export async function fetchOrganizations(auth) {
+  const res = await fetch(`${auth.registry}/api/organizations`, {
+    headers: authHeaders(auth)
+  })
+
+  if (res.status === 401) {
+    throw new Error("Authentication failed. Run `promptslide login` to re-authenticate.")
+  }
+  if (!res.ok) {
+    throw new Error(`Failed to fetch organizations (${res.status}): ${await res.text()}`)
+  }
+
+  const data = await res.json()
+  return data.organizations || []
+}
+
+/**
+ * Fetch a registry item JSON from the registry API.
+ * @param {string} nameOrUrl - Item name (e.g. "slide-hero-gradient") or full URL
+ * @param {{ registry: string, apiKey: string }} auth - Auth credentials
+ * @returns {Promise<object>} Registry item JSON
+ */
+export async function fetchRegistryItem(nameOrUrl, auth) {
+  const url = nameOrUrl.startsWith("http")
+    ? nameOrUrl
+    : `${auth.registry}/api/r/${nameOrUrl}.json`
+
+  const res = await fetch(url, {
+    headers: authHeaders(auth)
+  })
+
+  if (res.status === 401) {
+    throw new Error("Authentication failed. Run `promptslide login` to re-authenticate.")
+  }
+  if (res.status === 403) {
+    const body = await res.json().catch(() => ({}))
+    if (body.status === "pending_review") {
+      throw new Error(`Item "${nameOrUrl}" is pending review. An admin must approve it first.`)
+    }
+    if (body.status === "rejected") {
+      throw new Error(`Item "${nameOrUrl}" was rejected by an admin.`)
+    }
+    throw new Error("Access denied. This item belongs to a different organization.")
+  }
+  if (res.status === 404) {
+    throw new Error(`Item not found: ${nameOrUrl}`)
+  }
+  if (!res.ok) {
+    throw new Error(`Registry error (${res.status}): ${await res.text()}`)
+  }
+
+  return res.json()
+}
+
+/**
+ * Resolve all registry dependencies recursively.
+ * Returns a flat list of all items to install (including the root item).
+ * Skips items whose target files already exist locally.
+ *
+ * @param {object} item - Root registry item JSON
+ * @param {{ registry: string, apiKey: string }} auth
+ * @param {string} cwd - Project root directory
+ * @returns {Promise<{ items: object[], npmDeps: Record<string, string> }>}
+ */
+export async function resolveRegistryDependencies(item, auth, cwd) {
+  const seen = new Set()
+  const items = []
+  const npmDeps = {}
+
+  async function resolve(current) {
+    if (seen.has(current.name)) return
+    seen.add(current.name)
+
+    // Collect npm dependencies
+    if (current.dependencies) {
+      Object.assign(npmDeps, current.dependencies)
+    }
+
+    // Check if any files need writing (skip if all exist)
+    const needsInstall = current.files?.some(f => {
+      const targetPath = join(cwd, f.target, f.path)
+      return !existsSync(targetPath)
+    })
+
+    if (needsInstall || current === item) {
+      items.push(current)
+    }
+
+    // Recurse into registry dependencies
+    if (current.registryDependencies?.length) {
+      for (const depName of current.registryDependencies) {
+        try {
+          const depItem = await fetchRegistryItem(depName, auth)
+          await resolve(depItem)
+        } catch (err) {
+          console.warn(`  Warning: Could not resolve dependency "${depName}": ${err.message}`)
+        }
+      }
+    }
+  }
+
+  await resolve(item)
+  return { items, npmDeps }
+}
+
+/**
+ * Check if a registry item exists (by slug).
+ * @param {string} name - Item slug
+ * @param {{ registry: string, token: string }} auth
+ * @returns {Promise<boolean>}
+ */
+export async function registryItemExists(name, auth) {
+  try {
+    await fetchRegistryItem(name, auth)
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Search/list registry items.
+ * @param {{ search?: string, type?: string }} params
+ * @param {{ registry: string, apiKey: string }} auth
+ * @returns {Promise<object[]>}
+ */
+export async function searchRegistry(params, auth) {
+  const url = new URL(`${auth.registry}/api/r`)
+  if (params.search) url.searchParams.set("search", params.search)
+  if (params.type) url.searchParams.set("type", params.type)
+
+  const res = await fetch(url.toString(), {
+    headers: authHeaders(auth)
+  })
+
+  if (res.status === 401) {
+    throw new Error("Authentication failed. Run `promptslide login` to re-authenticate.")
+  }
+  if (!res.ok) {
+    throw new Error(`Registry error (${res.status}): ${await res.text()}`)
+  }
+
+  return res.json()
+}
+
+/**
+ * Publish an item to the registry.
+ * @param {object} payload - Publish payload
+ * @param {{ registry: string, apiKey: string }} auth
+ * @returns {Promise<object>} Server response
+ */
+export async function publishToRegistry(payload, auth) {
+  const res = await fetch(`${auth.registry}/api/publish`, {
+    method: "POST",
+    headers: {
+      ...authHeaders(auth),
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(payload)
+  })
+
+  if (res.status === 401) {
+    throw new Error("Authentication failed. Run `promptslide login` to re-authenticate.")
+  }
+  if (!res.ok) {
+    const body = await res.text()
+    throw new Error(`Publish failed (${res.status}): ${body}`)
+  }
+
+  return res.json()
+}
+
+/**
+ * Detect the package manager in use.
+ * @param {string} cwd
+ * @returns {"bun" | "yarn" | "pnpm" | "npm"}
+ */
+export function detectPackageManager(cwd) {
+  if (existsSync(join(cwd, "bun.lock")) || existsSync(join(cwd, "bun.lockb"))) return "bun"
+  if (existsSync(join(cwd, "yarn.lock"))) return "yarn"
+  if (existsSync(join(cwd, "pnpm-lock.yaml"))) return "pnpm"
+  return "npm"
+}
+
+/**
+ * Get the install command and args for adding dependencies.
+ * Returns { cmd, args, display } for safe use with execFileSync.
+ * @param {"bun" | "yarn" | "pnpm" | "npm"} pm
+ * @param {string[]} packages
+ * @returns {{ cmd: string, args: string[], display: string }}
+ */
+export function getInstallCommand(pm, packages) {
+  // Validate package names to prevent injection
+  for (const pkg of packages) {
+    if (!/^@?[a-zA-Z0-9][-a-zA-Z0-9/._]*@[^\s]+$/.test(pkg)) {
+      throw new Error(`Invalid package specifier: ${pkg}`)
+    }
+  }
+  switch (pm) {
+    case "bun":
+      return { cmd: "bun", args: ["add", ...packages], display: `bun add ${packages.join(" ")}` }
+    case "yarn":
+      return { cmd: "yarn", args: ["add", ...packages], display: `yarn add ${packages.join(" ")}` }
+    case "pnpm":
+      return { cmd: "pnpm", args: ["add", ...packages], display: `pnpm add ${packages.join(" ")}` }
+    default:
+      return { cmd: "npm", args: ["install", ...packages], display: `npm install ${packages.join(" ")}` }
+  }
+}

package/src/vite/config.mjs

@@ -22,7 +22,7 @@ export function createViteConfig({ cwd, mode = "development" }) {
     configFile: false,
     root: cwd,
     mode,
-    plugins: [react(), promptslidePlugin()],
+    plugins: [react(), promptslidePlugin({ root: cwd })],
     resolve: {
       alias: {
         "@": resolve(cwd, "src"),

package/src/vite/plugin.mjs

@@ -1,9 +1,11 @@
 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
 
 function getHtmlTemplate() {
   return `<!doctype html>
-<html lang="en" class="dark">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -16,12 +18,27 @@ function getHtmlTemplate() {
 </html>`
 }
 
-function getEntryModule() {
+function getExportHtmlTemplate() {
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PromptSlide Export</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/@id/${VIRTUAL_EXPORT_ID}"></script>
+  </body>
+</html>`
+}
+
+function getEntryModule(root) {
   return `
 import { StrictMode, createElement } from "react"
 import { createRoot } from "react-dom/client"
-import "./src/globals.css"
-import App from "./src/App"
+import "${root}/src/globals.css"
+import App from "${root}/src/App"
 
 createRoot(document.getElementById("root")).render(
   createElement(StrictMode, null, createElement(App))
@@ -29,24 +46,88 @@ createRoot(document.getElementById("root")).render(
 `
 }
 
-export function promptslidePlugin() {
+function getExportEntryModule(root, slidePath) {
+  return `
+import { StrictMode, createElement, useState, useEffect } from "react"
+import { createRoot } from "react-dom/client"
+import { AnimationProvider, SlideErrorBoundary, SlideThemeProvider } from "promptslide"
+import "${root}/src/globals.css"
+import * as slideMod from "${root}/${slidePath}"
+
+let theme = {}
+try {
+  const themeMod = await import("${root}/src/theme")
+  theme = themeMod.theme || themeMod.default || {}
+} catch {}
+
+const SlideComponent = slideMod.default || Object.values(slideMod).find(v => typeof v === "function")
+
+function ExportView() {
+  const [ready, setReady] = useState(false)
+  useEffect(() => { setReady(true) }, [])
+  return createElement("div", {
+    "data-export-ready": ready ? "true" : undefined,
+    style: { width: 1280, height: 720, overflow: "hidden", position: "relative", background: "black" }
+  },
+    createElement(AnimationProvider, { currentStep: 0, totalSteps: 0, showAllAnimations: true },
+      createElement(SlideErrorBoundary, { slideIndex: 0 },
+        SlideComponent
+          ? createElement(SlideComponent, { slideNumber: 1, totalSlides: 1 })
+          : null
+      )
+    )
+  )
+}
+
+createRoot(document.getElementById("root")).render(
+  createElement(StrictMode, null,
+    createElement(SlideThemeProvider, { theme },
+      createElement(ExportView)
+    )
+  )
+)
+`
+}
+
+export function promptslidePlugin({ root: initialRoot } = {}) {
+  let root = initialRoot
+  let exportSlidePath = null
+
   return {
     name: "promptslide",
     enforce: "pre",
 
+    configResolved(config) {
+      if (!root) root = config.root
+    },
+
     resolveId(id) {
-      if (id === VIRTUAL_ENTRY_ID) {
-        return RESOLVED_VIRTUAL_ENTRY_ID
-      }
+      if (id === VIRTUAL_ENTRY_ID) return RESOLVED_VIRTUAL_ENTRY_ID
+      if (id === VIRTUAL_EXPORT_ID) return RESOLVED_VIRTUAL_EXPORT_ID
     },
 
     load(id) {
-      if (id === RESOLVED_VIRTUAL_ENTRY_ID) {
-        return getEntryModule()
-      }
+      if (id === RESOLVED_VIRTUAL_ENTRY_ID) return getEntryModule(root)
+      if (id === RESOLVED_VIRTUAL_EXPORT_ID) return getExportEntryModule(root, exportSlidePath || "src/slides/slide-title.tsx")
     },
 
     configureServer(server) {
+      // 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")
+        if (url.searchParams.get("export") !== "true") return next()
+
+        exportSlidePath = url.searchParams.get("slidePath") || "src/slides/slide-title.tsx"
+        // Invalidate cached export module so it regenerates with the new slidePath
+        const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_EXPORT_ID)
+        if (mod) server.moduleGraph.invalidateModule(mod)
+        const html = await server.transformIndexHtml("/index.html", getExportHtmlTemplate())
+        res.setHeader("Content-Type", "text/html")
+        res.statusCode = 200
+        res.end(html)
+      })
+
+      // Post-middleware: serve the regular app after Vite's built-in middleware
       return () => {
         server.middlewares.use(async (req, res, next) => {
           if (req.url === "/" || req.url === "/index.html") {