@textcortex/slidewise 1.5.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textcortex/slidewise",
-  "version": "1.5.0",
+  "version": "1.7.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

@@ -7,8 +7,8 @@ import {
   type SelectionSnapshot,
 } from "./compound/SlidewiseRoot";
 import { TopBar } from "./compound/topbar";
+import { SlideRail } from "./compound/sliderail";
 import {
-  SlideRail,
   Canvas,
   BottomToolbar,
   Body,
@@ -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>
   );
 }
 

package/src/compound/index.ts

@@ -40,7 +40,6 @@ export {
   type SelectionSnapshot,
 } from "./SlidewiseRoot";
 export {
-  SlideRail,
   Canvas,
   BottomToolbar,
   RightPanel,
@@ -50,6 +49,19 @@ export {
 } from "./parts";
 
 export { TopBar, type TopBarProps, type TopBarSlotId } from "./topbar";
+export {
+  SlideRail,
+  useSlideRailItem,
+  type SlideRailProps,
+  type SlideRailRootProps,
+  type SlideRailHeaderProps,
+  type SlideRailListProps,
+  type SlideRailItemProps,
+  type SlideRailThumbnailProps,
+  type SlideRailNumberProps,
+  type SlideRailAddButtonProps,
+  type SlideRailItemContextValue,
+} from "./sliderail";
 export type {
   TopBarRootProps,
   TopBarTitleProps,

package/src/compound/parts.tsx

@@ -1,5 +1,4 @@
 import type { CSSProperties, ReactNode } from "react";
-import { SlideRail as SlideRailInternal } from "@/components/editor/SlideRail";
 import { Canvas as CanvasInternal } from "@/components/editor/Canvas";
 import { BottomToolbar as BottomToolbarInternal } from "@/components/editor/BottomToolbar";
 
@@ -8,9 +7,10 @@ import { BottomToolbar as BottomToolbarInternal } from "@/components/editor/Bott
  * so any part can be omitted, wrapped, or replaced. None of these accept
  * deck/onChange/onSave props — those live on `<Slidewise.Root>`.
  *
- * Note: `<Slidewise.TopBar>` is defined separately in `./topbar/` because
- * it itself decomposes into subparts (`TopBar.Root`, `TopBar.Title`,
- * `TopBar.Undo`, etc.) and ships a `hide` prop for per-button removal.
+ * Note: `<Slidewise.TopBar>` and `<Slidewise.SlideRail>` are defined
+ * separately under `./topbar/` and `./sliderail/` because they decompose
+ * into their own subparts. Both ship a callable component for the default
+ * arrangement plus a namespace of named subparts.
  */
 
 export interface RegionProps {
@@ -18,13 +18,6 @@ export interface RegionProps {
   style?: CSSProperties;
 }
 
-/**
- * Left-side slide thumbnail rail with add/duplicate/delete.
- */
-export function SlideRail(_props: RegionProps = {}) {
-  return <SlideRailInternal />;
-}
-
 /**
  * The main editing canvas. This is the only part that's effectively required
  * — without it the editor renders nothing visible. Layout-wise it expects

package/src/compound/sliderail/AddButton.tsx

@@ -0,0 +1,76 @@
+import type { CSSProperties, ReactNode } from "react";
+import { Plus } from "lucide-react";
+import { useEditor } from "@/lib/StoreProvider";
+import { useReadOnly } from "../ReadOnlyContext";
+import { useLabels } from "../LabelsContext";
+
+/**
+ * Dashed "New Slide" button at the bottom of the rail. Calls
+ * `store.addSlide()`. Hidden in read-only mode.
+ *
+ * Replace with your own button when you need a different shape; the
+ * store action is exported (`useEditor((s) => s.addSlide)`).
+ */
+export interface SlideRailAddButtonProps {
+  className?: string;
+  style?: CSSProperties;
+  ariaLabel?: string;
+  /** Override the visible label. Defaults to `labels.addSlide`. */
+  label?: string;
+  children?: ReactNode;
+}
+
+export function AddButton({
+  className,
+  style,
+  ariaLabel,
+  label,
+  children,
+}: SlideRailAddButtonProps = {}) {
+  const addSlide = useEditor((s) => s.addSlide);
+  const readOnly = useReadOnly();
+  const labels = useLabels();
+  if (readOnly) return null;
+
+  const resolved = label ?? labels.addSlide;
+
+  return (
+    <button
+      type="button"
+      className={className}
+      aria-label={ariaLabel ?? resolved}
+      onClick={() => addSlide()}
+      style={{
+        height: 44,
+        margin: 12,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 6,
+        background: "var(--slidewise-bg-app, var(--app-bg))",
+        border: "1px dashed var(--border-dashed)",
+        borderRadius: "var(--slidewise-radius, 10px)",
+        color: "var(--ink)",
+        fontSize: 13,
+        fontWeight: 500,
+        cursor: "pointer",
+        transition: "background 120ms, border-color 120ms, color 120ms",
+        fontFamily: "inherit",
+        ...style,
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor =
+          "var(--slidewise-accent, var(--accent))";
+        e.currentTarget.style.color =
+          "var(--slidewise-accent, var(--accent))";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = "var(--border-dashed)";
+        e.currentTarget.style.color = "var(--ink)";
+      }}
+    >
+      {children ?? <Plus size={14} />}
+      {resolved}
+    </button>
+  );
+}

package/src/compound/sliderail/Header.tsx

@@ -0,0 +1,84 @@
+import type { CSSProperties, PropsWithChildren } from "react";
+import { LayoutGrid } from "lucide-react";
+import { useEditor } from "@/lib/StoreProvider";
+
+/**
+ * Default rail header. Renders the grid-view button and a "current / total"
+ * slide counter. Hosts can pass `children` to replace the whole content
+ * while keeping the height + border, or render their own `<header>` instead.
+ *
+ * ```tsx
+ * // Default counter
+ * <Slidewise.SlideRail.Header />
+ *
+ * // Custom content
+ * <Slidewise.SlideRail.Header>
+ *   <strong>{deckTitle}</strong>
+ * </Slidewise.SlideRail.Header>
+ * ```
+ */
+export interface SlideRailHeaderProps {
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function Header({
+  className,
+  style,
+  children,
+}: PropsWithChildren<SlideRailHeaderProps>) {
+  const slides = useEditor((s) => s.deck.slides);
+  const currentId = useEditor((s) => s.currentSlideId);
+  const setView = useEditor((s) => s.setView);
+  const idx = slides.findIndex((s) => s.id === currentId);
+
+  return (
+    <div
+      className={className}
+      style={{
+        height: 36,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "0 12px",
+        fontSize: 12,
+        color: "var(--ink-muted)",
+        borderBottom: "1px solid var(--border)",
+        ...style,
+      }}
+    >
+      {children ?? (
+        <>
+          <button
+            title="Slide overview"
+            aria-label="Open slide overview"
+            onClick={() => setView("grid")}
+            style={{
+              width: 28,
+              height: 28,
+              border: "none",
+              borderRadius: 6,
+              background: "transparent",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "var(--ink)",
+              cursor: "pointer",
+            }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.background = "var(--hover-strong)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.background = "transparent")
+            }
+          >
+            <LayoutGrid size={14} />
+          </button>
+          <span>
+            {idx + 1} / {slides.length}
+          </span>
+        </>
+      )}
+    </div>
+  );
+}

package/src/compound/sliderail/Item.tsx

@@ -0,0 +1,82 @@
+import type { CSSProperties, PropsWithChildren } from "react";
+import { useEditor } from "@/lib/StoreProvider";
+import type { Slide } from "@/lib/types";
+import { SlideRailItemProvider } from "./ItemContext";
+
+/**
+ * Wraps a single slide in the rail. Provides the slide to descendants via
+ * context (read with `useSlideRailItem`) and wires click → `selectSlide`.
+ *
+ * The default subparts (`Thumbnail`, `Number`) read the slide off the
+ * context, so hosts can rearrange them freely. Host content (e.g. a
+ * three-dots menu, a duplicate button) drops in as additional children.
+ *
+ * ```tsx
+ * <Slidewise.SlideRail.Item slide={slide}>
+ *   <Slidewise.SlideRail.Thumbnail />
+ *   <Slidewise.SlideRail.Number />
+ *   <MyContextMenu slide={slide} />
+ * </Slidewise.SlideRail.Item>
+ * ```
+ */
+export interface SlideRailItemProps {
+  slide: Slide;
+  className?: string;
+  style?: CSSProperties;
+  /**
+   * Override the click handler. The default selects the slide via the
+   * editor store; pass a function here to add host behavior (e.g. open
+   * a context drawer instead of selecting).
+   */
+  onClick?: (slide: Slide) => void;
+}
+
+export function Item({
+  slide,
+  className,
+  style,
+  onClick,
+  children,
+}: PropsWithChildren<SlideRailItemProps>) {
+  const slides = useEditor((s) => s.deck.slides);
+  const currentId = useEditor((s) => s.currentSlideId);
+  const selectSlide = useEditor((s) => s.selectSlide);
+  const index = slides.findIndex((s) => s.id === slide.id);
+  const isCurrent = slide.id === currentId;
+
+  return (
+    <SlideRailItemProvider value={{ slide, index, isCurrent }}>
+      <div
+        className={className}
+        onClick={() => (onClick ? onClick(slide) : selectSlide(slide.id))}
+        role="button"
+        tabIndex={0}
+        aria-current={isCurrent ? "true" : undefined}
+        aria-label={`Open slide ${index + 1}`}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick ? onClick(slide) : selectSlide(slide.id);
+          }
+        }}
+        style={{
+          position: "relative",
+          padding: "0 12px",
+          marginBottom: 14,
+          cursor: "pointer",
+          background:
+            "var(--slidewise-bg-rail-item, transparent)",
+          ...(isCurrent
+            ? {
+                background:
+                  "var(--slidewise-bg-rail-item-active, var(--accent-soft))",
+              }
+            : null),
+          ...style,
+        }}
+      >
+        {children}
+      </div>
+    </SlideRailItemProvider>
+  );
+}

package/src/compound/sliderail/ItemContext.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext } from "react";
+import type { Slide } from "@/lib/types";
+
+/**
+ * Context handed to descendants of `<SlideRail.Item>` so leaf subparts
+ * (`Thumbnail`, `Number`) and host content can read which slide they're
+ * rendering against without prop drilling.
+ */
+export interface SlideRailItemContextValue {
+  slide: Slide;
+  /** Zero-based position in `deck.slides`. */
+  index: number;
+  /** True when this is the editor's currently-focused slide. */
+  isCurrent: boolean;
+}
+
+const ItemContext = createContext<SlideRailItemContextValue | null>(null);
+
+export function SlideRailItemProvider({
+  value,
+  children,
+}: {
+  value: SlideRailItemContextValue;
+  children: React.ReactNode;
+}) {
+  return <ItemContext.Provider value={value}>{children}</ItemContext.Provider>;
+}
+
+/**
+ * Read the current item context. Throws when used outside a
+ * `<SlideRail.Item>` — the leaf subparts are meaningless without a
+ * concrete slide to render.
+ */
+export function useSlideRailItem(): SlideRailItemContextValue {
+  const ctx = useContext(ItemContext);
+  if (!ctx) {
+    throw new Error(
+      "useSlideRailItem must be used inside <Slidewise.SlideRail.Item>"
+    );
+  }
+  return ctx;
+}