promptslide 0.3.6 → 0.3.8

package/dist/index.js

@@ -666,8 +666,505 @@ function SlideEmbed({ slides, transition, directionalTransition }) {
 
 // src/core/slide-deck.tsx
 import { LayoutGroup } from "framer-motion";
-import { ChevronLeft, ChevronRight, Download, Grid3X3, List, Maximize, Monitor } from "lucide-react";
-import { useCallback as useCallback3, useEffect as useEffect3, useRef, useState as useState3 } from "react";
+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";
+
+// src/core/annotations/annotation-overlay.tsx
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
+
+// src/core/annotations/annotation-form.tsx
+import { useEffect as useEffect3, useRef, 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);
+  useEffect3(() => {
+    textareaRef.current?.focus();
+  }, []);
+  const handleSubmit = () => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    onSubmit(trimmed);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === "Escape") {
+      onCancel();
+    }
+    e.stopPropagation();
+  };
+  const left = xPercent > 70 ? void 0 : `${xPercent}%`;
+  const right = xPercent > 70 ? `${100 - xPercent}%` : void 0;
+  const top = yPercent > 70 ? void 0 : `${yPercent}%`;
+  const bottom = yPercent > 70 ? `${100 - yPercent}%` : void 0;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "dialog",
+      className: "absolute z-40 w-72 overflow-hidden rounded-xl border border-white/[0.08] bg-neutral-900/95 shadow-2xl backdrop-blur-2xl",
+      style: { left, right, top, bottom },
+      onClick: (e) => e.stopPropagation(),
+      onKeyDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between border-b border-white/[0.06] px-3.5 py-2.5", children: [
+          /* @__PURE__ */ jsx8("span", { className: "text-xs font-medium tracking-wide text-neutral-400", children: "Add annotation" }),
+          /* @__PURE__ */ jsx8(
+            "button",
+            {
+              onClick: onCancel,
+              className: "rounded-lg p-1 text-neutral-500 transition-colors hover:bg-white/[0.06] hover:text-neutral-300",
+              children: /* @__PURE__ */ jsx8(X, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "p-3", children: [
+          /* @__PURE__ */ jsx8(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: text,
+              onChange: (e) => setText(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder: "Describe the change you want...",
+              className: "w-full resize-none rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 py-2 text-sm text-white placeholder-neutral-500 outline-none transition-colors focus:border-[#FF6B35]/50 focus:bg-white/[0.06]",
+              rows: 3
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { className: "mt-2.5 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx8("span", { className: "text-[11px] text-neutral-600", children: "Enter to send" }),
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                onClick: handleSubmit,
+                disabled: !text.trim(),
+                className: "flex h-7 w-7 items-center justify-center rounded-lg bg-[#FF6B35] text-white shadow-lg shadow-[#FF6B35]/20 transition-all hover:bg-[#FF7A4A] hover:shadow-[#FF6B35]/30 disabled:opacity-30 disabled:shadow-none disabled:hover:bg-[#FF6B35]",
+                children: /* @__PURE__ */ jsx8(ArrowUp, { className: "h-3.5 w-3.5", strokeWidth: 2.5 })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/core/annotations/annotation-pin.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+function AnnotationPin({ number, status, xPercent, yPercent, isSelected, onClick }) {
+  const isResolved = status === "resolved";
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      className: "absolute z-30 -translate-x-1/2 -translate-y-1/2 transition-all duration-200 hover:scale-110",
+      style: { left: `${xPercent}%`, top: `${yPercent}%` },
+      title: `Annotation #${number}`,
+      children: [
+        isSelected && !isResolved && /* @__PURE__ */ jsx9("div", { className: "absolute inset-[-4px] animate-pulse rounded-full bg-[#FF6B35]/25 blur-sm" }),
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            className: `relative flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-semibold shadow-lg backdrop-blur-sm transition-all duration-200 ${isSelected ? isResolved ? "bg-neutral-500/90 text-white ring-2 ring-neutral-400/50" : "bg-[#FF6B35] text-white ring-2 ring-[#FF6B35]/40 ring-offset-1 ring-offset-black/50" : isResolved ? "bg-neutral-700/80 text-neutral-400" : "bg-[#FF6B35]/90 text-white hover:bg-[#FF6B35]"}`,
+            children: number
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/core/annotations/selectors.ts
+function buildElementTarget(element, slideRoot) {
+  const rect = element.getBoundingClientRect();
+  const rootRect = slideRoot.getBoundingClientRect();
+  const xPercent = (rect.left + rect.width / 2 - rootRect.left) / rootRect.width * 100;
+  const yPercent = (rect.top + rect.height / 2 - rootRect.top) / rootRect.height * 100;
+  return {
+    dataAnnotate: element.getAttribute("data-annotate") || void 0,
+    contentNearPin: getTextFingerprint(element),
+    position: { xPercent, yPercent }
+  };
+}
+function resolveTarget(target, slideRoot) {
+  if (target.dataAnnotate) {
+    const el = slideRoot.querySelector(`[data-annotate="${target.dataAnnotate}"]`);
+    if (el) return { element: el, method: "dataAnnotate" };
+  }
+  if (target.contentNearPin) {
+    const match = findByTextContent(slideRoot, target.contentNearPin);
+    if (match) return { element: match, method: "contentNearPin" };
+  }
+  return { element: null, method: "position" };
+}
+function getTextFingerprint(element) {
+  const text = element.textContent?.trim();
+  if (!text) return void 0;
+  return text.slice(0, 100);
+}
+function findByTextContent(root, text) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  let best = null;
+  let bestLength = Infinity;
+  while (walker.nextNode()) {
+    const el = walker.currentNode;
+    const elText = el.textContent?.trim();
+    if (!elText) continue;
+    const elFingerprint = elText.slice(0, 100);
+    if (elFingerprint === text && elText.length < bestLength) {
+      best = el;
+      bestLength = elText.length;
+    }
+  }
+  return best;
+}
+
+// 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 }) {
+  const [pending, setPending] = useState4(null);
+  const [hoveredElement, setHoveredElement] = useState4(null);
+  const overlayRef = useRef2(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 };
+    }
+    const { element } = resolveTarget(a.target, container);
+    if (element) {
+      const rect = element.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const xPercent = (rect.left + rect.width / 2 - containerRect.left) / containerRect.width * 100;
+      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 };
+  });
+  const handleOverlayClick = useCallback3(
+    (e) => {
+      const container = slideContainerRef.current;
+      if (!container) return;
+      const overlay = overlayRef.current;
+      if (overlay) overlay.style.pointerEvents = "none";
+      const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
+      if (overlay) overlay.style.pointerEvents = "";
+      if (!elementUnder || !container.contains(elementUnder)) {
+        setPending(null);
+        onSelectId(null);
+        return;
+      }
+      let target = elementUnder;
+      if (target.tagName === "SPAN" && target.parentElement && container.contains(target.parentElement)) {
+        const parent = target.parentElement;
+        if (parent.tagName !== "DIV" || parent.children.length <= 3) {
+          target = parent;
+        }
+      }
+      const annotationTarget = buildElementTarget(target, container);
+      const containerRect = container.getBoundingClientRect();
+      const xPercent = (e.clientX - containerRect.left) / containerRect.width * 100;
+      const yPercent = (e.clientY - containerRect.top) / containerRect.height * 100;
+      setPending({ target: annotationTarget, xPercent, yPercent });
+      onSelectId(null);
+    },
+    [slideContainerRef, onSelectId]
+  );
+  const handleSubmit = useCallback3(
+    (text) => {
+      if (!pending) return;
+      addAnnotation(currentSlide, slideTitle, pending.target, text);
+      setPending(null);
+      onShowPanel();
+    },
+    [pending, currentSlide, slideTitle, addAnnotation, onShowPanel]
+  );
+  const handleMouseMove = useCallback3(
+    (e) => {
+      if (pending) {
+        setHoveredElement(null);
+        return;
+      }
+      const container = slideContainerRef.current;
+      if (!container) return;
+      const overlay = overlayRef.current;
+      if (overlay) overlay.style.pointerEvents = "none";
+      const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
+      if (overlay) overlay.style.pointerEvents = "";
+      if (elementUnder && container.contains(elementUnder) && elementUnder !== container) {
+        const containerRect = container.getBoundingClientRect();
+        const elRect = elementUnder.getBoundingClientRect();
+        setHoveredElement(
+          new DOMRect(
+            elRect.left - containerRect.left,
+            elRect.top - containerRect.top,
+            elRect.width,
+            elRect.height
+          )
+        );
+      } else {
+        setHoveredElement(null);
+      }
+    },
+    [slideContainerRef, pending]
+  );
+  useEffect4(() => {
+    setPending(null);
+    onSelectId(null);
+    setHoveredElement(null);
+  }, [currentSlide, onSelectId]);
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    hoveredElement && /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: "pointer-events-none absolute z-20 rounded-lg border-2 border-dashed border-[#FF6B35]/50 bg-[#FF6B35]/5",
+        style: {
+          left: hoveredElement.x,
+          top: hoveredElement.y,
+          width: hoveredElement.width,
+          height: hoveredElement.height
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      "div",
+      {
+        ref: overlayRef,
+        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` },
+        onClick: handleOverlayClick,
+        onKeyDown: (e) => {
+          if (e.key === "Escape") {
+            setPending(null);
+            onSelectId(null);
+          }
+        },
+        onMouseMove: handleMouseMove,
+        onMouseLeave: () => setHoveredElement(null)
+      }
+    ),
+    resolvedAnnotations.map(({ annotation, xPercent, yPercent, number }) => /* @__PURE__ */ jsx10(
+      AnnotationPin,
+      {
+        number,
+        status: annotation.status,
+        xPercent,
+        yPercent,
+        isSelected: annotation.id === selectedId,
+        onClick: () => {
+          onSelectId(annotation.id === selectedId ? null : annotation.id);
+          onShowPanel();
+          setPending(null);
+        }
+      },
+      annotation.id
+    )),
+    pending && /* @__PURE__ */ jsx10(
+      AnnotationForm,
+      {
+        xPercent: pending.xPercent,
+        yPercent: pending.yPercent,
+        onSubmit: handleSubmit,
+        onCancel: () => setPending(null)
+      }
+    )
+  ] });
+}
+
+// src/core/annotations/annotation-panel.tsx
+import { MessageCircle, Trash2, X as X2 } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function AnnotationPanel({ annotations, selectedId, onSelect, onDelete, 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 })
+      ] }),
+      /* @__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" })
+        }
+      )
+    ] }),
+    /* @__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__ */ jsxs5("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center", children: [
+        /* @__PURE__ */ jsx11("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-white/[0.04]", children: /* @__PURE__ */ jsx11(MessageCircle, { className: "h-5 w-5 text-neutral-600" }) }),
+        /* @__PURE__ */ jsx11("p", { className: "text-sm text-neutral-500", children: "Click on slide elements to add annotations" })
+      ] }),
+      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(
+          AnnotationItem,
+          {
+            annotation: a,
+            number: i + 1,
+            isSelected: a.id === selectedId,
+            onSelect: () => onSelect(a.id),
+            onDelete: () => onDelete(a.id)
+          },
+          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(
+          AnnotationItem,
+          {
+            annotation: a,
+            number: open.length + i + 1,
+            isSelected: a.id === selectedId,
+            onSelect: () => onSelect(a.id),
+            onDelete: () => onDelete(a.id)
+          },
+          a.id
+        ))
+      ] })
+    ] })
+  ] });
+}
+function AnnotationItem({
+  annotation,
+  number,
+  isSelected,
+  onSelect,
+  onDelete
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick: onSelect,
+      onKeyDown: (e) => {
+        if (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: "flex items-start gap-2.5", children: [
+          /* @__PURE__ */ jsx11(
+            "div",
+            {
+              className: `mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full text-[11px] font-semibold ${annotation.status === "open" ? "bg-[#FF6B35] text-white" : "bg-neutral-700 text-neutral-400"}`,
+              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 }),
+            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 })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/core/annotations/use-annotations.ts
+import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState5 } from "react";
+
+// src/core/annotations/adapters/http.ts
+var ENDPOINT = "/__promptslide_annotations";
+async function loadAll() {
+  try {
+    const res = await fetch(ENDPOINT);
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.annotations || [];
+  } catch {
+    return [];
+  }
+}
+async function saveAll(annotations) {
+  const data = { version: 1, annotations };
+  await fetch(ENDPOINT, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data)
+  });
+}
+function createHttpAdapter() {
+  let cache = [];
+  return {
+    async load() {
+      cache = await loadAll();
+      return cache;
+    },
+    async add(annotation) {
+      cache = [...cache, annotation];
+      await saveAll(cache);
+    },
+    async remove(id) {
+      cache = cache.filter((a) => a.id !== id);
+      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);
+    return adapterRef.current.subscribe?.(setAnnotations);
+  }, []);
+  const addAnnotation = useCallback4(
+    (slideIndex, slideTitle, target, body) => {
+      const annotation = {
+        id: crypto.randomUUID(),
+        slideIndex,
+        slideTitle,
+        target,
+        body,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        status: "open"
+      };
+      setAnnotations((prev) => [...prev, annotation]);
+      adapterRef.current.add(annotation);
+    },
+    []
+  );
+  const deleteAnnotation = useCallback4((id) => {
+    setAnnotations((prev) => prev.filter((a) => a.id !== id));
+    adapterRef.current.remove(id);
+  }, []);
+  const getSlideAnnotations = useCallback4(
+    (slideIndex) => annotations.filter((a) => a.slideIndex === slideIndex),
+    [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 };
+}
 
 // src/core/utils.ts
 import { clsx } from "clsx";
@@ -677,16 +1174,16 @@ function cn(...inputs) {
 }
 
 // src/core/slide-deck.tsx
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function SlideExportView({ slides, slideIndex }) {
-  const [ready, setReady] = useState3(false);
+  const [ready, setReady] = useState6(false);
   const clampedIndex = Math.max(0, Math.min(slideIndex, slides.length - 1));
   const slideConfig = slides[clampedIndex];
   const SlideComponent = slideConfig.component;
-  useEffect3(() => {
+  useEffect6(() => {
     setReady(true);
   }, []);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       "data-export-ready": ready ? "true" : void 0,
@@ -697,32 +1194,46 @@ function SlideExportView({ slides, slideIndex }) {
         position: "relative",
         background: "black"
       },
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx12(
         AnimationProvider,
         {
           currentStep: slideConfig.steps,
           totalSteps: slideConfig.steps,
           showAllAnimations: true,
-          children: /* @__PURE__ */ jsx8(SlideErrorBoundary, { slideIndex: clampedIndex, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx8(SlideComponent, { slideNumber: clampedIndex + 1, totalSlides: slides.length }) })
+          children: /* @__PURE__ */ jsx12(SlideErrorBoundary, { slideIndex: clampedIndex, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx12(SlideComponent, { slideNumber: clampedIndex + 1, totalSlides: slides.length }) })
         }
       )
     }
   );
 }
-function SlideDeck({ slides, transition, directionalTransition }) {
-  const [exportParams] = useState3(() => {
+function SlideDeck({ slides, transition, directionalTransition, annotations, onAnnotationAdd, onAnnotationDelete }) {
+  const [exportParams] = useState6(() => {
     if (typeof window === "undefined") return null;
     const params = new URLSearchParams(window.location.search);
     if (params.get("export") !== "true") return null;
     return { slideIndex: parseInt(params.get("slide") || "0", 10) };
   });
   if (exportParams) {
-    return /* @__PURE__ */ jsx8(SlideExportView, { slides, slideIndex: exportParams.slideIndex });
+    return /* @__PURE__ */ jsx12(SlideExportView, { slides, slideIndex: exportParams.slideIndex });
   }
-  const [viewMode, setViewMode] = useState3("slide");
-  const [isPresentationMode, setIsPresentationMode] = useState3(false);
-  const [scale, setScale] = useState3(1);
-  const containerRef = useRef(null);
+  const internal = useAnnotations();
+  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),
+    [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 {
     currentSlide,
     animationStep,
@@ -736,21 +1247,21 @@ function SlideDeck({ slides, transition, directionalTransition }) {
   } = useSlideNavigation({
     slides
   });
-  const togglePresentationMode = useCallback3(async () => {
+  const togglePresentationMode = useCallback5(async () => {
     if (!document.fullscreenElement) {
       await document.documentElement.requestFullscreen();
     } else {
       await document.exitFullscreen();
     }
   }, []);
-  useEffect3(() => {
+  useEffect6(() => {
     const handleFullscreenChange = () => {
       setIsPresentationMode(!!document.fullscreenElement);
     };
     document.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, []);
-  useEffect3(() => {
+  useEffect6(() => {
     const calculateScale = () => {
       if (!isPresentationMode) {
         setScale(1);
@@ -778,7 +1289,7 @@ function SlideDeck({ slides, transition, directionalTransition }) {
       window.print();
     }, 100);
   };
-  useEffect3(() => {
+  useEffect6(() => {
     const handleKeyDown = (e) => {
       if (e.key === "f" || e.key === "F") {
         togglePresentationMode();
@@ -788,7 +1299,7 @@ function SlideDeck({ slides, transition, directionalTransition }) {
         setViewMode((prev) => prev === "grid" ? "slide" : "grid");
         return;
       }
-      if (viewMode !== "slide") return;
+      if (viewMode !== "slide" || isAnnotationMode) return;
       if (e.key === "ArrowRight" || e.key === " ") {
         e.preventDefault();
         advance();
@@ -799,9 +1310,9 @@ function SlideDeck({ slides, transition, directionalTransition }) {
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [advance, goBack, viewMode, togglePresentationMode]);
-  return /* @__PURE__ */ jsxs2("div", { className: "min-h-screen w-full bg-neutral-950 text-foreground", children: [
-    /* @__PURE__ */ jsx8("style", { children: `
+  }, [advance, goBack, viewMode, togglePresentationMode, isAnnotationMode]);
+  return /* @__PURE__ */ jsxs6("div", { className: "min-h-screen w-full bg-neutral-950 text-foreground", children: [
+    /* @__PURE__ */ jsx12("style", { children: `
         @media print {
           @page {
             size: 1920px 1080px;
@@ -822,15 +1333,16 @@ function SlideDeck({ slides, transition, directionalTransition }) {
           }
         }
       ` }),
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs6(
       "div",
       {
         className: cn(
-          "fixed top-4 right-4 z-50 flex gap-1 rounded-lg border border-neutral-800 bg-neutral-950/90 p-1 backdrop-blur-sm print:hidden",
-          isPresentationMode && "hidden"
+          "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"
         ),
         children: [
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx12(
             "button",
             {
               onClick: () => setViewMode("slide"),
@@ -839,10 +1351,10 @@ function SlideDeck({ slides, transition, directionalTransition }) {
                 viewMode === "slide" && "bg-neutral-800 text-white"
               ),
               title: "Presentation View",
-              children: /* @__PURE__ */ jsx8(Monitor, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx12(Monitor, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx12(
             "button",
             {
               onClick: () => setViewMode("list"),
@@ -851,10 +1363,10 @@ function SlideDeck({ slides, transition, directionalTransition }) {
                 viewMode === "list" && "bg-neutral-800 text-white"
               ),
               title: "List View",
-              children: /* @__PURE__ */ jsx8(List, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx12(List, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx12(
             "button",
             {
               onClick: () => setViewMode("grid"),
@@ -863,121 +1375,185 @@ function SlideDeck({ slides, transition, directionalTransition }) {
                 viewMode === "grid" && "bg-neutral-800 text-white"
               ),
               title: "Grid View",
-              children: /* @__PURE__ */ jsx8(Grid3X3, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx12(Grid3X3, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsx8("div", { className: "mx-1 w-px bg-neutral-800" }),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx12("div", { className: "mx-1 w-px bg-neutral-800" }),
+          /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              onClick: () => {
+                setIsAnnotationMode((prev) => {
+                  const next = !prev;
+                  setShowAnnotationPanel(next);
+                  if (!next) setSelectedAnnotationId(null);
+                  return next;
+                });
+              },
+              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]"
+              ),
+              title: "Annotate slides",
+              children: [
+                /* @__PURE__ */ jsx12(MessageCircle2, { className: "h-4 w-4" }),
+                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("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",
-              children: /* @__PURE__ */ jsx8(Download, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx12(Download, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx12(
             "button",
             {
               onClick: togglePresentationMode,
               className: "rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white",
               title: "Present (F)",
-              children: /* @__PURE__ */ jsx8(Maximize, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx12(Maximize, { className: "h-4 w-4" })
             }
           )
         ]
       }
     ),
-    viewMode === "slide" && /* @__PURE__ */ jsxs2(
+    viewMode === "slide" && /* @__PURE__ */ jsxs6(
       "div",
       {
-        ref: containerRef,
-        role: "presentation",
-        tabIndex: isPresentationMode ? 0 : void 0,
         className: cn(
-          "flex h-screen w-full flex-col items-center justify-center overflow-hidden print:hidden",
-          isPresentationMode ? "bg-black p-0" : "p-4 md:p-8"
+          "flex h-screen w-full print:hidden",
+          isPresentationMode ? "bg-black" : ""
         ),
-        onClick: isPresentationMode ? advance : void 0,
-        onKeyDown: isPresentationMode ? (e) => {
-          if (e.key === "Enter" || e.key === " ") advance();
-        } : void 0,
         children: [
-          /* @__PURE__ */ jsx8(LayoutGroup, { id: "slide-deck", children: isPresentationMode ? /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsxs6(
             "div",
             {
-              className: "pointer-events-none relative overflow-hidden bg-black",
-              style: {
-                width: SLIDE_DIMENSIONS.width,
-                height: SLIDE_DIMENSIONS.height,
-                transform: `scale(${scale})`,
-                transformOrigin: "center center"
-              },
-              children: /* @__PURE__ */ jsx8(
-                SlideRenderer,
-                {
-                  slides,
-                  currentSlide,
-                  animationStep,
-                  totalSteps,
-                  direction,
-                  showAllAnimations,
-                  transition,
-                  directionalTransition,
-                  onTransitionComplete
-                }
-              )
+              ref: containerRef,
+              role: "presentation",
+              tabIndex: isPresentationMode ? 0 : void 0,
+              className: cn(
+                "flex 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,
+              onKeyDown: isPresentationMode ? (e) => {
+                if (e.key === "Enter" || e.key === " ") advance();
+              } : void 0,
+              children: [
+                /* @__PURE__ */ jsx12(LayoutGroup, { id: "slide-deck", children: isPresentationMode ? /* @__PURE__ */ jsx12(
+                  "div",
+                  {
+                    className: "pointer-events-none relative overflow-hidden bg-black",
+                    style: {
+                      width: SLIDE_DIMENSIONS.width,
+                      height: SLIDE_DIMENSIONS.height,
+                      transform: `scale(${scale})`,
+                      transformOrigin: "center center"
+                    },
+                    children: /* @__PURE__ */ jsx12(
+                      SlideRenderer,
+                      {
+                        slides,
+                        currentSlide,
+                        animationStep,
+                        totalSteps,
+                        direction,
+                        showAllAnimations,
+                        transition,
+                        directionalTransition,
+                        onTransitionComplete
+                      }
+                    )
+                  }
+                ) : /* @__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 ?? (() => {
+                      })
+                    }
+                  )
+                ] }) }),
+                !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",
+                      children: /* @__PURE__ */ jsx12(ChevronLeft, { className: "h-5 w-5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs6("div", { className: "flex min-w-[4rem] flex-col items-center", children: [
+                    /* @__PURE__ */ jsxs6("span", { className: "font-mono text-sm text-neutral-500", children: [
+                      currentSlide + 1,
+                      " / ",
+                      slides.length
+                    ] }),
+                    slides[currentSlide]?.title && /* @__PURE__ */ jsx12("span", { className: "mt-0.5 text-xs text-neutral-600", children: slides[currentSlide].title })
+                  ] }),
+                  /* @__PURE__ */ jsx12(
+                    "button",
+                    {
+                      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",
+                      children: /* @__PURE__ */ jsx12(ChevronRight, { className: "h-5 w-5" })
+                    }
+                  )
+                ] })
+              ]
             }
-          ) : /* @__PURE__ */ jsx8("div", { className: "relative aspect-video w-full max-w-7xl overflow-hidden rounded-xl border border-neutral-800 bg-black shadow-2xl", children: /* @__PURE__ */ jsx8(
-            SlideRenderer,
+          ),
+          isAnnotationMode && showAnnotationPanel && !isPresentationMode && /* @__PURE__ */ jsx12(
+            AnnotationPanel,
             {
-              slides,
-              currentSlide,
-              animationStep,
-              totalSteps,
-              direction,
-              showAllAnimations,
-              transition,
-              directionalTransition,
-              onTransitionComplete
-            }
-          ) }) }),
-          !isPresentationMode && /* @__PURE__ */ jsxs2("div", { className: "mt-6 flex items-center gap-4", children: [
-            /* @__PURE__ */ jsx8(
-              "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",
-                children: /* @__PURE__ */ jsx8(ChevronLeft, { className: "h-5 w-5" })
+              annotations: getSlideAnnotations(currentSlide),
+              selectedId: selectedAnnotationId,
+              onSelect: setSelectedAnnotationId,
+              onDelete: effectiveDelete ?? (() => {
+              }),
+              onClose: () => {
+                setShowAnnotationPanel(false);
+                setSelectedAnnotationId(null);
               }
-            ),
-            /* @__PURE__ */ jsxs2("div", { className: "flex min-w-[4rem] flex-col items-center", children: [
-              /* @__PURE__ */ jsxs2("span", { className: "font-mono text-sm text-neutral-500", children: [
-                currentSlide + 1,
-                " / ",
-                slides.length
-              ] }),
-              slides[currentSlide]?.title && /* @__PURE__ */ jsx8("span", { className: "mt-0.5 text-xs text-neutral-600", children: slides[currentSlide].title })
-            ] }),
-            /* @__PURE__ */ jsx8(
-              "button",
-              {
-                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",
-                children: /* @__PURE__ */ jsx8(ChevronRight, { className: "h-5 w-5" })
-              }
-            )
-          ] })
+            }
+          )
         ]
       }
     ),
-    viewMode === "grid" && /* @__PURE__ */ jsx8("div", { className: "mx-auto max-w-7xl p-8 pt-16 print:hidden", children: /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4", children: slides.map((slideConfig, index) => {
+    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__ */ jsxs2("div", { className: showSectionHeader ? "col-span-full" : void 0, children: [
-        showSectionHeader && /* @__PURE__ */ jsx8("h3", { className: "mt-4 mb-3 text-xs font-bold tracking-[0.2em] text-neutral-500 uppercase first:mt-0", children: slideConfig.section }),
-        /* @__PURE__ */ jsxs2(
+      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 }),
+        /* @__PURE__ */ jsxs6(
           "button",
           {
             onClick: () => {
@@ -986,30 +1562,30 @@ function SlideDeck({ slides, transition, directionalTransition }) {
             },
             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",
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx12(
                 "div",
                 {
                   className: "h-full w-full origin-top-left scale-[0.25]",
                   style: { width: "400%", height: "400%" },
-                  children: /* @__PURE__ */ jsx8(
+                  children: /* @__PURE__ */ jsx12(
                     AnimationProvider,
                     {
                       currentStep: slideConfig.steps,
                       totalSteps: slideConfig.steps,
                       showAllAnimations: true,
-                      children: /* @__PURE__ */ jsx8(SlideErrorBoundary, { slideIndex: index, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx8(SlideComponent, { slideNumber: index + 1, totalSlides: slides.length }) })
+                      children: /* @__PURE__ */ jsx12(SlideErrorBoundary, { slideIndex: index, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx12(SlideComponent, { slideNumber: index + 1, totalSlides: slides.length }) })
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" }),
-              /* @__PURE__ */ jsx8("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 })
+              /* @__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);
     }) }) }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx12(
       "div",
       {
         className: cn(
@@ -1017,19 +1593,19 @@ function SlideDeck({ slides, transition, directionalTransition }) {
           "print:m-0 print:block print:max-w-none print:p-0",
           viewMode === "list" ? "block" : "hidden print:block"
         ),
-        children: /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-1 gap-8 print:block", children: slides.map((slideConfig, index) => {
+        children: /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-1 gap-8 print:block", children: slides.map((slideConfig, index) => {
           const SlideComponent = slideConfig.component;
-          return /* @__PURE__ */ jsx8(
+          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__ */ jsx8("div", { className: "h-full w-full print:h-[720px] print:w-[1280px] print:origin-top-left print:scale-[1.5]", children: /* @__PURE__ */ jsx8(
+              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__ */ jsx8(SlideErrorBoundary, { slideIndex: index, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx8(SlideComponent, { slideNumber: index + 1, totalSlides: slides.length }) })
+                  children: /* @__PURE__ */ jsx12(SlideErrorBoundary, { slideIndex: index, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx12(SlideComponent, { slideNumber: index + 1, totalSlides: slides.length }) })
                 }
               ) })
             },
@@ -1044,6 +1620,7 @@ export {
   Animated,
   AnimatedGroup,
   AnimationProvider,
+  AnnotationOverlay,
   DEFAULT_SLIDE_TRANSITION,
   EASE_DEFAULT,
   EASE_IN,
@@ -1074,11 +1651,13 @@ export {
   SlideThemeProvider,
   cn,
   createDirectionalVariants,
+  createHttpAdapter,
   directionalSlideX,
   directionalSlideY,
   getSlideTransition,
   getSlideVariants,
   useAnimationContext,
+  useAnnotations,
   useSlideNavigation,
   useTheme
 };