promptslide 0.2.0 → 0.2.2

package/src/commands/update.mjs

@@ -0,0 +1,218 @@
+import { existsSync, writeFileSync, mkdirSync } from "node:fs"
+import { join, dirname, resolve, sep } from "node:path"
+
+import { bold, green, cyan, red, dim, yellow } from "../utils/ansi.mjs"
+import { requireAuth } from "../utils/auth.mjs"
+import { fetchRegistryItem, readLockfile, updateLockfileItem, removeLockfileItem, isFileDirty, hashContent } from "../utils/registry.mjs"
+import { confirm, closePrompts } from "../utils/prompts.mjs"
+
+export async function update(args) {
+  const cwd = process.cwd()
+
+  console.log()
+  console.log(`  ${bold("promptslide")} ${dim("update")}`)
+  console.log()
+
+  if (args[0] === "--help" || args[0] === "-h") {
+    console.log(`  ${bold("Usage:")} promptslide update ${dim("[name] [--all]")}`)
+    console.log()
+    console.log(`  Check for and apply updates to installed registry items.`)
+    console.log()
+    console.log(`  ${bold("Examples:")}`)
+    console.log(`    promptslide update              ${dim("Check for available updates")}`)
+    console.log(`    promptslide update slide-hero    ${dim("Update a specific item")}`)
+    console.log(`    promptslide update --all         ${dim("Update all outdated items")}`)
+    console.log()
+    process.exit(0)
+  }
+
+  const auth = requireAuth()
+  const lock = readLockfile(cwd)
+  const slugs = Object.keys(lock.items)
+
+  if (slugs.length === 0) {
+    console.log(`  ${dim("No installed items found.")}`)
+    console.log(`  ${dim("Install items with")} ${cyan("promptslide add <name>")} ${dim("first.")}`)
+    console.log()
+    process.exit(0)
+  }
+
+  const updateAll = args.includes("--all")
+  const targetSlug = args.find(a => !a.startsWith("--"))
+
+  // Fetch latest versions for all installed items
+  console.log(`  ${dim("Checking")} ${slugs.length} ${dim("installed item(s)...")}`)
+  console.log()
+
+  const updates = []
+
+  for (const slug of slugs) {
+    const installed = lock.items[slug]
+    try {
+      const latest = await fetchRegistryItem(slug, auth)
+      const latestVersion = latest.version ?? 0
+      // Version 0 means "unversioned at install time" — always outdated if registry has a real version
+      const outdated = installed.version === 0
+        ? latestVersion >= 1
+        : latestVersion > installed.version
+
+      updates.push({
+        slug,
+        installed: installed.version,
+        latest: latestVersion,
+        outdated,
+        item: outdated ? latest : null,
+        storedFiles: installed.files
+      })
+    } catch (err) {
+      const notFound = err.message?.includes("not found") || err.message?.includes("Not found")
+      updates.push({
+        slug,
+        installed: installed.version,
+        latest: "?",
+        outdated: false,
+        item: null,
+        error: true,
+        notFound
+      })
+    }
+  }
+
+  // Print table
+  const nameWidth = Math.max(6, ...updates.map(u => u.slug.length)) + 2
+
+  console.log(`  ${bold("Name".padEnd(nameWidth))}  ${bold("Installed")}  ${bold("Latest")}  ${bold("Status")}`)
+  console.log(`  ${"─".repeat(nameWidth)}  ${"─".repeat(9)}  ${"─".repeat(6)}  ${"─".repeat(10)}`)
+
+  for (const u of updates) {
+    const name = u.slug.padEnd(nameWidth)
+    const inst = `v${u.installed}`.padEnd(9)
+    const lat = (typeof u.latest === "number" ? `v${u.latest}` : u.latest).padEnd(6)
+    const status = u.error
+      ? u.notFound ? yellow("removed from registry") : red("error")
+      : u.outdated
+        ? cyan("update available")
+        : green("up to date")
+    console.log(`  ${name}  ${inst}  ${lat}  ${status}`)
+  }
+
+  console.log()
+
+  // Offer to clean up stale lockfile entries (items deleted from registry)
+  const stale = updates.filter(u => u.notFound)
+  if (stale.length > 0) {
+    console.log(`  ${yellow("⚠")} ${bold(`${stale.length}`)} item(s) no longer exist in the registry:`)
+    for (const u of stale) {
+      console.log(`    ${dim("•")} ${u.slug}`)
+    }
+    console.log()
+    const cleanup = await confirm(`  Remove stale entries from lockfile? ${dim("(local files are kept)")}`, true)
+    if (cleanup) {
+      for (const u of stale) {
+        removeLockfileItem(cwd, u.slug)
+      }
+      console.log(`  ${green("✓")} Removed ${stale.length} stale lockfile entry(s).`)
+      console.log()
+    }
+  }
+
+  const outdated = updates.filter(u => u.outdated && u.item)
+
+  if (outdated.length === 0) {
+    if (stale.length === 0) {
+      console.log(`  ${green("✓")} All items are up to date.`)
+    }
+    console.log()
+    closePrompts()
+    return
+  }
+
+  // Determine which items to update
+  let toUpdate = []
+
+  if (targetSlug) {
+    const match = outdated.find(u => u.slug === targetSlug)
+    if (!match) {
+      const exists = updates.find(u => u.slug === targetSlug)
+      if (exists && !exists.outdated) {
+        console.log(`  ${green("✓")} ${bold(targetSlug)} is already up to date.`)
+      } else if (!exists) {
+        console.log(`  ${red("Error:")} ${bold(targetSlug)} is not installed.`)
+      }
+      console.log()
+      closePrompts()
+      return
+    }
+    toUpdate = [match]
+  } else if (updateAll) {
+    toUpdate = outdated
+  } else {
+    console.log(`  ${bold(`${outdated.length}`)} update(s) available.`)
+    console.log(`  Run ${cyan("promptslide update --all")} or ${cyan("promptslide update <name>")} to apply.`)
+    console.log()
+    closePrompts()
+    return
+  }
+
+  // Apply updates
+  for (const u of toUpdate) {
+    const item = u.item
+    console.log(`  Updating ${bold(u.slug)} ${dim(`v${u.installed} → v${u.latest}`)}...`)
+
+    if (!item.files?.length) {
+      console.log(`  ${dim("No files to write, skipping.")}`)
+      continue
+    }
+
+    const fileHashes = {}
+
+    for (const file of item.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)
+
+      // Check for local modifications (only if file exists on disk)
+      if (!existsSync(targetPath)) {
+        // File was deleted locally — restore it without prompting
+        mkdirSync(targetDir, { recursive: true })
+        writeFileSync(targetPath, file.content, "utf-8")
+        fileHashes[relativePath] = newHash
+        console.log(`  ${green("✓")} Restored ${cyan(relativePath)}`)
+        continue
+      }
+
+      if (u.storedFiles[relativePath]) {
+        const dirty = isFileDirty(cwd, relativePath, u.storedFiles[relativePath])
+        if (dirty) {
+          const overwrite = await confirm(
+            `  ${yellow("⚠")} ${relativePath} has local changes. Overwrite?`,
+            false
+          )
+          if (!overwrite) {
+            // Carry forward old hash so lockfile stays accurate
+            fileHashes[relativePath] = u.storedFiles[relativePath]
+            console.log(`  ${dim("Skipped")} ${relativePath}`)
+            continue
+          }
+        }
+      }
+
+      mkdirSync(targetDir, { recursive: true })
+      writeFileSync(targetPath, file.content, "utf-8")
+      fileHashes[relativePath] = newHash
+      console.log(`  ${green("✓")} Updated ${cyan(relativePath)}`)
+    }
+
+    updateLockfileItem(cwd, u.slug, u.latest, fileHashes)
+  }
+
+  console.log()
+  console.log(`  ${green("✓")} ${toUpdate.length} item(s) updated.`)
+  console.log()
+  closePrompts()
+}

