@open-press/core 0.7.1 → 1.0.0

package/src/styles/openpress/workspace-gallery.css

@@ -0,0 +1,300 @@
+/* Workspace gallery — the reader's landing page for multi-Press
+   workspaces. Shows a card per <Press> child; clicking enters that
+   document's reader. Single-Press workspaces skip the gallery and
+   load the document directly, so this CSS is dormant until users
+   add a second <Press> to their <Workspace>.
+
+   Layout intent: Figma-style file grid — uniform card width, fixed
+   thumbnail aspect ratio (4:3), filename + meta below. Each card
+   loads its first page asynchronously and renders it scaled-down
+   inside the thumbnail slot. */
+
+.openpress-workspace-gallery {
+  --workspace-bg: #10110f;
+  --workspace-bg-soft: #171813;
+  --workspace-ink: #f4f1e8;
+  --workspace-muted: rgba(244, 241, 232, 0.52);
+  --workspace-line: rgba(244, 241, 232, 0.12);
+  --workspace-card: #f7f5ee;
+  --workspace-card-ink: #141411;
+  --workspace-card-muted: #65635d;
+  --workspace-card-line: rgba(20, 20, 17, 0.1);
+  --workspace-card-stage: #e8e5dc;
+  display: grid;
+  gap: 2rem;
+  min-height: 100vh;
+  max-width: none;
+  margin: 0;
+  padding: 3.6rem clamp(2rem, 4vw, 4.5rem) 6rem;
+  font-family: var(--openpress-font-body, system-ui, sans-serif);
+  color: var(--workspace-ink);
+  background:
+    linear-gradient(180deg, var(--workspace-bg-soft), var(--workspace-bg) 42rem),
+    var(--workspace-bg);
+}
+
+.openpress-workspace-gallery__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  justify-content: space-between;
+  gap: 2.5rem;
+  padding: 0 0 1.45rem;
+  border-bottom: 1px solid var(--workspace-line);
+}
+
+.openpress-workspace-gallery__headline {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.openpress-workspace-gallery__eyebrow {
+  margin: 0;
+  color: var(--workspace-muted);
+  font-family: var(--openpress-font-mono, ui-monospace, monospace);
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.openpress-workspace-gallery__header h1 {
+  margin: 0;
+  font-family: var(--openpress-font-display, var(--openpress-font-body, system-ui));
+  font-size: clamp(2.6rem, 5.4vw, 5.2rem);
+  font-weight: 720;
+  line-height: 0.94;
+  letter-spacing: -0.035em;
+  color: var(--workspace-ink);
+}
+
+.openpress-workspace-gallery__count {
+  margin: 0;
+  display: grid;
+  justify-items: end;
+  gap: 0.25rem;
+  min-width: 4.5rem;
+  color: var(--workspace-ink);
+  font-family: var(--openpress-font-mono, ui-monospace, monospace);
+  line-height: 1;
+}
+
+.openpress-workspace-gallery__count span {
+  color: var(--workspace-ink);
+  font-size: 2rem;
+  font-weight: 500;
+  letter-spacing: -0.04em;
+}
+
+.openpress-workspace-gallery__count small {
+  color: var(--workspace-muted);
+  font-size: 0.62rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.openpress-workspace-gallery__grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  align-items: start;
+  /* Uniform card size — Figma-style. Outer thumb is fixed 4:3, the
+     inner page letterboxes to its own geometry. */
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  gap: 1.5rem;
+}
+
+.openpress-workspace-gallery__item {
+  display: flex;
+}
+
+.openpress-workspace-gallery__card {
+  appearance: none;
+  display: grid;
+  grid-template-rows: auto minmax(6.75rem, auto);
+  align-self: start;
+  width: 100%;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  background: var(--workspace-card);
+  color: var(--workspace-card-ink);
+  text-align: left;
+  cursor: pointer;
+  overflow: hidden;
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    border-color 160ms ease;
+}
+
+.openpress-workspace-gallery__card:hover,
+.openpress-workspace-gallery__card:focus-visible {
+  border-color: rgba(255, 255, 255, 0.28);
+  transform: translateY(-2px);
+  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
+  outline: none;
+}
+
+.openpress-workspace-gallery__thumb {
+  position: relative;
+  display: block;
+  width: 100%;
+  /* Uniform 4:3 outer slot across every card. The page itself
+     letterboxes inside via centered scale, so each Press shows at its
+     own true aspect against the gradient background. */
+  aspect-ratio: 4 / 3;
+  background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--workspace-card-ink) 5%, var(--workspace-card-stage)),
+      var(--workspace-card-stage)
+    );
+  border-bottom: 1px solid var(--workspace-card-line);
+  overflow: hidden;
+}
+
+.openpress-workspace-gallery__thumb::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(20, 20, 17, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(20, 20, 17, 0.05) 1px, transparent 1px);
+  background-size: 24px 24px;
+  opacity: 0.5;
+}
+
+.openpress-workspace-gallery__thumb-stage {
+  position: absolute;
+  inset: clamp(0.85rem, 6%, 1.45rem);
+  display: grid;
+  place-items: center;
+}
+
+.openpress-workspace-gallery__thumb-frame {
+  position: relative;
+  box-shadow:
+    0 18px 36px rgba(20, 20, 17, 0.18),
+    0 0 0 1px rgba(20, 20, 17, 0.08);
+}
+
+.openpress-workspace-gallery__thumb-stage .openpress-public-page {
+  display: block;
+  pointer-events: none;
+  user-select: none;
+}
+
+.openpress-workspace-gallery__thumb-placeholder {
+  position: absolute;
+  inset: clamp(0.85rem, 6%, 1.45rem);
+  display: grid;
+  place-items: center;
+}
+
+.openpress-workspace-gallery__thumb-skel {
+  display: block;
+  width: 70%;
+  height: 70%;
+  background:
+    repeating-linear-gradient(
+      135deg,
+      rgba(20, 20, 17, 0.04) 0 6px,
+      transparent 6px 14px
+    ),
+    #fff;
+  border: 1px solid var(--workspace-card-line);
+  border-radius: 3px;
+  box-shadow: 0 14px 28px rgba(20, 20, 17, 0.14);
+}
+
+.openpress-workspace-gallery__thumb-placeholder[data-state="loading"] .openpress-workspace-gallery__thumb-skel {
+  animation: openpress-gallery-skel-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes openpress-gallery-skel-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.55; }
+}
+
+.openpress-workspace-gallery__body {
+  display: grid;
+  align-content: space-between;
+  gap: 1.2rem;
+  min-height: 6.75rem;
+  padding: 1.1rem 1.22rem 1.15rem;
+  background: var(--workspace-card);
+}
+
+.openpress-workspace-gallery__title {
+  display: block;
+  color: var(--workspace-card-ink);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.openpress-workspace-gallery__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.7rem;
+  flex-wrap: wrap;
+  color: var(--workspace-card-muted);
+  font-family: var(--openpress-font-mono, ui-monospace, monospace);
+  font-size: 0.66rem;
+  letter-spacing: 0.03em;
+}
+
+.openpress-workspace-gallery__slug {
+  max-width: 13rem;
+  color: color-mix(in srgb, var(--workspace-card-ink) 72%, transparent);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.openpress-workspace-gallery__dot {
+  color: color-mix(in srgb, var(--workspace-card-muted) 55%, transparent);
+}
+
+.openpress-workspace-gallery__pages,
+.openpress-workspace-gallery__geom {
+  color: var(--workspace-card-muted);
+}
+
+.openpress-workspace-gallery__geom {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.35rem;
+  padding: 0 0.48rem;
+  border: 1px solid var(--workspace-card-line);
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.36);
+  color: color-mix(in srgb, var(--workspace-card-ink) 76%, transparent);
+  font-size: 0.62rem;
+  white-space: nowrap;
+}
+
+@media (max-width: 720px) {
+  .openpress-workspace-gallery {
+    padding: 2.25rem 1rem 4rem;
+  }
+
+  .openpress-workspace-gallery__header {
+    display: grid;
+    align-items: start;
+  }
+
+  .openpress-workspace-gallery__grid {
+    grid-template-columns: 1fr;
+  }
+}

