@particle-academy/fancy-slides 0.4.0 → 0.5.1

package/README.md

@@ -94,9 +94,18 @@ element.animation = {
     duration: 500,         // ms
     delay: 0,              // ms
     order: 0,              // build order, ascending; ties broken by element index
+    byParagraph: false,    // text only — reveal one line/bullet per click
 };
 ```
 
+For a **text** element you can set `byParagraph: true` to reveal it one
+paragraph at a time (PowerPoint/Google Slides "By paragraph"). The element's
+`content` is split on `"\n"` (a trailing empty line is dropped) and expands into
+one build per line — the first line uses the element's own `trigger`, every
+subsequent line reveals on a fresh click. Each markdown line renders through the
+normal path, so a `- …` bullet line builds in as its own item. Toggle it from
+the Build tab when a text element has an effect selected.
+
 A slide's builds group into *click steps*: the first build and every
 `on-click` build opens a new step; `with-prev` plays alongside that step's lead
 and `after-prev` follows it. In `SlideViewer` / `PresenterView`, → / Space /

package/dist/index.cjs

@@ -74,6 +74,15 @@ function cn(...parts) {
 }
 
 // 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 [];
@@ -83,12 +92,25 @@ function collectBuilds(slide) {
       builds.push({ element, animation: element.animation, index });
     }
   });
-  return builds.sort((a, b) => {
+  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);
@@ -112,7 +134,9 @@ function visibleElementIds(slide, buildStep) {
   const steps = buildSteps(slide);
   const stepOfElement = /* @__PURE__ */ new Map();
   steps.forEach((step, i) => {
-    for (const b of step.builds) stepOfElement.set(b.element.id, i + 1);
+    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);
@@ -124,6 +148,25 @@ function visibleElementIds(slide, buildStep) {
   }
   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];
@@ -145,13 +188,95 @@ function stepDelays(builds) {
   }
   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 ?? {};
@@ -198,30 +323,53 @@ function TextElementRenderer({
       }
     );
   }
+  const proseScope = `[data-fs-text-scope="${scopeId}"]`;
+  const doubleScope = `${proseScope}${proseScope}`;
+  const proseStyle = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactFancy.ContentRenderer, { value: content, format: format === "html" ? "html" : "markdown" });
+  if (paraReveal) {
+    const paras = splitParagraphs(element.content);
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: css, children: element.content });
   }
-  const proseScope = `[data-fs-text-scope="${scopeId}"]`;
-  const doubleScope = `${proseScope}${proseScope}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-fs-text-scope": scopeId, style: css, children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactFancy.ContentRenderer, { value: element.content, format: format === "html" ? "html" : "markdown" })
   ] });
 }
@@ -353,87 +501,6 @@ function relativeLuminance(r, g, b) {
   };
   return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
 }
-
-// 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 Slide({
   slide,
   theme,
@@ -490,13 +557,16 @@ function Slide({
     if (steps.length === 0) return null;
     const revealStep = /* @__PURE__ */ new Map();
     steps.forEach((step, i) => {
-      for (const b of step.builds) revealStep.set(b.element.id, i + 1);
+      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();
-    return { revealStep, currentStep, delays };
+    const paraReveals = driven ? paragraphReveals(slide, currentStep) : /* @__PURE__ */ new Map();
+    return { revealStep, currentStep, delays, paraReveals, driven };
   }, [editing, slide, buildStep]);
   return /* @__PURE__ */ jsxRuntime.jsx(SlideContext.Provider, { value: slideContext, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -522,12 +592,13 @@ function Slide({
           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 (buildInfo.currentStep === step && element.animation) {
+              } else if (paraReveal) ; else if (buildInfo.currentStep === step && element.animation) {
                 buildAnimation = element.animation;
                 buildDelay = buildInfo.delays.get(element.id) ?? 0;
               }
@@ -549,7 +620,8 @@ function Slide({
               onResize: onElementResize,
               renderElement,
               buildAnimation,
-              buildDelay
+              buildDelay,
+              paraReveal
             },
             element.id
           );
@@ -573,7 +645,8 @@ function SlideElementHost({
   onResize,
   renderElement,
   buildAnimation,
-  buildDelay = 0
+  buildDelay = 0,
+  paraReveal
 }) {
   const dragRef = react.useRef(null);
   if (element.hidden) return null;
@@ -645,7 +718,7 @@ function SlideElementHost({
     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) ?? elementPlaceholder(element);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -712,7 +785,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__ */ jsxRuntime.jsx(
@@ -723,7 +796,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":
@@ -739,6 +813,37 @@ function renderInner({ element, theme, slideWidthPx, editing, selected, onConten
       return null;
   }
 }
+function elementPlaceholder(element) {
+  if (element.type !== "chart" && element.type !== "code" && element.type !== "table" && element.type !== "embed") {
+    return null;
+  }
+  const label = element.type.charAt(0).toUpperCase() + element.type.slice(1);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.35em",
+        textAlign: "center",
+        padding: "0.5em",
+        boxSizing: "border-box",
+        border: "1px dashed currentColor",
+        borderRadius: 8,
+        opacity: 0.55,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.7em", opacity: 0.8 }, children: "Pass renderElement to render" })
+      ]
+    }
+  );
+}
 function orderedElements(elements) {
   return [...elements].sort((a, b) => {
     const az = a.z ?? -1;
@@ -1897,7 +2002,7 @@ function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onS
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(reactFancy.Tabs.Panels, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tabs.Panel, { value: "style", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsx(StyleSection, { element, onPatch }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tabs.Panel, { value: "build", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsx(AnimateSection, { animation: element.animation, onSetAnimation }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tabs.Panel, { value: "build", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsx(AnimateSection, { animation: element.animation, onSetAnimation, isText: element.type === "text" }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tabs.Panel, { value: "layout", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsx(LayoutSection, { element, onPatch }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Tabs.Panel, { value: "advanced", children: /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxRuntime.jsx(AdvancedSection, { element, onPatch }) }) })
       ] })
@@ -2047,7 +2152,8 @@ function AdvancedSection({ element, onPatch }) {
 var NO_ANIMATION = "none";
 function AnimateSection({
   animation,
-  onSetAnimation
+  onSetAnimation,
+  isText
 }) {
   if (!onSetAnimation) {
     return /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Text, { size: "sm", className: "!text-zinc-500", children: "Build animations aren't wired up in this editor." });
@@ -2134,6 +2240,14 @@ function AnimateSection({
           onChange: (e) => set({ order: parseInt(e.target.value, 10) || 0 })
         }
       ),
+      isText && /* @__PURE__ */ jsxRuntime.jsx(
+        reactFancy.Switch,
+        {
+          label: "Animate by paragraph (one line per click)",
+          checked: !!animation?.byParagraph,
+          onCheckedChange: (v) => set({ byParagraph: v })
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(reactFancy.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.` })
     ] })
   ] });
@@ -2847,10 +2961,13 @@ exports.deckId = deckId;
 exports.defaultTheme = defaultTheme;
 exports.defineTheme = defineTheme;
 exports.elementId = elementId;
+exports.isByParagraph = isByParagraph;
 exports.nextId = nextId;
+exports.paragraphReveals = paragraphReveals;
 exports.reduceDeck = reduce;
 exports.resolveTheme = resolveTheme;
 exports.slideId = slideId;
+exports.splitParagraphs = splitParagraphs;
 exports.stepDelays = stepDelays;
 exports.totalBuildSteps = totalBuildSteps;
 exports.useDeckState = useDeckState;