@open-press/core 0.8.0 → 1.1.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

@@ -1,9 +1,5 @@
-@import url("/openpress/fonts.css");
-@import url("/openpress/tokens.css");
-@import url("/openpress/content.css");
-@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-preview-panel.css";

package/src/vite-env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+// Workspace path constants injected by vite.config.ts at build time.
+// These come from package-owned workspace conventions and package.json config.
+declare const __OPENPRESS_CONTENT_PATH__: string;
+declare const __OPENPRESS_MEDIA_PATH__: string;
+declare const __OPENPRESS_COMPONENTS_PATH__: string;
+declare const __OPENPRESS_PDF_HREF__: string;

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

@@ -54,8 +54,10 @@ const workspaceDefines = {
 };
 
 export default defineConfig({
+  root: frameworkRoot,
   base: "./",
   cacheDir: path.join(workspaceRoot, ".openpress", "vite-client"),
+  publicDir: path.join(workspaceRoot, "public"),
   plugins: [openpressLocalDeployPlugin(), react()],
   define: workspaceDefines,
   resolve: {
@@ -409,7 +411,7 @@ function isLocalDeployConfigured() {
 function localDeploySetupMessage() {
   if (isLocalDeployConfigured()) return undefined;
   if (openpressConfig.deploy.adapter === "cloudflare-pages") {
-    return "Cloudflare Pages deployment requires `deploy.projectName` in openpress.config.mjs.";
+    return "Cloudflare Pages deployment requires `openpress.deploy.projectName` in package.json.";
   }
   return `Deployment adapter \`${openpressConfig.deploy.adapter}\` is not configured.`;
 }
@@ -472,18 +474,16 @@ function getLocalDeploymentSourcePaths() {
     openpressConfig.paths.designDoc,
     openpressConfig.paths.componentsDir,
     path.join(frameworkRoot, "src"),
-    path.join(workspaceRoot, "index.html"),
+    path.join(frameworkRoot, "index.html"),
+    path.join(frameworkRoot, "vite.config.ts"),
     path.join(workspaceRoot, "package.json"),
     path.join(workspaceRoot, "openpress.config.mjs"),
     openpressConfig.configPath,
-    path.join(workspaceRoot, "vite.config.ts"),
   ];
 }
 
 function openpressCliCommand(args: string[]) {
-  const relativeCliPath = path.relative(workspaceRoot, openpressCliPath).replaceAll("\\", "/");
-  const displayCliPath = relativeCliPath && !relativeCliPath.startsWith("../") ? relativeCliPath : openpressCliPath;
-  return `node ${displayCliPath} ${args.join(" ")}`;
+  return `open-press ${args.join(" ")}`;
 }
 
 async function findNewestLocalSourceMtime(paths: string[]) {

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