package/src/styles/openpress.css

@@ -4,9 +4,10 @@
 @import url("/openpress/components.css");
 
 @import "./openpress/app-shell.css";
+@import "./openpress/workspace-gallery.css";
 @import "./openpress/workbench.css";
 @import "./openpress/workbench-panels.css";
-@import "./openpress/project-workspace.css";
+@import "./openpress/project-preview-panel.css";
 @import "./openpress/media-workspace.css";
 @import "./openpress/reader-runtime.css";
 @import "./openpress/public-viewer.css";

package/tsconfig.json

@@ -11,7 +11,7 @@
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "types": ["node", "vite/client"],
+    "types": ["node"],
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

package/vite.config.ts

@@ -6,8 +6,10 @@ import type { IncomingMessage, ServerResponse } from "node:http";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { loadConfig, publicPdfHref } from "./engine/runtime/config.mjs";
+import { searchSourceText } from "./engine/runtime/source-text-tools.mjs";
 import { handleCommentRequest } from "./engine/react/comment-endpoint.mjs";
 import { handleProjectAssetRequest } from "./engine/react/project-asset-endpoint.mjs";
+import { handleSourceEditRequest } from "./engine/react/source-edit-endpoint.mjs";
 
 const frameworkRoot = fileURLToPath(new URL("./", import.meta.url));
 const workspaceRoot = process.env.OPENPRESS_WORKSPACE_ROOT
