@open-press/core 1.1.4 → 1.2.1

package/src/openpress/app/OpenPressRuntime.tsx

@@ -1,5 +1,5 @@
-import { useMemo, type CSSProperties } from "react";
-import { PrintDocument, PublicViewer, SlidePresentationPage } from "../reader";
+import { useEffect, useMemo, useState, type CSSProperties } from "react";
+import { PrintDocument, PublicViewer, SlidePublicViewer, SlidePresentationPage } from "../reader";
 import { isPresentationModeLocation, isPrintModeLocation, isWorkspaceModeLocation } from "../shared";
 import { HtmlWorkbench } from "../workbench";
 import type {
@@ -15,6 +15,12 @@ interface OpenPressRuntimeProps {
   document: ReaderDocument;
   runtimeMode?: OpenPressRuntimeMode;
   deploymentInfo?: DeploymentInfo;
+  // Active Press slug — supplied by OpenPressApp when the active document
+  // came from a multi-Press workspace. The workbench passes this through to
+  // useDeploymentWorkbench so the local PDF export endpoint can target the
+  // right Press instead of defaulting to the first one and producing a
+  // "0 pages observed" timeout.
+  activeSlug?: string;
   onDocumentRefresh?: () => void | Promise<void>;
   onOpenPresentation?: (pageIndex: number) => void;
   onExitPresentation?: (pageIndex: number) => void;
@@ -28,6 +34,7 @@ export function OpenPressRuntime({
   document,
   runtimeMode,
   deploymentInfo = { online: false },
+  activeSlug,
   onDocumentRefresh,
   onOpenPresentation,
   onExitPresentation,
@@ -35,19 +42,29 @@ export function OpenPressRuntime({
 }: OpenPressRuntimeProps) {
   const style = themeToCssVariables(document.theme);
   const htmlPages = document.blocks.filter((block): block is HtmlPageBlock => block.kind === "htmlPage");
+  // The mode flags below all read window.location synchronously. They
+  // would otherwise stay frozen at their mount-time values when
+  // OpenPressApp re-renders us in response to a client-side URL change
+  // (e.g. /<slug>/present -> /<slug>/preview after exiting the slide
+  // presenter), so the SlidePresentationPage exits to the wrong
+  // route-driven branch (PublicViewer instead of HtmlWorkbench) and the
+  // user sees the legacy public-viewer chrome until a hard reload.
+  // Bump a version on every pathname/search change so the memos
+  // re-evaluate exactly when the URL does.
+  const routeVersion = useLocationVersion();
   const activeRuntimeMode = useMemo<OpenPressRuntimeMode>(() => {
     if (runtimeMode) return runtimeMode;
     if (typeof window === "undefined") return "preview";
     return isPresentationModeLocation(window.location) ? "present" : "preview";
-  }, [runtimeMode]);
+  }, [runtimeMode, routeVersion]);
   const workspaceMode = useMemo(() => {
     if (typeof window === "undefined") return false;
     return isWorkspaceModeLocation(window.location);
-  }, []);
+  }, [routeVersion]);
   const printMode = useMemo(() => {
     if (typeof window === "undefined") return false;
     return isPrintModeLocation(window.location);
-  }, []);
+  }, [routeVersion]);
 
   if (htmlPages.length > 0) {
     if (printMode) {
@@ -65,6 +82,20 @@ export function OpenPressRuntime({
       );
     }
 
+    if (!workspaceMode && document.meta.type === "slides") {
+      const slideDeploymentInfo = activeSlug
+        ? { ...deploymentInfo, pdf: resolvePressPdfUrl(deploymentInfo.pdf, activeSlug) }
+        : deploymentInfo;
+      return (
+        <SlidePublicViewer
+          document={document}
+          pages={htmlPages}
+          style={style}
+          deploymentInfo={slideDeploymentInfo}
+        />
+      );
+    }
+
     if (!workspaceMode) {
       return <PublicViewer document={document} pages={htmlPages} style={style} deploymentInfo={deploymentInfo} />;
     }
@@ -74,8 +105,9 @@ export function OpenPressRuntime({
         document={document}
         pages={htmlPages}
         style={style}
-        devMode={workspaceMode}
+        workspaceMode={workspaceMode}
         deploymentInfo={deploymentInfo}
+        pressSlug={activeSlug ?? null}
         onDocumentRefresh={onDocumentRefresh}
         onOpenPresentation={onOpenPresentation}
         onBackToWorkspace={onBackToWorkspace}
@@ -110,6 +142,53 @@ function EmptyState({ style, workspaceMode }: { style: CSSProperties; workspaceM
   );
 }
 
+// Bump a counter whenever client-side navigation changes pathname /
+// search / hash, so location-derived memos in OpenPressRuntime
+// re-evaluate. popstate fires on browser back/forward; we also patch
+// pushState / replaceState because the SPA itself calls those when
+// the user opens a Press, exits a slide presenter, or toggles between
+// /<slug>/preview and /<slug>/present.
+function useLocationVersion() {
+  const [version, setVersion] = useState(0);
+  useEffect(() => {
+    if (typeof window === "undefined") return undefined;
+    const bump = () => setVersion((value) => value + 1);
+    window.addEventListener("popstate", bump);
+    window.addEventListener("hashchange", bump);
+    const history = window.history;
+    const originalPushState = history.pushState.bind(history);
+    const originalReplaceState = history.replaceState.bind(history);
+    history.pushState = function patchedPushState(...args) {
+      const result = originalPushState(...args);
+      bump();
+      return result;
+    } as typeof history.pushState;
+    history.replaceState = function patchedReplaceState(...args) {
+      const result = originalReplaceState(...args);
+      bump();
+      return result;
+    } as typeof history.replaceState;
+    return () => {
+      window.removeEventListener("popstate", bump);
+      window.removeEventListener("hashchange", bump);
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+    };
+  }, []);
+  return version;
+}
+
+function resolvePressPdfUrl(basePdfUrl: string | undefined, slug: string): string | undefined {
+  if (!basePdfUrl) return undefined;
+  const lastSlash = basePdfUrl.lastIndexOf("/");
+  const dir = lastSlash >= 0 ? basePdfUrl.slice(0, lastSlash + 1) : "";
+  const filename = lastSlash >= 0 ? basePdfUrl.slice(lastSlash + 1) : basePdfUrl;
+  const dot = filename.lastIndexOf(".");
+  const stem = dot >= 0 ? filename.slice(0, dot) : filename;
+  const ext = dot >= 0 ? filename.slice(dot) : "";
+  return `${dir}${stem}-${slug}${ext}`;
+}
+
 function themeToCssVariables(theme?: Theme) {
   const style: CSSProperties & Record<`--${string}`, string> = {
     "--openpress-font-family": theme?.fontFamily ?? "'Noto Sans TC', 'PingFang TC', sans-serif",

package/src/openpress/reader/PageThumbnailsPanel.tsx

@@ -13,11 +13,15 @@ export function PageThumbnails({
   pages,
   currentPageIndex,
   onSelectPage,
+  selectedPageIndexes,
+  onTogglePage,
   theme,
 }: {
   pages: HtmlPageBlock[];
   currentPageIndex: number;
   onSelectPage: (pageIndex: number, options?: { behavior?: ScrollBehavior }) => void;
+  selectedPageIndexes?: ReadonlySet<number>;
+  onTogglePage?: (pageIndex: number) => void;
   theme?: Theme;
 }) {
   const pageWidthPx = parsePxLength(theme?.pageWidth) ?? FALLBACK_PAGE_WIDTH_PX;
@@ -40,7 +44,15 @@ export function PageThumbnails({
             page={page}
             index={index}
             active={index === currentPageIndex}
-            onClick={() => onSelectPage(index, { behavior: "smooth" })}
+            selected={selectedPageIndexes?.has(index) ?? false}
+            selectionMode={Boolean(selectedPageIndexes && onTogglePage)}
+            onClick={() => {
+              if (selectedPageIndexes && onTogglePage) {
+                onTogglePage(index);
+                return;
+              }
+              onSelectPage(index, { behavior: "smooth" });
+            }}
             pageWidthPx={pageWidthPx}
             pageHeightPx={pageHeightPx}
             aspectRatio={aspectRatio}
@@ -55,6 +67,8 @@ function ThumbnailCard({
   page,
   index,
   active,
+  selected,
+  selectionMode,
   onClick,
   pageWidthPx,
   pageHeightPx,
@@ -63,6 +77,8 @@ function ThumbnailCard({
   page: HtmlPageBlock;
   index: number;
   active: boolean;
+  selected: boolean;
+  selectionMode: boolean;
   onClick: () => void;
   pageWidthPx: number;
   pageHeightPx: number;
@@ -92,7 +108,7 @@ function ThumbnailCard({
     cardRef.current?.scrollIntoView({ block: "nearest" });
   }, [active]);
 
-  const className = `openpress-thumb-card${active ? " is-active" : ""}`;
+  const className = `openpress-thumb-card${active ? " is-active" : ""}${selected ? " is-selected" : ""}`;
   // Wrap the page HTML using the same class structure as the main
   // reader (`.openpress-html-page > .openpress-html-page__html`) so
   // section-scoped CSS that targets those classes still applies in
@@ -124,12 +140,14 @@ function ThumbnailCard({
   return (
     <div
       ref={cardRef}
-      role="button"
+      role={selectionMode ? "checkbox" : "button"}
       tabIndex={0}
       className={className}
       data-openpress-thumb-index={index}
-      aria-label={`前往第 ${index + 1} 頁：${pageTitle}`}
-      aria-current={active ? "page" : undefined}
+      data-openpress-thumb-selected={selectionMode ? (selected ? "true" : "false") : undefined}
+      aria-label={selectionMode ? `選取第 ${index + 1} 頁：${pageTitle}` : `前往第 ${index + 1} 頁：${pageTitle}`}
+      aria-checked={selectionMode ? selected : undefined}
+      aria-current={!selectionMode && active ? "page" : undefined}
       onClick={onClick}
       onKeyDown={(event) => {
         if (event.key === "Enter" || event.key === " ") {
@@ -138,6 +156,11 @@ function ThumbnailCard({
         }
       }}
     >
+      {selectionMode ? (
+        <span className="openpress-thumb-card__check" aria-hidden="true">
+          {selected ? "✓" : ""}
+        </span>
+      ) : null}
       <div className="openpress-thumb-card__surface" ref={surfaceRef} style={{ aspectRatio }}>
         <div className="openpress-thumb-card__frame" style={frameStyle}>
           <div className={pageClass} style={pageStyle} data-openpress-thumb-page="true">

package/src/openpress/reader/PublicReaderPage.tsx

@@ -1,28 +1,37 @@
 import {
+  useCallback,
+  useEffect,
   useMemo,
   useRef,
+  useState,
   type CSSProperties,
   type MouseEvent as ReactMouseEvent,
   type RefCallback,
   type RefObject,
 } from "react";
-import { BookOpen, ExternalLink, X } from "lucide-react";
+import { ExternalLink, Ruler } from "lucide-react";
 import {
   collectBookmarkIndex,
   createAnchorPageMap,
   createPageObjectEntityId,
   getProjectIdentity,
+  getSourceBlockMap,
   resolveAnchorPageIndex,
   type DeploymentInfo,
   type HtmlPageBlock,
   type ReaderDocument,
 } from "../document-model";
 import type { InspectorState } from "../workbench/inspector";
+import { groupSourceBlocksByPath } from "../workbench/inspector";
 import { useReaderRuntime } from "./useReaderRuntime";
 import { Bookmarks, CurrentPagePanel } from "./ReaderNavigationPanel";
 import type { DisplayPage } from "./readerTypes";
 import { usePageViewportScale } from "./usePageViewportScale";
 import type { PageLayoutMode } from "./pageViewportScaleModel";
+import { PageZoomControl, SearchControl, type SearchControlSearcher } from "../workbench/actions";
+import { WorkbenchShell } from "../workbench/shell";
+import { formatPageGeometrySpec } from "../workbench/workbenchFormatters";
+import { searchCorpus, type SearchCorpus } from "../shared";
 
 export const PUBLIC_DRAWER_BREAKPOINT = 1185;
 export type ViewMode = "paged";
@@ -41,29 +50,60 @@ export function PublicViewer({
 }) {
   const sourceContainerRef = useRef<HTMLDivElement | null>(null);
   const displayPages = pages;
-  const viewModeState = useViewMode();
-  const { viewMode } = viewModeState;
+  const { viewMode } = useViewMode();
   const bookmarks = collectBookmarkIndex(displayPages);
   const anchorPageMap = useMemo(() => createAnchorPageMap(displayPages), [displayPages]);
   const reader = useReaderRuntime({
     pageCount: displayPages.length,
+    leftPanelBreakpoint: PUBLIC_DRAWER_BREAKPOINT,
     rightPanelBreakpoint: PUBLIC_DRAWER_BREAKPOINT,
   });
-  usePageViewportScale({
+  const [pageLayoutMode, setPageLayoutMode] = useState<PageLayoutMode>("single");
+  const pageViewport = usePageViewportScale({
     stageRef: reader.stageRef,
     pageContainerRef: sourceContainerRef,
     pageCount: displayPages.length,
-    layoutMode: "single",
+    layoutMode: pageLayoutMode,
   });
   const currentPage = displayPages[reader.currentPageIndex];
   const staticPdfHref = deploymentInfo.pdf;
   const projectIdentity = getProjectIdentity(document.meta);
+  const pressType = document.meta.type === "slides" ? "slides" : "pages";
+  const pageGeometry = formatPageGeometrySpec(document.theme);
+  const sourceBlocksByPath = useMemo(
+    () => groupSourceBlocksByPath(getSourceBlockMap(document)),
+    [document],
+  );
 
-  const drawerOpen = reader.rightPanelOpen;
+  // Static searcher: lazy-fetch /openpress/search-corpus.json on first
+  // query, cache for subsequent searches, then run the same literal-match
+  // logic the dev endpoint uses — no backend required for deployed pages.
+  const corpusRef = useRef<SearchCorpus | null>(null);
+  const corpusFetchRef = useRef<Promise<SearchCorpus> | null>(null);
+  const staticSearcher = useCallback<SearchControlSearcher>(async ({ query, scope, signal }) => {
+    if (!corpusRef.current) {
+      if (!corpusFetchRef.current) {
+        corpusFetchRef.current = fetch("/openpress/search-corpus.json", { cache: "force-cache" })
+          .then(async (response) => {
+            if (!response.ok) throw new Error(`Failed to load search corpus (${response.status})`);
+            return (await response.json()) as SearchCorpus;
+          })
+          .catch((error) => {
+            corpusFetchRef.current = null;
+            throw error;
+          });
+      }
+      const corpus = await corpusFetchRef.current;
+      if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+      corpusRef.current = corpus;
+    }
+    if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+    return searchCorpus(corpusRef.current, { query, scope, caseSensitive: false });
+  }, []);
 
   const selectPublicPage = (pageIndex: number, options?: { behavior?: ScrollBehavior }) => {
     reader.setPage(pageIndex, options);
-    if (window.innerWidth < PUBLIC_DRAWER_BREAKPOINT && drawerOpen) reader.toggleRightPanel();
+    if (window.innerWidth < PUBLIC_DRAWER_BREAKPOINT && reader.leftPanelOpen) reader.toggleLeftPanel();
   };
 
   const selectPublicAnchor = (anchorId: string, pageIndex?: number) => {
@@ -73,84 +113,112 @@ export function PublicViewer({
     return true;
   };
 
-  const appClassName = [
-    "reader-app openpress-reader-app openpress-public-viewer is-ready",
-    drawerOpen ? "" : "is-closed-right",
-  ].filter(Boolean).join(" ");
-
   const handleOpenStaticPdf = () => {
     if (!staticPdfHref) return;
     window.open(staticPdfHref, "_blank", "noopener,noreferrer");
   };
 
   return (
-    <main className="openpress-workbench openpress-public-shell" style={style} data-openpress-public-viewer="true" aria-label={`${document.meta.title} 公開頁`}>
-      <div
-        className={appClassName}
-        data-openpress-react-runtime="true"
-        data-openpress-view-mode={viewMode}
-      >
-        {drawerOpen && (
-          <div className="openpress-public-scrim" aria-hidden="true" onClick={reader.toggleRightPanel} />
-        )}
-        <button type="button" className="openpress-public-fab" aria-label="開啟目錄" onClick={reader.toggleRightPanel}>
-          <BookOpen size={20} aria-hidden="true" />
-        </button>
+    <WorkbenchShell
+      style={style}
+      viewMode={viewMode}
+      pressType={pressType}
+      inspectorMode={false}
+      leftPanelOpen={reader.leftPanelOpen}
+      rightPanelOpen={false}
+      onToggleLeftPanel={reader.toggleLeftPanel}
+      onToggleRightPanel={reader.toggleLeftPanel}
+      withRightPanel={false}
+      publicViewer
+    >
+      <WorkbenchShell.Toolbar>
+        <div className="openpress-workbench-toolbar__group" aria-label="輸出">
+          <button
+            type="button"
+            className="openpress-workbench-toolbar-action"
+            data-openpress-public-export
+            disabled={!staticPdfHref}
+            onClick={handleOpenStaticPdf}
+            title={staticPdfHref ? "開啟 PDF" : "PDF 未部署"}
+            aria-label={staticPdfHref ? "開啟 PDF" : "PDF 未部署"}
+          >
+            <ExternalLink aria-hidden="true" />
+            <span className="openpress-workbench-toolbar-action__label">
+              {staticPdfHref ? "開啟 PDF" : "PDF 未部署"}
+            </span>
+          </button>
+        </div>
+        <div className="openpress-workbench-toolbar__group openpress-workbench-toolbar__group--page" aria-label="頁面規格">
+          <button
+            type="button"
+            className="openpress-workbench-page-geometry"
+            data-openpress-page-geometry
+            title={pageGeometry.title}
+            aria-label={`頁面規格 ${pageGeometry.title}`}
+          >
+            <Ruler aria-hidden="true" />
+            <span className="openpress-workbench-page-geometry__label">{pageGeometry.label}</span>
+            <span className="openpress-workbench-page-geometry__dimensions">{pageGeometry.dimensions}</span>
+          </button>
+          <PageZoomControl
+            scaleMode={pageViewport.scaleMode}
+            scaleLabel={pageViewport.scaleLabel}
+            pageLayoutMode={pageLayoutMode}
+            onScaleModeChange={pageViewport.setScaleMode}
+            onPageLayoutModeChange={setPageLayoutMode}
+          />
+          <SearchControl
+            sourceBlocksByPath={sourceBlocksByPath}
+            onSelectPage={selectPublicPage}
+            searcher={staticSearcher}
+          />
+        </div>
+      </WorkbenchShell.Toolbar>
 
-        <section className="openpress-workbench__stage openpress-public-viewer__stage" aria-label="公開文件頁面">
-          <main className="reader-stage" tabIndex={-1} ref={reader.stageRef}>
-            <PublicPage
-              pages={displayPages}
-              currentPageIndex={reader.currentPageIndex}
-              devMode={false}
-              sourceContainerRef={sourceContainerRef}
-              registerPage={reader.registerPage}
-              onInternalAnchorNavigate={selectPublicAnchor}
-            />
-          </main>
+      <WorkbenchShell.LeftPanel>
+        <section className="openpress-public-identity" aria-label="文件資訊">
+          <strong>
+            <span className="openpress-public-title-main">{projectIdentity.name}</span>
+            {projectIdentity.subtitle ? <span className="openpress-public-title-sub">{projectIdentity.subtitle}</span> : null}
+          </strong>
+          {projectIdentity.label ? <span>{projectIdentity.label}</span> : null}
         </section>
-
-        <aside className="reader-side-nav openpress-workspace-panel openpress-public-navigation" aria-label="文件導覽">
-          <button type="button" className="openpress-public-drawer-close" aria-label="關閉目錄" onClick={reader.toggleRightPanel}>
-            <X size={16} aria-hidden="true" />
-          </button>
-          <section className="openpress-public-identity" aria-label="文件資訊">
-            <strong>
-              <span className="openpress-public-title-main">{projectIdentity.name}</span>
-              {projectIdentity.subtitle ? <span className="openpress-public-title-sub">{projectIdentity.subtitle}</span> : null}
-            </strong>
-            {projectIdentity.label ? <span>{projectIdentity.label}</span> : null}
-          </section>
-          <div className="openpress-public-actions" aria-label="文件操作">
-            <button
-              type="button"
-              className="openpress-public-export-button"
-              data-openpress-public-export
-              disabled={!staticPdfHref}
-              onClick={handleOpenStaticPdf}
-            >
-              <ExternalLink aria-hidden="true" />
-              {!staticPdfHref ? "PDF 未部署" : "開啟 PDF"}
-            </button>
-          </div>
-          <section id="openpress-bookmarks" className="openpress-panel-section openpress-panel-section--bookmarks" aria-label="章節書籤">
+        {bookmarks.length > 0 ? (
+          <section
+            id="openpress-bookmarks"
+            className="openpress-panel-section openpress-panel-section--bookmarks"
+            aria-label="章節書籤"
+          >
             <nav className="reader-bookmarks" aria-label="章節導覽" data-openpress-react-bookmarks="true">
               <div className="reader-bookmarks-rail" aria-hidden="true" />
               <Bookmarks items={bookmarks} currentPageIndex={reader.currentPageIndex} onSelectPage={selectPublicPage} />
             </nav>
           </section>
-          <CurrentPagePanel
-            currentPageLabel={reader.currentPageLabel}
-            totalPageLabel={reader.totalPageLabel}
-            progressPercent={reader.progressPercent}
-            title={currentPage?.title || document.meta.title}
-            pageLabelPrefix="頁"
-            showHeading={false}
-            showTitle={false}
+        ) : null}
+        <CurrentPagePanel
+          currentPageLabel={reader.currentPageLabel}
+          totalPageLabel={reader.totalPageLabel}
+          progressPercent={reader.progressPercent}
+          title={currentPage?.title || document.meta.title}
+          pageLabelPrefix="頁"
+          showHeading={false}
+          showTitle={false}
+        />
+      </WorkbenchShell.LeftPanel>
+
+      <WorkbenchShell.MainContent>
+        <main className="reader-stage" tabIndex={-1} ref={reader.stageRef}>
+          <PublicPage
+            pages={displayPages}
+            currentPageIndex={reader.currentPageIndex}
+            sourceContainerRef={sourceContainerRef}
+            registerPage={reader.registerPage}
+            onInternalAnchorNavigate={selectPublicAnchor}
+            pageLayoutMode={pageLayoutMode}
           />
-        </aside>
-      </div>
-    </main>
+        </main>
+      </WorkbenchShell.MainContent>
+    </WorkbenchShell>
   );
 }
 
@@ -171,6 +239,30 @@ export function PrintDocument({
   const displayPages = pages;
   const registerPage = () => () => undefined;
 
+  // Mirror the per-document page geometry vars onto :root so the @page
+  // rule in print-route.css can resolve them. CSS custom properties set
+  // on <main> never reach @page in any browser; without this, headless
+  // Chrome falls back to the workspace theme default (210mm × 297mm A4)
+  // and slide/social/landscape presses print onto the wrong paper.
+  useEffect(() => {
+    if (typeof document === "undefined" || typeof window === "undefined") return undefined;
+    const root = window.document.documentElement;
+    const overrides: Array<[string, string]> = [];
+    for (const [key, value] of Object.entries(style)) {
+      if (typeof key === "string" && key.startsWith("--") && typeof value === "string") {
+        overrides.push([key, value]);
+      }
+    }
+    const previous = overrides.map(([key]) => [key, root.style.getPropertyValue(key)] as const);
+    overrides.forEach(([key, value]) => root.style.setProperty(key, value));
+    return () => {
+      previous.forEach(([key, value]) => {
+        if (value) root.style.setProperty(key, value);
+        else root.style.removeProperty(key);
+      });
+    };
+  }, [style]);
+
   return (
     <main
       className="openpress-print-document"
@@ -181,7 +273,6 @@ export function PrintDocument({
       <PublicPage
         pages={displayPages}
         currentPageIndex={0}
-        devMode={false}
         sourceContainerRef={sourceContainerRef}
         registerPage={registerPage}
         exposeSourceData
@@ -193,7 +284,6 @@ export function PrintDocument({
 export function PublicPage({
   pages,
   currentPageIndex,
-  devMode,
   sourceContainerRef,
   registerPage,
   exposeSourceData = false,
@@ -203,7 +293,6 @@ export function PublicPage({
 }: {
   pages: DisplayPage[];
   currentPageIndex: number;
-  devMode: boolean;
   sourceContainerRef: RefObject<HTMLDivElement | null>;
   registerPage: (pageIndex: number) => RefCallback<HTMLElement>;
   exposeSourceData?: boolean;

package/src/openpress/reader/SlidePresentationPage.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent } from "react";
-import { Maximize2, X } from "lucide-react";
+import { Download, Maximize2, X } from "lucide-react";
 import { createPageObjectEntityId } from "../document-model";
-import type { HtmlPageBlock, ReaderDocument } from "../document-model";
+import type { DeploymentInfo, HtmlPageBlock, ReaderDocument } from "../document-model";
 import { pageIndexFromHash, replacePageRoute } from "./readerPageRoute";
 import { clampReaderPageIndex, formatReaderPageNumber, normalizeReaderPageCount } from "./readerStateModel";
 import { usePageViewportScale } from "./usePageViewportScale";
@@ -13,11 +13,13 @@ export function SlidePresentationPage({
   pages,
   style,
   onExitPresentation,
+  deploymentInfo,
 }: {
   document: ReaderDocument;
   pages: HtmlPageBlock[];
   style: CSSProperties;
   onExitPresentation?: (pageIndex: number) => void;
+  deploymentInfo?: DeploymentInfo;
 }) {
   const sourceContainerRef = useRef<HTMLDivElement | null>(null);
   const stageRef = useRef<HTMLElement | null>(null);
@@ -35,6 +37,8 @@ export function SlidePresentationPage({
     pageContainerRef: sourceContainerRef,
     pageCount: pages.length,
     layoutMode: "single",
+    initialScaleMode: "fit-page",
+    maxFitScale: Infinity,
   });
   const currentPage = pages[clampReaderPageIndex(currentPageIndex, normalizedPageCount)];
   const currentPageLabel = formatReaderPageNumber(currentPageIndex + 1);
@@ -66,13 +70,11 @@ export function SlidePresentationPage({
     const handleKeyDown = (event: KeyboardEvent) => {
       if (isEditableTarget(event.target)) return;
       if (event.key === "Escape") {
-        event.preventDefault();
         const activeDocument = globalThis.document;
         if (activeDocument.fullscreenElement && activeDocument.exitFullscreen) {
+          event.preventDefault();
           void activeDocument.exitFullscreen();
-          return;
         }
-        onExitPresentation?.(currentPageIndexRef.current);
         return;
       }
       if (event.key === " " || event.code === "Space") {
@@ -178,6 +180,11 @@ export function SlidePresentationPage({
       </section>
 
       <div className="openpress-slide-presenter__hud" aria-label="放映控制">
+        {deploymentInfo && document.meta.title ? (
+          <span className="openpress-slide-presenter__title" aria-label="簡報標題">
+            {document.meta.title}
+          </span>
+        ) : null}
         <span
           className="openpress-slide-presenter__progress"
           data-openpress-present-progress
@@ -195,16 +202,31 @@ export function SlidePresentationPage({
         >
           <Maximize2 aria-hidden="true" />
         </button>
-        <button
-          type="button"
-          className="openpress-slide-presenter__button"
-          data-openpress-present-exit
-          onClick={() => onExitPresentation?.(currentPageIndex)}
-          aria-label="回到工作台"
-          title="回到工作台"
-        >
-          <X aria-hidden="true" />
-        </button>
+        {deploymentInfo?.pdf ? (
+          <a
+            href={deploymentInfo.pdf}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="openpress-slide-presenter__button"
+            data-openpress-present-pdf
+            aria-label="下載 PDF"
+            title="下載 PDF"
+          >
+            <Download aria-hidden="true" />
+          </a>
+        ) : null}
+        {onExitPresentation ? (
+          <button
+            type="button"
+            className="openpress-slide-presenter__button"
+            data-openpress-present-exit
+            onClick={() => onExitPresentation(currentPageIndex)}
+            aria-label="回到工作台"
+            title="回到工作台"
+          >
+            <X aria-hidden="true" />
+          </button>
+        ) : null}
       </div>
     </main>
   );