@textcortex/slidewise 1.4.0 → 1.6.0

package/package.json

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

package/src/SlidewiseEditor.css

@@ -34,6 +34,54 @@
   --slidewise-bar-bg: var(--app-bg);
   --slidewise-accent: var(--accent);
 
+  /* Per-surface background tokens. Map onto internal vars by default so
+     existing theme styling is preserved. Hosts override any subset (or
+     pass the `surfaces` prop on <Slidewise.Root>) to retint individual
+     regions independently. */
+  --slidewise-bg-app: var(--app-bg);
+  --slidewise-bg-topbar: var(--app-bg);
+  --slidewise-bg-rail: var(--rail-bg);
+  --slidewise-bg-rail-item: transparent;
+  --slidewise-bg-rail-item-active: var(--accent-soft);
+  --slidewise-bg-canvas-frame: transparent;
+  --slidewise-bg-canvas-from: var(--canvas-bg-from);
+  --slidewise-bg-canvas-to: var(--canvas-bg-to);
+  --slidewise-bg-bottom-toolbar: var(--toolbar-bg);
+  --slidewise-bg-right-panel: var(--rail-bg);
+  --slidewise-bg-menu: var(--menu-bg);
+  --slidewise-bg-tooltip: var(--menu-bg);
+  --slidewise-bg-popover: var(--menu-bg);
+  --slidewise-bg-dialog: var(--menu-bg);
+  --slidewise-bg-slide: #ffffff;
+  --slidewise-bg-selection: var(--accent-soft);
+  --slidewise-bg-hover: var(--hover);
+  --slidewise-bg-active: var(--active);
+  --slidewise-bg-input: var(--input-bg);
+  --slidewise-bg-button: transparent;
+  --slidewise-bg-button-hover: var(--hover);
+  --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;
@@ -126,6 +174,12 @@
   --canvas-bg-from: #181c38;
   --canvas-bg-to: #0c1027;
 
+  /* Dark-mode overrides for the public --slidewise-bg-* surface tokens.
+     Hosts can still override any one of these from a higher specificity
+     selector or via the `surfaces` prop. */
+  --slidewise-bg-slide: #ffffff;
+  --slidewise-bg-unsaved-badge: rgba(232, 80, 76, 0.18);
+
   /* Charcoal-purple surface kit from textcortex/platform#7428 — neutral
      dark base, faint inset highlight, layered shadow that lifts to a
      subtle plum tint on hover. */
@@ -261,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

@@ -15,6 +15,9 @@ import {
   CanvasFrame,
 } from "./compound/parts";
 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";
 
@@ -65,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
@@ -72,6 +85,17 @@ export interface SlidewiseEditorProps {
    * bundled lucide-react icons.
    */
   icons?: SlidewiseIcons;
+  /**
+   * User-visible string overrides for i18n. Pass any subset; missing
+   * entries fall back to English defaults.
+   */
+  labels?: SlidewiseLabels;
+  /**
+   * Per-surface background overrides, equivalent to setting the
+   * `--slidewise-bg-*` CSS variables. See `SlidewiseSurfaces` for the full
+   * list of keys.
+   */
+  surfaces?: SlidewiseSurfaces;
   /** Extra class names appended to the editor root. */
   className?: string;
   /** Inline style applied to the editor root. */
@@ -122,7 +146,11 @@ export const SlidewiseEditor = forwardRef<
     showTopBar = true,
     showBottomToolbar = true,
     fontFamily,
+    reduceMotion,
+    transition,
     icons,
+    labels,
+    surfaces,
     className,
     style,
   },
@@ -145,7 +173,11 @@ export const SlidewiseEditor = forwardRef<
     theme,
     initialSlideId,
     fontFamily,
+    reduceMotion,
+    transition,
     icons,
+    labels,
+    surfaces,
     className,
     style,
   };

package/src/SlidewiseFileEditor.tsx

