@particle-academy/fancy-slides 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { isDarkColor, SlideContext } from './chunk-WIUXPQAK.js';
 export { useIsDarkSlide, useSlideContext, useSlideTheme } from './chunk-WIUXPQAK.js';
 import { useId, useRef, useState, useEffect, useMemo, useCallback } from 'react';
-import { ContentRenderer, Text, Action, ContextMenu, Separator, Tooltip, Dropdown, Badge, Heading, Tabs, Card, Select, Input, ColorPicker, Slider, Textarea } from '@particle-academy/react-fancy';
+import { ContentRenderer, Text, Action, ContextMenu, Separator, Tooltip, Dropdown, Badge, Heading, Tabs, Card, Select, Input, ColorPicker, Slider, Switch, Textarea } from '@particle-academy/react-fancy';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/theme/default-theme.ts
@@ -70,13 +70,211 @@ function resolveTheme(theme) {
 function cn(...parts) {
   return parts.filter(Boolean).join(" ");
 }
+
+// src/utils/builds.ts
+function splitParagraphs(content) {
+  const lines = content.split("\n");
+  if (lines.length > 1 && lines[lines.length - 1] === "") lines.pop();
+  return lines;
+}
+function isByParagraph(element, animation) {
+  if (!animation.byParagraph || element.type !== "text") return false;
+  return splitParagraphs(element.content).length > 1;
+}
+var DEFAULT_BUILD_DURATION = 500;
+function collectBuilds(slide) {
+  if (!slide) return [];
+  const builds = [];
+  slide.elements.forEach((element, index) => {
+    if (element.animation) {
+      builds.push({ element, animation: element.animation, index });
+    }
+  });
+  const ordered = builds.sort((a, b) => {
+    const ao = a.animation.order ?? 0;
+    const bo = b.animation.order ?? 0;
+    if (ao !== bo) return ao - bo;
+    return a.index - b.index;
+  });
+  const expanded = [];
+  for (const build of ordered) {
+    if (isByParagraph(build.element, build.animation)) {
+      const paras = splitParagraphs(build.element.content);
+      paras.forEach((_, paraIndex) => {
+        const animation = paraIndex === 0 ? build.animation : { ...build.animation, trigger: "on-click" };
+        expanded.push({ element: build.element, animation, index: build.index, paraIndex });
+      });
+    } else {
+      expanded.push(build);
+    }
+  }
+  return expanded;
+}
+function buildSteps(slide) {
+  const builds = collectBuilds(slide);
+  const steps = [];
+  for (const build of builds) {
+    const trigger = build.animation.trigger ?? "on-click";
+    if (steps.length === 0 || trigger === "on-click") {
+      steps.push({ builds: [build] });
+    } else {
+      steps[steps.length - 1].builds.push(build);
+    }
+  }
+  return steps;
+}
+function totalBuildSteps(slide) {
+  return buildSteps(slide).length;
+}
+function visibleElementIds(slide, buildStep) {
+  const visible = /* @__PURE__ */ new Set();
+  if (!slide) return visible;
+  const steps = buildSteps(slide);
+  const stepOfElement = /* @__PURE__ */ new Map();
+  steps.forEach((step, i) => {
+    for (const b of step.builds) {
+      if (!stepOfElement.has(b.element.id)) stepOfElement.set(b.element.id, i + 1);
+    }
+  });
+  for (const element of slide.elements) {
+    const revealStep = stepOfElement.get(element.id);
+    if (revealStep === void 0) {
+      visible.add(element.id);
+    } else if (buildStep >= revealStep) {
+      visible.add(element.id);
+    }
+  }
+  return visible;
+}
+function paragraphReveals(slide, buildStep) {
+  const out = /* @__PURE__ */ new Map();
+  if (!slide) return out;
+  const steps = buildSteps(slide);
+  steps.forEach((step, i) => {
+    const stepNum = i + 1;
+    for (const b of step.builds) {
+      if (b.paraIndex === void 0) continue;
+      const fired = buildStep >= stepNum;
+      const prev = out.get(b.element.id) ?? { revealed: 0 };
+      if (fired) {
+        prev.revealed = Math.max(prev.revealed, b.paraIndex + 1);
+        if (stepNum === buildStep) prev.firingParaIndex = b.paraIndex;
+      }
+      out.set(b.element.id, prev);
+    }
+  });
+  return out;
+}
+function buildsForStep(slide, buildStep) {
+  const steps = buildSteps(slide);
+  const step = steps[buildStep - 1];
+  return step ? step.builds : [];
+}
+function stepDelays(builds) {
+  const delays = /* @__PURE__ */ new Map();
+  const lead = builds[0];
+  if (!lead) return delays;
+  const leadDelay = lead.animation.delay ?? 0;
+  const leadDuration = lead.animation.duration ?? DEFAULT_BUILD_DURATION;
+  delays.set(lead.element.id, leadDelay);
+  for (let i = 1; i < builds.length; i++) {
+    const b = builds[i];
+    const own = b.animation.delay ?? 0;
+    const trigger = b.animation.trigger ?? "on-click";
+    const base = trigger === "after-prev" ? leadDelay + leadDuration : leadDelay;
+    delays.set(b.element.id, base + own);
+  }
+  return delays;
+}
+
+// src/components/Slide/builds-style.ts
+var DEFAULT_BUILD_DURATION2 = 500;
+var EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+function buildEnterStyle(animation, effectiveDelay) {
+  const duration = animation.duration ?? DEFAULT_BUILD_DURATION2;
+  const dir = animation.direction ?? "left";
+  let name;
+  switch (animation.effect) {
+    case "fade":
+      name = "fs-build-fade";
+      break;
+    case "zoom":
+      name = "fs-build-zoom";
+      break;
+    case "fly-in":
+      name = `fs-build-fly-${dir}`;
+      break;
+    case "wipe":
+      name = `fs-build-wipe-${dir}`;
+      break;
+    default:
+      name = "fs-build-fade";
+  }
+  return {
+    animationName: name,
+    animationDuration: `${duration}ms`,
+    animationDelay: `${effectiveDelay}ms`,
+    animationTimingFunction: EASE,
+    animationFillMode: "both"
+  };
+}
+var BUILD_KEYFRAMES = `
+@media (prefers-reduced-motion: reduce) {
+    .fs-build-enter { animation: none !important; }
+}
+@media (prefers-reduced-motion: no-preference) {
+    @keyframes fs-build-fade {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+    @keyframes fs-build-zoom {
+        from { opacity: 0; transform: scale(0.8); }
+        to { opacity: 1; transform: scale(1); }
+    }
+    @keyframes fs-build-fly-left {
+        from { opacity: 0; transform: translateX(-24%); }
+        to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes fs-build-fly-right {
+        from { opacity: 0; transform: translateX(24%); }
+        to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes fs-build-fly-up {
+        from { opacity: 0; transform: translateY(24%); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes fs-build-fly-down {
+        from { opacity: 0; transform: translateY(-24%); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    /* wipe: clip-path inset reveals from the named edge toward the opposite one.
+       inset(top right bottom left) \u2014 start fully clipped on the far side. */
+    @keyframes fs-build-wipe-left {
+        from { clip-path: inset(0 100% 0 0); }
+        to { clip-path: inset(0 0 0 0); }
+    }
+    @keyframes fs-build-wipe-right {
+        from { clip-path: inset(0 0 0 100%); }
+        to { clip-path: inset(0 0 0 0); }
+    }
+    @keyframes fs-build-wipe-up {
+        from { clip-path: inset(100% 0 0 0); }
+        to { clip-path: inset(0 0 0 0); }
+    }
+    @keyframes fs-build-wipe-down {
+        from { clip-path: inset(0 0 100% 0); }
+        to { clip-path: inset(0 0 0 0); }
+    }
+}
+`;
 function TextElementRenderer({
   element,
   theme,
   slideWidthPx,
   editing = false,
   selected = false,
-  onContentChange
+  onContentChange,
+  paraReveal
 }) {
   const t = resolveTheme(theme);
   const style = element.style ?? {};
@@ -123,30 +321,53 @@ function TextElementRenderer({
       }
     );
   }
+  const proseScope = `[data-fs-text-scope="${scopeId}"]`;
+  const doubleScope = `${proseScope}${proseScope}`;
+  const proseStyle = /* @__PURE__ */ jsx("style", { children: `
+            ${proseScope} > div { width: 100%; height: 100%; font-size: inherit; }
+            ${doubleScope} :is(p, ul, ol, li, blockquote, h1, h2, h3, h4, h5, h6, pre, code, strong, em, a) {
+                font-size: inherit;
+            }
+            ${doubleScope} h1 { font-size: 1.6em; font-weight: 700; }
+            ${doubleScope} h2 { font-size: 1.35em; font-weight: 700; }
+            ${doubleScope} h3 { font-size: 1.15em; font-weight: 600; }
+            ${proseScope} :where(p, ul, ol, h1, h2, h3, h4, h5, h6, pre, blockquote) {
+                margin: 0;
+                padding: 0;
+            }
+            ${proseScope} :where(p, li) + :where(p, li, ul, ol) { margin-top: 0.4em; }
+            ${proseScope} :where(ul, ol) { padding-left: 1.4em; }
+            ${proseScope} :where(strong) { font-weight: ${Math.max(700, weight(style.weight) ?? 400 + 200)}; }
+            ${proseScope} :where(a) { color: inherit; text-decoration: underline; }
+            ${proseScope} :where(code) { font-family: ${t.fonts?.mono ?? "monospace"}; }
+        ` });
+  const renderChunk = (content) => format === "plain" ? content : /* @__PURE__ */ jsx(ContentRenderer, { value: content, format: format === "html" ? "html" : "markdown" });
+  if (paraReveal) {
+    const paras = splitParagraphs(element.content);
+    return /* @__PURE__ */ jsxs("div", { "data-fs-text-scope": scopeId, style: css, children: [
+      proseStyle,
+      paras.map((para, i) => {
+        if (i >= paraReveal.revealed) return null;
+        const firing = i === paraReveal.firingParaIndex && !!element.animation;
+        const enter = firing ? buildEnterStyle(element.animation, element.animation.delay ?? 0) : null;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: firing ? "fs-build-enter" : void 0,
+            style: { whiteSpace: format === "plain" ? "pre-wrap" : "normal", ...enter },
+            "data-fancy-slides-paragraph": i,
+            children: renderChunk(para)
+          },
+          i
+        );
+      })
+    ] });
+  }
   if (format === "plain") {
     return /* @__PURE__ */ jsx("div", { style: css, children: element.content });
   }
