@open-slide/core 1.6.0 → 1.7.0

package/src/app/components/slide-transition-layer.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useRef, useState } from 'react';
+import { SlidePageProvider } from '../lib/page-context';
+import type { Page } from '../lib/sdk';
+import { resolveTransition, type SlideTransition, type TransitionPhase } from '../lib/transition';
+
+type Props = {
+  pages: Page[];
+  index: number;
+  total: number;
+  moduleTransition?: SlideTransition;
+  disabled?: boolean;
+};
+
+type Direction = 'forward' | 'backward';
+
+const DEFAULT_EASING = 'cubic-bezier(.4, 0, .2, 1)';
+
+function runPhase(
+  el: HTMLElement,
+  phase: TransitionPhase | undefined,
+  fallbackDuration: number,
+  fallbackEasing: string,
+): Animation | null {
+  if (!phase) return null;
+  return el.animate(phase.keyframes, {
+    duration: phase.duration ?? fallbackDuration,
+    easing: phase.easing ?? fallbackEasing,
+    delay: phase.delay ?? 0,
+    fill: 'both',
+  });
+}
+
+export function SlideTransitionLayer({ pages, index, total, moduleTransition, disabled }: Props) {
+  const [current, setCurrent] = useState(index);
+  const [outgoing, setOutgoing] = useState<number | null>(null);
+  const [direction, setDirection] = useState<Direction>('forward');
+
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const outgoingLayerRef = useRef<HTMLDivElement | null>(null);
+  const incomingLayerRef = useRef<HTMLDivElement | null>(null);
+  const animsRef = useRef<Animation[]>([]);
+  const currentRef = useRef(current);
+  currentRef.current = current;
+
+  useEffect(() => {
+    if (index === currentRef.current) return;
+
+    const prev = currentRef.current;
+    const next = index;
+
+    // Interrupt: cancel in-flight animations. The previously-incoming page
+    // (currentRef) becomes the new outgoing; React reuses its DOM slot.
+    for (const a of animsRef.current) {
+      try {
+        a.cancel();
+      } catch {}
+    }
+    animsRef.current = [];
+
+    const transition = resolveTransition(pages, next, moduleTransition);
+    if (disabled || !transition) {
+      setCurrent(next);
+      setOutgoing(null);
+      return;
+    }
+
+    setDirection(next > prev ? 'forward' : 'backward');
+    setOutgoing(prev);
+    setCurrent(next);
+  }, [index, pages, moduleTransition, disabled]);
+
+  useEffect(() => {
+    if (outgoing === null) return;
+
+    const transition = resolveTransition(pages, current, moduleTransition);
+    const wrapper = wrapperRef.current;
+    const out = outgoingLayerRef.current;
+    const inc = incomingLayerRef.current;
+    if (!transition || !wrapper || !out || !inc) {
+      setOutgoing(null);
+      return;
+    }
+
+    wrapper.dataset.osdDir = direction;
+    wrapper.style.setProperty('--osd-dir', direction === 'forward' ? '1' : '-1');
+
+    const easing = transition.easing ?? DEFAULT_EASING;
+    const duration = transition.duration;
+
+    const anims: Animation[] = [];
+    const exitAnim = runPhase(out, transition.exit, duration, easing);
+    const enterAnim = runPhase(inc, transition.enter, duration, easing);
+    if (exitAnim) anims.push(exitAnim);
+    if (enterAnim) anims.push(enterAnim);
+    animsRef.current = anims;
+
+    if (anims.length === 0) {
+      setOutgoing(null);
+      return;
+    }
+
+    let cancelled = false;
+    Promise.all(anims.map((a) => a.finished))
+      .then(() => {
+        if (cancelled) return;
+        animsRef.current = [];
+        setOutgoing(null);
+      })
+      .catch(() => {
+        // AbortError fires when we cancel mid-flight on an interrupt.
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [outgoing, current, direction, pages, moduleTransition]);
+
+  useEffect(() => {
+    return () => {
+      for (const a of animsRef.current) {
+        try {
+          a.cancel();
+        } catch {}
+      }
+      animsRef.current = [];
+    };
+  }, []);
+
+  const CurrentPage = pages[current];
+  const OutgoingPage = outgoing !== null ? pages[outgoing] : null;
+
+  return (
+    <div
+      ref={wrapperRef}
+      className="relative h-full w-full"
+      style={{ background: 'var(--osd-bg)' }}
+    >
+      {OutgoingPage && outgoing !== null ? (
+        <div ref={outgoingLayerRef} className="absolute inset-0">
+          <SlidePageProvider index={outgoing} total={total}>
+            <OutgoingPage />
+          </SlidePageProvider>
+        </div>
+      ) : null}
+      {CurrentPage ? (
+        <div ref={incomingLayerRef} className="absolute inset-0">
+          <SlidePageProvider index={current} total={total}>
+            <CurrentPage />
+          </SlidePageProvider>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/app/components/style-panel/style-panel.tsx

@@ -211,6 +211,9 @@ export function DesignToggleButton({
     >
       <Palette className="size-3.5" />
       <span className="hidden md:inline">{t.stylePanel.designToggle}</span>
+      <kbd className="ml-1 hidden rounded-[3px] bg-foreground/10 px-1 font-mono text-[9.5px] tracking-[0.04em] md:inline">
+        D
+      </kbd>
     </Button>
   );
 }

package/src/app/lib/sdk.ts

@@ -1,7 +1,8 @@
 import type { ComponentType } from 'react';
 import type { DesignSystem } from './design.ts';
+import type { SlideTransition } from './transition.ts';
 
-export type Page = ComponentType;
+export type Page = ComponentType & { transition?: SlideTransition };
 
 export type SlideMeta = {
   title?: string;
@@ -16,6 +17,7 @@ export type SlideModule = {
   design?: DesignSystem;
   // Index-aligned with `default`.
   notes?: (string | undefined)[];
+  transition?: SlideTransition;
 };
 
 export type FolderIcon = { type: 'emoji'; value: string } | { type: 'color'; value: string };

package/src/app/lib/transition.ts

@@ -0,0 +1,23 @@
+import type { Page } from './sdk';
+
+export type TransitionPhase = {
+  keyframes: Keyframe[] | PropertyIndexedKeyframes;
+  easing?: string;
+  duration?: number;
+  delay?: number;
+};
+
+export type SlideTransition = {
+  duration: number;
+  easing?: string;
+  enter?: TransitionPhase;
+  exit?: TransitionPhase;
+};
+
+export function resolveTransition(
+  pages: Page[],
+  index: number,
+  moduleDefault?: SlideTransition,
+): SlideTransition | undefined {
+  return pages[index]?.transition ?? moduleDefault;
+}

package/src/app/lib/use-prefers-reduced-motion.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+const QUERY = '(prefers-reduced-motion: reduce)';
+
+export function usePrefersReducedMotion(): boolean {
+  const [reduce, setReduce] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(QUERY).matches;
+  });
+
+  useEffect(() => {
+    const mql = window.matchMedia(QUERY);
+    const onChange = (e: MediaQueryListEvent) => setReduce(e.matches);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return reduce;
+}

package/src/app/routes/slide.tsx

@@ -48,12 +48,13 @@ import { NotesDrawer } from '../components/notes-drawer';
 import { PdfProgressToast } from '../components/pdf-progress-toast';
 import { openPresenterWindow, Player } from '../components/player';
 import { SlideCanvas } from '../components/slide-canvas';
+import { SlideTransitionLayer } from '../components/slide-transition-layer';
 import { type ThumbnailActions, ThumbnailRail } from '../components/thumbnail-rail';
 import { exportSlideAsHtml } from '../lib/export-html';
 import { exportSlideAsPdf, isSafari } from '../lib/export-pdf';
 import { remapNotesSessionCacheAfterReorder } from '../lib/inspector/use-notes';
-import { SlidePageProvider } from '../lib/page-context';
 import type { SlideModule } from '../lib/sdk';
+import { usePrefersReducedMotion } from '../lib/use-prefers-reduced-motion';
 import { useSlideModule } from '../lib/use-slide-module';
 
 const { showSlideUi, showSlideBrowser, allowHtmlDownload } = config.build;
@@ -76,6 +77,7 @@ export function Slide() {
   const { renameSlide } = useFolders();
   const slideViewportRef = useRef<HTMLElement>(null);
   const t = useLocale();
+  const prefersReducedMotion = usePrefersReducedMotion();
 
   const modulePages = useMemo(() => slide?.default ?? [], [slide]);
   const [pages, setPages] = useState<typeof modulePages>(modulePages);
@@ -237,6 +239,8 @@ export function Slide() {
         goTo(index - 1);
       } else if (e.key === 'f' || e.key === 'F') {
         setPlayMode('fullscreen');
+      } else if (import.meta.env.DEV && (e.key === 'd' || e.key === 'D')) {
+        setDesignOpen((v) => !v);
       }
     };
     window.addEventListener('keydown', onKey);
@@ -325,6 +329,7 @@ export function Slide() {
       <Player
         pages={pages}
         design={slide.design}
+        transition={slide.transition}
         index={index}
         onIndexChange={goTo}
         onExit={() => setPlayMode(null)}
@@ -335,17 +340,16 @@ export function Slide() {
     );
   }
 
-  const CurrentPage = pages[index];
   const title = slide.meta?.title ?? slideId;
 
   return (
     <HistoryProvider>
-      <InspectorProvider slideId={slideId}>
+      <InspectorProvider slideId={slideId} pageIndex={index}>
         <SelectionReporter />
         <div className="flex h-dvh flex-col overflow-hidden bg-background text-foreground">
           {/* Editorial toolbar — three zones, hairline separators, mono-folio center */}
-          <header className="relative flex h-12 shrink-0 items-center justify-between border-b border-hairline bg-sidebar/85 px-2 backdrop-blur-md md:px-3">
-            <div className="flex items-center gap-1.5 md:gap-2">
+          <header className="flex h-12 shrink-0 items-center gap-2 border-b border-hairline bg-sidebar/85 px-2 backdrop-blur-md md:px-3">
+            <div className="flex shrink-0 items-center gap-1.5 md:gap-2">
               {showSlideBrowser && (
                 <Button asChild variant="ghost" size="icon-sm" title={t.slide.home}>
                   <Link to="/" aria-label={t.slide.backToHome}>
@@ -379,13 +383,13 @@ export function Slide() {
             </div>
 
             {/* Centered title — the rail and mobile pill carry the page count. */}
-            <div className="pointer-events-none absolute inset-x-0 top-1/2 flex -translate-y-1/2 justify-center px-2">
-              <div className="pointer-events-auto min-w-0 max-w-[min(34rem,calc(100vw-22rem))]">
+            <div className="flex min-w-0 flex-1 justify-center px-2">
+              <div className="min-w-0 max-w-[34rem]">
                 <InlineTitleEditor title={title} onSubmit={(next) => renameSlide(slideId, next)} />
               </div>
             </div>
 
-            <div className="flex items-center gap-1">
+            <div className="flex shrink-0 items-center gap-1">
               {view === 'slides' && (
                 <button
                   type="button"
@@ -585,9 +589,13 @@ export function Slide() {
                       canNext={index < pageCount - 1}
                     />
                     <SlideCanvas design={slide.design}>
-                      <SlidePageProvider index={index} total={pageCount}>
-                        <CurrentPage />
-                      </SlidePageProvider>
+                      <SlideTransitionLayer
+                        pages={pages}
+                        index={index}
+                        total={pageCount}
+                        moduleTransition={slide.transition}
+                        disabled={prefersReducedMotion}
+                      />
                     </SlideCanvas>
                     <ClickNavZones
                       onPrev={() => goTo(index - 1)}