@open-press/core 1.2.0 → 1.2.1

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 {

package/src/openpress/workbench/Workbench.tsx

@@ -4,10 +4,8 @@ import {
   useState,
   type CSSProperties,
 } from "react";
-import { ExternalLink, Home, MousePointer2, Play, Ruler } from "lucide-react";
 import {
   getProjectIdentity,
-  resolveAnchorPageIndex,
   type DeploymentInfo,
   type HtmlPageBlock,
   type ReaderDocument,
@@ -34,14 +32,12 @@ import {
   type InlineDocumentSourceTarget,
 } from "./document";
 import {
-  DeploymentControl,
-  ExportImageControl,
-  PageZoomControl,
-  SearchControl,
   useDeploymentWorkbench,
 } from "./actions";
 import { PendingCommentsPanel, WorkbenchControlPanel, type WorkbenchPanel } from "./panels";
 import { WorkbenchShell } from "./shell";
+import { WorkbenchToolbarActions } from "./shell/WorkbenchToolbarActions";
+import { useWorkbenchNavigation } from "./hooks/useWorkbenchNavigation";
 import {
   formatPageGeometrySpec,
   formatInspectorSelection,
@@ -132,23 +128,13 @@ export function HtmlWorkbench({
     onDocumentEdited: onDocumentRefresh,
   });
 
-  const selectWorkspacePage = (pageIndex: number, options?: { behavior?: ScrollBehavior }) => {
-    reader.setPage(pageIndex, options);
-    if (
-      typeof window !== "undefined"
-      && window.innerWidth < PUBLIC_DRAWER_BREAKPOINT
-      && reader.rightPanelOpen
-    ) {
-      reader.toggleRightPanel();
-    }
-  };
-
-  const selectWorkspaceAnchor = (anchorId: string, pageIndex?: number) => {
-    const targetPageIndex = resolveAnchorPageIndex(anchorPageMap, displayPages.length, anchorId, pageIndex);
-    if (targetPageIndex === null) return false;
-    selectWorkspacePage(targetPageIndex, { behavior: "smooth" });
-    return true;
-  };
+  const { selectWorkspaceAnchor, selectWorkspacePage } = useWorkbenchNavigation({
+    anchorPageMap,
+    pages: displayPages,
+    rightPanelOpen: reader.rightPanelOpen,
+    setPage: reader.setPage,
+    toggleRightPanel: reader.toggleRightPanel,
+  });
 
   const comments = useInspectorComments({
     workspaceMode,
@@ -244,145 +230,41 @@ export function HtmlWorkbench({
   // don't rebuild the toolbar JSX. The toolbar depends on deploy/page/zoom
   // state and inspector mode, but never on the composer draft text.
   const toolbarActions = useMemo(() => (
-    <>
-      {onBackToWorkspace ? (
-        <div className="openpress-workbench-toolbar__group" aria-label="工作台導覽">
-          <button
-            type="button"
-            className="openpress-workbench-toolbar-action openpress-workbench-toolbar-action--back"
-            data-openpress-back-to-workspace
-            onClick={onBackToWorkspace}
-            title="回到工作台"
-            aria-label="回到工作台"
-          >
-            <Home aria-hidden="true" />
-            <span className="openpress-workbench-toolbar-action__label">工作台</span>
-          </button>
-        </div>
-      ) : null}
-      <div className="openpress-workbench-toolbar__group" aria-label="輸出">
-        <button
-          type="button"
-          className="openpress-workbench-toolbar-action"
-          data-openpress-public-export
-          data-openpress-toolbar-expanded={deployment.pdfToolbarExpanded ? "true" : "false"}
-          data-openpress-toolbar-active={deployment.pdfToolbarExpanded ? "true" : "false"}
-          disabled={deployment.pdfButtonDisabled}
-          onClick={deployment.handleOpenWorkbenchPdf}
-          title={deployment.pdfButtonText}
-          aria-label={deployment.pdfButtonText}
-        >
-          <ExternalLink aria-hidden="true" />
-          <span className="openpress-workbench-toolbar-action__label">{deployment.pdfButtonText}</span>
-          {deployment.pdfStatusMessage ? (
-            <span
-              className="openpress-dev-pdf-status"
-              data-openpress-pdf-status={deployment.pdfActionStatus}
-              role="status"
-              aria-live="polite"
-            >
-              <span className="openpress-dev-pdf-status__spinner" aria-hidden="true" />
-              <span>{deployment.pdfStatusMessage}</span>
-            </span>
-          ) : null}
-        </button>
-        <ExportImageControl
-          currentPageIndex={reader.currentPageIndex}
-          currentPageLabel={reader.currentPageLabel}
-          pressTitle={projectIdentity.name}
-        />
-      </div>
-      <div className="openpress-workbench-toolbar__group openpress-workbench-toolbar__group--page" aria-label="頁面規格">
-        {isSlidePress && onOpenPresentation ? (
-          <button
-            type="button"
-            className="openpress-workbench-toolbar-action"
-            data-openpress-slide-present
-            data-openpress-toolbar-expanded="false"
-            data-openpress-toolbar-active="false"
-            aria-pressed="false"
-            title="進入放映模式"
-            aria-label="進入放映模式"
-            onClick={() => onOpenPresentation?.(reader.currentPageIndex)}
-          >
-            <Play aria-hidden="true" />
-            <span className="openpress-workbench-toolbar-action__label">放映</span>
-          </button>
-        ) : null}
-        <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}
-        />
-      </div>
-      <div className="openpress-workbench-toolbar__group openpress-workbench-toolbar__group--right" aria-label="工作台狀態與發布">
-        {workspaceMode ? (
-          <SearchControl
-            sourceBlocksByPath={sourceBlocksByPath}
-            onSelectPage={selectWorkspacePage}
-          />
-        ) : null}
-        {workspaceMode && editStatusMessage ? (
-          <span
-            className="openpress-dev-edit-status openpress-dev-edit-status--toolbar"
-            data-openpress-edit-status={inlineEditStatus.state}
-            role="status"
-            aria-live="polite"
-          >
-            {inlineEditStatus.state === "saving" ? <span className="openpress-dev-edit-status__spinner" aria-hidden="true" /> : null}
-            <span>{editStatusMessage}</span>
-          </span>
-        ) : null}
-        {workspaceMode ? (
-          <button
-            type="button"
-            className="openpress-workbench-toolbar-action"
-            data-openpress-inspector-toggle
-            data-openpress-inspector-active={inspector.inspectorMode ? "true" : "false"}
-            data-openpress-toolbar-expanded={inspectorToolbarExpanded ? "true" : "false"}
-            data-openpress-toolbar-active={inspectorToolbarExpanded ? "true" : "false"}
-            onClick={() => inspector.setInspectorMode(!inspector.inspectorMode)}
-            aria-pressed={inspector.inspectorMode}
-            title={inspector.inspectorMode ? "關閉註解" : "開啟註解"}
-            aria-label={inspector.inspectorMode ? "關閉註解" : "開啟註解"}
-          >
-            <MousePointer2 aria-hidden="true" />
-            <span className="openpress-workbench-toolbar-action__label">{inspector.inspectorMode ? "註解中" : "註解"}</span>
-            <span className="openpress-dev-inspector-status">{inspectorSelectionLabel}</span>
-          </button>
-        ) : null}
-        {workspaceMode && inspector.inspectorMode ? (
-          <span
-            className="openpress-dev-inspector-status"
-            role="status"
-            aria-live="polite"
-            data-openpress-inspector-comment-status={comments.inspectorCommentStatus}
-          >
-            {comments.inspectorCommentStatusMessage}
-          </span>
-        ) : null}
-        {deployment.localDeployEnabled ? (
-          <DeploymentControl
-            info={deployment.currentDeploymentInfo}
-            status={deployment.status}
-            onDeploy={deployment.handleDeploy}
-          />
-        ) : null}
-      </div>
-    </>
+    <WorkbenchToolbarActions
+      pages={displayPages}
+      currentPageIndex={reader.currentPageIndex}
+      pressTitle={projectIdentity.name}
+      theme={document.theme}
+      workspaceMode={workspaceMode}
+      sourceBlocksByPath={sourceBlocksByPath}
+      onSelectPage={selectWorkspacePage}
+      onBackToWorkspace={onBackToWorkspace}
+      isSlidePress={isSlidePress}
+      onOpenPresentation={onOpenPresentation}
+      pageGeometry={pageGeometry}
+      scaleMode={pageViewport.scaleMode}
+      scaleLabel={pageViewport.scaleLabel}
+      pageLayoutMode={pageLayoutMode}
+      onScaleModeChange={pageViewport.setScaleMode}
+      onPageLayoutModeChange={setPageLayoutMode}
+      inlineEditStatus={inlineEditStatus}
+      editStatusMessage={editStatusMessage}
+      inspectorMode={inspector.inspectorMode}
+      inspectorToolbarExpanded={inspectorToolbarExpanded}
+      inspectorSelectionLabel={inspectorSelectionLabel}
+      onInspectorModeChange={inspector.setInspectorMode}
+      inspectorCommentStatus={comments.inspectorCommentStatus}
+      inspectorCommentStatusMessage={comments.inspectorCommentStatusMessage}
+      deploymentInfo={deployment.currentDeploymentInfo}
+      deploymentStatus={deployment.status}
+      localDeployEnabled={deployment.localDeployEnabled}
+      onDeploy={deployment.handleDeploy}
+      onExportPdf={deployment.handleOpenWorkbenchPdf}
+      pdfDisabled={deployment.pdfButtonDisabled}
+      pdfLabel={deployment.pdfButtonText}
+      pdfStatusMessage={deployment.pdfStatusMessage}
+      pdfActionStatus={deployment.pdfActionStatus}
+    />
   ), [
     comments.inspectorCommentStatus,
     comments.inspectorCommentStatusMessage,
@@ -394,8 +276,9 @@ export function HtmlWorkbench({
     deployment.pdfButtonDisabled,
     deployment.pdfButtonText,
     deployment.pdfStatusMessage,
-    deployment.pdfToolbarExpanded,
     deployment.status,
+    displayPages,
+    document.theme,
     workspaceMode,
     editStatusMessage,
     inlineEditStatus.state,
@@ -416,7 +299,6 @@ export function HtmlWorkbench({
     onBackToWorkspace,
     onOpenPresentation,
     reader.currentPageIndex,
-    reader.currentPageLabel,
     projectIdentity.name,
   ]);
 

package/src/openpress/workbench/actions/DeploymentControl.tsx

@@ -75,9 +75,9 @@ export function DeploymentControl({
         className="openpress-workbench-toolbar-action"
         data-openpress-deploy
         data-openpress-deploy-status={kind}
+        data-openpress-deploy-state={status}
         data-openpress-toolbar-expanded="false"
         data-openpress-toolbar-active="false"
-        data-deploy-status={status}
         aria-busy={busy ? "true" : "false"}
         aria-label={buttonText}
         title={description}