@open-press/core 1.2.0 → 1.3.1

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" },
-];

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

@@ -0,0 +1,206 @@
+import { Home, MousePointer2, Play, Ruler } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+import type { DeploymentInfo, HtmlPageBlock, SourceBlock, Theme } from "../../document-model";
+import type { PageLayoutMode, PageViewportScaleMode } from "../../reader";
+import {
+  DeploymentControl,
+  ExportControl,
+  PageZoomControl,
+  SearchControl,
+} from "../actions";
+import type { DeployStatus, InspectorCommentStatus, PdfActionStatus } from "../workbenchTypes";
+import type { PageGeometrySpec } from "../workbenchFormatters";
+import type { InlineDocumentEditStatus } from "../document";
+
+export function WorkbenchToolbarActions({
+  pages,
+  currentPageIndex,
+  pressTitle,
+  theme,
+  workspaceMode,
+  sourceBlocksByPath,
+  onSelectPage,
+  onBackToWorkspace,
+  isSlidePress,
+  onOpenPresentation,
+  pageGeometry,
+  scaleMode,
+  scaleLabel,
+  pageLayoutMode,
+  onScaleModeChange,
+  onPageLayoutModeChange,
+  inlineEditStatus,
+  editStatusMessage,
+  inspectorMode,
+  inspectorToolbarExpanded,
+  inspectorSelectionLabel,
+  onInspectorModeChange,
+  inspectorCommentStatus,
+  inspectorCommentStatusMessage,
+  deploymentInfo,
+  deploymentStatus,
+  localDeployEnabled,
+  onDeploy,
+  onExportPdf,
+  pdfDisabled,
+  pdfLabel,
+  pdfStatusMessage,
+  pdfActionStatus,
+}: {
+  pages: HtmlPageBlock[];
+  currentPageIndex: number;
+  pressTitle: string;
+  theme?: Theme;
+  workspaceMode: boolean;
+  sourceBlocksByPath: Record<string, SourceBlock[]>;
+  onSelectPage: (pageIndex: number, options?: { behavior?: ScrollBehavior }) => void;
+  onBackToWorkspace?: () => void;
+  isSlidePress: boolean;
+  onOpenPresentation?: (pageIndex: number) => void;
+  pageGeometry: PageGeometrySpec;
+  scaleMode: PageViewportScaleMode;
+  scaleLabel: string;
+  pageLayoutMode: PageLayoutMode;
+  onScaleModeChange: Dispatch<SetStateAction<PageViewportScaleMode>>;
+  onPageLayoutModeChange: Dispatch<SetStateAction<PageLayoutMode>>;
+  inlineEditStatus: InlineDocumentEditStatus;
+  editStatusMessage: string;
+  inspectorMode: boolean;
+  inspectorToolbarExpanded: boolean;
+  inspectorSelectionLabel: string;
+  onInspectorModeChange: (enabled: boolean) => void;
+  inspectorCommentStatus: InspectorCommentStatus;
+  inspectorCommentStatusMessage: string;
+  deploymentInfo: DeploymentInfo;
+  deploymentStatus: DeployStatus;
+  localDeployEnabled: boolean;
+  onDeploy: () => Promise<void>;
+  onExportPdf: () => void;
+  pdfDisabled: boolean;
+  pdfLabel: string;
+  pdfStatusMessage: string | null;
+  pdfActionStatus: PdfActionStatus;
+}) {
+  return (
+    <>
+      {onBackToWorkspace ? (
+        <div className="openpress-workbench-toolbar__group" aria-label="工作台導覽">
+          <button
+            type="button"
+            className="openpress-workbench-toolbar-action openpress-workbench-toolbar-action--back"
+            data-openpress-back-to-workspace
+            onClick={onBackToWorkspace}
+            title="回到工作台"
+            aria-label="回到工作台"
+          >
+            <Home aria-hidden="true" />
+            <span className="openpress-workbench-toolbar-action__label">工作台</span>
+          </button>
+        </div>
+      ) : null}
+      <div className="openpress-workbench-toolbar__group" aria-label="匯出">
+        <ExportControl
+          pages={pages}
+          currentPageIndex={currentPageIndex}
+          pressTitle={pressTitle}
+          theme={theme}
+          onExportPdf={onExportPdf}
+          pdfDisabled={pdfDisabled}
+          pdfLabel={pdfLabel}
+          pdfStatusMessage={pdfStatusMessage}
+          pdfActionStatus={pdfActionStatus}
+        />
+      </div>
+      <div className="openpress-workbench-toolbar__group openpress-workbench-toolbar__group--page" aria-label="頁面規格">
+        {isSlidePress && onOpenPresentation ? (
+          <button
+            type="button"
+            className="openpress-workbench-toolbar-action"
+            data-openpress-slide-present
+            data-openpress-toolbar-expanded="false"
+            data-openpress-toolbar-active="false"
+            aria-pressed="false"
+            title="進入放映模式"
+            aria-label="進入放映模式"
+            onClick={() => onOpenPresentation(currentPageIndex)}
+          >
+            <Play aria-hidden="true" />
+            <span className="openpress-workbench-toolbar-action__label">放映</span>
+          </button>
+        ) : null}
+        <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={scaleMode}
+          scaleLabel={scaleLabel}
+          pageLayoutMode={pageLayoutMode}
+          onScaleModeChange={onScaleModeChange}
+          onPageLayoutModeChange={onPageLayoutModeChange}
+        />
+      </div>
+      <div className="openpress-workbench-toolbar__group openpress-workbench-toolbar__group--right" aria-label="工作台狀態與發布">
+        {workspaceMode ? (
+          <SearchControl
+            sourceBlocksByPath={sourceBlocksByPath}
+            onSelectPage={onSelectPage}
+          />
+        ) : null}
+        {workspaceMode && 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}
+        {workspaceMode ? (
+          <button
+            type="button"
+            className="openpress-workbench-toolbar-action"
+            data-openpress-inspector-toggle
+            data-openpress-inspector-active={inspectorMode ? "true" : "false"}
+            data-openpress-toolbar-expanded={inspectorToolbarExpanded ? "true" : "false"}
+            data-openpress-toolbar-active={inspectorToolbarExpanded ? "true" : "false"}
+            onClick={() => onInspectorModeChange(!inspectorMode)}
+            aria-pressed={inspectorMode}
+            title={inspectorMode ? "關閉註解" : "開啟註解"}
+            aria-label={inspectorMode ? "關閉註解" : "開啟註解"}
+          >
+            <MousePointer2 aria-hidden="true" />
+            <span className="openpress-workbench-toolbar-action__label">{inspectorMode ? "註解中" : "註解"}</span>
+            <span className="openpress-dev-inspector-status">{inspectorSelectionLabel}</span>
+          </button>
+        ) : null}
+        {workspaceMode && inspectorMode ? (
+          <span
+            className="openpress-dev-inspector-status"
+            role="status"
+            aria-live="polite"
+            data-openpress-inspector-comment-status={inspectorCommentStatus}
+          >
+            {inspectorCommentStatusMessage}
+          </span>
+        ) : null}
+        {localDeployEnabled ? (
+          <DeploymentControl
+            info={deploymentInfo}
+            status={deploymentStatus}
+            onDeploy={onDeploy}
+          />
+        ) : null}
+      </div>
+    </>
+  );
+}

