@open-press/core 0.7.0 → 0.8.0

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

@@ -0,0 +1,136 @@
+import { useCallback, useMemo, useState } from "react";
+import { isLocalWorkspaceHost } from "../../shared";
+import type { DeploymentInfo } from "../../document-model";
+import type { DeployStatus, PdfActionStatus } from "../workbenchTypes";
+import { parseDeployError, workbenchPdfButtonText, workbenchPdfStatusMessage } from "./deploymentStatusModel";
+
+export interface UseDeploymentWorkbenchOptions {
+  deploymentInfo: DeploymentInfo;
+}
+
+export interface DeploymentWorkbench {
+  status: DeployStatus;
+  pdfActionStatus: PdfActionStatus;
+  currentDeploymentInfo: DeploymentInfo;
+  staticPdfHref: string | undefined;
+  localDeployEnabled: boolean;
+  pdfButtonText: string;
+  pdfButtonDisabled: boolean;
+  pdfStatusMessage: string | null;
+  pdfToolbarExpanded: boolean;
+  handleDeploy: () => Promise<void>;
+  handleOpenWorkbenchPdf: () => void;
+}
+
+export function useDeploymentWorkbench({ deploymentInfo }: UseDeploymentWorkbenchOptions): DeploymentWorkbench {
+  const [status, setStatus] = useState<DeployStatus>("idle");
+  const [pdfActionStatus, setPdfActionStatus] = useState<PdfActionStatus>("idle");
+  const [currentDeploymentInfo, setCurrentDeploymentInfo] = useState(deploymentInfo);
+  const staticPdfHref = currentDeploymentInfo.pdf;
+
+  const localDeployEnabled = useMemo(() => {
+    if (typeof window === "undefined") return false;
+    return isLocalWorkspaceHost(window.location.hostname);
+  }, []);
+
+  const pdfButtonText = workbenchPdfButtonText(localDeployEnabled, pdfActionStatus, staticPdfHref);
+  const pdfStatusMessage = workbenchPdfStatusMessage(localDeployEnabled, pdfActionStatus);
+  const pdfButtonDisabled = localDeployEnabled
+    ? pdfActionStatus === "generating" || pdfActionStatus === "opening"
+    : !staticPdfHref;
+  const pdfToolbarExpanded = pdfActionStatus !== "idle";
+
+  const handleDeploy = useCallback(async () => {
+    if (status === "deploying") return;
+    if (currentDeploymentInfo.configured === false) {
+      setStatus("setup");
+      return;
+    }
+    setStatus("deploying");
+    try {
+      const response = await fetch("/__openpress/deploy", { method: "POST" });
+      if (response.status === 404 || response.status === 405) {
+        setStatus("unavailable");
+        return;
+      }
+      if (!response.ok) {
+        const text = await response.text().catch(() => "");
+        const result = parseDeployError(text);
+        if (result?.deploy_configured === false) {
+          setCurrentDeploymentInfo((info) => ({
+            ...info,
+            configured: false,
+            adapter: result.deploy_adapter ?? info.adapter,
+            source: result.deploy_source ?? info.source,
+            projectName: result.deploy_project_name ?? info.projectName,
+            setupMessage: result.message ?? info.setupMessage,
+          }));
+          setStatus("setup");
+          return;
+        }
+        console.error("OpenPress deploy failed", text);
+        setStatus("failed");
+        return;
+      }
+      const result = (await response.json().catch(() => null)) as {
+        deployed_at?: string;
+        pdf?: string;
+        public_url?: string;
+      } | null;
+      setCurrentDeploymentInfo((info) => ({
+        online: true,
+        deployedAt: result?.deployed_at ?? new Date().toISOString(),
+        pdf: result?.pdf ?? info.pdf ?? __OPENPRESS_PDF_HREF__,
+        publicUrl: result?.public_url ?? info.publicUrl,
+        dirty: false,
+      }));
+      setStatus("deployed");
+      setTimeout(() => setStatus("idle"), 3200);
+    } catch (error) {
+      console.error("OpenPress deploy unavailable", error);
+      setStatus("unavailable");
+    }
+  }, [status, currentDeploymentInfo.configured]);
+
+  const handleOpenLatestLocalPdf = useCallback(async () => {
+    if (pdfActionStatus === "generating") return;
+    setPdfActionStatus("generating");
+    try {
+      const response = await fetch("/__openpress/local-pdf-export", { method: "POST" });
+      if (!response.ok) {
+        const text = await response.text().catch(() => "");
+        throw new Error(text || `Local PDF export failed with status ${response.status}`);
+      }
+      const result = (await response.json().catch(() => null)) as { pdf?: string } | null;
+      const pdfHref = result?.pdf ?? "/__openpress/local-pdf-file";
+      setPdfActionStatus("opening");
+      window.setTimeout(() => window.location.assign(pdfHref), 180);
+    } catch (error) {
+      console.error("OpenPress local PDF export failed", error);
+      setPdfActionStatus("failed");
+    }
+  }, [pdfActionStatus]);
+
+  const handleOpenWorkbenchPdf = useCallback(() => {
+    if (localDeployEnabled) {
+      void handleOpenLatestLocalPdf();
+      return;
+    }
+    if (!staticPdfHref) return;
+    window.open(staticPdfHref, "_blank", "noopener,noreferrer");
+  }, [handleOpenLatestLocalPdf, localDeployEnabled, staticPdfHref]);
+
+  return {
+    status,
+    pdfActionStatus,
+    currentDeploymentInfo,
+    staticPdfHref,
+    localDeployEnabled,
+    pdfButtonText,
+    pdfButtonDisabled,
+    pdfStatusMessage,
+    pdfToolbarExpanded,
+    handleDeploy,
+    handleOpenWorkbenchPdf,
+  };
+}

