promptslide 0.3.18 → 0.3.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "promptslide",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "description": "CLI and slide engine for PromptSlide presentations",
   "keywords": [
     "cli",

package/src/commands/build.mjs

@@ -4,6 +4,7 @@ import { resolve, join } from "node:path"
 import { build as viteBuild } from "vite"
 
 import { bold, green, dim } from "../utils/ansi.mjs"
+import { readLoopConfig, DEFAULT_LOOP_CONFIG } from "../utils/loop-config.mjs"
 import { ensureTsConfig } from "../utils/tsconfig.mjs"
 import { createViteConfig } from "../vite/config.mjs"
 
@@ -36,9 +37,11 @@ import { StrictMode, createElement } from "react"
 import { createRoot } from "react-dom/client"
 import "${globals}"
 import App from "${app}"
+import { LoopConfigProvider } from "promptslide"
+const loopConfig = ${JSON.stringify(readLoopConfig(cwd) ?? DEFAULT_LOOP_CONFIG)}
 
 createRoot(document.getElementById("root")).render(
-  createElement(StrictMode, null, createElement(App))
+  createElement(StrictMode, null, createElement(LoopConfigProvider, { config: loopConfig }, createElement(App)))
 )
 `
 }

package/src/commands/clone.mjs

@@ -179,7 +179,9 @@ export async function clone(args) {
     const registrySlideSlugs = collectRegistrySlideSlugs(resolved.items)
     const { available, missing } = partitionDeckSlides(item.meta.slides, registrySlideSlugs)
     if (missing.length > 0) {
-      console.log(`  ${yellow("!")} Skipped ${missing.length} slide(s) listed in the deck but not included in this version:`)
+      console.log(
+        `  ${yellow("!")} Skipped ${missing.length} slide(s) listed in the deck but not included in this version:`
+      )
       console.log(`    ${dim(missing.map(s => s.slug).join(", "))}`)
     }
     const slides = available.map(s => ({
@@ -191,7 +193,8 @@ export async function clone(args) {
     }))
     replaceDeckConfig(targetDir, slides, {
       transition: item.meta.transition,
-      directionalTransition: item.meta.directionalTransition
+      directionalTransition: item.meta.directionalTransition,
+      loopConfig: item.meta.loopConfig
     })
     console.log(
       `  ${green("✓")} Generated ${cyan("deck-config.ts")} ${dim(`(${slides.length} slides)`)}`

package/src/commands/create.mjs

@@ -6,10 +6,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, isValidHex } from "../utils/colors.mjs"
-import { prompt, confirm, 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 { prompt, confirm, 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)
@@ -43,13 +47,17 @@ export async function create(args) {
   const useDefaults = args.includes("--yes") || args.includes("-y")
   const fromIdx = args.findIndex(a => a === "--from")
   const fromSlug = fromIdx >= 0 ? args[fromIdx + 1] : null
-  const filteredArgs = args.filter((a, i) => a !== "--yes" && a !== "-y" && a !== "--from" && !(fromIdx >= 0 && i === fromIdx + 1))
+  const filteredArgs = args.filter(
+    (a, i) => a !== "--yes" && a !== "-y" && a !== "--from" && !(fromIdx >= 0 && i === fromIdx + 1)
+  )
 
   // 1. Parse directory name from args or prompt
   let dirName = filteredArgs[0]
 
   if (dirName === "--help" || dirName === "-h") {
-    console.log(`  ${bold("Usage:")} promptslide create ${dim("[project-directory]")} ${dim("[options]")}`)
+    console.log(
+      `  ${bold("Usage:")} promptslide create ${dim("[project-directory]")} ${dim("[options]")}`
+    )
     console.log()
     console.log(`  Scaffolds a new PromptSlide slide deck project.`)
     console.log()
@@ -80,7 +88,9 @@ export async function create(args) {
     }
 
     if (fromItem.type !== "deck") {
-      console.error(`  ${red("Error:")} "${fromSlug}" is a ${fromItem.type}, not a deck. Use --from with a published deck.`)
+      console.error(
+        `  ${red("Error:")} "${fromSlug}" is a ${fromItem.type}, not a deck. Use --from with a published deck.`
+      )
       closePrompts()
       process.exit(1)
     }
@@ -93,8 +103,12 @@ export async function create(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${fromItem.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${fromItem.promptslideVersion}`)}`
+        )
+        console.log(
+          `    You have ${bold(`v${CLI_VERSION}`)} installed — some slides may need updating.`
+        )
       }
     }
 
@@ -158,7 +172,11 @@ export async function create(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"),
@@ -212,7 +230,10 @@ export async function create(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")
         }
@@ -225,20 +246,26 @@ export async function create(args) {
       const registrySlideSlugs = collectRegistrySlideSlugs(resolved.items)
       const { available, missing } = partitionDeckSlides(fromItem.meta.slides, registrySlideSlugs)
       if (missing.length > 0) {
-        console.log(`  ${yellow("⚠")} Skipped ${missing.length} slide(s) listed in the deck but not included in this version:`)
+        console.log(
+          `  ${yellow("⚠")} Skipped ${missing.length} slide(s) listed in the deck but not included in this version:`
+        )
         console.log(`    ${dim(missing.map(s => s.slug).join(", "))}`)
       }
       const slides = available.map(s => ({
         componentName: s.componentName || toPascalCase(s.slug),
         importPath: `@/slides/${s.slug}`,
+        id: s.id,
         steps: s.steps,
         section: s.section
       }))
       replaceDeckConfig(targetDir, slides, {
         transition: fromItem.meta.transition,
-        directionalTransition: fromItem.meta.directionalTransition
+        directionalTransition: fromItem.meta.directionalTransition,
+        loopConfig: fromItem.meta.loopConfig
       })
-      console.log(`  ${green("✓")} Generated ${cyan("deck-config.ts")} ${dim(`(${slides.length} slides)`)}`)
+      console.log(
+        `  ${green("✓")} Generated ${cyan("deck-config.ts")} ${dim(`(${slides.length} slides)`)}`
+      )
     }
 
     // Add npm dependencies from the deck to package.json
@@ -255,7 +282,9 @@ export async function create(args) {
     }
 
     // New deck identity — deckSlug stays as dirName (set in initial lockfile scaffold)
-    console.log(`  ${dim("Deck slug set to")} ${bold(dirName)} ${dim("(publish will create a new deck)")}`)
+    console.log(
+      `  ${dim("Deck slug set to")} ${bold(dirName)} ${dim("(publish will create a new deck)")}`
+    )
 
     console.log()
   }
@@ -265,7 +294,9 @@ export async function create(args) {
 
   // 9. Install PromptSlide agent skill (defaults to yes; skipped with --yes since skills CLI is interactive)
   if (useDefaults) {
-    console.log(`  ${dim("Tip: Run")} npx skills add prompticeu/promptslide ${dim("to install the agent skill")}`)
+    console.log(
+      `  ${dim("Tip: Run")} npx skills add prompticeu/promptslide ${dim("to install the agent skill")}`
+    )
   } else {
     const installSkill = await confirm("Install PromptSlide agent skill?")
 

package/src/commands/pull.mjs

@@ -5,6 +5,7 @@ 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 { collectRegistrySlideSlugs, partitionDeckSlides } from "../utils/deck-sync.mjs"
 import { confirm, closePrompts } from "../utils/prompts.mjs"
 import {
   fetchRegistryItem,
@@ -17,7 +18,6 @@ import {
   hashFile,
   isFileDirty
 } from "../utils/registry.mjs"
-import { collectRegistrySlideSlugs, partitionDeckSlides } from "../utils/deck-sync.mjs"
 
 export async function pull(args) {
   const cwd = process.cwd()
@@ -184,7 +184,9 @@ export async function pull(args) {
     const registrySlideSlugs = collectRegistrySlideSlugs(resolved.items)
     const { available, missing } = partitionDeckSlides(deckItem.meta.slides, registrySlideSlugs)
     if (missing.length > 0) {
-      console.log(`  ${yellow("!")} Skipped ${missing.length} slide(s) listed in the deck but not included in this version:`)
+      console.log(
+        `  ${yellow("!")} Skipped ${missing.length} slide(s) listed in the deck but not included in this version:`
+      )
       console.log(`    ${dim(missing.map(s => s.slug).join(", "))}`)
     }
     const shouldReplace = await confirm("  Replace deck-config.ts with pulled deck config?", true)
@@ -198,7 +200,8 @@ export async function pull(args) {
       }))
       replaceDeckConfig(cwd, slides, {
         transition: deckItem.meta.transition,
-        directionalTransition: deckItem.meta.directionalTransition
+        directionalTransition: deckItem.meta.directionalTransition,
+        loopConfig: deckItem.meta.loopConfig
       })
       console.log(
         `  ${green("+")} Replaced ${cyan("deck-config.ts")} ${dim(`(${slides.length} slides)`)}`

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

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react"
 import type { Annotation } from "./types"
 
 interface AnnotationPanelProps {
+  embedded?: boolean
   annotations: Annotation[]
   unlinkedAnnotations?: Annotation[]
   selectedId: string | null
@@ -15,6 +16,7 @@ interface AnnotationPanelProps {
 }
 
 export function AnnotationPanel({
+  embedded = false,
   annotations,
   unlinkedAnnotations = [],
   selectedId,
@@ -31,18 +33,22 @@ export function AnnotationPanel({
     annotations.findIndex(a => a.id === annotation.id) + 1
 
   return (
-    <div className="flex h-full w-80 max-w-[90vw] flex-shrink-0 flex-col border-l border-neutral-800 bg-neutral-950 text-white">
-      <div className="flex items-center justify-between border-b border-neutral-800 px-3 py-2">
-        <button
-          onClick={onClose}
-          className="rounded p-2 text-neutral-400 hover:bg-neutral-800 hover:text-white"
-          aria-label="Hide comments"
-          title="Hide comments (C)"
-        >
-          <PanelRightClose className="h-4 w-4" />
-        </button>
-        <span className="text-right text-sm font-semibold">Comments ({total})</span>
-      </div>
+    <div
+      className={`flex h-full max-w-[90vw] flex-shrink-0 flex-col bg-neutral-950 text-white ${embedded ? "w-full" : "w-80 border-l border-neutral-800"}`}
+    >
+      {!embedded && (
+        <div className="flex items-center justify-between border-b border-neutral-800 px-3 py-2">
+          <button
+            onClick={onClose}
+            className="rounded p-2 text-neutral-400 hover:bg-neutral-800 hover:text-white"
+            aria-label="Hide comments"
+            title="Hide comments (C)"
+          >
+            <PanelRightClose className="h-4 w-4" />
+          </button>
+          <span className="text-right text-sm font-semibold">Comments ({total})</span>
+        </div>
+      )}
 
       <div className="min-h-0 flex-1 overflow-y-auto p-3">
         {annotations.length === 0 && unlinkedAnnotations.length === 0 && (

package/src/core/index.ts

@@ -3,6 +3,8 @@ export type {
   SlideProps,
   SlideComponent,
   SlideConfig,
+  LoopConfig,
+  LoopSlideConfig,
   NavigationDirection
 } from "./types"
 
@@ -51,10 +53,7 @@ export { Morph, MorphGroup, MorphItem, MorphText } from "./morph"
 
 // Navigation Hook
 export { useSlideNavigation } from "./use-slide-navigation"
-export type {
-  UseSlideNavigationOptions,
-  UseSlideNavigationReturn
-} from "./use-slide-navigation"
+export type { UseSlideNavigationOptions, UseSlideNavigationReturn } from "./use-slide-navigation"
 
 // Theme
 export { SlideThemeProvider, useTheme } from "./theme-context"
@@ -75,7 +74,14 @@ export { SlideErrorBoundary } from "./slide-error-boundary"
 
 // Annotations
 export { AnnotationOverlay, useAnnotations, createHttpAdapter } from "./annotations"
-export type { Annotation, AnnotationsFile, AnnotationStorageAdapter, AnnotationTarget } from "./annotations"
+export type {
+  Annotation,
+  AnnotationsFile,
+  AnnotationStorageAdapter,
+  AnnotationTarget
+} from "./annotations"
 
 // Utils
 export { cn } from "./utils"
+
+export { LoopConfigProvider } from "./loop/context"

package/src/core/inspector.tsx

@@ -0,0 +1,155 @@
+import type { ReactNode } from "react"
+
+import { X } from "lucide-react"
+import { useId } from "react"
+
+import { cn } from "./utils"
+
+export type InspectorMode = "slide" | "editor" | "comments"
+
+/** Core-owned docking and navigation; development tools portal into the editor slot. */
+export function Inspector({
+  mode,
+  visible,
+  editorAvailable,
+  width,
+  overlay,
+  onSelect,
+  onClose,
+  slideSettings,
+  comments
+}: {
+  mode: InspectorMode | null
+  visible: boolean
+  editorAvailable: boolean
+  width: number
+  overlay: boolean
+  onSelect: (mode: InspectorMode) => void
+  onClose: () => void
+  slideSettings: ReactNode
+  comments: ReactNode
+}) {
+  const prefix = useId()
+  const tabs: { id: InspectorMode; label: string }[] = [
+    { id: "slide", label: "Slide" },
+    ...(editorAvailable ? [{ id: "editor" as const, label: "Elements" }] : []),
+    { id: "comments", label: "Comments" }
+  ]
+  const closeLabel =
+    mode === "editor"
+      ? "Done editing"
+      : mode === "comments"
+        ? "Hide comments"
+        : "Close slide settings"
+  return (
+    <aside
+      data-ps-inspector
+      aria-label="Inspector"
+      aria-hidden={!visible}
+      inert={!visible}
+      className={cn(
+        "h-full shrink-0 overflow-hidden bg-neutral-950 text-white transition-[width,transform] duration-200 ease-out motion-reduce:transition-none print:hidden",
+        overlay && "fixed inset-y-0 right-0 z-[60]",
+        overlay && !visible && "translate-x-full"
+      )}
+      style={{ width: visible ? width : 0, maxWidth: overlay ? "90vw" : undefined }}
+      onKeyDown={event => {
+        // Native button activation must not also advance the presentation.
+        if (
+          (event.key === " " || event.key === "Enter") &&
+          (event.target as HTMLElement).closest("button")
+        )
+          event.stopPropagation()
+      }}
+    >
+      <div className="flex h-full min-h-0 w-full flex-col border-l border-neutral-800">
+        <div
+          data-ps-inspector-header
+          className="flex shrink-0 items-center gap-1 border-b border-neutral-800 px-2 py-2"
+        >
+          <div
+            role="tablist"
+            aria-label="Inspector sections"
+            className="flex min-w-0 flex-1 gap-1"
+            onKeyDown={event => {
+              if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return
+              event.preventDefault()
+              event.stopPropagation()
+              const buttons = Array.from(
+                event.currentTarget.querySelectorAll<HTMLButtonElement>("button")
+              )
+              const index = buttons.indexOf(event.target as HTMLButtonElement)
+              const next =
+                event.key === "Home"
+                  ? 0
+                  : event.key === "End"
+                    ? buttons.length - 1
+                    : (index + (event.key === "ArrowRight" ? 1 : -1) + buttons.length) %
+                      buttons.length
+              buttons[next]?.focus()
+            }}
+          >
+            {tabs.map(tab => (
+              <button
+                key={tab.id}
+                id={`${prefix}-tab-${tab.id}`}
+                role="tab"
+                aria-selected={mode === tab.id}
+                aria-controls={`${prefix}-panel-${tab.id}`}
+                tabIndex={mode === tab.id ? 0 : -1}
+                className={cn(
+                  "rounded-md px-2 py-1.5 text-xs font-medium hover:bg-neutral-800 focus-visible:outline-2 focus-visible:outline-orange-500",
+                  mode === tab.id ? "bg-neutral-800 text-white" : "text-neutral-400"
+                )}
+                onClick={() => onSelect(tab.id)}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+          <button
+            onClick={onClose}
+            aria-label={closeLabel}
+            title={closeLabel}
+            className="shrink-0 rounded-md p-1.5 text-neutral-400 hover:bg-neutral-800 hover:text-white focus-visible:outline-2 focus-visible:outline-orange-500"
+          >
+            <X size={16} />
+          </button>
+        </div>
+        <div
+          id={`${prefix}-panel-slide`}
+          role="tabpanel"
+          aria-labelledby={`${prefix}-tab-slide`}
+          hidden={mode !== "slide"}
+          className="min-h-0 flex-1"
+        >
+          {slideSettings}
+        </div>
+        <div
+          id={`${prefix}-panel-editor`}
+          role="tabpanel"
+          aria-labelledby={`${prefix}-tab-editor`}
+          hidden={mode !== "editor"}
+          className="min-h-0 flex-1"
+        >
+          <div
+            data-ps-editor-panel
+            data-open={mode === "editor" && visible}
+            aria-hidden={mode !== "editor" || !visible}
+            inert={mode !== "editor" || !visible}
+            className="h-full w-full"
+          />
+        </div>
+        <div
+          id={`${prefix}-panel-comments`}
+          role="tabpanel"
+          aria-labelledby={`${prefix}-tab-comments`}
+          hidden={mode !== "comments"}
+          className="min-h-0 flex-1"
+        >
+          {comments}
+        </div>
+      </div>
+    </aside>
+  )
+}

package/src/core/loop/config.d.mts

@@ -0,0 +1,13 @@
+import type { LoopConfig, SlideConfig } from "../types"
+export const DEFAULT_LOOP_CONFIG: LoopConfig
+export function validateLoopConfig(value: unknown): LoopConfig
+export function validDuration(value: unknown): boolean
+export function loopSlideKey(slide: Pick<SlideConfig, "id">, index: number): string
+export function stateDuration(
+  config: LoopConfig,
+  slide: Pick<SlideConfig, "id">,
+  index: number,
+  step: number
+): number
+export function includedSlides(config: LoopConfig, slides: SlideConfig[]): number[]
+export function loopDuration(config: LoopConfig, slides: SlideConfig[]): number

package/src/core/loop/config.mjs

@@ -0,0 +1,65 @@
+export const DEFAULT_LOOP_CONFIG = { version: 1, defaultDuration: 5, slides: {} }
+
+export function validateLoopConfig(value) {
+  if (
+    !value ||
+    value.version !== 1 ||
+    !validDuration(value.defaultDuration) ||
+    !value.slides ||
+    typeof value.slides !== "object" ||
+    Array.isArray(value.slides)
+  ) {
+    throw new Error("Invalid loop settings")
+  }
+  const slides = Object.create(null)
+  if (Object.keys(value.slides).length > 1000) throw new Error("Too many slides")
+  for (const [id, item] of Object.entries(value.slides)) {
+    if (
+      !id ||
+      id.length > 256 ||
+      !item ||
+      typeof item !== "object" ||
+      (item.excluded !== undefined && typeof item.excluded !== "boolean") ||
+      (item.steps !== undefined &&
+        (!Number.isInteger(item.steps) || item.steps < 0 || item.steps > 1000)) ||
+      (item.dwell !== undefined &&
+        (!Array.isArray(item.dwell) ||
+          item.dwell.length > 1001 ||
+          !item.dwell.every(duration => duration === null || validDuration(duration))))
+    )
+      throw new Error(`Invalid timing for ${id}`)
+    slides[id] = {
+      ...(item.excluded !== undefined ? { excluded: item.excluded } : {}),
+      ...(item.steps !== undefined ? { steps: item.steps } : {}),
+      ...(item.dwell !== undefined ? { dwell: [...item.dwell] } : {})
+    }
+  }
+  return { version: 1, defaultDuration: value.defaultDuration, slides }
+}
+
+export function validDuration(value) {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0.1 && value <= 3600
+}
+
+export function loopSlideKey(slide, index) {
+  return slide.id || String(index + 1)
+}
+
+export function stateDuration(config, slide, index, step) {
+  return config.slides[loopSlideKey(slide, index)]?.dwell?.[step] ?? config.defaultDuration
+}
+
+export function includedSlides(config, slides) {
+  return slides.flatMap((slide, index) =>
+    config.slides[loopSlideKey(slide, index)]?.excluded ? [] : [index]
+  )
+}
+
+export function loopDuration(config, slides) {
+  return includedSlides(config, slides).reduce((total, index) => {
+    const slide = slides[index]
+    for (let step = 0; step <= slide.steps; step++)
+      total += stateDuration(config, slide, index, step)
+    return total
+  }, 0)
+}

package/src/core/loop/context.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext, type ReactNode } from "react"
+
+import type { LoopConfig } from "../types"
+
+import { DEFAULT_LOOP_CONFIG } from "./config.mjs"
+
+const LoopContext = createContext<LoopConfig>(DEFAULT_LOOP_CONFIG)
+
+/** The CLI supplies the deck's loop-config.json in development and production. */
+export function LoopConfigProvider({
+  config,
+  children
+}: {
+  config: LoopConfig
+  children: ReactNode
+}) {
+  return <LoopContext.Provider value={config}>{children}</LoopContext.Provider>
+}
+
+export const useDefaultLoopConfig = () => useContext(LoopContext)