@open-press/core 1.1.4 → 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/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());
+}