@open-slide/core 1.5.0 → 1.6.0

package/skills/slide-authoring/SKILL.md

@@ -291,6 +291,23 @@ The user uploads the real file via the Assets panel, then clicks the placeholder
 
 Size the placeholder to the slot it occupies. Pass `width`/`height` when the layout has a fixed image box; omit them when the placeholder fills a flex/grid cell. The `hint` should describe the *content* the user needs ("Q3 revenue chart") not the *role* ("hero image").
 
+## Page numbers
+
+If a footer shows the current page (`03 / 12`, `Page 3`, etc.), read it from `useSlidePageNumber()` — **never hardcode** `n` / `TOTAL`. Inserting, reordering, or deleting a page would otherwise force you to retouch every footer.
+
+```tsx
+import { useSlidePageNumber } from '@open-slide/core';
+
+const Footer = () => {
+  const { current, total } = useSlidePageNumber();
+  return (
+    <span>{String(current).padStart(2, '0')} / {String(total).padStart(2, '0')}</span>
+  );
+};
+```
+
+`current` is 1-indexed (matches what readers see) and `total` is the slide's page count. The hook works in every render context (main viewer, thumbnails, overview grid, present mode, presenter window, HTML/PDF export) — the same `<Footer />` JSX is correct everywhere. Call the hook inside a component that's used **per page**; don't try to call it at module top level.
+
 ## Repeated elements: component, not `map`
 
 When a page has visually repeated items — cards, logo rows, gallery tiles, list rows, step indicators — **define a small component and instantiate it once per item**. Do **not** render the group with `array.map` over a data array.

package/src/app/components/asset-view.tsx

