@open-press/cli 1.0.0 → 1.1.1

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)}`;
-}

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

@@ -1,96 +0,0 @@
-import { useCallback, useState } from "react";
-import { Camera } from "lucide-react";
-import { toPng } from "html-to-image";
-
-type ExportStatus = "idle" | "exporting" | "done" | "error";
-
-// Exports the currently visible page as a PNG. Locates the page DOM via
-// the data-openpress-page-index attribute (set in PublicReaderPage) and
-// hands it to html-to-image, then triggers a browser download.
-//
-// Lives in the workbench toolbar so it's reachable for any Press shape
-// (manuscript / canvas / slide); for multi-page Press the user navigates
-// to the page first, then exports.
-export function ExportImageControl({
-  currentPageIndex,
-  currentPageLabel,
-  pressTitle,
-}: {
-  currentPageIndex: number;
-  currentPageLabel: string;
-  pressTitle: string;
-}) {
-  const [status, setStatus] = useState<ExportStatus>("idle");
-
-  const handleExport = useCallback(async () => {
-    if (status === "exporting") return;
-    setStatus("exporting");
-
-    try {
-      const pageEl = typeof window === "undefined"
-        ? null
-        : window.document.querySelector<HTMLElement>(
-            `[data-openpress-page-index="${currentPageIndex}"]`,
-          );
-      if (!pageEl) throw new Error("找不到目前頁面");
-
-      // pixelRatio: 2 — retina-ish; keeps text crisp without blowing the file size.
-      // cacheBust: true — force re-fetch of images so stale CORS doesn't taint the canvas.
-      const dataUrl = await toPng(pageEl, {
-        pixelRatio: 2,
-        cacheBust: true,
-        backgroundColor: "#ffffff",
-      });
-
-      const safeTitle = sanitizeFilename(pressTitle) || "openpress";
-      const safePage = sanitizeFilename(currentPageLabel) || String(currentPageIndex + 1);
-      const link = window.document.createElement("a");
-      link.href = dataUrl;
-      link.download = `${safeTitle}-${safePage}.png`;
-      window.document.body.appendChild(link);
-      link.click();
-      link.remove();
-
-      setStatus("done");
-      window.setTimeout(() => setStatus("idle"), 1600);
-    } catch (error) {
-      console.error("[openpress] page PNG export failed", error);
-      setStatus("error");
-      window.setTimeout(() => setStatus("idle"), 2400);
-    }
-  }, [currentPageIndex, currentPageLabel, pressTitle, status]);
-
-  const label = status === "exporting"
-    ? "匯出中…"
-    : status === "done"
-    ? "已下載"
-    : status === "error"
-    ? "匯出失敗"
-    : "PNG";
-  const title = "將目前頁面匯出為 PNG";
-
-  return (
-    <button
-      type="button"
-      className="openpress-workbench-toolbar-action"
-      data-openpress-page-png-export
-      data-openpress-export-status={status}
-      disabled={status === "exporting"}
-      onClick={handleExport}
-      title={title}
-      aria-label={title}
-    >
-      <Camera aria-hidden="true" />
-      <span className="openpress-workbench-toolbar-action__label">{label}</span>
-    </button>
-  );
-}
-
-function sanitizeFilename(value: string): string {
-  return value
-    .replace(/[\\/:*?"<>|]+/g, "-")
-    .replace(/\s+/g, "-")
-    .replace(/-+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .slice(0, 80);
-}

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

@@ -1,182 +0,0 @@
-import { useEffect, useId, useRef, useState } from "react";
-import type { ReactNode } from "react";
-import { Check, ChevronDown, Columns2, File, ZoomIn } from "lucide-react";
-import {
-  PAGE_VIEWPORT_SCALE_OPTIONS,
-  type PageLayoutMode,
-  type PageViewportScaleMode,
-} from "../../reader";
-
-export function PageZoomControl({
-  scaleMode,
-  scaleLabel,
-  pageLayoutMode,
-  onScaleModeChange,
-  onPageLayoutModeChange,
-}: {
-  scaleMode: PageViewportScaleMode;
-  scaleLabel: string;
-  pageLayoutMode: PageLayoutMode;
-  onScaleModeChange: (mode: PageViewportScaleMode) => void;
-  onPageLayoutModeChange: (mode: PageLayoutMode) => void;
-}) {
-  const menuId = useId();
-  const rootRef = useRef<HTMLDivElement | null>(null);
-  const [open, setOpen] = useState(false);
-  const fixedOptions = PAGE_VIEWPORT_SCALE_OPTIONS.filter((option) => option.value.startsWith("scale-"));
-  const fitOptions = PAGE_VIEWPORT_SCALE_OPTIONS.filter((option) => option.value.startsWith("fit-"));
-
-  useEffect(() => {
-    if (!open) return undefined;
-    const handlePointerDown = (event: PointerEvent) => {
-      if (event.target instanceof Node && rootRef.current?.contains(event.target)) return;
-      setOpen(false);
-    };
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    window.addEventListener("pointerdown", handlePointerDown);
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("pointerdown", handlePointerDown);
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [open]);
-
-  const selectScale = (mode: PageViewportScaleMode) => {
-    onScaleModeChange(mode);
-    setOpen(false);
-  };
-  const selectLayout = (mode: PageLayoutMode) => {
-    onPageLayoutModeChange(mode);
-    setOpen(false);
-  };
-
-  return (
-    <div className="openpress-workbench-zoom-control-wrap" ref={rootRef} data-openpress-page-zoom-control>
-      <button
-        type="button"
-        className="openpress-workbench-zoom-control"
-        data-openpress-page-zoom
-        data-openpress-scale-mode={scaleMode}
-        data-openpress-toolbar-active={scaleMode === "fit-width" ? "false" : "true"}
-        title={`頁面縮放 ${scaleLabel}`}
-        aria-label={`頁面縮放 ${scaleLabel}`}
-        aria-haspopup="menu"
-        aria-expanded={open}
-        aria-controls={open ? menuId : undefined}
-        onClick={() => setOpen((value) => !value)}
-      >
-        <ZoomIn aria-hidden="true" />
-        <span>{scaleLabel}</span>
-        <ChevronDown className="openpress-workbench-zoom-control__chevron" aria-hidden="true" />
-      </button>
-      {open ? (
-        <div
-          id={menuId}
-          className="openpress-workbench-zoom-menu"
-          data-openpress-page-zoom-menu
-          role="menu"
-          aria-label="頁面顯示與縮放"
-        >
-          <div className="openpress-workbench-zoom-menu__section" role="group" aria-label="頁面模式">
-            <PageLayoutOption
-              mode="single"
-              active={pageLayoutMode === "single"}
-              icon={<File aria-hidden="true" />}
-              label="一頁"
-              onSelect={selectLayout}
-            />
-            <PageLayoutOption
-              mode="spread"
-              active={pageLayoutMode === "spread"}
-              icon={<Columns2 aria-hidden="true" />}
-              label="雙頁"
-              onSelect={selectLayout}
-            />
-          </div>
-          <div className="openpress-workbench-zoom-menu__divider" role="presentation" />
-          <div className="openpress-workbench-zoom-menu__section" role="group" aria-label="固定縮放">
-            {fixedOptions.map((option) => (
-              <ZoomOption
-                key={option.value}
-                mode={option.value}
-                active={scaleMode === option.value}
-                label={option.label}
-                onSelect={selectScale}
-              />
-            ))}
-          </div>
-          <div className="openpress-workbench-zoom-menu__divider" role="presentation" />
-          <div className="openpress-workbench-zoom-menu__section" role="group" aria-label="符合顯示">
-            {fitOptions.map((option) => (
-              <ZoomOption
-                key={option.value}
-                mode={option.value}
-                active={scaleMode === option.value}
-                label={option.label}
-                onSelect={selectScale}
-              />
-            ))}
-          </div>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-function PageLayoutOption({
-  mode,
-  active,
-  icon,
-  label,
-  onSelect,
-}: {
-  mode: PageLayoutMode;
-  active: boolean;
-  icon: ReactNode;
-  label: string;
-  onSelect: (mode: PageLayoutMode) => void;
-}) {
-  return (
-    <button
-      type="button"
-      className="openpress-workbench-zoom-menu__item"
-      data-openpress-page-layout-option={mode}
-      role="menuitemcheckbox"
-      aria-checked={active}
-      onClick={() => onSelect(mode)}
-    >
-      <span className="openpress-workbench-zoom-menu__check">{active ? <Check aria-hidden="true" /> : null}</span>
-      {icon}
-      <span>{label}</span>
-    </button>
-  );
-}
-
-function ZoomOption({
-  mode,
-  active,
-  label,
-  onSelect,
-}: {
-  mode: PageViewportScaleMode;
-  active: boolean;
-  label: string;
-  onSelect: (mode: PageViewportScaleMode) => void;
-}) {
-  return (
-    <button
-      type="button"
-      className="openpress-workbench-zoom-menu__item"
-      data-openpress-zoom-option={mode}
-      role="menuitemradio"
-      aria-checked={active}
-      onClick={() => onSelect(mode)}
-    >
-      <span className="openpress-workbench-zoom-menu__check">{active ? <Check aria-hidden="true" /> : null}</span>
-      <span className="openpress-workbench-zoom-menu__spacer" aria-hidden="true" />
-      <span>{label}</span>
-    </button>
-  );
-}