@open-press/core 0.7.1 → 0.8.0

package/src/openpress/workbench/shell/WorkbenchShell.tsx

@@ -0,0 +1,167 @@
+import { createContext, useContext, type CSSProperties, type ReactNode } from "react";
+import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, X } from "lucide-react";
+
+type WorkbenchShellContextValue = {
+  leftPanelOpen: boolean;
+  rightPanelOpen: boolean;
+  onToggleLeftPanel: () => void;
+  onToggleRightPanel: () => void;
+};
+
+const WorkbenchShellContext = createContext<WorkbenchShellContextValue | null>(null);
+
+function useWorkbenchShell() {
+  const value = useContext(WorkbenchShellContext);
+  if (!value) throw new Error("WorkbenchShell compound components must be rendered inside <WorkbenchShell>.");
+  return value;
+}
+
+function WorkbenchShellRoot({
+  style,
+  devMode,
+  viewMode,
+  inspectorMode,
+  editMode = false,
+  leftPanelOpen,
+  rightPanelOpen,
+  onToggleLeftPanel,
+  onToggleRightPanel,
+  children,
+}: {
+  style: CSSProperties;
+  devMode: boolean;
+  viewMode: string;
+  inspectorMode: boolean;
+  editMode?: boolean;
+  leftPanelOpen: boolean;
+  rightPanelOpen: boolean;
+  onToggleLeftPanel: () => void;
+  onToggleRightPanel: () => void;
+  children: ReactNode;
+}) {
+  const scrimOpen = leftPanelOpen || rightPanelOpen;
+  const handleScrimClick = rightPanelOpen ? onToggleRightPanel : onToggleLeftPanel;
+  const shellClassName = [
+    "reader-app openpress-reader-app openpress-public-viewer openpress-dev-public-viewer openpress-workbench-shell is-ready",
+    leftPanelOpen ? "" : "is-closed-left",
+    rightPanelOpen ? "" : "is-closed-right",
+  ].filter(Boolean).join(" ");
+
+  return (
+    <WorkbenchShellContext.Provider value={{ leftPanelOpen, rightPanelOpen, onToggleLeftPanel, onToggleRightPanel }}>
+      <main className="openpress-workbench" style={style} data-dev-mode={devMode ? "true" : "false"}>
+        <div
+          className={shellClassName}
+          data-openpress-react-runtime="true"
+          data-openpress-view-mode={viewMode}
+          data-openpress-inspector-mode={inspectorMode ? "on" : "off"}
+          data-openpress-edit-mode={editMode ? "on" : "off"}
+          data-openpress-workbench-shell
+          data-testid="workbench-shell"
+        >
+          {scrimOpen ? (
+            <div className="openpress-public-scrim" aria-hidden="true" onClick={handleScrimClick} />
+          ) : null}
+          {children}
+        </div>
+      </main>
+    </WorkbenchShellContext.Provider>
+  );
+}
+
+export function WorkbenchToolbar({ children }: { children: ReactNode }) {
+  const {
+    leftPanelOpen,
+    rightPanelOpen,
+    onToggleLeftPanel,
+    onToggleRightPanel,
+  } = useWorkbenchShell();
+  const LeftIcon = leftPanelOpen ? PanelLeftClose : PanelLeftOpen;
+  const RightIcon = rightPanelOpen ? PanelRightClose : PanelRightOpen;
+  const leftLabel = leftPanelOpen ? "收合左側面板" : "展開左側面板";
+  const rightLabel = rightPanelOpen ? "收合右側面板" : "展開右側面板";
+
+  return (
+    <header
+      className="openpress-workbench-toolbar"
+      role="toolbar"
+      aria-label="工作台操作"
+      data-openpress-workbench-toolbar
+    >
+      <button
+        type="button"
+        className="openpress-workbench-toolbar-panel-toggle"
+        data-openpress-toggle-left-panel
+        data-openpress-panel-open={leftPanelOpen ? "true" : "false"}
+        aria-label={leftLabel}
+        title={leftLabel}
+        onClick={onToggleLeftPanel}
+      >
+        <LeftIcon aria-hidden="true" />
+      </button>
+      <div className="openpress-workbench-toolbar__content">
+        {children}
+      </div>
+      <button
+        type="button"
+        className="openpress-workbench-toolbar-panel-toggle"
+        data-openpress-toggle-right-panel
+        data-openpress-panel-open={rightPanelOpen ? "true" : "false"}
+        aria-label={rightLabel}
+        title={rightLabel}
+        onClick={onToggleRightPanel}
+      >
+        <RightIcon aria-hidden="true" />
+      </button>
+    </header>
+  );
+}
+
+function WorkbenchLeftPanel({ children }: { children: ReactNode }) {
+  return (
+    <aside
+      className="reader-side-nav openpress-workspace-panel openpress-workbench-left-panel openpress-public-navigation"
+      aria-label="文件導覽"
+      data-openpress-left-panel
+    >
+      {children}
+    </aside>
+  );
+}
+
+function WorkbenchRightPanel({ children }: { children: ReactNode }) {
+  const { onToggleRightPanel } = useWorkbenchShell();
+
+  return (
+    <aside
+      className="openpress-workspace-panel openpress-workbench-right-panel openpress-dev-public-navigation"
+      aria-label="控制面板"
+      data-openpress-right-panel
+    >
+      <button type="button" className="openpress-public-drawer-close" aria-label="關閉右側面板" onClick={onToggleRightPanel}>
+        <X size={16} aria-hidden="true" />
+      </button>
+      {children}
+    </aside>
+  );
+}
+
+function WorkbenchMainContent({ children }: { children: ReactNode }) {
+  return (
+    <section
+      className="openpress-workbench__stage openpress-workbench-main openpress-public-viewer__stage openpress-dev-main-content"
+      aria-label="主要內容"
+      data-openpress-main-content
+    >
+      {children}
+    </section>
+  );
+}
+
+export const WorkbenchShell = Object.assign(WorkbenchShellRoot, {
+  Toolbar: WorkbenchToolbar,
+  LeftPanel: WorkbenchLeftPanel,
+  RightPanel: WorkbenchRightPanel,
+  ControlPanel: WorkbenchRightPanel,
+  MainContent: WorkbenchMainContent,
+});

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

