promptslide 0.3.17 → 0.3.18

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "promptslide",
-  "version": "0.3.17",
+  "version": "0.3.18",
   "description": "CLI and slide engine for PromptSlide presentations",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./src/commands/*": "./src/commands/*"
+  "keywords": [
+    "cli",
+    "presentations",
+    "promptslide",
+    "react",
+    "slides",
+    "vite"
+  ],
+  "license": "MIT",
+  "author": "prompticeu",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/prompticeu/promptslide.git"
   },
   "bin": {
     "promptslide": "src/index.mjs"
@@ -22,47 +26,43 @@
     "CHANGELOG.md",
     "README.md"
   ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./src/commands/*": "./src/commands/*"
+  },
   "scripts": {
     "build": "tsup",
     "test": "node --test test/*.test.mjs",
     "prepublishOnly": "npm run build"
   },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/prompticeu/promptslide.git"
-  },
-  "author": "prompticeu",
-  "keywords": [
-    "slides",
-    "presentations",
-    "cli",
-    "react",
-    "promptslide",
-    "vite"
-  ],
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.13",
     "@vitejs/plugin-react": "^4.5.2",
     "clsx": "^2.1.1",
     "lucide-react": "^0.552.0",
+    "playwright": "^1.50.0",
     "postcss": "^8.5.6",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.13",
-    "playwright": "^1.50.0",
+    "typescript": "^5.9.3",
     "vite": "^6.3.5"
   },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1"
+  },
   "peerDependencies": {
     "framer-motion": "^12.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "devDependencies": {
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
-  },
   "engines": {
     "node": ">=18.0.0"
   }

package/src/commands/studio.mjs

@@ -11,7 +11,7 @@ export async function studio(args) {
   const port = portArg ? parseInt(portArg.split("=")[1], 10) : 5173
   const hasHost = args.includes("--host") || args.some(a => a.startsWith("--host="))
   const hostArg = args.find(a => a.startsWith("--host="))
-  const host = hasHost ? (hostArg ? hostArg.split("=")[1] || "0.0.0.0" : "0.0.0.0") : undefined
+  const host = hasHost ? (hostArg ? hostArg.split("=")[1] || "0.0.0.0" : "0.0.0.0") : "127.0.0.1"
 
   ensureTsConfig(cwd)
 
@@ -19,13 +19,14 @@ export async function studio(args) {
   console.log(`  ${bold("promptslide")} ${dim("studio")}`)
   console.log()
 
-  const config = createViteConfig({ cwd, mode: "development" })
+  const config = createViteConfig({ cwd, mode: "development", editor: !hasHost })
   const server = await createServer({
     ...config,
     server: {
       port,
+      host,
       strictPort: false,
-      ...(host && { host, allowedHosts: true })
+      ...(hasHost && { allowedHosts: true })
     }
   })
 

package/src/core/slide-deck.tsx

@@ -238,6 +238,26 @@ export function SlideDeck({
   )
 
   const [viewMode, setViewMode] = useState<ViewMode>("slide")
+  const [isEditorOpen, setIsEditorOpen] = useState(false)
+  const [editorRevision, setEditorRevision] = useState(0)
+  useEffect(() => {
+    const onEditorState = (event: Event) => {
+      const open = Boolean((event as CustomEvent).detail?.open)
+      setIsEditorOpen(open)
+      if (open) {
+        setViewMode("slide")
+        setIsAnnotationMode(false)
+        setShowAnnotationPanel(false)
+      }
+    }
+    const refreshEditor = () => setEditorRevision(value => value + 1)
+    window.addEventListener("promptslide:editor-state", onEditorState)
+    window.addEventListener("promptslide:editor-refresh", refreshEditor)
+    return () => {
+      window.removeEventListener("promptslide:editor-state", onEditorState)
+      window.removeEventListener("promptslide:editor-refresh", refreshEditor)
+    }
+  }, [])
   const [isPresentationMode, setIsPresentationMode] = useState(false)
   const [viewportWidth, setViewportWidth] = useState(() =>
     typeof window === "undefined" ? 1280 : window.innerWidth
@@ -512,6 +532,7 @@ export function SlideDeck({
       if (e.altKey || e.ctrlKey || e.metaKey) return
       const key = e.key.toLowerCase()
       if (e.repeat && "fvglcdt".includes(key)) return
+      if (isEditorOpen && ["f", "v", "g", "l", "c", "d"].includes(key)) return
 
       if (key === "f") {
         e.preventDefault()
@@ -574,6 +595,7 @@ export function SlideDeck({
     viewMode,
     togglePresentationMode,
     isAnnotationMode,
+    isEditorOpen,
     isPresentationMode,
     setThumbnailRailOpen,
     showThumbnailRail,
@@ -581,9 +603,33 @@ export function SlideDeck({
     handleExportPdf
   ])
 
+  const editorPanelWidth = viewportWidth <= 850 ? 280 : 320
+
   return (
     <div className="min-h-screen w-full bg-neutral-950 text-foreground">
       <style>{`
+        .slide-thumbnail-scroll-area {
+          scrollbar-width: thin;
+          scrollbar-color: #404040 transparent;
+        }
+        .slide-thumbnail-scroll-area::-webkit-scrollbar {
+          width: 10px;
+        }
+        .slide-thumbnail-scroll-area::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .slide-thumbnail-scroll-area::-webkit-scrollbar-thumb {
+          background-color: #404040;
+          border: 3px solid transparent;
+          border-radius: 9999px;
+          background-clip: padding-box;
+        }
+        .slide-thumbnail-scroll-area::-webkit-scrollbar-thumb:hover {
+          background-color: #525252;
+        }
+        .slide-thumbnail-scroll-area::-webkit-scrollbar-corner {
+          background: transparent;
+        }
         @media print {
           .list-slide-canvas {
             transform: scale(1.5) !important;
@@ -610,11 +656,19 @@ export function SlideDeck({
 
       {/* Toolbar */}
       <div
