promptslide 0.3.16 → 0.3.18

package/dist/index.js

@@ -115,7 +115,7 @@ function Animated({
   return /* @__PURE__ */ jsx2(
     motion.div,
     {
-      initial: "hidden",
+      initial: isVisible ? false : "hidden",
       animate: isVisible ? "visible" : "hidden",
       variants: animationVariants[animation],
       transition: {
@@ -149,7 +149,7 @@ function AnimatedGroup({
   return /* @__PURE__ */ jsx2(
     motion.div,
     {
-      initial: "hidden",
+      initial: isVisible ? false : "hidden",
       animate: isVisible ? "visible" : "hidden",
       variants: containerVariants,
       className,
@@ -160,9 +160,11 @@ function AnimatedGroup({
 
 // src/core/transitions.ts
 var fadeVariants = {
-  enter: { opacity: 0 },
-  center: { opacity: 1 },
-  exit: { opacity: 0 }
+  // Render the next slide fully beneath the current one, then fade the
+  // outgoing slide away. This keeps the frame opaque throughout the change.
+  enter: { opacity: 1, zIndex: 0 },
+  center: { opacity: 1, zIndex: 0 },
+  exit: { opacity: 0, zIndex: 1 }
 };
 var slideLeftVariants = {
   enter: { x: SLIDE_DISTANCE, opacity: 0 },
@@ -352,20 +354,102 @@ function MorphText({
 }
 
 // src/core/use-slide-navigation.ts
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+var POSITION_KEY = "promptslide:position";
+function slideKey(slides, index) {
+  return slides[index]?.id || String(index + 1);
+}
+function slideFromHash(slides) {
+  if (typeof window === "undefined" || !window.location.hash) return null;
+  let hash;
+  try {
+    hash = decodeURIComponent(window.location.hash.slice(1));
+  } catch {
+    return null;
+  }
+  const byId = slides.findIndex((slide) => slide.id === hash);
+  if (byId >= 0) return byId;
+  if (/^[1-9]\d*$/.test(hash)) {
+    const index = Number(hash) - 1;
+    if (index < slides.length) return index;
+  }
+  return null;
+}
+function savedStep(slides, index) {
+  if (typeof window === "undefined") return 0;
+  try {
+    const saved = JSON.parse(window.sessionStorage.getItem(POSITION_KEY) || "null");
+    if (saved?.slide === slideKey(slides, index) && Number.isInteger(saved.step)) {
+      return Math.max(0, Math.min(saved.step, slides[index]?.steps ?? 0));
+    }
+  } catch {
+  }
+  return 0;
+}
 function useSlideNavigation({
   slides,
   initialSlide = 0,
   onSlideChange
 }) {
-  const [currentSlide, setCurrentSlide] = useState(initialSlide);
-  const [animationStep, setAnimationStep] = useState(0);
+  const [currentSlide, setCurrentSlide] = useState(() => slideFromHash(slides) ?? initialSlide);
+  const [animationStep, setAnimationStep] = useState(
+    () => savedStep(slides, slideFromHash(slides) ?? initialSlide)
+  );
+  const slidesRef = useRef(slides);
+  const activeKeyRef = useRef(slideKey(slides, slideFromHash(slides) ?? initialSlide));
   const [navState, setNavState] = useState({
     status: "idle",
     direction: 0
   });
   const [queuedAction, setQueuedAction] = useState(null);
   const totalSteps = slides[currentSlide]?.steps ?? 0;
+  useEffect(() => {
+    if (typeof window === "undefined" || slides.length === 0) return;
+    if (slidesRef.current !== slides) {
+      slidesRef.current = slides;
+      const previousKey = activeKeyRef.current;
+      const movedIndex = slides.findIndex((slide) => slide.id && slide.id === previousKey);
+      if (movedIndex >= 0 && movedIndex !== currentSlide) {
+        setCurrentSlide(movedIndex);
+        return;
+      }
+      if (movedIndex < 0 && !/^[1-9]\d*$/.test(previousKey) && currentSlide !== 0) {
+        setAnimationStep(0);
+        setCurrentSlide(0);
+        return;
+      }
+    }
+    if (!slides[currentSlide]) {
+      setCurrentSlide(0);
+      setAnimationStep(0);
+      return;
+    }
+    const key = slideKey(slides, currentSlide);
+    activeKeyRef.current = key;
+    const hash = `#${encodeURIComponent(key)}`;
+    if (window.location.hash !== hash) {
+      window.history.replaceState(window.history.state, "", hash);
+    }
+    try {
+      window.sessionStorage.setItem(
+        POSITION_KEY,
+        JSON.stringify({ slide: key, step: animationStep })
+      );
+    } catch {
+    }
+  }, [slides, currentSlide, animationStep]);
+  useEffect(() => {
+    const handleHashChange = () => {
+      const index = slideFromHash(slides) ?? 0;
+      if (index === currentSlide) return;
+      setNavState({ status: "transitioning", direction: index > currentSlide ? 1 : -1 });
+      setAnimationStep(0);
+      setCurrentSlide(index);
+      onSlideChange?.(index);
+    };
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [slides, currentSlide, onSlideChange]);
   const onTransitionComplete = useCallback(() => {
     setNavState((prev) => {
       if (prev.status === "transitioning") {
@@ -532,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",
@@ -549,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 }) })
         }
       )
     },
@@ -668,19 +740,30 @@ function SlideEmbed({ slides, transition, directionalTransition }) {
 
 // src/core/slide-deck.tsx
 import { LayoutGroup } from "framer-motion";
-import { ChevronLeft, ChevronRight, Download, Grid3X3, List, Maximize, MessageCircle as MessageCircle2, Monitor } from "lucide-react";
-import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4, useState as useState6 } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  Grid3X3,
+  List,
+  MessageCircle,
+  Monitor,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Play
+} from "lucide-react";
+import { useCallback as useCallback5, useEffect as useEffect7, useLayoutEffect, useMemo as useMemo4, useRef as useRef6, useState as useState7 } from "react";
 
 // src/core/annotations/annotation-overlay.tsx
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
 
 // src/core/annotations/annotation-form.tsx
-import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 import { ArrowUp, X } from "lucide-react";
 import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
 function AnnotationForm({ xPercent, yPercent, onSubmit, onCancel }) {
   const [text, setText] = useState3("");
-  const textareaRef = useRef(null);
+  const textareaRef = useRef2(null);
   useEffect3(() => {
     textareaRef.current?.focus();
   }, []);
@@ -829,15 +912,30 @@ function findByTextContent(root, text) {
 
 // src/core/annotations/annotation-overlay.tsx
 import { Fragment, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
-function AnnotationOverlay({ slides, currentSlide, slideContainerRef, selectedId, onSelectId, onShowPanel, slideAnnotations, addAnnotation }) {
+function AnnotationOverlay({
+  slides,
+  currentSlide,
+  slideContainerRef,
+  selectedId,
+  hoveredId,
+  onSelectId,
+  onShowPanel,
+  slideAnnotations,
+  addAnnotation
+}) {
   const [pending, setPending] = useState4(null);
   const [hoveredElement, setHoveredElement] = useState4(null);
-  const overlayRef = useRef2(null);
+  const overlayRef = useRef3(null);
   const slideTitle = slides[currentSlide]?.title || `Slide ${currentSlide + 1}`;
   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) {
@@ -847,7 +945,12 @@ function AnnotationOverlay({ slides, currentSlide, slideContainerRef, selectedId
       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 = useCallback3(
     (e) => {
@@ -881,11 +984,11 @@ function AnnotationOverlay({ slides, currentSlide, slideContainerRef, selectedId
   const handleSubmit = useCallback3(
     (text) => {
       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]
   );
   const handleMouseMove = useCallback3(
     (e) => {
@@ -902,12 +1005,14 @@ function AnnotationOverlay({ slides, currentSlide, slideContainerRef, selectedId
       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 {
@@ -941,7 +1046,9 @@ function AnnotationOverlay({ slides, currentSlide, slideContainerRef, selectedId
         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") {
@@ -953,7 +1060,7 @@ function AnnotationOverlay({ slides, currentSlide, slideContainerRef, selectedId
         onMouseLeave: () => setHoveredElement(null)
       }
     ),
-    resolvedAnnotations.map(({ annotation, xPercent, yPercent, number }) => /* @__PURE__ */ jsx10(
+    resolvedAnnotations.filter(({ annotation }) => annotation.status === "open" || annotation.id === hoveredId).map(({ annotation, xPercent, yPercent, number }) => /* @__PURE__ */ jsx10(
       AnnotationPin,
       {
         number,
@@ -982,61 +1089,96 @@ function AnnotationOverlay({ slides, currentSlide, slideContainerRef, selectedId
 }
 
 // src/core/annotations/annotation-panel.tsx
-import { MessageCircle, Trash2, X as X2 } from "lucide-react";
+import { Check, Pencil, PanelRightClose, RotateCcw, Trash2 } from "lucide-react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
 import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
-function AnnotationPanel({ annotations, selectedId, onSelect, onDelete, onClose }) {
+function AnnotationPanel({
+  annotations,
+  unlinkedAnnotations = [],
+  selectedId,
+  onSelect,
+  onHover,
+  onDelete,
+  onUpdate,
+  onClose
+}) {
   const open = annotations.filter((a) => a.status === "open");
   const resolved = annotations.filter((a) => a.status === "resolved");
-  return /* @__PURE__ */ jsxs5("div", { className: "flex h-full w-80 flex-shrink-0 flex-col border-l border-white/[0.06] bg-neutral-950/95 backdrop-blur-2xl", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-4 py-3.5", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2.5", children: [
-        /* @__PURE__ */ jsx11("div", { className: "flex h-6 w-6 items-center justify-center rounded-lg bg-[#FF6B35]/15", children: /* @__PURE__ */ jsx11(MessageCircle, { className: "h-3.5 w-3.5 text-[#FF6B35]" }) }),
-        /* @__PURE__ */ jsx11("span", { className: "text-sm font-medium text-white", children: "Annotations" }),
-        open.length > 0 && /* @__PURE__ */ jsx11("span", { className: "flex h-5 min-w-5 items-center justify-center rounded-full bg-[#FF6B35]/15 px-1.5 text-[11px] font-semibold text-[#FF6B35]", children: open.length })
-      ] }),
+  const total = annotations.length + unlinkedAnnotations.length;
+  const numberFor = (annotation) => annotations.findIndex((a) => a.id === annotation.id) + 1;
+  return /* @__PURE__ */ jsxs5("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", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between border-b border-neutral-800 px-3 py-2", children: [
       /* @__PURE__ */ jsx11(
         "button",
         {
           onClick: onClose,
-          className: "rounded-lg p-1.5 text-neutral-500 transition-colors hover:bg-white/[0.06] hover:text-neutral-300",
-          children: /* @__PURE__ */ jsx11(X2, { className: "h-4 w-4" })
+          className: "rounded p-2 text-neutral-400 hover:bg-neutral-800 hover:text-white",
+          "aria-label": "Hide comments",
+          title: "Hide comments (C)",
+          children: /* @__PURE__ */ jsx11(PanelRightClose, { className: "h-4 w-4" })
         }
-      )
+      ),
+      /* @__PURE__ */ jsxs5("span", { className: "text-right text-sm font-semibold", children: [
+        "Comments (",
+        total,
+        ")"
+      ] })
     ] }),
-    /* @__PURE__ */ jsx11("div", { className: "h-px bg-gradient-to-r from-transparent via-white/[0.06] to-transparent" }),
-    /* @__PURE__ */ jsxs5("div", { className: "flex-1 overflow-y-auto p-2", children: [
-      annotations.length === 0 && /* @__PURE__ */ jsx11("div", { className: "flex flex-col gap-4 px-3 py-6", children: /* @__PURE__ */ jsx11(WorkflowHint, {}) }),
+    /* @__PURE__ */ jsxs5("div", { className: "min-h-0 flex-1 overflow-y-auto p-3", children: [
+      annotations.length === 0 && unlinkedAnnotations.length === 0 && /* @__PURE__ */ jsx11("div", { className: "flex flex-col gap-4 px-3 py-6", children: /* @__PURE__ */ jsx11(WorkflowHint, {}) }),
       open.length > 0 && /* @__PURE__ */ jsxs5("div", { children: [
         /* @__PURE__ */ jsx11("div", { className: "mb-1.5 px-2 pt-1 text-[11px] font-medium tracking-wider text-neutral-500 uppercase", children: "Open" }),
-        open.map((a, i) => /* @__PURE__ */ jsx11(
+        open.map((a) => /* @__PURE__ */ jsx11(
           AnnotationItem,
           {
             annotation: a,
-            number: i + 1,
+            number: numberFor(a),
             isSelected: a.id === selectedId,
             onSelect: () => onSelect(a.id),
-            onDelete: () => onDelete(a.id)
+            onHover: (hovered) => onHover(hovered ? a.id : null),
+            onDelete: () => onDelete(a.id),
+            onUpdate: (patch) => onUpdate(a.id, patch)
           },
           a.id
         ))
       ] }),
       resolved.length > 0 && /* @__PURE__ */ jsxs5("div", { className: open.length > 0 ? "mt-3" : "", children: [
         /* @__PURE__ */ jsx11("div", { className: "mb-1.5 px-2 pt-1 text-[11px] font-medium tracking-wider text-neutral-500 uppercase", children: "Resolved" }),
-        resolved.map((a, i) => /* @__PURE__ */ jsx11(
+        resolved.map((a) => /* @__PURE__ */ jsx11(
           AnnotationItem,
           {
             annotation: a,
-            number: open.length + i + 1,
+            number: numberFor(a),
             isSelected: a.id === selectedId,
             onSelect: () => onSelect(a.id),
-            onDelete: () => onDelete(a.id)
+            onHover: (hovered) => onHover(hovered ? a.id : null),
+            onDelete: () => onDelete(a.id),
+            onUpdate: (patch) => onUpdate(a.id, patch)
           },
           a.id
         ))
+      ] }),
+      unlinkedAnnotations.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "mt-3", children: [
+        /* @__PURE__ */ jsx11("div", { className: "mb-1.5 px-2 pt-1 text-[11px] font-medium tracking-wider text-neutral-500 uppercase", children: "Removed slides" }),
+        unlinkedAnnotations.map((a, i) => /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx11("p", { className: "px-2 text-[11px] text-neutral-500", children: a.slideTitle || a.slideId }),
+          /* @__PURE__ */ jsx11(
+            AnnotationItem,
+            {
+              annotation: a,
+              number: i + 1,
+              isSelected: a.id === selectedId,
+              onSelect: () => onSelect(a.id),
+              onHover: (hovered) => onHover(hovered ? a.id : null),
+              onDelete: () => onDelete(a.id),
+              onUpdate: (patch) => onUpdate(a.id, patch)
+            }
+          )
+        ] }, a.id))
       ] })
     ] }),
-    annotations.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, { children: [
-      /* @__PURE__ */ jsx11("div", { className: "h-px bg-gradient-to-r from-transparent via-white/[0.06] to-transparent" }),
+    annotations.length + unlinkedAnnotations.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx11("div", { className: "border-t border-neutral-800" }),
       /* @__PURE__ */ jsx11("div", { className: "px-3 py-3", children: /* @__PURE__ */ jsx11(WorkflowHint, {}) })
     ] })
   ] });
@@ -1046,7 +1188,7 @@ function WorkflowHint() {
     /* @__PURE__ */ jsx11("p", { className: "text-[11px] font-medium tracking-wider text-neutral-500 uppercase", children: "Workflow" }),
     /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-2.5", children: [
       /* @__PURE__ */ jsx11("div", { className: "mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-[#FF6B35]/15 text-[10px] font-semibold text-[#FF6B35]", children: "1" }),
-      /* @__PURE__ */ jsx11("p", { className: "text-[12px] leading-snug text-neutral-400", children: "Annotate everything you want to fix" })
+      /* @__PURE__ */ jsx11("p", { className: "text-[12px] leading-snug text-neutral-400", children: "Comment on everything you want to fix" })
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-2.5", children: [
       /* @__PURE__ */ jsx11("div", { className: "mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-[#FF6B35]/15 text-[10px] font-semibold text-[#FF6B35]", children: "2" }),
@@ -1054,7 +1196,7 @@ function WorkflowHint() {
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-2.5", children: [
       /* @__PURE__ */ jsx11("div", { className: "mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-[#FF6B35]/15 text-[10px] font-semibold text-[#FF6B35]", children: "3" }),
-      /* @__PURE__ */ jsx11("p", { className: "text-[12px] leading-snug text-neutral-400", children: '"Fix open annotations"' })
+      /* @__PURE__ */ jsx11("p", { className: "text-[12px] leading-snug text-neutral-400", children: '"Fix open comments"' })
     ] })
   ] });
 }
@@ -1063,30 +1205,81 @@ function AnnotationItem({
   number,
   isSelected,
   onSelect,
-  onDelete
+  onHover,
+  onDelete,
+  onUpdate
 }) {
+  const [isEditing, setIsEditing] = useState5(false);
+  const [draft, setDraft] = useState5(annotation.body);
+  const editRef = useRef4(null);
+  useEffect5(() => {
+    if (isEditing) editRef.current?.focus();
+  }, [isEditing]);
+  const saveEdit = () => {
+    const body = draft.trim();
+    if (!body) return;
+    if (body !== annotation.body) onUpdate({ body });
+    setIsEditing(false);
+  };
   return /* @__PURE__ */ jsxs5(
     "div",
     {
       role: "button",
       tabIndex: 0,
       onClick: onSelect,
+      onMouseEnter: () => onHover(true),
+      onMouseLeave: () => onHover(false),
       onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") onSelect();
+        if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) onSelect();
       },
       className: `group relative mb-0.5 cursor-pointer rounded-xl p-2.5 transition-all duration-150 ${isSelected ? "bg-[#FF6B35]/10 ring-1 ring-[#FF6B35]/20" : "hover:bg-white/[0.04]"}`,
       children: [
-        /* @__PURE__ */ jsx11(
-          "button",
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              onDelete();
-            },
-            className: "absolute top-2 right-2 rounded-lg p-1 text-neutral-600 opacity-0 transition-all hover:bg-white/[0.08] hover:text-neutral-300 group-hover:opacity-100",
-            children: /* @__PURE__ */ jsx11(Trash2, { className: "h-3 w-3" })
-          }
-        ),
+        /* @__PURE__ */ jsxs5("div", { className: "absolute top-2 right-2 z-10 flex gap-0.5 rounded-full border border-neutral-700 bg-neutral-900/70 p-0.5 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", children: [
+          /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              title: "Edit comment",
+              "aria-label": "Edit comment",
+              onClick: (e) => {
+                e.stopPropagation();
+                setDraft(annotation.body);
+                setIsEditing(true);
+              },
+              className: "rounded-full p-1 text-neutral-400 hover:bg-white/[0.08] hover:text-white",
+              children: /* @__PURE__ */ jsx11(Pencil, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              title: annotation.status === "open" ? "Resolve comment" : "Reopen comment",
+              "aria-label": annotation.status === "open" ? "Resolve comment" : "Reopen comment",
+              onClick: (e) => {
+                e.stopPropagation();
+                onHover(false);
+                onUpdate({ status: annotation.status === "open" ? "resolved" : "open" });
+              },
+              className: "rounded-full p-1 text-neutral-400 hover:bg-white/[0.08] hover:text-white",
+              children: annotation.status === "open" ? /* @__PURE__ */ jsx11(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx11(RotateCcw, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              title: "Delete comment",
+              "aria-label": "Delete comment",
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete();
+              },
+              className: "rounded-full p-1 text-neutral-400 hover:bg-white/[0.08] hover:text-white",
+              children: /* @__PURE__ */ jsx11(Trash2, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-2.5", children: [
           /* @__PURE__ */ jsx11(
             "div",
@@ -1095,8 +1288,52 @@ function AnnotationItem({
               children: number
             }
           ),
-          /* @__PURE__ */ jsxs5("div", { className: "min-w-0 pr-4", children: [
-            /* @__PURE__ */ jsx11("p", { className: "text-[13px] leading-relaxed text-neutral-200", children: annotation.body }),
+          /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1 pr-4", children: [
+            isEditing ? /* @__PURE__ */ jsxs5("div", { children: [
+              /* @__PURE__ */ jsx11(
+                "textarea",
+                {
+                  ref: editRef,
+                  value: draft,
+                  onClick: (e) => e.stopPropagation(),
+                  onChange: (e) => setDraft(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Escape") setIsEditing(false);
+                    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") saveEdit();
+                  },
+                  className: "w-full resize-y rounded border border-neutral-700 bg-neutral-900 p-2 text-[13px] text-white outline-none focus:border-[#FF6B35]",
+                  rows: 3,
+                  maxLength: 4096
+                }
+              ),
+              /* @__PURE__ */ jsxs5("div", { className: "mt-1 flex gap-2 text-xs", children: [
+                /* @__PURE__ */ jsx11(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      saveEdit();
+                    },
+                    disabled: !draft.trim(),
+                    className: "text-[#FF6B35] disabled:opacity-40",
+                    children: "Save"
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setIsEditing(false);
+                    },
+                    className: "text-neutral-400",
+                    children: "Cancel"
+                  }
+                )
+              ] })
+            ] }) : /* @__PURE__ */ jsx11("p", { className: "text-[13px] leading-relaxed text-neutral-200", children: annotation.body }),
             annotation.target.contentNearPin && /* @__PURE__ */ jsx11("p", { className: "mt-1 truncate text-[11px] text-neutral-600", children: annotation.target.contentNearPin }),
             annotation.resolution && /* @__PURE__ */ jsx11("p", { className: "mt-1.5 text-[11px] text-emerald-400/80 italic", children: annotation.resolution })
           ] })
@@ -1107,7 +1344,7 @@ function AnnotationItem({
 }
 
 // src/core/annotations/use-annotations.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo3, useRef as useRef5, useState as useState6 } from "react";
 
 // src/core/annotations/adapters/http.ts
 var ENDPOINT = "/__promptslide_annotations";
@@ -1143,23 +1380,47 @@ function createHttpAdapter() {
     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);
     }
   };
 }
 
 // src/core/annotations/use-annotations.ts
-function useAnnotations(adapter) {
-  const adapterRef = useRef3(adapter ?? createHttpAdapter());
-  const [annotations, setAnnotations] = useState5([]);
-  useEffect5(() => {
-    adapterRef.current.load().then(setAnnotations);
+function useAnnotations(slidesOrAdapter, adapter) {
+  const slides = Array.isArray(slidesOrAdapter) ? slidesOrAdapter : void 0;
+  const storage = Array.isArray(slidesOrAdapter) ? adapter : slidesOrAdapter ?? adapter;
+  const adapterRef = useRef5(storage ?? createHttpAdapter());
+  const slidesRef = useRef5(slides);
+  slidesRef.current = slides;
+  const [annotations, setAnnotations] = useState6([]);
+  useEffect6(() => {
+    adapterRef.current.load().then((loaded) => {
+      const configuredSlides = slidesRef.current;
+      const migrated = loaded.map((annotation) => {
+        if (annotation.slideId || !configuredSlides) return annotation;
+        const id = configuredSlides[annotation.slideIndex]?.id;
+        return id ? { ...annotation, slideId: id } : annotation;
+      });
+      setAnnotations(migrated);
+      if (migrated.some((annotation, index) => annotation !== loaded[index])) {
+        void adapterRef.current.replaceAll?.(migrated);
+      }
+    });
     return adapterRef.current.subscribe?.(setAnnotations);
   }, []);
   const addAnnotation = useCallback4(
-    (slideIndex, slideTitle, target, body) => {
+    (slideIndex, slideTitle, target, body, slideId) => {
       const annotation = {
         id: crypto.randomUUID(),
         slideIndex,
+        ...slideId && { slideId },
         slideTitle,
         target,
         body,
@@ -1175,15 +1436,36 @@ function useAnnotations(adapter) {
     setAnnotations((prev) => prev.filter((a) => a.id !== id));
     adapterRef.current.remove(id);
   }, []);
+  const updateAnnotation = useCallback4(
+    (id, patch) => {
+      const current = annotations.find((a) => a.id === id);
+      if (!current) return;
+      const updated = { body: patch.body ?? current.body, status: patch.status ?? current.status };
+      setAnnotations((prev) => prev.map((a) => a.id === id ? { ...a, ...updated } : a));
+      void adapterRef.current.update?.(id, updated);
+    },
+    [annotations]
+  );
   const getSlideAnnotations = useCallback4(
     (slideIndex) => annotations.filter((a) => a.slideIndex === slideIndex),
     [annotations]
   );
-  const openCount = useMemo3(() => annotations.filter((a) => a.status === "open").length, [annotations]);
+  const openCount = useMemo3(
+    () => annotations.filter((a) => a.status === "open").length,
+    [annotations]
+  );
   const updateAnnotations = useCallback4((updated) => {
     setAnnotations(updated);
   }, []);
-  return { annotations, addAnnotation, deleteAnnotation, getSlideAnnotations, openCount, updateAnnotations };
+  return {
+    annotations,
+    addAnnotation,
+    deleteAnnotation,
+    updateAnnotation,
+    getSlideAnnotations,
+    openCount,
+    updateAnnotations
+  };
 }
 
 // src/core/utils.ts
@@ -1194,14 +1476,96 @@ function cn(...inputs) {
 }
 
 // src/core/slide-deck.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var NARROW_VIEWPORT_WIDTH = 768;
+var DEFAULT_THUMBNAIL_WIDTH = 240;
+var MIN_THUMBNAIL_WIDTH = 176;
+var MAX_THUMBNAIL_WIDTH = 480;
+var THUMBNAIL_WIDTH_STORAGE_KEY = "promptslide:thumbnail-width";
+function GridThumbnail({
+  slide,
+  index,
+  total
+}) {
+  const viewportRef = useRef6(null);
+  const canvasRef = useRef6(null);
+  const SlideComponent = slide.component;
+  useLayoutEffect(() => {
+    const viewport = viewportRef.current;
+    const canvas = canvasRef.current;
+    if (!viewport || !canvas) return;
+    const resize = () => {
+      canvas.style.transform = `scale(${viewport.clientWidth / SLIDE_DIMENSIONS.width})`;
+    };
+    resize();
+    const observer = new ResizeObserver(resize);
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx12("div", { ref: viewportRef, className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx12(
+    "div",
+    {
+      ref: canvasRef,
+      className: "absolute top-0 left-0 origin-top-left",
+      style: { width: SLIDE_DIMENSIONS.width, height: SLIDE_DIMENSIONS.height },
+      children: /* @__PURE__ */ jsx12(AnimationProvider, { currentStep: slide.steps, totalSteps: slide.steps, showAllAnimations: true, children: /* @__PURE__ */ jsx12(SlideErrorBoundary, { slideIndex: index, slideTitle: slide.title, children: /* @__PURE__ */ jsx12(SlideComponent, { slideNumber: index + 1, totalSlides: total }) }) })
+    }
+  ) });
+}
+function ListSlide({ slide, index, total }) {
+  const viewportRef = useRef6(null);
+  const canvasRef = useRef6(null);
+  const SlideComponent = slide.component;
+  useLayoutEffect(() => {
+    const viewport = viewportRef.current;
+    const canvas = canvasRef.current;
+    if (!viewport || !canvas) return;
+    const resize = () => {
+      canvas.style.transform = `scale(${viewport.clientWidth / SLIDE_DIMENSIONS.width})`;
+    };
+    resize();
+    const observer = new ResizeObserver(resize);
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      ref: viewportRef,
+      className: "relative aspect-video w-full overflow-hidden rounded-xl border border-neutral-800 bg-black shadow-sm print:m-0 print:h-[1080px] print:w-[1920px] print:break-after-page print:rounded-none print:border-0 print:shadow-none",
+      children: /* @__PURE__ */ jsx12(
+        "div",
+        {
+          ref: canvasRef,
+          className: "list-slide-canvas absolute top-0 left-0 origin-top-left",
+          style: { width: SLIDE_DIMENSIONS.width, height: SLIDE_DIMENSIONS.height },
+          children: /* @__PURE__ */ jsx12(AnimationProvider, { currentStep: slide.steps, totalSteps: slide.steps, showAllAnimations: true, children: /* @__PURE__ */ jsx12(SlideErrorBoundary, { slideIndex: index, slideTitle: slide.title, children: /* @__PURE__ */ jsx12(SlideComponent, { slideNumber: index + 1, totalSlides: total }) }) })
+        }
+      )
+    }
+  );
+}
 function SlideExportView({ slides, slideIndex }) {
-  const [ready, setReady] = useState6(false);
+  const [ready, setReady] = useState7(false);
   const clampedIndex = Math.max(0, Math.min(slideIndex, slides.length - 1));
   const slideConfig = slides[clampedIndex];
   const SlideComponent = slideConfig.component;
-  useEffect6(() => {
-    setReady(true);
+  useEffect7(() => {
+    let cancelled = false;
+    const markReady = async () => {
+      await document.fonts.ready;
+      await Promise.all(Array.from(document.images, (image) => image.decode().catch(() => {
+      })));
+      requestAnimationFrame(
+        () => requestAnimationFrame(() => {
+          if (!cancelled) setReady(true);
+        })
+      );
+    };
+    void markReady();
+    return () => {
+      cancelled = true;
+    };
   }, []);
   return /* @__PURE__ */ jsx12(
     "div",
@@ -1226,8 +1590,16 @@ function SlideExportView({ slides, slideIndex }) {
     }
   );
 }
-function SlideDeck({ slides, transition, directionalTransition, annotations, onAnnotationAdd, onAnnotationDelete }) {
-  const [exportParams] = useState6(() => {
+function SlideDeck({
+  slides,
+  transition,
+  directionalTransition,
+  annotations,
+  onAnnotationAdd,
+  onAnnotationDelete,
+  onAnnotationUpdate
+}) {
+  const [exportParams] = useState7(() => {
     if (typeof window === "undefined") return null;
     const params = new URLSearchParams(window.location.search);
     if (params.get("export") !== "true") return null;
@@ -1236,24 +1608,178 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
   if (exportParams) {
     return /* @__PURE__ */ jsx12(SlideExportView, { slides, slideIndex: exportParams.slideIndex });
   }
-  const internal = useAnnotations();
+  const internal = useAnnotations(slides);
   const isExternallyManaged = annotations !== void 0;
   const effectiveAnnotations = isExternallyManaged ? annotations : internal.annotations;
   const effectiveAdd = isExternallyManaged ? onAnnotationAdd : internal.addAnnotation;
   const effectiveDelete = isExternallyManaged ? onAnnotationDelete : internal.deleteAnnotation;
-  const openCount = useMemo4(() => effectiveAnnotations.filter((a) => a.status === "open").length, [effectiveAnnotations]);
-  const getSlideAnnotations = useCallback5(
-    (slideIndex) => effectiveAnnotations.filter((a) => a.slideIndex === slideIndex),
+  const effectiveUpdate = isExternallyManaged ? onAnnotationUpdate : internal.updateAnnotation;
+  const openCount = useMemo4(
+    () => effectiveAnnotations.filter((a) => a.status === "open").length,
     [effectiveAnnotations]
   );
-  const [viewMode, setViewMode] = useState6("slide");
-  const [isPresentationMode, setIsPresentationMode] = useState6(false);
-  const [isAnnotationMode, setIsAnnotationMode] = useState6(false);
-  const [showAnnotationPanel, setShowAnnotationPanel] = useState6(false);
-  const [selectedAnnotationId, setSelectedAnnotationId] = useState6(null);
-  const [scale, setScale] = useState6(1);
-  const containerRef = useRef4(null);
-  const slideContainerRef = useRef4(null);
+  const getSlideAnnotations = useCallback5(
+    (slideIndex) => effectiveAnnotations.filter(
+      (a) => a.slideId ? a.slideId === slides[slideIndex]?.id : a.slideIndex === slideIndex
+    ),
+    [effectiveAnnotations, slides]
+  );
+  const unlinkedAnnotations = useMemo4(
+    () => effectiveAnnotations.filter((a) => a.slideId && !slides.some((slide) => slide.id === a.slideId)),
+    [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
+  );
+  const [showThumbnailRail, setShowThumbnailRail] = useState7(
+    () => typeof window === "undefined" ? true : window.innerWidth >= NARROW_VIEWPORT_WIDTH
+  );
+  const [thumbnailWidth, setThumbnailWidth] = useState7(() => {
+    if (typeof window === "undefined") return DEFAULT_THUMBNAIL_WIDTH;
+    const savedWidth = Number(window.localStorage.getItem(THUMBNAIL_WIDTH_STORAGE_KEY));
+    return Number.isFinite(savedWidth) && savedWidth >= MIN_THUMBNAIL_WIDTH ? Math.min(savedWidth, MAX_THUMBNAIL_WIDTH) : DEFAULT_THUMBNAIL_WIDTH;
+  });
+  const [isAnnotationMode, setIsAnnotationMode] = useState7(false);
+  const [showAnnotationPanel, setShowAnnotationPanel] = useState7(false);
+  const [selectedAnnotationId, setSelectedAnnotationId] = useState7(null);
+  const [hoveredAnnotationId, setHoveredAnnotationId] = useState7(null);
+  const [isResizingThumbnails, setIsResizingThumbnails] = useState7(false);
+  const [isDragCollapsed, setIsDragCollapsed] = useState7(false);
+  const [isAnimatingDragBoundary, setIsAnimatingDragBoundary] = useState7(false);
+  const [scale, setScale] = useState7(1);
+  const containerRef = useRef6(null);
+  const slideContainerRef = useRef6(null);
+  const previewViewportRef = useRef6(null);
+  const activeThumbnailRef = useRef6(null);
+  const preferredRailOpenRef = useRef6(true);
+  const wasNarrowViewportRef = useRef6(viewportWidth < NARROW_VIEWPORT_WIDTH);
+  const resizeStartRef = useRef6(null);
+  const previousUserSelectRef = useRef6("");
+  const previousCursorRef = useRef6("");
+  const dragCollapsedRef = useRef6(false);
+  const dragAnimationTimerRef = useRef6(null);
+  const isNarrowViewport = viewportWidth < NARROW_VIEWPORT_WIDTH;
+  const maxThumbnailWidth = isNarrowViewport ? Math.max(120, Math.floor(viewportWidth * 0.8)) : Math.min(MAX_THUMBNAIL_WIDTH, viewportWidth - 360);
+  const minThumbnailWidth = Math.min(MIN_THUMBNAIL_WIDTH, maxThumbnailWidth);
+  const visibleThumbnailWidth = Math.min(thumbnailWidth, maxThumbnailWidth);
+  const isThumbnailRailVisible = showThumbnailRail && !isDragCollapsed;
+  const setThumbnailRailOpen = useCallback5((open) => {
+    preferredRailOpenRef.current = open;
+    setShowThumbnailRail(open);
+  }, []);
+  useEffect7(() => {
+    const handleResize = () => setViewportWidth(window.innerWidth);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  useEffect7(() => {
+    if (isNarrowViewport !== wasNarrowViewportRef.current) {
+      setShowThumbnailRail(isNarrowViewport ? false : preferredRailOpenRef.current);
+      if (isNarrowViewport) {
+        setIsAnnotationMode(false);
+        setShowAnnotationPanel(false);
+        setSelectedAnnotationId(null);
+      }
+      wasNarrowViewportRef.current = isNarrowViewport;
+    }
+  }, [isNarrowViewport]);
+  useEffect7(() => {
+    window.localStorage.setItem(THUMBNAIL_WIDTH_STORAGE_KEY, String(thumbnailWidth));
+  }, [thumbnailWidth]);
+  useEffect7(
+    () => () => {
+      if (resizeStartRef.current) {
+        document.body.style.userSelect = previousUserSelectRef.current;
+        document.body.style.cursor = previousCursorRef.current;
+      }
+      if (dragAnimationTimerRef.current) clearTimeout(dragAnimationTimerRef.current);
+    },
+    []
+  );
+  useEffect7(() => {
+    if ((!showThumbnailRail || isPresentationMode || viewMode !== "slide") && resizeStartRef.current) {
+      resizeStartRef.current = null;
+      dragCollapsedRef.current = false;
+      setIsResizingThumbnails(false);
+      setIsDragCollapsed(false);
+      setIsAnimatingDragBoundary(false);
+      if (dragAnimationTimerRef.current) clearTimeout(dragAnimationTimerRef.current);
+      document.body.style.userSelect = previousUserSelectRef.current;
+      document.body.style.cursor = previousCursorRef.current;
+    }
+  }, [showThumbnailRail, isPresentationMode, viewMode]);
+  useEffect7(() => {
+    if (!isResizingThumbnails) return;
+    const getDraggedWidth = (clientX) => {
+      const start = resizeStartRef.current;
+      return start ? start.width + clientX - start.pointerX : null;
+    };
+    const handlePointerMove = (event) => {
+      if (event.pointerId !== resizeStartRef.current?.pointerId) return;
+      const nextWidth = getDraggedWidth(event.clientX);
+      if (nextWidth === null) return;
+      const collapsed = nextWidth < minThumbnailWidth;
+      if (collapsed !== dragCollapsedRef.current) {
+        dragCollapsedRef.current = collapsed;
+        setIsDragCollapsed(collapsed);
+        setIsAnimatingDragBoundary(true);
+        if (dragAnimationTimerRef.current) clearTimeout(dragAnimationTimerRef.current);
+        dragAnimationTimerRef.current = setTimeout(() => {
+          setIsAnimatingDragBoundary(false);
+          dragAnimationTimerRef.current = null;
+        }, 200);
+      }
+      if (!collapsed) setThumbnailWidth(Math.min(maxThumbnailWidth, nextWidth));
+    };
+    const stopResize = (event) => {
+      if (event && event.pointerId !== resizeStartRef.current?.pointerId) return;
+      const nextWidth = event ? getDraggedWidth(event.clientX) : null;
+      const collapsed = event?.type === "pointerup" && nextWidth !== null && nextWidth < minThumbnailWidth;
+      resizeStartRef.current = null;
+      dragCollapsedRef.current = false;
+      document.body.style.userSelect = previousUserSelectRef.current;
+      document.body.style.cursor = previousCursorRef.current;
+      setIsResizingThumbnails(false);
+      setIsDragCollapsed(false);
+      if (collapsed) setThumbnailRailOpen(false);
+      else if (nextWidth !== null) {
+        setThumbnailWidth(Math.max(minThumbnailWidth, Math.min(maxThumbnailWidth, nextWidth)));
+      }
+    };
+    const handleBlur = () => stopResize();
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", stopResize);
+    window.addEventListener("pointercancel", stopResize);
+    window.addEventListener("blur", handleBlur);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", stopResize);
+      window.removeEventListener("pointercancel", stopResize);
+      window.removeEventListener("blur", handleBlur);
+    };
+  }, [isResizingThumbnails, minThumbnailWidth, maxThumbnailWidth, setThumbnailRailOpen]);
   const {
     currentSlide,
     animationStep,
@@ -1274,22 +1800,27 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
       await document.exitFullscreen();
     }
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     const handleFullscreenChange = () => {
       setIsPresentationMode(!!document.fullscreenElement);
     };
     document.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
+    if (viewMode === "slide" && !isPresentationMode && showThumbnailRail) {
+      activeThumbnailRef.current?.scrollIntoView({ block: "nearest" });
+    }
+  }, [currentSlide, isPresentationMode, showThumbnailRail, viewMode]);
+  useEffect7(() => {
     const calculateScale = () => {
       if (!isPresentationMode) {
         setScale(1);
         return;
       }
-      const viewportWidth = window.innerWidth;
+      const availableWidth = window.innerWidth;
       const viewportHeight = window.innerHeight;
-      const scaleX = viewportWidth / SLIDE_DIMENSIONS.width;
+      const scaleX = availableWidth / SLIDE_DIMENSIONS.width;
       const scaleY = viewportHeight / SLIDE_DIMENSIONS.height;
       setScale(Math.min(scaleX, scaleY));
     };
@@ -1297,7 +1828,46 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
     window.addEventListener("resize", calculateScale);
     return () => window.removeEventListener("resize", calculateScale);
   }, [isPresentationMode]);
-  const handleExportPdf = () => {
+  useLayoutEffect(() => {
+    const viewport = previewViewportRef.current;
+    const canvas = slideContainerRef.current;
+    if (!viewport || !canvas) return;
+    const resize = (width, height) => {
+      const fitScale = Math.min(width / SLIDE_DIMENSIONS.width, height / SLIDE_DIMENSIONS.height);
+      canvas.style.transform = `scale(${fitScale})`;
+    };
+    resize(viewport.clientWidth, viewport.clientHeight);
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      resize(entry.contentRect.width, entry.contentRect.height);
+    });
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, [viewMode, isPresentationMode]);
+  const toggleCommentMode = useCallback5(() => {
+    const next = !isAnnotationMode;
+    setIsAnnotationMode(next);
+    setShowAnnotationPanel(next);
+    if (!next) {
+      setSelectedAnnotationId(null);
+      setHoveredAnnotationId(null);
+    }
+  }, [isAnnotationMode]);
+  const handleExportPdf = useCallback5(async () => {
+    try {
+      const response = await fetch("/__promptslide_pdf");
+      if (response.ok && response.headers.get("content-type")?.includes("application/pdf")) {
+        const blob = await response.blob();
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "slides.pdf";
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1e3);
+        return;
+      }
+    } catch {
+    }
     const previousMode = viewMode;
     setViewMode("list");
     setTimeout(() => {
@@ -1308,17 +1878,50 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
       window.addEventListener("afterprint", handleAfterPrint);
       window.print();
     }, 100);
-  };
-  useEffect6(() => {
+  }, [viewMode]);
+  useEffect7(() => {
     const handleKeyDown = (e) => {
-      if (e.key === "f" || e.key === "F") {
-        togglePresentationMode();
+      const target = e.target;
+      if (target?.closest("input, textarea, [contenteditable='true']")) return;
+      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();
         return;
       }
-      if (e.key === "g" || e.key === "G") {
+      if (key === "v" && !isPresentationMode) {
+        e.preventDefault();
+        setViewMode("slide");
+        return;
+      }
+      if (key === "g") {
+        e.preventDefault();
         setViewMode((prev) => prev === "grid" ? "slide" : "grid");
         return;
       }
+      if (key === "l") {
+        e.preventDefault();
+        setViewMode((prev) => prev === "list" ? "slide" : "list");
+        return;
+      }
+      if (key === "c" && !isPresentationMode) {
+        e.preventDefault();
+        toggleCommentMode();
+        return;
+      }
+      if (key === "d" && !isPresentationMode) {
+        e.preventDefault();
+        void handleExportPdf();
+        return;
+      }
+      if (viewMode === "slide" && !isPresentationMode && key === "t") {
+        e.preventDefault();
+        setThumbnailRailOpen(!showThumbnailRail);
+        return;
+      }
       if (viewMode !== "slide" || isAnnotationMode && !isPresentationMode) return;
       if (e.key === "ArrowRight" || e.key === " ") {
         e.preventDefault();
@@ -1330,10 +1933,48 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [advance, goBack, viewMode, togglePresentationMode, isAnnotationMode, isPresentationMode]);
+  }, [
+    advance,
+    goBack,
+    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;
+          }
           @page {
             size: 1920px 1080px;
             margin: 0;
@@ -1356,10 +1997,14 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
     /* @__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] print:hidden",
-          isPresentationMode && "hidden",
-          isAnnotationMode && showAnnotationPanel ? "right-[19.5rem]" : "right-4"
+          "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",
+          isEditorOpen && "flex-wrap",
+          isEditorOpen && viewportWidth <= 850 && "[&_button:disabled]:hidden [&>div]:hidden",
+          !isEditorOpen && (isAnnotationMode && showAnnotationPanel ? "right-[21rem]" : "right-4")
         ),
         children: [
           /* @__PURE__ */ jsx12(
@@ -1370,7 +2015,8 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
                 "rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white",
                 viewMode === "slide" && "bg-neutral-800 text-white"
               ),
-              title: "Presentation View",
+              disabled: isEditorOpen,
+              title: "Presentation View (V)",
               children: /* @__PURE__ */ jsx12(Monitor, { className: "h-4 w-4" })
             }
           ),
@@ -1382,7 +2028,8 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
                 "rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white",
                 viewMode === "list" && "bg-neutral-800 text-white"
               ),
-              title: "List View",
+              disabled: isEditorOpen,
+              title: "List View (L)",
               children: /* @__PURE__ */ jsx12(List, { className: "h-4 w-4" })
             }
           ),
@@ -1394,7 +2041,8 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
                 "rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white",
                 viewMode === "grid" && "bg-neutral-800 text-white"
               ),
-              title: "Grid View",
+              disabled: isEditorOpen,
+              title: "Grid View (G)",
               children: /* @__PURE__ */ jsx12(Grid3X3, { className: "h-4 w-4" })
             }
           ),
@@ -1402,42 +2050,45 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
           /* @__PURE__ */ jsxs6(
             "button",
             {
-              onClick: () => {
-                setIsAnnotationMode((prev) => {
-                  const next = !prev;
-                  setShowAnnotationPanel(next);
-                  if (!next) setSelectedAnnotationId(null);
-                  return next;
-                });
-              },
+              onClick: toggleCommentMode,
               className: cn(
-                "relative rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white",
-                isAnnotationMode && "bg-[#FF6B35] text-white hover:bg-[#FF7A4A]"
+                "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"
               ),
-              title: "Annotate slides",
+              disabled: isEditorOpen,
+              "aria-label": "Comment",
+              "aria-pressed": isAnnotationMode,
+              title: "Comment (C)",
               children: [
-                /* @__PURE__ */ jsx12(MessageCircle2, { 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",
-              title: "Download PDF",
+              disabled: isEditorOpen,
+              title: "Download PDF (D)",
               children: /* @__PURE__ */ jsx12(Download, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsxs6(
             "button",
             {
               onClick: togglePresentationMode,
-              className: "rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white",
+              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(Maximize, { className: "h-4 w-4" })
+              children: [
+                /* @__PURE__ */ jsx12(Play, { className: "h-3.5 w-3.5 fill-current" }),
+                /* @__PURE__ */ jsx12("span", { children: "Present" })
+              ]
             }
           )
         ]
@@ -1446,11 +2097,157 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
     viewMode === "slide" && /* @__PURE__ */ jsxs6(
       "div",
       {
-        className: cn(
-          "flex h-screen w-full print:hidden",
-          isPresentationMode ? "bg-black" : ""
-        ),
+        className: cn("flex h-screen w-full print:hidden", isPresentationMode ? "bg-black" : ""),
         children: [
+          !isPresentationMode && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+            /* @__PURE__ */ jsxs6(
+              "div",
+              {
+                className: cn(
+                  "relative z-10 h-screen shrink-0",
+                  isNarrowViewport && "fixed inset-y-0 left-0",
+                  isResizingThumbnails && !isAnimatingDragBoundary ? "transition-none" : "transition-[width] duration-200 ease-out motion-reduce:transition-none"
+                ),
+                style: { width: isThumbnailRailVisible ? visibleThumbnailWidth : 0 },
+                children: [
+                  /* @__PURE__ */ jsx12("div", { className: "h-full w-full overflow-hidden", children: /* @__PURE__ */ jsxs6(
+                    "aside",
+                    {
+                      id: "presentation-thumbnails",
+                      "aria-label": "Slide thumbnails",
+                      "aria-hidden": !isThumbnailRailVisible,
+                      inert: !isThumbnailRailVisible,
+                      className: cn(
+                        "flex h-screen shrink-0 flex-col border-r border-neutral-800 bg-neutral-950 text-white transition-opacity motion-reduce:transition-none",
+                        isThumbnailRailVisible ? "opacity-100 delay-100 duration-100" : "opacity-0 duration-75"
+                      ),
+                      style: { width: visibleThumbnailWidth },
+                      children: [
+                        /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between border-b border-neutral-800 px-3 py-2", children: [
+                          /* @__PURE__ */ jsxs6("span", { className: "text-sm font-semibold", children: [
+                            "Slides (",
+                            slides.length,
+                            ")"
+                          ] }),
+                          /* @__PURE__ */ jsx12(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setThumbnailRailOpen(false),
+                              className: "rounded p-2 text-neutral-400 hover:bg-neutral-800 hover:text-white",
+                              "aria-label": "Hide slide thumbnails",
+                              title: "Hide thumbnails (T)",
+                              children: /* @__PURE__ */ jsx12(PanelLeftClose, { className: "h-4 w-4" })
+                            }
+                          )
+                        ] }),
+                        /* @__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,
+                            type: "button",
+                            onClick: () => goToSlide(index),
+                            "aria-label": `Go to slide ${index + 1}${slideConfig.title ? `: ${slideConfig.title}` : ""}`,
+                            "aria-current": index === currentSlide ? "page" : void 0,
+                            className: cn(
+                              "block w-full rounded-lg border p-1.5 text-left transition-colors focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#FF6B35]",
+                              index === currentSlide ? "border-[#FF6B35] bg-[#FF6B35]/15 ring-1 ring-[#FF6B35]" : "border-transparent hover:border-neutral-600 hover:bg-neutral-800"
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsx12("div", { className: "relative aspect-video w-full overflow-hidden rounded bg-black", children: /* @__PURE__ */ jsx12(
+                                GridThumbnail,
+                                {
+                                  slide: slideConfig,
+                                  index,
+                                  total: slides.length
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsx12("div", { className: "mt-1.5 flex items-baseline gap-2 px-0.5 text-xs", children: slideConfig.title ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+                                /* @__PURE__ */ jsx12("span", { className: "font-mono text-neutral-400", children: index + 1 }),
+                                /* @__PURE__ */ jsx12("span", { className: "truncate", children: slideConfig.title })
+                              ] }) : /* @__PURE__ */ jsxs6("span", { children: [
+                                "Slide ",
+                                index + 1
+                              ] }) })
+                            ]
+                          },
+                          slideConfig.id ?? index
+                        )) })
+                      ]
+                    }
+                  ) }),
+                  isThumbnailRailVisible && /* @__PURE__ */ jsx12(
+                    "div",
+                    {
+                      role: "separator",
+                      "aria-label": "Resize slide thumbnails",
+                      "aria-orientation": "vertical",
+                      "aria-valuemin": minThumbnailWidth,
+                      "aria-valuemax": maxThumbnailWidth,
+                      "aria-valuenow": visibleThumbnailWidth,
+                      tabIndex: 0,
+                      className: cn(
+                        "absolute inset-y-0 -right-1 w-2 cursor-col-resize touch-none focus-visible:outline-none after:pointer-events-none after:absolute after:inset-y-0 after:right-1 after:w-0.5 after:bg-transparent after:content-[''] after:transition-colors hover:after:bg-[#FF6B35]/50 focus-visible:after:bg-[#FF6B35]/50",
+                        isResizingThumbnails && "after:bg-[#FF6B35]/60"
+                      ),
+                      onPointerDown: (event) => {
+                        if (event.button !== 0) return;
+                        event.preventDefault();
+                        resizeStartRef.current = {
+                          pointerId: event.pointerId,
+                          pointerX: event.clientX,
+                          width: visibleThumbnailWidth
+                        };
+                        dragCollapsedRef.current = false;
+                        setIsAnimatingDragBoundary(false);
+                        if (dragAnimationTimerRef.current) clearTimeout(dragAnimationTimerRef.current);
+                        setIsResizingThumbnails(true);
+                        previousUserSelectRef.current = document.body.style.userSelect;
+                        previousCursorRef.current = document.body.style.cursor;
+                        document.body.style.userSelect = "none";
+                        document.body.style.cursor = "col-resize";
+                      },
+                      onKeyDown: (event) => {
+                        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          const amount = event.key === "ArrowRight" ? 16 : -16;
+                          setThumbnailWidth(
+                            Math.max(
+                              minThumbnailWidth,
+                              Math.min(maxThumbnailWidth, visibleThumbnailWidth + amount)
+                            )
+                          );
+                        }
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              "div",
+              {
+                "aria-hidden": isThumbnailRailVisible || isResizingThumbnails,
+                inert: isThumbnailRailVisible || isResizingThumbnails,
+                className: cn(
+                  "fixed top-4 left-4 z-50 rounded-lg border border-neutral-800 bg-neutral-950/90 backdrop-blur-sm transition-opacity duration-150 motion-reduce:transition-none",
+                  isThumbnailRailVisible || isResizingThumbnails ? "pointer-events-none opacity-0" : "opacity-100 delay-200"
+                ),
+                children: /* @__PURE__ */ jsx12(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setThumbnailRailOpen(true),
+                    className: "rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white",
+                    "aria-label": "Show slide thumbnails",
+                    title: "Show thumbnails (T)",
+                    children: /* @__PURE__ */ jsx12(PanelLeftOpen, { className: "h-4 w-4" })
+                  }
+                )
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxs6(
             "div",
             {
@@ -1458,7 +2255,7 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
               role: "presentation",
               tabIndex: isPresentationMode ? 0 : void 0,
               className: cn(
-                "flex flex-1 flex-col items-center justify-center overflow-hidden",
+                "flex min-w-0 flex-1 flex-col items-center justify-center overflow-hidden",
                 isPresentationMode ? "bg-black p-0" : "p-4 md:p-8"
               ),
               onClick: isPresentationMode ? advance : void 0,
@@ -1491,42 +2288,76 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
                       }
                     )
                   }
-                ) : /* @__PURE__ */ jsxs6("div", { ref: slideContainerRef, className: "relative aspect-video w-full max-w-7xl overflow-hidden rounded-xl border border-neutral-800 bg-black shadow-2xl", children: [
-                  /* @__PURE__ */ jsx12(
-                    SlideRenderer,
-                    {
-                      slides,
-                      currentSlide,
-                      animationStep,
-                      totalSteps,
-                      direction,
-                      showAllAnimations,
-                      transition,
-                      directionalTransition,
-                      onTransitionComplete
-                    }
-                  ),
-                  isAnnotationMode && /* @__PURE__ */ jsx12(
-                    AnnotationOverlay,
-                    {
-                      slides,
-                      currentSlide,
-                      slideContainerRef,
-                      selectedId: selectedAnnotationId,
-                      onSelectId: setSelectedAnnotationId,
-                      onShowPanel: () => setShowAnnotationPanel(true),
-                      slideAnnotations: getSlideAnnotations(currentSlide),
-                      addAnnotation: effectiveAdd ?? (() => {
-                      })
-                    }
-                  )
-                ] }) }),
+                ) : /* @__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,
+                          "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: [
                   /* @__PURE__ */ jsx12(
                     "button",
                     {
                       onClick: goBack,
                       className: "rounded-full border border-neutral-800 bg-black/50 p-2 text-neutral-400 backdrop-blur-sm transition-colors hover:bg-neutral-900 hover:text-white",
+                      title: "Previous step or slide (\u2190)",
                       children: /* @__PURE__ */ jsx12(ChevronLeft, { className: "h-5 w-5" })
                     }
                   ),
@@ -1540,6 +2371,7 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
                     {
                       onClick: advance,
                       className: "rounded-full border border-neutral-800 bg-black/50 p-2 text-neutral-400 backdrop-blur-sm transition-colors hover:bg-neutral-900 hover:text-white",
+                      title: "Next step or slide (\u2192 / Space)",
                       children: /* @__PURE__ */ jsx12(ChevronRight, { className: "h-5 w-5" })
                     }
                   )
@@ -1547,29 +2379,69 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
               ]
             }
           ),
-          isAnnotationMode && showAnnotationPanel && !isPresentationMode && /* @__PURE__ */ jsx12(
-            AnnotationPanel,
+          /* @__PURE__ */ jsx12(
+            "div",
             {
-              annotations: getSlideAnnotations(currentSlide),
-              selectedId: selectedAnnotationId,
-              onSelect: setSelectedAnnotationId,
-              onDelete: effectiveDelete ?? (() => {
-              }),
-              onClose: () => {
-                setShowAnnotationPanel(false);
-                setSelectedAnnotationId(null);
-              }
+              "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",
+            {
+              "aria-hidden": !isAnnotationMode || !showAnnotationPanel,
+              inert: !isAnnotationMode || !showAnnotationPanel,
+              className: cn(
+                "h-full shrink-0 overflow-hidden transition-[width,transform] duration-200 ease-out motion-reduce:transition-none",
+                isNarrowViewport && "fixed inset-y-0 right-0 z-50 shadow-xl",
+                isNarrowViewport && (!isAnnotationMode || !showAnnotationPanel) && "translate-x-full"
+              ),
+              style: {
+                width: isAnnotationMode && showAnnotationPanel ? isNarrowViewport ? "min(20rem, 90vw)" : "20rem" : 0
+              },
+              children: /* @__PURE__ */ jsx12(
+                "div",
+                {
+                  className: cn(
+                    "h-full transition-opacity motion-reduce:transition-none",
+                    isAnnotationMode && showAnnotationPanel ? "opacity-100 delay-100 duration-100" : "opacity-0 duration-75"
+                  ),
+                  children: /* @__PURE__ */ jsx12(
+                    AnnotationPanel,
+                    {
+                      annotations: getSlideAnnotations(currentSlide),
+                      unlinkedAnnotations,
+                      selectedId: selectedAnnotationId,
+                      onSelect: setSelectedAnnotationId,
+                      onHover: setHoveredAnnotationId,
+                      onDelete: effectiveDelete ?? (() => {
+                      }),
+                      onUpdate: effectiveUpdate ?? (() => {
+                      }),
+                      onClose: () => {
+                        setIsAnnotationMode(false);
+                        setShowAnnotationPanel(false);
+                        setSelectedAnnotationId(null);
+                        setHoveredAnnotationId(null);
+                      }
+                    }
+                  )
+                }
+              )
             }
           )
         ]
       }
     ),
     viewMode === "grid" && /* @__PURE__ */ jsx12("div", { className: "mx-auto max-w-7xl p-8 pt-16 print:hidden", children: /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4", children: slides.map((slideConfig, index) => {
-      const SlideComponent = slideConfig.component;
       const prevSection = index > 0 ? slides[index - 1]?.section : void 0;
       const showSectionHeader = slideConfig.section && slideConfig.section !== prevSection;
-      return /* @__PURE__ */ jsxs6("div", { className: showSectionHeader ? "col-span-full" : void 0, children: [
-        showSectionHeader && /* @__PURE__ */ jsx12("h3", { className: "mt-4 mb-3 text-xs font-bold tracking-[0.2em] text-neutral-500 uppercase first:mt-0", children: slideConfig.section }),
+      return /* @__PURE__ */ jsxs6("div", { className: "contents", children: [
+        showSectionHeader && /* @__PURE__ */ jsx12("h3", { className: "col-span-full mt-4 mb-0 text-xs font-bold tracking-[0.2em] text-neutral-500 uppercase first:mt-0", children: slideConfig.section }),
         /* @__PURE__ */ jsxs6(
           "button",
           {
@@ -1577,30 +2449,15 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
               goToSlide(index);
               setViewMode("slide");
             },
-            className: "group relative aspect-video w-full overflow-hidden rounded-lg border border-neutral-800 bg-black shadow-sm transition-all hover:border-primary hover:shadow-lg hover:shadow-primary/10",
+            className: "group relative aspect-video w-full overflow-hidden rounded-lg border border-neutral-800 bg-black shadow-sm transition-all hover:border-[#FF6B35] hover:shadow-lg hover:shadow-[#FF6B35]/10",
             children: [
-              /* @__PURE__ */ jsx12(
-                "div",
-                {
-                  className: "h-full w-full origin-top-left scale-[0.25]",
-                  style: { width: "400%", height: "400%" },
-                  children: /* @__PURE__ */ jsx12(
-                    AnimationProvider,
-                    {
-                      currentStep: slideConfig.steps,
-                      totalSteps: slideConfig.steps,
-                      showAllAnimations: true,
-                      children: /* @__PURE__ */ jsx12(SlideErrorBoundary, { slideIndex: index, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx12(SlideComponent, { slideNumber: index + 1, totalSlides: slides.length }) })
-                    }
-                  )
-                }
-              ),
+              /* @__PURE__ */ jsx12(GridThumbnail, { slide: slideConfig, index, total: slides.length }),
               /* @__PURE__ */ jsx12("div", { className: "absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" }),
               /* @__PURE__ */ jsx12("div", { className: "absolute bottom-2 left-2 rounded bg-black/70 px-2 py-1 text-xs font-medium text-white", children: slideConfig.title ? `${index + 1}. ${slideConfig.title}` : index + 1 })
             ]
           }
         )
-      ] }, index);
+      ] }, slideConfig.id ?? index);
     }) }) }),
     /* @__PURE__ */ jsx12(
       "div",
@@ -1610,25 +2467,15 @@ function SlideDeck({ slides, transition, directionalTransition, annotations, onA
           "print:m-0 print:block print:max-w-none print:p-0",
           viewMode === "list" ? "block" : "hidden print:block"
         ),
-        children: /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-1 gap-8 print:block", children: slides.map((slideConfig, index) => {
-          const SlideComponent = slideConfig.component;
-          return /* @__PURE__ */ jsx12(
-            "div",
-            {
-              className: "aspect-video w-full overflow-hidden rounded-xl border border-neutral-800 bg-black shadow-sm print:relative print:m-0 print:h-[1080px] print:w-[1920px] print:break-after-page print:overflow-hidden print:rounded-none print:border-0 print:shadow-none",
-              children: /* @__PURE__ */ jsx12("div", { className: "h-full w-full print:h-[720px] print:w-[1280px] print:origin-top-left print:scale-[1.5]", children: /* @__PURE__ */ jsx12(
-                AnimationProvider,
-                {
-                  currentStep: slideConfig.steps,
-                  totalSteps: slideConfig.steps,
-                  showAllAnimations: true,
-                  children: /* @__PURE__ */ jsx12(SlideErrorBoundary, { slideIndex: index, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx12(SlideComponent, { slideNumber: index + 1, totalSlides: slides.length }) })
-                }
-              ) })
-            },
-            index
-          );
-        }) })
+        children: /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-1 gap-8 print:block", children: slides.map((slideConfig, index) => /* @__PURE__ */ jsx12(
+          ListSlide,
+          {
+            slide: slideConfig,
+            index,
+            total: slides.length
+          },
+          slideConfig.id ?? index
+        )) })
       }
     )
   ] });