-  const proseScope = `[data-fs-text-scope="${scopeId}"]`;
-  const doubleScope = `${proseScope}${proseScope}`;
   return /* @__PURE__ */ jsxs("div", { "data-fs-text-scope": scopeId, style: css, children: [
-    /* @__PURE__ */ jsx("style", { children: `
-                ${proseScope} > div { width: 100%; height: 100%; font-size: inherit; }
-                ${doubleScope} :is(p, ul, ol, li, blockquote, h1, h2, h3, h4, h5, h6, pre, code, strong, em, a) {
-                    font-size: inherit;
-                }
-                ${doubleScope} h1 { font-size: 1.6em; font-weight: 700; }
-                ${doubleScope} h2 { font-size: 1.35em; font-weight: 700; }
-                ${doubleScope} h3 { font-size: 1.15em; font-weight: 600; }
-                ${proseScope} :where(p, ul, ol, h1, h2, h3, h4, h5, h6, pre, blockquote) {
-                    margin: 0;
-                    padding: 0;
-                }
-                ${proseScope} :where(p, li) + :where(p, li, ul, ol) { margin-top: 0.4em; }
-                ${proseScope} :where(ul, ol) { padding-left: 1.4em; }
-                ${proseScope} :where(strong) { font-weight: ${Math.max(700, weight(style.weight) ?? 400 + 200)}; }
-                ${proseScope} :where(a) { color: inherit; text-decoration: underline; }
-                ${proseScope} :where(code) { font-family: ${t.fonts?.mono ?? "monospace"}; }
-            ` }),
+    proseStyle,
     /* @__PURE__ */ jsx(ContentRenderer, { value: element.content, format: format === "html" ? "html" : "markdown" })
   ] });
 }