@@ -53,6 +55,7 @@ const workspaceDefines = {
 
 export default defineConfig({
   base: "./",
+  cacheDir: path.join(workspaceRoot, ".openpress", "vite-client"),
   plugins: [openpressLocalDeployPlugin(), react()],
   define: workspaceDefines,
   resolve: {
@@ -68,6 +71,17 @@ export default defineConfig({
       ...workspaceAliases,
     },
   },
+  optimizeDeps: {
+    include: [
+      "@mdx-js/react",
+      "lucide-react",
+      "react",
+      "react-dom",
+      "react-dom/client",
+      "react/jsx-dev-runtime",
+      "react/jsx-runtime",
+    ],
+  },
   build: {
     outDir: outputDir,
     emptyOutDir: true,
@@ -108,6 +122,12 @@ function openpressLocalDeployPlugin() {
       server.middlewares.use("/__openpress/status", (req, res) => {
         void handleLocalStatusRequest(req, res);
       });
+      server.middlewares.use("/__openpress/search", (req, res) => {
+        void handleLocalSearchRequest(req, res);
+      });
+      server.middlewares.use("/__openpress/source-edit", (req, res) => {
+        void handleSourceEditRequest(req, res, { root: workspaceRoot });
+      });
       server.middlewares.use("/__openpress/deploy", (req, res) => {
         void handleLocalDeployRequest(req, res);
       });
@@ -267,6 +287,32 @@ async function handleLocalStatusRequest(req: IncomingMessage, res: ServerRespons
   });
 }
 
+async function handleLocalSearchRequest(req: IncomingMessage, res: ServerResponse) {
+  if (req.method !== "GET") {
+    writeJson(res, 405, { ok: false, message: "Search endpoint requires GET." });
+    return;
+  }
+
+  const requestUrl = new URL(req.url ?? "/", "http://localhost");
+  const query = (requestUrl.searchParams.get("q") ?? "").trim();
+  if (!query) {
+    writeJson(res, 400, { ok: false, message: "Search query is required." });
+    return;
+  }
+
+  try {
+    const report = await searchSourceText({
+      config: openpressConfig,
+      query,
+      scope: searchScopeFrom(requestUrl.searchParams),
+      caseSensitive: requestUrl.searchParams.get("caseSensitive") === "true",
+    });
+    writeJson(res, 200, { ok: true, ...report });
+  } catch (error) {
+    writeJson(res, 500, { ok: false, message: error instanceof Error ? error.message : String(error) });
+  }
+}
+
 async function handleLocalDeployRequest(req: IncomingMessage, res: ServerResponse) {
   if (req.method !== "POST") {
     writeJson(res, 405, { ok: false, message: "Deploy endpoint requires POST." });
@@ -368,6 +414,10 @@ function localDeploySetupMessage() {
   return `Deployment adapter \`${openpressConfig.deploy.adapter}\` is not configured.`;
 }
 
+function searchScopeFrom(searchParams: URLSearchParams) {
+  return searchParams.get("scope") === "all" ? "all" : "content";
+}
+
 async function fileExists(filePath: string) {
   try {
     await fs.access(filePath);

package/engine/commands/init.mjs

@@ -1,24 +0,0 @@
-import { initWorkspace, listStylePackSkills } from "../init.mjs";
-import { formatDisplayPath, parseInitOptions } from "./_shared.mjs";
-
-export const needsWorkspace = false;
-
-export async function run({ argv }) {
-  const options = parseInitOptions(argv);
-  if (!options.target) {
-    console.error("openpress init: target path is required");
-    console.error("Usage: openpress init <target> [--skill <name>] [--force]");
-    const available = await listStylePackSkills();
-    if (available.length) console.error(`Style packs available: ${available.join(", ")}`);
-    return 1;
-  }
-  const result = await initWorkspace(options);
-  const displayPath = formatDisplayPath(result.targetPath);
-  console.log(`OpenPress init: created ${displayPath} from style pack "${result.skill}".`);
-  console.log("Next steps:");
-  console.log(`  cd ${displayPath}`);
-  console.log("  # 填入 openpress.config.mjs 的 title / subtitle / organization");
-  console.log("  # 改 document/index.tsx 與 document/chapters/**/*.mdx 為實際內容");
-  console.log("  node engine/cli.mjs validate");
-  return 0;
-}

package/engine/init.mjs

@@ -1,90 +0,0 @@
-import fs from "node:fs/promises";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const SELF_DIR = path.dirname(fileURLToPath(import.meta.url));
-const ENGINE_ROOT = path.resolve(SELF_DIR, "..");
-const SKILLS_DIR = path.join(ENGINE_ROOT, "skills");
-
-const DEFAULT_SKILL = "editorial-monograph";
-
-export async function initWorkspace({ target, skill = DEFAULT_SKILL, force = false }) {
-  if (!target) throw new Error("openpress init: target path is required");
-  const targetPath = path.resolve(target);
-
-  const starterPath = path.join(SKILLS_DIR, skill, "starter");
-  try {
-    const stat = await fs.stat(starterPath);
-    if (!stat.isDirectory()) {
-      throw new Error(`openpress init: skill "${skill}" has no starter/ directory at ${starterPath}`);
-    }
-  } catch (error) {
-    if (error?.code === "ENOENT") {
-      const available = await listStylePackSkills();
-      throw new Error(
-        `openpress init: skill "${skill}" not found or has no starter. ` +
-        `Available style packs: ${available.join(", ") || "(none)"}`,
-      );
-    }
-    throw error;
-  }
-
-  if (!force) {
-    try {
-      const stat = await fs.stat(targetPath);
-      if (stat.isDirectory()) {
-        const entries = await fs.readdir(targetPath);
-        if (entries.length > 0) {
-          throw new Error(`openpress init: target ${targetPath} exists and is not empty. Pass --force to overwrite.`);
-        }
-      } else {
-        throw new Error(`openpress init: target ${targetPath} exists and is not a directory.`);
-      }
-    } catch (error) {
-      if (error?.code !== "ENOENT") throw error;
-    }
-  }
-
-  await fs.mkdir(targetPath, { recursive: true });
-  await copyDirectory(starterPath, targetPath);
-
-  return { targetPath, skill };
-}
-
-export async function listStylePackSkills() {
-  try {
-    const entries = await fs.readdir(SKILLS_DIR, { withFileTypes: true });
-    const names = [];
-    for (const entry of entries) {
-      if (!entry.isDirectory()) continue;
-      const starter = path.join(SKILLS_DIR, entry.name, "starter");
-      try {
-        const stat = await fs.stat(starter);
-        if (stat.isDirectory()) names.push(entry.name);
-      } catch {
-        // skill without starter/ is not a style pack — skip
-      }
-    }
-    return names.sort();
-  } catch (error) {
-    if (error?.code === "ENOENT") return [];
-    throw error;
-  }
-}
-
-async function copyDirectory(source, destination) {
-  await fs.mkdir(destination, { recursive: true });
-  for (const entry of await fs.readdir(source, { withFileTypes: true })) {
-    if (entry.name === ".DS_Store") continue;
-    const sourcePath = path.join(source, entry.name);
-    const destPath = path.join(destination, entry.name);
-    if (entry.isDirectory()) {
-      await copyDirectory(sourcePath, destPath);
-    } else if (entry.isFile()) {
-      await fs.copyFile(sourcePath, destPath);
-    } else if (entry.isSymbolicLink()) {
-      const link = await fs.readlink(sourcePath);
-      await fs.symlink(link, destPath);
-    }
-  }
-}

package/src/openpress/App.tsx

@@ -1,127 +0,0 @@
-import { useEffect, useState } from "react";
-import { Renderer } from "./renderer";
-import { isLocalWorkspaceHost } from "./runtimeMode";
-import type { DeploymentInfo, ReaderDocument } from "./types";
-
-type LoadState =
-  | { status: "loading" }
-  | {
-      status: "ready";
-      document: ReaderDocument;
-      deploymentInfo: DeploymentInfo;
-    }
-  | { status: "error"; message: string };
-
-interface DeployConfig {
-  pdf?: string;
-  deployed_at?: string;
-  public_url?: string;
-  dirty?: boolean;
-  deploy_configured?: boolean;
-  deploy_adapter?: string;
-  deploy_source?: string;
-  deploy_project_name?: string | null;
-  deploy_setup_message?: string;
-}
-
-const offlineDeploymentInfo: DeploymentInfo = { online: false };
-
-function LoadingScreen() {
-  return (
-    <div className="openpress-loading-screen" aria-label="載入中" role="status">
-      <div className="openpress-loading-screen__inner">
-        <div className="openpress-loading-dots" aria-hidden="true">
-          <span /><span /><span />
-        </div>
-        <span className="openpress-loading-screen__label">載入文件</span>
-      </div>
-    </div>
-  );
-}
-
-export function App() {
-  const [state, setState] = useState<LoadState>({ status: "loading" });
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function loadDocument() {
-      try {
-        const [response, deploymentInfo] = await Promise.all([
-          fetch("/openpress/document.json", { cache: "no-store" }),
-          loadDeploymentInfo(),
-        ]);
-        if (!response.ok) {
-          throw new Error(`Unable to load /openpress/document.json (${response.status})`);
-        }
-        const document = (await response.json()) as ReaderDocument;
-        if (!cancelled) {
-          setState({ status: "ready", document, deploymentInfo });
-        }
-      } catch (error) {
-        if (!cancelled) {
-          setState({
-            status: "error",
-            message: error instanceof Error ? error.message : "Unable to load OpenPress document.",
-          });
-        }
-      }
-    }
-
-    void loadDocument();
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  if (state.status === "loading") return <LoadingScreen />;
-
-  if (state.status === "error") {
-    return <div className="openpress-load-state openpress-load-state--error">{state.message}</div>;
-  }
-
-  return (
-    <Renderer
-      document={state.document}
-      deploymentInfo={state.deploymentInfo}
-    />
-  );
-}
-
-async function loadDeploymentInfo(): Promise<DeploymentInfo> {
-  if (typeof window !== "undefined" && isLocalWorkspaceHost(window.location.hostname)) {
-    const localInfo = await loadDeploymentInfoFrom("/__openpress/status");
-    if (localInfo) return localInfo;
-  }
-
-  return (await loadDeploymentInfoFrom("/openpress/deploy.json")) ?? offlineDeploymentInfo;
-}
-
-async function loadDeploymentInfoFrom(path: string): Promise<DeploymentInfo | null> {
-  try {
-    const response = await fetch(path, { cache: "no-store" });
-    if (!response.ok) {
-      return null;
-    }
-    const config = (await response.json()) as DeployConfig;
-    return deploymentConfigToInfo(config);
-  } catch {
-    return null;
-  }
-}
-
-function deploymentConfigToInfo(config: DeployConfig): DeploymentInfo {
-  const configured = config.deploy_configured !== false;
-  return {
-    online: configured && Boolean(config.deployed_at || config.public_url),
-    deployedAt: config.deployed_at,
-    pdf: typeof config.pdf === "string" ? config.pdf : undefined,
-    publicUrl: typeof config.public_url === "string" ? config.public_url : undefined,
-    dirty: config.dirty === true,
-    configured,
-    adapter: typeof config.deploy_adapter === "string" ? config.deploy_adapter : undefined,
-    source: typeof config.deploy_source === "string" ? config.deploy_source : undefined,
-    projectName: typeof config.deploy_project_name === "string" ? config.deploy_project_name : undefined,
-    setupMessage: typeof config.deploy_setup_message === "string" ? config.deploy_setup_message : undefined,
-  };
-}