package/src/core/slide-deck.tsx

@@ -24,11 +24,61 @@ interface SlideDeckProps {
   directionalTransition?: boolean
 }
 
+// =============================================================================
+// EXPORT VIEW (for Playwright screenshot capture)
+// =============================================================================
+
+function SlideExportView({ slides, slideIndex }: { slides: SlideConfig[]; slideIndex: number }) {
+  const [ready, setReady] = useState(false)
+  const clampedIndex = Math.max(0, Math.min(slideIndex, slides.length - 1))
+  const slideConfig = slides[clampedIndex]!
+  const SlideComponent = slideConfig.component
+
+  useEffect(() => {
+    setReady(true)
+  }, [])
+
+  return (
+    <div
+      data-export-ready={ready ? "true" : undefined}
+      style={{
+        width: SLIDE_DIMENSIONS.width,
+        height: SLIDE_DIMENSIONS.height,
+        overflow: "hidden",
+        position: "relative",
+        background: "black"
+      }}
+    >
+      <AnimationProvider
+        currentStep={slideConfig.steps}
+        totalSteps={slideConfig.steps}
+        showAllAnimations={true}
+      >
+        <SlideErrorBoundary slideIndex={clampedIndex} slideTitle={slideConfig.title}>
+          <SlideComponent slideNumber={clampedIndex + 1} totalSlides={slides.length} />
+        </SlideErrorBoundary>
+      </AnimationProvider>
+    </div>
+  )
+}
+
 // =============================================================================
 // COMPONENT
 // =============================================================================
 
 export function SlideDeck({ slides, transition, directionalTransition }: SlideDeckProps) {
+  // Check for export mode via URL params
+  const [exportParams] = useState(() => {
+    if (typeof window === "undefined") return null
+    const params = new URLSearchParams(window.location.search)
+    if (params.get("export") !== "true") return null
+    return { slideIndex: parseInt(params.get("slide") || "0", 10) }
+  })
+
+  if (exportParams) {
+    return <SlideExportView slides={slides} slideIndex={exportParams.slideIndex} />
+  }
+
   const [viewMode, setViewMode] = useState<ViewMode>("slide")
   const [isPresentationMode, setIsPresentationMode] = useState(false)
   const [scale, setScale] = useState(1)

package/src/index.mjs

@@ -24,6 +24,21 @@ function printHelp() {
   console.log(`    build           Build for production`)
   console.log(`    preview         Preview the production build`)
   console.log()
+  console.log(`  ${bold("Registry:")}`)
+  console.log(`    login           Authenticate with the slide registry`)
+  console.log(`    logout          Clear stored credentials`)
+  console.log(`    org             List and switch organizations`)
+  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(`    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`)
+  console.log(`    list ${dim("[--type]")}  List registry items`)
+  console.log()
+  console.log(`  ${bold("Tools:")}`)
+  console.log(`    to-image ${dim("<slide>")} Export a slide as a PNG image`)
+  console.log()
   console.log(`  ${bold("Options:")}`)
   console.log(`    --help, -h      Show this help message`)
   console.log(`    --version, -v   Show version number`)
@@ -54,6 +69,61 @@ switch (command) {
     await preview(args)
     break
   }
+  case "login": {
+    const { login } = await import("./commands/login.mjs")
+    await login(args)
+    break
+  }
+  case "logout": {
+    const { logout } = await import("./commands/logout.mjs")
+    await logout(args)
+    break
+  }
+  case "org": {
+    const { org } = await import("./commands/org.mjs")
+    await org(args)
+    break
+  }
+  case "add": {
+    const { add } = await import("./commands/add.mjs")
+    await add(args)
+    break
+  }
+  case "publish": {
+    const { publish } = await import("./commands/publish.mjs")
+    await publish(args)
+    break
+  }
+  case "update": {
+    const { update } = await import("./commands/update.mjs")
+    await update(args)
+    break
+  }
+  case "search": {
+    const { search } = await import("./commands/search.mjs")
+    await search(args)
+    break
+  }
+  case "list": {
+    const { list } = await import("./commands/list.mjs")
+    await list(args)
+    break
+  }
+  case "remove": {
+    const { remove } = await import("./commands/remove.mjs")
+    await remove(args)
+    break
+  }
+  case "info": {
+    const { info } = await import("./commands/info.mjs")
+    await info(args)
+    break
+  }
+  case "to-image": {
+    const { toImage } = await import("./commands/to-image.mjs")
+    await toImage(args)
+    break
+  }
   case "--help":
   case "-h":
   case undefined:

package/src/utils/ansi.mjs

@@ -1,5 +1,6 @@
 export const bold = s => `\x1b[1m${s}\x1b[0m`
 export const green = s => `\x1b[32m${s}\x1b[0m`
 export const cyan = s => `\x1b[36m${s}\x1b[0m`
+export const yellow = s => `\x1b[33m${s}\x1b[0m`
 export const red = s => `\x1b[31m${s}\x1b[0m`
 export const dim = s => `\x1b[2m${s}\x1b[0m`

package/src/utils/auth.mjs

@@ -0,0 +1,66 @@
+import { existsSync, readFileSync, writeFileSync, mkdirSync, unlinkSync } from "node:fs"
+import { join } from "node:path"
+import { homedir } from "node:os"
+
+const AUTH_DIR = join(homedir(), ".promptslide")
+const AUTH_FILE = join(AUTH_DIR, "auth.json")
+
+const DEFAULT_REGISTRY = "https://registry.promptslide.dev"
+
+/**
+ * Load stored auth credentials.
+ * Returns null if no auth file exists.
+ */
+export function loadAuth() {
+  if (!existsSync(AUTH_FILE)) return null
+  try {
+    const data = JSON.parse(readFileSync(AUTH_FILE, "utf-8"))
+    if (!data.token || !data.registry) return null
+    return {
+      registry: data.registry || DEFAULT_REGISTRY,
+      token: data.token,
+      organizationId: data.organizationId || null,
+      organizationName: data.organizationName || null
+    }
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Save auth credentials to ~/.promptslide/auth.json.
+ */
+export function saveAuth({ registry, token, organizationId, organizationName }) {
+  mkdirSync(AUTH_DIR, { recursive: true })
+  const data = {
+    registry: registry || DEFAULT_REGISTRY,
+    token,
+    organizationId: organizationId || null,
+    organizationName: organizationName || null
+  }
+  writeFileSync(AUTH_FILE, JSON.stringify(data, null, 2) + "\n", { encoding: "utf-8", mode: 0o600 })
+}
+
+/**
+ * Clear stored auth credentials.
+ * Returns true if file was removed, false if it didn't exist.
+ */
+export function clearAuth() {
+  if (!existsSync(AUTH_FILE)) return false
+  unlinkSync(AUTH_FILE)
+  return true
+}
+
+/**
+ * Load auth or exit with an error message.
+ */
+export function requireAuth() {
+  const auth = loadAuth()
+  if (!auth) {
+    console.error("  Not authenticated. Run `promptslide login` first.")
+    process.exit(1)
+  }
+  return auth
+}
+
+export { DEFAULT_REGISTRY, AUTH_FILE }

package/src/utils/colors.mjs

@@ -32,13 +32,6 @@ export function hexToOklch(hex) {
   return `oklch(${round(L)} ${round(C)} ${round(H)})`
 }
 
-export function hexToOklchDark(hex) {
-  const oklch = hexToOklch(hex)
-  const match = oklch.match(/oklch\(([\d.]+) ([\d.]+) ([\d.]+)\)/)
-  const L = Math.min(1, parseFloat(match[1]) + 0.05)
-  return `oklch(${+L.toFixed(3)} ${match[2]} ${match[3]})`
-}
-
 export function isValidHex(hex) {
   return /^#?[0-9a-fA-F]{6}$/.test(hex)
 }

package/src/utils/deck-config.mjs

@@ -0,0 +1,208 @@
+import { readFileSync, writeFileSync, existsSync } from "node:fs"
+import { join } from "node:path"
+
+const DECK_CONFIG_PATH = "src/deck-config.ts"
+
+/**
+ * Convert a kebab-case filename to PascalCase component name.
+ * e.g. "slide-hero-gradient" → "SlideHeroGradient"
+ */
+export function toPascalCase(kebab) {
+  return kebab
+    .replace(/\.tsx?$/, "")
+    .split("-")
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("")
+}
+
+/**
+ * Derive import path from file target and path.
+ * e.g. target="src/slides/", path="slide-hero.tsx" → "@/slides/slide-hero"
+ */
+export function deriveImportPath(target, filePath) {
+  const dir = target.replace(/^src\//, "@/").replace(/\/$/, "")
+  const name = filePath.replace(/\.tsx?$/, "")
+  return `${dir}/${name}`
+}
+
+/**
+ * Add a single slide to deck-config.ts.
+ * Uses string manipulation to preserve existing content.
+ *
+ * @param {string} cwd - Project root directory
+ * @param {{ componentName: string, importPath: string, steps: number }} opts
+ */
+export function addSlideToDeckConfig(cwd, { componentName, importPath, steps }) {
+  const configPath = join(cwd, DECK_CONFIG_PATH)
+  if (!existsSync(configPath)) {
+    console.warn(`  Warning: ${DECK_CONFIG_PATH} not found. Skipping deck-config update.`)
+    return false
+  }
+
+  let content = readFileSync(configPath, "utf-8")
+
+  // Check if this component is already imported (handles spacing variations)
+  if (new RegExp(`import\\s*\\{\\s*${componentName}\\s*\\}`).test(content)) {
+    return false // Already exists
+  }
+
+  // Build import and slide entry strings
+  const importLine = `import { ${componentName} } from "${importPath}"`
+  const slideEntry = `  { component: ${componentName}, steps: ${steps} },`
+
+  // Find insertion point for import:
+  // Look for the last import from "@/slides/" or "@/layouts/"
+  const importLines = content.split("\n")
+  let lastSlideImportIdx = -1
+  let lastAnyImportIdx = -1
+
+  for (let i = 0; i < importLines.length; i++) {
+    const line = importLines[i]
+    if (/^import\s+/.test(line)) {
+      lastAnyImportIdx = i
+      if (line.includes('"@/slides/') || line.includes('"@/layouts/')) {
+        lastSlideImportIdx = i
+      }
+    }
+  }
+
+  // Insert import after last slide import, or after last import, or at top
+  const importInsertIdx = lastSlideImportIdx >= 0
+    ? lastSlideImportIdx + 1
+    : lastAnyImportIdx >= 0
+      ? lastAnyImportIdx + 1
+      : 0
+
+  importLines.splice(importInsertIdx, 0, importLine)
+  content = importLines.join("\n")
+
+  // Find insertion point for slide entry in the slides array.
+  // Look for the closing bracket of the slides array.
+  // Strategy: find `]` that follows the last `}` or `,` in the slides array.
+  const slidesArrayMatch = content.match(/export\s+const\s+slides\s*:\s*SlideConfig\[\]\s*=\s*\[/)
+  if (!slidesArrayMatch) {
+    console.warn(`  Warning: Could not find slides array in ${DECK_CONFIG_PATH}. Skipping.`)
+    return false
+  }
+
+  const arrayStartIdx = content.indexOf(slidesArrayMatch[0]) + slidesArrayMatch[0].length
+  // Find the matching closing bracket
+  let bracketDepth = 1
+  let arrayEndIdx = arrayStartIdx
+  for (let i = arrayStartIdx; i < content.length; i++) {
+    if (content[i] === "[") bracketDepth++
+    if (content[i] === "]") bracketDepth--
+    if (bracketDepth === 0) {
+      arrayEndIdx = i
+      break
+    }
+  }
+
+  // Insert the slide entry before the closing bracket
+  const beforeClose = content.slice(0, arrayEndIdx)
+  const afterClose = content.slice(arrayEndIdx)
+
+  // Check if the array is empty or has existing entries
+  const arrayContent = content.slice(arrayStartIdx, arrayEndIdx).trim()
+  if (arrayContent.length === 0) {
+    // Empty array — insert with newline
+    content = beforeClose + "\n" + slideEntry + "\n" + afterClose
+  } else {
+    // Has entries — ensure trailing newline + add entry
+    const trimmedBefore = beforeClose.trimEnd()
+    const needsComma = !trimmedBefore.endsWith(",")
+    content = trimmedBefore + (needsComma ? "," : "") + "\n" + slideEntry + "\n" + afterClose
+  }
+
+  writeFileSync(configPath, content, "utf-8")
+  return true
+}
+
+/**
+ * Remove a slide from deck-config.ts by component name.
+ * Removes the import line and the slides array entry.
+ *
+ * @param {string} cwd - Project root directory
+ * @param {string} componentName - PascalCase component name (e.g. "SlideHeroGradient")
+ * @returns {boolean} Whether any changes were made
+ */
+export function removeSlideFromDeckConfig(cwd, componentName) {
+  const configPath = join(cwd, DECK_CONFIG_PATH)
+  if (!existsSync(configPath)) return false
+
+  let content = readFileSync(configPath, "utf-8")
+  let changed = false
+
+  // Remove import line
+  const importRegex = new RegExp(
+    `^import\\s*\\{\\s*${componentName}\\s*\\}\\s*from\\s*["'][^"']+["']\\s*;?\\s*\\n?`,
+    "m"
+  )
+  if (importRegex.test(content)) {
+    content = content.replace(importRegex, "")
+    changed = true
+  }
+
+  // Remove slide entry from array
+  const entryRegex = new RegExp(
+    `^\\s*\\{[^}]*component:\\s*${componentName}[^}]*\\},?\\s*\\n?`,
+    "m"
+  )
+  if (entryRegex.test(content)) {
+    content = content.replace(entryRegex, "")
+    changed = true
+  }
+
+  if (changed) {
+    // Clean up triple+ blank lines
+    content = content.replace(/\n{3,}/g, "\n\n")
+    writeFileSync(configPath, content, "utf-8")
+  }
+
+  return changed
+}
+
+/**
+ * Replace the entire deck-config.ts with a new slide manifest (for deck type).
+ *
+ * @param {string} cwd - Project root directory
+ * @param {{ componentName: string, importPath: string, steps: number, section?: string }[]} slides
+ * @param {{ transition?: string, directionalTransition?: boolean }} opts
+ */
+export function replaceDeckConfig(cwd, slides, opts = {}) {
+  const configPath = join(cwd, DECK_CONFIG_PATH)
+
+  const imports = [
+    `import type { SlideConfig } from "promptslide"`,
+    ...slides.map(s => `import { ${s.componentName} } from "${s.importPath}"`)
+  ].join("\n")
+
+  const slideEntries = slides
+    .map(s => {
+      const parts = [`component: ${s.componentName}`, `steps: ${s.steps}`]
+      if (s.section) parts.push(`section: "${s.section}"`)
+      return `  { ${parts.join(", ")} },`
+    })
+    .join("\n")
+
+  const configLines = []
+  if (opts.transition) {
+    configLines.push(`export const transition = "${opts.transition}"`)
+  }
+  if (opts.directionalTransition !== undefined) {
+    configLines.push(`export const directionalTransition = ${opts.directionalTransition}`)
+  }
+  const configBlock = configLines.length > 0 ? "\n" + configLines.join("\n") + "\n" : ""
+
+  const content = [
+    imports,
+    configBlock,
+    "export const slides: SlideConfig[] = [",
+    slideEntries,
+    "]",
+    ""
+  ].join("\n")
+
+  writeFileSync(configPath, content, "utf-8")
+  return true
+}