@open-press/core 1.1.3 → 1.2.0

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

@@ -66,13 +66,18 @@ export function SlidePresentationPage({
     const handleKeyDown = (event: KeyboardEvent) => {
       if (isEditableTarget(event.target)) return;
       if (event.key === "Escape") {
-        event.preventDefault();
+        // 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();
           void activeDocument.exitFullscreen();
-          return;
         }
-        onExitPresentation?.(currentPageIndexRef.current);
         return;
       }
       if (event.key === " " || event.code === "Space") {

package/src/openpress/reader/usePanelState.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 export interface UsePanelStateOptions {
   leftPanelBreakpoint?: number;
@@ -31,26 +31,35 @@ export function usePanelState({
   const [rightPanelOpen, setRightPanelOpen] = useState(false);
   const [leftPanelOpen, setLeftPanelOpen] = useState(false);
 
+  // The auto-close-on-narrow rule is a *resize* response, not a state-change
+  // response. Keep current panel state in a ref so the resize listener can read
+  // it without re-subscribing every toggle — otherwise toggling a drawer open
+  // in a narrow viewport would re-run this effect, call handleResize
+  // synchronously, see "open + below breakpoint", and immediately close the
+  // panel the user just opened.
+  const panelStateRef = useRef({ leftPanelOpen, rightPanelOpen });
+  panelStateRef.current = { leftPanelOpen, rightPanelOpen };
+
   useEffect(() => {
     if (typeof window === "undefined") return undefined;
 
     const handleResize = () => {
-      const closeLeftPanel = leftPanelOpen && !shouldOpenLeftPanel();
-      const closeRightPanel = rightPanelOpen && !shouldOpenRightPanel();
+      const { leftPanelOpen: lo, rightPanelOpen: ro } = panelStateRef.current;
+      const closeLeftPanel = lo && !shouldOpenLeftPanel();
+      const closeRightPanel = ro && !shouldOpenRightPanel();
 
       if (closeLeftPanel) setLeftPanelOpen(false);
       if (closeRightPanel) setRightPanelOpen(false);
       if (closeLeftPanel || closeRightPanel) onAfterResize?.();
     };
 
-    handleResize();
     window.addEventListener("resize", handleResize);
     window.visualViewport?.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
       window.visualViewport?.removeEventListener("resize", handleResize);
     };
-  }, [leftPanelOpen, rightPanelOpen, shouldOpenLeftPanel, shouldOpenRightPanel, onAfterResize]);
+  }, [shouldOpenLeftPanel, shouldOpenRightPanel, onAfterResize]);
 
   const toggleLeftPanel = useCallback(() => setLeftPanelOpen((open) => !open), []);
   const toggleRightPanel = useCallback(() => setRightPanelOpen((open) => !open), []);

package/src/openpress/shared/index.ts

@@ -2,3 +2,4 @@ export * from "./frameScheduler";
 export * from "./numberUtils";
 export * from "./Panel";
 export * from "./runtimeMode";
+export * from "./staticSearch";

package/src/openpress/shared/staticSearch.ts

@@ -0,0 +1,174 @@
+// Browser-safe literal-substring search over the build-time search
+// corpus (<outputDir>/openpress/search-corpus.json). Mirrors the
+// `searchSourceText` logic in engine/runtime/source-text-tools.mjs so
+// public deploys can search without the /__openpress/search dev endpoint.
+
+export type SearchScope = "content" | "all";
+
+export interface SearchCorpusFile {
+  scope: string;
+  file: string;
+  path: string;
+  text: string;
+}
+
+export interface SearchCorpus {
+  kind: "search-corpus";
+  version: number;
+  files: SearchCorpusFile[];
+}
+
+export interface SearchReportFile {
+  scope: string;
+  file: string;
+  path: string;
+  matchCount: number;
+}
+
+export interface SearchReportMatch {
+  id: string;
+  scope: string;
+  file: string;
+  path: string;
+  line: number;
+  column: number;
+  index: number;
+  text: string;
+  preview: string;
+}
+
+export interface SearchReport {
+  ok?: boolean;
+  kind: "search";
+  query: string;
+  scope: SearchScope;
+  caseSensitive: boolean;
+  matchCount: number;
+  files: SearchReportFile[];
+  matches: SearchReportMatch[];
+  message?: string;
+}
+
+export interface SearchCorpusQueryOptions {
+  query: string;
+  scope?: SearchScope;
+  caseSensitive?: boolean;
+}
+
+export function searchCorpus(corpus: SearchCorpus, options: SearchCorpusQueryOptions): SearchReport {
+  const query = options.query;
+  const scope: SearchScope = options.scope ?? "content";
+  const caseSensitive = options.caseSensitive ?? false;
+  const matches: SearchReportMatch[] = [];
+
+  if (!query) {
+    return { kind: "search", query, scope, caseSensitive, matchCount: 0, files: [], matches: [] };
+  }
+
+  for (const file of corpus.files) {
+    const rawMatches = findLiteralMatches(file.text, query, { caseSensitive });
+    for (const match of rawMatches) {
+      matches.push({
+        id: `match-${String(matches.length + 1).padStart(4, "0")}`,
+        scope: file.scope,
+        file: file.file,
+        path: file.path,
+        line: match.line,
+        column: match.column,
+        index: match.index,
+        text: match.text,
+        preview: match.preview,
+      });
+    }
+  }
+
+  return {
+    kind: "search",
+    query,
+    scope,
+    caseSensitive,
+    matchCount: matches.length,
+    files: summarizeFiles(matches),
+    matches,
+  };
+}
+
+interface RawMatch {
+  line: number;
+  column: number;
+  index: number;
+  text: string;
+  preview: string;
+}
+
+function findLiteralMatches(text: string, query: string, options: { caseSensitive: boolean }): RawMatch[] {
+  if (!query) return [];
+  const matches: RawMatch[] = [];
+  forEachLine(text, ({ line, lineNumber, lineOffset }) => {
+    for (const range of findLineMatches(line, query, options)) {
+      matches.push({
+        line: lineNumber,
+        column: range.start + 1,
+        index: lineOffset + range.start,
+        text: line.slice(range.start, range.end),
+        preview: previewLine(line, range.start, range.end),
+      });
+    }
+  });
+  return matches;
+}
+
+function findLineMatches(line: string, query: string, { caseSensitive }: { caseSensitive: boolean }) {
+  const haystack = caseSensitive ? line : line.toLowerCase();
+  const needle = caseSensitive ? query : query.toLowerCase();
+  const ranges: { start: number; end: number }[] = [];
+  let cursor = 0;
+  while (needle && cursor <= haystack.length) {
+    const start = haystack.indexOf(needle, cursor);
+    if (start < 0) break;
+    const end = start + needle.length;
+    ranges.push({ start, end });
+    cursor = end;
+  }
+  return ranges;
+}
+
+function previewLine(line: string, start: number, end: number) {
+  const previewStart = Math.max(0, start - 40);
+  const previewEnd = Math.min(line.length, end + 40);
+  const prefix = previewStart > 0 ? "..." : "";
+  const suffix = previewEnd < line.length ? "..." : "";
+  return `${prefix}${line.slice(previewStart, previewEnd)}${suffix}`;
+}
+
+function forEachLine(
+  text: string,
+  visit: (info: { line: string; ending: string; lineNumber: number; lineOffset: number }) => void,
+) {
+  const lineRe = /([^\r\n]*)(\r\n|\n|\r|$)/g;
+  let lineNumber = 1;
+  let offset = 0;
+  let match: RegExpExecArray | null;
+  while ((match = lineRe.exec(text))) {
+    const [full, line, ending] = match;
+    if (full === "") break;
+    visit({ line, ending, lineNumber, lineOffset: offset });
+    offset += full.length;
+    lineNumber += 1;
+  }
+}
+
+function summarizeFiles(matches: SearchReportMatch[]): SearchReportFile[] {
+  const grouped = new Map<string, SearchReportFile>();
+  for (const match of matches) {
+    const current = grouped.get(match.path) ?? {
+      scope: match.scope,
+      file: match.file,
+      path: match.path,
+      matchCount: 0,
+    };
+    current.matchCount += 1;
+    grouped.set(match.path, current);
+  }
+  return Array.from(grouped.values());
+}