+        data-ps-viewer-toolbar
+        style={
+          isEditorOpen
+            ? { right: editorPanelWidth + 16, maxWidth: `calc(100vw - ${editorPanelWidth + 32}px)` }
+            : undefined
+        }
         className={cn(
           "fixed top-4 z-50 flex gap-1 rounded-lg border border-neutral-800 bg-neutral-950/90 p-1 backdrop-blur-sm transition-[right] duration-200 ease-out print:hidden",
           (isPresentationMode || (isNarrowViewport && isAnnotationMode && showAnnotationPanel)) &&
             "hidden",
-          isAnnotationMode && showAnnotationPanel ? "right-[21rem]" : "right-4"
+          isEditorOpen && "flex-wrap",
+          isEditorOpen && viewportWidth <= 850 && "[&_button:disabled]:hidden [&>div]:hidden",
+          !isEditorOpen && (isAnnotationMode && showAnnotationPanel ? "right-[21rem]" : "right-4")
         )}
       >
         <button
@@ -623,6 +677,7 @@ export function SlideDeck({
             "rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white",
             viewMode === "slide" && "bg-neutral-800 text-white"
           )}
+          disabled={isEditorOpen}
           title="Presentation View (V)"
         >
           <Monitor className="h-4 w-4" />
@@ -633,6 +688,7 @@ export function SlideDeck({
             "rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white",
             viewMode === "list" && "bg-neutral-800 text-white"
           )}
+          disabled={isEditorOpen}
           title="List View (L)"
         >
           <List className="h-4 w-4" />
@@ -643,6 +699,7 @@ export function SlideDeck({
             "rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white",
             viewMode === "grid" && "bg-neutral-800 text-white"
           )}
+          disabled={isEditorOpen}
           title="Grid View (G)"
         >
           <Grid3X3 className="h-4 w-4" />
