@open-slide/core 1.5.0 → 1.7.0

package/src/app/lib/folders.ts

@@ -33,6 +33,19 @@ async function patchSlideName(slideId: string, name: string): Promise<void> {
   if (!res.ok) throw new Error(`PATCH /__slides/${slideId} ${res.status}`);
 }
 
+async function duplicateSlideReq(slideId: string, newId?: string): Promise<string> {
+  const init: RequestInit = { method: 'POST' };
+  if (newId !== undefined) {
+    init.headers = { 'content-type': 'application/json' };
+    init.body = JSON.stringify({ newId });
+  }
+  const res = await fetch(`/__slides/${slideId}/duplicate`, init);
+  if (!res.ok) throw new Error(`POST /__slides/${slideId}/duplicate ${res.status}`);
+  const body = (await res.json()) as { slideId?: unknown };
+  if (typeof body.slideId !== 'string') throw new Error('duplicate response missing slideId');
+  return body.slideId;
+}
+
 async function deleteSlideReq(slideId: string): Promise<void> {
   const res = await fetch(`/__slides/${slideId}`, { method: 'DELETE' });
   if (!res.ok) throw new Error(`DELETE /__slides/${slideId} ${res.status}`);
@@ -83,6 +96,7 @@ export type UseFoldersResult = {
   remove: (id: string) => Promise<void>;
   assign: (slideId: string, folderId: string | null) => Promise<void>;
   renameSlide: (slideId: string, name: string) => Promise<void>;
+  duplicateSlide: (slideId: string, newId?: string) => Promise<string>;
   deleteSlide: (slideId: string) => Promise<void>;
   refresh: () => Promise<void>;
 };
@@ -165,6 +179,15 @@ export function useFolders(): UseFoldersResult {
     [refresh],
   );
 
+  const duplicateSlide = useCallback(
+    async (slideId: string, newId?: string) => {
+      const duplicatedId = await duplicateSlideReq(slideId, newId);
+      await refresh();
+      return duplicatedId;
+    },
+    [refresh],
+  );
+
   const deleteSlide = useCallback(
     async (slideId: string) => {
       await deleteSlideReq(slideId);
@@ -173,5 +196,16 @@ export function useFolders(): UseFoldersResult {
     [refresh],
   );
 
-  return { manifest, loading, create, update, remove, assign, renameSlide, deleteSlide, refresh };
+  return {
+    manifest,
+    loading,
+    create,
+    update,
+    remove,
+    assign,
+    renameSlide,
+    duplicateSlide,
+    deleteSlide,
+    refresh,
+  };
 }

package/src/app/lib/page-context.tsx

@@ -0,0 +1,38 @@
+import { type Context, createContext, type PropsWithChildren, useContext, useMemo } from 'react';
+
+type SlidePageContextValue = {
+  index: number;
+  total: number;
+};
+
+// Stored on globalThis so dev (src) and published (dist) copies of this module
+// share one context instance — otherwise the provider writes to one context and
+// the hook reads from another, and `useSlidePageNumber` always sees null.
+const GLOBAL_KEY = '__open_slide_page_context__';
+type GlobalWithCtx = typeof globalThis & {
+  [GLOBAL_KEY]?: Context<SlidePageContextValue | null>;
+};
+const g = globalThis as GlobalWithCtx;
+if (!g[GLOBAL_KEY]) {
+  g[GLOBAL_KEY] = createContext<SlidePageContextValue | null>(null);
+}
+const SlidePageContext = g[GLOBAL_KEY];
+
+export function SlidePageProvider({
+  index,
+  total,
+  children,
+}: PropsWithChildren<{ index: number; total: number }>) {
+  const value = useMemo(() => ({ index, total }), [index, total]);
+  return <SlidePageContext.Provider value={value}>{children}</SlidePageContext.Provider>;
+}
+
+export function useSlidePageNumber(): { current: number; total: number } {
+  const ctx = useContext(SlidePageContext);
+  if (!ctx) {
+    throw new Error(
+      'useSlidePageNumber must be called from a slide page rendered by @open-slide/core',
+    );
+  }
+  return { current: ctx.index + 1, total: ctx.total };
+}

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/lib/use-wheel-page-navigation.ts

@@ -31,6 +31,7 @@ export function useWheelPageNavigation<T extends HTMLElement>({
 
     const onWheel = (event: WheelEvent) => {
       if (event.defaultPrevented || event.ctrlKey || shouldIgnoreWheelTarget(event.target)) return;
+      if (isVisualViewportZoomed()) return;
 
       const deltaY = normalizeDeltaY(event);
       if (Math.abs(deltaY) <= Math.abs(normalizeDeltaX(event))) return;
@@ -84,6 +85,12 @@ function normalizeWheelDelta(delta: number, deltaMode: number) {
   return delta;
 }
 
+function isVisualViewportZoomed() {
+  if (typeof window === 'undefined') return false;
+  const vv = window.visualViewport;
+  return vv != null && vv.scale > 1.01;
+}
+
 function shouldIgnoreWheelTarget(target: EventTarget | null) {
   if (!(target instanceof HTMLElement)) return false;
   return Boolean(

package/src/app/routes/home-shell.tsx

@@ -22,6 +22,7 @@ export type HomeOutletContext = {
   titleMap: Record<string, string>;
   assign: (slideId: string, folderId: string | null) => Promise<void>;
   renameSlide: (slideId: string, name: string) => Promise<void>;
+  duplicateSlide: (slideId: string, newId?: string) => Promise<string>;
   deleteSlide: (slideId: string) => Promise<void>;
 };
 
@@ -32,8 +33,17 @@ function pathToSelectedId(pathname: string, search: URLSearchParams): string {
 }
 
 export function HomeShell() {
-  const { manifest, loading, create, update, remove, assign, renameSlide, deleteSlide } =
-    useFolders();
+  const {
+    manifest,
+    loading,
+    create,
+    update,
+    remove,
+    assign,
+    renameSlide,
+    duplicateSlide,
+    deleteSlide,
+  } = useFolders();
   const navigate = useNavigate();
   const location = useLocation();
   const [searchParams] = useSearchParams();
@@ -108,6 +118,7 @@ export function HomeShell() {
     titleMap,
     assign,
     renameSlide,
+    duplicateSlide,
     deleteSlide,
   };
 

package/src/app/routes/home.tsx

@@ -2,6 +2,7 @@ import {
   ArrowDownAZ,
   ChevronDown,
   Clock,
+  Copy,
   FolderInput,
   FolderPlus,
   MoreHorizontal,
@@ -13,6 +14,7 @@ import {
 } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
+import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -28,11 +30,12 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { useLocale } from '@/lib/use-locale';
+import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 import { FolderIconChip, SLIDE_DND_MIME } from '../components/sidebar/folder-item';
 import { DRAFT_ID } from '../components/sidebar/sidebar';
 import { SlideCanvas } from '../components/slide-canvas';
+import { SlidePageProvider } from '../lib/page-context';
 import type { Folder, FolderIcon, SlideModule } from '../lib/sdk';
 import { loadSlide, slideCreatedAt } from '../lib/slides';
 import type { HomeOutletContext } from './home-shell';
@@ -77,6 +80,7 @@ export function Home() {
     titleMap,
     assign,
     renameSlide,
+    duplicateSlide,
     deleteSlide,
   } = useOutletContext<HomeOutletContext>();
   const t = useLocale();
@@ -163,6 +167,20 @@ export function Home() {
                 folders={manifest.folders}
                 currentFolderId={manifest.assignments[id] ?? null}
                 onRename={(name) => renameSlide(id, name)}
+                onDuplicate={async () => {
+                  const slideName = titleMap[id] ?? id;
+                  try {
+                    const newSlideId = await duplicateSlide(id);
+                    toast.success(
+                      format(t.home.toastSlideDuplicated, {
+                        slide: slideName,
+                        newSlide: newSlideId,
+                      }),
+                    );
+                  } catch {
+                    toast.error(t.home.toastSlideDuplicateFailed);
+                  }
+                }}
                 onMove={(folderId) => assign(id, folderId)}
                 onDelete={() => deleteSlide(id)}
                 onTitleResolved={reportTitle}
@@ -381,6 +399,7 @@ function SlideCard({
   folders,
   currentFolderId,
   onRename,
+  onDuplicate,
   onMove,
   onDelete,
   onTitleResolved,
@@ -389,6 +408,7 @@ function SlideCard({
   folders: Folder[];
   currentFolderId: string | null;
   onRename: (name: string) => Promise<void> | void;
+  onDuplicate: () => Promise<void> | void;
   onMove: (folderId: string | null) => Promise<void> | void;
   onDelete: () => Promise<void> | void;
   onTitleResolved?: (id: string, title: string) => void;
@@ -441,7 +461,9 @@ function SlideCard({
             {FirstPage ? (
               <div className="h-full w-full motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-[1.03]">
                 <SlideCanvas flat freezeMotion design={slide?.design}>
-                  <FirstPage />
+                  <SlidePageProvider index={0} total={slide?.default.length ?? 1}>
+                    <FirstPage />
+                  </SlidePageProvider>
                 </SlideCanvas>
               </div>
             ) : (
@@ -489,6 +511,10 @@ function SlideCard({
                   <Pencil />
                   {tCard.common.rename}
                 </DropdownMenuItem>
+                <DropdownMenuItem onSelect={() => onDuplicate()}>
+                  <Copy />
+                  {tCard.home.duplicate}
+                </DropdownMenuItem>
                 <DropdownMenuItem onSelect={() => setDialog('move')}>
                   <FolderInput />
                   {tCard.home.moveToFolder}

package/src/app/routes/presenter.tsx

@@ -9,6 +9,7 @@ import {
   usePresenterChannel,
 } from '../components/present/use-presenter-channel';
 import { SlideCanvas } from '../components/slide-canvas';
+import { SlidePageProvider } from '../lib/page-context';
 import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../lib/sdk';
 import { useSlideModule } from '../lib/use-slide-module';
 
@@ -138,7 +139,9 @@ export function Presenter() {
           <SectionLabel>{t.presenter.nowShowing}</SectionLabel>
           <div className="relative min-h-0 flex-1 overflow-hidden rounded-[8px] bg-black ring-1 ring-border">
             <SlideCanvas flat design={slide.design}>
-              <CurrentPage />
+              <SlidePageProvider index={index} total={total}>
+                <CurrentPage />
+              </SlidePageProvider>
             </SlideCanvas>
             {blackout && (
               <div
@@ -164,7 +167,9 @@ export function Presenter() {
             >
               {NextPage ? (
                 <SlideCanvas flat freezeMotion design={slide.design}>
-                  <NextPage />
+                  <SlidePageProvider index={nextIndex} total={total}>
+                    <NextPage />
+                  </SlidePageProvider>
                 </SlideCanvas>
               ) : (
                 <div className="grid h-full place-items-center text-[11.5px] text-muted-foreground">

package/src/app/routes/slide.tsx

@@ -48,11 +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 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;
@@ -75,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);
@@ -236,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);
@@ -324,6 +329,7 @@ export function Slide() {
       <Player
         pages={pages}
         design={slide.design}
+        transition={slide.transition}
         index={index}
         onIndexChange={goTo}
         onExit={() => setPlayMode(null)}
@@ -334,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}>
@@ -378,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"
@@ -584,7 +589,13 @@ export function Slide() {
                       canNext={index < pageCount - 1}
                     />
                     <SlideCanvas design={slide.design}>
-                      <CurrentPage />
+                      <SlideTransitionLayer
+                        pages={pages}
+                        index={index}
+                        total={pageCount}
+                        moduleTransition={slide.transition}
+                        disabled={prefersReducedMotion}
+                      />
                     </SlideCanvas>
                     <ClickNavZones
                       onPrev={() => goTo(index - 1)}

package/src/locale/en.ts

@@ -38,6 +38,7 @@ export const en: Locale = {
   home: {
     appTitle: 'open-slide',
     draft: 'Draft',
+    duplicate: 'Duplicate',
     themes: 'Themes',
     assets: 'Assets',
     folders: 'Folders',
@@ -79,6 +80,8 @@ export const en: Locale = {
     deleteDialogDescriptionSuffix: 'This action cannot be undone.',
     toastFolderCreated: 'Created folder “{name}”',
     toastFolderCreateFailed: 'Failed to create folder',
+    toastSlideDuplicated: 'Duplicated “{slide}” as {newSlide}',
+    toastSlideDuplicateFailed: 'Could not duplicate slide',
     toastSlideMoved: 'Moved “{slide}” to {folder}',
     toastSlideMoveFailed: 'Failed to move slide',
     toastFolderDeleted: 'Deleted folder “{name}”',
@@ -270,6 +273,7 @@ export const en: Locale = {
     scopeSlide: 'This slide',
     scopeGlobal: 'Global',
     fileCount: { one: '{count} file', other: '{count} files' },
+    usageUnused: 'Unused',
     searchLogos: 'Search logos',
     upload: 'Upload',
     dropToUpload: 'Drop to upload',

package/src/locale/ja.ts

@@ -38,6 +38,7 @@ export const ja: Locale = {
   home: {
     appTitle: 'open-slide',
     draft: '下書き',
+    duplicate: '複製',
     themes: 'テーマ',
     assets: 'アセット',
     folders: 'フォルダ',
@@ -79,6 +80,8 @@ export const ja: Locale = {
     deleteDialogDescriptionSuffix: 'この操作は元に戻せません。',
     toastFolderCreated: 'フォルダ「{name}」を作成しました',
     toastFolderCreateFailed: 'フォルダの作成に失敗しました',
+    toastSlideDuplicated: '「{slide}」を {newSlide} として複製しました',
+    toastSlideDuplicateFailed: 'スライドを複製できませんでした',
     toastSlideMoved: '「{slide}」を {folder} に移動しました',
     toastSlideMoveFailed: 'スライドの移動に失敗しました',
     toastFolderDeleted: 'フォルダ「{name}」を削除しました',
@@ -272,6 +275,7 @@ export const ja: Locale = {
     scopeSlide: 'このスライド',
     scopeGlobal: 'グローバル',
     fileCount: { one: 'ファイル {count} 件', other: 'ファイル {count} 件' },
+    usageUnused: '未使用',
     searchLogos: 'ロゴを検索',
     upload: 'アップロード',
     dropToUpload: 'ドロップでアップロード',

package/src/locale/types.ts

@@ -38,6 +38,7 @@ export type Locale = {
   home: {
     appTitle: string;
     draft: string;
+    duplicate: string;
     themes: string;
     assets: string;
     folders: string;
@@ -80,6 +81,9 @@ export type Locale = {
     /** template: "Created folder “{name}”" */
     toastFolderCreated: string;
     toastFolderCreateFailed: string;
+    /** template: "Duplicated “{slide}” as {newSlide}" */
+    toastSlideDuplicated: string;
+    toastSlideDuplicateFailed: string;
     /** template: "Moved “{slide}” to {folder}" */
     toastSlideMoved: string;
     toastSlideMoveFailed: string;
@@ -271,6 +275,7 @@ export type Locale = {
     scopeGlobal: string;
     /** templates: "{count} file" / "{count} files" */
     fileCount: Plural;
+    usageUnused: string;
     searchLogos: string;
     upload: string;
     dropToUpload: string;

package/src/locale/zh-cn.ts

@@ -38,6 +38,7 @@ export const zhCN: Locale = {
   home: {
     appTitle: 'open-slide',
     draft: '草稿',
+    duplicate: '复制',
     themes: '主题',
     assets: '素材',
     folders: '文件夹',
@@ -79,6 +80,8 @@ export const zhCN: Locale = {
     deleteDialogDescriptionSuffix: '此操作无法撤销。',
     toastFolderCreated: '已创建文件夹"{name}"',
     toastFolderCreateFailed: '创建文件夹失败',
+    toastSlideDuplicated: '已将"{slide}"复制为 {newSlide}',
+    toastSlideDuplicateFailed: '无法复制幻灯片',
     toastSlideMoved: '已将"{slide}"移至 {folder}',
     toastSlideMoveFailed: '移动幻灯片失败',
     toastFolderDeleted: '已删除文件夹"{name}"',
@@ -269,6 +272,7 @@ export const zhCN: Locale = {
     scopeSlide: '当前幻灯片',
     scopeGlobal: '全局',
     fileCount: { one: '{count} 个文件', other: '{count} 个文件' },
+    usageUnused: '未使用',
     searchLogos: '搜索 Logo',
     upload: '上传',
     dropToUpload: '拖入即可上传',

package/src/locale/zh-tw.ts

@@ -38,6 +38,7 @@ export const zhTW: Locale = {
   home: {
     appTitle: 'open-slide',
     draft: '草稿',
+    duplicate: '複製',
     themes: '主題',
     assets: '素材',
     folders: '資料夾',
@@ -79,6 +80,8 @@ export const zhTW: Locale = {
     deleteDialogDescriptionSuffix: '此操作無法復原。',
     toastFolderCreated: '已建立資料夾「{name}」',
     toastFolderCreateFailed: '建立資料夾失敗',
+    toastSlideDuplicated: '已將「{slide}」複製為 {newSlide}',
+    toastSlideDuplicateFailed: '無法複製投影片',
     toastSlideMoved: '已將「{slide}」移至 {folder}',
     toastSlideMoveFailed: '移動投影片失敗',
     toastFolderDeleted: '已刪除資料夾「{name}」',
@@ -269,6 +272,7 @@ export const zhTW: Locale = {
     scopeSlide: '此投影片',
     scopeGlobal: '全域',
     fileCount: { one: '{count} 個檔案', other: '{count} 個檔案' },
+    usageUnused: '未使用',
     searchLogos: '搜尋 Logo',
     upload: '上傳',
     dropToUpload: '拖入即可上傳',