@open-press/cli 0.8.0 → 1.1.0

package/template/core/src/openpress/workbench/Workbench.tsx

@@ -1,407 +0,0 @@
-import {
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-} from "react";
-import { ExternalLink, MousePointer2, Ruler } from "lucide-react";
-import {
-  getProjectIdentity,
-  resolveAnchorPageIndex,
-  type DeploymentInfo,
-  type HtmlPageBlock,
-  type ReaderDocument,
-} from "../document-model";
-import { InlineInspectorLayer, useInspector, useInspectorComments } from "./inspector";
-import { ProjectEntryPanel } from "./project";
-import {
-  Bookmarks,
-  CurrentPagePanel,
-  PUBLIC_DRAWER_BREAKPOINT,
-  PublicPage,
-  useReaderRuntime,
-  usePageViewportScale,
-  useViewMode,
-  type PageLayoutMode,
-} from "../reader";
-import {
-  ReaderStage,
-  InlineSourceEditorLayer,
-  useDocumentWorkbenchModel,
-  useInlineDocumentEditor,
-  type InlineDocumentEditStatus,
-  type InlineDocumentSourceTarget,
-} from "./document";
-import {
-  DeploymentControl,
-  PageZoomControl,
-  SearchControl,
-  useDeploymentWorkbench,
-} from "./actions";
-import { PendingCommentsPanel, WorkbenchControlPanel, type WorkbenchPanel } from "./panels";
-import { WorkbenchShell } from "./shell";
-import {
-  formatPageGeometrySpec,
-  formatInspectorSelection,
-} from "./workbenchFormatters";
-
-export function HtmlWorkbench({
-  document,
-  pages,
-  style,
-  devMode,
-  deploymentInfo,
-  onDocumentRefresh,
-  extraControlPanels,
-}: {
-  document: ReaderDocument;
-  pages: Array<HtmlPageBlock>;
-  style: CSSProperties;
-  devMode: boolean;
-  deploymentInfo: DeploymentInfo;
-  onDocumentRefresh?: () => void | Promise<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.
-  extraControlPanels?: WorkbenchPanel[];
-}) {
-  const sourceContainerRef = useRef<HTMLDivElement | null>(null);
-  const displayPages = pages;
-  const { viewMode } = useViewMode();
-  const {
-    mediaAssets,
-    anchorPageMap,
-    projectComponentUsages,
-    bookmarks,
-    sourceBlockMap,
-    sourceBlocksByPath,
-    projectMentionItems,
-  } = useDocumentWorkbenchModel(document, displayPages);
-  const inspector = useInspector(document, { enabled: devMode });
-  const reader = useReaderRuntime({
-    pageCount: Math.max(displayPages.length, 1),
-    leftPanelBreakpoint: PUBLIC_DRAWER_BREAKPOINT,
-    rightPanelBreakpoint: PUBLIC_DRAWER_BREAKPOINT,
-  });
-  const [pageLayoutMode, setPageLayoutMode] = useState<PageLayoutMode>("single");
-  const pageViewport = usePageViewportScale({
-    stageRef: reader.stageRef,
-    pageContainerRef: sourceContainerRef,
-    pageCount: displayPages.length,
-    layoutMode: pageLayoutMode,
-  });
-  const deployment = useDeploymentWorkbench({ deploymentInfo });
-  const [inlineEditStatus, setInlineEditStatus] = useState<InlineDocumentEditStatus>({ state: "idle" });
-  const [sourceEditorTarget, setSourceEditorTarget] = useState<InlineDocumentSourceTarget | null>(null);
-
-  const projectIdentity = getProjectIdentity(document.meta);
-  const pageGeometry = formatPageGeometrySpec(document.theme);
-  const inspectorSelectionLabel = formatInspectorSelection(
-    inspector.selectedBlock,
-    inspector.selectedObjectEntity,
-  );
-  const inspectorToolbarExpanded = inspector.inspectorMode;
-  const editStatusMessage = formatInlineEditStatus(inlineEditStatus);
-
-  useInlineDocumentEditor({
-    enabled: devMode,
-    sourceContainerRef,
-    sourceBlockMap,
-    onStatusChange: setInlineEditStatus,
-    onOpenSourceBlock: setSourceEditorTarget,
-    onDocumentEdited: onDocumentRefresh,
-  });
-
-  const selectWorkspacePage = (pageIndex: number, options?: { behavior?: ScrollBehavior }) => {
-    reader.setPage(pageIndex, options);
-    if (
-      typeof window !== "undefined"
-      && window.innerWidth < PUBLIC_DRAWER_BREAKPOINT
-      && reader.rightPanelOpen
-    ) {
-      reader.toggleRightPanel();
-    }
-  };
-
-  const selectWorkspaceAnchor = (anchorId: string, pageIndex?: number) => {
-    const targetPageIndex = resolveAnchorPageIndex(anchorPageMap, displayPages.length, anchorId, pageIndex);
-    if (targetPageIndex === null) return false;
-    selectWorkspacePage(targetPageIndex, { behavior: "smooth" });
-    return true;
-  };
-
-  const comments = useInspectorComments({
-    devMode,
-    inspector,
-    sourceBlockMap,
-    sourceBlocksByPath,
-    sourceContainerRef,
-    onSelectWorkspacePage: selectWorkspacePage,
-  });
-
-  // Stabilize the controller objects so memoized InlineInspectorLayer can skip
-  // re-rendering when nothing observable changed.
-  const inspectorLayerComments = useMemo(() => ({
-    saved: comments.inlineSavedComments,
-    active: comments.activeInlineSavedComment ?? null,
-    status: comments.inspectorCommentStatus,
-    statusMessage: comments.inspectorCommentStatusMessage,
-    totalCount: comments.pendingComments.length,
-    onOpenSaved: comments.handleOpenInlineSavedComment,
-    onRemoveSaved: comments.handleRemoveInlineSavedComment,
-  }), [
-    comments.activeInlineSavedComment,
-    comments.handleOpenInlineSavedComment,
-    comments.handleRemoveInlineSavedComment,
-    comments.inlineSavedComments,
-    comments.inspectorCommentStatus,
-    comments.inspectorCommentStatusMessage,
-    comments.pendingComments.length,
-  ]);
-  const inspectorLayerComposer = useMemo(() => ({
-    text: comments.inspectorCommentText,
-    submitDisabled: comments.inspectorCommentDisabled,
-    mentionItems: projectMentionItems,
-    onTextChange: comments.setInspectorCommentText,
-    onSubmit: comments.handleSubmitInspectorComment,
-  }), [
-    comments.handleSubmitInspectorComment,
-    comments.inspectorCommentDisabled,
-    comments.inspectorCommentText,
-    comments.setInspectorCommentText,
-    projectMentionItems,
-  ]);
-
-  const currentSourcePath = displayPages[reader.currentPageIndex]?.source;
-  const builtInControlPanels: WorkbenchPanel[] = [
-    {
-      id: "pending-comments",
-      render: () => (
-        <PendingCommentsPanel
-          comments={comments.pendingComments}
-          status={comments.commentsStatus}
-          error={comments.commentsError}
-          onClear={comments.clearPendingComment}
-          onSelect={comments.handleSelectPendingComment}
-        />
-      ),
-    },
-    {
-      id: "project-entry",
-      render: () => (
-        <ProjectEntryPanel
-          mediaAssets={mediaAssets}
-          componentUsages={projectComponentUsages}
-          mentionItems={projectMentionItems}
-          currentSource={currentSourcePath}
-          onCommentSubmitted={comments.refreshPendingComments}
-        />
-      ),
-    },
-  ];
-  const controlPanels = extraControlPanels
-    ? [...builtInControlPanels, ...extraControlPanels]
-    : builtInControlPanels;
-
-  const toolbarActions = (
-    <>
-      <div className="openpress-workbench-toolbar__group" aria-label="輸出">
-        <button
-          type="button"
-          className="openpress-workbench-toolbar-action"
-          data-openpress-public-export
-          data-openpress-toolbar-expanded={deployment.pdfToolbarExpanded ? "true" : "false"}
-          data-openpress-toolbar-active={deployment.pdfToolbarExpanded ? "true" : "false"}
-          disabled={deployment.pdfButtonDisabled}
-          onClick={deployment.handleOpenWorkbenchPdf}
-          title={deployment.pdfButtonText}
-          aria-label={deployment.pdfButtonText}
-        >
-          <ExternalLink aria-hidden="true" />
-          <span className="openpress-workbench-toolbar-action__label">{deployment.pdfButtonText}</span>
-          {deployment.pdfStatusMessage ? (
-            <span
-              className="openpress-dev-pdf-status"
-              data-openpress-pdf-status={deployment.pdfActionStatus}
-              role="status"
-              aria-live="polite"
-            >
-              <span className="openpress-dev-pdf-status__spinner" aria-hidden="true" />
-              <span>{deployment.pdfStatusMessage}</span>
-            </span>
-          ) : null}
-        </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}
-        />
-      </div>
-      <div className="openpress-workbench-toolbar__group openpress-workbench-toolbar__group--right" aria-label="工作台狀態與發布">
-        {devMode ? (
-          <SearchControl
-            sourceBlocksByPath={sourceBlocksByPath}
-            onSelectPage={selectWorkspacePage}
-          />
-        ) : null}
-        {devMode && editStatusMessage ? (
-          <span
-            className="openpress-dev-edit-status openpress-dev-edit-status--toolbar"
-            data-openpress-edit-status={inlineEditStatus.state}
-            role="status"
-            aria-live="polite"
-          >
-            {inlineEditStatus.state === "saving" ? <span className="openpress-dev-edit-status__spinner" aria-hidden="true" /> : null}
-            <span>{editStatusMessage}</span>
-          </span>
-        ) : null}
-        {devMode ? (
-          <button
-            type="button"
-            className="openpress-workbench-toolbar-action"
-            data-openpress-inspector-toggle
-            data-openpress-inspector-active={inspector.inspectorMode ? "true" : "false"}
-            data-openpress-toolbar-expanded={inspectorToolbarExpanded ? "true" : "false"}
-            data-openpress-toolbar-active={inspectorToolbarExpanded ? "true" : "false"}
-            onClick={() => inspector.setInspectorMode(!inspector.inspectorMode)}
-            aria-pressed={inspector.inspectorMode}
-            title={inspector.inspectorMode ? "關閉註解" : "開啟註解"}
-            aria-label={inspector.inspectorMode ? "關閉註解" : "開啟註解"}
-          >
-            <MousePointer2 aria-hidden="true" />
-            <span className="openpress-workbench-toolbar-action__label">{inspector.inspectorMode ? "註解中" : "註解"}</span>
-            <span className="openpress-dev-inspector-status">{inspectorSelectionLabel}</span>
-          </button>
-        ) : null}
-        {devMode && inspector.inspectorMode ? (
-          <span
-            className="openpress-dev-inspector-status"
-            role="status"
-            aria-live="polite"
-            data-openpress-inspector-comment-status={comments.inspectorCommentStatus}
-          >
-            {comments.inspectorCommentStatusMessage}
-          </span>
-        ) : null}
-        {deployment.localDeployEnabled ? (
-          <DeploymentControl
-            info={deployment.currentDeploymentInfo}
-            status={deployment.status}
-            onDeploy={deployment.handleDeploy}
-          />
-        ) : null}
-      </div>
-    </>
-  );
-
-  return (
-    <WorkbenchShell
-      style={style}
-      devMode={devMode}
-      viewMode={viewMode}
-      inspectorMode={inspector.inspectorMode}
-      editMode={devMode}
-      leftPanelOpen={reader.leftPanelOpen}
-      rightPanelOpen={reader.rightPanelOpen}
-      onToggleLeftPanel={reader.toggleLeftPanel}
-      onToggleRightPanel={reader.toggleRightPanel}
-    >
-      <WorkbenchShell.Toolbar>
-        {toolbarActions}
-      </WorkbenchShell.Toolbar>
-
-      <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>
-
-        <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>
-        <CurrentPagePanel
-          currentPageLabel={reader.currentPageLabel}
-          totalPageLabel={reader.totalPageLabel}
-          progressPercent={reader.progressPercent}
-          title={displayPages[reader.currentPageIndex]?.title || document.meta.title}
-          pageLabelPrefix="頁"
-          showHeading={false}
-          showTitle={false}
-        />
-      </WorkbenchShell.LeftPanel>
-
-      <WorkbenchShell.RightPanel>
-        <WorkbenchControlPanel panels={controlPanels} />
-      </WorkbenchShell.RightPanel>
-
-      <WorkbenchShell.MainContent>
-        <ReaderStage ref={reader.stageRef}>
-          <PublicPage
-            pages={displayPages}
-            currentPageIndex={reader.currentPageIndex}
-            devMode={devMode}
-            sourceContainerRef={sourceContainerRef}
-            registerPage={reader.registerPage}
-            exposeSourceData={devMode}
-            inspector={inspector}
-            onInternalAnchorNavigate={selectWorkspaceAnchor}
-            pageLayoutMode={pageLayoutMode}
-          />
-          {devMode ? (
-            <InlineInspectorLayer
-              sourceContainerRef={sourceContainerRef}
-              inspector={inspector}
-              comments={inspectorLayerComments}
-              composer={inspectorLayerComposer}
-              geometryVersion={`${pageViewport.scaleMode}:${pageViewport.scale}:${pageLayoutMode}`}
-            />
-          ) : null}
-          {devMode ? (
-            <InlineSourceEditorLayer
-              target={sourceEditorTarget}
-              onClose={() => setSourceEditorTarget(null)}
-              onStatusChange={setInlineEditStatus}
-              geometryVersion={`${pageViewport.scaleMode}:${pageViewport.scale}:${pageLayoutMode}`}
-            />
-          ) : null}
-        </ReaderStage>
-      </WorkbenchShell.MainContent>
-    </WorkbenchShell>
-  );
-}
-
-function formatInlineEditStatus(status: InlineDocumentEditStatus) {
-  if (status.state === "saving") return "儲存中";
-  if (status.state === "saved") return "已儲存";
-  if (status.state === "failed") return "儲存失敗";
-  return "";
-}

