promptslide 0.3.17 → 0.3.19

package/dist/index.js

@@ -503,6 +503,26 @@ function useSlideNavigation({
     },
     [currentSlide, slides.length, onSlideChange]
   );
+  const goToStep = useCallback(
+    (step) => {
+      if (!Number.isInteger(step)) return;
+      setQueuedAction(null);
+      setAnimationStep(Math.max(0, Math.min(step, slides[currentSlide]?.steps ?? 0)));
+      setNavState((previous) => ({ ...previous, direction: 0 }));
+    },
+    [slides, currentSlide]
+  );
+  const restartAtSlide = useCallback(
+    (index) => {
+      if (index < 0 || index >= slides.length) return;
+      setQueuedAction(null);
+      setAnimationStep(0);
+      setCurrentSlide(index);
+      setNavState({ status: index === currentSlide ? "idle" : "transitioning", direction: 1 });
+      onSlideChange?.(index);
+    },
+    [slides.length, currentSlide, onSlideChange]
+  );
   useEffect(() => {
     if (navState.status === "idle" && queuedAction !== null) {
       setQueuedAction(null);
@@ -523,6 +543,8 @@ function useSlideNavigation({
     advance,
     goBack,
     goToSlide,
+    goToStep,
+    restartAtSlide,
     onTransitionComplete
   };
 }
@@ -595,6 +617,7 @@ var SlideErrorBoundary = class extends React.Component {
 // src/core/slide-renderer.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 function SlideRenderer({
+  playbackKey,
   slides,
   currentSlide,
   animationStep,
@@ -616,6 +639,7 @@ function SlideRenderer({
   return /* @__PURE__ */ jsx6(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx6(
     motion3.div,
     {
+      "data-slide-render-index": currentSlide,
       variants: slideVariants,
       initial: "enter",
       animate: "center",
@@ -633,20 +657,14 @@ function SlideRenderer({
           currentStep: animationStep,
           totalSteps,
           showAllAnimations,
-          children: /* @__PURE__ */ jsx6(
-            SlideErrorBoundary,
+          children: /* @__PURE__ */ jsx6(SlideErrorBoundary, { slideIndex: currentSlide, slideTitle: slides[currentSlide]?.title, children: /* @__PURE__ */ jsx6(
+            CurrentSlideComponent,
             {
-              slideIndex: currentSlide,
-              slideTitle: slides[currentSlide]?.title,
-              children: /* @__PURE__ */ jsx6(
-                CurrentSlideComponent,
-                {
-                  slideNumber: currentSlide + 1,
-                  totalSlides: slides.length
-                }
-              )
-            }
-          )
+              slideNumber: currentSlide + 1,
+              totalSlides: slides.length
+            },
+            playbackKey
+          ) })
         }
       )
     },
@@ -753,18 +771,17 @@ function SlideEmbed({ slides, transition, directionalTransition }) {
 // src/core/slide-deck.tsx
 import { LayoutGroup } from "framer-motion";
 import {
+  ChevronDown as ChevronDown2,
   ChevronLeft,
   ChevronRight,
-  Download,
-  Grid3X3,
-  List,
+  Download as Download2,
   MessageCircle,
-  Monitor,
   PanelLeftClose,
   PanelLeftOpen,
-  Play
+  Play as Play2,
+  Settings2
 } from "lucide-react";
-import { useCallback as useCallback5, useEffect as useEffect7, useLayoutEffect, useMemo as useMemo4, useRef as useRef6, useState as useState7 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9, useLayoutEffect as useLayoutEffect2, useMemo as useMemo5, useRef as useRef8, useState as useState10 } from "react";
 
 // src/core/annotations/annotation-overlay.tsx
 import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
@@ -1105,6 +1122,7 @@ 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({
+  embedded = false,
   annotations,
   unlinkedAnnotations = [],
   selectedId,
@@ -1118,82 +1136,88 @@ function AnnotationPanel({
   const resolved = annotations.filter((a) => a.status === "resolved");
   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 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__ */ 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) => /* @__PURE__ */ jsx11(
-          AnnotationItem,
-          {
-            annotation: a,
-            number: numberFor(a),
-            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
-        ))
-      ] }),
-      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) => /* @__PURE__ */ jsx11(
-          AnnotationItem,
-          {
-            annotation: a,
-            number: numberFor(a),
-            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
-        ))
-      ] }),
-      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 }),
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: `flex h-full max-w-[90vw] flex-shrink-0 flex-col bg-neutral-950 text-white ${embedded ? "w-full" : "w-80 border-l border-neutral-800"}`,
+      children: [
+        !embedded && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between border-b border-neutral-800 px-3 py-2", children: [
           /* @__PURE__ */ jsx11(
-            AnnotationItem,
+            "button",
             {
-              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)
+              onClick: onClose,
+              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" })
             }
-          )
-        ] }, a.id))
-      ] })
-    ] }),
-    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, {}) })
-    ] })
-  ] });
+          ),
+          /* @__PURE__ */ jsxs5("span", { className: "text-right text-sm font-semibold", children: [
+            "Comments (",
+            total,
+            ")"
+          ] })
+        ] }),
+        /* @__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) => /* @__PURE__ */ jsx11(
+              AnnotationItem,
+              {
+                annotation: a,
+                number: numberFor(a),
+                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
+            ))
+          ] }),
+          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) => /* @__PURE__ */ jsx11(
+              AnnotationItem,
+              {
+                annotation: a,
+                number: numberFor(a),
+                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
+            ))
+          ] }),
+          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 + 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, {}) })
+        ] })
+      ]
+    }
+  );
 }
 function WorkflowHint() {
   return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
@@ -1480,6 +1504,10 @@ function useAnnotations(slidesOrAdapter, adapter) {
   };
 }
 
+// src/core/inspector.tsx
+import { X as X2 } from "lucide-react";
+import { useId } from "react";
+
 // src/core/utils.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -1487,22 +1515,752 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/core/inspector.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+function Inspector({
