@textcortex/slidewise 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textcortex/slidewise",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Embeddable React PPTX editor.",
   "license": "MIT",
   "type": "module",

package/src/SlidewiseEditor.css

@@ -62,6 +62,26 @@
   --slidewise-bg-pill: var(--smart-grad);
   --slidewise-bg-unsaved-badge: rgba(232, 80, 76, 0.12);
 
+  /* Motion tokens. Hosts retune the editor's whole animation feel by
+     overriding these. Defaults match Material 3 "standard" easings. */
+  --slidewise-duration-instant: 0ms;
+  --slidewise-duration-fast: 120ms;
+  --slidewise-duration-base: 200ms;
+  --slidewise-duration-slow: 320ms;
+  --slidewise-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --slidewise-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --slidewise-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* Per-region animation flags. Set to 0 on a wrapping scope to disable a
+     specific region's animations without killing motion globally. They are
+     read internally by region-scoped transitions; CSS rules use them via
+     `transition-duration: calc(var(--slidewise-duration-base) * var(--slidewise-anim-topbar))`. */
+  --slidewise-anim-topbar: 1;
+  --slidewise-anim-rail: 1;
+  --slidewise-anim-canvas: 1;
+  --slidewise-anim-floating-toolbar: 1;
+  --slidewise-anim-play-mode: 1;
+
   /* Layout backgrounds */
   --app-bg: #ffffff;
   --rail-bg: #fafafb;
@@ -295,3 +315,40 @@
     transition: none;
   }
 }