package/src/styles/openpress/app-shell.css

@@ -105,89 +105,6 @@ body {
   font-size: 13px;
 }
 
-/* ── Action Overlay（部署）──────────────────────────────────── */
-.openpress-action-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgb(10 10 10 / 72%);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  animation: openpress-overlay-in 0.18s ease both;
-}
-
-@keyframes openpress-overlay-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-.openpress-action-overlay__card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  border: 1px solid rgb(255 255 255 / 12%);
-  border-radius: 16px;
-  padding: 36px 48px;
-  background: rgb(22 22 22 / 96%);
-  box-shadow: 0 24px 64px rgb(0 0 0 / 60%);
-  text-align: center;
-  min-width: 220px;
-}
-
-.openpress-action-overlay__title {
-  margin: 0;
-  color: #f2f2f0;
-  font-size: 15px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-}
-
-.openpress-action-overlay__sub {
-  margin: 0;
-  color: rgb(200 200 200 / 60%);
-  font-size: 12px;
-}
-
-/* ── Deploy Icon ─────────────────────────────────────────────── */
-.openpress-deploy-icon {
-  position: relative;
-  width: 80px;
-  height: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.openpress-deploy-icon--deploying { color: var(--openpress-accent, #e5c97a); }
-.openpress-deploy-icon--deployed  { color: #6ee7a0; }
-.openpress-deploy-icon--failed    { color: #f87171; }
-
-.openpress-deploy-rocket {
-  animation: openpress-rocket-fly 1.4s ease-in-out infinite alternate;
-}
-
-@keyframes openpress-rocket-fly {
-  from { transform: translateY(4px) rotate(-6deg); }
-  to   { transform: translateY(-6px) rotate(6deg); }
-}
-
-.openpress-deploy-orbit {
-  position: absolute;
-  inset: 0;
-  width: 80px;
-  height: 80px;
-  animation: openpress-orbit-spin 2.4s linear infinite;
-}
-
-@keyframes openpress-orbit-spin {
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
-}
-
 /* ── Empty document state ───────────────────────────────────── */
 
 .openpress-empty-state {

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

@@ -27,7 +27,6 @@
   }
 
   .openpress-workbench,
-  .openpress-public-shell,
   .openpress-reader-app,
   .openpress-reader-app.is-closed-left,
   .openpress-reader-app.is-closed-right,
@@ -47,8 +46,7 @@
   .reader-navbar,
   .reader-side-nav,
   .openpress-workspace-panel,
-  .openpress-public-identity,
-  .openpress-html-page__toolbar {
+  .openpress-public-identity {
     display: none !important;
   }