package/src/openpress/workbench/dialog/WorkbenchDialog.tsx

@@ -0,0 +1,72 @@
+import { type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+
+export function WorkbenchDialog({
+  titleId,
+  title,
+  eyebrow,
+  titleMeta,
+  className,
+  backdropClassName,
+  headerClassName,
+  closeLabel,
+  onClose,
+  children,
+  footer,
+}: {
+  titleId: string;
+  title: ReactNode;
+  eyebrow?: ReactNode;
+  titleMeta?: ReactNode;
+  className?: string;
+  backdropClassName?: string;
+  headerClassName?: string;
+  closeLabel: string;
+  onClose: () => void;
+  children: ReactNode;
+  footer?: ReactNode;
+}) {
+  if (typeof document === "undefined") return null;
+
+  return createPortal(
+    <div
+      className={joinClassNames("openpress-workbench-dialog-backdrop", backdropClassName)}
+      role="presentation"
+      onClick={onClose}
+    >
+      <section
+        className={joinClassNames("openpress-workbench-dialog", className)}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <header className={joinClassNames("openpress-workbench-dialog__header", headerClassName)}>
+          <div className="openpress-workbench-dialog__heading">
+            {eyebrow ? <span className="openpress-workbench-dialog__eyebrow">{eyebrow}</span> : null}
+            <div className="openpress-workbench-dialog__title-row">
+              <h2 id={titleId}>{title}</h2>
+              {titleMeta ? <div className="openpress-workbench-dialog__title-meta">{titleMeta}</div> : null}
+            </div>
+          </div>
+          <button
+            type="button"
+            className="openpress-workbench-dialog__close"
+            aria-label={closeLabel}
+            onClick={onClose}
+          >
+            <X aria-hidden="true" />
+          </button>
+        </header>
+        {children}
+        {footer ? <footer className="openpress-workbench-dialog__footer">{footer}</footer> : null}
+      </section>
+    </div>,
+    document.body,
+  );
+}
+
+function joinClassNames(...classNames: Array<string | false | null | undefined>) {
+  return classNames.filter(Boolean).join(" ");
+}

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

@@ -0,0 +1 @@
+export { WorkbenchDialog } from "./WorkbenchDialog";

package/src/openpress/workbench/document/components/DocumentPanel.tsx

@@ -0,0 +1,127 @@
+import { createContext, useContext, useId, useState, type ReactNode } from "react";
+import { FolderKanban, MessageSquareText, type LucideIcon } from "lucide-react";
+
+type DocumentPanelProps = {
+  children: ReactNode;
+};
+
+type DocumentPanelTabValue = "comments" | "project";
+
+type DocumentPanelContextValue = {
+  activeTab: DocumentPanelTabValue;
+  setActiveTab: (tab: DocumentPanelTabValue) => void;
+  baseId: string;
+};
+
+const DocumentPanelContext = createContext<DocumentPanelContextValue | null>(null);
+
+const PANEL_TABS: Array<{ value: DocumentPanelTabValue; label: string; icon: LucideIcon }> = [
+  { value: "comments", label: "註解", icon: MessageSquareText },
+  { value: "project", label: "Project", icon: FolderKanban },
+];
+
+function useDocumentPanel() {
+  const value = useContext(DocumentPanelContext);
+  if (!value) throw new Error("DocumentPanel compound components must be rendered inside <DocumentPanel>.");
+  return value;
+}
+
+function DocumentPanelRoot({ children }: DocumentPanelProps) {
+  const reactId = useId();
+  const [activeTab, setActiveTab] = useState<DocumentPanelTabValue>("comments");
+  const baseId = `openpress-document-panel-${reactId.replaceAll(":", "")}`;
+
+  return (
+    <DocumentPanelContext.Provider value={{ activeTab, setActiveTab, baseId }}>
+      <section
+        className="openpress-document-panel"
+        data-openpress-document-panel
+        data-openpress-document-panel-tab={activeTab}
+      >
+        {children}
+      </section>
+    </DocumentPanelContext.Provider>
+  );
+}
+
+function DocumentPanelTabs() {
+  const { activeTab, setActiveTab, baseId } = useDocumentPanel();
+
+  return (
+    <div className="openpress-dev-control-tabs openpress-document-panel-tabs" role="tablist" aria-label="側邊面板">
+      {PANEL_TABS.map((item) => {
+        const Icon = item.icon;
+        const selected = activeTab === item.value;
+        return (
+          <button
+            type="button"
+            role="tab"
+            aria-selected={selected}
+            aria-controls={`${baseId}-${item.value}`}
+            id={`${baseId}-${item.value}-tab`}
+            className={selected ? "is-active" : undefined}
+            key={item.value}
+            onClick={() => setActiveTab(item.value)}
+          >
+            <Icon aria-hidden="true" />
+            <span>{item.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function DocumentPanelTabPanel({
+  value,
+  className,
+  children,
+}: DocumentPanelProps & {
+  value: DocumentPanelTabValue;
+  className?: string;
+}) {
+  const { activeTab, baseId } = useDocumentPanel();
+  const active = activeTab === value;
+
+  return (
+    <section
+      id={`${baseId}-${value}`}
+      className={className}
+      role="tabpanel"
+      aria-labelledby={`${baseId}-${value}-tab`}
+      data-openpress-document-panel-tab-panel={value}
+      data-active={active ? "true" : "false"}
+      hidden={!active}
+    >
+      {children}
+    </section>
+  );
+}
+
+function DocumentPanelProject({ children }: DocumentPanelProps) {
+  return (
+    <DocumentPanelTabPanel value="project" className="openpress-document-panel__project">
+      {children}
+    </DocumentPanelTabPanel>
+  );
+}
+
+function DocumentPanelPendingComments({ children }: DocumentPanelProps) {
+  return (
+    <DocumentPanelTabPanel value="comments" className="openpress-document-panel__comments">
+      {children}
+    </DocumentPanelTabPanel>
+  );
+}
+
+function DocumentPanelSlot({ children }: DocumentPanelProps) {
+  return <>{children}</>;
+}
+
+export const DocumentPanel = Object.assign(DocumentPanelRoot, {
+  Tabs: DocumentPanelTabs,
+  Project: DocumentPanelProject,
+  PendingComments: DocumentPanelPendingComments,
+  Actions: DocumentPanelSlot,
+  CurrentPage: DocumentPanelSlot,
+});

package/src/openpress/workbench/document/components/InlineSourceEditorLayer.tsx

@@ -0,0 +1,207 @@
+import { useEffect, useMemo, useState } from "react";
+import type {
+  InlineDocumentEditStatus,
+  InlineDocumentSourceTarget,
+} from "../hooks/useInlineDocumentEditor";
+
+export function InlineSourceEditorLayer({
+  target,
+  fetchImpl,
+  onClose,
+  onStatusChange,
+  geometryVersion,
+}: {
+  target: InlineDocumentSourceTarget | null;
+  fetchImpl?: typeof fetch;
+  onClose: () => void;
+  onStatusChange?: (status: InlineDocumentEditStatus) => void;
+  geometryVersion?: unknown;
+}) {
+  const [text, setText] = useState("");
+  const [status, setStatus] = useState<"idle" | "loading" | "saving" | "failed">("idle");
+  const [error, setError] = useState("");
+  const sourceRequestUrl = useMemo(() => target ? sourceReadUrl(target) : "", [target]);
+  const targetRect = useMemo(() => target ? resolveSourceEditorTargetRect(target) : null, [geometryVersion, target]);
+
+  useEffect(() => {
+    if (!target) {
+      setText("");
+      setStatus("idle");
+      setError("");
+      return undefined;
+    }
+
+    const request = fetchImpl ?? globalThis.fetch?.bind(globalThis);
+    if (!request) {
+      setStatus("failed");
+      setError("Source edit endpoint is unavailable.");
+      return undefined;
+    }
+
+    let canceled = false;
+    setStatus("loading");
+    setError("");
+    void request(sourceRequestUrl, { method: "GET" })
+      .then(async (response) => {
+        if (!response.ok) {
+          const message = await response.text().catch(() => "");
+          throw new Error(message || `Source read failed with status ${response.status}`);
+        }
+        return response.json() as Promise<{ source?: { text?: string } }>;
+      })
+      .then((result) => {
+        if (canceled) return;
+        setText(result.source?.text ?? "");
+        setStatus("idle");
+        onStatusChange?.({ state: "editing", blockId: target.block.id });
+      })
+      .catch((readError) => {
+        if (canceled) return;
+        const message = readError instanceof Error ? readError.message : String(readError);
+        setStatus("failed");
+        setError(message);
+        onStatusChange?.({ state: "failed", blockId: target.block.id, message });
+      });
+
+    return () => {
+      canceled = true;
+    };
+  }, [fetchImpl, onStatusChange, sourceRequestUrl, target]);
+
+  if (!target) return null;
+
+  const block = target.block;
+  const position = sourceEditorPosition(targetRect ?? target.rect);
+  const canSave = status !== "loading" && status !== "saving" && text.trim().length > 0;
+
+  const handleSave = async () => {
+    const request = fetchImpl ?? globalThis.fetch?.bind(globalThis);
+    if (!request) {
+      setStatus("failed");
+      setError("Source edit endpoint is unavailable.");
+      return;
+    }
+
+    setStatus("saving");
+    setError("");
+    onStatusChange?.({ state: "saving", blockId: block.id });
+    try {
+      const response = await request("/__openpress/source-edit", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          blockId: block.id,
+          path: block.path,
+          kind: block.kind,
+          name: block.name,
+          source: block.source,
+          sourceMode: true,
+          text,
+        }),
+      });
+      if (!response.ok) {
+        const message = await response.text().catch(() => "");
+        throw new Error(message || `Source edit failed with status ${response.status}`);
+      }
+      setStatus("idle");
+      onStatusChange?.({ state: "saved", blockId: block.id });
+      onClose();
+    } catch (saveError) {
+      const message = saveError instanceof Error ? saveError.message : String(saveError);
+      setStatus("failed");
+      setError(message);
+      onStatusChange?.({ state: "failed", blockId: block.id, message });
+    }
+  };
+
+  const statusText = sourceEditorStatusText(status, error);
+
+  return (
+    <div className="openpress-inline-source-editor-layer" onMouseDown={(event) => event.stopPropagation()}>
+      <section
+        className="openpress-inline-source-editor"
+        role="dialog"
+        aria-label="Source 編輯"
+        style={position}
+      >
+        <header className="openpress-inline-source-editor__header">
+          <div>
+            <span className="openpress-inline-source-editor__eyebrow">SOURCE</span>
+            <strong>{block.name ?? block.kind ?? "Block"}</strong>
+          </div>
+          <button type="button" onClick={onClose} aria-label="關閉 source 編輯">
+            ×
+          </button>
+        </header>
+        <textarea
+          aria-label="Source 內容"
+          value={text}
+          disabled={status === "loading" || status === "saving"}
+          spellCheck={false}
+          onChange={(event) => {
+            setText(event.target.value);
+            onStatusChange?.({ state: "editing", blockId: block.id });
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Escape") {
+              event.stopPropagation();
+              onClose();
+            }
+          }}
+        />
+        <footer className="openpress-inline-source-editor__footer">
+          <span data-openpress-source-editor-status={status} role="status" aria-live="polite">
+            {statusText}
+          </span>
+          <div>
+            <button type="button" onClick={onClose}>
+              取消
+            </button>
+            <button type="button" onClick={handleSave} disabled={!canSave}>
+              儲存 source
+            </button>
+          </div>
+        </footer>
+      </section>
+    </div>
+  );
+}
+
+function sourceReadUrl(target: InlineDocumentSourceTarget) {
+  const params = new URLSearchParams();
+  params.set("path", target.block.path);
+  params.set("line", String(target.block.source?.line ?? 1));
+  params.set("column", String(target.block.source?.column ?? 1));
+  params.set("endLine", String(target.block.source?.endLine ?? target.block.source?.line ?? 1));
+  params.set("endColumn", String(target.block.source?.endColumn ?? target.block.source?.column ?? 1));
+  return `/__openpress/source-edit?${params.toString()}`;
+}
+
+function resolveSourceEditorTargetRect(target: InlineDocumentSourceTarget) {
+  const rect = target.element.getBoundingClientRect();
+  if (rect.width > 0 || rect.height > 0 || rect.left !== 0 || rect.top !== 0) return rect;
+  return target.rect;
+}
+
+function sourceEditorPosition(rect: DOMRect) {
+  const width = 420;
+  const margin = 14;
+  const viewportWidth = typeof window === "undefined" ? 1280 : window.innerWidth;
+  const viewportHeight = typeof window === "undefined" ? 900 : window.innerHeight;
+  const left = Math.min(Math.max(rect.left, margin), Math.max(margin, viewportWidth - width - margin));
+  const top = rect.bottom + 12 + 280 < viewportHeight
+    ? rect.bottom + 12
+    : Math.max(margin, rect.top - 292);
+  return {
+    left,
+    top,
+    width,
+  };
+}
+
+function sourceEditorStatusText(status: "idle" | "loading" | "saving" | "failed", error: string) {
+  if (status === "loading") return "讀取中";
+  if (status === "saving") return "儲存中";
+  if (status === "failed") return error || "儲存失敗";
+  return "可編輯 source";
+}

package/src/openpress/workbench/document/components/ReaderStage.tsx

@@ -0,0 +1,9 @@
+import { forwardRef, type ReactNode } from "react";
+
+export const ReaderStage = forwardRef<HTMLElement, { children: ReactNode }>(function ReaderStage({ children }, ref) {
+  return (
+    <main className="reader-stage" tabIndex={-1} ref={ref}>
+      {children}
+    </main>
+  );
+});

package/src/openpress/workbench/document/hooks/useDocumentWorkbenchModel.ts

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import {
+  collectBookmarkIndex,
+  collectMediaAssetIndex,
+  createAnchorPageMap,
+  getSourceBlockMap,
+  type ReaderDocument,
+} from "../../../document-model";
+import type { DisplayPage } from "../../../reader";
+import { groupSourceBlocksByPath } from "../../inspector";
+import { createProjectComponentUsages, createProjectMentionItems } from "../../project";
+
+export function useDocumentWorkbenchModel(document: ReaderDocument, pages: DisplayPage[]) {
+  const mediaAssets = useMemo(() => collectMediaAssetIndex(pages), [pages]);
+  const anchorPageMap = useMemo(() => createAnchorPageMap(pages), [pages]);
+  const projectComponentUsages = useMemo(() => createProjectComponentUsages(pages), [pages]);
+  const bookmarks = useMemo(() => collectBookmarkIndex(pages), [pages]);
+  const sourceBlockMap = useMemo(() => getSourceBlockMap(document), [document]);
+  const sourceBlocksByPath = useMemo(() => groupSourceBlocksByPath(sourceBlockMap), [sourceBlockMap]);
+  const projectMentionItems = useMemo(
+    () => createProjectMentionItems(mediaAssets, projectComponentUsages, bookmarks),
+    [bookmarks, mediaAssets, projectComponentUsages],
+  );
+
+  return {
+    mediaAssets,
+    anchorPageMap,
+    projectComponentUsages,
+    bookmarks,
+    sourceBlockMap,
+    sourceBlocksByPath,
+    projectMentionItems,
+  };
+}