@agile-team/mach-report 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -0,0 +1,1663 @@
+'use strict';
+
+// src/defaults.ts
+var LINE_HEIGHT = 1.35;
+var DEFAULT_FONT_PT = 10.5;
+var DEFAULT_BORDER_PT = 0.75;
+var DEFAULT_STROKE_COLOR = "#333333";
+var DEFAULT_TEXT_COLOR = "#000000";
+var SCHEMA_VERSION_MACH = "1.0.0-mach";
+var SCHEMA_VERSION_LOCAL = "mach-local";
+var SCHEMA_VERSION_JH4J = "jh4j-compatible";
+
+// src/units.ts
+var MM_PER_INCH = 25.4;
+var CSS_DPI = 96;
+function mmToPxFactor(dpi = CSS_DPI) {
+  return dpi / MM_PER_INCH;
+}
+function mmToPx(value, dpi = CSS_DPI) {
+  return (value || 0) * mmToPxFactor(dpi);
+}
+function pxToMm(value, dpi = CSS_DPI) {
+  return value / mmToPxFactor(dpi);
+}
+function ptToPx(pt, dpi = CSS_DPI) {
+  return pt * dpi / 72;
+}
+function round(value, digits) {
+  const f = 10 ** digits;
+  return Math.round(value * f) / f;
+}
+var PAPER_SIZES = {
+  a3: { widthMm: 297, heightMm: 420 },
+  a4: { widthMm: 210, heightMm: 297 },
+  a5: { widthMm: 148, heightMm: 210 },
+  b4: { widthMm: 250, heightMm: 353 },
+  b5: { widthMm: 176, heightMm: 250 }
+};
+
+// src/schema/render-plan.ts
+var RENDER_PLAN_SCHEMA_VERSION = SCHEMA_VERSION_MACH;
+function toRenderPlan(response) {
+  if (response && response.code != null && response.code !== 200) {
+    throw new Error(String(response.message || "\u6E32\u67D3\u8BA1\u5212\u52A0\u8F7D\u5931\u8D25"));
+  }
+  const pages = response?.data?.pages;
+  return {
+    schemaVersion: RENDER_PLAN_SCHEMA_VERSION,
+    pages: Array.isArray(pages) ? pages : []
+  };
+}
+function isImageBackedComponent(comp) {
+  return (comp.kind === "image" || comp.kind === "barcode" || comp.kind === "qrcode" || comp.kind === "chart") && !!comp.imageData;
+}
+function isRichText(comp) {
+  return comp.kind === "text" && Array.isArray(comp.richParagraphs) && comp.richParagraphs.length > 0;
+}
+
+// src/schema/validate.ts
+var KNOWN_KINDS = /* @__PURE__ */ new Set([
+  "text",
+  "image",
+  "barcode",
+  "qrcode",
+  "chart",
+  "line",
+  "rect",
+  "ellipse"
+]);
+function isObj(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function checkNumber(obj, key, path, errors) {
+  const v = obj[key];
+  if (v === void 0 || v === null) return;
+  if (typeof v !== "number" || !Number.isFinite(v)) {
+    errors.push({ path: `${path}.${key}`, message: `\u5E94\u4E3A\u6709\u9650\u6570\u5B57\uFF0C\u5B9E\u9645 ${JSON.stringify(v)}` });
+  }
+}
+function validateComponent(comp, path, errors, warnings = []) {
+  if (!isObj(comp)) {
+    errors.push({ path, message: "\u7EC4\u4EF6\u5E94\u4E3A\u5BF9\u8C61" });
+    return;
+  }
+  const kind = comp["kind"];
+  if (typeof kind !== "string") {
+    errors.push({ path: `${path}.kind`, message: `\u7EC4\u4EF6\u7F3A\u5C11 kind \u5B57\u7B26\u4E32` });
+  } else if (!KNOWN_KINDS.has(kind)) {
+    warnings.push({
+      path: `${path}.kind`,
+      message: `\u672A\u77E5\u7EC4\u4EF6\u7C7B\u578B ${JSON.stringify(kind)}\uFF0C\u5C06\u4EE5\u515C\u5E95\u65B9\u5F0F\u6E32\u67D3`
+    });
+  }
+  for (const key of ["leftMm", "topMm", "widthMm", "heightMm"]) {
+    checkNumber(comp, key, path, errors);
+  }
+  if (comp["leftMm"] != null && comp["widthMm"] != null) {
+    if (comp["leftMm"] < -100 || comp["widthMm"] < 0) {
+      errors.push({ path, message: "\u51E0\u4F55\u6570\u503C\u5F02\u5E38\uFF08leftMm<-100 \u6216 widthMm<0\uFF09" });
+    }
+  }
+  const grid = comp["grid"];
+  if (grid !== void 0) {
+    if (!isObj(grid) || !Array.isArray(grid["cells"])) {
+      errors.push({ path: `${path}.grid.cells`, message: "grid.cells \u5E94\u4E3A\u4E8C\u7EF4\u6570\u7EC4" });
+    } else {
+      grid["cells"].forEach((row, ri) => {
+        if (!Array.isArray(row)) {
+          errors.push({ path: `${path}.grid.cells.${ri}`, message: "\u884C\u5E94\u4E3A\u6570\u7EC4" });
+          return;
+        }
+        row.forEach((cell, ci) => {
+          if (cell === void 0 || cell === null) return;
+          if (isObj(cell) && Array.isArray(cell["children"])) {
+            cell["children"].forEach((child, ki) => {
+              validateComponent(child, `${path}.grid.cells.${ri}.${ci}.children.${ki}`, errors, warnings);
+            });
+          }
+        });
+      });
+    }
+  }
+  const rich = comp["richParagraphs"];
+  if (rich !== void 0) {
+    if (!Array.isArray(rich)) {
+      errors.push({ path: `${path}.richParagraphs`, message: "richParagraphs \u5E94\u4E3A\u6570\u7EC4" });
+    } else {
+      rich.forEach((para, i) => {
+        if (!isObj(para) || !Array.isArray(para["segments"])) {
+          errors.push({ path: `${path}.richParagraphs.${i}`, message: "\u6BB5\u843D\u7F3A\u5C11 segments \u6570\u7EC4" });
+        }
+      });
+    }
+  }
+}
+function validatePage(page, path, errors, warnings = []) {
+  if (!isObj(page)) {
+    errors.push({ path, message: "\u9875\u5E94\u4E3A\u5BF9\u8C61" });
+    return;
+  }
+  const w = page["pageWidthMm"];
+  const h = page["pageHeightMm"];
+  if (typeof w !== "number" || !(w > 0 && w < 3e3)) {
+    errors.push({ path: `${path}.pageWidthMm`, message: `\u9875\u5BBD\u975E\u6CD5: ${JSON.stringify(w)}` });
+  }
+  if (typeof h !== "number" || !(h > 0 && h < 5e3)) {
+    errors.push({ path: `${path}.pageHeightMm`, message: `\u9875\u9AD8\u975E\u6CD5: ${JSON.stringify(h)}` });
+  }
+  const comps = page["components"];
+  if (comps !== void 0 && !Array.isArray(comps)) {
+    errors.push({ path: `${path}.components`, message: "components \u5E94\u4E3A\u6570\u7EC4" });
+  } else if (Array.isArray(comps)) {
+    comps.forEach(
+      (comp, i) => validateComponent(comp, `${path}.components.${i}`, errors, warnings)
+    );
+  }
+}
+function validateRenderPlan(input) {
+  const errors = [];
+  const warnings = [];
+  const pages = isObj(input) ? input["pages"] : void 0;
+  if (!Array.isArray(pages)) {
+    errors.push({
+      path: "$.pages",
+      message: input == null ? "\u6E32\u67D3\u8BA1\u5212\u4E3A\u7A7A" : "\u6E32\u67D3\u8BA1\u5212\u7F3A\u5C11 pages \u6570\u7EC4"
+    });
+  } else {
+    pages.forEach((page, i) => validatePage(page, `$.pages.${i}`, errors, warnings));
+  }
+  return { ok: errors.length === 0, errors, warnings };
+}
+function assertRenderPlan(input) {
+  const result = validateRenderPlan(input);
+  if (!result.ok) {
+    const head = result.errors.slice(0, 3).map((e) => `${e.path}: ${e.message}`).join("; ");
+    throw new Error(`\u6E32\u67D3\u8BA1\u5212\u6821\u9A8C\u5931\u8D25(${result.errors.length} \u5904): ${head}`);
+  }
+  return input.pages;
+}
+
+// src/layout/textwrap.ts
+var CJK_RE = /[\u3000-\u9fff\uff00-\uffef]/;
+var LATIN_CLASS = new Uint8Array(128);
+{
+  for (const ch of "iljtf.,:;'`|!()[]") LATIN_CLASS[ch.charCodeAt(0)] = 1;
+  for (const ch of "mwMW@") LATIN_CLASS[ch.charCodeAt(0)] = 2;
+  for (let c = 48; c <= 57; c++) LATIN_CLASS[c] = 3;
+  for (let c = 65; c <= 90; c++) LATIN_CLASS[c] = 4;
+  LATIN_CLASS[32] = 5;
+}
+var LATIN_WIDTH = [0.54, 0.26, 0.95, 0.59, 0.67, 0.3];
+function charWidthEm(ch) {
+  const code = ch.charCodeAt(0);
+  if (code < 128) return LATIN_WIDTH[LATIN_CLASS[code]];
+  if (CJK_RE.test(ch)) return 1;
+  if (/[A-Z]/.test(ch)) return 0.67;
+  return 0.54;
+}
+var heuristicMeasurer = {
+  measureMm(text, options) {
+    const { fontSizePt, bold = false, letterSpacingPt = 0 } = options;
+    const ptToMm = 25.4 / 72;
+    let units = 0;
+    for (const ch of text) {
+      units += charWidthEm(ch);
+    }
+    if (bold) units *= 1.04;
+    return (units * fontSizePt + letterSpacingPt * text.length) * ptToMm;
+  }
+};
+function createHeuristicMeasurer() {
+  return heuristicMeasurer;
+}
+function measureTextMm(text, options) {
+  return heuristicMeasurer.measureMm(text, options);
+}
+function createCanvasMeasurer(getCtx2d) {
+  let ctx;
+  return {
+    measureMm(text, options) {
+      if (ctx === void 0) ctx = getCtx2d();
+      if (!ctx) return heuristicMeasurer.measureMm(text, options);
+      const px = options.fontSizePt * 96 / 72;
+      ctx.font = `${options.bold ? "bold " : ""}${px}px sans-serif`;
+      return ctx.measureText(text).width * 25.4 / 96;
+    }
+  };
+}
+function tokenize(text, options, measurer) {
+  const atoms = [];
+  let word = "";
+  let wordWidth = 0;
+  const flush = () => {
+    if (word) {
+      atoms.push({ text: word, widthMm: wordWidth, cjk: false });
+      word = "";
+      wordWidth = 0;
+    }
+  };
+  for (const ch of text) {
+    if (ch === "\n") {
+      flush();
+      atoms.push({ text: "\n", widthMm: 0, cjk: false, br: true });
+      continue;
+    }
+    if (ch === " ") {
+      flush();
+      atoms.push({ text: ch, widthMm: measurer.measureMm(ch, options), cjk: false, space: true });
+      continue;
+    }
+    if (CJK_RE.test(ch)) {
+      flush();
+      atoms.push({ text: ch, widthMm: measurer.measureMm(ch, options), cjk: true });
+      continue;
+    }
+    word += ch;
+    wordWidth += measurer.measureMm(ch, options);
+  }
+  flush();
+  return atoms;
+}
+function wrapText(text, maxWidthMm, options, measurer = heuristicMeasurer) {
+  if (!text) return [""];
+  const lines = [];
+  let current = "";
+  let currentWidth = 0;
+  const pushLine = () => {
+    lines.push(current);
+    current = "";
+    currentWidth = 0;
+  };
+  for (const atom of tokenize(text, options, measurer)) {
+    if (atom.br) {
+      pushLine();
+      continue;
+    }
+    if (currentWidth + atom.widthMm <= maxWidthMm) {
+      current += atom.text;
+      currentWidth += atom.widthMm;
+      continue;
+    }
+    if (atom.space) {
+      pushLine();
+      continue;
+    }
+    if (atom.cjk) {
+      if (current.length > 0) pushLine();
+      current = atom.text;
+      currentWidth = atom.widthMm;
+      continue;
+    }
+    if (current.length > 0) pushLine();
+    if (atom.widthMm <= maxWidthMm) {
+      current = atom.text;
+      currentWidth = atom.widthMm;
+      continue;
+    }
+    for (const ch of atom.text) {
+      const chWidth = measurer.measureMm(ch, options);
+      if (currentWidth + chWidth > maxWidthMm && current.length > 0) {
+        pushLine();
+      }
+      current += ch;
+      currentWidth += chWidth;
+    }
+  }
+  pushLine();
+  return lines;
+}
+
+// src/layout/paginate.ts
+function makeWorkingPage(page) {
+  return {
+    widthMm: page.widthMm,
+    heightMm: page.heightMm,
+    marginTopMm: page.marginTopMm ?? 0,
+    marginBottomMm: page.marginBottomMm ?? 0,
+    marginLeftMm: page.marginLeftMm ?? 0,
+    marginRightMm: page.marginRightMm ?? 0,
+    components: []
+  };
+}
+function toContentBottom(page, wp) {
+  return wp.heightMm - (page.marginBottomMm ?? wp.marginBottomMm);
+}
+function estRowHeightMm(list, lines) {
+  const fontSizePt = list.fontSizePt ?? DEFAULT_FONT_PT;
+  const lineMm = fontSizePt * LINE_HEIGHT * 25.4 / 72;
+  const padding = (list.paddingMm ?? 1) * 2;
+  return Math.max(list.rowHeightMm ?? 0, lines * lineMm + padding);
+}
+function cellText(value) {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number") return String(value);
+  if (typeof value === "boolean") return value ? "\u662F" : "\u5426";
+  if (value instanceof Date) return value.toISOString().slice(0, 10);
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+function interList(list, measurer) {
+  const fontSizePt = list.fontSizePt ?? DEFAULT_FONT_PT;
+  const paddingMm = list.paddingMm ?? 1;
+  const cellStyles = list.columns.map(
+    (col) => col.style ? { align: "left", verticalAlign: "middle", ...col.style } : { align: "left", verticalAlign: "middle" }
+  );
+  const headerCellStyles = list.columns.map(
+    (col) => ({
+      bold: list.headerBold ?? true,
+      align: "center",
+      verticalAlign: "middle",
+      backgroundColor: list.headerBackgroundColor,
+      ...col.style || {}
+    })
+  );
+  const headerTexts = list.columns.map((col) => col.header);
+  const headerLines = headerTexts.map(
+    (text, i) => wrapText(
+      text,
+      list.columns[i].widthMm - paddingMm * 2,
+      { fontSizePt, bold: list.headerBold ?? true },
+      measurer
+    )
+  );
+  const maxLines = Math.max(...headerLines.map((l) => l.length), 1);
+  const headerHeight = estRowHeightMm(list, maxLines);
+  const headerCells = headerTexts.map((text, i) => ({
+    text,
+    style: headerCellStyles[i]
+  }));
+  const borderStyle = list.border === false ? { borderTop: false, borderRight: false, borderBottom: false, borderLeft: false } : { borderBottom: true, borderLeft: true, borderRight: true, borderTop: true };
+  return {
+    fontSizePt,
+    paddingMm,
+    cellStyles,
+    borderStyle,
+    headerHeightMm: headerHeight,
+    headerGrid: { cells: [headerCells], rowHeightsMm: [headerHeight] },
+    columns: list.columns
+  };
+}
+function buildRowGridFast(inter, row, measurer) {
+  const columns = inter.columns;
+  const texts = new Array(columns.length);
+  let maxLines = 1;
+  for (let i = 0; i < columns.length; i++) {
+    texts[i] = cellText(row[columns[i].field]);
+  }
+  const lines = new Array(columns.length);
+  for (let i = 0; i < columns.length; i++) {
+    const wrapped = wrapText(
+      texts[i],
+      columns[i].widthMm - inter.paddingMm * 2,
+      { fontSizePt: inter.fontSizePt },
+      measurer
+    );
+    lines[i] = wrapped;
+    if (wrapped.length > maxLines) maxLines = wrapped.length;
+  }
+  const lineMm = inter.fontSizePt * LINE_HEIGHT * 25.4 / 72;
+  const height = Math.max(
+    inter.rowHeightFloorMm,
+    maxLines * lineMm + inter.paddingMm * 2
+  );
+  const cells = new Array(columns.length);
+  for (let i = 0; i < columns.length; i++) {
+    cells[i] = { text: texts[i], style: inter.cellStyles[i] };
+  }
+  return { grid: { cells: [cells], rowHeightsMm: [height] }, heightMm: height };
+}
+function paginateTemplate(template, datasets, optionsOrMmPerRow = {}) {
+  const options = typeof optionsOrMmPerRow === "number" ? { mmPerRow: optionsOrMmPerRow } : optionsOrMmPerRow;
+  const mmPerRow = options.mmPerRow ?? 0;
+  const measurer = options.measurer ?? heuristicMeasurer;
+  const warnings = [];
+  const pages = [];
+  let seq = 0;
+  const nextId = (prefix) => `${prefix}_${(++seq).toString(36)}`;
+  for (const tplPage of template.pages) {
+    const current = makeWorkingPage(tplPage);
+    const contentBottom = () => toContentBottom(tplPage, current);
+    const contentTop = current.marginTopMm;
+    const pushCurrent = () => {
+      pages.push({
+        pageWidthMm: current.widthMm,
+        pageHeightMm: current.heightMm,
+        marginTopMm: current.marginTopMm,
+        marginBottomMm: current.marginBottomMm,
+        marginLeftMm: current.marginLeftMm,
+        marginRightMm: current.marginRightMm,
+        components: current.components
+      });
+    };
+    for (const comp of tplPage.components) {
+      if (comp.kind !== "list") {
+        current.components.push(comp);
+        continue;
+      }
+      const list = comp;
+      const rows = datasets[list.dataset];
+      if (!Array.isArray(rows)) {
+        warnings.push(`\u6570\u636E\u96C6 ${list.dataset} \u672A\u63D0\u4F9B\u6570\u636E\uFF0C\u5217\u8868 ${list.id ?? ""} \u8F93\u51FA\u4E3A\u7A7A`);
+      }
+      const dataRows = Array.isArray(rows) ? rows : [];
+      const columnsWidth = list.columns.reduce((s, c) => s + c.widthMm, 0);
+      const scale = columnsWidth > list.widthMm ? list.widthMm / columnsWidth : 1;
+      const scaledList = scale === 1 ? list : { ...list, columns: list.columns.map((c) => ({ ...c, widthMm: c.widthMm * scale })) };
+      const inter = {
+        ...interList(scaledList, measurer),
+        rowHeightFloorMm: scaledList.rowHeightMm ?? 0
+      };
+      const headerComp = {
+        kind: "rect",
+        leftMm: list.leftMm,
+        topMm: 0,
+        widthMm: list.widthMm,
+        heightMm: inter.headerHeightMm,
+        grid: inter.headerGrid,
+        nid: nextId("listh"),
+        style: inter.borderStyle
+      };
+      let y = list.topMm;
+      const placeHeader = (target, topMm) => {
+        target.components.push({ ...headerComp, topMm });
+      };
+      placeHeader(current, y);
+      y += inter.headerHeightMm + mmPerRow;
+      for (let i = 0; i < dataRows.length; i++) {
+        const rowGrid = buildRowGridFast(inter, dataRows[i], measurer);
+        if (y + rowGrid.heightMm > contentBottom()) {
+          pushCurrent();
+          const next = makeWorkingPage(tplPage);
+          current.components = next.components;
+          current.heightMm = next.heightMm;
+          if (scaledList.headerEveryPage !== false) {
+            placeHeader(current, list.topMm);
+            y = list.topMm + inter.headerHeightMm;
+          } else {
+            y = contentTop;
+          }
+        }
+        current.components.push({
+          kind: "rect",
+          leftMm: list.leftMm,
+          topMm: y,
+          widthMm: list.widthMm,
+          heightMm: rowGrid.heightMm,
+          grid: rowGrid.grid,
+          nid: nextId("listr"),
+          style: inter.borderStyle
+        });
+        y += rowGrid.heightMm;
+      }
+    }
+    pushCurrent();
+  }
+  return {
+    plan: { schemaVersion: RENDER_PLAN_SCHEMA_VERSION, pages },
+    warnings
+  };
+}
+
+// src/render/grid-geometry.ts
+function cumulate(sizesMm, totalMm) {
+  const n = sizesMm.length;
+  if (n === 0) return [];
+  const sum = sizesMm.reduce((s, v) => s + v, 0);
+  const scale = sum > 0 && totalMm > 0 ? totalMm / sum : 1;
+  const out = [];
+  let acc = 0;
+  for (let i = 0; i < n; i++) {
+    const size = Math.max(0, sizesMm[i] * scale);
+    out.push({ pos: acc, size });
+    acc += size;
+  }
+  return out;
+}
+function resolveGridLayout(grid, compWidthMm, compHeightMm) {
+  const rowsRaw = grid.cells ?? [];
+  const rowCount = Math.max(rowsRaw.length, 1);
+  const colCount = grid.colWidthsMm?.length ?? Math.max(1, ...rowsRaw.map((r) => Array.isArray(r) ? r.length : 0));
+  const widths = grid.colWidthsMm?.length ? cumulate(grid.colWidthsMm, compWidthMm) : Array.from({ length: colCount }, (_, i) => ({
+    pos: compWidthMm * i / colCount,
+    size: compWidthMm / colCount
+  }));
+  const colPos = (ci) => ci <= 0 ? 0 : ci >= colCount ? widths[widths.length - 1].pos + widths[widths.length - 1].size : widths[ci].pos;
+  const heights = grid.rowHeightsMm?.length ? cumulate(grid.rowHeightsMm, compHeightMm) : Array.from({ length: rowCount }, (_, i) => ({
+    pos: compHeightMm * i / rowCount,
+    size: compHeightMm / rowCount
+  }));
+  const rowPos = (ri) => ri <= 0 ? 0 : ri >= rowCount ? heights[heights.length - 1].pos + heights[heights.length - 1].size : heights[ri].pos;
+  const occupied = /* @__PURE__ */ new Set();
+  const key = (r, c) => `${r}:${c}`;
+  const cells = [];
+  const vBridge = /* @__PURE__ */ new Set();
+  const hBridge = /* @__PURE__ */ new Set();
+  const vKey = (c, r) => `v${c}:${r}`;
+  const hKey = (r, c) => `h${r}:${c}`;
+  rowsRaw.forEach((row, ri) => {
+    if (!Array.isArray(row)) return;
+    let ci = 0;
+    for (const cell of row) {
+      while (ci < colCount && occupied.has(key(ri, ci))) ci++;
+      if (ci >= colCount) break;
+      const colSpan = Math.max(1, Math.min(cell?.colSpan ?? 1, colCount - ci));
+      const rowSpan = Math.max(1, cell?.rowSpan ?? 1);
+      const rowEnd = Math.min(rowCount, ri + rowSpan);
+      const colEnd = Math.min(colCount, ci + colSpan);
+      for (let dr = ri; dr < rowEnd; dr++) {
+        for (let dc = ci; dc < colEnd; dc++) {
+          occupied.add(key(dr, dc));
+        }
+      }
+      for (let c = ci + 1; c < colEnd; c++) {
+        for (let r = ri; r < rowEnd; r++) vBridge.add(vKey(c, r));
+      }
+      for (let r = ri + 1; r < rowEnd; r++) {
+        for (let c = ci; c < colEnd; c++) hBridge.add(hKey(r, c));
+      }
+      const xMm = colPos(ci);
+      const yMm = rowPos(ri);
+      cells.push({
+        ri,
+        ci,
+        cell: cell ?? {},
+        xMm,
+        yMm,
+        widthMm: colPos(colEnd) - xMm,
+        heightMm: rowPos(rowEnd) - yMm
+      });
+      ci = colEnd;
+    }
+  });
+  const edges = [];
+  for (let c = 1; c < colCount; c++) {
+    let runStart = -1;
+    for (let r = 0; r <= rowCount; r++) {
+      const open = r < rowCount && !vBridge.has(vKey(c, r));
+      if (open && runStart < 0) runStart = r;
+      if (!open && runStart >= 0) {
+        edges.push({ kind: "v", pos: colPos(c), from: rowPos(runStart), to: rowPos(r) });
+        runStart = -1;
+      }
+    }
+  }
+  for (let r = 1; r < rowCount; r++) {
+    let runStart = -1;
+    for (let c = 0; c <= colCount; c++) {
+      const open = c < colCount && !hBridge.has(hKey(r, c));
+      if (open && runStart < 0) runStart = c;
+      if (!open && runStart >= 0) {
+        edges.push({ kind: "h", pos: rowPos(r), from: colPos(runStart), to: colPos(c) });
+        runStart = -1;
+      }
+    }
+  }
+  return { columns: widths, rows: heights, cells, edges };
+}
+
+// src/render/style.ts
+function resolveFontSize(style, dpi = 96, defaultPt = DEFAULT_FONT_PT) {
+  if (style?.fontSizePx != null) {
+    return { fontSizePt: style.fontSizePx * 72 / dpi, fontSizePx: style.fontSizePx };
+  }
+  const pt = style?.fontSize ?? defaultPt;
+  return { fontSizePt: pt, fontSizePx: ptToPx(pt, dpi) };
+}
+function resolveStroke(style, fallbackColor = DEFAULT_STROKE_COLOR) {
+  return {
+    color: style?.borderColor ?? style?.lineColor ?? fallbackColor,
+    widthPt: style?.lineWidthPt ?? DEFAULT_BORDER_PT
+  };
+}
+function resolveTextColor(style, fallback = DEFAULT_TEXT_COLOR) {
+  return style?.color ?? fallback;
+}
+function resolveLineHeight(style) {
+  return style?.lineHeight ?? LINE_HEIGHT;
+}
+function resolveBoxBorders(style) {
+  const top = style?.borderTop !== false;
+  const right = style?.borderRight !== false;
+  const bottom = style?.borderBottom !== false;
+  const left = style?.borderLeft !== false;
+  return { top, right, bottom, left, inner: top || right || bottom || left };
+}
+
+// src/render/dom.ts
+var CLS = {
+  root: "mr-root",
+  page: "mr-page",
+  comp: "mr-comp",
+  text: "mr-text",
+  lines: "mr-lines",
+  line: "mr-line",
+  rich: "mr-rich",
+  paragraph: "mr-paragraph",
+  segment: "mr-segment",
+  image: "mr-image",
+  shape: "mr-shape",
+  grid: "mr-grid",
+  row: "mr-row",
+  cell: "mr-cell",
+  unknown: "mr-unknown"
+};
+function classOf(key, options) {
+  return options?.classNames?.[key] ?? CLS[key];
+}
+var StyleBag = class {
+  constructor() {
+    this.props = [];
+  }
+  add(prop, value) {
+    if (value === void 0 || value === null || value === false || value === "") return this;
+    this.props.push([prop, String(value)]);
+    return this;
+  }
+  mm(prop, valueMm, dpi, digits = 2) {
+    return this.add(prop, `${round(mmToPx(valueMm, dpi), digits)}px`);
+  }
+  toString() {
+    let css = "";
+    for (const [prop, value] of this.props) {
+      css += `${prop}:${value};`;
+    }
+    return css;
+  }
+  applyTo(el) {
+    const css = this.toString();
+    if (css) el.style.cssText = css;
+  }
+};
+function applyComponentStyle(bag, comp, dpi) {
+  const s = comp.style || {};
+  bag.add("color", s.color).add("background-color", s.backgroundColor).add("font-family", s.fontFamily).add("font-weight", s.bold ? "700" : void 0).add("font-style", s.italic ? "italic" : void 0).add("text-decoration", s.underline ? "underline" : void 0).add("letter-spacing", s.letterSpacing != null ? `${s.letterSpacing}pt` : void 0).add("opacity", s.opacity != null ? String(s.opacity) : void 0).add("transform", s.rotateDeg ? `rotate(${s.rotateDeg}deg)` : void 0);
+  const font = resolveFontSize(s, dpi);
+  bag.add("font-size", `${round(font.fontSizePx, 2)}px`);
+}
+function renderGrid(grid, comp, dpi, options, doc) {
+  const table = doc.createElement("table");
+  table.className = classOf("grid", options);
+  new StyleBag().add("width", "100%").add("height", "100%").add("border-collapse", "collapse").add("table-layout", grid.colWidthsMm ? "fixed" : "auto").applyTo(table);
+  if (grid.colWidthsMm) {
+    const colGroup = doc.createElement("colgroup");
+    for (const w of grid.colWidthsMm) {
+      const col = doc.createElement("col");
+      new StyleBag().mm("width", w, dpi).applyTo(col);
+      colGroup.appendChild(col);
+    }
+    table.appendChild(colGroup);
+  }
+  const borders = resolveBoxBorders(comp.style);
+  const stroke = resolveStroke(comp.style);
+  const border = borders.inner ? `${round(stroke.widthPt * dpi / 72, 2)}px solid ${stroke.color}` : "";
+  grid.cells.forEach((row, ri) => {
+    const rowEl = doc.createElement("tr");
+    rowEl.className = classOf("row", options);
+    if (grid.rowHeightsMm?.[ri] != null) {
+      new StyleBag().mm("height", grid.rowHeightsMm[ri], dpi).applyTo(rowEl);
+    }
+    (row || []).forEach((cell) => {
+      const cellEl = doc.createElement("td");
+      cellEl.className = classOf("cell", options);
+      if (cell?.colSpan) cellEl.colSpan = cell.colSpan;
+      if (cell?.rowSpan) cellEl.rowSpan = cell.rowSpan;
+      const cellBag = new StyleBag();
+      if (border) cellBag.add("border", border);
+      if (cell?.style) {
+        const st = cell.style;
+        cellBag.add("text-align", st.align).add("vertical-align", st.verticalAlign).add("background-color", st.backgroundColor).add("color", st.color).add("font-weight", st.bold ? "700" : void 0);
+        cellBag.add("font-size", `${round(resolveFontSize(st, dpi).fontSizePx, 2)}px`);
+      }
+      cellBag.applyTo(cellEl);
+      if (cell?.text != null) cellEl.textContent = cell.text;
+      if (cell?.children?.length) {
+        for (const child of cell.children) {
+          cellEl.appendChild(renderComponent(child, dpi, options, doc));
+        }
+      }
+      rowEl.appendChild(cellEl);
+    });
+    table.appendChild(rowEl);
+  });
+  return table;
+}
+function renderText(comp, dpi, options, doc) {
+  const el = doc.createElement("div");
+  el.className = classOf("text", options);
+  const s = comp.style || {};
+  const bag = new StyleBag().add("text-align", s.align).add("display", "flex").add("flex-direction", "column").add(
+    "justify-content",
+    s.verticalAlign === "middle" ? "center" : s.verticalAlign === "bottom" ? "flex-end" : "flex-start"
+  ).add("overflow", "hidden");
+  applyComponentStyle(bag, comp, dpi);
+  bag.applyTo(el);
+  if (isRichText(comp)) {
+    const richBox = doc.createElement("div");
+    richBox.className = classOf("rich", options);
+    for (const para of comp.richParagraphs) {
+      const p = doc.createElement("div");
+      p.className = classOf("paragraph", options);
+      const pBag = new StyleBag().add("text-align", para.align).add("line-height", para.lineHeight != null ? String(para.lineHeight) : void 0).mm("margin-top", para.spaceBeforeMm ?? 0, dpi).mm("margin-bottom", para.spaceAfterMm ?? 0, dpi).mm("text-indent", para.indentMm ?? 0, dpi);
+      pBag.applyTo(p);
+      for (const seg of para.segments || []) {
+        const segEl = doc.createElement("span");
+        segEl.className = classOf("segment", options);
+        segEl.textContent = seg.kind === "field" ? seg.field ?? "" : seg.text ?? "";
+        if (seg.style) {
+          const segBag = new StyleBag().add("color", seg.style.color).add("font-weight", seg.style.bold ? "700" : void 0);
+          segBag.add("font-size", `${round(resolveFontSize(seg.style, dpi).fontSizePx, 2)}px`);
+          segBag.applyTo(segEl);
+        }
+        p.appendChild(segEl);
+      }
+      richBox.appendChild(p);
+    }
+    el.appendChild(richBox);
+    return el;
+  }
+  if (Array.isArray(comp.lines) && comp.lines.length > 0) {
+    const box = doc.createElement("div");
+    box.className = classOf("lines", options);
+    if (s.lineHeight != null) new StyleBag().add("line-height", String(s.lineHeight)).applyTo(box);
+    for (const line of comp.lines) {
+      const lineEl = doc.createElement("div");
+      lineEl.className = classOf("line", options);
+      lineEl.textContent = line;
+      box.appendChild(lineEl);
+    }
+    el.appendChild(box);
+    return el;
+  }
+  el.textContent = comp.text ?? "";
+  return el;
+}
+function renderImage(comp, options, doc) {
+  const img = doc.createElement("img");
+  img.className = classOf("image", options);
+  img.src = comp.imageData;
+  new StyleBag().add("width", "100%").add("height", "100%").add("object-fit", "contain").add("display", "block").applyTo(img);
+  img.alt = comp.kind;
+  return img;
+}
+function renderShape(comp, dpi, options, doc) {
+  const el = doc.createElement("div");
+  el.className = classOf("shape", options);
+  const s = comp.style || {};
+  const stroke = resolveStroke(s);
+  const borders = resolveBoxBorders(s);
+  const border = `${round(stroke.widthPt * dpi / 72, 2)}px solid ${stroke.color}`;
+  const bag = new StyleBag();
+  if (comp.grid) {
+    if (borders.top) bag.add("border-top", border);
+    if (borders.right) bag.add("border-right", border);
+    if (borders.bottom) bag.add("border-bottom", border);
+    if (borders.left) bag.add("border-left", border);
+  } else if (comp.kind === "rect") {
+    if (borders.top) bag.add("border-top", border);
+    if (borders.right) bag.add("border-right", border);
+    if (borders.bottom) bag.add("border-bottom", border);
+    if (borders.left) bag.add("border-left", border);
+  } else if (comp.kind === "ellipse") {
+    if (borders.inner) bag.add("border", border).add("border-radius", "50%");
+    if (s.backgroundColor) bag.add("background-color", s.backgroundColor);
+  } else if (comp.kind === "line") {
+    bag.add("height", "0").add("border-top", border);
+  }
+  bag.add("box-sizing", "border-box").add("width", "100%").add("height", "100%");
+  bag.applyTo(el);
+  return el;
+}
+function renderComponent(comp, dpi, options, doc) {
+  const wrap = doc.createElement("div");
+  wrap.className = `${classOf("comp", options)} mr-kind-${comp.kind}`;
+  const bag = new StyleBag().add("position", "absolute").mm("left", comp.leftMm, dpi).mm("top", comp.topMm, dpi).mm("width", comp.widthMm, dpi).mm("height", comp.heightMm, dpi).add("box-sizing", "border-box");
+  applyComponentStyle(bag, comp, dpi);
+  bag.applyTo(wrap);
+  if (isImageBackedComponent(comp)) {
+    wrap.appendChild(renderImage(comp, options, doc));
+    return wrap;
+  }
+  if (comp.kind === "text") {
+    wrap.appendChild(renderText(comp, dpi, options, doc));
+    return wrap;
+  }
+  if (comp.grid) {
+    const shape = renderShape(comp, dpi, options, doc);
+    shape.appendChild(renderGrid(comp.grid, comp, dpi, options, doc));
+    wrap.appendChild(shape);
+    return wrap;
+  }
+  if (comp.kind === "line" || comp.kind === "rect" || comp.kind === "ellipse" || comp.kind === "chart") {
+    wrap.appendChild(renderShape(comp, dpi, options, doc));
+    return wrap;
+  }
+  const ph = doc.createElement("div");
+  ph.className = classOf("unknown", options);
+  ph.textContent = comp.fallbackText ?? "";
+  wrap.appendChild(ph);
+  return wrap;
+}
+function renderPage(page, dpi, options, doc) {
+  const el = doc.createElement("div");
+  el.className = classOf("page", options);
+  new StyleBag().add("position", "relative").mm("width", page.pageWidthMm, dpi).mm("height", page.pageHeightMm, dpi).add("background-color", "#fff").add("overflow", "hidden").add("box-sizing", "border-box").applyTo(el);
+  for (const comp of page.components) {
+    el.appendChild(renderComponent(comp, dpi, options, doc));
+  }
+  return el;
+}
+function renderPlan(plan, doc, options = {}) {
+  const dpi = options.dpi ?? 96;
+  const root = doc.createElement("div");
+  root.className = classOf("root", options);
+  root.dataset.schemaVersion = plan.schemaVersion;
+  plan.pages.forEach((page) => {
+    root.appendChild(renderPage(page, dpi, options, doc));
+  });
+  return root;
+}
+
+// src/render/window.ts
+function computePageWindow(input) {
+  const { pageHeightsPx, viewportHeightPx, scrollTopPx, overscan = 1, gapPx = 0 } = input;
+  const n = pageHeightsPx.length;
+  if (n === 0) {
+    return { start: 0, end: -1, padTopPx: 0, padBottomPx: 0 };
+  }
+  const gap = Math.max(0, gapPx);
+  const offsets = new Array(n + 1);
+  offsets[0] = 0;
+  for (let i = 0; i < n; i++) {
+    offsets[i + 1] = offsets[i] + Math.max(0, pageHeightsPx[i] ?? 0) + gap;
+  }
+  const total = offsets[n];
+  const top = Math.max(0, scrollTopPx);
+  let cover = 0;
+  let lo = 0;
+  let hi = n - 1;
+  while (lo <= hi) {
+    const mid = lo + hi >> 1;
+    if (offsets[mid] <= top) {
+      cover = mid;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  const start = Math.max(0, Math.min(n - 1, cover - overscan));
+  const target = offsets[cover] + Math.max(0, viewportHeightPx);
+  let visibleEnd = n - 1;
+  lo = 0;
+  hi = n - 1;
+  while (lo <= hi) {
+    const mid = lo + hi >> 1;
+    if (offsets[mid + 1] < target) {
+      lo = mid + 1;
+    } else {
+      visibleEnd = mid;
+      hi = mid - 1;
+    }
+  }
+  const end = Math.min(n - 1, visibleEnd + overscan);
+  const padTopPx = offsets[start];
+  const padBottomPx = Math.max(0, total - offsets[end + 1]);
+  return { start, end, padTopPx, padBottomPx };
+}
+
+// src/render/canvas.ts
+var PX_PER_MM_BASE = 96 / 25.4;
+function measurePageSizePx(page, dpi = 96) {
+  const pxPerMm = dpi / 96 * PX_PER_MM_BASE;
+  return {
+    widthPx: Math.max(1, Math.round(page.pageWidthMm * pxPerMm)),
+    heightPx: Math.max(1, Math.round(page.pageHeightMm * pxPerMm))
+  };
+}
+function createPageCanvas(page, dpr, dpi) {
+  const canvas = document.createElement("canvas");
+  const { widthPx: w, heightPx: h } = measurePageSizePx(page, dpi);
+  canvas.width = Math.round(w * dpr);
+  canvas.height = Math.round(h * dpr);
+  canvas.style.width = `${w}px`;
+  canvas.style.height = `${h}px`;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301 Canvas 2D\uFF08\u6D4B\u8BD5\u9700\u771F\u6D4F\u89C8\u5668\uFF0C\u89C1 e2e/canvas.spec.ts\uFF09");
+  }
+  ctx.scale(dpr, dpr);
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, w, h);
+  return { canvas, ctx };
+}
+function planFontSizePx(style, dpi = 96) {
+  return resolveFontSize(style, dpi).fontSizePx;
+}
+function drawTextBlock(ctx, spec, x, y, w, h, fontFamily, verticalAlign = "top") {
+  ctx.font = `${spec.bold ? "bold " : ""}${spec.fontSizePx}px ${fontFamily}`;
+  ctx.fillStyle = spec.color;
+  ctx.textBaseline = "alphabetic";
+  const lineH = spec.fontSizePx * spec.lineHeight;
+  const lines = spec.text === "" ? [""] : spec.text.split("\n");
+  const totalH = lines.length * lineH;
+  let topY = y;
+  if (verticalAlign === "middle") topY = y + (h - totalH) / 2;
+  else if (verticalAlign === "bottom") topY = y + h - totalH;
+  lines.forEach((line, i) => {
+    ctx.textAlign = spec.align === "center" ? "center" : spec.align === "right" ? "right" : "left";
+    const tx = spec.align === "center" ? x + w / 2 : spec.align === "right" ? x + w : x;
+    ctx.fillText(line, tx, topY + i * lineH + spec.fontSizePx * 0.8, w);
+  });
+  ctx.textAlign = "left";
+}
+function drawGrid(ctx, grid, comp, x, y, w, h, pxPerMm, dpi, fontFamily, measurer) {
+  const layout = resolveGridLayout(grid, w / pxPerMm, h / pxPerMm);
+  const borders = resolveBoxBorders(comp.style);
+  const stroke = resolveStroke(comp.style);
+  for (const box of layout.cells) {
+    const bg = box.cell.style?.backgroundColor;
+    if (bg) {
+      ctx.fillStyle = bg;
+      ctx.fillRect(
+        x + box.xMm * pxPerMm,
+        y + box.yMm * pxPerMm,
+        box.widthMm * pxPerMm,
+        box.heightMm * pxPerMm
+      );
+    }
+  }
+  if (borders.inner) {
+    ctx.strokeStyle = stroke.color;
+    ctx.lineWidth = ptToPx(stroke.widthPt, dpi);
+    for (const e of layout.edges) {
+      ctx.beginPath();
+      if (e.kind === "v") {
+        ctx.moveTo(x + e.pos * pxPerMm, y + e.from * pxPerMm);
+        ctx.lineTo(x + e.pos * pxPerMm, y + e.to * pxPerMm);
+      } else {
+        ctx.moveTo(x + e.from * pxPerMm, y + e.pos * pxPerMm);
+        ctx.lineTo(x + e.to * pxPerMm, y + e.pos * pxPerMm);
+      }
+      ctx.stroke();
+    }
+    ctx.beginPath();
+    if (borders.top) {
+      ctx.moveTo(x, y);
+      ctx.lineTo(x + w, y);
+    }
+    if (borders.right) {
+      ctx.moveTo(x + w, y);
+      ctx.lineTo(x + w, y + h);
+    }
+    if (borders.bottom) {
+      ctx.moveTo(x + w, y + h);
+      ctx.lineTo(x, y + h);
+    }
+    if (borders.left) {
+      ctx.moveTo(x, y + h);
+      ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+  }
+  for (const box of layout.cells) {
+    const text = typeof box.cell.text === "string" ? box.cell.text : "";
+    if (!text) continue;
+    const st = box.cell.style;
+    const fontSizePt = st?.fontSize ?? DEFAULT_FONT_PT;
+    const lines = wrapText(
+      text,
+      box.widthMm - 1,
+      { fontSizePt },
+      measurer
+    ).join("\n");
+    drawTextBlock(
+      ctx,
+      {
+        text: lines,
+        fontSizePx: resolveFontSize(st, dpi).fontSizePx,
+        bold: st?.bold ?? false,
+        color: st?.color ?? resolveTextColor(comp.style, DEFAULT_TEXT_COLOR),
+        align: st?.align ?? "left",
+        lineHeight: LINE_HEIGHT
+      },
+      x + (box.xMm + 0.5) * pxPerMm,
+      y + box.yMm * pxPerMm,
+      Math.max(0, (box.widthMm - 1) * pxPerMm),
+      box.heightMm * pxPerMm,
+      fontFamily,
+      st?.verticalAlign ?? "middle"
+    );
+  }
+}
+function drawComponent(ctx, comp, pxPerMm, dpi, fontFamily, measurer) {
+  const x = comp.leftMm * pxPerMm;
+  const y = comp.topMm * pxPerMm;
+  const w = comp.widthMm * pxPerMm;
+  const h = comp.heightMm * pxPerMm;
+  const s = comp.style ?? {};
+  if (comp.grid) {
+    drawGrid(ctx, comp.grid, comp, x, y, w, h, pxPerMm, dpi, fontFamily, measurer);
+    return;
+  }
+  switch (comp.kind) {
+    case "text": {
+      const fontSizePt = s.fontSize ?? DEFAULT_FONT_PT;
+      const text = isRichText(comp) ? comp.richParagraphs.map((p) => (p.segments ?? []).map((seg) => seg.text ?? seg.field ?? "").join("")).join("\n") : Array.isArray(comp.lines) && comp.lines.length > 0 ? comp.lines.join("\n") : wrapText(comp.text ?? "", comp.widthMm, { fontSizePt }, measurer).join("\n");
+      drawTextBlock(
+        ctx,
+        {
+          text,
+          fontSizePx: resolveFontSize(s, dpi).fontSizePx,
+          bold: s.bold ?? false,
+          color: resolveTextColor(s),
+          align: s.align ?? "left",
+          lineHeight: resolveLineHeight(s)
+        },
+        x,
+        y,
+        w,
+        h,
+        fontFamily,
+        s.verticalAlign
+      );
+      break;
+    }
+    case "rect": {
+      const stroke = resolveStroke(s);
+      const borders = resolveBoxBorders(s);
+      if (s.backgroundColor) {
+        ctx.fillStyle = s.backgroundColor;
+        ctx.fillRect(x, y, w, h);
+      }
+      if (borders.inner) {
+        ctx.strokeStyle = stroke.color;
+        ctx.lineWidth = ptToPx(stroke.widthPt, dpi);
+        ctx.beginPath();
+        if (borders.top) {
+          ctx.moveTo(x, y);
+          ctx.lineTo(x + w, y);
+        }
+        if (borders.right) {
+          ctx.moveTo(x + w, y);
+          ctx.lineTo(x + w, y + h);
+        }
+        if (borders.bottom) {
+          ctx.moveTo(x + w, y + h);
+          ctx.lineTo(x, y + h);
+        }
+        if (borders.left) {
+          ctx.moveTo(x, y + h);
+          ctx.lineTo(x, y);
+        }
+        ctx.stroke();
+      }
+      break;
+    }
+    case "line": {
+      const stroke = resolveStroke({ ...s, borderColor: s.lineColor ?? s.borderColor });
+      ctx.strokeStyle = stroke.color;
+      ctx.lineWidth = ptToPx(stroke.widthPt, dpi);
+      ctx.beginPath();
+      ctx.moveTo(x, y + h / 2);
+      ctx.lineTo(x + w, y + h / 2);
+      ctx.stroke();
+      break;
+    }
+    case "ellipse": {
+      const stroke = resolveStroke(s);
+      ctx.strokeStyle = stroke.color;
+      ctx.lineWidth = ptToPx(stroke.widthPt, dpi);
+      if (s.backgroundColor) {
+        ctx.fillStyle = s.backgroundColor;
+        ctx.beginPath();
+        ctx.ellipse(x + w / 2, y + h / 2, w / 2, h / 2, 0, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.beginPath();
+      ctx.ellipse(x + w / 2, y + h / 2, w / 2, h / 2, 0, 0, Math.PI * 2);
+      ctx.stroke();
+      break;
+    }
+  }
+}
+function renderPlanToCanvas(plan, options = {}) {
+  const dpr = options.dpr ?? (typeof devicePixelRatio === "number" ? devicePixelRatio : 1);
+  const dpi = options.dpi ?? 96;
+  const pxPerMm = dpi / 96 * PX_PER_MM_BASE;
+  const fontFamily = options.fontFamily ?? '"Microsoft YaHei", sans-serif';
+  const measurer = options.measurer ?? heuristicMeasurer;
+  const start = Math.max(0, options.start ?? 0);
+  const end = Math.min(plan.pages.length - 1, options.end ?? plan.pages.length - 1);
+  const canvases = [];
+  for (let i = start; i <= end; i++) {
+    const page = plan.pages[i];
+    const { canvas, ctx } = createPageCanvas(page, dpr, dpi);
+    for (const comp of page.components) {
+      drawComponent(ctx, comp, pxPerMm, dpi, fontFamily, measurer);
+    }
+    canvases.push(canvas);
+  }
+  return { canvases };
+}
+function createCanvasPager(plan, options = {}) {
+  const dpr = options.dpr ?? (typeof devicePixelRatio === "number" ? devicePixelRatio : 1);
+  const dpi = options.dpi ?? 96;
+  const pxPerMm = dpi / 96 * PX_PER_MM_BASE;
+  const fontFamily = options.fontFamily ?? '"Microsoft YaHei", sans-serif';
+  const measurer = options.measurer ?? heuristicMeasurer;
+  const overscan = options.overscan ?? 1;
+  const gapPx = options.gapPx ?? 18;
+  const pagesPerFrame = options.pagesPerFrame ?? 1;
+  const pageHeightsPx = plan.pages.map((p) => p.pageHeightMm * pxPerMm);
+  const maxPageWidthPx = Math.max(1, ...plan.pages.map((p) => p.pageWidthMm * pxPerMm));
+  const windowState = { start: 0, end: -1 };
+  let viewport = null;
+  let contentEl = null;
+  let topSpacer = null;
+  let bottomSpacer = null;
+  let slots = [];
+  let raf = 0;
+  let queued = [];
+  function ensureLayout() {
+    const vp = viewport;
+    vp.innerHTML = "";
+    contentEl = document.createElement("div");
+    contentEl.style.cssText = `width:${maxPageWidthPx}px;margin:0 auto;`;
+    topSpacer = document.createElement("div");
+    bottomSpacer = document.createElement("div");
+    contentEl.appendChild(topSpacer);
+    slots = [];
+    const slotCount = Math.min(plan.pages.length, 3 + overscan * 2);
+    for (let i = 0; i < slotCount; i++) {
+      const slot = document.createElement("div");
+      slot.style.cssText = `margin:0 auto ${gapPx}px;box-shadow:0 2px 8px rgba(0,0,0,.35);background:#fff;`;
+      contentEl.appendChild(slot);
+      slots.push(slot);
+    }
+    contentEl.appendChild(bottomSpacer);
+    vp.appendChild(contentEl);
+  }
+  function drawPageInto(slot, pageIndex) {
+    const page = plan.pages[pageIndex];
+    const { widthPx: w, heightPx: h } = measurePageSizePx(page, dpi);
+    let canvas = slot.firstElementChild;
+    if (!canvas || canvas.tagName !== "CANVAS") {
+      canvas = document.createElement("canvas");
+      slot.innerHTML = "";
+      slot.appendChild(canvas);
+    }
+    canvas.width = Math.round(w * dpr);
+    canvas.height = Math.round(h * dpr);
+    canvas.style.width = `${w}px`;
+    canvas.style.height = `${h}px`;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.scale(dpr, dpr);
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, w, h);
+    for (const comp of page.components) {
+      drawComponent(ctx, comp, pxPerMm, dpi, fontFamily, measurer);
+    }
+    canvas.dataset.canvasPage = String(pageIndex);
+    slot.style.height = `${h}px`;
+    slot.style.width = `${w}px`;
+  }
+  function applyWindow(win) {
+    windowState.start = win.start;
+    windowState.end = win.end;
+    topSpacer.style.height = `${win.start * gapPx + pageHeightsPx.slice(0, win.start).reduce((s, h) => s + h, 0)}px`;
+    const below = plan.pages.length - 1 - win.end;
+    bottomSpacer.style.height = `${below * gapPx + pageHeightsPx.slice(win.end + 1).reduce((s, h) => s + h, 0)}px`;
+    const used = win.end - win.start + 1;
+    slots.forEach((slot, i) => {
+      if (i < used) {
+        slot.style.display = "";
+        const pageIndex = win.start + i;
+        slot.style.height = `${pageHeightsPx[pageIndex] ?? 0}px`;
+      } else {
+        slot.style.display = "none";
+      }
+    });
+    queued = [];
+    for (let i = win.start; i <= win.end; i++) {
+      const slot = slots[i - win.start];
+      if (!slot) continue;
+      const already = slot.firstElementChild;
+      if (already?.dataset?.canvasPage !== String(i)) queued.push(i);
+    }
+    scheduleFrame();
+  }
+  function scheduleFrame() {
+    if (raf || queued.length === 0) return;
+    raf = requestAnimationFrame(() => {
+      raf = 0;
+      let budget = Math.max(1, pagesPerFrame);
+      while (queued.length > 0 && budget-- > 0) {
+        const pageIndex = queued.shift();
+        const slot = slots[pageIndex - windowState.start];
+        if (slot) drawPageInto(slot, pageIndex);
+      }
+      if (queued.length > 0) scheduleFrame();
+    });
+  }
+  function onScroll() {
+    if (raf) return;
+    raf = requestAnimationFrame(() => {
+      raf = 0;
+      const vp = viewport;
+      const win = computePageWindow({
+        pageHeightsPx,
+        viewportHeightPx: vp.clientHeight,
+        scrollTopPx: vp.scrollTop,
+        overscan,
+        gapPx
+      });
+      if (win.start !== windowState.start || win.end !== windowState.end) {
+        applyWindow(win);
+      } else {
+        scheduleFrame();
+      }
+    });
+  }
+  return {
+    attach(vp) {
+      viewport = vp;
+      ensureLayout();
+      vp.addEventListener("scroll", onScroll, { passive: true });
+      onScroll();
+    },
+    destroy() {
+      if (raf) cancelAnimationFrame(raf);
+      raf = 0;
+      viewport?.removeEventListener("scroll", onScroll);
+      queued = [];
+      contentEl?.remove();
+      viewport = null;
+    },
+    window() {
+      return { ...windowState };
+    }
+  };
+}
+
+// src/compat/jh4j-template.ts
+function num(v, fallback) {
+  return typeof v === "number" && Number.isFinite(v) ? v : fallback;
+}
+function str(v, fallback = "") {
+  return typeof v === "string" ? v : fallback;
+}
+function isRaw(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function mapAlign(h) {
+  if (h === "Center") return "center";
+  if (h === "Right") return "right";
+  return "left";
+}
+function mapVAlign(v) {
+  if (v === "Center") return "middle";
+  if (v === "Bottom") return "bottom";
+  return "top";
+}
+function baseStyle(node) {
+  const fontSize = parseFloat(str(node["FontSize"], "10.5"));
+  return {
+    fontSize: Number.isFinite(fontSize) ? fontSize : 10.5,
+    fontFamily: str(node["FontFamily"], "\u9ED1\u4F53") || void 0,
+    bold: str(node["FontWeight"]) === "bold" || void 0,
+    italic: str(node["FontStyle"]) === "italic" || void 0,
+    underline: node["Underline"] === true || void 0,
+    color: str(node["FontColor"]) || void 0,
+    backgroundColor: str(node["BackgroundColor"]) || void 0,
+    align: mapAlign(str(node["HorAlignment"], "Left")),
+    verticalAlign: mapVAlign(str(node["VertAlignment"], "Top")),
+    lineHeight: (() => {
+      const lh = parseFloat(str(node["RowSpace"], "1"));
+      return Number.isFinite(lh) && lh !== 1 ? lh : void 0;
+    })(),
+    borderColor: str(node["BorderColor"]) || void 0,
+    borderTop: node["BorderTop"] !== false,
+    borderRight: node["BorderRight"] !== false,
+    borderBottom: node["BorderBottom"] !== false,
+    borderLeft: node["BorderLeft"] !== false
+  };
+}
+function convertElement(node, warnings) {
+  const uitype = str(node["uitype"]);
+  const comp = {
+    kind: "text",
+    leftMm: num(node["left"], 0),
+    topMm: num(node["top"], 0),
+    widthMm: num(node["width"], 40),
+    heightMm: num(node["height"], 8),
+    nid: str(node["nid"]) || void 0,
+    style: baseStyle(node)
+  };
+  switch (uitype) {
+    case "text": {
+      comp.kind = "text";
+      const text = node["Text"] ?? node["text"] ?? node["Value"];
+      comp.text = text == null ? "" : String(text);
+      const lines = node["Lines"] ?? node["lines"];
+      if (Array.isArray(lines)) {
+        comp.lines = lines.map((l) => String(l));
+      }
+      return comp;
+    }
+    case "richtext":
+      comp.kind = "text";
+      comp.text = str(node["Text"]);
+      warnings.push(`\u5BCC\u6587\u672C ${comp.nid ?? ""} \u5BFC\u5165\u4E3A\u7EAF\u6587\u672C\uFF08\u7248\u5F0F\u7EC6\u8282\u53EF\u80FD\u635F\u5931\uFF09`);
+      return comp;
+    case "image":
+    case "barcode":
+    case "qrcode":
+    case "chart":
+      comp.kind = uitype === "image" ? "image" : uitype;
+      comp.fallbackText = `[${uitype}]`;
+      warnings.push(`\u56FE\u7247\u7C7B\u7EC4\u4EF6 ${comp.nid ?? ""} \u9700\u8FD0\u884C\u65F6\u6570\u636E\uFF08imageData\uFF09\uFF0C\u5DF2\u5BFC\u5165\u4E3A\u5360\u4F4D`);
+      return comp;
+    case "table": {
+      comp.kind = "rect";
+      const cellsRaw = node["Cells"] ?? node["cells"];
+      if (Array.isArray(cellsRaw)) {
+        const grid = {
+          cells: cellsRaw.map(
+            (row) => Array.isArray(row) ? row.map((cell) => ({
+              text: isRaw(cell) ? str(cell["Text"] ?? cell["text"]) : "",
+              colSpan: isRaw(cell) ? num(cell["ColSpan"], 1) : 1
+            })) : []
+          )
+        };
+        comp.grid = grid;
+      } else {
+        comp.fallbackText = "[table]";
+        warnings.push(`\u8868\u683C ${comp.nid ?? ""} \u7F3A\u5C11 Cells\uFF0C\u5BFC\u5165\u4E3A\u7A7A\u6846`);
+      }
+      return comp;
+    }
+    case "subreport":
+      warnings.push(`\u5B50\u62A5\u8868 ${comp.nid ?? ""} \u6682\u4E0D\u652F\u6301\u5BFC\u5165\uFF0C\u5DF2\u8DF3\u8FC7`);
+      return null;
+    default: {
+      if (str(node["ShapeType"]) === "hline" || uitype === "hline") {
+        comp.kind = "line";
+        return comp;
+      }
+      if (uitype === "vline") {
+        comp.kind = "line";
+        return comp;
+      }
+      if (uitype === "rect" || uitype === "oval" || uitype === "shape") {
+        comp.kind = uitype === "oval" ? "ellipse" : "rect";
+        return comp;
+      }
+      warnings.push(`\u672A\u77E5\u7EC4\u4EF6\u7C7B\u578B ${uitype}\uFF0C\u5DF2\u8DF3\u8FC7`);
+      return null;
+    }
+  }
+}
+function importJh4jTemplateContent(content) {
+  const warnings = [];
+  let root = null;
+  if (typeof content === "string") {
+    try {
+      const parsed = JSON.parse(content);
+      if (isRaw(parsed)) root = parsed;
+    } catch {
+      return {
+        template: { pages: [] },
+        warnings: ["content \u4E0D\u662F\u5408\u6CD5 JSON"]
+      };
+    }
+  } else if (isRaw(content)) {
+    root = content;
+  }
+  if (!root) {
+    return { template: { pages: [] }, warnings: ["content \u4E3A\u7A7A"] };
+  }
+  const globalConfig = isRaw(root["GlobalConfig"]) ? root["GlobalConfig"] : {};
+  const defaultWidth = num(globalConfig["paperWidthMm"], 210);
+  const defaultHeight = num(globalConfig["paperHeightMm"], 297);
+  const defaultMargins = {
+    top: num(globalConfig["marginTop"], 10),
+    bottom: num(globalConfig["marginBottom"], 10),
+    left: num(globalConfig["marginLeft"], 10),
+    right: num(globalConfig["marginRight"], 10)
+  };
+  const pageNodes = Array.isArray(root["children"]) ? root["children"].filter((c) => isRaw(c) && str(c["uitype"]) === "page") : [];
+  if (pageNodes.length === 0) {
+    warnings.push("content \u4E2D\u6CA1\u6709 uitype=page \u7684\u9875\u8282\u70B9");
+  }
+  const pages = pageNodes.map((raw) => {
+    const node = raw;
+    const elements = Array.isArray(node["children"]) ? node["children"] : [];
+    const components = [];
+    for (const el of elements) {
+      if (!isRaw(el)) continue;
+      const converted = convertElement(el, warnings);
+      if (converted) components.push(converted);
+    }
+    return {
+      widthMm: num(node["width"], defaultWidth),
+      heightMm: num(node["DesignHeight"], defaultHeight),
+      marginTopMm: num(node["MarginTop"], defaultMargins.top),
+      marginBottomMm: num(node["MarginBottom"], defaultMargins.bottom),
+      marginLeftMm: num(node["MarginLeft"], defaultMargins.left),
+      marginRightMm: num(node["MarginRight"], defaultMargins.right),
+      components
+    };
+  });
+  if (pages.length === 0) {
+    warnings.push("\u8F6C\u6362\u7ED3\u679C\u4E3A\u7A7A\u9875\uFF0C\u5DF2\u56DE\u9000\u4E00\u5F20\u7A7A\u767D\u9875");
+    pages.push({
+      widthMm: defaultWidth,
+      heightMm: defaultHeight,
+      ...defaultMargins,
+      components: []
+    });
+  }
+  return { template: { pages }, warnings };
+}
+
+// src/builder/template-builder.ts
+function resolvePaper(paper, heightArg, landscape) {
+  let widthMm;
+  let heightMm;
+  if (typeof paper === "string") {
+    const preset = PAPER_SIZES[paper];
+    if (!preset) throw new Error(`\u672A\u77E5\u7EB8\u5F20\u9884\u8BBE "${paper}"\uFF08\u53EF\u7528\uFF1A${Object.keys(PAPER_SIZES).join("/")}\uFF09`);
+    widthMm = preset.widthMm;
+    heightMm = preset.heightMm;
+  } else if (typeof paper === "number") {
+    widthMm = paper;
+    heightMm = heightArg ?? 297;
+  } else {
+    widthMm = paper.widthMm;
+    heightMm = paper.heightMm;
+  }
+  return landscape ? { widthMm: heightMm, heightMm: widthMm } : { widthMm, heightMm };
+}
+var TemplateBuilder = class {
+  constructor() {
+    this.pages = [];
+    this.pending = null;
+  }
+  /**
+   * 新建页。纸张支持三种写法：
+   * - 预设名：.page("a4", { landscape: true, margins: {...} })
+   * - 数字：.page(210, 297)（第三参数兼容旧 margins 对象或新 options）
+   * - 对象：.page({ widthMm: 210, heightMm: 297 })
+   */
+  page(paper = "a4", optionsOrHeight = {}, maybeOptions) {
+    this.collect();
+    const legacyMargins = maybeOptions != null && !("margins" in maybeOptions) && !("landscape" in maybeOptions) && ("marginTopMm" in maybeOptions || "marginBottomMm" in maybeOptions || "marginLeftMm" in maybeOptions || "marginRightMm" in maybeOptions);
+    const options = legacyMargins ? { margins: maybeOptions } : maybeOptions ?? {};
+    const { widthMm, heightMm } = resolvePaper(
+      paper,
+      typeof optionsOrHeight === "number" ? optionsOrHeight : void 0,
+      options.landscape
+    );
+    const margins = options.margins ?? {};
+    this.pending = new PageBuilder(this, {
+      widthMm,
+      heightMm,
+      marginTopMm: margins.marginTopMm ?? 10,
+      marginBottomMm: margins.marginBottomMm ?? 10,
+      marginLeftMm: margins.marginLeftMm ?? 10,
+      marginRightMm: margins.marginRightMm ?? 10
+    });
+    return this.pending;
+  }
+  collect() {
+    if (this.pending) {
+      this.pages.push(this.pending.buildPage());
+      this.pending = null;
+    }
+  }
+  build() {
+    this.collect();
+    if (this.pages.length === 0) {
+      throw new Error("\u6A21\u677F\u81F3\u5C11\u9700\u8981\u4E00\u9875\uFF1A\u5148\u8C03\u7528 .page() \u6DFB\u52A0\u5185\u5BB9");
+    }
+    return { pages: this.pages };
+  }
+};
+var PageBuilder = class {
+  constructor(parent, page) {
+    this.parent = parent;
+    this.page = page;
+    this.components = [];
+  }
+  text(content, geometry = {}, style = {}) {
+    this.components.push({
+      kind: "text",
+      leftMm: geometry.leftMm ?? 0,
+      topMm: geometry.topMm ?? 0,
+      widthMm: geometry.widthMm ?? 60,
+      heightMm: geometry.heightMm ?? 8,
+      text: content,
+      style
+    });
+    return this;
+  }
+  list(dataset, geometry, columns, options = {}) {
+    this.components.push({
+      kind: "list",
+      leftMm: geometry.leftMm ?? 10,
+      topMm: geometry.topMm ?? 30,
+      widthMm: geometry.widthMm ?? 180,
+      dataset,
+      columns,
+      ...options
+    });
+    return this;
+  }
+  rect(geometry, style = {}) {
+    this.components.push({ kind: "rect", ...geometry, style });
+    return this;
+  }
+  line(leftMm, topMm, widthMm, style = {}) {
+    this.components.push({
+      kind: "line",
+      leftMm,
+      topMm,
+      widthMm,
+      heightMm: 0.5,
+      style
+    });
+    return this;
+  }
+  barcode(content, geometry) {
+    this.components.push({
+      kind: "barcode",
+      leftMm: geometry.leftMm ?? 0,
+      topMm: geometry.topMm ?? 0,
+      widthMm: geometry.widthMm ?? 40,
+      heightMm: geometry.heightMm ?? 12,
+      fallbackText: content
+    });
+    return this;
+  }
+  qrcode(content, sizeMm, leftMm, topMm) {
+    this.components.push({
+      kind: "qrcode",
+      leftMm,
+      topMm,
+      widthMm: sizeMm,
+      heightMm: sizeMm,
+      fallbackText: content
+    });
+    return this;
+  }
+  buildPage() {
+    return { ...this.page, components: this.components };
+  }
+  done() {
+    return this.parent;
+  }
+  build() {
+    return this.done().build();
+  }
+};
+function createTemplate() {
+  return new TemplateBuilder();
+}
+
+exports.CSS_DPI = CSS_DPI;
+exports.DEFAULT_BORDER_PT = DEFAULT_BORDER_PT;
+exports.DEFAULT_FONT_PT = DEFAULT_FONT_PT;
+exports.DEFAULT_STROKE_COLOR = DEFAULT_STROKE_COLOR;
+exports.DEFAULT_TEXT_COLOR = DEFAULT_TEXT_COLOR;
+exports.LINE_HEIGHT = LINE_HEIGHT;
+exports.MM_PER_INCH = MM_PER_INCH;
+exports.PAPER_SIZES = PAPER_SIZES;
+exports.PageBuilder = PageBuilder;
+exports.RENDER_PLAN_SCHEMA_VERSION = RENDER_PLAN_SCHEMA_VERSION;
+exports.SCHEMA_VERSION_JH4J = SCHEMA_VERSION_JH4J;
+exports.SCHEMA_VERSION_LOCAL = SCHEMA_VERSION_LOCAL;
+exports.SCHEMA_VERSION_MACH = SCHEMA_VERSION_MACH;
+exports.TemplateBuilder = TemplateBuilder;
+exports.assertRenderPlan = assertRenderPlan;
+exports.charWidthEm = charWidthEm;
+exports.classOf = classOf;
+exports.computePageWindow = computePageWindow;
+exports.createCanvasMeasurer = createCanvasMeasurer;
+exports.createCanvasPager = createCanvasPager;
+exports.createHeuristicMeasurer = createHeuristicMeasurer;
+exports.createTemplate = createTemplate;
+exports.heuristicMeasurer = heuristicMeasurer;
+exports.importJh4jTemplateContent = importJh4jTemplateContent;
+exports.isImageBackedComponent = isImageBackedComponent;
+exports.isRichText = isRichText;
+exports.measurePageSizePx = measurePageSizePx;
+exports.measureTextMm = measureTextMm;
+exports.mmToPx = mmToPx;
+exports.mmToPxFactor = mmToPxFactor;
+exports.paginateTemplate = paginateTemplate;
+exports.planFontSizePx = planFontSizePx;
+exports.ptToPx = ptToPx;
+exports.pxToMm = pxToMm;
+exports.renderComponent = renderComponent;
+exports.renderPage = renderPage;
+exports.renderPlan = renderPlan;
+exports.renderPlanToCanvas = renderPlanToCanvas;
+exports.resolveBoxBorders = resolveBoxBorders;
+exports.resolveFontSize = resolveFontSize;
+exports.resolveGridLayout = resolveGridLayout;
+exports.resolveLineHeight = resolveLineHeight;
+exports.resolvePaper = resolvePaper;
+exports.resolveStroke = resolveStroke;
+exports.resolveTextColor = resolveTextColor;
+exports.round = round;
+exports.toRenderPlan = toRenderPlan;
+exports.validateComponent = validateComponent;
+exports.validatePage = validatePage;
+exports.validateRenderPlan = validateRenderPlan;
+exports.wrapText = wrapText;