@open-press/core 1.2.0 → 1.3.1

package/src/openpress/document-model/workspaceManifestModel.ts

@@ -1,10 +1,6 @@
 // Shape of /openpress/workspace.json — the reader fetches this on
 // boot to decide between gallery routing (multi-Press) and direct
-// load (single Press). One entry per <Press> child of <Workspace>.
-//
-// Single-Press workspaces emit one entry with slug = "" and the
-// legacy /openpress/document.json path. Multi-Press emits one entry
-// per slug; each `documentUrl` resolves to /openpress/<slug>/document.json.
+// load (single Press). One entry per discovered Press folder.
 import type { PressType } from "./documentTypes";
 
 export interface WorkspaceManifest {
@@ -16,13 +12,12 @@ export interface WorkspaceManifest {
 }
 
 export interface WorkspaceManifestPress {
-  // Slug for this Press. Empty string for single-Press workspaces
-  // (legacy root); slug-shaped string for multi-Press.
+  // Slug for this Press. Matches the folder-convention Press slug.
   slug: string;
   // <Press title="..."> prop. Required in v1.0 contract.
   title: string;
-  // Creation mode declared by <Press type>. Defaults to "pages" for older
-  // documents. The reader uses this for mode-specific navigation affordances.
+  // Creation mode declared by <Press type>. The reader uses this for
+  // mode-specific navigation affordances.
   type: PressType;
   // Page geometry summary. Same shape as the reader's
   // ReaderDocument.theme — readers can show a thumb in the gallery

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/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,6 @@ export function SlidePresentationPage({
     const handleKeyDown = (event: KeyboardEvent) => {
       if (isEditableTarget(event.target)) return;
       if (event.key === "Escape") {
-        // Esc is reserved for exiting browser fullscreen. The chrome HUD
-        // already exposes explicit "re-enter fullscreen" and "close"
-        // buttons; navigating out of the presenter from a stray keystroke
-        // would yank the user back to the workspace shell unexpectedly
-        // (and racily, since the same Esc that triggered the browser's
-        // fullscreen exit is also delivered to this handler with
-        // fullscreenElement already null).
         const activeDocument = globalThis.document;
         if (activeDocument.fullscreenElement && activeDocument.exitFullscreen) {
           event.preventDefault();
@@ -183,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
@@ -200,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>
   );

package/src/openpress/reader/SlidePublicPage.tsx

@@ -0,0 +1,332 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type MouseEvent as ReactMouseEvent,
+} from "react";
+import { ChevronLeft, ChevronRight, Download, Maximize2, Minimize2, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { createPageObjectEntityId } 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";
+import { PageThumbnails } from "./PageThumbnailsPanel";
+
+type SlideUiMode = "chrome" | "immersive";
+
+export function SlidePublicViewer({
+  document,
+  pages,
+  style,
+  deploymentInfo,
+}: {
+  document: ReaderDocument;
+  pages: HtmlPageBlock[];
+  style: CSSProperties;
+  deploymentInfo?: DeploymentInfo;
+}) {
+  const stageRef = useRef<HTMLElement | null>(null);
+  const sourceContainerRef = useRef<HTMLDivElement | null>(null);
+  const currentPageIndexRef = useRef(0);
+  const normalizedPageCount = normalizeReaderPageCount(pages.length);
+
+  const [currentPageIndex, setCurrentPageIndex] = useState(() => {
+    if (typeof window === "undefined") return 0;
+    return pageIndexFromHash(window.location.hash, normalizedPageCount) ?? 0;
+  });
+  const [uiMode, setUiMode] = useState<SlideUiMode>("chrome");
+  const [thumbPanelOpen, setThumbPanelOpen] = useState(true);
+
+  currentPageIndexRef.current = currentPageIndex;
+
+  const currentPage = pages[clampReaderPageIndex(currentPageIndex, normalizedPageCount)];
+  const currentPageLabel = formatReaderPageNumber(currentPageIndex + 1);
+  const totalPageLabel = formatReaderPageNumber(normalizedPageCount);
+  const pageHtml = useMemo(() => currentPage?.html ?? "", [currentPage?.html]);
+
+  const pageViewport = usePageViewportScale({
+    stageRef,
+    pageContainerRef: sourceContainerRef,
+    pageCount: pages.length,
+    layoutMode: "single",
+    initialScaleMode: "fit-width",
+    maxFitScale: Infinity,
+  });
+
+  const setPage = useCallback(
+    (pageIndex: number) => {
+      const target = clampReaderPageIndex(pageIndex, normalizedPageCount);
+      setCurrentPageIndex(target);
+      replacePageRoute(target);
+    },
+    [normalizedPageCount],
+  );
+
+  // Clamp on page count change
+  useEffect(() => {
+    setCurrentPageIndex((idx) => clampReaderPageIndex(idx, normalizedPageCount));
+  }, [normalizedPageCount]);
+
+  // Hash sync
+  useEffect(() => {
+    const sync = () => {
+      const fromHash = pageIndexFromHash(window.location.hash, normalizedPageCount);
+      if (fromHash !== null) setCurrentPageIndex(fromHash);
+    };
+    sync();
+    window.addEventListener("hashchange", sync);
+    return () => window.removeEventListener("hashchange", sync);
+  }, [normalizedPageCount]);
+
+  // Auto-enter immersive when ?fullscreen=1 is in the URL (e.g., launched from workbench play button)
+  useEffect(() => {
+    if (!shouldStartImmersive()) return;
+    setUiMode("immersive");
+    const root = globalThis.document.documentElement;
+    if (root?.requestFullscreen) {
+      void root.requestFullscreen().catch(() => {
+        // Fullscreen rejected — keep immersive CSS only.
+      });
+    }
+  }, []);
+
+  // Fullscreen change
+  useEffect(() => {
+    const handler = () => {
+      setUiMode(globalThis.document.fullscreenElement ? "immersive" : "chrome");
+    };
+    globalThis.document.addEventListener("fullscreenchange", handler);
+    return () => globalThis.document.removeEventListener("fullscreenchange", handler);
+  }, []);
+
+  // Keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isEditableTarget(event.target)) return;
+
+      if (event.key === "Escape") {
+        const activeDoc = globalThis.document;
+        if (activeDoc.fullscreenElement && activeDoc.exitFullscreen) {
+          event.preventDefault();
+          void activeDoc.exitFullscreen();
+        }
+        return;
+      }
+
+      if (event.key === "f" || event.key === "F") {
+        event.preventDefault();
+        enterImmersive();
+        return;
+      }
+
+      if (event.key === " " || event.code === "Space" || event.key === "ArrowRight" || event.key === "PageDown") {
+        event.preventDefault();
+        setPage(currentPageIndexRef.current + 1);
+      } else if (event.key === "ArrowLeft" || event.key === "PageUp") {
+        event.preventDefault();
+        setPage(currentPageIndexRef.current - 1);
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        setPage(0);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        setPage(normalizedPageCount - 1);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [normalizedPageCount, setPage]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const enterImmersive = () => {
+    setUiMode("immersive");
+    const root = globalThis.document.documentElement;
+    if (root?.requestFullscreen) {
+      void root.requestFullscreen().catch(() => {
+        // Fullscreen rejected (e.g. gesture policy) — keep immersive CSS only.
+      });
+    }
+  };
+
+  const exitImmersive = () => {
+    const activeDoc = globalThis.document;
+    if (activeDoc.fullscreenElement && activeDoc.exitFullscreen) {
+      void activeDoc.exitFullscreen();
+    } else {
+      setUiMode("chrome");
+    }
+  };
+
+  const handleStageClick = (event: ReactMouseEvent<HTMLElement>) => {
+    if (uiMode !== "immersive") return;
+    if (event.defaultPrevented) return;
+    if (!(event.target instanceof Element)) return;
+    if (event.target.closest("a, button, input, textarea, select, [contenteditable]")) return;
+    setPage(currentPageIndexRef.current + 1);
+  };
+
+  const LeftIcon = thumbPanelOpen ? PanelLeftClose : PanelLeftOpen;
+  const leftLabel = thumbPanelOpen ? "收合縮圖面板" : "展開縮圖面板";
+  const pdfHref = deploymentInfo?.pdf;
+
+  return (
+    <main
+      className="openpress-workbench openpress-reader-app openpress-slide-public"
+      style={style}
+      data-openpress-react-runtime="true"
+      data-openpress-view-mode="paged"
+      data-openpress-press-type="slides"
+      data-openpress-presentation-mode={uiMode === "immersive" ? "on" : "off"}
+      data-openpress-present-ui={uiMode}
+      aria-label={`${document.meta.title} 投影片瀏覽`}
+    >
+      {/* Top toolbar — chrome mode only */}
+      <header
+        className="openpress-workbench-toolbar openpress-slide-public__toolbar"
+        role="toolbar"
+        aria-label="投影片操作"
+        data-openpress-slide-public-toolbar
+      >
+        <button
+          type="button"
+          className="openpress-workbench-toolbar-panel-toggle"
+          aria-label={leftLabel}
+          title={leftLabel}
+          onClick={() => setThumbPanelOpen((v) => !v)}
+        >
+          <LeftIcon aria-hidden="true" />
+        </button>
+
+        <div className="openpress-slide-public__nav" aria-label="翻頁">
+          <button
+            type="button"
+            className="openpress-workbench-toolbar-action openpress-slide-public__nav-btn"
+            onClick={() => setPage(currentPageIndex - 1)}
+            disabled={currentPageIndex === 0}
+            aria-label="上一頁"
+            title="上一頁"
+          >
+            <ChevronLeft aria-hidden="true" />
+          </button>
+          <span className="openpress-slide-public__counter" aria-live="polite" aria-label={`第 ${currentPageLabel} 頁，共 ${totalPageLabel} 頁`}>
+            {currentPageLabel} / {totalPageLabel}
+          </span>
+          <button
+            type="button"
+            className="openpress-workbench-toolbar-action openpress-slide-public__nav-btn"
+            onClick={() => setPage(currentPageIndex + 1)}
+            disabled={currentPageIndex >= normalizedPageCount - 1}
+            aria-label="下一頁"
+            title="下一頁"
+          >
+            <ChevronRight aria-hidden="true" />
+          </button>
+        </div>
+
+        <div className="openpress-workbench-toolbar__content" />
+
+        <div className="openpress-workbench-toolbar__group" aria-label="視圖">
+          <button
+            type="button"
+            className="openpress-workbench-toolbar-action"
+            onClick={enterImmersive}
+            aria-label="進入全螢幕放映"
+            title="全螢幕放映 (F)"
+          >
+            <Maximize2 aria-hidden="true" />
+          </button>
+          {pdfHref ? (
+            <a
+              href={pdfHref}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="openpress-workbench-toolbar-action"
+              aria-label="下載 PDF"
+              title="下載 PDF"
+            >
+              <Download aria-hidden="true" />
+            </a>
+          ) : null}
+        </div>
+      </header>
+
+      {/* Body: thumb panel + stage */}
+      <div className="openpress-slide-public__body">
+        {/* Thumbnail panel */}
+        <aside
+          className={`openpress-slide-public__thumbs${thumbPanelOpen ? "" : " is-closed"}`}
+          aria-label="投影片縮圖"
+          data-openpress-slide-public-thumbs
+        >
+          <PageThumbnails
+            pages={pages}
+            currentPageIndex={currentPageIndex}
+            onSelectPage={setPage}
+            theme={document.theme}
+          />
+        </aside>
+
+        {/* Main slide stage */}
+        <section
+          className="openpress-slide-public__stage"
+          aria-label="投影片檢視區"
+          onClick={handleStageClick}
+          ref={stageRef}
+        >
+          <div
+            className="reader-pages openpress-public-page openpress-slide-public__pages"
+            ref={sourceContainerRef}
+            data-openpress-public-page="true"
+            data-openpress-page-layout="single"
+          >
+            {currentPage ? (
+              <div
+                key={currentPage.id}
+                id={`page-${String(currentPage.pageNumber).padStart(2, "0")}`}
+                className="openpress-html-page"
+                data-openpress-object-id={currentPage.frameKey ? createPageObjectEntityId(currentPage.frameKey) : undefined}
+                data-openpress-page-index={currentPage.pageNumber - 1}
+                data-openpress-active="true"
+              >
+                <div className="openpress-html-page__html" dangerouslySetInnerHTML={{ __html: pageHtml }} />
+              </div>
+            ) : null}
+          </div>
+        </section>
+      </div>
+
+      {/* Immersive mini HUD — fullscreen mode only */}
+      <div
+        className="openpress-slide-public__mini-hud"
+        aria-label="放映控制"
+        data-openpress-present-scale={pageViewport.scaleMode}
+      >
+        <span className="openpress-slide-public__mini-counter">
+          {currentPageLabel} / {totalPageLabel}
+        </span>
+        <button
+          type="button"
+          className="openpress-slide-public__mini-btn"
+          onClick={exitImmersive}
+          aria-label="離開全螢幕"
+          title="離開全螢幕 (Esc)"
+        >
+          <Minimize2 aria-hidden="true" />
+        </button>
+      </div>
+    </main>
+  );
+}
+
+function isEditableTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) return false;
+  return Boolean(target.closest("input, textarea, select, button, [contenteditable]"));
+}
+
+function shouldStartImmersive() {
+  if (typeof window === "undefined") return false;
+  return new URLSearchParams(window.location.search).get("fullscreen") === "1";
+}

package/src/openpress/reader/index.ts

@@ -1,6 +1,7 @@
 export * from "./PageThumbnailsPanel";
 export * from "./PublicReaderPage";
 export * from "./ReaderNavigationPanel";
+export * from "./SlidePublicPage";
 export * from "./SlidePresentationPage";
 export * from "./pageViewportScaleModel";
 export * from "./readerPageRegistry";

package/src/openpress/reader/pageViewportScaleModel.ts

@@ -34,13 +34,15 @@ export function resolvePageViewportScale({
   mode,
   fitWidthScale,
   fitPageScale,
+  maxFitScale = MAX_FIT_PAGE_VIEWPORT_SCALE,
 }: {
   mode: PageViewportScaleMode;
   fitWidthScale: number;
   fitPageScale: number;
+  maxFitScale?: number;
 }) {
-  if (mode === "fit-width") return clampPageViewportScale(fitWidthScale, MAX_FIT_PAGE_VIEWPORT_SCALE);
-  if (mode === "fit-page") return clampPageViewportScale(fitPageScale, MAX_FIT_PAGE_VIEWPORT_SCALE);
+  if (mode === "fit-width") return clampPageViewportScale(fitWidthScale, maxFitScale);
+  if (mode === "fit-page") return clampPageViewportScale(fitPageScale, maxFitScale);
   return scaleModeToFixedValue(mode);
 }
 
@@ -68,6 +70,6 @@ function scaleModeToFixedValue(mode: PageViewportScaleMode) {
 
 function clampPageViewportScale(value: number, maxScale: number) {
   if (!Number.isFinite(value)) return 1;
-  const safeMaxScale = Number.isFinite(maxScale) && maxScale > 0 ? maxScale : MAX_FIXED_PAGE_VIEWPORT_SCALE;
+  const safeMaxScale = maxScale > 0 ? maxScale : MAX_FIXED_PAGE_VIEWPORT_SCALE;
   return Math.min(Math.max(value, MIN_PAGE_VIEWPORT_SCALE), safeMaxScale);
 }

package/src/openpress/reader/usePageViewportScale.ts

@@ -13,13 +13,17 @@ export function usePageViewportScale({
   pageContainerRef,
   pageCount,
   layoutMode = "single",
+  initialScaleMode = "fit-width",
+  maxFitScale = 1,
 }: {
   stageRef: RefObject<HTMLElement | null>;
   pageContainerRef: RefObject<HTMLElement | null>;
   pageCount: number;
   layoutMode?: PageLayoutMode;
+  initialScaleMode?: PageViewportScaleMode;
+  maxFitScale?: number;
 }) {
-  const [scaleMode, setScaleMode] = useState<PageViewportScaleMode>("fit-width");
+  const [scaleMode, setScaleMode] = useState<PageViewportScaleMode>(initialScaleMode);
   const [scale, setScale] = useState(1);
 
   useLayoutEffect(() => {
@@ -66,7 +70,7 @@ export function usePageViewportScale({
         const fitPageScale = canonicalWidth > 0 && canonicalHeight > 0
           ? Math.min(availableWidth / canonicalWidth, availableHeight / canonicalHeight)
           : 1;
-        const nextScale = resolvePageViewportScale({ mode: scaleMode, fitWidthScale, fitPageScale });
+        const nextScale = resolvePageViewportScale({ mode: scaleMode, fitWidthScale, fitPageScale, maxFitScale });
         const nextScaleValue = formatPageViewportScaleValue(nextScale);
 
         container.style.setProperty("--openpress-page-viewport-scale", nextScaleValue);
@@ -93,16 +97,16 @@ export function usePageViewportScale({
       window.removeEventListener("resize", syncScale);
       window.visualViewport?.removeEventListener("resize", syncScale);
     };
-  }, [layoutMode, pageContainerRef, pageCount, scaleMode, stageRef]);
+  }, [layoutMode, maxFitScale, pageContainerRef, pageCount, scaleMode, stageRef]);
 
   const scaleLabel = useMemo(
     () => {
       const labelScale = scaleMode.startsWith("scale-")
-        ? resolvePageViewportScale({ mode: scaleMode, fitWidthScale: scale, fitPageScale: scale })
+        ? resolvePageViewportScale({ mode: scaleMode, fitWidthScale: scale, fitPageScale: scale, maxFitScale })
         : scale;
       return formatPageViewportScaleLabel(scaleMode, labelScale);
     },
-    [scale, scaleMode],
+    [maxFitScale, scale, scaleMode],
   );
 
   return {