package/template/core/src/openpress/workbench/actions/DeploymentControl.tsx

@@ -1,157 +0,0 @@
-import { useId, useState } from "react";
-import { Check, Rocket } from "lucide-react";
-import type { DeploymentInfo } from "../../document-model";
-import { WorkbenchDialog } from "../dialog";
-import type { DeployStatus } from "../workbenchTypes";
-import {
-  deployButtonText,
-  deploymentStatusKind,
-  deploymentStatusSummary,
-  deploymentStatusText,
-} from "./deploymentStatusModel";
-
-export function DeploymentControl({
-  info,
-  status,
-  onDeploy,
-}: {
-  info: DeploymentInfo;
-  status: DeployStatus;
-  onDeploy: () => void | Promise<void>;
-}) {
-  const titleId = useId();
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const kind = deploymentStatusKind(info, status);
-  const buttonText = deployButtonText(info, status);
-  const description = deploymentStatusText(info, status);
-  const summary = deploymentStatusSummary(info, status);
-  const sourceLabel = deploymentSourceLabel(info);
-  const busy = status === "deploying";
-  const confirmDisabled = busy || status === "unavailable" || info.configured === false;
-
-  const confirmDeploy = () => {
-    if (confirmDisabled) return;
-    setDialogOpen(false);
-    void onDeploy();
-  };
-
-  const dialog = dialogOpen ? (
-    <WorkbenchDialog
-      titleId={titleId}
-      title="部署資訊"
-      eyebrow="Deployment"
-      titleMeta={<span className="openpress-deploy-dialog__source">{sourceLabel}</span>}
-      className="openpress-deploy-dialog"
-      backdropClassName="openpress-deploy-dialog-backdrop"
-      closeLabel="關閉部署資訊"
-      onClose={() => setDialogOpen(false)}
-      footer={(
-        <>
-          <button type="button" onClick={() => setDialogOpen(false)}>取消</button>
-          <button type="button" disabled={confirmDisabled} onClick={confirmDeploy}>
-            <Check aria-hidden="true" />
-            <span>{busy ? "部署中" : "確認部署"}</span>
-          </button>
-        </>
-      )}
-    >
-      <dl data-openpress-deploy-align="left-values">
-        <DeployStatusRow label="狀態" value={summary} kind={kind} />
-        <DeployLinkRow label="公開頁面" url={info.publicUrl} />
-        <DeployLinkRow label="PDF" url={info.pdf} />
-      </dl>
-      {info.configured === false ? (
-        <p className="openpress-deploy-dialog__message" role="status">
-          {info.setupMessage ?? "部署設定尚未完成。"}
-        </p>
-      ) : null}
-    </WorkbenchDialog>
-  ) : null;
-
-  return (
-    <>
-      <button
-        type="button"
-        className="openpress-workbench-toolbar-action"
-        data-openpress-deploy
-        data-openpress-deploy-status={kind}
-        data-openpress-toolbar-expanded="false"
-        data-openpress-toolbar-active="false"
-        data-deploy-status={status}
-        aria-busy={busy ? "true" : "false"}
-        aria-label={buttonText}
-        title={description}
-        onClick={() => setDialogOpen(true)}
-      >
-        <Rocket aria-hidden="true" />
-      </button>
-      {busy ? (
-        <span
-          className="openpress-dev-deploy-status openpress-dev-deploy-status--toolbar"
-          data-openpress-deploy-status={kind}
-          role="status"
-          aria-live="polite"
-        >
-          <span className="openpress-dev-deploy-status__dot" aria-hidden="true" />
-          <span>部署中</span>
-        </span>
-      ) : null}
-      {dialog}
-    </>
-  );
-}
-
-function DeployStatusRow({ label, value, kind }: { label: string; value: string; kind: string }) {
-  return (
-    <div>
-      <dt>{label}</dt>
-      <dd>
-        <span className="openpress-deploy-dialog__status" data-openpress-deploy-status={kind}>
-          {value}
-        </span>
-      </dd>
-    </div>
-  );
-}
-
-function DeployLinkRow({ label, url }: { label: string; url?: string }) {
-  return (
-    <div>
-      <dt>{label}</dt>
-      <dd>
-        {url ? (
-          <a href={url} target="_blank" rel="noreferrer">
-            {formatDeployUrl(url)}
-          </a>
-        ) : (
-          "尚未產生"
-        )}
-      </dd>
-    </div>
-  );
-}
-
-function deploymentSourceLabel(info: DeploymentInfo) {
-  const adapter = info.adapter?.trim().toLowerCase();
-
-  if (adapter === "cloudflare-pages" || adapter === "cloudflare") return "Cloudflare Pages";
-  if (adapter === "github-pages" || adapter === "github") return "GitHub Pages";
-  if (adapter === "zeabur" || adapter === "zebur") return "Zeabur";
-
-  return info.projectName?.trim() || info.source?.trim() || info.adapter?.trim() || "本機工作區";
-}
-
-function formatDeployUrl(value: string) {
-  try {
-    const url = new URL(value);
-    const pathname = url.pathname === "/" ? "" : url.pathname.replace(/\/$/, "");
-    return shortenDeployUrl(`${url.host}${pathname}`);
-  } catch {
-    return shortenDeployUrl(value);
-  }
-}
-
-function shortenDeployUrl(value: string) {
-  if (value.length <= 48) return value;
-  return `${value.slice(0, 30)}...${value.slice(-14)}`;
-}