@open-press/core 1.2.0 → 1.2.1

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

@@ -0,0 +1,267 @@
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { ChevronDown, Download, FileDown, FileText, Image as ImageIcon } from "lucide-react";
+import { toPng } from "html-to-image";
+import type { HtmlPageBlock, Theme } from "../../document-model";
+import { PageThumbnails } from "../../reader";
+import { WorkbenchDialog } from "../dialog";
+
+type ExportDialog = "none" | "pdf" | "png";
+type PngExportStatus = "idle" | "exporting" | "done" | "error";
+
+export function ExportControl({
+  pages,
+  currentPageIndex,
+  pressTitle,
+  theme,
+  pdfHref,
+  onExportPdf,
+  pdfDisabled = false,
+  pdfLabel,
+  pdfStatusMessage,
+  pdfActionStatus,
+}: {
+  pages: HtmlPageBlock[];
+  currentPageIndex: number;
+  pressTitle: string;
+  theme?: Theme;
+  pdfHref?: string;
+  onExportPdf?: () => void;
+  pdfDisabled?: boolean;
+  pdfLabel?: string;
+  pdfStatusMessage?: string | null;
+  pdfActionStatus?: string;
+}) {
+  const menuId = useId();
+  const pdfTitleId = useId();
+  const pngTitleId = useId();
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [activeDialog, setActiveDialog] = useState<ExportDialog>("none");
+  const [pngPageIndex, setPngPageIndex] = useState(currentPageIndex);
+  const [selectedPngPageIndexes, setSelectedPngPageIndexes] = useState<Set<number>>(() => new Set());
+  const [pngStatus, setPngStatus] = useState<PngExportStatus>("idle");
+
+  useEffect(() => {
+    if (!dropdownOpen) return undefined;
+    const handlePointerDown = (event: PointerEvent) => {
+      if (event.target instanceof Node && rootRef.current?.contains(event.target)) return;
+      setDropdownOpen(false);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setDropdownOpen(false);
+    };
+    window.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [dropdownOpen]);
+
+  const openPdf = () => { setDropdownOpen(false); setActiveDialog("pdf"); };
+  const openPng = () => {
+    setDropdownOpen(false);
+    setPngPageIndex(currentPageIndex);
+    setSelectedPngPageIndexes(createAllPageIndexSet(pages));
+    setPngStatus("idle");
+    setActiveDialog("png");
+  };
+  const closeDialog = () => setActiveDialog("none");
+
+  const togglePngPage = (pageIndex: number) => {
+    setSelectedPngPageIndexes((current) => {
+      const next = new Set(current);
+      if (next.has(pageIndex)) next.delete(pageIndex);
+      else next.add(pageIndex);
+      return next;
+    });
+  };
+
+  const selectAllPngPages = () => setSelectedPngPageIndexes(createAllPageIndexSet(pages));
+  const clearPngPages = () => setSelectedPngPageIndexes(new Set());
+
+  const handleExportPng = useCallback(async () => {
+    if (pngStatus === "exporting") return;
+    const pageIndexes = pages
+      .map((page) => page.pageNumber - 1)
+      .filter((pageIndex) => selectedPngPageIndexes.has(pageIndex));
+    if (pageIndexes.length === 0) return;
+    setPngStatus("exporting");
+    try {
+      const safeTitle = sanitizeFilename(pressTitle) || "openpress";
+      for (const pageIndex of pageIndexes) {
+        const pageEl = typeof window === "undefined"
+          ? null
+          : window.document.querySelector<HTMLElement>(`[data-openpress-page-index="${pageIndex}"]`);
+        if (!pageEl) throw new Error(`找不到第 ${pageIndex + 1} 頁元素`);
+        const dataUrl = await toPng(pageEl, { pixelRatio: 2, cacheBust: true, backgroundColor: "#ffffff" });
+        const safePage = String(pageIndex + 1).padStart(2, "0");
+        const link = window.document.createElement("a");
+        link.href = dataUrl;
+        link.download = `${safeTitle}-${safePage}.png`;
+        window.document.body.appendChild(link);
+        link.click();
+        link.remove();
+      }
+      setPngStatus("done");
+      window.setTimeout(() => setPngStatus("idle"), 1600);
+    } catch (error) {
+      console.error("[openpress] PNG export failed", error);
+      setPngStatus("error");
+      window.setTimeout(() => setPngStatus("idle"), 2400);
+    }
+  }, [pages, pngStatus, pressTitle, selectedPngPageIndexes]);
+
+  const hasPdf = Boolean(pdfHref ?? onExportPdf);
+  const selectedPngCount = selectedPngPageIndexes.size;
+  const pngButtonLabel = pngStatus === "exporting" ? "匯出中…"
+    : pngStatus === "done" ? "已下載"
+    : pngStatus === "error" ? "匯出失敗"
+    : selectedPngCount === 0 ? "請選擇圖片"
+    : `匯出 ${selectedPngCount} 張`;
+
+  return (
+    <div ref={rootRef} className="openpress-workbench-zoom-control-wrap" data-openpress-export-control>
+      <button
+        type="button"
+        className="openpress-workbench-zoom-control"
+        aria-label="匯出"
+        title="匯出"
+        aria-haspopup="menu"
+        aria-expanded={dropdownOpen}
+        aria-controls={dropdownOpen ? menuId : undefined}
+        onClick={() => setDropdownOpen((v) => !v)}
+      >
+        <FileDown aria-hidden="true" />
+        <span>匯出</span>
+        <ChevronDown className="openpress-workbench-zoom-control__chevron" aria-hidden="true" />
+      </button>
+
+      {dropdownOpen ? (
+        <div id={menuId} className="openpress-workbench-zoom-menu" role="menu" aria-label="匯出選項">
+          <div className="openpress-workbench-zoom-menu__section" role="group">
+            {hasPdf ? (
+              <button type="button" className="openpress-workbench-zoom-menu__item" role="menuitem" onClick={openPdf}>
+                <span className="openpress-workbench-zoom-menu__check" aria-hidden="true" />
+                <FileText aria-hidden="true" />
+                <span>PDF</span>
+              </button>
+            ) : null}
+            <button type="button" className="openpress-workbench-zoom-menu__item" role="menuitem" onClick={openPng}>
+              <span className="openpress-workbench-zoom-menu__check" aria-hidden="true" />
+              <ImageIcon aria-hidden="true" />
+              <span>PNG 圖片</span>
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      {activeDialog === "pdf" ? (
+        <WorkbenchDialog
+          titleId={pdfTitleId}
+          eyebrow="匯出"
+          title="PDF"
+          closeLabel="關閉"
+          className="openpress-export-dialog"
+          onClose={closeDialog}
+          footer={
+            pdfHref ? (
+              <a
+                href={pdfHref}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="openpress-export-dialog__action"
+                onClick={closeDialog}
+              >
+                <Download aria-hidden="true" />
+                <span>下載 PDF</span>
+              </a>
+            ) : onExportPdf ? (
+              <button
+                type="button"
+                className="openpress-export-dialog__action"
+                disabled={pdfDisabled}
+                onClick={onExportPdf}
+              >
+                <Download aria-hidden="true" />
+                <span>{pdfLabel ?? "生成 PDF"}</span>
+                {pdfStatusMessage ? (
+                  <span
+                    className="openpress-dev-pdf-status"
+                    data-openpress-pdf-status={pdfActionStatus}
+                    role="status"
+                    aria-live="polite"
+                  >
+                    <span className="openpress-dev-pdf-status__spinner" aria-hidden="true" />
+                    <span>{pdfStatusMessage}</span>
+                  </span>
+                ) : null}
+              </button>
+            ) : null
+          }
+        >
+          <div className="openpress-export-dialog__body">
+            <p className="openpress-export-dialog__summary">共 {pages.length} 頁</p>
+          </div>
+        </WorkbenchDialog>
+      ) : null}
+
+      {activeDialog === "png" ? (
+        <WorkbenchDialog
+          titleId={pngTitleId}
+          eyebrow="匯出"
+          title="PNG 圖片"
+          closeLabel="關閉"
+          className="openpress-export-dialog openpress-export-png-dialog"
+          onClose={closeDialog}
+          footer={
+            <button
+              type="button"
+              className="openpress-export-dialog__action"
+              disabled={pngStatus === "exporting" || selectedPngCount === 0}
+              data-openpress-export-status={pngStatus}
+              onClick={handleExportPng}
+            >
+              <Download aria-hidden="true" />
+              <span>{pngButtonLabel}</span>
+            </button>
+          }
+        >
+          <div className="openpress-export-dialog__selection-bar">
+            <span>{selectedPngCount} / {pages.length} 張已選</span>
+            <div className="openpress-export-dialog__selection-actions">
+              <button type="button" onClick={selectAllPngPages}>全選</button>
+              <button type="button" onClick={clearPngPages}>清除</button>
+            </div>
+          </div>
+          <div className="openpress-export-dialog__thumbs">
+            <PageThumbnails
+              pages={pages}
+              currentPageIndex={pngPageIndex}
+              selectedPageIndexes={selectedPngPageIndexes}
+              onTogglePage={(idx) => {
+                setPngPageIndex(idx);
+                togglePngPage(idx);
+              }}
+              onSelectPage={(idx) => setPngPageIndex(idx)}
+              theme={theme}
+            />
+          </div>
+        </WorkbenchDialog>
+      ) : null}
+    </div>
+  );
+}
+
+function sanitizeFilename(value: string): string {
+  return value
+    .replace(/[\\/:*?"<>|]+/g, "-")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 80);
+}
+
+function createAllPageIndexSet(pages: HtmlPageBlock[]) {
+  return new Set(pages.map((page) => page.pageNumber - 1));
+}

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

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

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

@@ -54,7 +54,12 @@ export function useDeploymentWorkbench({ deploymentInfo, pressSlug = null }: Use
     }
     setStatus("deploying");
     try {
-      const response = await fetch("/__openpress/deploy", { method: "POST" });
+      const requestBody = pressSlug ? { press: pressSlug } : {};
+      const response = await fetch("/__openpress/deploy", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(requestBody),
+      });
       if (response.status === 404 || response.status === 405) {
         setStatus("unavailable");
         return;
@@ -96,7 +101,7 @@ export function useDeploymentWorkbench({ deploymentInfo, pressSlug = null }: Use
       console.error("OpenPress deploy unavailable", error);
       setStatus("unavailable");
     }
-  }, [status, currentDeploymentInfo.configured]);
+  }, [status, currentDeploymentInfo.configured, pressSlug]);
 
   const handleOpenLatestLocalPdf = useCallback(async () => {
     if (pdfActionStatus === "generating") return;

package/src/openpress/workbench/hooks/useWorkbenchNavigation.ts

@@ -0,0 +1,42 @@
+import { useCallback } from "react";
+import { resolveAnchorPageIndex } from "../../document-model";
+import { PUBLIC_DRAWER_BREAKPOINT, type DisplayPage } from "../../reader";
+
+type SetPage = (pageIndex: number, options?: { behavior?: ScrollBehavior }) => void;
+
+export function useWorkbenchNavigation({
+  anchorPageMap,
+  pages,
+  rightPanelOpen,
+  setPage,
+  toggleRightPanel,
+}: {
+  anchorPageMap: Map<string, number>;
+  pages: DisplayPage[];
+  rightPanelOpen: boolean;
+  setPage: SetPage;
+  toggleRightPanel: () => void;
+}) {
+  const selectWorkspacePage = useCallback((pageIndex: number, options?: { behavior?: ScrollBehavior }) => {
+    setPage(pageIndex, options);
+    if (
+      typeof window !== "undefined"
+      && window.innerWidth < PUBLIC_DRAWER_BREAKPOINT
+      && rightPanelOpen
+    ) {
+      toggleRightPanel();
+    }
+  }, [rightPanelOpen, setPage, toggleRightPanel]);
+
+  const selectWorkspaceAnchor = useCallback((anchorId: string, pageIndex?: number) => {
+    const targetPageIndex = resolveAnchorPageIndex(anchorPageMap, pages.length, anchorId, pageIndex);
+    if (targetPageIndex === null) return false;
+    selectWorkspacePage(targetPageIndex, { behavior: "smooth" });
+    return true;
+  }, [anchorPageMap, pages.length, selectWorkspacePage]);
+
+  return {
+    selectWorkspaceAnchor,
+    selectWorkspacePage,
+  };
+}

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

@@ -1,7 +1,6 @@
-import { memo, useState, type CSSProperties } from "react";
-import { Component as ComponentIcon, Images, Palette, type LucideIcon } from "lucide-react";
+import { memo, useState } from "react";
+import { Component as ComponentIcon } from "lucide-react";
 import type { BookmarkItem, BookmarkSubItem, MediaAssetItem } from "../../document-model";
-import { projectSourceDirectoryPath, PROJECT_SOURCES } from "./projectSourceModel";
 import type { BlockSource } from "../../document-model";
 import type { DisplayPage } from "../../reader";
 import { Panel } from "../panels/Panel";
@@ -15,10 +14,6 @@ import {
 export { createProjectObjectEntityId } from "./projectPreviewTypes";
 export type { ProjectMentionItem, ProjectPanelPreview } from "./projectPreviewTypes";
 
-export const PROJECT_VISUAL_SYSTEM_KEY = "visual-system";
-export const PROJECT_IMAGE_GALLERY_KEY = "image-gallery";
-export const PROJECT_COMPONENT_LIBRARY_KEY = "component-library";
-
 export type ProjectComponentUsage = {
   count: number;
   pageIndexes: number[];
@@ -167,264 +162,6 @@ function ProjectEntryPanelImpl({
 export const ProjectEntryPanel = memo(ProjectEntryPanelImpl);
 ProjectEntryPanel.displayName = "ProjectEntryPanel";
 
-export function ProjectPreviewPanel({
-  mediaAssets,
-  componentUsages,
-  selectedKey,
-}: {
-  mediaAssets: MediaAssetItem[];
-  componentUsages: Map<string, ProjectComponentUsage>;
-  selectedKey: string | null;
-}) {
-  if (!selectedKey || selectedKey === PROJECT_VISUAL_SYSTEM_KEY) {
-    return <ProjectVisualSystem />;
-  }
-
-  if (selectedKey === PROJECT_IMAGE_GALLERY_KEY) {
-    return <ProjectImageGallery mediaAssets={mediaAssets} />;
-  }
-
-  if (selectedKey === PROJECT_COMPONENT_LIBRARY_KEY) {
-    return <ProjectComponentLibrary usages={componentUsages} />;
-  }
-
-  return <ProjectVisualSystem />;
-}
-
-function ProjectPanelButton({
-  icon: Icon,
-  label,
-  meta,
-  active,
-  onClick,
-}: {
-  icon: LucideIcon;
-  label: string;
-  meta: string;
-  active: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      className={`bookmark-item bookmark-h2 openpress-project-entry${active ? " is-active" : ""}`}
-      aria-pressed={active}
-      onClick={onClick}
-    >
-      <span className="bookmark-index openpress-project-entry-icon"><Icon aria-hidden="true" /></span>
-      <span className="bookmark-title">
-        <span>{label}</span>
-        <small>{meta}</small>
-      </span>
-    </button>
-  );
-}
-
-function ProjectVisualSystem() {
-  return (
-    <section className="openpress-project-preview-panel" aria-label="專案">
-      <article className="openpress-project-visual-system" aria-label="Visual System">
-        <ProjectSectionHeader title="Visual System" minimal />
-
-        <div className="openpress-project-visual-grid">
-          <section className="openpress-project-visual-card openpress-project-visual-card--typography" aria-label="Typography">
-            <header>
-              <span>Typography</span>
-              <strong>閱讀層級</strong>
-            </header>
-            <div className="openpress-project-type-specimen">
-              <p className="openpress-project-type-kicker">Course Notes</p>
-              <h2>Data Structures</h2>
-              <h3>Linked List 與 Tree Traversal</h3>
-              <h4>Pointer / Node / Recursive Thinking</h4>
-              <p>以 C/C++ 實作資料結構，整理概念、表示法與操作流程。</p>
-              <code>struct Node *next = head;</code>
-            </div>
-          </section>
-
-          <section className="openpress-project-visual-card" aria-label="Color Palette">
-            <header>
-              <span>Palette</span>
-              <strong>色票配置</strong>
-            </header>
-            <div className="openpress-project-swatch-grid">
-              {PROJECT_COLOR_SWATCHES.map((item) => (
-                <div className="openpress-project-swatch" key={item.token}>
-                  <span
-                    className="openpress-project-swatch-chip"
-                    style={{ "--openpress-project-swatch": `var(${item.token})` } as CSSProperties}
-                    aria-hidden="true"
-                  />
-                  <strong>{item.label}</strong>
-                  <code>{item.token.replace("--openpress-", "")}</code>
-                </div>
-              ))}
-            </div>
-          </section>
-
-          <section className="openpress-project-visual-card openpress-project-visual-card--surfaces" aria-label="Surfaces">
-            <header>
-              <span>Surfaces</span>
-              <strong>區塊背景</strong>
-            </header>
-            <div className="openpress-project-surface-preview">
-              <div className="openpress-project-surface-paper">
-                <span>Page paper</span>
-              </div>
-              <div className="openpress-project-surface-block">
-                <span>Figure / Code block</span>
-              </div>
-            </div>
-          </section>
-        </div>
-      </article>
-    </section>
-  );
-}
-
-function ProjectComponentLibrary({
-  usages,
-}: {
-  usages: Map<string, ProjectComponentUsage>;
-}) {
-  const previewItems = createComponentPreviewItems(usages);
-  return (
-    <section className="openpress-project-preview-panel" aria-label="專案">
-      <article className="openpress-project-component-viewer" aria-label={PROJECT_SOURCES.components.label}>
-        <ProjectSectionHeader
-          title="Rendered Components"
-          description="文件目前實際渲染出的 component、圖表與示意圖狀態。"
-          stats={[
-            ["Kinds", String(usages.size)],
-            ["Renders", String(previewItems.length)],
-          ]}
-        />
-        {previewItems.length > 0 ? (
-          <div className="openpress-project-component-list" aria-label="rendered content block list">
-            {previewItems.map((item) => (
-              <figure className="openpress-project-component-preview-row" key={`${item.name}-${item.index}`}>
-                <figcaption>
-                  <span>{item.name}</span>
-                  <small>P{String(item.preview.pageIndex + 1).padStart(2, "0")}</small>
-                </figcaption>
-                <div
-                  className="openpress-project-component-preview"
-                  dangerouslySetInnerHTML={{ __html: item.preview.html }}
-                />
-              </figure>
-            ))}
-          </div>
-        ) : (
-          <p className="openpress-project-empty">目前文件尚未渲染任何內容區塊。</p>
-        )}
-      </article>
-    </section>
-  );
-}
-
-function ProjectImageGallery({
-  mediaAssets,
-}: {
-  mediaAssets: MediaAssetItem[];
-}) {
-  const usedCount = mediaAssets.filter((item) => item.usageCount > 0).length;
-  const unreferencedAssets = mediaAssets.filter((item) => item.usageCount === 0);
-  const referencedAssets = mediaAssets.filter((item) => item.usageCount > 0);
-  return (
-    <section className="openpress-project-preview-panel" aria-label="專案">
-      <article className="openpress-project-gallery-viewer" aria-label="Image Gallery">
-        <ProjectSectionHeader
-          title="Media Library"
-          description={projectSourceDirectoryPath("media")}
-          stats={[
-            ["Files", String(mediaAssets.length)],
-            ["Used", String(usedCount)],
-          ]}
-        />
-        {mediaAssets.length > 0 ? (
-          <div className="openpress-project-media-sections" aria-label="media gallery">
-            <ProjectMediaSection title="未引用" assets={unreferencedAssets} />
-            <ProjectMediaSection title="已引用" assets={referencedAssets} />
-          </div>
-        ) : (
-          <p className="openpress-project-empty">{projectSourceDirectoryPath("media")} 尚未有可預覽素材。</p>
-        )}
-      </article>
-    </section>
-  );
-}
-
-function ProjectSectionHeader({
-  title,
-  description,
-  stats,
-  minimal = false,
-}: {
-  title: string;
-  description?: string;
-  stats?: Array<[string, string]>;
-  minimal?: boolean;
-}) {
-  return (
-    <header className={`openpress-project-section-header${minimal ? " openpress-project-section-header--minimal" : ""}`}>
-      <div>
-        <h2>{title}</h2>
-        {description ? <span>{description}</span> : null}
-      </div>
-      {!minimal && stats?.length ? (
-        <dl>
-          {stats.map(([label, value]) => (
-            <div key={label}>
-              <dt>{label}</dt>
-              <dd>{value}</dd>
-            </div>
-          ))}
-        </dl>
-      ) : null}
-    </header>
-  );
-}
-
-function ProjectMediaSection({
-  title,
-  assets,
-}: {
-  title: string;
-  assets: MediaAssetItem[];
-}) {
-  return (
-    <section className="openpress-project-media-section" aria-label={title}>
-      <header className="openpress-project-media-section-header">
-        <h3>{title}</h3>
-      </header>
-      {assets.length > 0 ? (
-        <div className="openpress-project-media-gallery">
-          {assets.map((item) => (
-            <figure className="openpress-project-media-card" data-unused={item.usageCount === 0 ? "true" : "false"} key={item.id}>
-              <img src={item.src} alt="" loading="lazy" />
-              <figcaption>
-                <strong>{item.fileName}</strong>
-              </figcaption>
-            </figure>
-          ))}
-        </div>
-      ) : (
-        <p className="openpress-project-media-section-empty">沒有{title}圖片。</p>
-      )}
-    </section>
-  );
-}
-
-function createComponentPreviewItems(usages: Map<string, ProjectComponentUsage>) {
-  return Array.from(usages.entries())
-    .flatMap(([name, usage]) => usage.previews.map((preview, index) => ({ name, preview, index })))
-    .filter((item) => Boolean(item.preview.html))
-    .sort((a, b) => {
-      const pageDelta = a.preview.pageIndex - b.preview.pageIndex;
-      return pageDelta || a.name.localeCompare(b.name, "zh-Hant") || a.index - b.index;
-    });
-}
-
 function extractRenderedComponentBlocks(html: string) {
   const blocks: Array<{ name: string; html: string }> = [];
   const openTagPattern = /<(figure|section|article|div)\b[^>]*data-openpress-component="([^"]+)"[^>]*>/g;
@@ -510,16 +247,3 @@ const PROJECT_SKILL_MENTIONS: ProjectMentionItem[] = [
   { trigger: "/", value: "/apply-style", label: "apply-style", meta: "skill", kind: "skill" },
   { trigger: "/", value: "/fix-code", label: "fix-code", meta: "skill", kind: "skill" },
 ];
-
-const PROJECT_COLOR_SWATCHES = [
-  { label: "Document", token: "--openpress-color-document" },
-  { label: "Paper", token: "--openpress-color-paper" },
-  { label: "Ink", token: "--openpress-color-ink" },
-  { label: "Body", token: "--openpress-color-body" },
-  { label: "Muted", token: "--openpress-color-muted" },
-  { label: "Subtle", token: "--openpress-color-subtle" },
-  { label: "Line", token: "--openpress-color-line" },
-  { label: "Block", token: "--openpress-color-block" },
-  { label: "Info", token: "--openpress-color-info" },
-  { label: "Green", token: "--openpress-color-green" },
-];