+  mode,
+  visible,
+  editorAvailable,
+  width,
+  overlay,
+  onSelect,
+  onClose,
+  slideSettings,
+  comments
+}) {
+  const prefix = useId();
+  const tabs = [
+    { id: "slide", label: "Slide" },
+    ...editorAvailable ? [{ id: "editor", label: "Elements" }] : [],
+    { id: "comments", label: "Comments" }
+  ];
+  const closeLabel = mode === "editor" ? "Done editing" : mode === "comments" ? "Hide comments" : "Close slide settings";
+  return /* @__PURE__ */ jsx12(
+    "aside",
+    {
+      "data-ps-inspector": true,
+      "aria-label": "Inspector",
+      "aria-hidden": !visible,
+      inert: !visible,
+      className: cn(
+        "h-full shrink-0 overflow-hidden bg-neutral-950 text-white transition-[width,transform] duration-200 ease-out motion-reduce:transition-none print:hidden",
+        overlay && "fixed inset-y-0 right-0 z-[60]",
+        overlay && !visible && "translate-x-full"
+      ),
+      style: { width: visible ? width : 0, maxWidth: overlay ? "90vw" : void 0 },
+      onKeyDown: (event) => {
+        if ((event.key === " " || event.key === "Enter") && event.target.closest("button"))
+          event.stopPropagation();
+      },
+      children: /* @__PURE__ */ jsxs6("div", { className: "flex h-full min-h-0 w-full flex-col border-l border-neutral-800", children: [
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            "data-ps-inspector-header": true,
+            className: "flex shrink-0 items-center gap-1 border-b border-neutral-800 px-2 py-2",
+            children: [
+              /* @__PURE__ */ jsx12(
+                "div",
+                {
+                  role: "tablist",
+                  "aria-label": "Inspector sections",
+                  className: "flex min-w-0 flex-1 gap-1",
+                  onKeyDown: (event) => {
+                    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const buttons = Array.from(
+                      event.currentTarget.querySelectorAll("button")
+                    );
+                    const index = buttons.indexOf(event.target);
+                    const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : (index + (event.key === "ArrowRight" ? 1 : -1) + buttons.length) % buttons.length;
+                    buttons[next]?.focus();
+                  },
+                  children: tabs.map((tab) => /* @__PURE__ */ jsx12(
+                    "button",
+                    {
+                      id: `${prefix}-tab-${tab.id}`,
+                      role: "tab",
+                      "aria-selected": mode === tab.id,
+                      "aria-controls": `${prefix}-panel-${tab.id}`,
+                      tabIndex: mode === tab.id ? 0 : -1,
+                      className: cn(
+                        "rounded-md px-2 py-1.5 text-xs font-medium hover:bg-neutral-800 focus-visible:outline-2 focus-visible:outline-orange-500",
+                        mode === tab.id ? "bg-neutral-800 text-white" : "text-neutral-400"
+                      ),
+                      onClick: () => onSelect(tab.id),
+                      children: tab.label
+                    },
+                    tab.id
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx12(
+                "button",
+                {
+                  onClick: onClose,
+                  "aria-label": closeLabel,
+                  title: closeLabel,
+                  className: "shrink-0 rounded-md p-1.5 text-neutral-400 hover:bg-neutral-800 hover:text-white focus-visible:outline-2 focus-visible:outline-orange-500",
+                  children: /* @__PURE__ */ jsx12(X2, { size: 16 })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          "div",
+          {
+            id: `${prefix}-panel-slide`,
+            role: "tabpanel",
+            "aria-labelledby": `${prefix}-tab-slide`,
+            hidden: mode !== "slide",
+            className: "min-h-0 flex-1",
+            children: slideSettings
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          "div",
+          {
+            id: `${prefix}-panel-editor`,
+            role: "tabpanel",
+            "aria-labelledby": `${prefix}-tab-editor`,
+            hidden: mode !== "editor",
+            className: "min-h-0 flex-1",
+            children: /* @__PURE__ */ jsx12(
+              "div",
+              {
+                "data-ps-editor-panel": true,
+                "data-open": mode === "editor" && visible,
+                "aria-hidden": mode !== "editor" || !visible,
+                inert: mode !== "editor" || !visible,
+                className: "h-full w-full"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          "div",
+          {
+            id: `${prefix}-panel-comments`,
+            role: "tabpanel",
+            "aria-labelledby": `${prefix}-tab-comments`,
+            hidden: mode !== "comments",
+            className: "min-h-0 flex-1",
+            children: comments
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/core/loop/config.mjs
+var DEFAULT_LOOP_CONFIG = { version: 1, defaultDuration: 5, slides: {} };
+function validateLoopConfig(value) {
+  if (!value || value.version !== 1 || !validDuration(value.defaultDuration) || !value.slides || typeof value.slides !== "object" || Array.isArray(value.slides)) {
+    throw new Error("Invalid loop settings");
+  }
+  const slides = /* @__PURE__ */ Object.create(null);
+  if (Object.keys(value.slides).length > 1e3) throw new Error("Too many slides");
+  for (const [id, item] of Object.entries(value.slides)) {
+    if (!id || id.length > 256 || !item || typeof item !== "object" || item.excluded !== void 0 && typeof item.excluded !== "boolean" || item.steps !== void 0 && (!Number.isInteger(item.steps) || item.steps < 0 || item.steps > 1e3) || item.dwell !== void 0 && (!Array.isArray(item.dwell) || item.dwell.length > 1001 || !item.dwell.every((duration) => duration === null || validDuration(duration))))
+      throw new Error(`Invalid timing for ${id}`);
+    slides[id] = {
+      ...item.excluded !== void 0 ? { excluded: item.excluded } : {},
+      ...item.steps !== void 0 ? { steps: item.steps } : {},
+      ...item.dwell !== void 0 ? { dwell: [...item.dwell] } : {}
+    };
+  }
+  return { version: 1, defaultDuration: value.defaultDuration, slides };
+}
+function validDuration(value) {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0.1 && value <= 3600;
+}
+function loopSlideKey(slide, index) {
+  return slide.id || String(index + 1);
+}
+function stateDuration(config, slide, index, step) {
+  return config.slides[loopSlideKey(slide, index)]?.dwell?.[step] ?? config.defaultDuration;
+}
+function includedSlides(config, slides) {
+  return slides.flatMap(
+    (slide, index) => config.slides[loopSlideKey(slide, index)]?.excluded ? [] : [index]
+  );
+}
+function loopDuration(config, slides) {
+  return includedSlides(config, slides).reduce((total, index) => {
+    const slide = slides[index];
+    for (let step = 0; step <= slide.steps; step++)
+      total += stateDuration(config, slide, index, step);
+    return total;
+  }, 0);
+}
+
+// src/core/loop/context.tsx
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var LoopContext = createContext3(DEFAULT_LOOP_CONFIG);
+function LoopConfigProvider({
+  config,
+  children
+}) {
+  return /* @__PURE__ */ jsx13(LoopContext.Provider, { value: config, children });
+}
+var useDefaultLoopConfig = () => useContext3(LoopContext);
+
+// src/core/loop/loop-settings.tsx
+import { Check as Check2, Download, Play, RotateCcw as RotateCcw2 } from "lucide-react";
+import { useId as useId2, useState as useState7 } from "react";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+var button = "rounded-md border border-neutral-700 px-2.5 py-2 text-xs hover:bg-neutral-800 disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-orange-500";
+function DurationInput({
+  value,
+  label,
+  onCommit,
+  onFocus,
+  id
+}) {
+  return /* @__PURE__ */ jsxs7("span", { className: "inline-flex w-20 shrink-0 items-center gap-1 rounded-md border border-neutral-700 bg-neutral-950 px-2.5 focus-within:border-orange-500 focus-within:outline-2 focus-within:outline-orange-500/30", children: [
+    /* @__PURE__ */ jsx14(
+      "input",
+      {
+        id,
+        "aria-label": label,
+        className: "min-w-0 w-full bg-transparent py-2 text-right text-sm tabular-nums text-white outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+        style: { colorScheme: "dark" },
+        type: "number",
+        min: "0.1",
+        max: "3600",
+        step: "0.1",
+        defaultValue: value,
+        onFocus,
+        onBlur: (event) => {
+          const next = event.target.valueAsNumber;
+          if (Number.isFinite(next) && next >= 0.1 && next <= 3600) {
+            if (next !== value) onCommit(next);
+          } else event.target.value = String(value);
+        }
+      },
+      value
+    ),
+    /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", className: "text-xs text-neutral-500", children: "s" })
+  ] });
+}
+function LoopSettings({
+  slides,
+  currentSlide,
+  animationStep,
+  config,
+  onChange,
+  onStepChange,
+  onSave,
+  onStart,
+  onRevert,
+  dirty
+}) {
+  const defaultDurationId = useId2();
+  const [message, setMessage] = useState7("");
+  const [saving, setSaving] = useState7(false);
+  const slide = slides[currentSlide];
+  const key = slide ? loopSlideKey(slide, currentSlide) : "";
+  const settings = config.slides[key];
+  const changedSteps = settings?.steps !== void 0 && settings.steps !== slide?.steps;
+  const updateDuration = (step, value) => {
+    if (!slide) return;
+    const dwell = Array.from({ length: slide.steps + 1 }, (_, i) => settings?.dwell?.[i] ?? null);
+    dwell[step] = value;
+    onChange({
+      ...config,
+      slides: { ...config.slides, [key]: { ...settings, steps: slide.steps, dwell } }
+    });
+  };
+  const save = async () => {
+    setSaving(true);
+    try {
+      setMessage(await onSave(validateLoopConfig(config)));
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : "Could not save loop settings");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const download = () => {
+    const url = URL.createObjectURL(
+      new Blob([JSON.stringify(config, null, 2) + "\n"], { type: "application/json" })
+    );
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "loop-config.json";
+    a.click();
+    URL.revokeObjectURL(url);
+    setMessage(
+      "Place loop-config.json in the project folder to include these settings in builds and publishing."
+    );
+  };
+  return /* @__PURE__ */ jsxs7(
+    "section",
+    {
+      "aria-label": "Slide settings",
+      className: "flex h-full min-h-0 flex-col text-sm text-white",
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "min-h-0 flex-1 overflow-y-auto p-4", children: [
+          slide && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+            /* @__PURE__ */ jsxs7("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-neutral-500", children: [
+              "Slide ",
+              currentSlide + 1
+            ] }),
+            /* @__PURE__ */ jsx14("h2", { className: "mt-1 truncate text-base font-semibold", children: slide.title || slide.id || `Slide ${currentSlide + 1}` }),
+            /* @__PURE__ */ jsx14("p", { className: "mt-1 text-xs text-neutral-400", children: "Select slides in the thumbnail rail. Select a state below to preview it on the canvas." }),
+            /* @__PURE__ */ jsxs7("label", { className: "mt-5 flex items-center justify-between gap-3 border-b border-neutral-800 pb-4", children: [
+              "Include in loop",
+              /* @__PURE__ */ jsxs7("span", { className: "relative flex h-5 w-5 shrink-0 items-center justify-center", children: [
+                /* @__PURE__ */ jsx14(
+                  "input",
+                  {
+                    "aria-label": "Include current slide in loop",
+                    className: "peer h-5 w-5 cursor-pointer appearance-none rounded border border-neutral-600 bg-neutral-950 transition-colors checked:border-orange-500 checked:bg-orange-500 hover:border-neutral-400 checked:hover:border-orange-400 checked:hover:bg-orange-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500",
+                    type: "checkbox",
+                    checked: !settings?.excluded,
+                    onChange: (event) => onChange({
+                      ...config,
+                      slides: {
+                        ...config.slides,
+                        [key]: { ...settings, excluded: !event.target.checked }
+                      }
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx14(
+                  Check2,
+                  {
+                    "aria-hidden": "true",
+                    size: 14,
+                    strokeWidth: 3,
+                    className: "pointer-events-none absolute text-white opacity-0 peer-checked:opacity-100"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs7("h3", { className: "mb-2 mt-4 text-xs font-semibold text-neutral-300", children: [
+              "State timings ",
+              /* @__PURE__ */ jsx14("span", { className: "font-normal text-neutral-500", children: "\xB7 seconds" })
+            ] }),
+            changedSteps && /* @__PURE__ */ jsx14("p", { role: "status", className: "mb-3 text-xs text-amber-300", children: "This slide's step count changed. Review its timings; new states use the default." }),
+            /* @__PURE__ */ jsx14("div", { className: "space-y-1.5", "aria-label": "Slide states", children: Array.from({ length: slide.steps + 1 }, (_, step) => {
+              const label = step === 0 ? "Initial view" : `Step ${step}`;
+              const inherited = settings?.dwell?.[step] == null;
+              return /* @__PURE__ */ jsxs7(
+                "div",
+                {
+                  className: `flex items-center gap-1 rounded-md border p-1 ${animationStep === step ? "border-orange-500/50 bg-orange-500/5" : "border-transparent"}`,
+                  children: [
+                    /* @__PURE__ */ jsxs7(
+                      "button",
+                      {
+                        "aria-label": label,
+                        "aria-pressed": animationStep === step,
+                        className: "min-w-0 flex-1 rounded px-1 py-1.5 text-left text-xs hover:bg-neutral-800",
+                        onClick: () => onStepChange(step),
+                        children: [
+                          label,
+                          /* @__PURE__ */ jsx14("span", { className: "mt-0.5 block text-[10px] text-neutral-500", children: inherited ? "Default duration" : "Custom duration" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      DurationInput,
+                      {
+                        value: stateDuration(config, slide, currentSlide, step),
+                        label: `${label} duration in seconds`,
+                        onFocus: () => onStepChange(step),
+                        onCommit: (value) => updateDuration(step, value)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      "button",
+                      {
+                        className: "rounded p-1 text-neutral-500 hover:text-white disabled:opacity-30",
+                        disabled: inherited,
+                        "aria-label": `Use default for ${label.toLowerCase()}`,
+                        title: "Use default duration",
+                        onClick: () => updateDuration(step, null),
+                        children: /* @__PURE__ */ jsx14(RotateCcw2, { size: 13 })
+                      }
+                    )
+                  ]
+                },
+                `${key}:${step}`
+              );
+            }) }),
+            /* @__PURE__ */ jsx14("p", { className: "mt-3 text-xs leading-relaxed text-neutral-500", children: "Durations include reveal animations. Allow enough time for videos and animations that play by themselves." }),
+            /* @__PURE__ */ jsx14(
+              "button",
+              {
+                className: `${button} mt-3 w-full`,
+                onClick: () => {
+                  const rest = { ...settings };
+                  delete rest.dwell;
+                  delete rest.steps;
+                  onChange({ ...config, slides: { ...config.slides, [key]: rest } });
+                },
+                children: "Use default for this slide"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs7("details", { className: "mt-5 border-t border-neutral-800 pt-4", open: true, children: [
+            /* @__PURE__ */ jsx14("summary", { className: "cursor-pointer text-xs font-semibold text-neutral-300", children: "Loop defaults" }),
+            /* @__PURE__ */ jsxs7(
+              "label",
+              {
+                htmlFor: defaultDurationId,
+                className: "mt-3 flex items-center justify-between gap-2 text-xs text-neutral-400",
+                children: [
+                  "Seconds per state",
+                  /* @__PURE__ */ jsx14(
+                    DurationInput,
+                    {
+                      id: defaultDurationId,
+                      value: config.defaultDuration,
+                      label: "Default duration in seconds",
+                      onCommit: (value) => onChange({ ...config, defaultDuration: value })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs7("p", { className: "mt-3 text-xs text-neutral-500", children: [
+              includedSlides(config, slides).length,
+              " slides \xB7",
+              " ",
+              loopDuration(config, slides).toFixed(1),
+              "s + slide transitions"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs7("footer", { className: "shrink-0 space-y-2 border-t border-neutral-800 p-3", children: [
+          /* @__PURE__ */ jsx14("p", { role: "status", className: "text-xs text-neutral-400", children: dirty ? "Unsaved loop settings" : message || "Loop settings saved" }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx14(
+              "button",
+              {
+                className: `${button} flex-1`,
+                disabled: !dirty || saving,
+                onClick: () => {
+                  onRevert();
+                  setMessage("");
+                },
+                children: "Revert"
+              }
+            ),
+            /* @__PURE__ */ jsx14(
+              "button",
+              {
+                className: `${button} flex-1 border-orange-500/50 text-orange-400`,
+                disabled: saving,
+                onClick: () => void save(),
+                children: saving ? "Saving\u2026" : "Save settings"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx14(
+              "button",
+              {
+                className: `${button} flex items-center justify-center gap-1.5`,
+                "aria-label": "Download loop settings",
+                onClick: download,
+                children: /* @__PURE__ */ jsx14(Download, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsxs7(
+              "button",
+              {
+                className: `${button} flex flex-1 items-center justify-center gap-1.5`,
+                disabled: !includedSlides(config, slides).length || saving,
+                onClick: () => onStart(validateLoopConfig(config)),
+                children: [
+                  /* @__PURE__ */ jsx14(Play, { size: 14 }),
+                  " Start loop"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/core/loop/use-loop-playback.ts
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef6, useState as useState8 } from "react";
+function useLoopPlayback({
+  config,
+  slides,
+  currentSlide,
+  animationStep,
+  isTransitioning,
+  enabled,
+  advance,
+  goBack,
+  restartAtSlide
+}) {
+  const [paused, setPaused] = useState8(false);
+  const [hidden, setHidden] = useState8(() => typeof document !== "undefined" && document.hidden);
+  const [epoch, setEpoch] = useState8(0);
+  const [revision, setRevision] = useState8(0);
+  const remaining = useRef6(void 0);
+  const identity = useRef6("");
+  const included = useMemo4(() => includedSlides(config, slides), [config, slides]);
+  useEffect7(() => {
+    const onVisibility = () => setHidden(document.hidden);
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, []);
+  const restart = useCallback5(
+    (index) => {
+      setEpoch((value) => value + 1);
+      remaining.current = void 0;
+      restartAtSlide(index);
+    },
+    [restartAtSlide]
+  );
+  const resetTimer = useCallback5(() => {
+    remaining.current = void 0;
+    setRevision((value) => value + 1);
+  }, []);
+  const move = (direction) => {
+    resetTimer();
+    if (isTransitioning || included.length === 0) return;
+    if (direction === 1 && animationStep < (slides[currentSlide]?.steps ?? 0)) advance();
+    else if (direction === -1 && animationStep > 0) goBack();
+    else {
+      const position = included.indexOf(currentSlide);
+      restart(included[(position + direction + included.length) % included.length]);
+    }
+  };
+  useEffect7(() => {
+    if (!enabled) {
+      remaining.current = void 0;
+      setPaused(false);
+      return;
+    }
+    const key = `${currentSlide}:${animationStep}:${epoch}:${revision}`;
+    if (identity.current !== key) {
+      identity.current = key;
+      remaining.current = void 0;
+    }
+    if (paused || hidden || isTransitioning || included.length === 0) return;
+    const slide = slides[currentSlide];
+    if (!slide) return;
+    const duration = remaining.current ?? stateDuration(config, slide, currentSlide, animationStep) * 1e3;
+    const deadline = performance.now() + duration;
+    const timer = window.setTimeout(() => {
+      remaining.current = void 0;
+      if (animationStep < slide.steps) advance();
+      else {
+        const position = included.indexOf(currentSlide);
+        restart(included[(position + 1) % included.length]);
+      }
+    }, duration);
+    return () => {
+      window.clearTimeout(timer);
+      remaining.current = Math.max(0, deadline - performance.now());
+    };
+  }, [
+    enabled,
+    paused,
+    hidden,
+    isTransitioning,
+    currentSlide,
+    animationStep,
+    epoch,
+    revision,
+    config,
+    slides,
+    advance,
+    restart,
+    included
+  ]);
+  return { paused, setPaused, epoch, restart, move };
+}
+
+// src/core/toolbar-action.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function ToolbarAction({
+  label,
+  selected,
+  title = label,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx15(
+    "button",
+    {
+      ...props,
+      type: "button",
+      "aria-label": label,
+      "aria-pressed": selected,
+      title,
+      className: cn(
+        "relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#FF6B35] disabled:cursor-default disabled:opacity-35 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0",
+        selected ? "border-[#FF6B35]/50 bg-[#FF6B35]/15 text-[#FF6B35] enabled:hover:border-[#FF6B35] enabled:hover:bg-[#FF6B35]/25" : "text-neutral-400 enabled:hover:bg-neutral-800 enabled:hover:text-white"
+      ),
+      children
+    }
+  );
+}
+
+// src/core/view-menu.tsx
+import { Check as Check3, ChevronDown, Grid3X3, List, Monitor } from "lucide-react";
+import { useEffect as useEffect8, useId as useId3, useLayoutEffect, useRef as useRef7, useState as useState9 } from "react";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+var views = [
+  { mode: "slide", label: "Presentation view", shortcut: "V", icon: Monitor },
+  { mode: "list", label: "List view", shortcut: "L", icon: List },
+  { mode: "grid", label: "Grid view", shortcut: "G", icon: Grid3X3 }
+];
+function ViewMenu({
+  value,
+  onChange,
+  disabled
+}) {
+  const [open, setOpen] = useState9(false);
+  const id = useId3();
+  const root = useRef7(null);
+  const trigger = useRef7(null);
+  const active = views.find((view) => view.mode === value);
+  const Icon = active.icon;
+  useLayoutEffect(() => {
+    if (open) root.current?.querySelector('[aria-checked="true"]')?.focus();
+  }, [open]);
+  useEffect8(() => {
+    if (!open) return;
+    const close = (event) => {
+      if (!root.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, [open]);
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      role: "group",
+      "aria-label": "View selector",
+      ref: root,
+      className: "relative flex",
+      onBlur: (event) => {
+        const next = event.relatedTarget;
+        if (next && !event.currentTarget.contains(next)) setOpen(false);
+      },
+      onKeyDown: (event) => {
+        event.stopPropagation();
+        if (event.key === "Escape") {
+          setOpen(false);
+          trigger.current?.focus();
+        } else if (open && event.key === "Tab") {
+          trigger.current?.focus();
+          setOpen(false);
+        } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+          event.preventDefault();
+          if (!open) {
+            setOpen(true);
+            return;
+          }
+          const items = Array.from(
+            root.current.querySelectorAll('[role="menuitemradio"]')
+          );
+          const index = items.indexOf(document.activeElement);
+          const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length;
+          items[next]?.focus();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs8(
+          "button",
+          {
+            ref: trigger,
+            disabled,
+            "aria-label": "View options",
+            title: `View options \xB7 ${active.label}`,
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            "aria-controls": open ? id : void 0,
+            className: "inline-flex h-8 items-center gap-1.5 rounded-md bg-neutral-800 px-2 text-white hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-orange-500",
+            onClick: () => setOpen((previous) => !previous),
+            children: [
+              /* @__PURE__ */ jsx16(Icon, { size: 16 }),
+              /* @__PURE__ */ jsx16(ChevronDown, { size: 12 })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx16(
+          "div",
+          {
+            id,
+            role: "menu",
+            "aria-label": "View options",
+            className: "absolute left-0 top-10 w-56 rounded-lg border border-neutral-700 bg-neutral-950 p-1 text-sm text-white",
+            children: views.map(({ mode, label, shortcut, icon: OptionIcon }) => /* @__PURE__ */ jsxs8(
+              "button",
+              {
+                role: "menuitemradio",
+                "aria-checked": mode === value,
+                tabIndex: -1,
+                className: cn(
+                  "flex w-full items-center gap-2 rounded px-2 py-2 text-left text-neutral-300 hover:bg-neutral-800 focus:bg-neutral-800 focus:outline-none",
+                  mode === value && "text-white"
+                ),
+                onClick: () => {
+                  onChange(mode);
+                  setOpen(false);
+                  trigger.current?.focus();
+                },
+                children: [
+                  /* @__PURE__ */ jsx16(OptionIcon, { size: 16 }),
+                  /* @__PURE__ */ jsx16("span", { className: "flex-1", children: label }),
+                  /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", className: "text-xs text-neutral-500", children: shortcut }),
+                  /* @__PURE__ */ jsx16(Check3, { size: 14, className: mode === value ? "text-orange-400" : "invisible" })
+                ]
+              },
+              mode
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/core/slide-deck.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs9 } 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 loadLoopConfig(base, storageKey) {
+  let fallback = DEFAULT_LOOP_CONFIG;
+  try {
+    fallback = validateLoopConfig(base);
+  } catch {
+  }
+  try {
+    const saved = JSON.parse(localStorage.getItem(storageKey) || "null");
+    if (saved?.base === JSON.stringify(base)) return validateLoopConfig(saved.config);
+  } catch {
+  }
+  return fallback;
+}
 function GridThumbnail({
   slide,
   index,
   total
 }) {
-  const viewportRef = useRef6(null);
-  const canvasRef = useRef6(null);
+  const viewportRef = useRef8(null);
+  const canvasRef = useRef8(null);
   const SlideComponent = slide.component;
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const viewport = viewportRef.current;
     const canvas = canvasRef.current;
     if (!viewport || !canvas) return;
@@ -1514,21 +2272,21 @@ function GridThumbnail({
     observer.observe(viewport);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsx12("div", { ref: viewportRef, className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx17("div", { ref: viewportRef, className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx17(
     "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 }) }) })
+      children: /* @__PURE__ */ jsx17(AnimationProvider, { currentStep: slide.steps, totalSteps: slide.steps, showAllAnimations: true, children: /* @__PURE__ */ jsx17(SlideErrorBoundary, { slideIndex: index, slideTitle: slide.title, children: /* @__PURE__ */ jsx17(SlideComponent, { slideNumber: index + 1, totalSlides: total }) }) })
     }
   ) });
 }
 function ListSlide({ slide, index, total }) {
-  const viewportRef = useRef6(null);
-  const canvasRef = useRef6(null);
+  const viewportRef = useRef8(null);
+  const canvasRef = useRef8(null);
   const SlideComponent = slide.component;
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const viewport = viewportRef.current;
     const canvas = canvasRef.current;
     if (!viewport || !canvas) return;
@@ -1540,29 +2298,29 @@ function ListSlide({ slide, index, total }) {
     observer.observe(viewport);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx17(
     "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(
+      children: /* @__PURE__ */ jsx17(
         "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 }) }) })
+          children: /* @__PURE__ */ jsx17(AnimationProvider, { currentStep: slide.steps, totalSteps: slide.steps, showAllAnimations: true, children: /* @__PURE__ */ jsx17(SlideErrorBoundary, { slideIndex: index, slideTitle: slide.title, children: /* @__PURE__ */ jsx17(SlideComponent, { slideNumber: index + 1, totalSlides: total }) }) })
         }
       )
     }
   );
 }
 function SlideExportView({ slides, slideIndex }) {
-  const [ready, setReady] = useState7(false);
+  const [ready, setReady] = useState10(false);
   const clampedIndex = Math.max(0, Math.min(slideIndex, slides.length - 1));
   const slideConfig = slides[clampedIndex];
   const SlideComponent = slideConfig.component;
-  useEffect7(() => {
+  useEffect9(() => {
     let cancelled = false;
     const markReady = async () => {
       await document.fonts.ready;
@@ -1579,7 +2337,7 @@ function SlideExportView({ slides, slideIndex }) {
       cancelled = true;
     };
   }, []);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-export-ready": ready ? "true" : void 0,
@@ -1590,13 +2348,13 @@ function SlideExportView({ slides, slideIndex }) {
         position: "relative",
         background: "black"
       },
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx17(
         AnimationProvider,
         {
           currentStep: slideConfig.steps,
           totalSteps: slideConfig.steps,
           showAllAnimations: true,
-          children: /* @__PURE__ */ jsx12(SlideErrorBoundary, { slideIndex: clampedIndex, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx12(SlideComponent, { slideNumber: clampedIndex + 1, totalSlides: slides.length }) })
+          children: /* @__PURE__ */ jsx17(SlideErrorBoundary, { slideIndex: clampedIndex, slideTitle: slideConfig.title, children: /* @__PURE__ */ jsx17(SlideComponent, { slideNumber: clampedIndex + 1, totalSlides: slides.length }) })
         }
       )
     }
@@ -1606,19 +2364,21 @@ function SlideDeck({
   slides,
   transition,
   directionalTransition,
+  loopConfig: suppliedLoopConfig,
+  onLoopConfigChange,
   annotations,
   onAnnotationAdd,
   onAnnotationDelete,
   onAnnotationUpdate
 }) {
-  const [exportParams] = useState7(() => {
+  const [exportParams] = useState10(() => {
     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__ */ jsx12(SlideExportView, { slides, slideIndex: exportParams.slideIndex });
+    return /* @__PURE__ */ jsx17(SlideExportView, { slides, slideIndex: exportParams.slideIndex });
   }
   const internal = useAnnotations(slides);
   const isExternallyManaged = annotations !== void 0;
@@ -1626,81 +2386,179 @@ function SlideDeck({
   const effectiveAdd = isExternallyManaged ? onAnnotationAdd : internal.addAnnotation;
   const effectiveDelete = isExternallyManaged ? onAnnotationDelete : internal.deleteAnnotation;
   const effectiveUpdate = isExternallyManaged ? onAnnotationUpdate : internal.updateAnnotation;
-  const openCount = useMemo4(
+  const openCount = useMemo5(
     () => effectiveAnnotations.filter((a) => a.status === "open").length,
     [effectiveAnnotations]
   );
-  const getSlideAnnotations = useCallback5(
+  const getSlideAnnotations = useCallback6(
     (slideIndex) => effectiveAnnotations.filter(
       (a) => a.slideId ? a.slideId === slides[slideIndex]?.id : a.slideIndex === slideIndex
     ),
     [effectiveAnnotations, slides]
   );
-  const unlinkedAnnotations = useMemo4(
+  const unlinkedAnnotations = useMemo5(
     () => effectiveAnnotations.filter((a) => a.slideId && !slides.some((slide) => slide.id === a.slideId)),
     [effectiveAnnotations, slides]
   );
-  const [viewMode, setViewMode] = useState7("slide");
-  const [isPresentationMode, setIsPresentationMode] = useState7(false);
-  const [viewportWidth, setViewportWidth] = useState7(
+  const [viewMode, setViewMode] = useState10("slide");
+  const [isEditorOpen, setIsEditorOpen] = useState10(false);
+  const editorOpenRef = useRef8(false);
+  const [editorAvailable, setEditorAvailable] = useState10(false);
+  const [inspectorMode, setInspectorMode] = useState10(null);
+  const pendingInspector = useRef8(void 0);
+  const [editorRevision, setEditorRevision] = useState10(0);
+  const activateInspector = useCallback6((mode) => {
+    setInspectorMode(mode);
+    setLoopMenuOpen(false);
+    if (mode) setViewMode("slide");
+    if (mode !== "comments") {
+      setSelectedAnnotationId(null);
+      setHoveredAnnotationId(null);
+    }
+  }, []);
+  const requestInspector = useCallback6(
+    (mode) => {
+      if (isEditorOpen) {
+        if (mode === "editor") return;
+        pendingInspector.current = mode;
+        window.dispatchEvent(
+          new CustomEvent("promptslide:editor-request", { detail: { open: false } })
+        );
+        return;
+      }
+      if (mode === "editor") {
+        if (editorAvailable)
+          window.dispatchEvent(
+            new CustomEvent("promptslide:editor-request", { detail: { open: true } })
+          );
+        return;
+      }
+      activateInspector(mode);
+    },
+    [isEditorOpen, editorAvailable, activateInspector]
+  );
+  useEffect9(() => {
+    const onEditorState = (event) => {
+      const open = Boolean(event.detail?.open);
+      const changed = editorOpenRef.current !== open;
+      editorOpenRef.current = open;
+      setIsEditorOpen(open);
+      if (open) {
+        if (changed) pendingInspector.current = void 0;
+        activateInspector("editor");
+      } else if (changed) {
+        const next = pendingInspector.current;
+        pendingInspector.current = void 0;
+        activateInspector(next === void 0 ? null : next);
+      }
+    };
+    const onEditorReady = (event) => setEditorAvailable(Boolean(event.detail?.available));
+    const onCloseCancelled = () => {
+      pendingInspector.current = void 0;
+    };
+    const refreshEditor = () => setEditorRevision((value) => value + 1);
+    window.addEventListener("promptslide:editor-state", onEditorState);
+    window.addEventListener("promptslide:editor-ready", onEditorReady);
+    window.addEventListener("promptslide:editor-close-cancelled", onCloseCancelled);
+    window.addEventListener("promptslide:editor-refresh", refreshEditor);
+    return () => {
+      window.removeEventListener("promptslide:editor-state", onEditorState);
+      window.removeEventListener("promptslide:editor-ready", onEditorReady);
+      window.removeEventListener("promptslide:editor-close-cancelled", onCloseCancelled);
+      window.removeEventListener("promptslide:editor-refresh", refreshEditor);
+    };
+  }, [activateInspector]);
+  const [isPresentationMode, setIsPresentationMode] = useState10(false);
+  const providedLoopConfig = useDefaultLoopConfig();
+  const defaultLoopKey = JSON.stringify(suppliedLoopConfig ?? providedLoopConfig);
+  const defaultLoopConfig = useMemo5(() => JSON.parse(defaultLoopKey), [defaultLoopKey]);
+  const storageKey = `promptslide:loop:${typeof location === "undefined" ? "" : location.pathname}:${JSON.stringify(slides.map(loopSlideKey))}`;
+  const [loopConfig, setLoopConfig] = useState10(
+    () => loadLoopConfig(defaultLoopConfig, storageKey)
+  );
+  const [loopDraft, setLoopDraft] = useState10(
+    () => loadLoopConfig(defaultLoopConfig, storageKey)
+  );
+  const [playbackConfig, setPlaybackConfig] = useState10(loopConfig);
+  const [isLooping, setIsLooping] = useState10(false);
+  const [loopMenuOpen, setLoopMenuOpen] = useState10(false);
+  const [loopError, setLoopError] = useState10("");
+  const [loopStartScreen, setLoopStartScreen] = useState10(
+    () => typeof window !== "undefined" && new URLSearchParams(window.location.search).has("loop")
+  );
+  const loopMenuRef = useRef8(null);
+  useEffect9(() => {
+    const config = loadLoopConfig(defaultLoopConfig, storageKey);
+    setLoopConfig(config);
+    setLoopDraft(config);
+    setPlaybackConfig(config);
+    setIsLooping(false);
+  }, [defaultLoopConfig, storageKey]);
+  useEffect9(() => {
+    if (!loopMenuOpen) return;
+    const close = (event) => {
+      if (!loopMenuRef.current?.contains(event.target)) setLoopMenuOpen(false);
+    };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, [loopMenuOpen]);
+  const [viewportWidth, setViewportWidth] = useState10(
     () => typeof window === "undefined" ? 1280 : window.innerWidth
   );
-  const [showThumbnailRail, setShowThumbnailRail] = useState7(
+  const [showThumbnailRail, setShowThumbnailRail] = useState10(
     () => typeof window === "undefined" ? true : window.innerWidth >= NARROW_VIEWPORT_WIDTH
   );
-  const [thumbnailWidth, setThumbnailWidth] = useState7(() => {
+  const [thumbnailWidth, setThumbnailWidth] = useState10(() => {
     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 isAnnotationMode = inspectorMode === "comments";
+  const [selectedAnnotationId, setSelectedAnnotationId] = useState10(null);
+  const [hoveredAnnotationId, setHoveredAnnotationId] = useState10(null);
+  const [isResizingThumbnails, setIsResizingThumbnails] = useState10(false);
+  const [isDragCollapsed, setIsDragCollapsed] = useState10(false);
+  const [isAnimatingDragBoundary, setIsAnimatingDragBoundary] = useState10(false);
+  const [scale, setScale] = useState10(1);
+  const containerRef = useRef8(null);
+  const slideContainerRef = useRef8(null);
+  const previewViewportRef = useRef8(null);
+  const activeThumbnailRef = useRef8(null);
+  const preferredRailOpenRef = useRef8(true);
+  const wasNarrowViewportRef = useRef8(viewportWidth < NARROW_VIEWPORT_WIDTH);
+  const resizeStartRef = useRef8(null);
+  const previousUserSelectRef = useRef8("");
+  const previousCursorRef = useRef8("");
+  const dragCollapsedRef = useRef8(false);
+  const dragAnimationTimerRef = useRef8(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) => {
+  const setThumbnailRailOpen = useCallback6((open) => {
     preferredRailOpenRef.current = open;
     setShowThumbnailRail(open);
   }, []);
-  useEffect7(() => {
+  useEffect9(() => {
     const handleResize = () => setViewportWidth(window.innerWidth);
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, []);
-  useEffect7(() => {
+  useEffect9(() => {
     if (isNarrowViewport !== wasNarrowViewportRef.current) {
       setShowThumbnailRail(isNarrowViewport ? false : preferredRailOpenRef.current);
       if (isNarrowViewport) {
-        setIsAnnotationMode(false);
-        setShowAnnotationPanel(false);
+        setInspectorMode((mode) => mode === "comments" ? null : mode);
         setSelectedAnnotationId(null);
       }
       wasNarrowViewportRef.current = isNarrowViewport;
     }
   }, [isNarrowViewport]);
-  useEffect7(() => {
+  useEffect9(() => {
     window.localStorage.setItem(THUMBNAIL_WIDTH_STORAGE_KEY, String(thumbnailWidth));
   }, [thumbnailWidth]);
-  useEffect7(
+  useEffect9(
     () => () => {
       if (resizeStartRef.current) {
         document.body.style.userSelect = previousUserSelectRef.current;
@@ -1710,7 +2568,7 @@ function SlideDeck({
     },
     []
   );
-  useEffect7(() => {
+  useEffect9(() => {
     if ((!showThumbnailRail || isPresentationMode || viewMode !== "slide") && resizeStartRef.current) {
       resizeStartRef.current = null;
       dragCollapsedRef.current = false;
@@ -1722,7 +2580,7 @@ function SlideDeck({
       document.body.style.cursor = previousCursorRef.current;
     }
   }, [showThumbnailRail, isPresentationMode, viewMode]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (!isResizingThumbnails) return;
     const getDraggedWidth = (clientX) => {
       const start = resizeStartRef.current;
@@ -1776,35 +2634,113 @@ function SlideDeck({
     currentSlide,
     animationStep,
     totalSteps,
+    isTransitioning,
     direction,
     showAllAnimations,
     advance,
     goBack,
     goToSlide,
+    goToStep,
+    restartAtSlide,
     onTransitionComplete
   } = useSlideNavigation({
     slides
   });
-  const togglePresentationMode = useCallback5(async () => {
+  const playback = useLoopPlayback({
+    config: playbackConfig,
+    slides,
+    currentSlide,
+    animationStep,
+    isTransitioning,
+    enabled: isLooping && isPresentationMode,
+    advance,
+    goBack,
+    restartAtSlide
+  });
+  const rememberLoopConfig = (config) => {
+    setLoopConfig(config);
+    setLoopDraft(config);
+    try {
+      localStorage.setItem(
+        storageKey,
+        JSON.stringify({ base: JSON.stringify(defaultLoopConfig), config })
+      );
+      return true;
+    } catch {
+      return false;
+    }
+  };
+  const saveLoopConfig = async (config) => {
+    if (onLoopConfigChange) {
+      await onLoopConfigChange(config);
+      rememberLoopConfig(config);
+      return "Loop settings saved.";
+    }
+    try {
+      const response = await fetch("/__promptslide_loop", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(config)
+      });
+      if (response.status === 204) {
+        rememberLoopConfig(config);
+        return "Saved to loop-config.json. Included in future builds and publishing.";
+      }
+      if (response.status !== 404 && response.status !== 405)
+        throw new Error(
+          "Studio could not save loop-config.json. Download the settings to keep a copy."
+        );
+    } catch (error) {
+      if (error instanceof Error && error.message.startsWith("Studio")) throw error;
+    }
+    return rememberLoopConfig(config) ? "Saved in this browser. Download settings and place loop-config.json in the project folder to share or publish them." : "Applied for this session. Browser storage is unavailable; download the settings to keep them.";
+  };
+  const startLoop = async (config = loopDraft) => {
+    if (isEditorOpen) return;
+    const first = includedSlides(config, slides)[0];
+    if (first === void 0) {
+      setLoopError("Include at least one slide before starting the loop.");
+      return;
+    }
+    setLoopError("");
+    try {
+      if (!document.fullscreenElement) await document.documentElement.requestFullscreen();
+      setPlaybackConfig(config);
+      setLoopDraft(config);
+      setViewMode("slide");
+      setInspectorMode(null);
+      setLoopMenuOpen(false);
+      setLoopStartScreen(false);
+      playback.setPaused(false);
+      playback.restart(first);
+      setIsLooping(true);
+    } catch {
+      setLoopError(
+        "Full screen could not start. Allow full screen in your browser, then try again."
+      );
+    }
+  };
+  const togglePresentationMode = useCallback6(async () => {
     if (!document.fullscreenElement) {
       await document.documentElement.requestFullscreen();
     } else {
       await document.exitFullscreen();
     }
   }, []);
-  useEffect7(() => {
+  useEffect9(() => {
     const handleFullscreenChange = () => {
       setIsPresentationMode(!!document.fullscreenElement);
+      if (!document.fullscreenElement) setIsLooping(false);
     };
     document.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, []);
-  useEffect7(() => {
+  useEffect9(() => {
     if (viewMode === "slide" && !isPresentationMode && showThumbnailRail) {
       activeThumbnailRef.current?.scrollIntoView({ block: "nearest" });
     }
   }, [currentSlide, isPresentationMode, showThumbnailRail, viewMode]);
-  useEffect7(() => {
+  useEffect9(() => {
     const calculateScale = () => {
       if (!isPresentationMode) {
         setScale(1);
@@ -1820,7 +2756,7 @@ function SlideDeck({
     window.addEventListener("resize", calculateScale);
     return () => window.removeEventListener("resize", calculateScale);
   }, [isPresentationMode]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const viewport = previewViewportRef.current;
     const canvas = slideContainerRef.current;
     if (!viewport || !canvas) return;
@@ -1836,16 +2772,10 @@ function SlideDeck({
     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 () => {
+  const toggleCommentMode = useCallback6(() => {
+    requestInspector(isAnnotationMode && viewMode === "slide" ? null : "comments");
+  }, [isAnnotationMode, viewMode, requestInspector]);
+  const handleExportPdf = useCallback6(async () => {
     try {
       const response = await fetch("/__promptslide_pdf");
       if (response.ok && response.headers.get("content-type")?.includes("application/pdf")) {
@@ -1871,13 +2801,36 @@ function SlideDeck({
       window.print();
     }, 100);
   }, [viewMode]);
-  useEffect7(() => {
+  useEffect9(() => {
     const handleKeyDown = (e) => {
       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 (loopStartScreen) return;
+      if (loopMenuOpen) {
+        if (e.key === "Escape") {
+          setLoopMenuOpen(false);
+          loopMenuRef.current?.querySelector("button")?.focus();
+        }
+        return;
+      }
+      if (isLooping) {
+        if (e.key === "Escape") {
+          setIsLooping(false);
+          if (document.fullscreenElement) void document.exitFullscreen().catch(() => {
+          });
+        } else if (e.key === " ") {
+          e.preventDefault();
+          if (!e.repeat) playback.setPaused((value) => !value);
+        } else if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+          e.preventDefault();
+          playback.move(e.key === "ArrowRight" ? 1 : -1);
+        }
+        return;
+      }
       if (key === "f") {
         e.preventDefault();
         void togglePresentationMode();
@@ -1927,17 +2880,46 @@ function SlideDeck({
   }, [
     advance,
     goBack,
+    playback,
+    isLooping,
+    loopMenuOpen,
+    loopStartScreen,
     viewMode,
     togglePresentationMode,
     isAnnotationMode,
+    isEditorOpen,
     isPresentationMode,
     setThumbnailRailOpen,
     showThumbnailRail,
     toggleCommentMode,
     handleExportPdf
   ]);
-  return /* @__PURE__ */ jsxs6("div", { className: "min-h-screen w-full bg-neutral-950 text-foreground", children: [
-    /* @__PURE__ */ jsx12("style", { children: `
+  const inspectorWidth = viewportWidth <= 850 ? 280 : 320;
+  const inspectorVisible = inspectorMode !== null && !isPresentationMode && viewMode === "slide";
+  return /* @__PURE__ */ jsxs9("div", { className: "min-h-screen w-full bg-neutral-950 text-foreground", children: [
+    /* @__PURE__ */ jsx17("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;
@@ -1961,99 +2943,161 @@ function SlideDeck({
           }
         }
       ` }),
-    /* @__PURE__ */ jsxs6(
+    loopError && /* @__PURE__ */ jsxs9(
       "div",
       {
+        role: "alert",
+        className: "fixed bottom-4 left-4 z-[110] max-w-md rounded-lg border border-red-700 bg-neutral-950 p-4 text-sm text-red-300",
+        children: [
+          loopError,
+          /* @__PURE__ */ jsx17("button", { className: "ml-3 underline", onClick: () => setLoopError(""), children: "Dismiss" })
+        ]
+      }
+    ),
+    loopStartScreen && /* @__PURE__ */ jsxs9("div", { className: "fixed inset-0 z-[90] flex flex-col items-center justify-center gap-5 bg-neutral-950 text-white", children: [
+      /* @__PURE__ */ jsx17("h1", { className: "text-3xl font-semibold", children: "Ready to loop" }),
+      /* @__PURE__ */ jsx17("p", { className: "text-neutral-400", children: "Space pauses or resumes. Escape stops the loop." }),
+      /* @__PURE__ */ jsx17(
+        "button",
+        {
+          className: "rounded-lg border border-orange-500 px-6 py-3 text-orange-400",
+          onClick: () => void startLoop(),
+          children: "Click to start"
+        }
+      ),
+      /* @__PURE__ */ jsx17(
+        "button",
+        {
+          className: "text-sm text-neutral-400 underline",
+          onClick: () => {
+            setLoopStartScreen(false);
+            requestInspector("slide");
+          },
+          children: "Configure loop"
+        }
+      )
+    ] }),
+    isLooping && playback.paused && /* @__PURE__ */ jsx17(
+      "div",
+      {
+        role: "status",
+        className: "pointer-events-none fixed bottom-4 left-4 z-[90] rounded-md bg-neutral-950 px-4 py-2 text-sm text-white",
+        children: "Loop paused \xB7 Space to resume"
+      }
+    ),
+    /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        "data-ps-viewer-toolbar": true,
+        style: inspectorVisible ? { right: inspectorWidth + 16, maxWidth: `calc(100vw - ${inspectorWidth + 32}px)` } : void 0,
         className: cn(
-          "fixed top-4 z-50 flex gap-1 rounded-lg border border-neutral-800 bg-neutral-950/90 p-1 backdrop-blur-sm transition-[right] duration-200 ease-out print:hidden",
-          (isPresentationMode || isNarrowViewport && isAnnotationMode && showAnnotationPanel) && "hidden",
-          isAnnotationMode && showAnnotationPanel ? "right-[21rem]" : "right-4"
+          "fixed top-4 z-50 flex flex-wrap 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 && inspectorVisible && !isEditorOpen) && "hidden",
+          isEditorOpen && viewportWidth <= 850 && "[&_button:disabled]:hidden [&>div]:hidden",
+          !inspectorVisible && "right-4"
         ),
         children: [
-          /* @__PURE__ */ jsx12(
-            "button",
-            {
-              onClick: () => setViewMode("slide"),
-              className: cn(
-                "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 (V)",
-              children: /* @__PURE__ */ jsx12(Monitor, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx12(
-            "button",
-            {
-              onClick: () => setViewMode("list"),
-              className: cn(
-                "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 (L)",
-              children: /* @__PURE__ */ jsx12(List, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx12(
-            "button",
-            {
-              onClick: () => setViewMode("grid"),
-              className: cn(
-                "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 (G)",
-              children: /* @__PURE__ */ jsx12(Grid3X3, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx12("div", { className: "mx-1 w-px bg-neutral-800" }),
-          /* @__PURE__ */ jsxs6(
-            "button",
+          /* @__PURE__ */ jsx17(ViewMenu, { value: viewMode, onChange: setViewMode, disabled: isEditorOpen }),
+          /* @__PURE__ */ jsx17("div", { className: "mx-1 w-px bg-neutral-800" }),
+          /* @__PURE__ */ jsxs9(
+            ToolbarAction,
             {
               onClick: toggleCommentMode,
-              className: cn(
-                "relative inline-flex h-8 items-center justify-center rounded-md transition-colors",
-                isAnnotationMode ? "border border-[#FF6B35]/50 bg-[#FF6B35]/15 p-[7px] text-[#FF6B35] hover:border-[#FF6B35] hover:bg-[#FF6B35]/25" : "p-2 text-neutral-400 hover:bg-neutral-800 hover:text-white"
-              ),
+              label: "Comment",
+              selected: isAnnotationMode,
               title: "Comment (C)",
               children: [
-                /* @__PURE__ */ jsx12(MessageCircle, { 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__ */ jsx17(MessageCircle, { className: "h-[15px] w-[15px] shrink-0" }),
+                openCount > 0 && /* @__PURE__ */ jsx17("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",
+          /* @__PURE__ */ jsx17("span", { "data-ps-editor-toolbar": true, className: "contents" }),
+          /* @__PURE__ */ jsx17(
+            ToolbarAction,
             {
-              onClick: handleExportPdf,
-              className: "rounded-md p-2 text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-white",
-              title: "Download PDF (D)",
-              children: /* @__PURE__ */ jsx12(Download, { className: "h-4 w-4" })
+              label: "Slide settings",
+              selected: inspectorMode === "slide" && inspectorVisible,
+              onClick: () => requestInspector(inspectorMode === "slide" && inspectorVisible ? null : "slide"),
+              children: /* @__PURE__ */ jsx17(Settings2, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs6(
-            "button",
+          /* @__PURE__ */ jsx17("div", { className: "mx-1 w-px bg-neutral-800" }),
+          /* @__PURE__ */ jsx17(
+            ToolbarAction,
             {
-              onClick: togglePresentationMode,
-              className: "inline-flex h-8 items-center justify-center gap-1.5 rounded-md border border-[#FF6B35]/50 bg-[#FF6B35]/15 px-3 text-sm font-semibold text-[#FF6B35] transition-colors hover:border-[#FF6B35] hover:bg-[#FF6B35]/25",
-              title: "Present (F)",
-              children: [
-                /* @__PURE__ */ jsx12(Play, { className: "h-3.5 w-3.5 fill-current" }),
-                /* @__PURE__ */ jsx12("span", { children: "Present" })
-              ]
+              onClick: handleExportPdf,
+              disabled: isEditorOpen,
+              label: "Download PDF",
+              title: "Download PDF (D)",
+              children: /* @__PURE__ */ jsx17(Download2, { className: "h-4 w-4" })
             }
-          )
+          ),
+          /* @__PURE__ */ jsxs9("div", { ref: loopMenuRef, className: "relative flex", children: [
+            /* @__PURE__ */ jsxs9(
+              "button",
+              {
+                onClick: togglePresentationMode,
+                className: "inline-flex h-8 items-center justify-center gap-1.5 rounded-l-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__ */ jsx17(Play2, { className: "h-3.5 w-3.5 fill-current" }),
+                  /* @__PURE__ */ jsx17("span", { children: "Present" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx17(
+              "button",
+              {
+                disabled: isEditorOpen,
+                "aria-label": "Presentation options",
+                "aria-expanded": loopMenuOpen,
+                "aria-controls": "presentation-options",
+                className: "rounded-r-md border border-l-0 border-[#FF6B35]/50 bg-[#FF6B35]/15 px-2 text-[#FF6B35] hover:bg-[#FF6B35]/25",
+                onClick: () => setLoopMenuOpen((value) => !value),
+                children: /* @__PURE__ */ jsx17(ChevronDown2, { size: 16 })
+              }
+            ),
+            loopMenuOpen && /* @__PURE__ */ jsxs9(
+              "div",
+              {
+                id: "presentation-options",
+                className: "absolute right-0 top-10 w-52 rounded-lg border border-neutral-700 bg-neutral-950 p-1 text-sm text-white",
+                children: [
+                  /* @__PURE__ */ jsx17(
+                    "button",
+                    {
+                      className: "w-full rounded px-3 py-2 text-left hover:bg-neutral-800",
+                      onClick: () => void startLoop(),
+                      children: "Auto-loop"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx17(
+                    "button",
+                    {
+                      className: "w-full rounded px-3 py-2 text-left hover:bg-neutral-800",
+                      onClick: () => {
+                        setLoopMenuOpen(false);
+                        requestInspector("slide");
+                      },
+                      children: "Configure loop\u2026"
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
         ]
       }
     ),
-    viewMode === "slide" && /* @__PURE__ */ jsxs6(
+    viewMode === "slide" && /* @__PURE__ */ jsxs9(
       "div",
       {
         className: cn("flex h-screen w-full print:hidden", isPresentationMode ? "bg-black" : ""),
         children: [
-          !isPresentationMode && /* @__PURE__ */ jsxs6(Fragment3, { children: [
-            /* @__PURE__ */ jsxs6(
+          !isPresentationMode && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+            /* @__PURE__ */ jsxs9(
               "div",
               {
                 className: cn(
@@ -2063,7 +3107,7 @@ function SlideDeck({
                 ),
                 style: { width: isThumbnailRailVisible ? visibleThumbnailWidth : 0 },
                 children: [
-                  /* @__PURE__ */ jsx12("div", { className: "h-full w-full overflow-hidden", children: /* @__PURE__ */ jsxs6(
+                  /* @__PURE__ */ jsx17("div", { className: "h-full w-full overflow-hidden", children: /* @__PURE__ */ jsxs9(
                     "aside",
                     {
                       id: "presentation-thumbnails",
@@ -2076,13 +3120,13 @@ function SlideDeck({
                       ),
                       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: [
+                        /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between border-b border-neutral-800 px-3 py-2", children: [
+                          /* @__PURE__ */ jsxs9("span", { className: "text-sm font-semibold", children: [
                             "Slides (",
                             slides.length,
                             ")"
                           ] }),
-                          /* @__PURE__ */ jsx12(
+                          /* @__PURE__ */ jsx17(
                             "button",
                             {
                               type: "button",
@@ -2090,11 +3134,11 @@ function SlideDeck({
                               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" })
+                              children: /* @__PURE__ */ jsx17(PanelLeftClose, { className: "h-4 w-4" })
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ jsx12("div", { className: "min-h-0 flex-1 space-y-3 overflow-y-auto p-3", children: slides.map((slideConfig, index) => /* @__PURE__ */ jsxs6(
+                        /* @__PURE__ */ jsx17("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__ */ jsxs9(
                           "button",
                           {
                             ref: index === currentSlide ? activeThumbnailRef : void 0,
@@ -2107,18 +3151,21 @@ function SlideDeck({
                               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: [
+                              /* @__PURE__ */ jsxs9("div", { className: "relative aspect-video w-full overflow-hidden rounded bg-black", children: [
+                                loopDraft.slides[loopSlideKey(slideConfig, index)]?.excluded && /* @__PURE__ */ jsx17("span", { className: "absolute right-1 top-1 z-10 rounded border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[9px] text-neutral-400", children: "Skip in loop" }),
+                                /* @__PURE__ */ jsx17(
+                                  GridThumbnail,
+                                  {
+                                    slide: slideConfig,
+                                    index,
+                                    total: slides.length
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsx17("div", { className: "mt-1.5 flex items-baseline gap-2 px-0.5 text-xs", children: slideConfig.title ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+                                /* @__PURE__ */ jsx17("span", { className: "font-mono text-neutral-400", children: index + 1 }),
+                                /* @__PURE__ */ jsx17("span", { className: "truncate", children: slideConfig.title })
+                              ] }) : /* @__PURE__ */ jsxs9("span", { children: [
                                 "Slide ",
                                 index + 1
                               ] }) })
@@ -2129,7 +3176,7 @@ function SlideDeck({
                       ]
                     }
                   ) }),
-                  isThumbnailRailVisible && /* @__PURE__ */ jsx12(
+                  isThumbnailRailVisible && /* @__PURE__ */ jsx17(
                     "div",
                     {
                       role: "separator",
@@ -2178,16 +3225,17 @@ function SlideDeck({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx17(
               "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",
+                  "fixed 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",
+                  isNarrowViewport && !inspectorVisible ? "top-16" : "top-4",
                   isThumbnailRailVisible || isResizingThumbnails ? "pointer-events-none opacity-0" : "opacity-100 delay-200"
                 ),
-                children: /* @__PURE__ */ jsx12(
+                children: /* @__PURE__ */ jsx17(
                   "button",
                   {
                     type: "button",
@@ -2195,28 +3243,34 @@ function SlideDeck({
                     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" })
+                    children: /* @__PURE__ */ jsx17(PanelLeftOpen, { className: "h-4 w-4" })
                   }
                 )
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsxs9(
             "div",
             {
               ref: containerRef,
               role: "presentation",
+              "data-loop-running": isLooping ? "true" : void 0,
               tabIndex: isPresentationMode ? 0 : void 0,
               className: cn(
                 "flex min-w-0 flex-1 flex-col items-center justify-center overflow-hidden",
-                isPresentationMode ? "bg-black p-0" : "p-4 md:p-8"
+                isPresentationMode ? `bg-black p-0 ${isLooping ? "cursor-none" : ""}` : "p-4 md:p-8"
               ),
-              onClick: isPresentationMode ? advance : void 0,
+              onClick: isPresentationMode ? () => isLooping ? playback.move(1) : advance() : void 0,
               onKeyDown: isPresentationMode ? (e) => {
-                if (e.key === "Enter" || e.key === " ") advance();
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (isLooping) playback.move(1);
+                  else advance();
+                }
               } : void 0,
               children: [
-                /* @__PURE__ */ jsx12(LayoutGroup, { id: "slide-deck", children: isPresentationMode ? /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx17(LayoutGroup, { id: "slide-deck", children: isPresentationMode ? /* @__PURE__ */ jsx17(
                   "div",
                   {
                     className: "pointer-events-none relative overflow-hidden bg-black",
@@ -2226,9 +3280,10 @@ function SlideDeck({
                       transform: `scale(${scale})`,
                       transformOrigin: "center center"
                     },
-                    children: /* @__PURE__ */ jsx12(
+                    children: /* @__PURE__ */ jsx17(
                       SlideRenderer,
                       {
+                        playbackKey: isLooping ? playback.epoch : void 0,
                         slides,
                         currentSlide,
                         animationStep,
@@ -2241,124 +3296,136 @@ function SlideDeck({
                       }
                     )
                   }
-                ) : /* @__PURE__ */ jsx12(
+                ) : /* @__PURE__ */ jsxs9(
                   "div",
                   {
                     ref: previewViewportRef,
                     className: "relative aspect-video w-full max-w-7xl overflow-hidden rounded-xl border border-neutral-800 bg-black shadow-2xl",
-                    children: /* @__PURE__ */ jsxs6(
-                      "div",
-                      {
-                        ref: slideContainerRef,
-                        className: "absolute top-0 left-0 overflow-hidden",
-                        style: {
-                          width: SLIDE_DIMENSIONS.width,
-                          height: SLIDE_DIMENSIONS.height,
-                          transformOrigin: "top left"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx12(
-                            SlideRenderer,
-                            {
-                              slides,
-                              currentSlide,
-                              animationStep,
-                              totalSteps,
-                              direction,
-                              showAllAnimations,
-                              transition,
-                              directionalTransition,
-                              onTransitionComplete
-                            }
-                          ),
-                          isAnnotationMode && /* @__PURE__ */ jsx12(
-                            AnnotationOverlay,
-                            {
-                              slides,
-                              currentSlide,
-                              slideContainerRef,
-                              selectedId: selectedAnnotationId,
-                              hoveredId: hoveredAnnotationId,
-                              onSelectId: setSelectedAnnotationId,
-                              onShowPanel: () => setShowAnnotationPanel(true),
-                              slideAnnotations: getSlideAnnotations(currentSlide),
-                              addAnnotation: effectiveAdd ?? (() => {
-                              })
-                            }
-                          )
-                        ]
-                      }
-                    )
+                    children: [
+                      /* @__PURE__ */ jsxs9(
+                        "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__ */ jsx17(
+                              SlideRenderer,
+                              {
+                                slides,
+                                currentSlide,
+                                animationStep,
+                                totalSteps,
+                                direction,
+                                showAllAnimations,
+                                transition,
+                                directionalTransition,
+                                onTransitionComplete
+                              },
+                              editorRevision
+                            ),
+                            isAnnotationMode && /* @__PURE__ */ jsx17(
+                              AnnotationOverlay,
+                              {
+                                slides,
+                                currentSlide,
+                                slideContainerRef,
+                                selectedId: selectedAnnotationId,
+                                hoveredId: hoveredAnnotationId,
+                                onSelectId: setSelectedAnnotationId,
+                                onShowPanel: () => requestInspector("comments"),
+                                slideAnnotations: getSlideAnnotations(currentSlide),
+                                addAnnotation: effectiveAdd ?? (() => {
+                                })
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx17(
+                        "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(
+                !isPresentationMode && /* @__PURE__ */ jsxs9("div", { className: "mt-6 flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsx17(
                     "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" })
+                      children: /* @__PURE__ */ jsx17(ChevronLeft, { className: "h-5 w-5" })
                     }
                   ),
-                  /* @__PURE__ */ jsx12("div", { className: "flex min-w-[4rem] flex-col items-center", children: /* @__PURE__ */ jsxs6("span", { className: "font-mono text-sm text-neutral-500", children: [
+                  /* @__PURE__ */ jsx17("div", { className: "flex min-w-[4rem] flex-col items-center", children: /* @__PURE__ */ jsxs9("span", { className: "font-mono text-sm text-neutral-500", children: [
                     currentSlide + 1,
                     " / ",
                     slides.length
                   ] }) }),
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx17(
                     "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",
                       title: "Next step or slide (\u2192 / Space)",
-                      children: /* @__PURE__ */ jsx12(ChevronRight, { className: "h-5 w-5" })
+                      children: /* @__PURE__ */ jsx17(ChevronRight, { className: "h-5 w-5" })
                     }
                   )
                 ] })
               ]
             }
           ),
-          !isPresentationMode && /* @__PURE__ */ jsx12(
-            "div",
+          /* @__PURE__ */ jsx17(
+            Inspector,
             {
-              "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"
+              mode: inspectorMode,
+              visible: inspectorVisible,
+              editorAvailable,
+              width: inspectorWidth,
+              overlay: isNarrowViewport,
+              onSelect: requestInspector,
+              onClose: () => requestInspector(null),
+              slideSettings: /* @__PURE__ */ jsx17(
+                LoopSettings,
+                {
+                  slides,
+                  currentSlide,
+                  animationStep,
+                  config: loopDraft,
+                  onChange: setLoopDraft,
+                  onStepChange: goToStep,
+                  onSave: saveLoopConfig,
+                  onStart: (config) => void startLoop(config),
+                  onRevert: () => setLoopDraft(loopConfig),
+                  dirty: JSON.stringify(loopDraft) !== JSON.stringify(loopConfig)
+                }
               ),
-              style: {
-                width: isAnnotationMode && showAnnotationPanel ? isNarrowViewport ? "min(20rem, 90vw)" : "20rem" : 0
-              },
-              children: /* @__PURE__ */ jsx12(
-                "div",
+              comments: /* @__PURE__ */ jsx17(
+                AnnotationPanel,
                 {
-                  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);
-                      }
-                    }
-                  )
+                  embedded: true,
+                  annotations: getSlideAnnotations(currentSlide),
+                  unlinkedAnnotations,
+                  selectedId: selectedAnnotationId,
+                  onSelect: setSelectedAnnotationId,
+                  onHover: setHoveredAnnotationId,
+                  onDelete: effectiveDelete ?? (() => {
+                  }),
+                  onUpdate: effectiveUpdate ?? (() => {
+                  }),
+                  onClose: () => requestInspector(null)
                 }
               )
             }
@@ -2366,12 +3433,12 @@ function SlideDeck({
         ]
       }
     ),
-    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) => {
+    viewMode === "grid" && /* @__PURE__ */ jsx17("div", { className: "mx-auto max-w-7xl p-8 pt-16 print:hidden", children: /* @__PURE__ */ jsx17("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4", children: slides.map((slideConfig, index) => {
       const prevSection = index > 0 ? slides[index - 1]?.section : void 0;
       const showSectionHeader = slideConfig.section && slideConfig.section !== prevSection;
-      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(
+      return /* @__PURE__ */ jsxs9("div", { className: "contents", children: [
+        showSectionHeader && /* @__PURE__ */ jsx17("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__ */ jsxs9(
           "button",
           {
             onClick: () => {
@@ -2380,15 +3447,15 @@ function SlideDeck({
             },
             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(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 })
+              /* @__PURE__ */ jsx17(GridThumbnail, { slide: slideConfig, index, total: slides.length }),
+              /* @__PURE__ */ jsx17("div", { className: "absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" }),
+              /* @__PURE__ */ jsx17("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 })
             ]
           }
         )
       ] }, slideConfig.id ?? index);
     }) }) }),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx17(
       "div",
       {
         className: cn(
@@ -2396,7 +3463,7 @@ function SlideDeck({
           "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) => /* @__PURE__ */ jsx12(
+        children: /* @__PURE__ */ jsx17("div", { className: "grid grid-cols-1 gap-8 print:block", children: slides.map((slideConfig, index) => /* @__PURE__ */ jsx17(
           ListSlide,
           {
             slide: slideConfig,
@@ -2420,6 +3487,7 @@ export {
   EASE_MORPH,
   EASE_OUT,
   ELEMENT_SLIDE_DISTANCE,
+  LoopConfigProvider,
   MORPH_DURATION,
   MORPH_TRANSITION,
   Morph,