promptslide 0.3.17 → 0.3.18

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.3.18](https://github.com/prompticeu/promptslide/compare/promptslide-v0.3.17...promptslide-v0.3.18) (2026-10-23)
+
+
+### Features
+
+* add visual slide editing in studio ([#107](https://github.com/prompticeu/promptslide/issues/107)) ([4dd6651](https://github.com/prompticeu/promptslide/commit/4dd6651269687c6a0d219c8e3b261a9ac11b7876))
+
 ## [0.3.17](https://github.com/prompticeu/promptslide/compare/promptslide-v0.3.16...promptslide-v0.3.17) (2026-09-26)
 
 

package/dist/index.js

@@ -616,6 +616,7 @@ function SlideRenderer({
   return /* @__PURE__ */ jsx6(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx6(
     motion3.div,
     {
+      "data-slide-render-index": currentSlide,
       variants: slideVariants,
       initial: "enter",
       animate: "center",
@@ -633,20 +634,7 @@ function SlideRenderer({
           currentStep: animationStep,
           totalSteps,
           showAllAnimations,
-          children: /* @__PURE__ */ jsx6(
-            SlideErrorBoundary,
-            {
-              slideIndex: currentSlide,
-              slideTitle: slides[currentSlide]?.title,
-              children: /* @__PURE__ */ jsx6(
-                CurrentSlideComponent,
-                {
-                  slideNumber: currentSlide + 1,
-                  totalSlides: slides.length
-                }
-              )
-            }
-          )
+          children: /* @__PURE__ */ jsx6(SlideErrorBoundary, { slideIndex: currentSlide, slideTitle: slides[currentSlide]?.title, children: /* @__PURE__ */ jsx6(CurrentSlideComponent, { slideNumber: currentSlide + 1, totalSlides: slides.length }) })
         }
       )
     },
@@ -1641,6 +1629,26 @@ function SlideDeck({
     [effectiveAnnotations, slides]
   );
   const [viewMode, setViewMode] = useState7("slide");
+  const [isEditorOpen, setIsEditorOpen] = useState7(false);
+  const [editorRevision, setEditorRevision] = useState7(0);
+  useEffect7(() => {
+    const onEditorState = (event) => {
+      const open = Boolean(event.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] = useState7(false);
   const [viewportWidth, setViewportWidth] = useState7(
     () => typeof window === "undefined" ? 1280 : window.innerWidth
@@ -1878,6 +1886,7 @@ 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();
         void togglePresentationMode();
@@ -1930,14 +1939,38 @@ function SlideDeck({
     viewMode,
     togglePresentationMode,
     isAnnotationMode,
+    isEditorOpen,
     isPresentationMode,
     setThumbnailRailOpen,
     showThumbnailRail,
     toggleCommentMode,
     handleExportPdf
   ]);
+  const editorPanelWidth = viewportWidth <= 850 ? 280 : 320;
   return /* @__PURE__ */ jsxs6("div", { className: "min-h-screen w-full bg-neutral-950 text-foreground", children: [
     /* @__PURE__ */ jsx12("style", { children: `
+        .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;
@@ -1964,10 +1997,14 @@ function SlideDeck({
     /* @__PURE__ */ jsxs6(
       "div",
       {
+        "data-ps-viewer-toolbar": true,
+        style: isEditorOpen ? { right: editorPanelWidth + 16, maxWidth: `calc(100vw - ${editorPanelWidth + 32}px)` } : void 0,
         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")
         ),
         children: [
           /* @__PURE__ */ jsx12(
@@ -1978,6 +2015,7 @@ 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)",
               children: /* @__PURE__ */ jsx12(Monitor, { className: "h-4 w-4" })
             }
@@ -1990,6 +2028,7 @@ 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)",
               children: /* @__PURE__ */ jsx12(List, { className: "h-4 w-4" })
             }
@@ -2002,6 +2041,7 @@ 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)",
               children: /* @__PURE__ */ jsx12(Grid3X3, { className: "h-4 w-4" })
             }
@@ -2012,22 +2052,28 @@ function SlideDeck({
             {
               onClick: toggleCommentMode,
               className: cn(
-                "relative inline-flex h-8 items-center justify-center rounded-md 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"
+                "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" : "px-2.5 text-neutral-400 hover:bg-neutral-800 hover:text-white"
               ),
+              disabled: isEditorOpen,
+              "aria-label": "Comment",
+              "aria-pressed": isAnnotationMode,
               title: "Comment (C)",
               children: [
-                /* @__PURE__ */ jsx12(MessageCircle, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx12(MessageCircle, { className: "h-[15px] w-[15px] shrink-0" }),
+                !isAnnotationMode && /* @__PURE__ */ jsx12("span", { children: "Comment" }),
                 openCount > 0 && /* @__PURE__ */ jsx12("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", children: openCount })
               ]
             }
           ),
+          /* @__PURE__ */ jsx12("span", { "data-ps-editor-toolbar": true, className: "contents" }),
           /* @__PURE__ */ jsx12("div", { className: "mx-1 w-px bg-neutral-800" }),
           /* @__PURE__ */ jsx12(
             "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)",
               children: /* @__PURE__ */ jsx12(Download, { className: "h-4 w-4" })
             }
@@ -2037,6 +2083,7 @@ function SlideDeck({
             {
               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)",
               children: [
                 /* @__PURE__ */ jsx12(Play, { className: "h-3.5 w-3.5 fill-current" }),
@@ -2094,7 +2141,7 @@ function SlideDeck({
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ jsx12("div", { className: "min-h-0 flex-1 space-y-3 overflow-y-auto p-3", children: slides.map((slideConfig, index) => /* @__PURE__ */ jsxs6(
+                        /* @__PURE__ */ jsx12("div", { className: "slide-thumbnail-scroll-area min-h-0 flex-1 space-y-3 overflow-y-auto p-3", children: slides.map((slideConfig, index) => /* @__PURE__ */ jsxs6(
                           "button",
                           {
                             ref: index === currentSlide ? activeThumbnailRef : void 0,
@@ -2241,54 +2288,67 @@ function SlideDeck({
                       }
                     )
                   }
-                ) : /* @__PURE__ */ jsx12(
+                ) : /* @__PURE__ */ jsxs6(
                   "div",
                   {
                     ref: previewViewportRef,
                     className: "relative aspect-video w-full max-w-7xl overflow-hidden rounded-xl border border-neutral-800 bg-black shadow-2xl",
-                    children: /* @__PURE__ */ jsxs6(
-                      "div",
-                      {
-                        ref: slideContainerRef,
-                        className: "absolute top-0 left-0 overflow-hidden",
-                        style: {
-                          width: SLIDE_DIMENSIONS.width,
-                          height: SLIDE_DIMENSIONS.height,
-                          transformOrigin: "top left"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx12(
-                            SlideRenderer,
-                            {
-                              slides,
-                              currentSlide,
-                              animationStep,
-                              totalSteps,
-                              direction,
-                              showAllAnimations,
-                              transition,
-                              directionalTransition,
-                              onTransitionComplete
-                            }
-                          ),
-                          isAnnotationMode && /* @__PURE__ */ jsx12(
-                            AnnotationOverlay,
-                            {
-                              slides,
-                              currentSlide,
-                              slideContainerRef,
-                              selectedId: selectedAnnotationId,
-                              hoveredId: hoveredAnnotationId,
-                              onSelectId: setSelectedAnnotationId,
-                              onShowPanel: () => setShowAnnotationPanel(true),
-                              slideAnnotations: getSlideAnnotations(currentSlide),
-                              addAnnotation: effectiveAdd ?? (() => {
-                              })
-                            }
-                          )
-                        ]
-                      }
-                    )
+                    children: [
+                      /* @__PURE__ */ jsxs6(
+                        "div",
+                        {
+                          ref: slideContainerRef,
+                          "data-ps-editor-canvas": true,
+                          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,
+                            transformOrigin: "top left"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx12(
+                              SlideRenderer,
+                              {
+                                slides,
+                                currentSlide,
+                                animationStep,
+                                totalSteps,
+                                direction,
+                                showAllAnimations,
+                                transition,
+                                directionalTransition,
+                                onTransitionComplete
+                              },
+                              editorRevision
+                            ),
+                            isAnnotationMode && /* @__PURE__ */ jsx12(
+                              AnnotationOverlay,
+                              {
+                                slides,
+                                currentSlide,
+                                slideContainerRef,
+                                selectedId: selectedAnnotationId,
+                                hoveredId: hoveredAnnotationId,
+                                onSelectId: setSelectedAnnotationId,
+                                onShowPanel: () => setShowAnnotationPanel(true),
+                                slideAnnotations: getSlideAnnotations(currentSlide),
+                                addAnnotation: effectiveAdd ?? (() => {
+                                })
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx12(
+                        "div",
+                        {
+                          "data-ps-editor-overlay": true,
+                          className: "pointer-events-none absolute inset-0 z-20"
+                        }
+                      )
+                    ]
                   }
                 ) }),
                 !isPresentationMode && /* @__PURE__ */ jsxs6("div", { className: "mt-6 flex items-center gap-4", children: [
@@ -2319,6 +2379,17 @@ function SlideDeck({
               ]
             }
           ),
+          /* @__PURE__ */ jsx12(
+            "div",
+            {
+              "data-ps-editor-panel": true,
+              "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 }
+            }
+          ),
           !isPresentationMode && /* @__PURE__ */ jsx12(
             "div",
             {