@open-press/core 0.8.0 → 1.1.0

package/src/openpress/workbench/Workbench.tsx

@@ -4,7 +4,7 @@ import {
   useState,
   type CSSProperties,
 } from "react";
-import { ExternalLink, MousePointer2, Ruler } from "lucide-react";
+import { ExternalLink, Home, MousePointer2, Ruler } from "lucide-react";
 import {
   getProjectIdentity,
   resolveAnchorPageIndex,
@@ -17,6 +17,7 @@ import { ProjectEntryPanel } from "./project";
 import {
   Bookmarks,
   CurrentPagePanel,
+  PageThumbnails,
   PUBLIC_DRAWER_BREAKPOINT,
   PublicPage,
   useReaderRuntime,
@@ -34,6 +35,7 @@ import {
 } from "./document";
 import {
   DeploymentControl,
+  ExportImageControl,
   PageZoomControl,
   SearchControl,
   useDeploymentWorkbench,
@@ -52,6 +54,7 @@ export function HtmlWorkbench({
   devMode,
   deploymentInfo,
   onDocumentRefresh,
+  onBackToWorkspace,
   extraControlPanels,
 }: {
   document: ReaderDocument;
@@ -60,6 +63,7 @@ export function HtmlWorkbench({
   devMode: boolean;
   deploymentInfo: DeploymentInfo;
   onDocumentRefresh?: () => void | Promise<void>;
+  onBackToWorkspace?: () => void;
   // Append extra panels into the right-side control panel. Built-in panels
   // (pending comments + project entry) render first; extra panels render
   // after them in the supplied order.
@@ -103,8 +107,15 @@ export function HtmlWorkbench({
   const inspectorToolbarExpanded = inspector.inspectorMode;
   const editStatusMessage = formatInlineEditStatus(inlineEditStatus);
 
+  // Inline source editing and inspector commenting are mutually exclusive
+  // interaction modes on the same blocks. While inspector mode is on, the
+  // user is selecting blocks to comment on — keeping contenteditable + the
+  // text cursor active would (a) show the I-beam instead of the inspector
+  // crosshair, (b) allow accidental text selection that paints the whole
+  // page (notably covers) with the browser ::selection color.
+  const inlineEditEnabled = devMode && !inspector.inspectorMode;
   useInlineDocumentEditor({
-    enabled: devMode,
+    enabled: inlineEditEnabled,
     sourceContainerRef,
     sourceBlockMap,
     onStatusChange: setInlineEditStatus,
@@ -173,7 +184,12 @@ export function HtmlWorkbench({
   ]);
 
   const currentSourcePath = displayPages[reader.currentPageIndex]?.source;
-  const builtInControlPanels: WorkbenchPanel[] = [
+  // Stabilize the panel registry across keystrokes in the inspector
+  // composer. Without `useMemo` the registry array (and the JSX closures
+  // inside) would be recreated on every Workbench render, so typing a
+  // single character would force WorkbenchControlPanel + every panel to
+  // diff fresh React elements.
+  const builtInControlPanels = useMemo<WorkbenchPanel[]>(() => [
     {
       id: "pending-comments",
       render: () => (
@@ -198,13 +214,43 @@ export function HtmlWorkbench({
         />
       ),
     },
-  ];
-  const controlPanels = extraControlPanels
-    ? [...builtInControlPanels, ...extraControlPanels]
-    : builtInControlPanels;
+  ], [
+    comments.clearPendingComment,
+    comments.commentsError,
+    comments.commentsStatus,
+    comments.handleSelectPendingComment,
+    comments.pendingComments,
+    comments.refreshPendingComments,
+    currentSourcePath,
+    mediaAssets,
+    projectComponentUsages,
+    projectMentionItems,
+  ]);
+  const controlPanels = useMemo(
+    () => (extraControlPanels ? [...builtInControlPanels, ...extraControlPanels] : builtInControlPanels),
+    [builtInControlPanels, extraControlPanels],
+  );
 
-  const toolbarActions = (
+  // Memoize so composer keystrokes (which only flip `comments.inspectorCommentText`)
+  // 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"
@@ -231,6 +277,11 @@ export function HtmlWorkbench({
             </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="頁面規格">
         <button
@@ -307,7 +358,40 @@ export function HtmlWorkbench({
         ) : null}
       </div>
     </>
-  );
+  ), [
+    comments.inspectorCommentStatus,
+    comments.inspectorCommentStatusMessage,
+    deployment.currentDeploymentInfo,
+    deployment.handleDeploy,
+    deployment.handleOpenWorkbenchPdf,
+    deployment.localDeployEnabled,
+    deployment.pdfActionStatus,
+    deployment.pdfButtonDisabled,
+    deployment.pdfButtonText,
+    deployment.pdfStatusMessage,
+    deployment.pdfToolbarExpanded,
+    deployment.status,
+    devMode,
+    editStatusMessage,
+    inlineEditStatus.state,
+    inspector.inspectorMode,
+    inspector.setInspectorMode,
+    inspectorSelectionLabel,
+    inspectorToolbarExpanded,
+    pageGeometry.dimensions,
+    pageGeometry.label,
+    pageGeometry.title,
+    pageLayoutMode,
+    pageViewport.scaleLabel,
+    pageViewport.scaleMode,
+    pageViewport.setScaleMode,
+    selectWorkspacePage,
+    sourceBlocksByPath,
+    onBackToWorkspace,
+    reader.currentPageIndex,
+    reader.currentPageLabel,
+    projectIdentity.name,
+  ]);
 
   return (
     <WorkbenchShell
@@ -315,7 +399,7 @@ export function HtmlWorkbench({
       devMode={devMode}
       viewMode={viewMode}
       inspectorMode={inspector.inspectorMode}
-      editMode={devMode}
+      editMode={inlineEditEnabled}
       leftPanelOpen={reader.leftPanelOpen}
       rightPanelOpen={reader.rightPanelOpen}
       onToggleLeftPanel={reader.toggleLeftPanel}
@@ -334,20 +418,35 @@ export function HtmlWorkbench({
           {projectIdentity.label ? <span>{projectIdentity.label}</span> : null}
         </section>
 
-        <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}
+        {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={selectWorkspacePage}
+              />
+            </nav>
+          </section>
+        ) : (
+          <section
+            id="openpress-thumbnails"
+            className="openpress-panel-section openpress-panel-section--thumbnails"
+            aria-label="頁面縮圖"
+          >
+            <PageThumbnails
+              pages={displayPages}
               currentPageIndex={reader.currentPageIndex}
               onSelectPage={selectWorkspacePage}
+              theme={document.theme}
             />
-          </nav>
-        </section>
+          </section>
+        )}
         <CurrentPagePanel
           currentPageLabel={reader.currentPageLabel}
           totalPageLabel={reader.totalPageLabel}

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

@@ -0,0 +1,96 @@
+import { useCallback, useState } from "react";
+import { Camera } from "lucide-react";
+import { toPng } from "html-to-image";
+
+type ExportStatus = "idle" | "exporting" | "done" | "error";
+
+// Exports the currently visible page as a PNG. Locates the page DOM via
+// the data-openpress-page-index attribute (set in PublicReaderPage) and
+// hands it to html-to-image, then triggers a browser download.
+//
+// Lives in the workbench toolbar so it's reachable for any Press shape
+// (manuscript / canvas / slide); for multi-page Press the user navigates
+// to the page first, then exports.
+export function ExportImageControl({
+  currentPageIndex,
+  currentPageLabel,
+  pressTitle,
+}: {
+  currentPageIndex: number;
+  currentPageLabel: string;
+  pressTitle: string;
+}) {
+  const [status, setStatus] = useState<ExportStatus>("idle");
+
+  const handleExport = useCallback(async () => {
+    if (status === "exporting") return;
+    setStatus("exporting");
+
+    try {
+      const pageEl = typeof window === "undefined"
+        ? null
+        : window.document.querySelector<HTMLElement>(
+            `[data-openpress-page-index="${currentPageIndex}"]`,
+          );
+      if (!pageEl) throw new Error("找不到目前頁面");
+
+      // pixelRatio: 2 — retina-ish; keeps text crisp without blowing the file size.
+      // cacheBust: true — force re-fetch of images so stale CORS doesn't taint the canvas.
+      const dataUrl = await toPng(pageEl, {
+        pixelRatio: 2,
+        cacheBust: true,
+        backgroundColor: "#ffffff",
+      });
+
+      const safeTitle = sanitizeFilename(pressTitle) || "openpress";
+      const safePage = sanitizeFilename(currentPageLabel) || String(currentPageIndex + 1);
+      const link = window.document.createElement("a");
+      link.href = dataUrl;
+      link.download = `${safeTitle}-${safePage}.png`;
+      window.document.body.appendChild(link);
+      link.click();
+      link.remove();
+
+      setStatus("done");
+      window.setTimeout(() => setStatus("idle"), 1600);
+    } catch (error) {
+      console.error("[openpress] page PNG export failed", error);
+      setStatus("error");
+      window.setTimeout(() => setStatus("idle"), 2400);
+    }
+  }, [currentPageIndex, currentPageLabel, pressTitle, status]);
+
+  const label = status === "exporting"
+    ? "匯出中…"
+    : status === "done"
+    ? "已下載"
+    : status === "error"
+    ? "匯出失敗"
+    : "PNG";
+  const title = "將目前頁面匯出為 PNG";
+
+  return (
+    <button
+      type="button"
+      className="openpress-workbench-toolbar-action"
+      data-openpress-page-png-export
+      data-openpress-export-status={status}
+      disabled={status === "exporting"}
+      onClick={handleExport}
+      title={title}
+      aria-label={title}
+    >
+      <Camera aria-hidden="true" />
+      <span className="openpress-workbench-toolbar-action__label">{label}</span>
+    </button>
+  );
+}
+
+function sanitizeFilename(value: string): string {
+  return value
+    .replace(/[\\/:*?"<>|]+/g, "-")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 80);
+}

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

@@ -336,10 +336,10 @@ function resolveSearchJumpTarget(
 function sourcePathKeys(value: string) {
   const normalized = value.trim().replaceAll("\\", "/").replace(/^\.\//, "");
   const keys = [normalized];
-  if (normalized.startsWith("document/")) {
-    keys.push(normalized.replace(/^document\//, ""));
+  if (normalized.startsWith("press/")) {
+    keys.push(normalized.replace(/^press\//, ""));
   } else {
-    keys.push(`document/${normalized}`);
+    keys.push(`press/${normalized}`);
   }
   return Array.from(new Set(keys));
 }

package/src/openpress/workbench/actions/index.ts

@@ -1,5 +1,6 @@
 export * from "./deploymentStatusModel";
 export * from "./DeploymentControl";
+export * from "./ExportImageControl";
 export * from "./PageZoomControl";
 export * from "./SearchControl";
 export * from "./useDeploymentWorkbench";

package/src/openpress/workbench/inspector/useInspectorComments.ts

@@ -67,7 +67,13 @@ export function useInspectorComments({
 
   const inspectorCommentDisabled =
     !inspector.selectedBlock || !inspectorCommentText.trim() || inspectorCommentStatus === "submitting";
-  const inspectorCommentStatusMessage = formatInspectorCommentStatus(inspectorCommentStatus, inspectorCommentError);
+  // Memoize the status message so its identity is stable while only
+  // composer text changes — the toolbar and other consumers that depend
+  // on it can then memoize without keystrokes invalidating their cache.
+  const inspectorCommentStatusMessage = useMemo(
+    () => formatInspectorCommentStatus(inspectorCommentStatus, inspectorCommentError),
+    [inspectorCommentStatus, inspectorCommentError],
+  );
 
   const refreshPendingComments = useCallback(async () => {
     if (!devMode) return;

package/src/openpress/workbench/panels/PendingCommentsPanel.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { Trash2 } from "lucide-react";
 import type { PendingComment } from "../inspector";
 import {
@@ -7,7 +8,7 @@ import {
 import type { PendingCommentsStatus } from "../workbenchTypes";
 import { Panel } from "./Panel";
 
-export function PendingCommentsPanel({
+function PendingCommentsPanelImpl({
   comments,
   status,
   error,
@@ -74,3 +75,6 @@ export function PendingCommentsPanel({
     </Panel>
   );
 }
+
+export const PendingCommentsPanel = memo(PendingCommentsPanelImpl);
+PendingCommentsPanel.displayName = "PendingCommentsPanel";

package/src/openpress/workbench/project/ProjectEntryPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, type CSSProperties } from "react";
+import { memo, useState, type CSSProperties } from "react";
 import { Component as ComponentIcon, Images, Palette, type LucideIcon } from "lucide-react";
 import type { BookmarkItem, BookmarkSubItem, MediaAssetItem } from "../../document-model";
 import { projectSourceDirectoryPath, PROJECT_SOURCES } from "./projectSourceModel";
@@ -77,7 +77,7 @@ export function createProjectMentionItems(
   return [...PROJECT_SKILL_MENTIONS, ...referenceItems, ...mediaItems, ...componentItems];
 }
 
-export function ProjectEntryPanel({
+function ProjectEntryPanelImpl({
   mediaAssets,
   componentUsages,
   mentionItems,
@@ -164,6 +164,8 @@ export function ProjectEntryPanel({
   );
 }
 
+export const ProjectEntryPanel = memo(ProjectEntryPanelImpl);
+ProjectEntryPanel.displayName = "ProjectEntryPanel";
 
 export function ProjectPreviewPanel({
   mediaAssets,

package/src/openpress/workbench/project/projectSourceModel.ts

@@ -1,5 +1,5 @@
-// Source directory paths come from vite.config.ts build-time defines, which
-// in turn read openpress.config.mjs. The React app does not hardcode `document/`.
+// Source directory paths come from package-owned Vite build-time defines,
+// which read the active workspace conventions and package.json config.
 
 export const PROJECT_SOURCES = {
   content: {

package/src/openpress/workbench/workbenchFormatters.ts

@@ -33,11 +33,11 @@ export function formatCommentsCount(count: number, status: PendingCommentsStatus
   return `${count} 則待處理`;
 }
 
-export function formatPageGeometrySpec(theme?: Pick<Theme, "pageWidth" | "pageHeight">): PageGeometrySpec {
+export function formatPageGeometrySpec(theme?: Pick<Theme, "pageLabel" | "pageWidth" | "pageHeight">): PageGeometrySpec {
   const width = parseCssLength(theme?.pageWidth ?? DEFAULT_PAGE_GEOMETRY.pageWidth);
   const height = parseCssLength(theme?.pageHeight ?? DEFAULT_PAGE_GEOMETRY.pageHeight);
   const dimensions = formatLengthPair(width, height);
-  const label = pageGeometryLabel(width, height);
+  const label = theme?.pageLabel?.trim() || pageGeometryLabel(width, height);
 
   return {
     label,

package/src/styles/openpress/reader-runtime.css

@@ -61,6 +61,15 @@
   white-space: nowrap;
 }
 
+.openpress-reader-app[data-openpress-inspector-mode="on"] .openpress-html-page__html {
+  /* Inspector mode is a click-to-select-block flow. Disable text selection
+     across the rendered page so drag-selects / Cmd+A don't paint the whole
+     page with the browser ::selection color — most visible on covers and
+     back-covers where there's little text and lots of background. */
+  user-select: none;
+  -webkit-user-select: none;
+}
+
 .openpress-reader-app[data-openpress-inspector-mode="on"] .openpress-html-page__html [data-openpress-block-id] {
   cursor: crosshair;
 }

package/src/styles/openpress/workbench-panels.css

@@ -592,3 +592,116 @@
   clip: rect(0 0 0 0);
   white-space: nowrap;
 }
+
+/* Page thumbnails — left panel fallback when no MDX bookmarks exist
+   (canvas-style Press: social posts, slides). Renders the actual page
+   HTML scaled down so the user can navigate by visual recognition. */
+.openpress-reader-app .openpress-panel-section--thumbnails {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 8px 14px 16px;
+  min-height: 0;
+}
+
+.openpress-reader-app .openpress-thumb-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.openpress-reader-app .openpress-thumb-card {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr);
+  align-items: stretch;
+  gap: 6px;
+  padding: 6px 8px 6px 0;
+  border: 1px solid rgb(242 242 240 / 12%);
+  border-radius: 7px;
+  background: rgb(20 20 20 / 50%);
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  overflow: hidden;
+  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+}
+
+.openpress-reader-app .openpress-thumb-card:hover {
+  border-color: rgb(242 242 240 / 26%);
+  transform: translateY(-1px);
+}
+
+.openpress-reader-app .openpress-thumb-card.is-active {
+  border-color: var(--openpress-accent, #df4b21);
+  box-shadow: 0 0 0 1px var(--openpress-accent, #df4b21) inset;
+}
+
+.openpress-reader-app .openpress-thumb-card__surface {
+  position: relative;
+  grid-column: 2;
+  grid-row: 1;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid rgb(242 242 240 / 12%);
+  border-radius: 4px;
+}
+
+.openpress-reader-app .openpress-thumb-card__page-host {
+  position: absolute;
+  inset: 0;
+}
+
+.openpress-reader-app .openpress-thumb-card__page-host .openpress-public-page {
+  display: block;
+  pointer-events: none;
+  user-select: none;
+}
+
+.openpress-reader-app .openpress-thumb-card__frame {
+  position: relative;
+}
+
+.openpress-reader-app .openpress-thumb-card__surface .openpress-html-page {
+  pointer-events: none;
+  user-select: none;
+}
+
+.openpress-reader-app .openpress-thumb-card__meta {
+  display: grid;
+  grid-column: 1;
+  grid-row: 1;
+  grid-template-rows: auto;
+  justify-items: center;
+  align-items: center;
+  padding: 0 0 1px;
+  font-size: 11px;
+  color: rgb(242 242 240 / 58%);
+  min-width: 0;
+}
+
+.openpress-reader-app .openpress-thumb-card__index {
+  font-family: var(--openpress-mono, ui-monospace, monospace);
+  font-size: 11px;
+  letter-spacing: 0;
+  color: rgb(242 242 240 / 68%);
+}
+
+.openpress-reader-app .openpress-thumb-card.is-active .openpress-thumb-card__index {
+  color: var(--openpress-accent, #df4b21);
+}
+
+.openpress-reader-app .openpress-thumb-card__title {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}