@open-slide/core 1.8.0 → 1.10.0

package/src/app/routes/slide.tsx

@@ -5,12 +5,14 @@ import {
   ChevronLeft,
   Download,
   FileCode2,
+  FileImage,
   FileText,
   Link2,
   Loader2,
   Maximize,
   MonitorSpeaker,
   Play,
+  Presentation,
 } from 'lucide-react';
 import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
@@ -33,6 +35,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -47,11 +50,13 @@ import { cn } from '@/lib/utils';
 import { NotesDrawer } from '../components/notes-drawer';
 import { PdfProgressToast } from '../components/pdf-progress-toast';
 import { openPresenterWindow, Player } from '../components/player';
+import { PptxProgressToast } from '../components/pptx-progress-toast';
 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 { exportSlideAsImagePptx } from '../lib/export-pptx';
 import { remapNotesSessionCacheAfterReorder } from '../lib/inspector/use-notes';
 import type { SlideModule } from '../lib/sdk';
 import { usePrefersReducedMotion } from '../lib/use-prefers-reduced-motion';
@@ -500,6 +505,69 @@ export function Slide() {
                       <FileText />
                       {t.slide.exportAsPdf}
                     </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      disabled={exporting}
+                      onSelect={async () => {
+                        if (!slide || exporting) return;
+                        setExporting(true);
+                        const toastId = `pptx-export-${slideId}`;
+                        toast.custom(
+                          () => (
+                            <PptxProgressToast
+                              progress={{
+                                phase: 'processing',
+                                current: 0,
+                                total: pages.length,
+                                percent: 0,
+                              }}
+                            />
+                          ),
+                          { id: toastId, duration: Infinity },
+                        );
+                        try {
+                          await exportSlideAsImagePptx(slide, slideId, (p) => {
+                            toast.custom(() => <PptxProgressToast progress={p} />, {
+                              id: toastId,
+                              duration: Infinity,
+                            });
+                          });
+                        } catch (err) {
+                          console.error('[open-slide] image pptx export failed', err);
+                          toast.error(t.slide.imagePptxExportFailed, {
+                            id: toastId,
+                            duration: 4000,
+                          });
+                        } finally {
+                          setExporting(false);
+                          toast.dismiss(toastId);
+                        }
+                      }}
+                    >
+                      <FileImage />
+                      {t.slide.exportAsImagePptx}
+                    </DropdownMenuItem>
+                    <TooltipProvider delayDuration={200}>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <div
+                            aria-disabled
+                            className="relative flex cursor-help items-center justify-between gap-2 rounded-[5px] px-2 py-1.5 text-[12.5px] opacity-45 select-none [&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:opacity-80"
+                          >
+                            <span className="flex items-center gap-2">
+                              <Presentation />
+                              {t.slide.exportAsPptx}
+                            </span>
+                            <span className="rounded-[3px] bg-muted px-1.5 py-0.5 font-mono text-[9.5px] tracking-[0.04em] text-muted-foreground">
+                              {t.slide.comingSoon}
+                            </span>
+                          </div>
+                        </TooltipTrigger>
+                        <TooltipContent side="left" className="max-w-[240px] leading-relaxed">
+                          {t.slide.pptxComingSoonTooltip}
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
                   </DropdownMenuContent>
                 </DropdownMenu>
               )}