+
+/*
+ * Reduced motion plumbing.
+ *
+ *   <Slidewise.Root reduceMotion="system">  → no class; respects the
+ *                                              OS preference via the media
+ *                                              query below.
+ *   <Slidewise.Root reduceMotion={true}>    → adds `.reduce-motion` class
+ *                                              for hard-off.
+ *   <Slidewise.Root reduceMotion={false}>   → adds `.reduce-motion-off`
+ *                                              class to override the OS
+ *                                              preference (testing /
+ *                                              previewing animations).
+ */
+.slidewise-editor.reduce-motion,
+.slidewise-editor.reduce-motion *,
+.slidewise-editor.reduce-motion *::before,
+.slidewise-editor.reduce-motion *::after {
+  animation-duration: 0ms !important;
+  animation-delay: 0ms !important;
+  transition-duration: 0ms !important;
+  transition-delay: 0ms !important;
+  scroll-behavior: auto !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slidewise-editor:not(.reduce-motion-off),
+  .slidewise-editor:not(.reduce-motion-off) *,
+  .slidewise-editor:not(.reduce-motion-off) *::before,
+  .slidewise-editor:not(.reduce-motion-off) *::after {
+    animation-duration: 0ms !important;
+    animation-delay: 0ms !important;
+    transition-duration: 0ms !important;
+    transition-delay: 0ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/SlidewiseEditor.tsx

@@ -17,6 +17,7 @@ import {
 import type { SlidewiseIcons } from "./compound/IconContext";
 import type { SlidewiseLabels } from "./compound/LabelsContext";
 import type { SlidewiseSurfaces } from "./compound/SurfacesContext";
+import type { Transition } from "framer-motion";
 import type { Deck } from "@/lib/types";
 import "./SlidewiseEditor.css";
 
@@ -67,6 +68,16 @@ export interface SlidewiseEditorProps {
   showBottomToolbar?: boolean;
   /** Override the bundled Geist font; sets `--font-geist-sans` on the root. */
   fontFamily?: string;
+  /**
+   * Reduced-motion behavior. `"system"` (default) respects the OS
+   * preference; `true` forces motion off; `false` forces it on.
+   */
+  reduceMotion?: boolean | "system";
+  /**
+   * Default framer-motion transition applied via `<MotionConfig>`. Use
+   * this to retune the editor's animation feel globally.
+   */
+  transition?: Transition;
   /**
    * Per-action icon overrides. Pass a ReactNode for any of `undo`, `redo`,
    * `save`, `play`, `themeLight`, `themeDark`, `export`, `smart` to skin the
@@ -135,6 +146,8 @@ export const SlidewiseEditor = forwardRef<
     showTopBar = true,
     showBottomToolbar = true,
     fontFamily,
+    reduceMotion,
+    transition,
     icons,
     labels,
     surfaces,
@@ -160,6 +173,8 @@ export const SlidewiseEditor = forwardRef<
     theme,
     initialSlideId,
     fontFamily,
+    reduceMotion,
+    transition,
     icons,
     labels,
     surfaces,

package/src/SlidewiseFileEditor.tsx

@@ -13,6 +13,7 @@ import type { SlidewiseIcons } from "./compound/IconContext";
 import type { SlidewiseLabels } from "./compound/LabelsContext";
 import type { SlidewiseSurfaces } from "./compound/SurfacesContext";
 import { DEFAULT_LABELS } from "./compound/LabelsContext";
+import type { Transition } from "framer-motion";
 import type { HistoryState, SelectionSnapshot } from "./compound/SlidewiseRoot";
 
 export interface SlidewiseFileEditorProps {
@@ -105,6 +106,13 @@ export interface SlidewiseFileEditorProps {
    * `--slidewise-bg-*` CSS variables.
    */
   surfaces?: SlidewiseSurfaces;
+  /**
+   * Reduced-motion behavior. `"system"` (default) respects the OS
+   * preference; `true` forces motion off; `false` forces it on.
+   */
+  reduceMotion?: boolean | "system";
+  /** Default framer-motion transition applied via `<MotionConfig>`. */
+  transition?: Transition;
   className?: string;
   style?: CSSProperties;
   /**
@@ -209,6 +217,8 @@ export const SlidewiseFileEditor = forwardRef<
     icons,
     labels,
     surfaces,
+    reduceMotion,
+    transition,
     className,
     style,
     parse = parsePptx,
@@ -384,6 +394,8 @@ export const SlidewiseFileEditor = forwardRef<
         icons={icons}
         labels={labels}
         surfaces={surfaces}
+        reduceMotion={reduceMotion}
+        transition={transition}
         onChange={(next) => {
           onChangeRef.current?.(next);
         }}

package/src/compound/SlidewiseRoot.tsx

@@ -18,6 +18,7 @@ import { collectFontFamilies, ensureGoogleFontsLoaded } from "@/lib/fonts";
 import type { Deck } from "@/lib/types";
 import { GridView } from "@/components/editor/GridView";
 import { PlayMode } from "@/components/editor/PlayMode";
+import { MotionConfig, type Transition } from "framer-motion";
 import { HostProvider } from "./HostContext";
 import { IconProvider, type SlidewiseIcons } from "./IconContext";
 import { ReadOnlyProvider } from "./ReadOnlyContext";
@@ -72,6 +73,29 @@ export interface SlidewiseRootProps {
   initialSlideId?: string;
   /** Override the default Geist font; sets `--slidewise-font-sans`. */
   fontFamily?: string;
+  /**
+   * Controls reduced-motion behavior.
+   *
+   * - `"system"` (default) — respect the user's OS preference via the
+   *   `prefers-reduced-motion` media query.
+   * - `true` — force all CSS animations + transitions off and tell
+   *   framer-motion to skip motion. Use for hosts whose own product
+   *   already has a global motion-off toggle.
+   * - `false` — force motion on even when the OS reports reduced-motion.
+   *   Useful for previewing animations during development; not generally
+   *   recommended in production since it overrides an accessibility hint.
+   */
+  reduceMotion?: boolean | "system";
+  /**
+   * Default framer-motion transition. Passed through to a wrapping
+   * `<MotionConfig>` so every motion component inside the editor inherits
+   * it. Useful for retuning the editor's overall feel (faster, springier,
+   * etc.) without touching individual components.
+   *
+   * For CSS transitions, override the duration/easing tokens instead —
+   * `--slidewise-duration-base`, `--slidewise-easing-standard`, etc.
+   */
+  transition?: Transition;
   /**
    * Per-action icon overrides for the chrome. Hosts pass any subset to
    * skin Slidewise with their own icon set; missing slots fall back to
@@ -212,6 +236,8 @@ function RootInner({
   theme,
   initialSlideId,
   fontFamily,
+  reduceMotion = "system",
+  transition,
   icons,
   labels,
   surfaces,
@@ -461,26 +487,50 @@ function RootInner({
     ? { ...style, ...(surfaceVars as CSSProperties) }
     : style;
 
+  // Map our reduceMotion enum to:
+  //  - a CSS class on the root (drives the @media + class rules in
+  //    SlidewiseEditor.css)
+  //  - framer-motion's reducedMotion prop on MotionConfig
+  const motionClass =
+    reduceMotion === true
+      ? "reduce-motion"
+      : reduceMotion === false
+        ? "reduce-motion-off"
+        : "";
+  const fmReducedMotion =
+    reduceMotion === true
+      ? "always"
+      : reduceMotion === false
+        ? "never"
+        : "user";
+  const combinedClassName = motionClass
+    ? className
+      ? `${className} ${motionClass}`
+      : motionClass
+    : className;
+
   return (
-    <ReadOnlyProvider readOnly={readOnly}>
-      <IconProvider icons={icons ?? {}}>
-        <LabelsProvider labels={labels}>
-          <SurfacesProvider surfaces={surfaces}>
-            <DirtyProvider dirty={dirty}>
-              <HostProvider callbacks={{ onSave: wrappedSave, onExport }}>
-                <RootShell
-                  fontFamily={fontFamily}
-                  className={className}
-                  style={mergedStyle}
-                >
-                  {children}
-                </RootShell>
-              </HostProvider>
-            </DirtyProvider>
-          </SurfacesProvider>
-        </LabelsProvider>
-      </IconProvider>
-    </ReadOnlyProvider>
+    <MotionConfig reducedMotion={fmReducedMotion} transition={transition}>
+      <ReadOnlyProvider readOnly={readOnly}>
+        <IconProvider icons={icons ?? {}}>
+          <LabelsProvider labels={labels}>
+            <SurfacesProvider surfaces={surfaces}>
+              <DirtyProvider dirty={dirty}>
+                <HostProvider callbacks={{ onSave: wrappedSave, onExport }}>
+                  <RootShell
+                    fontFamily={fontFamily}
+                    className={combinedClassName}
+                    style={mergedStyle}
+                  >
+                    {children}
+                  </RootShell>
+                </HostProvider>
+              </DirtyProvider>
+            </SurfacesProvider>
+          </LabelsProvider>
+        </IconProvider>
+      </ReadOnlyProvider>
+    </MotionConfig>
   );
 }