@open-press/cli 0.7.0 → 0.8.0

package/template/core/engine/react/pipeline/frame-measurement.mjs

@@ -135,15 +135,30 @@ async function runChromiumMeasurement(html, viewport) {
   try {
     const page = await browser.newPage({ viewport });
     await page.setContent(html, { waitUntil: "load" });
+    // Match the print-ready settle: fonts first (font metrics affect image
+    // alt-text fallback boxes), then await every image's `complete` AND
+    // `decode()` so intrinsic sizes are committed before layout, then two
+    // animation frames so the chromium layout pass observes the final box
+    // model. Without this, `getBoundingClientRect()` on figures that hold
+    // images can race the decode and return collapsed heights, causing the
+    // allocator to pack too many blocks per page.
     await page.evaluate(async () => {
-      await Promise.all(Array.from(document.images).map((img) => {
-        if (img.complete) return Promise.resolve();
-        return new Promise((resolve) => {
-          img.addEventListener("load", resolve, { once: true });
-          img.addEventListener("error", resolve, { once: true });
-        });
-      }));
       if (document.fonts?.ready) await document.fonts.ready;
+      await Promise.all(Array.from(document.images).map(async (img) => {
+        if (!img.complete) {
+          await new Promise((resolve) => {
+            const settle = () => {
+              img.removeEventListener("load", settle);
+              img.removeEventListener("error", settle);
+              resolve(undefined);
+            };
+            img.addEventListener("load", settle, { once: true });
+            img.addEventListener("error", settle, { once: true });
+          });
+        }
+        await img.decode?.().catch(() => undefined);
+      }));
+      await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
     });
 
     const mdxAreas = await page.evaluate((safety) => {
@@ -206,6 +221,8 @@ async function runChromiumMeasurement(html, viewport) {
         const parentTop = chain.parentElement?.getBoundingClientRect().top ?? chain.getBoundingClientRect().top;
         let previousBottom = parentTop;
         for (const el of Array.from(chain.querySelectorAll("[data-openpress-block-id]"))) {
+          if (el.tagName.toLowerCase() === "caption") continue;
+          if (el.getAttribute("data-openpress-block-layout") === "attached") continue;
           const rect = el.getBoundingClientRect();
           out.push({
             id: el.getAttribute("data-openpress-block-id"),
@@ -232,13 +249,27 @@ async function inlineMeasurementMediaUrls(html, mediaDir) {
   if (!mediaDir || !html) return html;
   let out = String(html);
   const matches = new Set();
-  for (const match of out.matchAll(/\/openpress\/media\/([^"')\s>]+)/g)) {
-    matches.add(match[1]);
+  for (const match of out.matchAll(/\bsrc=(['"])([^\1]*?)\1/g)) {
+    const src = match[2];
+    if (!src) continue;
+    if (src.startsWith('/openpress/media/')) {
+      matches.add(src.slice('/openpress/media/'.length));
+      continue;
+    }
+    if (src.startsWith('media/')) {
+      matches.add(src.slice('media/'.length));
+      continue;
+    }
+    if (src.startsWith('./media/')) {
+      matches.add(src.slice('./media/'.length));
+    }
   }
   for (const rawName of matches) {
     const dataUrl = await mediaDataUrl(mediaDir, rawName);
     if (!dataUrl) continue;
     out = out.replaceAll(`/openpress/media/${rawName}`, dataUrl);
+    out = out.replaceAll(`media/${rawName}`, dataUrl);
+    out = out.replaceAll(`./media/${rawName}`, dataUrl);
   }
   return out;
 }

package/template/core/engine/react/project-asset-endpoint.mjs

@@ -3,8 +3,7 @@ import path from "node:path";
 import { loadConfig } from "../runtime/config.mjs";
 import { collectSourceTextFiles } from "../runtime/source-text-tools.mjs";
 import { insertCommentMarker } from "./comment-marker.mjs";
-
-const MAX_PROJECT_ASSET_BODY_BYTES = 64 * 1024;
+import { readJsonBody, writeJson } from "./http-json.mjs";
 
 export async function handleProjectAssetRequest(req, res, {
   root = ".",
@@ -16,7 +15,7 @@ export async function handleProjectAssetRequest(req, res, {
   }
 
   try {
-    const body = await readJsonBody(req);
+    const body = await readJsonBody(req, { bodyLabel: "Project asset request" });
     const config = await loadConfig(root);
     const action = stringValue(body?.action);
     const kind = stringValue(body?.kind);
@@ -53,6 +52,7 @@ export async function handleProjectAssetRequest(req, res, {
         note: body?.note,
         commentTarget: body?.commentTarget,
         currentSource: body?.currentSource,
+        objectEntity: body?.objectEntity,
         timestamp,
       });
       writeJson(res, 200, { ok: true, ...result });
@@ -133,6 +133,7 @@ async function createProjectAssetComment({
   note,
   commentTarget,
   currentSource,
+  objectEntity,
   timestamp,
 }) {
   const normalizedName = normalizeAssetName(kind, name);
@@ -146,13 +147,14 @@ async function createProjectAssetComment({
     commentTarget: stringValue(commentTarget),
     currentSource,
   });
+  const objectHint = stringValue(objectEntity?.id) ? ` object=${stringValue(objectEntity.id)}` : "";
 
   const result = await insertCommentMarker({
     root: config.root,
     path: target.path,
     source: { line: target.line, column: 1 },
     note: `${assetLabel(kind, normalizedName)}：${noteText}`,
-    hint: `openpress-project-asset kind=${kind} action=comment target=${target.reason} asset=${normalizedName}`,
+    hint: `openpress-project-asset kind=${kind} action=comment target=${target.reason} asset=${normalizedName}${objectHint}`,
     timestamp,
   });
 
@@ -357,23 +359,3 @@ async function fileExists(filePath) {
     return false;
   }
 }
-
-async function readJsonBody(req) {
-  let body = "";
-  for await (const chunk of req) {
-    body += String(chunk);
-    if (Buffer.byteLength(body, "utf8") > MAX_PROJECT_ASSET_BODY_BYTES) {
-      throw new Error("Project asset request body is too large.");
-    }
-  }
-  try {
-    return JSON.parse(body || "{}");
-  } catch {
-    throw new Error("Project asset request body must be valid JSON.");
-  }
-}
-
-function writeJson(res, status, body) {
-  res.writeHead(status, { "Content-Type": "application/json; charset=utf-8" });
-  res.end(`${JSON.stringify(body, null, 2)}\n`);
-}

package/template/core/engine/react/source-edit-endpoint.d.mts

@@ -0,0 +1,10 @@
+import type { IncomingMessage, ServerResponse } from "node:http";
+
+export function handleSourceEditRequest(
+  req: IncomingMessage,
+  res: ServerResponse,
+  options?: {
+    root?: string;
+    refreshDocument?: boolean;
+  },
+): Promise<void>;

package/template/core/engine/react/source-edit-endpoint.mjs

@@ -0,0 +1,75 @@
+import { loadConfig } from "../runtime/config.mjs";
+import { applySourceBlockTextEdit, readSourceBlockText } from "../runtime/source-text-tools.mjs";
+import { exportReactDocument } from "./document-export.mjs";
+import { readJsonBody, writeJson } from "./http-json.mjs";
+
+export async function handleSourceEditRequest(req, res, {
+  root = ".",
+  refreshDocument = true,
+} = {}) {
+  if (req.method === "GET") {
+    try {
+      const requestUrl = new URL(req.url ?? "/", "http://localhost");
+      const config = await loadConfig(root);
+      const sourceText = await readSourceBlockText({
+        config,
+        path: requestUrl.searchParams.get("path"),
+        source: {
+          line: Number(requestUrl.searchParams.get("line")),
+          column: Number(requestUrl.searchParams.get("column") || 1),
+          endLine: Number(requestUrl.searchParams.get("endLine") || requestUrl.searchParams.get("line")),
+          endColumn: Number(requestUrl.searchParams.get("endColumn") || requestUrl.searchParams.get("column") || 1),
+        },
+      });
+      writeJson(res, 200, { ok: true, source: sourceText });
+    } catch (error) {
+      writeJson(res, 400, {
+        ok: false,
+        message: error instanceof Error ? error.message : String(error),
+      });
+    }
+    return;
+  }
+
+  if (req.method !== "POST") {
+    writeJson(res, 405, { ok: false, message: "OpenPress source edit endpoint requires GET or POST." });
+    return;
+  }
+
+  try {
+    const body = await readJsonBody(req, {
+      bodyLabel: "OpenPress source edit request",
+      maxBytes: 256 * 1024,
+    });
+    const config = await loadConfig(root);
+    const edit = await applySourceBlockTextEdit({
+      config,
+      path: body?.path,
+      source: body?.source,
+      text: body?.text,
+      kind: body?.kind,
+      name: body?.name,
+      blockId: body?.blockId,
+      sourceMode: body?.sourceMode === true,
+    });
+    const exported = refreshDocument && body?.refreshDocument !== false
+      ? await exportReactDocument(root, { syncAssets: false })
+      : null;
+
+    writeJson(res, 200, {
+      ok: true,
+      edit,
+      document: exported
+        ? {
+          path: exported.documentPath,
+          pageCount: exported.pageCount,
+        }
+        : undefined,
+    });
+  } catch (error) {
+    writeJson(res, 400, {
+      ok: false,
+      message: error instanceof Error ? error.message : String(error),
+    });
+  }
+}

package/template/core/engine/react/sources/mdx-resolver.mjs

@@ -10,6 +10,7 @@
 import fs from "node:fs/promises";
 import path from "node:path";
 import React from "react";
+import { documentRelativePath, resolveDocumentRelativePath } from "../../runtime/path-utils.mjs";
 import { compileMdx } from "../mdx-compile.mjs";
 import { createHeadingState, fallbackOutlineItems, headingAttributesForBlock } from "./heading-numbering.mjs";
 
@@ -103,6 +104,7 @@ async function resolveSource({ sourceId, descriptor, documentRoot, globalCompone
           kind: block.kind,
           name: block.name,
           text: block.text,
+          layout: block.layout,
           chainId,
           sectionSlug: section.slug,
           path: documentRelative(file.absolutePath, documentRoot),
@@ -323,6 +325,7 @@ function compileTocBlocks({ tocBlocks, chainId, blockIds, toc }) {
         {
           className,
           "data-openpress-block-id": block.id,
+          "data-openpress-object-id": createBlockObjectEntityId(block.id),
           "data-openpress-toc-entry": block.sectionSlug,
         },
         React.createElement(
@@ -352,6 +355,14 @@ function locateSection(renderData, chainId) {
   throw new Error(`No section found for chainId "${chainId}" in source "${renderData.sourceId}".`);
 }
 
+function createObjectEntityId(kind, ...parts) {
+  return [kind, ...parts.map((part) => encodeURIComponent(String(part)))].join(":");
+}
+
+function createBlockObjectEntityId(blockId) {
+  return createObjectEntityId("mdx-block", blockId);
+}
+
 // ---------------------------------------------------------------------------
 // Validation
 // ---------------------------------------------------------------------------
@@ -425,17 +436,4 @@ function deriveTitleFromDirName(name) {
     .join(" ");
 }
 
-function documentRelative(absolutePath, documentRoot) {
-  return path.relative(documentRoot, absolutePath).split(path.sep).join("/");
-}
-
-function resolveDocumentRelativePath(documentRoot, rel, label) {
-  if (typeof rel !== "string" || !rel.trim()) throw new Error(`${label} must be a non-empty document-relative path.`);
-  if (rel.includes("..")) throw new Error(`${label} contains "..", rejected.`);
-  const absolutePath = path.resolve(documentRoot, rel);
-  const relCheck = path.relative(documentRoot, absolutePath);
-  if (relCheck.startsWith("..") || path.isAbsolute(relCheck)) {
-    throw new Error(`${label} escapes the document root.`);
-  }
-  return absolutePath;
-}
+const documentRelative = documentRelativePath;

package/template/core/engine/react/style-discovery.mjs

@@ -1,5 +1,6 @@
 import fs from "node:fs/promises";
 import path from "node:path";
+import { documentRelativePath } from "../runtime/path-utils.mjs";
 
 // Style discovery — only used to find per-section CSS files for the
 // section-folders preset. MDX content discovery lives in `sources/mdx-resolver`.
@@ -102,10 +103,6 @@ function pathRecord(absolutePath, documentRoot) {
   };
 }
 
-function documentRelativePath(absolutePath, documentRoot) {
-  return path.relative(documentRoot, absolutePath).split(path.sep).join("/");
-}
-
 function compareSectionDirectories(a, b) {
   const left = sectionSortKey(a.name);
   const right = sectionSortKey(b.name);

package/template/core/engine/runtime/file-walk.mjs

@@ -0,0 +1,22 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+
+export async function walkFiles(directory, visit) {
+  let entries;
+  try {
+    entries = await fs.readdir(directory, { withFileTypes: true });
+  } catch (error) {
+    if (error?.code === "ENOENT") return;
+    throw error;
+  }
+
+  for (const entry of entries) {
+    if (entry.name.startsWith(".")) continue;
+    const absolutePath = path.join(directory, entry.name);
+    if (entry.isDirectory()) {
+      await walkFiles(absolutePath, visit);
+    } else if (entry.isFile()) {
+      await visit(absolutePath);
+    }
+  }
+}

package/template/core/engine/runtime/inspection.mjs

@@ -2,6 +2,7 @@ import fs from "node:fs/promises";
 import path from "node:path";
 import { evaluateUrlWithChrome, stopChildProcess } from "../output/chrome-pdf.mjs";
 import { buildReactStatic, startStaticServer } from "../commands/_shared.mjs";
+import { walkFiles } from "./file-walk.mjs";
 import { createIssue, createIssueReport } from "./issue-report.mjs";
 import { collectActiveContentFiles, resolveActiveSourceWorkspace } from "./source-workspace.mjs";
 
@@ -217,26 +218,6 @@ async function readMediaFiles(directory) {
   return files;
 }
 
-async function walkFiles(directory, visit) {
-  let entries;
-  try {
-    entries = await fs.readdir(directory, { withFileTypes: true });
-  } catch (error) {
-    if (error?.code === "ENOENT") return;
-    throw error;
-  }
-
-  for (const entry of entries) {
-    if (entry.name.startsWith(".")) continue;
-    const absolutePath = path.join(directory, entry.name);
-    if (entry.isDirectory()) {
-      await walkFiles(absolutePath, visit);
-    } else if (entry.isFile()) {
-      await visit(absolutePath);
-    }
-  }
-}
-
 function summarizeComponentUsage(contentFiles) {
   const usages = new Map();
   for (const file of contentFiles) {

package/template/core/engine/runtime/path-utils.mjs

@@ -0,0 +1,20 @@
+import path from "node:path";
+
+export function rootRelativePath(config, absolutePath) {
+  return path.relative(config.root, absolutePath).replaceAll("\\", "/");
+}
+
+export function documentRelativePath(absolutePath, documentRoot) {
+  return path.relative(documentRoot, absolutePath).split(path.sep).join("/");
+}
+
+export function resolveDocumentRelativePath(documentRoot, rel, label) {
+  if (typeof rel !== "string" || !rel.trim()) throw new Error(`${label} must be a non-empty document-relative path.`);
+  if (rel.includes("..")) throw new Error(`${label} contains "..", rejected.`);
+  const absolutePath = path.resolve(documentRoot, rel);
+  const relCheck = path.relative(documentRoot, absolutePath);
+  if (relCheck.startsWith("..") || path.isAbsolute(relCheck)) {
+    throw new Error(`${label} escapes the document root.`);
+  }
+  return absolutePath;
+}

package/template/core/engine/runtime/source-text-tools.d.mts

@@ -0,0 +1,102 @@
+import type { ResolvedConfig } from "./config.mjs";
+
+export type SourceTextScope = "content" | "all";
+
+export type SourceTextMatch = {
+  id: string;
+  scope: string;
+  file: string;
+  path: string;
+  line: number;
+  column: number;
+  index: number;
+  text: string;
+  preview: string;
+};
+
+export type SourceTextFileSummary = {
+  scope: string;
+  file: string;
+  path: string;
+  matchCount: number;
+};
+
+export type SourceSearchReport = {
+  kind: "search";
+  query: string;
+  scope: SourceTextScope;
+  caseSensitive: boolean;
+  matchCount: number;
+  files: Array<SourceTextFileSummary>;
+  matches: Array<SourceTextMatch>;
+};
+
+export type SourceBlockTextEditInput = {
+  config: ResolvedConfig;
+  path: string;
+  source: {
+    line: number;
+    column?: number;
+    endLine?: number;
+    endColumn?: number;
+  };
+  text: string;
+  kind?: string;
+  name?: string;
+  blockId?: string;
+  cellIndex?: number;
+  sourceMode?: boolean;
+};
+
+export type SourceBlockTextEdit = {
+  blockId?: string;
+  path: string;
+  requestedPath: string;
+  file: string;
+  line: number;
+  column: number;
+  endLine: number;
+  endColumn: number;
+  before: string;
+  after: string;
+  text: string;
+  cellIndex?: number;
+};
+
+export function searchSourceText(options: {
+  config: ResolvedConfig;
+  query: string;
+  scope?: SourceTextScope;
+  caseSensitive?: boolean;
+}): Promise<SourceSearchReport>;
+
+export function applySourceBlockTextEdit(options: SourceBlockTextEditInput): Promise<SourceBlockTextEdit>;
+
+export function applySourceBlockTextEditToText(documentText: string, options: Omit<SourceBlockTextEditInput, "config" | "path">): {
+  text: string;
+  edit: Omit<SourceBlockTextEdit, "path" | "requestedPath" | "file">;
+};
+
+export function readSourceBlockText(options: Pick<SourceBlockTextEditInput, "config" | "path" | "source">): Promise<{
+  path: string;
+  requestedPath: string;
+  file: string;
+  text: string;
+}>;
+
+export function readSourceBlockTextFromText(documentText: string, options: Pick<SourceBlockTextEditInput, "source">): string;
+
+export function applySourceBlockSourceEditToText(documentText: string, options: Pick<SourceBlockTextEditInput, "source" | "text" | "blockId">): {
+  text: string;
+  edit: Omit<SourceBlockTextEdit, "path" | "requestedPath" | "file">;
+};
+
+export function collectSourceTextFiles(config: ResolvedConfig, options?: {
+  scope?: SourceTextScope;
+}): Promise<Array<{
+  scope: string;
+  name: string;
+  absolutePath: string;
+  relativePath: string;
+  text: string;
+}>>;