@@ -574,6 +642,7 @@ export function Slide() {
                     onSelect={goTo}
                     onReorder={import.meta.env.DEV ? reorderPage : undefined}
                     actions={thumbnailActions}
+                    moduleTransition={slide.transition}
                   />
                   <main
                     ref={slideViewportRef}
@@ -656,6 +725,7 @@ function ResizableRail(props: {
   onSelect: (i: number) => void;
   onReorder?: (from: number, to: number) => void;
   actions?: ThumbnailActions;
+  moduleTransition?: SlideModule['transition'];
 }) {
   const t = useLocale();
   const [width, setWidth] = useState<number>(readStoredRailWidth);

package/src/app/virtual.d.ts

@@ -13,6 +13,7 @@ declare module 'virtual:open-slide/config' {
     slidesDir?: string;
     port?: number;
     locale?: Locale;
+    version: string;
     build: {
       showSlideBrowser: boolean;
       showSlideUi: boolean;

package/src/locale/en.ts

@@ -44,6 +44,7 @@ export const en: Locale = {
     folders: 'Folders',
     newFolder: 'New folder',
     folderName: 'Folder name',
+    updateAvailable: 'open-slide {version} is available — update the package to get the latest.',
     changeIcon: 'Change icon',
     iconEmojiTab: 'Emoji',
     iconColorTab: 'Color',
@@ -105,7 +106,13 @@ export const en: Locale = {
     toastCopyLinkFailed: 'Failed to copy link',
     exportAsHtml: 'Export as HTML',
     exportAsPdf: 'Export as PDF',
+    exportAsImagePptx: 'Export as image PPTX',
+    exportAsPptx: 'Export as PPTX',
+    comingSoon: 'Coming soon',
+    pptxComingSoonTooltip:
+      'Editable PPTX export isn’t ready yet. For now, use “Export as image PPTX” instead.',
     pdfExportFailed: 'PDF export failed',
+    imagePptxExportFailed: 'PPTX export failed',
     pdfExportSafariUnsupported:
       'Export as PDF is not supported on Safari. Please try a Chromium-based browser instead.',
     present: 'Present',
@@ -336,6 +343,8 @@ export const en: Locale = {
     toastDuplicateFailed: 'Could not duplicate page',
     toastDeleteFailed: 'Could not delete page',
     resizeRail: 'Resize thumbnail rail',
+    transitionIndicator: 'Has slide transition',
+    stepsIndicator: 'Has step-by-step reveals',
   },
 
   pdfToast: {
@@ -345,6 +354,13 @@ export const en: Locale = {
     done: 'Done',
   },
 
+  pptxToast: {
+    title: 'Exporting PPTX',
+    processing: 'Rendering page {current} of {total}',
+    generating: 'Building presentation…',
+    done: 'Done',
+  },
+
   themeToggle: {
     toggleAria: 'Toggle theme',
     title: 'Theme',
@@ -353,6 +369,11 @@ export const en: Locale = {
     system: 'System',
   },
 
+  languageToggle: {
+    toggleAria: 'Change language',
+    title: 'Language',
+  },
+
   imagePlaceholder: {
     dropOverlay: 'Drop image to use here',
     uploading: 'Uploading…',

package/src/locale/ja.ts

@@ -44,6 +44,8 @@ export const ja: Locale = {
     folders: 'フォルダ',
     newFolder: '新規フォルダ',
     folderName: 'フォルダ名',
+    updateAvailable:
+      'open-slide {version} が利用可能です — パッケージを更新して最新版を入手してください。',
     changeIcon: 'アイコンを変更',
     iconEmojiTab: '絵文字',
     iconColorTab: 'カラー',
@@ -105,7 +107,13 @@ export const ja: Locale = {
     toastCopyLinkFailed: 'リンクのコピーに失敗しました',
     exportAsHtml: 'HTML として書き出し',
     exportAsPdf: 'PDF として書き出し',
+    exportAsImagePptx: '画像 PPTX として書き出し',
+    exportAsPptx: 'PPTX として書き出し',
+    comingSoon: '近日公開',
+    pptxComingSoonTooltip:
+      '編集可能な PPTX の書き出しはまだ対応していません。それまでは「画像 PPTX として書き出し」をご利用ください。',
     pdfExportFailed: 'PDF の書き出しに失敗しました',
+    imagePptxExportFailed: 'PPTX の書き出しに失敗しました',
     pdfExportSafariUnsupported:
       'PDF の書き出しは現在 Safari では対応していません。Chromium ベースのブラウザでお試しください。',
     present: '発表',
@@ -340,6 +348,8 @@ export const ja: Locale = {
     toastDuplicateFailed: 'ページを複製できませんでした',
     toastDeleteFailed: 'ページを削除できませんでした',
     resizeRail: 'サムネイル幅を調整',
+    transitionIndicator: 'スライドトランジションあり',
+    stepsIndicator: 'ステップ表示あり',
   },
 
   pdfToast: {
@@ -349,6 +359,13 @@ export const ja: Locale = {
     done: '完了',
   },
 
+  pptxToast: {
+    title: 'PPTX を書き出し中',
+    processing: 'ページ {current} / {total} を描画中',
+    generating: 'プレゼンテーションを構築中…',
+    done: '完了',
+  },
+
   themeToggle: {
     toggleAria: 'テーマを切り替え',
     title: 'テーマ',
@@ -357,6 +374,11 @@ export const ja: Locale = {
     system: 'システム',
   },
 
+  languageToggle: {
+    toggleAria: '言語を切り替え',
+    title: '言語',
+  },
+
   imagePlaceholder: {
     dropOverlay: 'ここにドロップして使用',
     uploading: 'アップロード中…',

package/src/locale/types.ts

@@ -44,6 +44,7 @@ export type Locale = {
     folders: string;
     newFolder: string;
     folderName: string;
+    updateAvailable: string;
     changeIcon: string;
     iconEmojiTab: string;
     iconColorTab: string;
@@ -107,7 +108,12 @@ export type Locale = {
     toastCopyLinkFailed: string;
     exportAsHtml: string;
     exportAsPdf: string;
+    exportAsImagePptx: string;
+    exportAsPptx: string;
+    comingSoon: string;
+    pptxComingSoonTooltip: string;
     pdfExportFailed: string;
+    imagePptxExportFailed: string;
     pdfExportSafariUnsupported: string;
     present: string;
     presentMenuAria: string;
@@ -358,6 +364,8 @@ export type Locale = {
     toastDuplicateFailed: string;
     toastDeleteFailed: string;
     resizeRail: string;
+    transitionIndicator: string;
+    stepsIndicator: string;
   };
 
   pdfToast: {
@@ -368,6 +376,14 @@ export type Locale = {
     done: string;
   };
 
+  pptxToast: {
+    title: string;
+    /** template: "Rendering page {current} of {total}" */
+    processing: string;
+    generating: string;
+    done: string;
+  };
+
   themeToggle: {
     toggleAria: string;
     title: string;
@@ -376,6 +392,11 @@ export type Locale = {
     system: string;
   };
 
+  languageToggle: {
+    toggleAria: string;
+    title: string;
+  };
+
   imagePlaceholder: {
     dropOverlay: string;
     uploading: string;

package/src/locale/zh-cn.ts

@@ -44,6 +44,7 @@ export const zhCN: Locale = {
     folders: '文件夹',
     newFolder: '新建文件夹',
     folderName: '文件夹名称',
+    updateAvailable: 'open-slide {version} 已发布，请更新软件包以获取最新版本。',
     changeIcon: '更换图标',
     iconEmojiTab: 'Emoji',
     iconColorTab: '颜色',
@@ -104,7 +105,12 @@ export const zhCN: Locale = {
     toastCopyLinkFailed: '复制链接失败',
     exportAsHtml: '导出为 HTML',
     exportAsPdf: '导出为 PDF',
+    exportAsImagePptx: '导出图片 PPTX',
+    exportAsPptx: '导出 PPTX',
+    comingSoon: '即将推出',
+    pptxComingSoonTooltip: '可编辑的 PPTX 导出尚未支持，在此之前可以先使用“导出图片 PPTX”。',
     pdfExportFailed: 'PDF 导出失败',
+    imagePptxExportFailed: 'PPTX 导出失败',
     pdfExportSafariUnsupported:
       '导出 PDF 目前不支持 Safari 设备，请尝试使用基于 Chromium 的浏览器替代。',
     present: '演示',
@@ -335,6 +341,8 @@ export const zhCN: Locale = {
     toastDuplicateFailed: '无法复制页面',
     toastDeleteFailed: '无法删除页面',
     resizeRail: '调整缩略图栏宽度',
+    transitionIndicator: '有换页转场',
+    stepsIndicator: '有逐步揭示',
   },
 
   pdfToast: {
@@ -344,6 +352,13 @@ export const zhCN: Locale = {
     done: '完成',
   },
 
+  pptxToast: {
+    title: '导出 PPTX',
+    processing: '正在渲染第 {current} / {total} 页',
+    generating: '正在组合演示文稿…',
+    done: '完成',
+  },
+
   themeToggle: {
     toggleAria: '切换主题',
     title: '主题',
@@ -352,6 +367,11 @@ export const zhCN: Locale = {
     system: '系统',
   },
 
+  languageToggle: {
+    toggleAria: '切换语言',
+    title: '语言',
+  },
+
   imagePlaceholder: {
     dropOverlay: '拖入图片以使用',
     uploading: '上传中…',

package/src/locale/zh-tw.ts

@@ -44,6 +44,7 @@ export const zhTW: Locale = {
     folders: '資料夾',
     newFolder: '新增資料夾',
     folderName: '資料夾名稱',
+    updateAvailable: 'open-slide {version} 已發布，請更新套件以取得最新版本。',
     changeIcon: '變更圖示',
     iconEmojiTab: 'Emoji',
     iconColorTab: '顏色',
@@ -104,7 +105,12 @@ export const zhTW: Locale = {
     toastCopyLinkFailed: '複製連結失敗',
     exportAsHtml: '匯出為 HTML',
     exportAsPdf: '匯出為 PDF',
+    exportAsImagePptx: '匯出圖片 PPTX',
+    exportAsPptx: '匯出 PPTX',
+    comingSoon: '即將推出',
+    pptxComingSoonTooltip: '可編輯的 PPTX 匯出尚未支援，在此之前可以先使用「匯出圖片 PPTX」。',
     pdfExportFailed: 'PDF 匯出失敗',
+    imagePptxExportFailed: 'PPTX 匯出失敗',
     pdfExportSafariUnsupported:
       '匯出 PDF 目前不支援 Safari 裝置，請嘗試用 Chromium 基底瀏覽器替代。',
     present: '簡報',
@@ -335,6 +341,8 @@ export const zhTW: Locale = {
     toastDuplicateFailed: '無法複製頁面',
     toastDeleteFailed: '無法刪除頁面',
     resizeRail: '調整縮圖欄寬度',
+    transitionIndicator: '有換頁轉場',
+    stepsIndicator: '有逐步揭示',
   },
 
   pdfToast: {
@@ -344,6 +352,13 @@ export const zhTW: Locale = {
     done: '完成',
   },
 
+  pptxToast: {
+    title: '匯出 PPTX',
+    processing: '正在算繪第 {current} / {total} 頁',
+    generating: '正在組合簡報…',
+    done: '完成',
+  },
+
   themeToggle: {
     toggleAria: '切換主題',
     title: '主題',
@@ -352,6 +367,11 @@ export const zhTW: Locale = {
     system: '系統',
   },
 
+  languageToggle: {
+    toggleAria: '切換語言',
+    title: '語言',
+  },
+
   imagePlaceholder: {
     dropOverlay: '拖入圖片以使用',
     uploading: '上傳中…',