promptslide 0.3.16 → 0.3.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "promptslide",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "description": "CLI and slide engine for PromptSlide presentations",
   "type": "module",
   "main": "./dist/index.js",

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"
 
@@ -29,6 +30,8 @@ export async function studio(args) {
   })
 
   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)
     }
   }
 }

package/src/core/annotations/annotation-overlay.tsx

@@ -1,9 +1,11 @@
 import { useCallback, useEffect, useRef, useState } from "react"
+
 import type { SlideConfig } from "../types"
+import type { Annotation, AnnotationTarget } from "./types"
+
 import { AnnotationForm } from "./annotation-form"
 import { AnnotationPin } from "./annotation-pin"
 import { buildElementTarget, resolveTarget } from "./selectors"
-import type { Annotation, AnnotationTarget } from "./types"
 
 interface AnnotationOverlayProps {
   slides: SlideConfig[]
@@ -11,10 +13,17 @@ interface AnnotationOverlayProps {
   /** Ref to the slide container element (the div wrapping SlideRenderer) */
   slideContainerRef: React.RefObject<HTMLDivElement | null>
   selectedId: string | null
+  hoveredId: string | null
   onSelectId: (id: string | null) => void
   onShowPanel: () => void
   slideAnnotations: Annotation[]
-  addAnnotation: (slideIndex: number, slideTitle: string, target: AnnotationTarget, body: string) => void
+  addAnnotation: (
+    slideIndex: number,
+    slideTitle: string,
+    target: AnnotationTarget,
+    body: string,
+    slideId?: string
+  ) => void
 }
 
 interface PendingAnnotation {
@@ -23,7 +32,17 @@ interface PendingAnnotation {
   yPercent: number
 }
 
-export function AnnotationOverlay({ slides, currentSlide, slideContainerRef, selectedId, onSelectId, onShowPanel, slideAnnotations, addAnnotation }: AnnotationOverlayProps) {
+export function AnnotationOverlay({
+  slides,
+  currentSlide,
+  slideContainerRef,
+  selectedId,
+  hoveredId,
+  onSelectId,
+  onShowPanel,
+  slideAnnotations,
+  addAnnotation
+}: AnnotationOverlayProps) {
   const [pending, setPending] = useState<PendingAnnotation | null>(null)
   const [hoveredElement, setHoveredElement] = useState<DOMRect | null>(null)
   const overlayRef = useRef<HTMLDivElement>(null)
@@ -34,19 +53,31 @@ export function AnnotationOverlay({ slides, currentSlide, slideContainerRef, sel
   const resolvedAnnotations = slideAnnotations.map((a, i) => {
     const container = slideContainerRef.current
     if (!container) {
-      return { annotation: a, xPercent: a.target.position.xPercent, yPercent: a.target.position.yPercent, number: i + 1 }
+      return {
+        annotation: a,
+        xPercent: a.target.position.xPercent,
+        yPercent: a.target.position.yPercent,
+        number: i + 1
+      }
     }
 
     const { element } = resolveTarget(a.target, container)
     if (element) {
       const rect = element.getBoundingClientRect()
       const containerRect = container.getBoundingClientRect()
-      const xPercent = ((rect.left + rect.width / 2 - containerRect.left) / containerRect.width) * 100
-      const yPercent = ((rect.top + rect.height / 2 - containerRect.top) / containerRect.height) * 100
+      const xPercent =
+        ((rect.left + rect.width / 2 - containerRect.left) / containerRect.width) * 100
+      const yPercent =
+        ((rect.top + rect.height / 2 - containerRect.top) / containerRect.height) * 100
       return { annotation: a, xPercent, yPercent, number: i + 1 }
     }
 
-    return { annotation: a, xPercent: a.target.position.xPercent, yPercent: a.target.position.yPercent, number: i + 1 }
+    return {
+      annotation: a,
+      xPercent: a.target.position.xPercent,
+      yPercent: a.target.position.yPercent,
+      number: i + 1
+    }
   })
 
   const handleOverlayClick = useCallback(
@@ -68,7 +99,11 @@ export function AnnotationOverlay({ slides, currentSlide, slideContainerRef, sel
 
       // Pick the most specific meaningful element (skip tiny text nodes, pick their parent)
       let target = elementUnder
-      if (target.tagName === "SPAN" && target.parentElement && container.contains(target.parentElement)) {
+      if (
+        target.tagName === "SPAN" &&
+        target.parentElement &&
+        container.contains(target.parentElement)
+      ) {
         // For inline spans, prefer their parent for a more meaningful target
         const parent = target.parentElement
         if (parent.tagName !== "DIV" || parent.children.length <= 3) {
@@ -90,11 +125,11 @@ export function AnnotationOverlay({ slides, currentSlide, slideContainerRef, sel
   const handleSubmit = useCallback(
     (text: string) => {
       if (!pending) return
-      addAnnotation(currentSlide, slideTitle, pending.target, text)
+      addAnnotation(currentSlide, slideTitle, pending.target, text, slides[currentSlide]?.id)
       setPending(null)
       onShowPanel()
     },
-    [pending, currentSlide, slideTitle, addAnnotation, onShowPanel]
+    [pending, currentSlide, slideTitle, slides, addAnnotation, onShowPanel]
   )
 
   // Track hover for element highlighting
@@ -116,12 +151,14 @@ export function AnnotationOverlay({ slides, currentSlide, slideContainerRef, sel
       if (elementUnder && container.contains(elementUnder) && elementUnder !== container) {
         const containerRect = container.getBoundingClientRect()
         const elRect = elementUnder.getBoundingClientRect()
+        const scaleX = containerRect.width / container.offsetWidth
+        const scaleY = containerRect.height / container.offsetHeight
         setHoveredElement(
           new DOMRect(
-            elRect.left - containerRect.left,
-            elRect.top - containerRect.top,
-            elRect.width,
-            elRect.height
+            (elRect.left - containerRect.left) / scaleX,
+            (elRect.top - containerRect.top) / scaleY,
+            elRect.width / scaleX,
+            elRect.height / scaleY
           )
         )
       } else {
@@ -159,29 +196,38 @@ export function AnnotationOverlay({ slides, currentSlide, slideContainerRef, sel
         role="button"
         tabIndex={0}
         className="absolute inset-0 z-20"
-        style={{ cursor: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23FF6B35' stroke-width='2' opacity='0.8'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23FF6B35'/%3E%3C/svg%3E") 12 12, crosshair` }}
+        style={{
+          cursor: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23FF6B35' stroke-width='2' opacity='0.8'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23FF6B35'/%3E%3C/svg%3E") 12 12, crosshair`
+        }}
         onClick={handleOverlayClick}
-        onKeyDown={e => { if (e.key === "Escape") { setPending(null); onSelectId(null) } }}
+        onKeyDown={e => {
+          if (e.key === "Escape") {
+            setPending(null)
+            onSelectId(null)
+          }
+        }}
         onMouseMove={handleMouseMove}
         onMouseLeave={() => setHoveredElement(null)}
       />
 
       {/* Annotation pins */}
-      {resolvedAnnotations.map(({ annotation, xPercent, yPercent, number }) => (
-        <AnnotationPin
-          key={annotation.id}
-          number={number}
-          status={annotation.status}
-          xPercent={xPercent}
-          yPercent={yPercent}
-          isSelected={annotation.id === selectedId}
-          onClick={() => {
-            onSelectId(annotation.id === selectedId ? null : annotation.id)
-            onShowPanel()
-            setPending(null)
-          }}
-        />
-      ))}
+      {resolvedAnnotations
+        .filter(({ annotation }) => annotation.status === "open" || annotation.id === hoveredId)
+        .map(({ annotation, xPercent, yPercent, number }) => (
+          <AnnotationPin
+            key={annotation.id}
+            number={number}
+            status={annotation.status}
+            xPercent={xPercent}
+            yPercent={yPercent}
+            isSelected={annotation.id === selectedId}
+            onClick={() => {
+              onSelectId(annotation.id === selectedId ? null : annotation.id)
+              onShowPanel()
+              setPending(null)
+            }}
+          />
+        ))}
 
       {/* New annotation form */}
       {pending && (
@@ -192,7 +238,6 @@ export function AnnotationOverlay({ slides, currentSlide, slideContainerRef, sel
           onCancel={() => setPending(null)}
         />
       )}
-
     </>
   )
 }