@particle-academy/fancy-slides 0.1.7 → 0.2.0

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
-import { f as Slide$1, m as Theme, h as SlideElement, D as Deck, c as DeckOp, e as ShapeKind, k as TextElement, I as ImageElement, S as ShapeElement, i as SlideLayout, g as SlideBackground } from './types-Bc-psiRF.cjs';
-export { C as ChartElement, a as CodeElement, b as DeckActivity, E as ElementBase, d as EmbedElement, j as SlideTransition, T as TableElement, l as TextStyle, n as ThemeColors, o as ThemeFonts, p as TransitionKind } from './types-Bc-psiRF.cjs';
+import { f as Slide$1, m as Theme, h as SlideElement, D as Deck, c as DeckOp, e as ShapeKind, j as SlideTransition, g as SlideBackground, k as TextElement, I as ImageElement, S as ShapeElement, i as SlideLayout } from './types-B2ecrEAz.cjs';
+export { C as ChartElement, a as CodeElement, b as DeckActivity, E as ElementBase, d as EmbedElement, T as TableElement, l as TextStyle, n as ThemeColors, o as ThemeFonts, p as TransitionKind } from './types-B2ecrEAz.cjs';
 
 interface SlideProps {
     /** The slide to render. */
@@ -279,7 +279,7 @@ interface EditorToolbarProps {
 declare function EditorToolbar({ title, onTitleChange, themeName, onApplyTheme, onInsertText, onInsertImage, onInsertShape, onInsertChart, onInsertCode, onInsertTable, onPresent, disabled, }: EditorToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface ElementInspectorProps {
-    /** Element being inspected. `null` shows the empty state. */
+    /** Element being inspected. `null` falls back to slide settings (or the empty state). */
     element: SlideElement | null;
     /** Patch a property on the element. */
     onPatch: (patch: Partial<SlideElement>) => void;
@@ -287,6 +287,12 @@ interface ElementInspectorProps {
     onDelete?: () => void;
     /** Lock toggle. */
     onLockToggle?: (locked: boolean) => void;
+    /** Selected slide — shown when no element is selected so the user can edit slide-level settings. */
+    slide?: Slide$1 | null;
+    /** Set the slide's entrance transition. */
+    onSetTransition?: (transition?: SlideTransition) => void;
+    /** Set the slide's background. */
+    onSetBackground?: (background?: SlideBackground) => void;
 }
 /**
  * Right-hand inspector. Tabs split position + style + advanced properties.
@@ -294,7 +300,7 @@ interface ElementInspectorProps {
  * react-fancy `Card`, `Tabs`, `Input`, `Select`, `Slider`, `ColorPicker`,
  * `Action`.
  */
-declare function ElementInspector({ element, onPatch, onDelete, onLockToggle }: ElementInspectorProps): react_jsx_runtime.JSX.Element;
+declare function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground }: ElementInspectorProps): react_jsx_runtime.JSX.Element;
 
 interface SpeakerNotesProps {
     notes?: string;
@@ -413,6 +419,7 @@ interface DeckStateApi {
     setLayout: (id: string, layout: SlideLayout) => void;
     setNotes: (id: string, notes: string) => void;
     setBackground: (id: string, bg?: SlideBackground) => void;
+    setTransition: (id: string, transition?: SlideTransition) => void;
     /** Element-level helpers. */
     addElement: (slideId: string, element: Omit<SlideElement, "id"> & {
         id?: string;
@@ -481,4 +488,4 @@ type ChartKind = "bar" | "line" | "pie" | "area" | "scatter";
 type Option = Record<string, unknown>;
 declare function chartStarterOption(kind: ChartKind): Option;
 
-export { type ChartKind$1 as ChartKind, Deck, DeckEditor, type DeckEditorProps, DeckOp, type DeckStateApi, EditorToolbar, type EditorToolbarProps, ElementInspector, type ElementInspectorProps, ImageElement, ImageElementRenderer, type ImageElementRendererProps, PresenterView, type PresenterViewProps, ShapeElement, ShapeElementRenderer, type ShapeElementRendererProps, ShapeKind, Slide, SlideBackground, type SlideContextValue, Slide$1 as SlideData, SlideElement, type SlideKeyboardOptions, SlideLayout, type SlideProps, SlideRail, type SlideRailProps, SlideThumbnail, type SlideThumbnailProps, SlideViewer, type SlideViewerProps, SpeakerNotes, type SpeakerNotesProps, TextElement, TextElementRenderer, type TextElementRendererProps, Theme, type UseDeckStateOptions, builtinThemes, chartStarterOption, darkTheme, deckId, defaultTheme, defineTheme, elementId, nextId, reduce as reduceDeck, resolveTheme, slideId, useDeckState, useIsDarkSlide, useSlideContext, useSlideKeyboard, useSlideTheme, vividTheme };
+export { type ChartKind$1 as ChartKind, Deck, DeckEditor, type DeckEditorProps, DeckOp, type DeckStateApi, EditorToolbar, type EditorToolbarProps, ElementInspector, type ElementInspectorProps, ImageElement, ImageElementRenderer, type ImageElementRendererProps, PresenterView, type PresenterViewProps, ShapeElement, ShapeElementRenderer, type ShapeElementRendererProps, ShapeKind, Slide, SlideBackground, type SlideContextValue, Slide$1 as SlideData, SlideElement, type SlideKeyboardOptions, SlideLayout, type SlideProps, SlideRail, type SlideRailProps, SlideThumbnail, type SlideThumbnailProps, SlideTransition, SlideViewer, type SlideViewerProps, SpeakerNotes, type SpeakerNotesProps, TextElement, TextElementRenderer, type TextElementRendererProps, Theme, type UseDeckStateOptions, builtinThemes, chartStarterOption, darkTheme, deckId, defaultTheme, defineTheme, elementId, nextId, reduce as reduceDeck, resolveTheme, slideId, useDeckState, useIsDarkSlide, useSlideContext, useSlideKeyboard, useSlideTheme, vividTheme };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
-import { f as Slide$1, m as Theme, h as SlideElement, D as Deck, c as DeckOp, e as ShapeKind, k as TextElement, I as ImageElement, S as ShapeElement, i as SlideLayout, g as SlideBackground } from './types-Bc-psiRF.js';
-export { C as ChartElement, a as CodeElement, b as DeckActivity, E as ElementBase, d as EmbedElement, j as SlideTransition, T as TableElement, l as TextStyle, n as ThemeColors, o as ThemeFonts, p as TransitionKind } from './types-Bc-psiRF.js';
+import { f as Slide$1, m as Theme, h as SlideElement, D as Deck, c as DeckOp, e as ShapeKind, j as SlideTransition, g as SlideBackground, k as TextElement, I as ImageElement, S as ShapeElement, i as SlideLayout } from './types-B2ecrEAz.js';
+export { C as ChartElement, a as CodeElement, b as DeckActivity, E as ElementBase, d as EmbedElement, T as TableElement, l as TextStyle, n as ThemeColors, o as ThemeFonts, p as TransitionKind } from './types-B2ecrEAz.js';
 
 interface SlideProps {
     /** The slide to render. */
@@ -279,7 +279,7 @@ interface EditorToolbarProps {
 declare function EditorToolbar({ title, onTitleChange, themeName, onApplyTheme, onInsertText, onInsertImage, onInsertShape, onInsertChart, onInsertCode, onInsertTable, onPresent, disabled, }: EditorToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface ElementInspectorProps {
-    /** Element being inspected. `null` shows the empty state. */
+    /** Element being inspected. `null` falls back to slide settings (or the empty state). */
     element: SlideElement | null;
     /** Patch a property on the element. */
     onPatch: (patch: Partial<SlideElement>) => void;
@@ -287,6 +287,12 @@ interface ElementInspectorProps {
     onDelete?: () => void;
     /** Lock toggle. */
     onLockToggle?: (locked: boolean) => void;
+    /** Selected slide — shown when no element is selected so the user can edit slide-level settings. */
+    slide?: Slide$1 | null;
+    /** Set the slide's entrance transition. */
+    onSetTransition?: (transition?: SlideTransition) => void;
+    /** Set the slide's background. */
+    onSetBackground?: (background?: SlideBackground) => void;
 }
 /**
  * Right-hand inspector. Tabs split position + style + advanced properties.
@@ -294,7 +300,7 @@ interface ElementInspectorProps {
  * react-fancy `Card`, `Tabs`, `Input`, `Select`, `Slider`, `ColorPicker`,
  * `Action`.
  */
-declare function ElementInspector({ element, onPatch, onDelete, onLockToggle }: ElementInspectorProps): react_jsx_runtime.JSX.Element;
+declare function ElementInspector({ element, onPatch, onDelete, onLockToggle, slide, onSetTransition, onSetBackground }: ElementInspectorProps): react_jsx_runtime.JSX.Element;
 
 interface SpeakerNotesProps {
     notes?: string;
@@ -413,6 +419,7 @@ interface DeckStateApi {
     setLayout: (id: string, layout: SlideLayout) => void;
     setNotes: (id: string, notes: string) => void;
     setBackground: (id: string, bg?: SlideBackground) => void;
+    setTransition: (id: string, transition?: SlideTransition) => void;
     /** Element-level helpers. */
     addElement: (slideId: string, element: Omit<SlideElement, "id"> & {
         id?: string;
@@ -481,4 +488,4 @@ type ChartKind = "bar" | "line" | "pie" | "area" | "scatter";
 type Option = Record<string, unknown>;
 declare function chartStarterOption(kind: ChartKind): Option;
 
-export { type ChartKind$1 as ChartKind, Deck, DeckEditor, type DeckEditorProps, DeckOp, type DeckStateApi, EditorToolbar, type EditorToolbarProps, ElementInspector, type ElementInspectorProps, ImageElement, ImageElementRenderer, type ImageElementRendererProps, PresenterView, type PresenterViewProps, ShapeElement, ShapeElementRenderer, type ShapeElementRendererProps, ShapeKind, Slide, SlideBackground, type SlideContextValue, Slide$1 as SlideData, SlideElement, type SlideKeyboardOptions, SlideLayout, type SlideProps, SlideRail, type SlideRailProps, SlideThumbnail, type SlideThumbnailProps, SlideViewer, type SlideViewerProps, SpeakerNotes, type SpeakerNotesProps, TextElement, TextElementRenderer, type TextElementRendererProps, Theme, type UseDeckStateOptions, builtinThemes, chartStarterOption, darkTheme, deckId, defaultTheme, defineTheme, elementId, nextId, reduce as reduceDeck, resolveTheme, slideId, useDeckState, useIsDarkSlide, useSlideContext, useSlideKeyboard, useSlideTheme, vividTheme };
+export { type ChartKind$1 as ChartKind, Deck, DeckEditor, type DeckEditorProps, DeckOp, type DeckStateApi, EditorToolbar, type EditorToolbarProps, ElementInspector, type ElementInspectorProps, ImageElement, ImageElementRenderer, type ImageElementRendererProps, PresenterView, type PresenterViewProps, ShapeElement, ShapeElementRenderer, type ShapeElementRendererProps, ShapeKind, Slide, SlideBackground, type SlideContextValue, Slide$1 as SlideData, SlideElement, type SlideKeyboardOptions, SlideLayout, type SlideProps, SlideRail, type SlideRailProps, SlideThumbnail, type SlideThumbnailProps, SlideTransition, SlideViewer, type SlideViewerProps, SpeakerNotes, type SpeakerNotesProps, TextElement, TextElementRenderer, type TextElementRendererProps, Theme, type UseDeckStateOptions, builtinThemes, chartStarterOption, darkTheme, deckId, defaultTheme, defineTheme, elementId, nextId, reduce as reduceDeck, resolveTheme, slideId, useDeckState, useIsDarkSlide, useSlideContext, useSlideKeyboard, useSlideTheme, vividTheme };

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)
             }
           ) })
         ] }),