@@ -244,6 +465,7 @@ function Slide({
   width,
   aspectRatio,
   editing = false,
+  buildStep,
   onElementContentChange,
   onElementSelect,
   selectedElementId,
@@ -287,7 +509,24 @@ function Slide({
     }),
     [t, effectiveBg, slideWidthPx]
   );
-  return /* @__PURE__ */ jsx(SlideContext.Provider, { value: slideContext, children: /* @__PURE__ */ jsx(
+  const buildInfo = useMemo(() => {
+    if (editing) return null;
+    const steps = buildSteps(slide);
+    if (steps.length === 0) return null;
+    const revealStep = /* @__PURE__ */ new Map();
+    steps.forEach((step, i) => {
+      for (const b of step.builds) {
+        if (!revealStep.has(b.element.id)) revealStep.set(b.element.id, i + 1);
+      }
+    });
+    const driven = buildStep !== void 0;
+    const currentStep = driven ? buildStep : steps.length;
+    const firing = driven ? steps[currentStep - 1] : void 0;
+    const delays = firing ? stepDelays(firing.builds) : /* @__PURE__ */ new Map();
+    const paraReveals = driven ? paragraphReveals(slide, currentStep) : /* @__PURE__ */ new Map();
+    return { revealStep, currentStep, delays, paraReveals, driven };
+  }, [editing, slide, buildStep]);
+  return /* @__PURE__ */ jsx(SlideContext.Provider, { value: slideContext, children: /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
@@ -305,23 +544,47 @@ function Slide({
       onClick: (e) => {
         if (e.target === e.currentTarget && onElementSelect) onElementSelect(null);
       },
-      children: orderedElements(slide.elements).map((element) => /* @__PURE__ */ jsx(
-        SlideElementHost,
-        {
-          element,
-          theme: t,
-          slideWidthPx,
-          slideHeightPx,
-          editing,
-          selected: selectedElementId === element.id,
-          onContentChange: onElementContentChange,
-          onSelect: onElementSelect,
-          onMove: onElementMove,
-          onResize: onElementResize,
-          renderElement
-        },
-        element.id
-      ))
+      children: [
+        buildInfo && /* @__PURE__ */ jsx("style", { children: BUILD_KEYFRAMES }),
+        orderedElements(slide.elements).map((element) => {
+          let buildHidden = false;
+          let buildAnimation;
+          let buildDelay = 0;
+          const paraReveal = buildInfo?.paraReveals.get(element.id);
+          if (buildInfo) {
+            const step = buildInfo.revealStep.get(element.id);
+            if (step !== void 0) {
+              if (buildInfo.currentStep < step) {
+                buildHidden = true;
+              } else if (paraReveal) ; else if (buildInfo.currentStep === step && element.animation) {
+                buildAnimation = element.animation;
+                buildDelay = buildInfo.delays.get(element.id) ?? 0;
+              }
+            }
+          }
+          if (buildHidden) return null;
+          return /* @__PURE__ */ jsx(
+            SlideElementHost,
+            {
+              element,
+              theme: t,
+              slideWidthPx,
+              slideHeightPx,
+              editing,
+              selected: selectedElementId === element.id,
+              onContentChange: onElementContentChange,
+              onSelect: onElementSelect,
+              onMove: onElementMove,
+              onResize: onElementResize,
+              renderElement,
+              buildAnimation,
+              buildDelay,
+              paraReveal
+            },
+            element.id
+          );
+        })
+      ]
     }
   ) });
 }
@@ -338,7 +601,10 @@ function SlideElementHost({
   onSelect,
   onMove,
   onResize,
-  renderElement
+  renderElement,
+  buildAnimation,
+  buildDelay = 0,
+  paraReveal
 }) {
   const dragRef = useRef(null);
   if (element.hidden) return null;
@@ -407,15 +673,18 @@ function SlideElementHost({
     outline: selected ? "2px solid #8b5cf6" : void 0,
     outlineOffset: selected ? 2 : void 0,
     cursor: canMove ? "move" : interactive ? "pointer" : "default",
-    touchAction: canMove ? "none" : void 0
+    touchAction: canMove ? "none" : void 0,
+    ...buildAnimation ? buildEnterStyle(buildAnimation, buildDelay) : null
   };
-  const inner = renderInner({ element, theme, slideWidthPx, editing, selected, onContentChange }) ?? renderElement?.(element, slideWidthPx);
+  const inner = renderInner({ element, theme, slideWidthPx, editing, selected, onContentChange, paraReveal }) ?? renderElement?.(element, slideWidthPx);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      className: buildAnimation ? "fs-build-enter" : void 0,
       style: box,
       "data-fancy-slides-element": element.id,
       "data-fancy-slides-element-type": element.type,
+      "data-fancy-slides-build": buildAnimation ? "" : void 0,
       onPointerDown: canMove ? startDrag("move") : void 0,
       onPointerMove: canMove ? onPointerMove : void 0,
       onPointerUp: canMove ? endDrag : void 0,
@@ -474,7 +743,7 @@ function ResizeHandles({ onStart, onMove, onEnd }) {
     anchor
   )) });
 }
-function renderInner({ element, theme, slideWidthPx, editing, selected, onContentChange }) {
+function renderInner({ element, theme, slideWidthPx, editing, selected, onContentChange, paraReveal }) {
   switch (element.type) {
     case "text":
       return /* @__PURE__ */ jsx(
@@ -485,7 +754,8 @@ function renderInner({ element, theme, slideWidthPx, editing, selected, onConten
           slideWidthPx,
           editing,
           selected,
-          onContentChange: onContentChange ? (c) => onContentChange(element.id, c) : void 0
+          onContentChange: onContentChange ? (c) => onContentChange(element.id, c) : void 0,
+          paraReveal
         }
       );
     case "image":
@@ -537,6 +807,8 @@ function useSlideKeyboard({
   total,
   index,
   goTo,
+  onAdvance,
+  onRetreat,
   onExit,
   onBlank,
   onFullscreen,
@@ -553,13 +825,15 @@ function useSlideKeyboard({
         case "ArrowLeft":
         case "PageUp":
           e.preventDefault();
-          if (index > 0) goTo(index - 1);
+          if (onRetreat) onRetreat();
+          else if (index > 0) goTo(index - 1);
           return;
         case "ArrowRight":
         case "PageDown":
         case " ":
           e.preventDefault();
-          if (index < total - 1) goTo(index + 1);
+          if (onAdvance) onAdvance();
+          else if (index < total - 1) goTo(index + 1);
           return;
         case "Home":
           e.preventDefault();
@@ -601,7 +875,7 @@ function useSlideKeyboard({
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [enabled, index, total, goTo, onExit, onBlank, onFullscreen]);
+  }, [enabled, index, total, goTo, onAdvance, onRetreat, onExit, onBlank, onFullscreen]);
 }
 function SlideViewer({
   deck,
@@ -629,13 +903,34 @@ function SlideViewer({
   const containerRef = useRef(null);
   const prevIndexRef = useRef(index);
   const forward = index >= prevIndexRef.current;
+  const slide = deck.slides[index];
+  const totalSteps = totalBuildSteps(slide);
+  const [buildStep, setBuildStep] = useState(0);
+  const nextFreshRef = useRef(false);
   useEffect(() => {
+    if (index === prevIndexRef.current) return;
     prevIndexRef.current = index;
-  }, [index]);
+    const fresh = nextFreshRef.current;
+    nextFreshRef.current = false;
+    setBuildStep(fresh ? 0 : totalBuildSteps(deck.slides[index]));
+  }, [index, deck.slides]);
+  const advance = useCallback(() => {
+    if (buildStep < totalSteps) {
+      setBuildStep((s) => s + 1);
+    } else if (index < deck.slides.length - 1) {
+      nextFreshRef.current = true;
+      goTo(index + 1);
+    }
+  }, [buildStep, totalSteps, index, deck.slides.length, goTo]);
+  const retreat = useCallback(() => {
+    if (index > 0) goTo(index - 1);
+  }, [index, goTo]);
   useSlideKeyboard({
     total: deck.slides.length,
     index,
     goTo,
+    onAdvance: advance,
+    onRetreat: retreat,
     onExit,
     onBlank: () => setBlanked((b) => !b),
     onFullscreen: () => {
@@ -648,11 +943,15 @@ function SlideViewer({
   useEffect(() => {
     if (!autoAdvanceMs || deck.slides.length <= 1) return;
     const t = setTimeout(() => {
-      goTo(index + 1 < deck.slides.length ? index + 1 : 0);
+      if (buildStep < totalSteps) {
+        setBuildStep((s) => s + 1);
+      } else {
+        nextFreshRef.current = true;
+        goTo(index + 1 < deck.slides.length ? index + 1 : 0);
+      }
     }, autoAdvanceMs);
     return () => clearTimeout(t);
-  }, [autoAdvanceMs, index, deck.slides.length, goTo]);
-  const slide = deck.slides[index];
+  }, [autoAdvanceMs, index, deck.slides.length, goTo, buildStep, totalSteps]);
   const theme = resolveTheme(deck.theme);
   const aspectRatio = theme.aspectRatio ?? 16 / 9;
   const transition = slide?.transition ?? theme.defaultTransition;
@@ -674,6 +973,11 @@ function SlideViewer({
       },
       tabIndex: 0,
       "data-fancy-slides-viewer": deck.id,
+      "data-fancy-slides-build-step": buildStep,
+      onClick: () => {
+        if (blanked) return;
+        advance();
+      },
       children: [
         /* @__PURE__ */ jsx("style", { children: TRANSITION_KEYFRAMES }),
         !blanked && slide && /* @__PURE__ */ jsx(
@@ -687,7 +991,7 @@ function SlideViewer({
               ["--fs-ratio"]: aspectRatio.toString(),
               boxShadow: "0 8px 30px rgba(0,0,0,0.35)"
             },
-            children: /* @__PURE__ */ jsx("div", { className: "fs-slide-enter", style: enterStyle, children: /* @__PURE__ */ jsx(Slide, { slide, theme, renderElement }) }, index)
+            children: /* @__PURE__ */ jsx("div", { className: "fs-slide-enter", style: enterStyle, children: /* @__PURE__ */ jsx(Slide, { slide, theme, buildStep, renderElement }) }, index)
           }
         ),
         !hideChrome && !blanked && /* @__PURE__ */ jsxs(
@@ -718,7 +1022,7 @@ function SlideViewer({
   );
 }
 var DEFAULT_DURATION = 400;
-var EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+var EASE2 = "cubic-bezier(0.16, 1, 0.3, 1)";
 function transitionEnterStyle(transition, forward) {
   const kind = transition?.kind ?? "none";
   if (kind === "none") return { width: "100%", height: "100%" };
@@ -744,7 +1048,7 @@ function transitionEnterStyle(transition, forward) {
     height: "100%",
     animationName: name,
     animationDuration: `${duration}ms`,
-    animationTimingFunction: EASE,
+    animationTimingFunction: EASE2,
     animationFillMode: "both"
   };
 }
@@ -800,14 +1104,38 @@ function PresenterView({
     },
     [deck.slides.length, isControlled, onIndexChange]
   );
+  const slide = deck.slides[index];
+  const totalSteps = totalBuildSteps(slide);
+  const [buildStep, setBuildStep] = useState(0);
+  const prevIndexRef = useRef(index);
+  const nextFreshRef = useRef(false);
+  useEffect(() => {
+    if (index === prevIndexRef.current) return;
+    prevIndexRef.current = index;
+    const fresh = nextFreshRef.current;
+    nextFreshRef.current = false;
+    setBuildStep(fresh ? 0 : totalBuildSteps(deck.slides[index]));
+  }, [index, deck.slides]);
+  const advance = useCallback(() => {
+    if (buildStep < totalSteps) {
+      setBuildStep((s) => s + 1);
+    } else if (index < deck.slides.length - 1) {
+      nextFreshRef.current = true;
+      goTo(index + 1);
+    }
+  }, [buildStep, totalSteps, index, deck.slides.length, goTo]);
+  const retreat = useCallback(() => {
+    if (index > 0) goTo(index - 1);
+  }, [index, goTo]);
   useSlideKeyboard({
     total: deck.slides.length,
     index,
     goTo,
+    onAdvance: advance,
+    onRetreat: retreat,
     onExit
   });
   const theme = resolveTheme(deck.theme);
-  const slide = deck.slides[index];
   const nextSlide = deck.slides[index + 1];
   const [now, setNow] = useState(() => Date.now());
   useEffect(() => {
@@ -854,7 +1182,7 @@ function PresenterView({
                   borderRadius: 8,
                   overflow: "hidden"
                 },
-                children: slide ? /* @__PURE__ */ jsx(Slide, { slide, theme, renderElement }) : null
+                children: slide ? /* @__PURE__ */ jsx(Slide, { slide, theme, buildStep, renderElement }) : null
               }
             )
           }
@@ -958,8 +1286,8 @@ function PresenterView({
               /* @__PURE__ */ jsx(StatusChip, { label: "Elapsed", children: formatElapsed(now - startedAtRef) }),
               /* @__PURE__ */ jsx(StatusChip, { label: "Clock", children: formatClock(now) }),
               /* @__PURE__ */ jsxs("div", { style: { marginLeft: "auto", display: "flex", gap: 8 }, children: [
-                /* @__PURE__ */ jsx(NavButton, { onClick: () => goTo(index - 1), disabled: index === 0, children: "\u2190 Prev" }),
-                /* @__PURE__ */ jsx(NavButton, { onClick: () => goTo(index + 1), disabled: index >= deck.slides.length - 1, children: "Next \u2192" })
+                /* @__PURE__ */ jsx(NavButton, { onClick: retreat, disabled: index === 0, children: "\u2190 Prev" }),
+                /* @__PURE__ */ jsx(NavButton, { onClick: advance, disabled: index >= deck.slides.length - 1 && buildStep >= totalSteps, children: "Next \u2192" })
               ] })
             ]
           }
@@ -1142,6 +1470,7 @@ function useDeckState({ value, onChange, onOp }) {
       updateElement: (slideIdArg, elementIdArg, patch) => apply({ kind: "element_update", slideId: slideIdArg, elementId: elementIdArg, patch }),
       moveElement: (slideIdArg, elementIdArg, x, y) => apply({ kind: "element_move", slideId: slideIdArg, elementId: elementIdArg, x, y }),
       resizeElement: (slideIdArg, elementIdArg, w, h) => apply({ kind: "element_resize", slideId: slideIdArg, elementId: elementIdArg, w, h }),
+      setAnimation: (slideIdArg, elementIdArg, animation) => apply({ kind: "element_set_animation", slideId: slideIdArg, elementId: elementIdArg, animation }),
       getSlide: (id) => value.slides.find((s) => s.id === id),
       getElement: (slideIdArg, elementIdArg) => value.slides.find((s) => s.id === slideIdArg)?.elements.find((e) => e.id === elementIdArg)
     };
@@ -1209,6 +1538,23 @@ function reduce(deck, op) {
           (s) => s.id === op.slideId ? { ...s, elements: s.elements.map((e) => e.id === op.elementId ? { ...e, w: op.w, h: op.h } : e) } : s
         )
       };
+    case "element_set_animation":
+      return {
+        ...deck,
+        slides: deck.slides.map(
+          (s) => s.id === op.slideId ? {
+            ...s,
+            elements: s.elements.map((e) => {
+              if (e.id !== op.elementId) return e;
+              if (op.animation === void 0) {
+                const { animation: _drop, ...rest } = e;
+                return rest;
+              }
+              return { ...e, animation: op.animation };
+            })
+          } : s
+        )
+      };
   }
 }
 
@@ -1550,10 +1896,10 @@ function EditorToolbar({
     /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsx(Tooltip, { content: "Present (F)", children: /* @__PURE__ */ jsx(Action, { color: "violet", size: "sm", icon: "play", onClick: onPresent, children: "Present" }) }) })
   ] });
 }
-function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground }) {
+function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground, onSetAnimation, onSetElementAnimation }) {
   if (!element) {
     if (slide) {
-      return /* @__PURE__ */ jsx(SlideSettings, { slide, onSetTransition, onSetBackground });
+      return /* @__PURE__ */ jsx(SlideSettings, { slide, onSetTransition, onSetBackground, onSetElementAnimation });
     }
     return /* @__PURE__ */ jsxs("div", { className: "fs-inspector flex h-full flex-col border-l border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900", children: [
       /* @__PURE__ */ jsx(Heading, { as: "h3", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Inspector" }),
@@ -1578,10 +1924,12 @@ function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onS
       /* @__PURE__ */ jsxs(Tabs.List, { children: [
         /* @__PURE__ */ jsx(Tabs.Tab, { value: "style", children: "Style" }),
         /* @__PURE__ */ jsx(Tabs.Tab, { value: "layout", children: "Layout" }),
+        /* @__PURE__ */ jsx(Tabs.Tab, { value: "build", children: "Build" }),
         /* @__PURE__ */ jsx(Tabs.Tab, { value: "advanced", children: "Advanced" })
       ] }),
       /* @__PURE__ */ jsxs(Tabs.Panels, { children: [
         /* @__PURE__ */ jsx(Tabs.Panel, { value: "style", children: /* @__PURE__ */ jsx(Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsx(StyleSection, { element, onPatch }) }) }),
+        /* @__PURE__ */ jsx(Tabs.Panel, { value: "build", children: /* @__PURE__ */ jsx(Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsx(AnimateSection, { animation: element.animation, onSetAnimation, isText: element.type === "text" }) }) }),
         /* @__PURE__ */ jsx(Tabs.Panel, { value: "layout", children: /* @__PURE__ */ jsx(Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsx(LayoutSection, { element, onPatch }) }) }),
         /* @__PURE__ */ jsx(Tabs.Panel, { value: "advanced", children: /* @__PURE__ */ jsx(Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsx(AdvancedSection, { element, onPatch }) }) })
       ] })
@@ -1591,7 +1939,8 @@ function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onS
 function SlideSettings({
   slide,
   onSetTransition,
-  onSetBackground
+  onSetBackground,
+  onSetElementAnimation
 }) {
   const transition = slide.transition;
   const kind = transition?.kind ?? "none";
@@ -1658,10 +2007,54 @@ function SlideSettings({
             onChange: (c) => onSetBackground({ ...slide.background, color: c })
           }
         ) })
-      ] }) })
+      ] }) }),
+      onSetElementAnimation && /* @__PURE__ */ jsx(Card, { padding: "md", className: "mt-3 !bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsx(BuildOrderList, { slide, onSetElementAnimation }) })
     ] })
   ] });
 }
