promptslide 0.3.18 → 0.3.19

package/src/core/slide-renderer.tsx

@@ -13,6 +13,7 @@ import { DEFAULT_SLIDE_TRANSITION, getSlideVariants } from "./transitions"
 // =============================================================================
 
 export interface SlideRendererProps {
+  playbackKey?: number
   slides: SlideConfig[]
   currentSlide: number
   animationStep: number
@@ -33,6 +34,7 @@ export interface SlideRendererProps {
  * Extracted from SlideDeck so it can be reused in SlideEmbed and other contexts.
  */
 export function SlideRenderer({
+  playbackKey,
   slides,
   currentSlide,
   animationStep,
@@ -77,7 +79,11 @@ export function SlideRenderer({
           showAllAnimations={showAllAnimations}
         >
           <SlideErrorBoundary slideIndex={currentSlide} slideTitle={slides[currentSlide]?.title}>
-            <CurrentSlideComponent slideNumber={currentSlide + 1} totalSlides={slides.length} />
+            <CurrentSlideComponent
+              key={playbackKey}
+              slideNumber={currentSlide + 1}
+              totalSlides={slides.length}
+            />
           </SlideErrorBoundary>
         </AnimationProvider>
       </motion.div>

package/src/core/toolbar-action.tsx

@@ -0,0 +1,38 @@
+import type { ComponentPropsWithoutRef } from "react"
+
+import { cn } from "./utils"
+
+type ToolbarActionProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  "aria-label" | "aria-pressed" | "className"
+> & {
+  label: string
+  selected?: boolean
+}
+
+/** Shared icon action for both the viewer toolbar and the editor's toolbar portal. */
+export function ToolbarAction({
+  label,
+  selected,
+  title = label,
+  children,
+  ...props
+}: ToolbarActionProps) {
+  return (
+    <button
+      {...props}
+      type="button"
+      aria-label={label}
+      aria-pressed={selected}
+      title={title}
+      className={cn(
+        "relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#FF6B35] disabled:cursor-default disabled:opacity-35 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0",
+        selected
+          ? "border-[#FF6B35]/50 bg-[#FF6B35]/15 text-[#FF6B35] enabled:hover:border-[#FF6B35] enabled:hover:bg-[#FF6B35]/25"
+          : "text-neutral-400 enabled:hover:bg-neutral-800 enabled:hover:text-white"
+      )}
+    >
+      {children}
+    </button>
+  )
+}

package/src/core/types.ts

@@ -136,3 +136,17 @@ export interface LayoutBaseProps extends SlideProps {
   hideFooter?: boolean
   className?: string
 }
+
+/** Durations in seconds, including the initial state at dwell[0]. */
+export interface LoopSlideConfig {
+  excluded?: boolean
+  /** Step count when these timings were edited; used to flag changes. */
+  steps?: number
+  dwell?: (number | null)[]
+}
+
+export interface LoopConfig {
+  version: 1
+  defaultDuration: number
+  slides: Record<string, LoopSlideConfig>
+}

package/src/core/use-slide-navigation.ts

@@ -67,6 +67,8 @@ export interface UseSlideNavigationReturn {
   advance: () => void
   goBack: () => void
   goToSlide: (index: number) => void
+  goToStep: (step: number) => void
+  restartAtSlide: (index: number) => void
   onTransitionComplete: () => void
 }
 
@@ -206,6 +208,29 @@ export function useSlideNavigation({
     [currentSlide, slides.length, onSlideChange]
   )
 
+  const goToStep = useCallback(
+    (step: number) => {
+      if (!Number.isInteger(step)) return
+      setQueuedAction(null)
+      setAnimationStep(Math.max(0, Math.min(step, slides[currentSlide]?.steps ?? 0)))
+      setNavState(previous => ({ ...previous, direction: 0 }))
+    },
+    [slides, currentSlide]
+  )
+
+  const restartAtSlide = useCallback(
+    (index: number) => {
+      if (index < 0 || index >= slides.length) return
+      setQueuedAction(null)
+      setAnimationStep(0)
+      setCurrentSlide(index)
+      // Same-slide restarts do not have a transition to complete.
+      setNavState({ status: index === currentSlide ? "idle" : "transitioning", direction: 1 })
+      onSlideChange?.(index)
+    },
+    [slides.length, currentSlide, onSlideChange]
+  )
+
   useEffect(() => {
     if (navState.status === "idle" && queuedAction !== null) {
       setQueuedAction(null)
@@ -227,6 +252,8 @@ export function useSlideNavigation({
     advance,
     goBack,
     goToSlide,
+    goToStep,
+    restartAtSlide,
     onTransitionComplete
   }
 }

package/src/core/view-menu.tsx

@@ -0,0 +1,130 @@
+import { Check, ChevronDown, Grid3X3, List, Monitor } from "lucide-react"
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react"
+
+import { cn } from "./utils"
+
+export type ViewMode = "slide" | "list" | "grid"
+
+const views = [
+  { mode: "slide", label: "Presentation view", shortcut: "V", icon: Monitor },
+  { mode: "list", label: "List view", shortcut: "L", icon: List },
+  { mode: "grid", label: "Grid view", shortcut: "G", icon: Grid3X3 }
+] as const
+
+export function ViewMenu({
+  value,
+  onChange,
+  disabled
+}: {
+  value: ViewMode
+  onChange: (mode: ViewMode) => void
+  disabled: boolean
+}) {
+  const [open, setOpen] = useState(false)
+  const id = useId()
+  const root = useRef<HTMLDivElement>(null)
+  const trigger = useRef<HTMLButtonElement>(null)
+  const active = views.find(view => view.mode === value)!
+  const Icon = active.icon
+
+  useLayoutEffect(() => {
+    if (open) root.current?.querySelector<HTMLElement>('[aria-checked="true"]')?.focus()
+  }, [open])
+  useEffect(() => {
+    if (!open) return
+    const close = (event: PointerEvent) => {
+      if (!root.current?.contains(event.target as Node)) setOpen(false)
+    }
+    document.addEventListener("pointerdown", close)
+    return () => document.removeEventListener("pointerdown", close)
+  }, [open])
+
+  return (
+    <div
+      role="group"
+      aria-label="View selector"
+      ref={root}
+      className="relative flex"
+      onBlur={event => {
+        const next = event.relatedTarget
+        if (next && !event.currentTarget.contains(next)) setOpen(false)
+      }}
+      onKeyDown={event => {
+        // Toolbar navigation must not trigger slide advancement or deck shortcuts.
+        event.stopPropagation()
+        if (event.key === "Escape") {
+          setOpen(false)
+          trigger.current?.focus()
+        } else if (open && event.key === "Tab") {
+          trigger.current?.focus()
+          setOpen(false)
+        } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+          event.preventDefault()
+          if (!open) {
+            setOpen(true)
+            return
+          }
+          const items = Array.from(
+            root.current!.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]')
+          )
+          const index = items.indexOf(document.activeElement as HTMLButtonElement)
+          const next =
+            event.key === "Home"
+              ? 0
+              : event.key === "End"
+                ? items.length - 1
+                : (index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length
+          items[next]?.focus()
+        }
+      }}
+    >
+      <button
+        ref={trigger}
+        disabled={disabled}
+        aria-label="View options"
+        title={`View options · ${active.label}`}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-controls={open ? id : undefined}
+        className="inline-flex h-8 items-center gap-1.5 rounded-md bg-neutral-800 px-2 text-white hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-orange-500"
+        onClick={() => setOpen(previous => !previous)}
+      >
+        <Icon size={16} />
+        <ChevronDown size={12} />
+      </button>
+      {open && (
+        <div
+          id={id}
+          role="menu"
+          aria-label="View options"
+          className="absolute left-0 top-10 w-56 rounded-lg border border-neutral-700 bg-neutral-950 p-1 text-sm text-white"
+        >
+          {views.map(({ mode, label, shortcut, icon: OptionIcon }) => (
+            <button
+              key={mode}
+              role="menuitemradio"
+              aria-checked={mode === value}
+              tabIndex={-1}
+              className={cn(
+                "flex w-full items-center gap-2 rounded px-2 py-2 text-left text-neutral-300 hover:bg-neutral-800 focus:bg-neutral-800 focus:outline-none",
+                mode === value && "text-white"
+              )}
+              onClick={() => {
+                onChange(mode)
+                setOpen(false)
+                trigger.current?.focus()
+              }}
+            >
+              <OptionIcon size={16} />
+              <span className="flex-1">{label}</span>
+              <span aria-hidden="true" className="text-xs text-neutral-500">
+                {shortcut}
+              </span>
+              <Check size={14} className={mode === value ? "text-orange-400" : "invisible"} />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/editor/README.md

@@ -1,6 +1,6 @@
 # Development source editor
 
-Run `promptslide studio` and choose **Edit** in the existing top-right toolbar. The editor is injected by the development Vite plugin. Production builds, registry previews, embeds, and export pages do not load it. No editable-component migration is needed.
+Run `promptslide studio` and choose **Edit** in the top-right toolbar, or **Elements** in the shared inspector. The core viewer owns the inspector's tabs, docking, and close control; the editor portals its tools into the Elements slot. The editor is injected by the development Vite plugin. Production builds, registry previews, embeds, and export pages do not load it. No editable-component migration is needed.
 
 ## Workflow
 
@@ -11,6 +11,7 @@ Run `promptslide studio` and choose **Edit** in the existing top-right toolbar.
 - For images, adjust the frame size, objectFit, objectPosition, and inset crop.
 - Select a range in Text and apply bold, italic, or underline. Save existing text changes first. Range formatting creates ordinary styled JSX spans, which can subsequently be selected individually.
 - Structure supports inserting text, shapes, and images into JSX containers and duplicating/deleting direct JSX children. Root components and expressions cannot be deleted. Duplicates preview immediately and support Undo and Discard; save to edit copies independently. Insertions render after Save; range formatting previews immediately.
+- Switching from Elements to Slide settings or Comments uses the same Save / Discard / Keep editing guard as closing the editor. Keeping editing (or cancelling the dialog) cancels the pending panel switch. Loop timing drafts stay in the viewer across panel changes and source saves.
 - Undo/redo affects the buffered draft. Save batches edits to source; Discard restores the source rendering. Close requires resolving unsaved changes. The browser tab retains its draft across hot reloads. Export draft downloads the pending operations for recovery.
 - Editing uses the original viewer canvas, styling, and animation wrappers. Leave Edit to reveal steps normally; opening Edit preserves the currently visible content.
 
@@ -33,3 +34,12 @@ The endpoint uses a per-server random token, checks cross-site fetches, limits p
 - `tsc -p packages/cli/tsconfig.json --noEmit`: editor and engine types.
 
 Implementation uses TypeScript's JSX parser and original-range patches. No OpenSlide source code is vendored.
+
+## Inspector protocol
+
+The viewer's inspector is part of the production core; the source editor remains development-only.
+`EditorLauncher` discovers the existing toolbar, panel, canvas, and overlay slots, announces
+`promptslide:editor-ready`, and handles `promptslide:editor-request` to open or request a guarded
+close. `promptslide:editor-state` acknowledges actual open/closed state. The viewer commits a
+pending tab change only after a closed acknowledgement; `promptslide:editor-close-cancelled`
+clears that pending change. Source edits and their history stay in the editor's own React root.

package/src/editor/plugin.mjs

@@ -60,7 +60,7 @@ const dispose = mountEditor(slides, theme, ${JSON.stringify(token)}, import.meta
 if (import.meta.hot) {
   import.meta.hot.accept();
   import.meta.hot.dispose((data) => {
-    data.open = document.querySelector('.ps-edit-action[aria-pressed="true"]') !== null;
+    data.open = document.querySelector('[data-ps-edit-action][aria-pressed="true"]') !== null;
     dispose?.();
     window.dispatchEvent(new Event("promptslide:editor-refresh"));
   });

package/src/editor/studio.css

@@ -1,29 +1,5 @@
 /* Editor chrome lives in sibling portals. No selector reaches slide content.
    CSS updates must remain independent of the editor's buffered source draft. */
-.ps-edit-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 32px;
-  padding: 0 10px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  font: 500 13px/1 system-ui;
-  color: #a3a3a3;
-  background: transparent;
-  cursor: pointer;
-}
-.ps-edit-action:hover {
-  color: #fafafa;
-  background: #262626;
-}
-.ps-edit-action.active {
-  padding: 0 8px;
-  border-color: #ff6b3560;
-  background: #ff6b351a;
-  color: #ff8b60;
-}
 [data-ps-viewer-toolbar] button:disabled {
   opacity: 0.35;
   cursor: default;
@@ -34,7 +10,6 @@
   display: flex;
   flex-direction: column;
   background: #0a0a0a;
-  border-left: 1px solid #262626;
   color: #e5e5e5;
   font-family: inherit;
   font-size: 12px;
@@ -92,8 +67,7 @@
 .ps-panel button:focus-visible,
 .ps-panel input:focus-visible,
 .ps-panel select:focus-visible,
-.ps-panel textarea:focus-visible,
-.ps-edit-action:focus-visible {
+.ps-panel textarea:focus-visible {
   outline: 2px solid #ff6b35;
   outline-offset: 2px;
 }

package/src/editor/studio.tsx

@@ -31,9 +31,10 @@ import {
   MoveVertical,
   RotateCw
 } from "lucide-react"
-import { useEffect, useLayoutEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"
 import { createPortal } from "react-dom"
 
+import { ToolbarAction } from "../core/toolbar-action"
 import { aligned, snap, translated, type Rect } from "./geometry"
 import "./studio.css"
 
@@ -525,6 +526,8 @@ function Studio({
   useEffect(() => {
     // Prevent the presentation's global keyboard handler from advancing behind the editor.
     const handler = (event: KeyboardEvent) => {
+      // Inspector navigation belongs to the core viewer, including its keyboard controls.
+      if ((event.target as HTMLElement).closest("[data-ps-inspector-header]")) return
       event.stopImmediatePropagation()
       if (confirmClose) return
       if (busy) return
@@ -751,7 +754,8 @@ function Studio({
         surface.contains(target) ||
         overlay.contains(target) ||
         panel.contains(target) ||
-        (target instanceof Element && target.closest("[data-ps-viewer-toolbar]"))
+        (target instanceof Element &&
+          target.closest("[data-ps-viewer-toolbar], [data-ps-inspector-header]"))
       )
         return
       if (inlineText !== null && current && inlineText !== (currentEdit?.text ?? currentText))
@@ -803,7 +807,15 @@ function Studio({
     }
     close()
   }
+  function cancelClosing() {
+    setConfirmClose(false)
+    window.dispatchEvent(new Event("promptslide:editor-close-cancelled"))
+  }
   function finishEditing() {
+    if (busy) {
+      window.dispatchEvent(new Event("promptslide:editor-close-cancelled"))
+      return
+    }
     if (dirty) {
       setCloseError("")
       setConfirmClose(true)
@@ -887,7 +899,7 @@ function Studio({
             aria-labelledby="ps-close-title"
             onCancel={event => {
               event.preventDefault()
-              if (!busy) setConfirmClose(false)
+              if (!busy) cancelClosing()
             }}
           >
             <h2 id="ps-close-title">Save your changes?</h2>
@@ -901,7 +913,7 @@ function Studio({
               </p>
             )}
             <div className="ps-close-actions">
-              <button disabled={busy} onClick={() => setConfirmClose(false)}>
+              <button disabled={busy} onClick={cancelClosing}>
                 Keep editing
               </button>
               <button
@@ -935,9 +947,6 @@ function Studio({
               <span className="ps-overline">SLIDE EDITOR</span>
               <h2>{current ? selectedName : "Make it yours"}</h2>
             </div>
-            <IconButton label="Done editing" disabled={busy} onClick={finishEditing}>
-              <X size={18} />
-            </IconButton>
           </div>
           <div className="ps-panel-tools">
             <div className="ps-tabs" role="tablist" aria-label="Editing tools">
@@ -1880,18 +1889,6 @@ export function EditorLauncher({
   initiallyOpen?: boolean
 }) {
   const [open, setOpen] = useState(initiallyOpen)
-  const [mounted, setMounted] = useState(initiallyOpen)
-  useEffect(() => {
-    if (open) {
-      setMounted(true)
-      return
-    }
-    const timeout = window.setTimeout(
-      () => setMounted(false),
-      window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 200
-    )
-    return () => window.clearTimeout(timeout)
-  }, [open])
   const [slots, setSlots] = useState<{
     toolbar: HTMLElement
     panel: HTMLElement
@@ -1919,30 +1916,49 @@ export function EditorLauncher({
     observer.observe(document.getElementById("root")!, { childList: true, subtree: true })
     return () => observer.disconnect()
   }, [])
-  const toggle = (value: boolean) => {
+  const toggle = useCallback((value: boolean) => {
     setOpen(value)
     window.dispatchEvent(new CustomEvent("promptslide:editor-state", { detail: { open: value } }))
-  }
+  }, [])
+  const openRef = useRef(open)
+  openRef.current = open
+  useEffect(() => {
+    if (!slots) return
+    window.dispatchEvent(
+      new CustomEvent("promptslide:editor-ready", { detail: { available: true } })
+    )
+    if (openRef.current)
+      window.dispatchEvent(new CustomEvent("promptslide:editor-state", { detail: { open: true } }))
+    const onRequest = (event: Event) => {
+      if ((event as CustomEvent).detail?.open) toggle(true)
+      else window.dispatchEvent(new Event("promptslide:editor-done"))
+    }
+    window.addEventListener("promptslide:editor-request", onRequest)
+    return () => {
+      window.removeEventListener("promptslide:editor-request", onRequest)
+      window.dispatchEvent(
+        new CustomEvent("promptslide:editor-ready", { detail: { available: false } })
+      )
+    }
+  }, [slots, toggle])
   if (!slots) return null
   return (
     <>
       {createPortal(
-        <button
-          className={`ps-edit-action ${open ? "active" : ""}`}
-          aria-label="Edit slide"
-          title="Edit slide"
-          aria-pressed={open}
+        <ToolbarAction
+          data-ps-edit-action
+          label="Edit slide"
+          selected={open}
           onClick={() => {
             if (!open) toggle(true)
             else window.dispatchEvent(new Event("promptslide:editor-done"))
           }}
         >
           <Pencil size={15} />
-          {!open && <span>Edit</span>}
-        </button>,
+        </ToolbarAction>,
         slots.toolbar
       )}
-      {mounted && <Studio token={token} close={() => toggle(false)} {...slots} />}
+      {open && <Studio token={token} close={() => toggle(false)} {...slots} />}
     </>
   )
 }

package/src/utils/deck-config.mjs

@@ -1,6 +1,8 @@
 import { readFileSync, writeFileSync, existsSync } from "node:fs"
 import { join } from "node:path"
 
+import { DEFAULT_LOOP_CONFIG, readLoopConfig, writeLoopConfig } from "./loop-config.mjs"
+
 const DECK_CONFIG_PATH = "src/deck-config.ts"
 
 /**
@@ -224,6 +226,8 @@ export function replaceDeckConfig(cwd, slides, opts = {}) {
   ].join("\n")
 
   writeFileSync(configPath, content, "utf-8")
+  if (opts.loopConfig !== undefined) writeLoopConfig(cwd, opts.loopConfig)
+  else if (!existsSync(join(cwd, "loop-config.json"))) writeLoopConfig(cwd, DEFAULT_LOOP_CONFIG)
   return true
 }
 
@@ -310,6 +314,8 @@ export function parseDeckConfig(cwd) {
   if (slides.length === 0) return null
 
   const result = { slides }
+  const loopConfig = readLoopConfig(cwd)
+  if (loopConfig) result.loopConfig = loopConfig
   if (transition) result.transition = transition
   if (directionalTransition !== undefined) result.directionalTransition = directionalTransition
   return result

package/src/utils/loop-config.mjs

@@ -0,0 +1,70 @@
+import { randomUUID } from "node:crypto"
+import { existsSync, readFileSync, renameSync, unlinkSync, writeFileSync, lstatSync } from "node:fs"
+import { join } from "node:path"
+
+import { DEFAULT_LOOP_CONFIG, validateLoopConfig } from "../core/loop/config.mjs"
+
+export function readLoopConfig(root) {
+  const path = join(root, "loop-config.json")
+  if (!existsSync(path)) return undefined
+  if (lstatSync(path).isSymbolicLink()) throw new Error("loop-config.json must be a regular file")
+  return validateLoopConfig(JSON.parse(readFileSync(path, "utf8")))
+}
+
+export function writeLoopConfig(root, config) {
+  const value = validateLoopConfig(config)
+  const path = join(root, "loop-config.json")
+  if (existsSync(path) && lstatSync(path).isSymbolicLink())
+    throw new Error("loop-config.json must be a regular file")
+  const temporary = join(root, `.loop-config-${randomUUID()}.tmp`)
+  try {
+    writeFileSync(temporary, JSON.stringify(value, null, 2) + "\n", { flag: "wx" })
+    renameSync(temporary, path)
+  } finally {
+    if (existsSync(temporary)) unlinkSync(temporary)
+  }
+}
+
+export function loopConfigMiddleware(root, onSaved = () => {}) {
+  return (req, res, next) => {
+    if (req.url !== "/__promptslide_loop") return next()
+    if (req.method !== "POST") {
+      res.statusCode = 405
+      return res.end()
+    }
+    const host = req.headers.host || ""
+    const remote = req.socket.remoteAddress
+    if (
+      !/^(localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/.test(host) ||
+      !["127.0.0.1", "::1", "::ffff:127.0.0.1"].includes(remote) ||
+      req.headers.origin !== `http://${host}` ||
+      !req.headers["content-type"]?.startsWith("application/json")
+    ) {
+      res.statusCode = 403
+      return res.end("Loop settings can only be saved from local Studio.")
+    }
+    let body = ""
+    req.on("data", chunk => {
+      body += chunk
+      if (Buffer.byteLength(body) > 65536) {
+        res.statusCode = 413
+        res.end()
+        req.destroy()
+      }
+    })
+    req.on("end", () => {
+      if (res.writableEnded) return
+      try {
+        writeLoopConfig(root, JSON.parse(body))
+        onSaved()
+        res.statusCode = 204
+        res.end()
+      } catch {
+        res.statusCode = 400
+        res.end("Invalid loop settings or project file could not be written.")
+      }
+    })
+  }
+}
+
+export { DEFAULT_LOOP_CONFIG }

package/src/vite/plugin.mjs

@@ -2,6 +2,7 @@ import { readFileSync, writeFileSync, existsSync } from "node:fs"
 import { join, resolve, sep, extname } from "node:path"
 
 import { bold, dim } from "../utils/ansi.mjs"
+import { readLoopConfig, DEFAULT_LOOP_CONFIG, loopConfigMiddleware } from "../utils/loop-config.mjs"
 import { projectIdentity } from "../utils/studio-discovery.mjs"
 
 /** Normalize a path to forward slashes so it can be used in ES module import strings on Windows. */
@@ -84,9 +85,11 @@ import { StrictMode, createElement } from "react"
 import { createRoot } from "react-dom/client"
 import "${r}/src/globals.css"
 import App from "${r}/src/App"
+import { LoopConfigProvider } from "promptslide"
+const loopConfig = ${JSON.stringify(readLoopConfig(root) ?? DEFAULT_LOOP_CONFIG)}
 
 createRoot(document.getElementById("root")).render(
-  createElement(StrictMode, null, createElement(App))
+  createElement(StrictMode, null, createElement(LoopConfigProvider, { config: loopConfig }, createElement(App)))
 )
 `
 }
@@ -256,7 +259,7 @@ export function promptslidePlugin({ root: initialRoot } = {}) {
       return {
         server: {
           watch: {
-            ignored: ["**/annotations.json"]
+            ignored: ["**/annotations.json", "**/.loop-config-*.tmp"]
           }
         }
       }
@@ -284,6 +287,19 @@ export function promptslidePlugin({ root: initialRoot } = {}) {
     },
 
     configureServer(server) {
+      const invalidateLoopConfig = () => {
+        const entry = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ENTRY_ID)
+        if (entry) server.moduleGraph.invalidateModule(entry)
+      }
+      const loopFileChanged = path => {
+        if (resolve(path) === resolve(root, "loop-config.json")) invalidateLoopConfig()
+      }
+      // New page loads see the saved file without interrupting the current presentation.
+      server.watcher
+        .on("change", loopFileChanged)
+        .on("add", loopFileChanged)
+        .on("unlink", loopFileChanged)
+      server.middlewares.use(loopConfigMiddleware(root, invalidateLoopConfig))
       server.middlewares.use(async (req, res, next) => {
         if (req.method !== "GET" || req.url !== "/__promptslide_pdf") return next()
         try {

package/templates/default/src/deck-config.ts

@@ -3,6 +3,6 @@ import { SlideTitle } from "@/slides/slide-title";
 import { SlideExample } from "@/slides/slide-example";
 
 export const slides: SlideConfig[] = [
-  { id: "title", component: SlideTitle, steps: 0 },
-  { id: "example", component: SlideExample, steps: 2 },
+  { id: "title", title: "Introduction", component: SlideTitle, steps: 0 },
+  { id: "example", title: "Example", component: SlideExample, steps: 2 },
 ];