@@ -0,0 +1 @@
+export * from "./WorkbenchShell";

package/src/openpress/workbench/workbenchFormatters.ts

@@ -0,0 +1,120 @@
+import type { InspectorPlacement } from "./inspector";
+import type { ObjectEntity, SourceBlock, Theme } from "../document-model";
+import type { PendingCommentsStatus, InspectorCommentStatus } from "./workbenchTypes";
+
+export type PageGeometrySpec = {
+  label: string;
+  dimensions: string;
+  title: string;
+};
+
+const DEFAULT_PAGE_GEOMETRY = {
+  pageWidth: "210mm",
+  pageHeight: "297mm",
+};
+
+export function formatInspectorSelection(block: SourceBlock | null, entity?: ObjectEntity | null) {
+  if (entity) return entity.label;
+  if (!block) return "未選取";
+  const line = block.source?.line;
+  return line ? `${block.path}:${line}` : block.path;
+}
+
+export function formatInspectorCommentStatus(status: InspectorCommentStatus, error: string) {
+  if (status === "submitting") return "寫入中";
+  if (status === "saved") return "已寫入 source";
+  if (status === "failed") return error || "寫入失敗";
+  return "";
+}
+
+export function formatCommentsCount(count: number, status: PendingCommentsStatus) {
+  if (status === "loading") return "正在讀取";
+  if (status === "clearing") return "正在清除";
+  return `${count} 則待處理`;
+}
+
+export function formatPageGeometrySpec(theme?: Pick<Theme, "pageWidth" | "pageHeight">): PageGeometrySpec {
+  const width = parseCssLength(theme?.pageWidth ?? DEFAULT_PAGE_GEOMETRY.pageWidth);
+  const height = parseCssLength(theme?.pageHeight ?? DEFAULT_PAGE_GEOMETRY.pageHeight);
+  const dimensions = formatLengthPair(width, height);
+  const label = pageGeometryLabel(width, height);
+
+  return {
+    label,
+    dimensions,
+    title: `${label} · ${dimensions}`,
+  };
+}
+
+export function parseCommentHint(hint?: string) {
+  if (!hint?.startsWith("openpress-react-inspector")) return null;
+  const intent = hint.match(/\bintent=(add|edit|delete)\b/)?.[1];
+  const placement = hint.match(/\bplacement=(block|before)\b/)?.[1] as InspectorPlacement | undefined;
+  const targetObjectId = decodeHintValue(hint.match(/\btarget=([^\s]+)/)?.[1]);
+  const intentLabel = intent === "add" ? "Add" : intent === "delete" ? "Remove" : "Edit";
+  const placementLabel = placement === "before" ? "插入於區塊前" : "針對目前區塊";
+  return { intent: intent ?? "edit", intentLabel, placement: placement ?? "block", placementLabel, targetObjectId };
+}
+
+export function formatCommentTimestamp(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat("zh-TW", {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  }).format(date);
+}
+
+function pageGeometryLabel(width: CssLength, height: CssLength) {
+  if (matchesPageSize(width, height, "210", "297", "mm")) return "A4 Page";
+  if (matchesPageSize(width, height, "176", "250", "mm")) return "B5 Page";
+  if (matchesPageSize(width, height, "215.9", "279.4", "mm")) return "Letter Page";
+  if (isSixteenByNine(width, height)) return "16:9 Page";
+  return "Custom Page";
+}
+
+type CssLength = {
+  raw: string;
+  value: string | null;
+  unit: string | null;
+};
+
+function parseCssLength(value: string): CssLength {
+  const raw = value.trim();
+  const match = raw.match(/^(-?\d+(?:\.\d+)?)([a-z%]+)$/i);
+  if (!match) return { raw, value: null, unit: null };
+  return { raw, value: trimTrailingZeroes(match[1]), unit: match[2] };
+}
+
+function formatLengthPair(width: CssLength, height: CssLength) {
+  if (width.value && height.value && width.unit && width.unit === height.unit) {
+    return `${width.value} × ${height.value} ${width.unit}`;
+  }
+  return `${width.raw} × ${height.raw}`;
+}
+
+function matchesPageSize(width: CssLength, height: CssLength, targetWidth: string, targetHeight: string, unit: string) {
+  return width.value === targetWidth && height.value === targetHeight && width.unit === unit && height.unit === unit;
+}
+
+function isSixteenByNine(width: CssLength, height: CssLength) {
+  if (!width.value || !height.value || !width.unit || width.unit !== height.unit) return false;
+  const ratio = Number(width.value) / Number(height.value);
+  return ratio > 1 && Math.abs(ratio - (16 / 9)) < 0.02;
+}
+
+function decodeHintValue(value?: string) {
+  if (!value) return undefined;
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+
+function trimTrailingZeroes(value: string) {
+  return value.replace(/\.0+$/, "").replace(/(\.\d*?)0+$/, "$1");
+}

package/src/openpress/workbench/workbenchTypes.ts

@@ -0,0 +1,35 @@
+import type { InspectorPlacement, ObjectSelection } from "./inspector/inspectorModel";
+
+export type DeployStatus = "idle" | "deploying" | "deployed" | "unavailable" | "failed" | "setup";
+export type PdfActionStatus = "idle" | "generating" | "opening" | "failed";
+export type InspectorCommentStatus = "idle" | "submitting" | "saved" | "failed";
+export type PendingCommentsStatus = "idle" | "loading" | "ready" | "failed" | "clearing";
+
+export interface InlineSavedComment {
+  id: string;
+  objectId?: string;
+  blockId?: string;
+  placement: InspectorPlacement;
+  note: string;
+  path?: string;
+  line?: number;
+  timestamp?: string;
+  markerLabel?: string;
+}
+
+export interface InlineSavedCommentMarkerEntry {
+  target: ObjectSelection;
+  comments: InlineSavedComment[];
+}
+
+export interface InspectorLayerRect {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+export interface InspectorInsertTargetView {
+  blockId: string;
+  rect: InspectorLayerRect;
+}

package/src/styles/openpress/print-route.css

@@ -46,8 +46,6 @@
 
   .reader-navbar,
   .reader-side-nav,
-  .reader-thumb-strip,
-  .openpress-workspace-navbar,
   .openpress-workspace-panel,
   .openpress-public-identity,
   .openpress-html-page__toolbar {