+function BuildOrderList({
+  slide,
+  onSetElementAnimation
+}) {
+  const builds = collectBuilds(slide);
+  const move = (from, to) => {
+    if (to < 0 || to >= builds.length) return;
+    const reordered = [...builds];
+    const [item] = reordered.splice(from, 1);
+    reordered.splice(to, 0, item);
+    reordered.forEach((b, i) => {
+      if ((b.animation.order ?? 0) !== i) {
+        onSetElementAnimation(b.element.id, { ...b.animation, order: i });
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Build order" }),
+    builds.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "xs", className: "!text-zinc-500", children: "No animated elements yet. Select an element and add a build under its Build tab." }) : builds.map((b, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Text, { size: "xs", className: "!font-mono !text-zinc-400 w-5", children: [
+        i + 1,
+        "."
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", className: "truncate", children: buildLabel(b.element) }),
+        /* @__PURE__ */ jsxs(Text, { size: "xs", className: "!font-mono !text-zinc-400", children: [
+          b.animation.effect,
+          " \xB7 ",
+          b.animation.trigger ?? "on-click"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "chevron-up", onClick: () => move(i, i - 1), disabled: i === 0, "aria-label": "Move earlier" }),
+      /* @__PURE__ */ jsx(Action, { size: "xs", variant: "ghost", icon: "chevron-down", onClick: () => move(i, i + 1), disabled: i === builds.length - 1, "aria-label": "Move later" })
+    ] }, b.element.id))
+  ] });
+}
+function buildLabel(element) {
+  if (element.type === "text") {
+    const text = element.content.replace(/\s+/g, " ").trim();
+    return text ? text.length > 28 ? `${text.slice(0, 28)}\u2026` : text : "Text";
+  }
+  return `${element.type} #${element.id.slice(-6)}`;
+}
 function LayoutSection({ element, onPatch }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
@@ -1683,6 +2076,109 @@ function AdvancedSection({ element, onPatch }) {
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Action, { size: "sm", variant: element.hidden ? "default" : "ghost", onClick: () => onPatch({ hidden: !element.hidden }), children: element.hidden ? "Hidden \u2014 show" : "Hide on slide" }) })
   ] });
 }