@@ -653,14 +710,18 @@ export function SlideDeck({
         <button
           onClick={toggleCommentMode}
           className={cn(
-            "relative inline-flex h-8 items-center justify-center rounded-md transition-colors",
+            "relative inline-flex h-8 items-center justify-center gap-1.5 rounded-md font-[family-name:system-ui] text-[13px] leading-none font-medium transition-colors",
             isAnnotationMode
               ? "border border-[#FF6B35]/50 bg-[#FF6B35]/15 p-[7px] text-[#FF6B35] hover:border-[#FF6B35] hover:bg-[#FF6B35]/25"
-              : "p-2 text-neutral-400 hover:bg-neutral-800 hover:text-white"
+              : "px-2.5 text-neutral-400 hover:bg-neutral-800 hover:text-white"
           )}
+          disabled={isEditorOpen}
+          aria-label="Comment"
+          aria-pressed={isAnnotationMode}
           title="Comment (C)"
         >
-          <MessageCircle className="h-4 w-4" />
+          <MessageCircle className="h-[15px] w-[15px] shrink-0" />
+          {!isAnnotationMode && <span>Comment</span>}
           {openCount > 0 && (
             <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-[#FF6B35] text-[10px] font-bold text-white">
               {openCount}
@@ -668,11 +729,14 @@ export function SlideDeck({
           )}
         </button>
 
+        <span data-ps-editor-toolbar className="contents" />
+
         <div className="mx-1 w-px bg-neutral-800" />
 
         <button
           onClick={handleExportPdf}
           className="rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white"
+          disabled={isEditorOpen}
           title="Download PDF (D)"
         >
           <Download className="h-4 w-4" />
@@ -680,6 +744,7 @@ export function SlideDeck({
         <button
           onClick={togglePresentationMode}
           className="inline-flex h-8 items-center justify-center gap-1.5 rounded-md border border-[#FF6B35]/50 bg-[#FF6B35]/15 px-3 text-sm font-semibold text-[#FF6B35] transition-colors hover:border-[#FF6B35] hover:bg-[#FF6B35]/25"
+          disabled={isEditorOpen}
           title="Present (F)"
         >
           <Play className="h-3.5 w-3.5 fill-current" />
@@ -730,7 +795,7 @@ export function SlideDeck({
                         <PanelLeftClose className="h-4 w-4" />
                       </button>
                     </div>
-                    <div className="min-h-0 flex-1 space-y-3 overflow-y-auto p-3">
+                    <div className="slide-thumbnail-scroll-area min-h-0 flex-1 space-y-3 overflow-y-auto p-3">
                       {slides.map((slideConfig, index) => (
                         <button
                           key={slideConfig.id ?? index}
@@ -883,7 +948,10 @@ export function SlideDeck({
                 >
                   <div
                     ref={slideContainerRef}
-                    className="absolute top-0 left-0 overflow-hidden"
+                    data-ps-editor-canvas
+                    tabIndex={-1}
+                    data-slide-index={currentSlide}
+                    className="absolute top-0 left-0 overflow-hidden outline-none"
                     style={{
                       width: SLIDE_DIMENSIONS.width,
                       height: SLIDE_DIMENSIONS.height,
@@ -891,6 +959,7 @@ export function SlideDeck({
                     }}
                   >
                     <SlideRenderer
+                      key={editorRevision}
                       slides={slides}
                       currentSlide={currentSlide}
                       animationStep={animationStep}
@@ -915,6 +984,10 @@ export function SlideDeck({
                       />
                     )}
                   </div>
+                  <div
+                    data-ps-editor-overlay
+                    className="pointer-events-none absolute inset-0 z-20"
+                  />
                 </div>
               )}
             </LayoutGroup>
@@ -945,6 +1018,15 @@ export function SlideDeck({
             )}
           </div>
 
+          <div
+            data-ps-editor-panel
+            data-open={isEditorOpen}
+            aria-hidden={!isEditorOpen}
+            inert={!isEditorOpen}
+            className="h-full shrink-0 overflow-hidden transition-[width] duration-200 ease-out motion-reduce:transition-none"
+            style={{ width: isEditorOpen ? editorPanelWidth : 0 }}
+          />
+
           {/* Annotation Panel — beside the slide */}
           {!isPresentationMode && (
             <div

package/src/core/slide-renderer.tsx

@@ -58,6 +58,7 @@ export function SlideRenderer({
     <AnimatePresence initial={false}>
       <motion.div
         key={currentSlide}
+        data-slide-render-index={currentSlide}
         variants={slideVariants}
         initial="enter"
         animate="center"
@@ -75,14 +76,8 @@ export function SlideRenderer({
           totalSteps={totalSteps}
           showAllAnimations={showAllAnimations}
         >
-          <SlideErrorBoundary
-            slideIndex={currentSlide}
-            slideTitle={slides[currentSlide]?.title}
-          >
-            <CurrentSlideComponent
-              slideNumber={currentSlide + 1}
-              totalSlides={slides.length}
-            />
+          <SlideErrorBoundary slideIndex={currentSlide} slideTitle={slides[currentSlide]?.title}>
+            <CurrentSlideComponent slideNumber={currentSlide + 1} totalSlides={slides.length} />
           </SlideErrorBoundary>
         </AnimationProvider>
       </motion.div>

package/src/editor/README.md

@@ -0,0 +1,35 @@
+# 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.
+
+## Workflow
+
+- Double-click literal text to edit it in place. Select an existing element, or use Slide elements. Shift-click selects several elements. Double-click a selected group to reach the element under the pointer; click outside the slide to deselect.
+- Edit literal text and title/subtitle/eyebrow properties, appearance, image URLs, or public asset paths in Design. Arrange contains positioning and alignment controls.
+- Drag selection outlines to move. The lower handle resizes; the upper handle rotates. Arrow keys nudge by one design pixel, Shift by ten. Alt disables snapping. All geometry is measured in the 1280 × 720 design canvas.
+- Align selected elements along either axis or distribute three or more with equal gaps. Bring forward / Send back set stacking order.
+- 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.
+- 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.
+
+## Source semantics
+
+Instrumentation adds source coordinates and a SHA-256 file revision only to the transformed development module. The original TSX is unchanged until Save. Intrinsic DOM elements and `motion.*` elements are supported. Source files must resolve inside the project's `src/` directory; symlinks outside it are rejected.
+
+A style change belongs to a JSX definition, so it affects all instances of that definition, including shared layouts. Movement uses the individual CSS `translate` property, preserving normal flex/grid flow and existing Motion transforms; rotation uses `rotate`. Resizing sets explicit frame dimensions. It does not convert the deck into an absolute-positioned document.
+
+For direct local `array.map(item => <p>{item.title}</p>)` expressions over literal object arrays, text edits address the selected array item. Imported arrays, spreads, ambiguous bindings, computed expressions, and mixed children are intentionally read-only. Edit those expressions in code. Simple local component text props are resolved automatically when their rendered text is selected, without requiring the component to forward DOM metadata. Ambiguous or imported prop relationships remain unsupported. Shared appearance controls require opting in when multiple matching instances are present on the current slide.
+
+Every batch checks all file revisions and validates all resulting TSX syntax before writing. Stale edits receive HTTP 409. Export or discard the draft and reselect from the current source; there is no force-overwrite button. Deleting an element discards pending edits on that element and its descendants. Other parent/child structural edits that overlap must be saved separately. This is optimistic concurrency protection, not a filesystem transaction across external processes. A save failure rolls back files still matching this operation's output.
+
+The endpoint uses a per-server random token, checks cross-site fetches, limits payload size and operation counts, and only runs in Vite serve mode. Studio enables editing on its default loopback interface. Passing `--host` (including `--host=...`) disables the editor, source instrumentation, and editor endpoint so shared previews cannot edit source files. The client token is a request guard, not authentication for network clients.
+
+## Verification
+
+- `node --test packages/cli/test/editor.test.mjs`: source edits, escaping, conflicts, batch validation, path restrictions, and array instances.
+- `node packages/cli/test/editor.browser.mjs`: isolated temporary deck; text/history, save/reload, concurrent edits, scaled dragging, and production bundle exclusion. Requires the package's Playwright Chromium installation.
+- `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.

package/src/editor/geometry.ts

@@ -0,0 +1,76 @@
+export interface Rect {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+export function translated(value: string, dx: number, dy: number) {
+  // Computed translate may contain percentages or calc() with spaces. Keep
+  // those units so movement does not remove centering or break after resizing.
+  const axes: string[] = []
+  let depth = 0,
+    start = 0
+  const input = value.trim()
+  for (let i = 0; i <= input.length; i++) {
+    const char = input[i]
+    if (char === "(") depth++
+    if (char === ")") depth--
+    if (i === input.length || (depth === 0 && /\s/.test(char!))) {
+      if (i > start) axes.push(input.slice(start, i))
+      start = i + 1
+    }
+  }
+  if (axes[0] === "none") axes.length = 0
+  const offset = (axis: string, delta: number) => {
+    if (!delta) return axis
+    if (/^-?(?:\d*\.)?\d+px$/.test(axis)) return `${parseFloat(axis) + delta}px`
+    return `calc(${axis} ${delta < 0 ? "-" : "+"} ${Math.abs(delta)}px)`
+  }
+  return [offset(axes[0] || "0px", dx), offset(axes[1] || "0px", dy), ...axes.slice(2)].join(" ")
+}
+export function snap(rect: Rect, others: Rect[], tolerance = 6) {
+  const xs = [0, 640, 1280, ...others.flatMap(r => [r.x, r.x + r.width / 2, r.x + r.width])]
+  const ys = [0, 360, 720, ...others.flatMap(r => [r.y, r.y + r.height / 2, r.y + r.height])]
+  const closest = (values: number[], targets: number[]) => {
+    let delta = tolerance + 1
+    let guide: number | undefined
+    for (const v of values)
+      for (const t of targets)
+        if (Math.abs(t - v) < Math.abs(delta)) {
+          delta = t - v
+          guide = t
+        }
+    return Math.abs(delta) <= tolerance ? { delta, guide } : { delta: 0, guide: undefined }
+  }
+  const x = closest([rect.x, rect.x + rect.width / 2, rect.x + rect.width], xs)
+  const y = closest([rect.y, rect.y + rect.height / 2, rect.y + rect.height], ys)
+  return { x: rect.x + x.delta, y: rect.y + y.delta, guideX: x.guide, guideY: y.guide }
+}
+export function aligned(
+  rects: Rect[],
+  axis: "x" | "y",
+  mode: "start" | "center" | "end" | "distribute"
+) {
+  const size = axis === "x" ? "width" : "height"
+  if (mode === "distribute") {
+    if (rects.length < 3) return rects.map(r => r[axis])
+    const sorted = rects.map((r, i) => ({ ...r, i })).sort((a, b) => a[axis] - b[axis])
+    const first = sorted[0]!,
+      last = sorted[sorted.length - 1]!
+    const gap =
+      (last[axis] + last[size] - first[axis] - sorted.reduce((s, r) => s + r[size], 0)) /
+      (rects.length - 1)
+    const result: number[] = []
+    let pos = first[axis]
+    for (const r of sorted) {
+      result[r.i] = pos
+      pos += r[size] + gap
+    }
+    return result
+  }
+  const min = Math.min(...rects.map(r => r[axis])),
+    max = Math.max(...rects.map(r => r[axis] + r[size]))
+  return rects.map(r =>
+    mode === "start" ? min : mode === "end" ? max - r[size] : (min + max - r[size]) / 2
+  )
+}

package/src/editor/mount.ts

@@ -0,0 +1,24 @@
+import { createElement } from "react"
+import { createRoot } from "react-dom/client"
+
+import { EditorLauncher } from "./studio"
+
+// Keep mounting outside the component module so React Fast Refresh can retain
+// the open editor, its draft, and its history when the sidebar code changes.
+export function mountEditor(
+  _slides: unknown,
+  _theme: unknown,
+  token: string,
+  initiallyOpen = false
+) {
+  if (document.getElementById("promptslide-editor-root")) return
+  const host = document.createElement("div")
+  host.id = "promptslide-editor-root"
+  document.body.appendChild(host)
+  const root = createRoot(host)
+  root.render(createElement(EditorLauncher, { token, initiallyOpen }))
+  return () => {
+    root.unmount()
+    host.remove()
+  }
+}