@kywk/open-slide-core 2.3.2 → 2.3.3

package/dist/{config-CDrYgaEj.d.ts → config-DJ8ZOe7C.d.ts}

@@ -1,4 +1,4 @@
-import { t as Locale } from "./types-DFK02XVv.js";
+import { t as Locale } from "./types-tdaXSyah.js";
 //#region src/config.d.ts
 type OpenSlideBuildConfig = {
   showSlideBrowser?: boolean;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { n as Plural, t as Locale } from "./types-DFK02XVv.js";
-import { n as OpenSlideConfig, t as OpenSlideAgentConfig } from "./config-CDrYgaEj.js";
+import { n as Plural, t as Locale } from "./types-tdaXSyah.js";
+import { n as OpenSlideConfig, t as OpenSlideAgentConfig } from "./config-DJ8ZOe7C.js";
 import { CSSProperties, ComponentType, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
 //#region src/app/components/image-placeholder.d.ts
 type ImagePlaceholderProps = {

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as en, i as es, n as zhCN, r as ja, t as zhTW } from "./zh-tw-B1pkKQsc.js";
+import { a as en, i as es, n as zhCN, r as ja, t as zhTW } from "./zh-tw-DXcqQTrA.js";
 import { n as defaultDesign, r as designToCssVars, t as cssVarsToString } from "./design-CoZ0cWDN.js";
 import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { toast } from "sonner";

package/dist/locale/index.d.ts

@@ -1,4 +1,4 @@
-import { n as Plural, t as Locale } from "../types-DFK02XVv.js";
+import { n as Plural, t as Locale } from "../types-tdaXSyah.js";
 //#region src/locale/en.d.ts
 declare const en: Locale;
 //#endregion

package/dist/locale/index.js

@@ -1,4 +1,4 @@
-import { a as en, i as es, n as zhCN, r as ja, t as zhTW } from "../zh-tw-B1pkKQsc.js";
+import { a as en, i as es, n as zhCN, r as ja, t as zhTW } from "../zh-tw-DXcqQTrA.js";
 //#region src/locale/format.ts
 function format(template, vars) {
 	return template.replace(/\{(\w+)\}/g, (m, key) => {

package/dist/{types-DFK02XVv.d.ts → types-tdaXSyah.d.ts}

@@ -181,6 +181,7 @@ type Locale = {
     helpAria: string;
     exitAria: string;
     elapsedTime: string;
+    lastSlideHint: string;
     helpEyebrow: string;
     helpTitle: string;
     shortcutNext: string;

package/dist/vite/index.d.ts

@@ -1,4 +1,4 @@
-import { n as OpenSlideConfig } from "../config-CDrYgaEj.js";
+import { n as OpenSlideConfig } from "../config-DJ8ZOe7C.js";
 import { InlineConfig } from "vite";
 //#region src/vite/config.d.ts
 type CreateViteConfigOptions = {

package/dist/{zh-tw-B1pkKQsc.js → zh-tw-DXcqQTrA.js}

@@ -168,6 +168,7 @@ const en = {
 		helpAria: "Keyboard shortcuts (?)",
 		exitAria: "Exit (Esc)",
 		elapsedTime: "Elapsed time",
+		lastSlideHint: "Last slide · Press Esc to exit",
 		helpEyebrow: "Present mode",
 		helpTitle: "Keyboard shortcuts",
 		shortcutNext: "Next slide",
@@ -796,6 +797,7 @@ const es = {
 		helpAria: "Atajos de teclado (?)",
 		exitAria: "Salir (Esc)",
 		elapsedTime: "Tiempo transcurrido",
+		lastSlideHint: "Última diapositiva · Pulsa Esc para salir",
 		helpEyebrow: "Modo presentación",
 		helpTitle: "Atajos de teclado",
 		shortcutNext: "Diapositiva siguiente",
@@ -1424,6 +1426,7 @@ const ja = {
 		helpAria: "キーボードショートカット (?)",
 		exitAria: "終了 (Esc)",
 		elapsedTime: "経過時間",
+		lastSlideHint: "最後のスライドです · Esc で終了",
 		helpEyebrow: "発表モード",
 		helpTitle: "キーボードショートカット",
 		shortcutNext: "次のスライド",
@@ -2052,6 +2055,7 @@ const zhCN = {
 		helpAria: "键盘快捷键 (?)",
 		exitAria: "退出 (Esc)",
 		elapsedTime: "已用时",
+		lastSlideHint: "已是最后一页 · 按 Esc 退出放映",
 		helpEyebrow: "演示模式",
 		helpTitle: "键盘快捷键",
 		shortcutNext: "下一张",
@@ -2680,6 +2684,7 @@ const zhTW = {
 		helpAria: "鍵盤快速鍵 (?)",
 		exitAria: "離開 (Esc)",
 		elapsedTime: "已耗時",
+		lastSlideHint: "已是最後一頁 · 按 Esc 結束播放",
 		helpEyebrow: "簡報模式",
 		helpTitle: "鍵盤快速鍵",
 		shortcutNext: "下一張",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kywk/open-slide-core",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {
@@ -106,7 +106,7 @@
   },
   "devDependencies": {
     "@playwright/test": "~1.63.0",
-    "@types/node": "^26.6.2",
+    "@types/node": "^26.6.6",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.5",
     "tsdown": "^0.22.14",

package/src/app/components/player.tsx

@@ -12,9 +12,16 @@ import { usePrefersReducedMotion } from '../lib/use-prefers-reduced-motion';
 import { OverviewGrid } from './overview-grid';
 import { PresentBlackoutOverlay } from './present/blackout-overlay';
 import { PresentControlBar } from './present/control-bar';
+import {
+  afterPaint,
+  CURTAIN_FADE_MS,
+  PresentCurtain,
+  whenFullscreenSettled,
+} from './present/curtain';
 import { PresentHelpOverlay } from './present/help-overlay';
 import { PresentJumpInput } from './present/jump-input';
 import { PresentLaserPointer } from './present/laser-pointer';
+import { PresentLastSlideHint } from './present/last-slide-hint';
 import { PresentProgressBar } from './present/progress-bar';
 import { useIdle } from './present/use-idle';
 import { usePointerNearBottom } from './present/use-pointer-near-bottom';
@@ -48,6 +55,8 @@ type Props = {
    * without entering fullscreen. Defaults to true for back-compat.
    */
   fullscreen?: boolean;
+  /** Fade in from black on mount and fade to black before calling `onExit`. */
+  curtain?: boolean;
 };
 
 export function Player({
@@ -62,9 +71,13 @@ export function Player({
   slideId,
   onSwitchSlide,
   fullscreen = true,
+  curtain = false,
 }: Props) {
   const isMobile = useIsMobile();
   const prefersReducedMotion = usePrefersReducedMotion();
+  const fade = curtain && !prefersReducedMotion;
+  const [curtainOpaque, setCurtainOpaque] = useState(fade);
+  const exitingRef = useRef(false);
   const rootRef = useRef<HTMLDivElement | null>(null);
   // Mirrored as state so descendants portaling *into* the player subtree
   // (tooltips, popovers — the body is outside the fullscreen tree) re-render
@@ -93,6 +106,28 @@ export function Player({
   const canPrev = index > 0;
   const canNext = index < pages.length - 1;
 
+  // Stepping past either end nudges the slide like a rubber band so the
+  // press visibly registered; past the last slide a hint says how to leave.
+  const nudgeRef = useRef<HTMLDivElement | null>(null);
+  const [lastSlideHintAt, setLastSlideHintAt] = useState(0);
+  const bumpEdge = useCallback(
+    (direction: 'start' | 'end') => {
+      if (!controls) return;
+      if (direction === 'end') setLastSlideHintAt(Date.now());
+      if (prefersReducedMotion) return;
+      const offset = direction === 'end' ? -14 : 14;
+      nudgeRef.current?.animate(
+        [
+          { transform: 'translateX(0)' },
+          { transform: `translateX(${offset}px)`, offset: 0.3 },
+          { transform: 'translateX(0)' },
+        ],
+        { duration: 360, easing: 'cubic-bezier(0.2, 0.8, 0.3, 1)' },
+      );
+    },
+    [controls, prefersReducedMotion],
+  );
+
   const stepControllerRef = useRef<StepController | null>(null);
   const [entryDirection, setEntryDirection] = useState<EntryDirection>('jump');
   const [stepAggregate, setStepAggregate] = useState<StepAggregate>({
@@ -116,14 +151,34 @@ export function Player({
     [index, onIndexChange],
   );
 
+  const exitTimerRef = useRef<number | null>(null);
+  useEffect(
+    () => () => {
+      if (exitTimerRef.current !== null) window.clearTimeout(exitTimerRef.current);
+    },
+    [],
+  );
+  const requestExit = useCallback(() => {
+    if (!fade) {
+      onExit();
+      return;
+    }
+    if (exitingRef.current) return;
+    exitingRef.current = true;
+    setCurtainOpaque(true);
+    exitTimerRef.current = window.setTimeout(onExit, CURTAIN_FADE_MS);
+  }, [fade, onExit]);
+
   const goPrev = useCallback(() => {
     if (stepControllerRef.current?.retreat()) return;
     if (index > 0) handleIndexChange(index - 1);
-  }, [index, handleIndexChange]);
+    else bumpEdge('start');
+  }, [index, handleIndexChange, bumpEdge]);
   const goNext = useCallback(() => {
     if (stepControllerRef.current?.advance()) return;
     if (index < pages.length - 1) handleIndexChange(index + 1);
-  }, [index, pages.length, handleIndexChange]);
+    else bumpEdge('end');
+  }, [index, pages.length, handleIndexChange, bumpEdge]);
 
   const overlayActive = controls && (overviewOpen || helpOpen);
   const overlayActiveRef = useRef(overlayActive);
@@ -178,8 +233,8 @@ export function Player({
   useClickPageNavigation({
     ref: rootRef,
     enabled: !overlayActive,
-    canPrev,
-    canNext,
+    canPrev: canPrev || controls,
+    canNext: canNext || controls,
     onPrev: goPrev,
     onNext: goNext,
     onViewportClick: controls && isMobile ? handleMobileViewportClick : undefined,
@@ -216,11 +271,33 @@ export function Player({
   useEffect(() => {
     if (!allowExit) return;
     const onFsChange = () => {
-      if (!document.fullscreenElement && !windowedRef.current) onExit();
+      if (!document.fullscreenElement && !windowedRef.current) requestExit();
     };
     document.addEventListener('fullscreenchange', onFsChange);
     return () => document.removeEventListener('fullscreenchange', onFsChange);
-  }, [onExit, allowExit]);
+  }, [requestExit, allowExit]);
+
+  // Wait out the browser's own fullscreen animation before revealing the
+  // first slide, otherwise the fade plays while the screen is still resizing.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: runs once on mount
+  useEffect(() => {
+    if (!fade) return;
+    let cancelPaint = () => {};
+    const reveal = () => {
+      cancelPaint = afterPaint(() => {
+        if (!exitingRef.current) setCurtainOpaque(false);
+      });
+    };
+    if (!fullscreen || document.fullscreenElement) {
+      reveal();
+      return () => cancelPaint();
+    }
+    const cancelWait = whenFullscreenSettled(reveal);
+    return () => {
+      cancelWait();
+      cancelPaint();
+    };
+  }, []);
 
   const toggleFullscreen = useCallback(() => {
     setWindowed((w) => !w);
@@ -296,7 +373,7 @@ export function Player({
           setBlackout(null);
           return;
         }
-        if (allowExit) onExit();
+        if (allowExit) requestExit();
         return;
       }
 
@@ -364,7 +441,7 @@ export function Player({
     helpOpen,
     blackout,
     allowExit,
-    onExit,
+    requestExit,
     goNext,
     goPrev,
     handleIndexChange,
@@ -403,26 +480,29 @@ export function Player({
         controls && (hideCursor ? 'cursor-none' : 'cursor-default'),
       )}
     >
-      <SlideCanvas flat design={design}>
-        {/* Keyed per deck so a presenter-driven deck switch cuts instead of
+      <div ref={nudgeRef} className="h-full w-full">
+        <SlideCanvas flat design={design}>
+          {/* Keyed per deck so a presenter-driven deck switch cuts instead of
             animating a transition between two unrelated decks. */}
-        <SlideTransitionLayer
-          key={slideId}
-          pages={pages}
-          index={index}
-          total={pages.length}
-          moduleTransition={transition}
-          disabled={prefersReducedMotion}
-          stepControllerRef={stepControllerRef}
-          entryDirection={entryDirection}
-          onStepAggregateChange={handleAggregateChange}
-        />
-      </SlideCanvas>
+          <SlideTransitionLayer
+            key={slideId}
+            pages={pages}
+            index={index}
+            total={pages.length}
+            moduleTransition={transition}
+            disabled={prefersReducedMotion}
+            stepControllerRef={stepControllerRef}
+            entryDirection={entryDirection}
+            onStepAggregateChange={handleAggregateChange}
+          />
+        </SlideCanvas>
+      </div>
 
       {controls && (
         <div data-osd-chrome style={{ display: 'contents' }}>
           <PresentProgressBar index={index} total={pages.length} visible={chromeVisible} />
           <PresentBlackoutOverlay mode={blackout} />
+          <PresentLastSlideHint shownAt={lastSlideHintAt} />
           <PresentJumpInput pageCount={pages.length} onJump={handleIndexChange} />
           <PresentLaserPointer enabled={laser} />
           <PresentControlBar
@@ -444,7 +524,7 @@ export function Player({
             onPresenter={() => slideId && openPresenterWindow(slideId)}
             onToggleFullscreen={toggleFullscreen}
             onHelp={() => setHelpOpen(true)}
-            onExit={onExit}
+            onExit={requestExit}
           />
           <OverviewGrid
             pages={pages}
@@ -460,6 +540,8 @@ export function Player({
           <PresentHelpOverlay open={helpOpen} onOpenChange={setHelpOpen} container={rootEl} />
         </div>
       )}
+
+      {fade && <PresentCurtain opaque={curtainOpaque} className="absolute z-[100]" />}
     </div>
   );
 }

package/src/app/components/present/curtain.tsx

@@ -0,0 +1,52 @@
+import { cn } from '@/lib/utils';
+
+export const CURTAIN_FADE_MS = 400;
+
+type Props = {
+  opaque: boolean;
+  className?: string;
+};
+
+export function PresentCurtain({ opaque, className }: Props) {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'pointer-events-none inset-0 bg-black transition-opacity ease-in-out',
+        opaque ? 'opacity-100' : 'opacity-0',
+        className,
+      )}
+      style={{ transitionDuration: `${CURTAIN_FADE_MS}ms` }}
+    />
+  );
+}
+
+// Two frames so the opaque state is painted before the fade starts;
+// a single rAF can land in the same style recalc and skip the transition.
+export function afterPaint(cb: () => void): () => void {
+  let inner = 0;
+  const outer = requestAnimationFrame(() => {
+    inner = requestAnimationFrame(cb);
+  });
+  return () => {
+    cancelAnimationFrame(outer);
+    cancelAnimationFrame(inner);
+  };
+}
+
+export function whenFullscreenSettled(cb: () => void, maxWaitMs = 800): () => void {
+  let fired = false;
+  const timer = window.setTimeout(done, maxWaitMs);
+  document.addEventListener('fullscreenchange', done);
+  function done() {
+    if (fired) return;
+    fired = true;
+    cleanup();
+    cb();
+  }
+  function cleanup() {
+    window.clearTimeout(timer);
+    document.removeEventListener('fullscreenchange', done);
+  }
+  return cleanup;
+}

package/src/app/components/present/last-slide-hint.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import { usePanelMount } from '@/components/panel/panel-shell';
+import { useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+
+const VISIBLE_MS = 1800;
+
+type Props = {
+  shownAt: number;
+};
+
+export function PresentLastSlideHint({ shownAt }: Props) {
+  const t = useLocale();
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (!shownAt) return;
+    setOpen(true);
+    const id = window.setTimeout(() => setOpen(false), VISIBLE_MS);
+    return () => window.clearTimeout(id);
+  }, [shownAt]);
+  const { mounted, animVisible } = usePanelMount(open);
+  if (!mounted) return null;
+  return (
+    <div
+      role="status"
+      className={cn(
+        'pointer-events-none absolute bottom-10 left-1/2 z-30 -translate-x-1/2 rounded-full bg-black/70 px-3.5 py-1.5 text-[12px] text-white/85 shadow-lg backdrop-blur-md motion-safe:transition-[opacity,translate]',
+        animVisible
+          ? 'opacity-100 motion-safe:duration-200'
+          : 'translate-y-1 opacity-0 motion-safe:duration-200',
+      )}
+    >
+      {t.present.lastSlideHint}
+    </div>
+  );
+}

package/src/app/components/slide-canvas.tsx

@@ -51,7 +51,7 @@ export function SlideCanvas({
     <div ref={containerRef} className={cn('relative h-full w-full', flat && 'overflow-hidden')}>
       <div
         className={cn(
-          'overflow-hidden bg-white text-black',
+          'overflow-hidden bg-white text-start text-black',
           !flat && 'rounded-[6px] shadow-floating',
         )}
         style={

package/src/app/components/thumbnail-rail.tsx

@@ -568,7 +568,7 @@ function HorizontalVirtualThumbList({
         aria-label={format(t.thumbnailRail.goToPageAria, { n: i + 1 })}
         aria-current={active ? 'page' : undefined}
         className={cn(
-          'group/thumb relative flex shrink-0 flex-col items-center gap-1.5 rounded-[6px] outline-none motion-safe:transition-[scale] motion-safe:duration-100 active:scale-[0.985]',
+          'group/thumb relative flex shrink-0 flex-col items-center gap-1.5 rounded-[6px] text-left outline-none motion-safe:transition-[scale] motion-safe:duration-100 active:scale-[0.985]',
           'focus-visible:ring-1 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-sidebar',
         )}
       >

package/src/app/routes/home.tsx

@@ -323,10 +323,12 @@ function SortControl({ value, onChange }: { value: SortKey; onChange: (next: Sor
   );
 }
 
+// Offered even before an agent is connected: the new deck opens the agent
+// panel, which walks first-time users through installing one.
 function useCreateDeckWithAgent() {
-  const { provider } = useAgentStatus();
+  const { enabled, provider } = useAgentStatus();
   const start = useCreateDeck();
-  if (!provider) return null;
+  if (!enabled) return null;
   return { provider, start };
 }
 
@@ -339,7 +341,11 @@ function NewDeckButton() {
       size="sm"
       className="h-8 shrink-0"
       onClick={agent.start}
-      title={format(t.agent.createDeckWith, { provider: agent.provider.name })}
+      title={
+        agent.provider
+          ? format(t.agent.createDeckWith, { provider: agent.provider.name })
+          : t.agent.createDeck
+      }
     >
       <Plus />
       {t.agent.createDeck}
@@ -404,8 +410,10 @@ function EmptyState({ isDraft, folderName }: { isDraft: boolean; folderName?: st
             </p>
             {agent ? (
               <Button size="sm" className="mt-4" onClick={agent.start}>
-                <ProviderLogo provider={agent.provider.id} />
-                {format(t.agent.createDeckWith, { provider: agent.provider.name })}
+                {agent.provider ? <ProviderLogo provider={agent.provider.id} /> : <Plus />}
+                {agent.provider
+                  ? format(t.agent.createDeckWith, { provider: agent.provider.name })
+                  : t.agent.createDeck}
               </Button>
             ) : (
               <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">

package/src/app/routes/slide.tsx

@@ -87,6 +87,12 @@ import { PdfProgressToast, PptxProgressToast } from '../components/export-progre
 import { NotesDrawer } from '../components/notes-drawer';
 import { OverviewGrid } from '../components/overview-grid';
 import { openPresenterWindow, Player } from '../components/player';
+import {
+  afterPaint,
+  CURTAIN_FADE_MS,
+  PresentCurtain,
+  whenFullscreenSettled,
+} from '../components/present/curtain';
 import { SlideCanvas } from '../components/slide-canvas';
 import { isDeckWarmed, markDeckWarmed, SlidePreloadLayer } from '../components/slide-preload-layer';
 import { SlideTransitionLayer } from '../components/slide-transition-layer';
@@ -166,6 +172,55 @@ export function Slide() {
   const narrowToolbar = useMediaQuery('(max-width: 639.98px)');
   const prefersReducedMotion = usePrefersReducedMotion();
 
+  // 'entering' darkens the editor before the Player mounts; 'leaving' keeps
+  // the editor dark after the Player unmounts, then fades it back in.
+  const [curtain, setCurtain] = useState<'entering' | 'leaving' | null>(null);
+  const curtainTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(
+    () => () => {
+      if (curtainTimerRef.current) clearTimeout(curtainTimerRef.current);
+    },
+    [],
+  );
+  const present = useCallback(
+    (mode: 'window' | 'fullscreen') => {
+      if (prefersReducedMotion) {
+        setPlayMode(mode);
+        return;
+      }
+      if (curtainTimerRef.current) return;
+      setCurtain('entering');
+      // Fullscreen is requested when the Player mounts; the delay stays well
+      // inside the browser's transient user-activation window.
+      curtainTimerRef.current = setTimeout(() => {
+        curtainTimerRef.current = null;
+        setCurtain(null);
+        setPlayMode(mode);
+      }, CURTAIN_FADE_MS);
+    },
+    [prefersReducedMotion],
+  );
+  const exitPresent = useCallback(() => {
+    setPlayMode(null);
+    if (!prefersReducedMotion) setCurtain('leaving');
+  }, [prefersReducedMotion]);
+  useEffect(() => {
+    if (curtain !== 'leaving' || playMode) return;
+    let cancelPaint = () => {};
+    const reveal = () => {
+      cancelPaint = afterPaint(() => setCurtain(null));
+    };
+    if (!document.fullscreenElement) {
+      reveal();
+      return () => cancelPaint();
+    }
+    const cancelWait = whenFullscreenSettled(reveal);
+    return () => {
+      cancelWait();
+      cancelPaint();
+    };
+  }, [curtain, playMode]);
+
   const modulePages = useMemo(() => slide?.default ?? [], [slide]);
   const [pages, setPages] = useState<typeof modulePages>(modulePages);
   useEffect(() => {
@@ -335,7 +390,7 @@ export function Slide() {
     // When showSlideUi is false the read-only <Player> is rendered and owns
     // keyboard navigation (including step-aware advance/retreat). Attaching this
     // page-nav handler too would race it and skip <Steps> reveals, so bail out.
-    if (playMode || !showSlideUi) return;
+    if (playMode || curtain || !showSlideUi) return;
     const onKey = (e: KeyboardEvent) => {
       if (
         isTypingTarget(e.target) ||
@@ -368,12 +423,12 @@ export function Slide() {
         return;
       }
       if (e.key === 'f' || e.key === 'F') {
-        setPlayMode('fullscreen');
+        present('fullscreen');
       } else if (e.key === 'Enter') {
-        setPlayMode('window');
+        present('window');
       } else if (e.key === 'p' || e.key === 'P') {
         if (slideId) openPresenterWindow(slideId);
-        setPlayMode('window');
+        present('window');
       } else if (import.meta.env.DEV && (e.key === 'd' || e.key === 'D')) {
         setDesignOpen((v) => !v);
       } else if (import.meta.env.DEV && (e.key === 'a' || e.key === 'A')) {
@@ -382,7 +437,7 @@ export function Slide() {
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [index, goTo, playMode, slideId, overviewOpen, toggleAgent]);
+  }, [index, goTo, playMode, curtain, slideId, overviewOpen, toggleAgent, present]);
 
   if (error) {
     return (
@@ -423,8 +478,9 @@ export function Slide() {
           transition={presented.slide.transition}
           index={presented.index}
           onIndexChange={presentReady ? goTo : noop}
-          onExit={() => setPlayMode(null)}
+          onExit={exitPresent}
           controls
+          curtain={!prefersReducedMotion}
           slideId={presented.slideId}
           onSwitchSlide={switchPresentedSlide}
           fullscreen={playMode === 'fullscreen'}
@@ -801,7 +857,7 @@ export function Slide() {
                     size="sm"
                     variant="brand"
                     aria-label={t.slide.present}
-                    onClick={() => setPlayMode(isMobile ? 'window' : 'fullscreen')}
+                    onClick={() => present(isMobile ? 'window' : 'fullscreen')}
                     className="rounded-r-none px-2.5 lg:px-3"
                   >
                     <Play className="size-3.5 fill-current" />
@@ -821,12 +877,12 @@ export function Slide() {
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="end" className="min-w-[200px]">
                       <DropdownMenuGroup>
-                        <DropdownMenuItem onClick={() => setPlayMode('window')}>
+                        <DropdownMenuItem onClick={() => present('window')}>
                           <Play />
                           {t.slide.presentInWindow}
                           <DropdownMenuShortcut>↵</DropdownMenuShortcut>
                         </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => setPlayMode('fullscreen')}>
+                        <DropdownMenuItem onClick={() => present('fullscreen')}>
                           <Maximize />
                           {t.slide.presentFullscreen}
                           <DropdownMenuShortcut>F</DropdownMenuShortcut>
@@ -834,7 +890,7 @@ export function Slide() {
                         <DropdownMenuItem
                           onClick={() => {
                             if (slideId) openPresenterWindow(slideId);
-                            setPlayMode('window');
+                            present('window');
                           }}
                         >
                           <MonitorSpeaker />
@@ -957,11 +1013,11 @@ export function Slide() {
               currentIndex={index}
               exporting={exporting}
               handlers={{
-                onPresentWindow: () => setPlayMode('window'),
-                onPresentFullscreen: () => setPlayMode('fullscreen'),
+                onPresentWindow: () => present('window'),
+                onPresentFullscreen: () => present('fullscreen'),
                 onPresenterView: () => {
                   if (slideId) openPresenterWindow(slideId);
-                  setPlayMode('window');
+                  present('window');
                 },
                 onCopyLink: copyLink,
                 onOverview: () => setOverviewOpen(true),
@@ -976,6 +1032,7 @@ export function Slide() {
             />
           )}
         </div>
+        <PresentCurtain opaque={curtain !== null} className="fixed z-[1000]" />
       </InspectorProvider>
     </HistoryProvider>
   );

package/src/locale/en.ts

@@ -178,6 +178,7 @@ export const en: Locale = {
     helpAria: 'Keyboard shortcuts (?)',
     exitAria: 'Exit (Esc)',
     elapsedTime: 'Elapsed time',
+    lastSlideHint: 'Last slide · Press Esc to exit',
     helpEyebrow: 'Present mode',
     helpTitle: 'Keyboard shortcuts',
     shortcutNext: 'Next slide',

package/src/locale/es.ts

@@ -180,6 +180,7 @@ export const es: Locale = {
     helpAria: 'Atajos de teclado (?)',
     exitAria: 'Salir (Esc)',
     elapsedTime: 'Tiempo transcurrido',
+    lastSlideHint: 'Última diapositiva · Pulsa Esc para salir',
     helpEyebrow: 'Modo presentación',
     helpTitle: 'Atajos de teclado',
     shortcutNext: 'Diapositiva siguiente',

package/src/locale/ja.ts

@@ -178,6 +178,7 @@ export const ja: Locale = {
     helpAria: 'キーボードショートカット (?)',
     exitAria: '終了 (Esc)',
     elapsedTime: '経過時間',
+    lastSlideHint: '最後のスライドです · Esc で終了',
     helpEyebrow: '発表モード',
     helpTitle: 'キーボードショートカット',
     shortcutNext: '次のスライド',

package/src/locale/types.ts

@@ -182,6 +182,7 @@ export type Locale = {
     helpAria: string;
     exitAria: string;
     elapsedTime: string;
+    lastSlideHint: string;
     helpEyebrow: string;
     helpTitle: string;
     shortcutNext: string;

package/src/locale/zh-cn.ts

@@ -177,6 +177,7 @@ export const zhCN: Locale = {
     helpAria: '键盘快捷键 (?)',
     exitAria: '退出 (Esc)',
     elapsedTime: '已用时',
+    lastSlideHint: '已是最后一页 · 按 Esc 退出放映',
     helpEyebrow: '演示模式',
     helpTitle: '键盘快捷键',
     shortcutNext: '下一张',

package/src/locale/zh-tw.ts

@@ -177,6 +177,7 @@ export const zhTW: Locale = {
     helpAria: '鍵盤快速鍵 (?)',
     exitAria: '離開 (Esc)',
     elapsedTime: '已耗時',
+    lastSlideHint: '已是最後一頁 · 按 Esc 結束播放',
     helpEyebrow: '簡報模式',
     helpTitle: '鍵盤快速鍵',
     shortcutNext: '下一張',