@@ -10,6 +10,10 @@ import { SlidewiseEditor, type SlidewiseEditorHandle } from "./SlidewiseEditor";
 import { parsePptx, serializeDeck } from "@/lib/pptx";
 import type { Deck } from "@/lib/types";
 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 {
@@ -91,6 +95,24 @@ export interface SlidewiseFileEditorProps {
    * editor's chrome with your own icon set.
    */
   icons?: SlidewiseIcons;
+  /**
+   * User-visible string overrides for i18n. Pass any subset; missing
+   * entries fall back to English defaults. The "Unsaved changes" badge
+   * and the loading / load-error messages also key off this table.
+   */
+  labels?: SlidewiseLabels;
+  /**
+   * Per-surface background overrides; equivalent to setting the
+   * `--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;
   /**
@@ -193,6 +215,10 @@ export const SlidewiseFileEditor = forwardRef<
     showBottomToolbar,
     fontFamily,
     icons,
+    labels,
+    surfaces,
+    reduceMotion,
+    transition,
     className,
     style,
     parse = parsePptx,
@@ -337,15 +363,18 @@ export const SlidewiseFileEditor = forwardRef<
   if (state.status === "loading") {
     return (
       <div style={{ ...frameStyle, ...style }} className={className}>
-        <div style={messageStyle}>Loading…</div>
+        <div style={messageStyle}>
+          {labels?.fileLoading ?? DEFAULT_LABELS.fileLoading}
+        </div>
       </div>
     );
   }
   if (state.status === "error") {
+    const fmt = labels?.fileLoadError ?? DEFAULT_LABELS.fileLoadError;
     return (
       <div style={{ ...frameStyle, ...style }} className={className}>
         <div style={{ ...messageStyle, color: "#E8504C" }}>
-          Could not open file: {state.error.message}
+          {fmt(state.error.message)}
         </div>
       </div>
     );
@@ -363,6 +392,10 @@ export const SlidewiseFileEditor = forwardRef<
         showBottomToolbar={showBottomToolbar}
         fontFamily={fontFamily}
         icons={icons}
+        labels={labels}
+        surfaces={surfaces}
+        reduceMotion={reduceMotion}
+        transition={transition}
         onChange={(next) => {
           onChangeRef.current?.(next);
         }}
@@ -382,7 +415,11 @@ export const SlidewiseFileEditor = forwardRef<
           await saveBlob(blob);
         }}
       />
-      {dirty && <UnsavedBadge />}
+      {dirty && (
+        <UnsavedBadge
+          label={labels?.unsavedBadge ?? DEFAULT_LABELS.unsavedBadge}
+        />
+      )}
     </div>
   );
 });
@@ -403,7 +440,7 @@ const messageStyle: CSSProperties = {
   color: "#5b6178",
 };
 
-function UnsavedBadge() {
+function UnsavedBadge({ label }: { label: string }) {
   return (
     <div
       style={{
@@ -411,7 +448,8 @@ function UnsavedBadge() {
         top: 12,
         right: 12,
         padding: "4px 10px",
-        background: "rgba(232, 80, 76, 0.12)",
+        background:
+          "var(--slidewise-bg-unsaved-badge, rgba(232, 80, 76, 0.12))",
         color: "#E8504C",
         borderRadius: 999,
         fontFamily: "Inter, system-ui, sans-serif",
@@ -422,7 +460,7 @@ function UnsavedBadge() {
         pointerEvents: "none",
       }}
     >
-      Unsaved changes
+      {label}
     </div>
   );
 }

package/src/compound/LabelsContext.tsx

@@ -0,0 +1,121 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+/**
+ * Every user-visible string in the editor's chrome. Pass any subset on
+ * `<Slidewise.Root labels={...}>` to localise; missing entries fall back
+ * to the English defaults. Use this prop together with `icons` to fully
+ * skin Slidewise for non-English deployments.
+ *
+ * Single-string entries are used both as the button's visible label AND
+ * as its `aria-label`. Where the two need to diverge (the Save button
+ * cycles through three states; the theme toggle shows different labels
+ * per theme), nested keys are provided.
+ */
+export interface SlidewiseLabels {
+  // TopBar buttons (visible text)
+  save?: { idle?: string; saving?: string; saved?: string };
+  play?: string;
+  stop?: string;
+  export?: string;
+  undo?: string;
+  redo?: string;
+  themeToggle?: { toDark?: string; toLight?: string };
+
+  // Pills + status indicators
+  smart?: string;
+  unsavedBadge?: string;
+
+  // Inputs
+  titleAriaLabel?: string;
+
+  // SlideRail (reserved for the future SlideRail compound subparts)
+  addSlide?: string;
+  duplicateSlide?: string;
+  deleteSlide?: string;
+
+  // Errors
+  fileLoadError?: (msg: string) => string;
+  fileLoading?: string;
+}
+
+/**
+ * The fully-resolved label table — every key present, no optionals. Internal
+ * components read this directly so they never have to check for undefined.
+ */
+export interface ResolvedLabels {
+  save: { idle: string; saving: string; saved: string };
+  play: string;
+  stop: string;
+  export: string;
+  undo: string;
+  redo: string;
+  themeToggle: { toDark: string; toLight: string };
+  smart: string;
+  unsavedBadge: string;
+  titleAriaLabel: string;
+  addSlide: string;
+  duplicateSlide: string;
+  deleteSlide: string;
+  fileLoadError: (msg: string) => string;
+  fileLoading: string;
+}
+
+export const DEFAULT_LABELS: ResolvedLabels = {
+  save: { idle: "Save", saving: "Saving…", saved: "Saved" },
+  play: "Play",
+  stop: "Stop",
+  export: "Export",
+  undo: "Undo",
+  redo: "Redo",
+  themeToggle: { toDark: "Dark mode", toLight: "Light mode" },
+  smart: "Smart",
+  unsavedBadge: "Unsaved changes",
+  titleAriaLabel: "Deck title",
+  addSlide: "Add slide",
+  duplicateSlide: "Duplicate slide",
+  deleteSlide: "Delete slide",
+  fileLoadError: (msg) => `Could not open file: ${msg}`,
+  fileLoading: "Loading…",
+};
+
+function mergeLabels(
+  overrides: SlidewiseLabels | undefined
+): ResolvedLabels {
+  if (!overrides) return DEFAULT_LABELS;
+  return {
+    save: { ...DEFAULT_LABELS.save, ...overrides.save },
+    play: overrides.play ?? DEFAULT_LABELS.play,
+    stop: overrides.stop ?? DEFAULT_LABELS.stop,
+    export: overrides.export ?? DEFAULT_LABELS.export,
+    undo: overrides.undo ?? DEFAULT_LABELS.undo,
+    redo: overrides.redo ?? DEFAULT_LABELS.redo,
+    themeToggle: { ...DEFAULT_LABELS.themeToggle, ...overrides.themeToggle },
+    smart: overrides.smart ?? DEFAULT_LABELS.smart,
+    unsavedBadge: overrides.unsavedBadge ?? DEFAULT_LABELS.unsavedBadge,
+    titleAriaLabel: overrides.titleAriaLabel ?? DEFAULT_LABELS.titleAriaLabel,
+    addSlide: overrides.addSlide ?? DEFAULT_LABELS.addSlide,
+    duplicateSlide: overrides.duplicateSlide ?? DEFAULT_LABELS.duplicateSlide,
+    deleteSlide: overrides.deleteSlide ?? DEFAULT_LABELS.deleteSlide,
+    fileLoadError: overrides.fileLoadError ?? DEFAULT_LABELS.fileLoadError,
+    fileLoading: overrides.fileLoading ?? DEFAULT_LABELS.fileLoading,
+  };
+}
+
+const LabelsContext = createContext<ResolvedLabels>(DEFAULT_LABELS);
+
+export function LabelsProvider({
+  labels,
+  children,
+}: {
+  labels: SlidewiseLabels | undefined;
+  children: ReactNode;
+}) {
+  const resolved = useMemo(() => mergeLabels(labels), [labels]);
+  return (
+    <LabelsContext.Provider value={resolved}>{children}</LabelsContext.Provider>
+  );
+}
+
+export function useLabels(): ResolvedLabels {
+  return useContext(LabelsContext);
+}

package/src/compound/SlidewiseRoot.tsx

@@ -18,10 +18,17 @@ 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";
 import { DirtyProvider } from "./DirtyContext";
+import { LabelsProvider, type SlidewiseLabels } from "./LabelsContext";
+import {
+  SurfacesProvider,
+  surfacesToCssVars,
+  type SlidewiseSurfaces,
+} from "./SurfacesContext";
 
 export interface SlidewiseRootProps {
   /**
@@ -66,12 +73,51 @@ 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
    * the bundled lucide icons.
    */
   icons?: SlidewiseIcons;
+  /**
+   * User-visible string overrides for i18n. Pass any subset; missing
+   * entries fall back to English defaults. Pairs with `icons` for full
+   * locale customization.
+   */
+  labels?: SlidewiseLabels;
+  /**
+   * Per-surface background overrides. Equivalent to setting the
+   * `--slidewise-bg-*` CSS variables on the root, but as a typed prop so
+   * hosts can drive theming from JS without writing CSS:
+   *
+   * ```tsx
+   * <Slidewise.Root surfaces={{ app: "#0b0d10", rail: "#1c1c22" }}>
+   * ```
+   */
+  surfaces?: SlidewiseSurfaces;
   /** Extra class names appended to the root. */
   className?: string;
   /** Inline style applied to the root. */
@@ -190,7 +236,11 @@ function RootInner({
   theme,
   initialSlideId,
   fontFamily,
+  reduceMotion = "system",
+  transition,
   icons,
+  labels,
+  surfaces,
   className,
   style,
   children,
@@ -429,22 +479,58 @@ function RootInner({
       }
     : undefined;
 
+  // Merge host's `style` prop with the surface overrides so a host can
+  // pass both without one clobbering the other. Surfaces win on conflict
+  // because they're the more specific theming intent.
+  const surfaceVars = surfacesToCssVars(surfaces);
+  const mergedStyle: CSSProperties | undefined = surfaceVars
+    ? { ...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 ?? {}}>
-        <DirtyProvider dirty={dirty}>
-          <HostProvider callbacks={{ onSave: wrappedSave, onExport }}>
-            <RootShell
-              fontFamily={fontFamily}
-              className={className}
-              style={style}
-            >
-              {children}
-            </RootShell>
-          </HostProvider>
-        </DirtyProvider>
-      </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>
   );
 }