@particle-academy/fancy-slides 0.1.6 → 0.2.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, Input, Slider, Textarea, Select, ColorPicker } from '@particle-academy/react-fancy';
+import { ContentRenderer, Text, Action, ContextMenu, Separator, Tooltip, Dropdown, Badge, Heading, Tabs, Card, Select, Input, ColorPicker, Slider, Textarea } from '@particle-academy/react-fancy';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/theme/default-theme.ts
@@ -611,6 +611,11 @@ function SlideViewer({
   );
   const [blanked, setBlanked] = useState(false);
   const containerRef = useRef(null);
+  const prevIndexRef = useRef(index);
+  const forward = index >= prevIndexRef.current;
+  useEffect(() => {
+    prevIndexRef.current = index;
+  }, [index]);
   useSlideKeyboard({
     total: deck.slides.length,
     index,
@@ -634,6 +639,8 @@ function SlideViewer({
   const slide = deck.slides[index];
   const theme = resolveTheme(deck.theme);
   const aspectRatio = theme.aspectRatio ?? 16 / 9;
+  const transition = slide?.transition ?? theme.defaultTransition;
+  const enterStyle = transitionEnterStyle(transition, forward);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -652,6 +659,7 @@ function SlideViewer({
       tabIndex: 0,
       "data-fancy-slides-viewer": deck.id,
       children: [
+        /* @__PURE__ */ jsx("style", { children: TRANSITION_KEYFRAMES }),
         !blanked && slide && /* @__PURE__ */ jsx(
           "div",
           {
@@ -663,7 +671,7 @@ function SlideViewer({
               ["--fs-ratio"]: aspectRatio.toString(),
               boxShadow: "0 8px 30px rgba(0,0,0,0.35)"
             },
-            children: /* @__PURE__ */ jsx(Slide, { slide, theme, renderElement })
+            children: /* @__PURE__ */ jsx("div", { className: "fs-slide-enter", style: enterStyle, children: /* @__PURE__ */ jsx(Slide, { slide, theme, renderElement }) }, index)
           }
         ),
         !hideChrome && !blanked && /* @__PURE__ */ jsxs(
@@ -693,6 +701,68 @@ function SlideViewer({
     }
   );
 }
+var DEFAULT_DURATION = 400;
+var EASE = "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%" };
+  const duration = transition?.duration ?? DEFAULT_DURATION;
+  let name;
+  switch (kind) {
+    case "fade":
+      name = "fs-fade-in";
+      break;
+    case "zoom":
+      name = "fs-zoom-in";
+      break;
+    case "slide": {
+      const dir = transition?.direction ?? (forward ? "right" : "left");
+      name = `fs-slide-in-${dir}`;
+      break;
+    }
+    default:
+      return { width: "100%", height: "100%" };
+  }
+  return {
+    width: "100%",
+    height: "100%",
+    animationName: name,
+    animationDuration: `${duration}ms`,
+    animationTimingFunction: EASE,
+    animationFillMode: "both"
+  };
+}
+var TRANSITION_KEYFRAMES = `
+@media (prefers-reduced-motion: reduce) {
+    .fs-slide-enter { animation: none !important; }
+}
+@media (prefers-reduced-motion: no-preference) {
+    @keyframes fs-fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+    @keyframes fs-zoom-in {
+        from { opacity: 0; transform: scale(0.92); }
+        to { opacity: 1; transform: scale(1); }
+    }
+    @keyframes fs-slide-in-right {
+        from { opacity: 0; transform: translateX(8%); }
+        to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes fs-slide-in-left {
+        from { opacity: 0; transform: translateX(-8%); }
+        to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes fs-slide-in-up {
+        from { opacity: 0; transform: translateY(8%); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes fs-slide-in-down {
+        from { opacity: 0; transform: translateY(-8%); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+}
+`;
 function PresenterView({
   deck,
   index: controlledIndex,
@@ -1046,6 +1116,7 @@ function useDeckState({ value, onChange, onOp }) {
       setLayout: (id, layout) => apply({ kind: "slide_set_layout", id, layout }),
       setNotes: (id, notes) => apply({ kind: "slide_set_notes", id, notes }),
       setBackground: (id, background) => apply({ kind: "slide_set_background", id, background }),
+      setTransition: (id, transition) => apply({ kind: "slide_set_transition", id, transition }),
       addElement: (slideId2, element) => {
         const id = element.id ?? elementId();
         apply({ kind: "element_add", slideId: slideId2, element: { ...element, id } });
@@ -1087,6 +1158,8 @@ function reduce(deck, op) {
       return { ...deck, slides: deck.slides.map((s) => s.id === op.id ? { ...s, notes: op.notes } : s) };
     case "slide_set_background":
       return { ...deck, slides: deck.slides.map((s) => s.id === op.id ? { ...s, background: op.background } : s) };
+    case "slide_set_transition":
+      return { ...deck, slides: deck.slides.map((s) => s.id === op.id ? { ...s, transition: op.transition } : s) };
     case "element_add":
       return {
         ...deck,
@@ -1354,8 +1427,11 @@ 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 }) {
+function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground }) {
   if (!element) {
+    if (slide) {
+      return /* @__PURE__ */ jsx(SlideSettings, { slide, onSetTransition, onSetBackground });
+    }
     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" }),
       /* @__PURE__ */ jsx(Text, { size: "sm", className: "mt-2 !text-zinc-500", children: "Select an element to edit its properties." })
@@ -1389,6 +1465,80 @@ function ElementInspector({ element, onPatch, onDelete, onLockToggle }) {
     ] }) })
   ] });
 }
+function SlideSettings({
+  slide,
+  onSetTransition,
+  onSetBackground
+}) {
+  const transition = slide.transition;
+  const kind = transition?.kind ?? "none";
+  const setTransition = (next) => {
+    const merged = { kind, duration: transition?.duration, direction: transition?.direction, ...next };
+    onSetTransition?.(merged.kind === "none" ? { kind: "none" } : merged);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "fs-inspector flex h-full w-full flex-col border-l border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b border-zinc-200 px-3 py-2 dark:border-zinc-800", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h3", size: "xs", className: "!font-mono !uppercase !tracking-wider !text-zinc-500", children: "slide" }),
+      /* @__PURE__ */ jsxs(Text, { size: "xs", className: "!font-mono !text-zinc-400", children: [
+        "#",
+        slide.id.slice(-6)
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-3", children: [
+      /* @__PURE__ */ jsx(Card, { padding: "md", className: "!bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Transition" }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            label: "Kind",
+            list: [
+              { value: "none", label: "None" },
+              { value: "fade", label: "Fade" },
+              { value: "slide", label: "Slide" },
+              { value: "zoom", label: "Zoom" }
+            ],
+            value: kind,
+            onValueChange: (v) => setTransition({ kind: v })
+          }
+        ),
+        kind === "slide" && /* @__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: transition?.direction ?? "right",
+            onValueChange: (v) => setTransition({ direction: v })
+          }
+        ),
+        kind !== "none" && /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "Duration (ms)",
+            type: "number",
+            value: String(transition?.duration ?? 400),
+            onChange: (e) => setTransition({ duration: parseInt(e.target.value, 10) || 400 })
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "xs", className: "!text-zinc-500", children: "Entrance animation played when this slide appears in the viewer. Falls back to the theme default. Honors prefers-reduced-motion." })
+      ] }) }),
+      onSetBackground && /* @__PURE__ */ jsx(Card, { padding: "md", className: "mt-3 !bg-white dark:!bg-zinc-950", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(Heading, { as: "h4", size: "xs", className: "!uppercase !tracking-wider !text-zinc-500", children: "Background" }),
+        /* @__PURE__ */ jsx(FieldLabel, { label: "Color", children: /* @__PURE__ */ jsx(
+          ColorPicker,
+          {
+            value: slide.background?.color ?? "#ffffff",
+            onChange: (c) => onSetBackground({ ...slide.background, color: c })
+          }
+        ) })
+      ] }) })
+    ] })
+  ] });
+}
 function LayoutSection({ element, onPatch }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
@@ -1838,13 +1988,16 @@ function DeckEditor({
             ElementInspector,
             {
               element: selectedElement,
+              slide: slide ?? null,
               onPatch: (patch) => slide && elementIdSelected && ops.updateElement(slide.id, elementIdSelected, patch),
               onDelete: () => {
                 if (!slide || !elementIdSelected) return;
                 ops.removeElement(slide.id, elementIdSelected);
                 setElementIdSelected(null);
               },
-              onLockToggle: (locked) => slide && elementIdSelected && ops.updateElement(slide.id, elementIdSelected, { locked })
+              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)
             }
           ) })
         ] }),