+var NO_ANIMATION = "none";
+function AnimateSection({
+  animation,
+  onSetAnimation,
+  isText
+}) {
+  if (!onSetAnimation) {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", className: "!text-zinc-500", children: "Build animations aren't wired up in this editor." });
+  }
+  const effect = animation?.effect;
+  const set = (next) => {
+    const base = animation ?? { effect: "fade" };
+    onSetAnimation({ ...base, ...next });
+  };
+  const showDirection = effect === "fly-in" || effect === "wipe";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Effect",
+        list: [
+          { value: NO_ANIMATION, label: "None" },
+          { value: "fade", label: "Fade" },
+          { value: "fly-in", label: "Fly in" },
+          { value: "zoom", label: "Zoom" },
+          { value: "wipe", label: "Wipe" }
+        ],
+        value: effect ?? NO_ANIMATION,
+        onValueChange: (v) => {
+          if (v === NO_ANIMATION) onSetAnimation(void 0);
+          else set({ effect: v });
+        }
+      }
+    ),
+    effect && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          label: "Trigger",
+          list: [
+            { value: "on-click", label: "On click" },
+            { value: "with-prev", label: "With previous" },
+            { value: "after-prev", label: "After previous" }
+          ],
+          value: animation?.trigger ?? "on-click",
+          onValueChange: (v) => set({ trigger: v })
+        }
+      ),
+      showDirection && /* @__PURE__ */ jsx(
+        Select,
+        {
+          label: "Direction",
+          list: [
+            { value: "left", label: "From left" },
+            { value: "right", label: "From right" },
+            { value: "up", label: "From bottom" },
+            { value: "down", label: "From top" }
+          ],
+          value: animation?.direction ?? "left",
+          onValueChange: (v) => set({ direction: v })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "Duration (ms)",
+            type: "number",
+            value: String(animation?.duration ?? 500),
+            onChange: (e) => set({ duration: parseInt(e.target.value, 10) || 500 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "Delay (ms)",
+            type: "number",
+            value: String(animation?.delay ?? 0),
+            onChange: (e) => set({ delay: parseInt(e.target.value, 10) || 0 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          label: "Order",
+          type: "number",
+          value: String(animation?.order ?? 0),
+          onChange: (e) => set({ order: parseInt(e.target.value, 10) || 0 })
+        }
+      ),
+      isText && /* @__PURE__ */ jsx(
+        Switch,
+        {
+          label: "Animate by paragraph (one line per click)",
+          checked: !!animation?.byParagraph,
+          onCheckedChange: (v) => set({ byParagraph: v })
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { size: "xs", className: "!text-zinc-500", children: `Builds reveal in ascending order. "On click" starts a new step; "with previous" plays alongside the step's lead; "after previous" follows it. Honors prefers-reduced-motion.` })
+    ] })
+  ] });
+}
 function StyleSection({ element, onPatch }) {
   switch (element.type) {
     case "text":
@@ -2358,7 +2854,9 @@ function DeckEditor({
               },
               onLockToggle: (locked) => slide && elementIdSelected && ops.updateElement(slide.id, elementIdSelected, { locked }),
               onSetTransition: (transition) => slide && ops.setTransition(slide.id, transition),
-              onSetBackground: (background) => slide && ops.setBackground(slide.id, background)
+              onSetBackground: (background) => slide && ops.setBackground(slide.id, background),
+              onSetAnimation: (animation) => slide && elementIdSelected && ops.setAnimation(slide.id, elementIdSelected, animation),
+              onSetElementAnimation: (eid, animation) => slide && ops.setAnimation(slide.id, eid, animation)
             }
           ) })
         ] }),
@@ -2368,6 +2866,6 @@ function DeckEditor({
   );
 }
 
-export { DeckEditor, EditorToolbar, ElementInspector, ImageElementRenderer, PresenterView, ShapeElementRenderer, Slide, SlideRail, SlideThumbnail, SlideViewer, SpeakerNotes, TextElementRenderer, builtinThemes, chartStarterOption, darkTheme, deckId, defaultTheme, defineTheme, elementId, nextId, reduce as reduceDeck, resolveTheme, slideId, useDeckState, useSlideKeyboard, vividTheme };
+export { DeckEditor, EditorToolbar, ElementInspector, ImageElementRenderer, PresenterView, ShapeElementRenderer, Slide, SlideRail, SlideThumbnail, SlideViewer, SpeakerNotes, TextElementRenderer, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, isByParagraph, nextId, paragraphReveals, reduce as reduceDeck, resolveTheme, slideId, splitParagraphs, stepDelays, totalBuildSteps, useDeckState, useSlideKeyboard, visibleElementIds, vividTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map