@@ -414,7 +414,14 @@ function AssetCard({
           <div className="truncate text-[12.5px] font-medium" title={asset.name}>
             {asset.name}
           </div>
-          <div className="folio truncate">{formatSize(asset.size)}</div>
+          <div className="folio flex items-center gap-1.5">
+            <span className="truncate">{formatSize(asset.size)}</span>
+            {asset.unused ? (
+              <span className="shrink-0 rounded-sm bg-muted px-1 py-px text-[10px] font-medium text-muted-foreground leading-none">
+                {t.asset.usageUnused}
+              </span>
+            ) : null}
+          </div>
         </div>
         <DropdownMenu>
           <DropdownMenuTrigger

package/src/app/components/player.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useWheelPageNavigation } from '@/lib/use-wheel-page-navigation';
 import { cn } from '@/lib/utils';
 import type { DesignSystem } from '../lib/design';
+import { SlidePageProvider } from '../lib/page-context';
 import type { Page } from '../lib/sdk';
 import { PresentBlackoutOverlay } from './present/blackout-overlay';
 import { PresentControlBar } from './present/control-bar';
@@ -295,7 +296,11 @@ export function Player({
       )}
     >
       <SlideCanvas flat design={design}>
-        {PageComp ? <PageComp /> : null}
+        {PageComp ? (
+          <SlidePageProvider index={index} total={pages.length}>
+            <PageComp />
+          </SlidePageProvider>
+        ) : null}
       </SlideCanvas>
 
       <button

package/src/app/components/present/overview-grid.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 import type { DesignSystem } from '../../lib/design';
+import { SlidePageProvider } from '../../lib/page-context';
 import type { Page } from '../../lib/sdk';
 import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../../lib/sdk';
 import { SlideCanvas } from '../slide-canvas';
@@ -136,7 +137,9 @@ export function PresentOverviewGrid({ pages, design, open, current, onClose, onS
                     freezeMotion
                     design={design}
                   >
-                    <PageComp />
+                    <SlidePageProvider index={i} total={pages.length}>
+                      <PageComp />
+                    </SlidePageProvider>
                   </SlideCanvas>
                   {isCurrent && (
                     <span

package/src/app/components/themes/theme-detail.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
+import { SlidePageProvider } from '../../lib/page-context';
 import type { SlideModule } from '../../lib/sdk';
 import { loadSlide, slidesByTheme } from '../../lib/slides';
 import { loadThemeDemo, type ThemeDemoModule, themes } from '../../lib/themes';
@@ -106,7 +107,9 @@ export function ThemeDetail({ themeId, onBack }: { themeId: string; onBack: () =
                 </div>
               ) : Current ? (
                 <SlideCanvas flat freezeMotion design={demo.design}>
-                  <Current />
+                  <SlidePageProvider index={pageIndex} total={totalPages}>
+                    <Current />
+                  </SlidePageProvider>
                 </SlideCanvas>
               ) : null}
             </div>
@@ -227,7 +230,9 @@ function ThemeSlideCard({ id }: { id: string }) {
         {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>
         ) : (

package/src/app/components/themes/themes-gallery.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { format, useLocale } from '@/lib/use-locale';
+import { SlidePageProvider } from '../../lib/page-context';
 import { loadThemeDemo, type Theme, type ThemeDemoModule, themes } from '../../lib/themes';
 import { SlideCanvas } from '../slide-canvas';
 
@@ -78,7 +79,9 @@ function ThemePreview({ theme }: { theme: Theme }) {
   return (
     <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={demo.design}>
-        <FirstPage />
+        <SlidePageProvider index={0} total={demo.default.length}>
+          <FirstPage />
+        </SlidePageProvider>
       </SlideCanvas>
     </div>
   );

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

@@ -28,6 +28,7 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 import type { DesignSystem } from '../lib/design';
+import { SlidePageProvider } from '../lib/page-context';
 import type { Page } from '../lib/sdk';
 import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../lib/sdk';
 import { SlideCanvas } from './slide-canvas';
@@ -118,7 +119,9 @@ export function ThumbnailRail({
                     style={{ width, height: HORIZONTAL_THUMB_HEIGHT }}
                   >
                     <SlideCanvas scale={scale} center={false} flat freezeMotion design={design}>
-                      <PageComp />
+                      <SlidePageProvider index={i} total={pages.length}>
+                        <PageComp />
+                      </SlidePageProvider>
                     </SlideCanvas>
                   </div>
                 </button>
@@ -155,6 +158,7 @@ export function ThumbnailRail({
     const inner = (
       <ThumbContents
         index={i}
+        total={pages.length}
         active={active}
         page={PageComp}
         design={design}
@@ -236,6 +240,7 @@ function thumbButtonClass(active: boolean): string {
 
 function ThumbContents({
   index,
+  total,
   active,
   page: PageComp,
   design,
@@ -244,6 +249,7 @@ function ThumbContents({
   height,
 }: {
   index: number;
+  total: number;
   active: boolean;
   page: Page;
   design?: DesignSystem;
@@ -271,7 +277,9 @@ function ThumbContents({
         style={{ width: thumbWidth, height }}
       >
         <SlideCanvas scale={scale} center={false} flat freezeMotion design={design}>
-          <PageComp />
+          <SlidePageProvider index={index} total={total}>
+            <PageComp />
+          </SlidePageProvider>
         </SlideCanvas>
         {active && (
           <span

package/src/app/lib/assets.ts

@@ -6,6 +6,7 @@ export type AssetEntry = {
   mtime: number;
   mime: string;
   url: string;
+  unused: boolean;
 };
 
 export type UploadOptions = { overwrite?: boolean };
@@ -90,6 +91,7 @@ export async function uploadWithAutoRename(
     mtime: body?.mtime ?? Date.now(),
     mime: body?.mime ?? uploaded.type ?? 'application/octet-stream',
     url: body?.url ?? `/__assets/${slideId}/${encodeURIComponent(uploaded.name)}`,
+    unused: body?.unused ?? false,
   };
   return { ok: true, status: res.status, entry };
 }

package/src/app/lib/export-html.ts

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { designToCssVars } from './design';
+import { SlidePageProvider } from './page-context';
 import type { SlideModule } from './sdk';
 
 type AssetEntry = { name: string; bytes: Uint8Array };
@@ -82,13 +83,17 @@ async function renderPagesToHtml(pages: NonNullable<SlideModule['default']>): Pr
 
   const result: string[] = [];
   try {
-    for (const Page of pages) {
+    for (let i = 0; i < pages.length; i++) {
+      const Page = pages[i];
+      if (!Page) continue;
       const host = document.createElement('div');
       host.style.width = '1920px';
       host.style.height = '1080px';
       container.appendChild(host);
       const root = createRoot(host);
-      root.render(createElement(Page));
+      root.render(
+        createElement(SlidePageProvider, { index: i, total: pages.length }, createElement(Page)),
+      );
       await nextPaint();
       await nextPaint();
       result.push(host.innerHTML);

package/src/app/lib/export-pdf.ts

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { designToCssVars } from './design';
+import { SlidePageProvider } from './page-context';
 import { isFrameAnimationSettled, waitForDataWaitfor, waitForFonts } from './print-ready';
 import type { SlideModule } from './sdk';
 
@@ -62,6 +63,20 @@ const PRINT_STYLES = `
     transform: scale(0.5);
     transform-origin: top left;
   }
+  /* Chromium serializes box-shadow and CSS gradients as PDF transparency
+     groups / soft masks. macOS Preview re-composites those on every page
+     turn, causing 0.5–2s per-page lag. Strip them in the print container
+     only — gradients on pseudo-elements via CSS (DOM walk can't reach them),
+     inline-style gradients via neutralizeGradientBackgrounds() below. */
+  #${PRINT_ROOT_ID} *,
+  #${PRINT_ROOT_ID} *::before,
+  #${PRINT_ROOT_ID} *::after {
+    box-shadow: none !important;
+  }
+  #${PRINT_ROOT_ID} *::before,
+  #${PRINT_ROOT_ID} *::after {
+    background-image: none !important;
+  }
 }
 `;
 
@@ -109,7 +124,9 @@ export async function exportSlideAsPdf(
 
   const reactRoots: Root[] = [];
   const frames: HTMLElement[] = [];
-  for (const Page of pages) {
+  for (let i = 0; i < pages.length; i++) {
+    const Page = pages[i];
+    if (!Page) continue;
     const host = document.createElement('div');
     host.className = 'os-print-frame';
     host.setAttribute('data-osd-canvas', '');
@@ -126,7 +143,9 @@ export async function exportSlideAsPdf(
     root.appendChild(host);
     frames.push(host);
     const r = createRoot(inner);
-    r.render(createElement(Page));
+    r.render(
+      createElement(SlidePageProvider, { index: i, total: pages.length }, createElement(Page)),
+    );
     reactRoots.push(r);
   }
   // Yield once so React commits all pages and CSS animations actually start
@@ -155,6 +174,7 @@ export async function exportSlideAsPdf(
     }
 
     await waitForDataWaitfor(root);
+    neutralizeGradientBackgrounds(root);
     await sleep(100); // flush layout
 
     onProgress?.({ phase: 'printing', current: total, total, percent: 99 });
@@ -170,6 +190,18 @@ export async function exportSlideAsPdf(
   }
 }
 
+// Strip inline-style gradients from background-image so Chromium does not
+// emit them as PDF soft masks. url(...) backgrounds are preserved.
+function neutralizeGradientBackgrounds(root: HTMLElement): void {
+  const elements = root.querySelectorAll<HTMLElement>('*');
+  for (const el of elements) {
+    const bg = getComputedStyle(el).backgroundImage;
+    if (bg?.includes('gradient(')) {
+      el.style.backgroundImage = 'none';
+    }
+  }
+}
+
 function sleep(ms: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }

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/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

@@ -52,6 +52,7 @@ import { type ThumbnailActions, ThumbnailRail } from '../components/thumbnail-ra
 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 { useSlideModule } from '../lib/use-slide-module';
 
@@ -584,7 +585,9 @@ export function Slide() {
                       canNext={index < pageCount - 1}
                     />
                     <SlideCanvas design={slide.design}>
-                      <CurrentPage />
+                      <SlidePageProvider index={index} total={pageCount}>
+                        <CurrentPage />
+                      </SlidePageProvider>
                     </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: 'ドロップでアップロード',