@canvas-components/print-design 0.1.1 → 0.1.2

package/dist/index.cjs

@@ -727,6 +727,21 @@ function resolveTableDataSource(data, path) {
 }
 
 // src/model/table-options.ts
+function resolveTableCellOverflow(column, element) {
+  return column.cellOverflow ?? (column.ellipsis == null ? element.cellOverflow ?? "wrap" : column.ellipsis ? "ellipsis" : "wrap");
+}
+function resolveTableCellPadding(column, element) {
+  const value = (side, fallback) => Math.max(
+    0,
+    column.cellPadding?.[side] ?? element.cellPadding?.[side] ?? fallback
+  );
+  return {
+    top: value("top", 0),
+    right: value("right", 4),
+    bottom: value("bottom", 0),
+    left: value("left", 4)
+  };
+}
 function resolvePrintTableOptions(element, data) {
   const pixelsPerMillimeter = 96 / 25.4;
   const columns = (items) => items.map((column) => ({
@@ -736,7 +751,8 @@ function resolvePrintTableOptions(element, data) {
         ([, value]) => value !== void 0
       )
     ) : void 0,
-    ellipsis: column.ellipsis ?? element.cellOverflow === "ellipsis",
+    cellOverflow: resolveTableCellOverflow(column, element),
+    ellipsis: resolveTableCellOverflow(column, element) === "ellipsis",
     summary: element.showSummary === false ? false : column.summary,
     summaryTitle: element.showSummary === false ? void 0 : column.summaryTitle,
     children: column.children ? columns(column.children) : void 0
@@ -855,6 +871,249 @@ function computePrintTableSummaryValues(rows, columns) {
   return result;
 }
 
+// src/model/table-layout.ts
+function tableHeaderDepth(columns) {
+  return Math.max(
+    0,
+    ...columns.filter((column) => !column.hidden).map(
+      (column) => 1 + tableHeaderDepth(column.children?.length ? column.children : [])
+    )
+  );
+}
+function tableHeaderCells(element) {
+  const depth = tableHeaderDepth(element.columns);
+  const cells = [];
+  const walk = (columns, level, start) => {
+    let index = start;
+    for (const column of columns) {
+      if (column.hidden) continue;
+      const children = column.children?.filter((item) => !item.hidden) ?? [];
+      const span = children.length ? tableLeafColumns(children).filter((item) => !item.hidden).length : 1;
+      if (!span) continue;
+      cells.push({
+        rowIndex: level,
+        columnIndex: index,
+        rowSpan: children.length ? 1 : depth - level,
+        colSpan: span,
+        column
+      });
+      if (children.length) walk(children, level + 1, index);
+      index += span;
+    }
+  };
+  walk(element.columns, 0, 0);
+  for (const merge of element.headerCells ?? []) {
+    const rowSpan = Math.max(1, merge.rowSpan ?? 1);
+    const colSpan = Math.max(1, merge.colSpan ?? 1);
+    if (rowSpan * colSpan < 2) continue;
+    const anchor = cells.find(
+      (cell) => cell.rowIndex === merge.rowIndex && cell.columnIndex === merge.columnIndex
+    );
+    if (!anchor) continue;
+    const inside = (cell) => cell.rowIndex >= merge.rowIndex && cell.rowIndex + cell.rowSpan <= merge.rowIndex + rowSpan && cell.columnIndex >= merge.columnIndex && cell.columnIndex + cell.colSpan <= merge.columnIndex + colSpan;
+    const intersects = (cell) => cell.rowIndex < merge.rowIndex + rowSpan && cell.rowIndex + cell.rowSpan > merge.rowIndex && cell.columnIndex < merge.columnIndex + colSpan && cell.columnIndex + cell.colSpan > merge.columnIndex;
+    if (cells.some((cell) => intersects(cell) && !inside(cell))) continue;
+    const retained = cells.filter((cell) => !intersects(cell));
+    cells.length = 0;
+    cells.push(...retained, { ...anchor, rowSpan, colSpan });
+  }
+  return cells.sort(
+    (a, b) => a.rowIndex - b.rowIndex || a.columnIndex - b.columnIndex
+  );
+}
+function tableContentHeight(element, rowCount, showSummary = true) {
+  const depth = element.showHeader === false ? 0 : tableHeaderDepth(element.columns);
+  const header = depth * (element.headerRowHeight ?? 9);
+  const rows = Math.max(
+    rowCount,
+    element.fillEmptyRows ? element.printRowCount ?? 0 : 0
+  );
+  const summary = showSummary && element.showSummary !== false && tableLeafColumns(element.columns).some(
+    (column) => !!column.summary || column.summaryTitle != null
+  ) ? element.summaryRowHeight ?? element.rowHeight ?? 8 : 0;
+  return header + rows * (element.rowHeight ?? 8) + summary;
+}
+function resolvedTableHeight(element, data = {}) {
+  const rows = resolveTableRows(element, data);
+  const limit = Math.max(0, Math.floor(element.printRowCount ?? 0));
+  if (element.rotation) return element.height;
+  if (!rows.length && !element.fillEmptyRows) return element.height;
+  return tableContentHeight(
+    element,
+    limit ? Math.min(rows.length, limit) : rows.length
+  );
+}
+function coveringTableCell(cells, rowIndex, columnIndex) {
+  let covering;
+  let largest = 0;
+  for (const cell of cells ?? []) {
+    const rowSpan = Math.max(1, cell.rowSpan ?? 1);
+    const colSpan = Math.max(1, cell.colSpan ?? 1);
+    if (rowIndex < cell.rowIndex || rowIndex >= cell.rowIndex + rowSpan || columnIndex < cell.columnIndex || columnIndex >= cell.columnIndex + colSpan)
+      continue;
+    if (rowSpan * colSpan > largest) {
+      covering = cell;
+      largest = rowSpan * colSpan;
+    }
+  }
+  return covering;
+}
+function resolveTableCells(element, rows, columns) {
+  const cells = [...element.cells ?? []];
+  const rule = element.mergeCell;
+  if (!rule || !rows.length || !columns.length) return cells;
+  const samePath = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+  const valueKey = (value) => value == null ? "" : typeof value === "object" ? JSON.stringify(value) : String(value);
+  const overlaps = (row, column, rowSpan, colSpan) => cells.some(
+    (cell) => ((cell.rowSpan ?? 1) > 1 || (cell.colSpan ?? 1) > 1) && row < cell.rowIndex + Math.max(1, cell.rowSpan ?? 1) && row + rowSpan > cell.rowIndex && column < cell.columnIndex + Math.max(1, cell.colSpan ?? 1) && column + colSpan > cell.columnIndex
+  );
+  const rowRule = rule.row;
+  if (rowRule?.keys?.length) {
+    const targets = rowRule.columns?.length ? rowRule.columns : rowRule.keys;
+    const groupKey = (row) => JSON.stringify(
+      rowRule.keys.map((key) => valueKey(readTableCell(row, key)))
+    );
+    for (const [columnIndex, column] of columns.entries()) {
+      if (!targets.some((key) => samePath(column.dataIndex, key))) continue;
+      let rowIndex = 0;
+      while (rowIndex < rows.length) {
+        if (overlaps(rowIndex, columnIndex, 1, 1)) {
+          rowIndex++;
+          continue;
+        }
+        const current = groupKey(rows[rowIndex]);
+        let rowSpan = 1;
+        while (rowIndex + rowSpan < rows.length && groupKey(rows[rowIndex + rowSpan]) === current && !overlaps(rowIndex + rowSpan, columnIndex, 1, 1))
+          rowSpan++;
+        if (rowSpan > 1)
+          cells.push({
+            ...cells.find(
+              (cell) => cell.rowIndex === rowIndex && cell.columnIndex === columnIndex
+            ),
+            rowIndex,
+            columnIndex,
+            rowSpan
+          });
+        rowIndex += rowSpan;
+      }
+    }
+  }
+  const columnRule = rule.column;
+  if (columnRule?.keys?.length) {
+    for (const [rowIndex, row] of rows.entries()) {
+      let columnIndex = 0;
+      while (columnIndex < columns.length) {
+        const column = columns[columnIndex];
+        if (!columnRule.keys.some((key) => samePath(column.dataIndex, key)) || overlaps(rowIndex, columnIndex, 1, 1)) {
+          columnIndex++;
+          continue;
+        }
+        const current = valueKey(readTableCell(row, column.dataIndex));
+        let colSpan = 1;
+        while (columnIndex + colSpan < columns.length) {
+          const nextIndex = columnIndex + colSpan;
+          const next = columns[nextIndex];
+          if (!columnRule.keys.some((key) => samePath(next.dataIndex, key)) || valueKey(readTableCell(row, next.dataIndex)) !== current || overlaps(rowIndex, nextIndex, 1, 1))
+            break;
+          colSpan++;
+        }
+        if (colSpan > 1)
+          cells.push({
+            ...cells.find(
+              (cell) => cell.rowIndex === rowIndex && cell.columnIndex === columnIndex
+            ),
+            rowIndex,
+            columnIndex,
+            colSpan
+          });
+        columnIndex += colSpan;
+      }
+    }
+  }
+  return cells;
+}
+function expandTableCellSelection(cells, selection) {
+  let firstRow = Math.min(selection.startRow, selection.endRow);
+  let lastRow = Math.max(selection.startRow, selection.endRow);
+  let firstColumn = Math.min(selection.startColumn, selection.endColumn);
+  let lastColumn = Math.max(selection.startColumn, selection.endColumn);
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const cell of cells ?? []) {
+      const endRow = cell.rowIndex + Math.max(1, cell.rowSpan ?? 1) - 1;
+      const endColumn = cell.columnIndex + Math.max(1, cell.colSpan ?? 1) - 1;
+      if (cell.rowIndex > lastRow || endRow < firstRow || cell.columnIndex > lastColumn || endColumn < firstColumn)
+        continue;
+      const nextFirstRow = Math.min(firstRow, cell.rowIndex);
+      const nextLastRow = Math.max(lastRow, endRow);
+      const nextFirstColumn = Math.min(firstColumn, cell.columnIndex);
+      const nextLastColumn = Math.max(lastColumn, endColumn);
+      changed = changed || nextFirstRow !== firstRow || nextLastRow !== lastRow || nextFirstColumn !== firstColumn || nextLastColumn !== lastColumn;
+      firstRow = nextFirstRow;
+      lastRow = nextLastRow;
+      firstColumn = nextFirstColumn;
+      lastColumn = nextLastColumn;
+    }
+  }
+  return { firstRow, lastRow, firstColumn, lastColumn };
+}
+function tableBorderVisible(element, data, cell, row) {
+  const path = cell?.borderPath || (element.borderMode === "binding" ? element.borderPath : void 0);
+  if (path) {
+    const local = row ? resolvePrintDesignDataPath(row, path) : void 0;
+    const value = local === void 0 ? resolvePrintDesignDataPath(data, path) : local;
+    return value !== false && value !== 0 && value !== "" && value != null;
+  }
+  return element.borderMode !== "hide" && element.borderMode !== "binding";
+}
+
+// src/rendering/elements/image.ts
+var drawImageElement = (element, context) => {
+  const { ctx, x, y, width, height, onImageLoad } = context;
+  const image = resolveImage(element.src, onImageLoad);
+  if (image?.complete && image.naturalWidth > 0) {
+    drawImageFit(ctx, image, x, y, width, height, element.fit ?? "contain");
+  }
+};
+var imageCache = /* @__PURE__ */ new Map();
+var pendingImages = /* @__PURE__ */ new Set();
+function resolveImage(src, onLoad) {
+  if (typeof Image === "undefined" || !src) return void 0;
+  const cached = imageCache.get(src);
+  if (cached) return cached;
+  if (pendingImages.has(src)) return void 0;
+  pendingImages.add(src);
+  const image = new Image();
+  image.onload = () => {
+    pendingImages.delete(src);
+    imageCache.set(src, image);
+    onLoad?.();
+  };
+  image.onerror = () => pendingImages.delete(src);
+  image.src = src;
+  return void 0;
+}
+function drawImageFit(ctx, image, x, y, width, height, fit) {
+  if (fit === "fill") {
+    ctx.drawImage(image, x, y, width, height);
+    return;
+  }
+  const ratio = fit === "cover" ? Math.max(width / image.naturalWidth, height / image.naturalHeight) : Math.min(width / image.naturalWidth, height / image.naturalHeight);
+  const drawWidth = image.naturalWidth * ratio;
+  const drawHeight = image.naturalHeight * ratio;
+  const drawX = x + (width - drawWidth) / 2;
+  const drawY = y + (height - drawHeight) / 2;
+  ctx.save();
+  if (fit === "cover") {
+    ctx.beginPath();
+    ctx.rect(x, y, width, height);
+    ctx.clip();
+  }
+  ctx.drawImage(image, drawX, drawY, drawWidth, drawHeight);
+  ctx.restore();
+}
+
 // src/rendering/elements/table.ts
 function cellText(value) {
   if (value == null) return "";
@@ -878,18 +1137,269 @@ function displayCell(value, column) {
   const parts = formatted.split(".");
   if (separator !== false)
     parts[0] = parts[0].replace(
-      /B(?=(d{3})+(?!d))/g,
+      /\B(?=(\d{3})+(?!\d))/g,
       typeof separator === "string" ? separator : ","
     );
   return (column.moneyFormat?.symbol ?? "") + parts.join(".");
 }
-function drawTableElement(element, { ctx, x, y, width, scale, data }) {
+function wrapCellText(ctx, value, width) {
+  const lines = [];
+  for (const paragraph of value.split(/\r?\n/)) {
+    let line = "";
+    for (const character of paragraph) {
+      if (line && ctx.measureText(line + character).width > width) {
+        lines.push(line);
+        line = "";
+      }
+      line += character;
+    }
+    lines.push(line);
+  }
+  return lines;
+}
+function ellipsisCellText(ctx, value, width) {
+  if (ctx.measureText(value).width <= width) return value;
+  const suffix = "...";
+  if (ctx.measureText(suffix).width > width) return "";
+  let text = "";
+  for (const character of value) {
+    if (ctx.measureText(text + character + suffix).width > width) break;
+    text += character;
+  }
+  return text + suffix;
+}
+function drawTypedCell(ctx, column, value, x, y, width, height, onImageLoad) {
+  const content = value && typeof value === "object" && !Array.isArray(value) ? value : void 0;
+  const type = typeof content?.type === "string" ? content.type : column.cellType;
+  const payload = content?.value ?? content?.src ?? content?.text ?? value;
+  if (!type || ["text", "emoji", "money", "link", "json"].includes(type))
+    return false;
+  const inset = Math.min(6, width / 8, height / 8);
+  ctx.save();
+  try {
+    if (type === "chart") {
+      if (typeof content?.chartType !== "string") return false;
+      try {
+        chart.drawCanvasChartToCanvas({
+          ctx,
+          x: x + inset,
+          y: y + inset,
+          width: Math.max(1, width - inset * 2),
+          height: Math.max(1, height - inset * 2),
+          type: content.chartType,
+          option: content.option ?? payload,
+          simple: true
+        });
+      } catch {
+        return false;
+      }
+      return true;
+    }
+    if (type === "timeline") {
+      const items = Array.isArray(content?.items) ? content.items : Array.isArray(payload) ? payload : [];
+      if (!items.length) return false;
+      ctx.strokeStyle = "#94a3b8";
+      ctx.fillStyle = "#1677ff";
+      ctx.beginPath();
+      ctx.moveTo(x + inset + 3, y + inset);
+      ctx.lineTo(x + inset + 3, y + height - inset);
+      ctx.stroke();
+      ctx.font = `${Math.min(12, Math.max(8, height / items.length / 2))}px sans-serif`;
+      ctx.textAlign = "left";
+      ctx.textBaseline = "middle";
+      items.slice(0, Math.max(1, Math.floor(height / 10))).forEach((item, index, shown) => {
+        const mid = y + (index + 0.5) * height / shown.length;
+        ctx.beginPath();
+        ctx.arc(x + inset + 3, mid, 2, 0, Math.PI * 2);
+        ctx.fill();
+        const label = item && typeof item === "object" ? cellText(
+          item.title ?? item.content
+        ) : cellText(item);
+        ctx.fillText(
+          label,
+          x + inset + 10,
+          mid,
+          Math.max(1, width - inset * 2 - 10)
+        );
+      });
+      return true;
+    }
+    if (type === "image") {
+      drawImageElement(
+        {
+          id: "table-cell-image",
+          type: "image",
+          x: 0,
+          y: 0,
+          width: 1,
+          height: 1,
+          src: cellText(payload),
+          fit: "contain"
+        },
+        {
+          ctx,
+          x: x + inset,
+          y: y + inset,
+          width: width - inset * 2,
+          height: height - inset * 2,
+          centerX: x + width / 2,
+          centerY: y + height / 2,
+          scale: 1,
+          data: {},
+          onImageLoad
+        }
+      );
+      return true;
+    }
+    if (type === "qrcode") {
+      const size = Math.max(1, Math.min(width, height) - inset * 2);
+      try {
+        qrcode.drawQrCodeToCanvas({
+          ctx,
+          x: x + (width - size) / 2,
+          y: y + (height - size) / 2,
+          width: size,
+          height: size,
+          value: cellText(payload)
+        });
+      } catch {
+        return false;
+      }
+      return true;
+    }
+    if (type === "barcode") {
+      try {
+        barcode.drawBarcodeToCanvas({
+          ctx,
+          x: x + inset,
+          y: y + inset,
+          width: Math.max(1, width - inset * 2),
+          height: Math.max(1, height - inset * 2),
+          value: cellText(payload),
+          format: "code128",
+          displayValue: false
+        });
+      } catch {
+        return false;
+      }
+      return true;
+    }
+    if (type === "color") {
+      ctx.fillStyle = cellText(payload) || "transparent";
+      ctx.fillRect(
+        x + inset,
+        y + inset,
+        Math.max(0, width - inset * 2),
+        Math.max(0, height - inset * 2)
+      );
+      return true;
+    }
+    if (type === "progress") {
+      const percent = Math.max(0, Math.min(100, Number(payload) || 0));
+      const barY = y + height / 2 - 3;
+      ctx.fillStyle = "#e5e7eb";
+      ctx.fillRect(x + inset, barY, Math.max(0, width - inset * 2), 6);
+      ctx.fillStyle = "#1677ff";
+      ctx.fillRect(
+        x + inset,
+        barY,
+        Math.max(0, width - inset * 2) * percent / 100,
+        6
+      );
+      return true;
+    }
+    if (["checkbox", "radio", "switch"].includes(type)) {
+      const checked = payload === true || payload === 1 || payload === "true";
+      const size = Math.min(14, height - inset * 2);
+      const centerX = x + width / 2, centerY = y + height / 2;
+      ctx.strokeStyle = checked ? "#1677ff" : "#6b7280";
+      ctx.fillStyle = checked ? "#1677ff" : "#ffffff";
+      ctx.lineWidth = 1.5;
+      if (type === "radio") {
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, size / 2, 0, Math.PI * 2);
+        ctx.stroke();
+        if (checked) {
+          ctx.beginPath();
+          ctx.arc(centerX, centerY, size / 4, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      } else if (type === "switch") {
+        ctx.fillRect(
+          centerX - size,
+          centerY - size / 3,
+          size * 2,
+          size * 2 / 3
+        );
+        ctx.fillStyle = "#ffffff";
+        ctx.beginPath();
+        ctx.arc(
+          centerX + (checked ? size / 2 : -size / 2),
+          centerY,
+          size / 3,
+          0,
+          Math.PI * 2
+        );
+        ctx.fill();
+      } else {
+        ctx.strokeRect(centerX - size / 2, centerY - size / 2, size, size);
+        if (checked) {
+          ctx.fillStyle = "#1677ff";
+          ctx.fillRect(
+            centerX - size / 2 + 3,
+            centerY - size / 2 + 3,
+            size - 6,
+            size - 6
+          );
+        }
+      }
+      return true;
+    }
+    if (type === "rate") {
+      ctx.fillStyle = "#f59e0b";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(
+        "\u2605".repeat(Math.max(0, Math.min(5, Math.round(Number(payload) || 0)))) + "\u2606".repeat(
+          5 - Math.max(0, Math.min(5, Math.round(Number(payload) || 0)))
+        ),
+        x + width / 2,
+        y + height / 2,
+        width - inset * 2
+      );
+      return true;
+    }
+    if (type === "tag" || type === "button") {
+      ctx.fillStyle = type === "tag" ? "#e6f4ff" : "#1677ff";
+      ctx.fillRect(
+        x + inset,
+        y + inset,
+        Math.max(0, width - inset * 2),
+        Math.max(0, height - inset * 2)
+      );
+      ctx.fillStyle = type === "tag" ? "#1677ff" : "#ffffff";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(
+        cellText(payload),
+        x + width / 2,
+        y + height / 2,
+        width - inset * 4
+      );
+      return true;
+    }
+    return false;
+  } finally {
+    ctx.restore();
+  }
+}
+function drawTableElement(element, { ctx, x, y, width, scale, data, onImageLoad }) {
   const pxPerMm = 96 / 25.4;
   const zoom = scale / pxPerMm;
   const options = resolvePrintTableOptions(element, data);
-  const columns = tableLeafColumns(options.columns).filter(
-    (column) => column.hidden !== true
-  );
+  const columns = tableLeafColumns(
+    options.columns.filter((column) => !column.hidden)
+  ).filter((column) => column.hidden !== true);
   if (!columns.length) return [];
   const records = options.dataSource;
   const count = Math.max(0, Math.floor(element.printRowCount ?? 0));
@@ -901,6 +1411,7 @@ function drawTableElement(element, { ctx, x, y, width, scale, data }) {
       () => ({})
     )
   ];
+  const resolvedCells = resolveTableCells(element, records, columns);
   const summary = element.showSummary === false ? /* @__PURE__ */ new Map() : computePrintTableSummaryValues(records, columns);
   const availableWidth = width / zoom;
   const configured = columns.map((column) => Math.max(1, column.width ?? 100));
@@ -908,57 +1419,151 @@ function drawTableElement(element, { ctx, x, y, width, scale, data }) {
   const widths = configured.map(
     (value) => availableWidth * value / totalWidth
   );
-  const headerHeight = options.headerRowHeight ?? 0;
+  const headerRowHeight = options.headerRowHeight ?? 0;
+  const headerDepth = headerRowHeight ? tableHeaderDepth(options.columns) : 0;
+  const headerHeight = headerRowHeight * headerDepth;
   const rowHeight = options.rowHeight;
   const summaryHeight = options.summaryRowHeight ?? rowHeight;
   const borderWidth = options.styles.cell.borderWidth ?? 1;
   const borderColor = options.styles.cell.borderColor;
   const fontSize = options.theme.fontSize;
   const cells = [];
-  const paint = (value, column, left, top, cellWidth, cellHeight, zone) => {
+  const paint = (value, column, left, top, cellWidth, cellHeight, zone, cell, row, rawValue) => {
     const style = options.styles[zone];
-    ctx.fillStyle = column[zone === "header" ? "headerStyle" : zone === "summary" ? "summaryStyle" : "cellStyle"]?.backgroundColor ?? style.backgroundColor;
+    ctx.fillStyle = cell?.backgroundColor ?? column[zone === "header" ? "headerStyle" : zone === "summary" ? "summaryStyle" : "cellStyle"]?.backgroundColor ?? style.backgroundColor;
     ctx.fillRect(left, top, cellWidth, cellHeight);
-    if (borderWidth > 0) {
-      ctx.strokeStyle = borderColor;
+    if (borderWidth > 0 && tableBorderVisible(element, data, cell, row)) {
+      ctx.strokeStyle = cell?.borderColor ?? borderColor;
       ctx.lineWidth = borderWidth;
       ctx.strokeRect(left, top, cellWidth, cellHeight);
     }
-    ctx.fillStyle = column[zone === "header" ? "headerStyle" : zone === "summary" ? "summaryStyle" : "cellStyle"]?.color ?? style.color ?? "#000000";
+    ctx.fillStyle = cell?.color ?? column[zone === "header" ? "headerStyle" : zone === "summary" ? "summaryStyle" : "cellStyle"]?.color ?? style.color ?? "#000000";
+    if (zone === "body" && column.cellType === "link" && !cell?.color)
+      ctx.fillStyle = "#1677ff";
     ctx.font = fontSize + "px sans-serif";
     ctx.textBaseline = "middle";
-    ctx.textAlign = zone === "header" ? column.headerAlign ?? column.align ?? element.cellAlign ?? "left" : column.align ?? element.cellAlign ?? "left";
-    const inset = 4;
-    const textX = ctx.textAlign === "right" ? left + cellWidth - inset : ctx.textAlign === "center" ? left + cellWidth / 2 : left + inset;
-    ctx.fillText(
-      value,
-      textX,
-      top + cellHeight / 2,
-      Math.max(0, cellWidth - 2 * inset)
-    );
+    ctx.textAlign = zone === "header" ? column.headerAlign ?? column.align ?? element.cellAlign ?? "left" : column.align ?? column.cellStyle?.textAlign ?? element.cellAlign ?? "left";
+    const {
+      top: topPadding,
+      right: rightPadding,
+      bottom: bottomPadding,
+      left: leftPadding
+    } = resolveTableCellPadding(column, element);
+    const contentWidth = Math.max(0, cellWidth - leftPadding - rightPadding);
+    const contentHeight = Math.max(0, cellHeight - topPadding - bottomPadding);
+    if (!contentWidth || !contentHeight) return;
+    if (cell?.diagonal) {
+      ctx.save();
+      ctx.strokeStyle = cell.borderColor ?? borderColor;
+      ctx.lineWidth = Math.max(borderWidth, 1);
+      ctx.beginPath();
+      if (cell.diagonal === "down") {
+        ctx.moveTo(left, top);
+        ctx.lineTo(left + cellWidth, top + cellHeight);
+      } else {
+        ctx.moveTo(left, top + cellHeight);
+        ctx.lineTo(left + cellWidth, top);
+      }
+      ctx.stroke();
+      ctx.textAlign = "left";
+      ctx.textBaseline = "top";
+      ctx.fillText(
+        cell.diagonalStart ?? value,
+        left + leftPadding,
+        top + topPadding
+      );
+      ctx.textAlign = "right";
+      ctx.textBaseline = "bottom";
+      ctx.fillText(
+        cell.diagonalEnd ?? "",
+        left + cellWidth - rightPadding,
+        top + cellHeight - bottomPadding
+      );
+      ctx.restore();
+      return;
+    }
+    if (zone === "body" && drawTypedCell(
+      ctx,
+      column,
+      rawValue,
+      left,
+      top,
+      cellWidth,
+      cellHeight,
+      onImageLoad
+    ))
+      return;
+    const overflow = column.cellOverflow ?? "wrap";
+    const singleLine = value.replace(/\r?\n/g, " ");
+    const lines = overflow === "wrap" ? wrapCellText(ctx, value, contentWidth) : [
+      overflow === "ellipsis" ? ellipsisCellText(ctx, singleLine, contentWidth) : singleLine
+    ];
+    const lineHeight = fontSize * 1.2;
+    const vertical = column.cellStyle?.verticalAlign ?? element.cellVerticalAlign ?? "middle";
+    const firstY = vertical === "top" || lines.length * lineHeight > contentHeight ? top + topPadding + lineHeight / 2 : vertical === "bottom" ? top + cellHeight - bottomPadding - lines.length * lineHeight + lineHeight / 2 : top + topPadding + (contentHeight - lines.length * lineHeight) / 2 + lineHeight / 2;
+    const textX = ctx.textAlign === "right" ? left + cellWidth - rightPadding : ctx.textAlign === "center" ? left + leftPadding + contentWidth / 2 : left + leftPadding;
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(left + leftPadding, top + topPadding, contentWidth, contentHeight);
+    ctx.clip();
+    lines.forEach((line, index) => {
+      if (overflow === "shrink")
+        ctx.fillText(line, textX, firstY + index * lineHeight, contentWidth);
+      else ctx.fillText(line, textX, firstY + index * lineHeight);
+    });
+    ctx.restore();
   };
   ctx.save();
   try {
     ctx.translate(x, y);
     ctx.scale(zoom, zoom);
     let left = 0;
-    if (headerHeight > 0)
-      for (const [index, column] of columns.entries()) {
+    if (headerHeight > 0) {
+      for (const header of tableHeaderCells(element)) {
+        const cellLeft = widths.slice(0, header.columnIndex).reduce((sum, value) => sum + value, 0);
+        const cellWidth = widths.slice(header.columnIndex, header.columnIndex + header.colSpan).reduce((sum, value) => sum + value, 0);
+        const rect = {
+          x: cellLeft,
+          y: header.rowIndex * headerRowHeight,
+          width: cellWidth,
+          height: header.rowSpan * headerRowHeight
+        };
         paint(
-          cellText(column.title ?? column.key ?? ""),
-          column,
-          left,
-          0,
-          widths[index],
-          headerHeight,
+          cellText(header.column.title ?? header.column.key ?? ""),
+          header.column,
+          rect.x,
+          rect.y,
+          rect.width,
+          rect.height,
           "header"
         );
-        left += widths[index];
+        cells.push({
+          area: "header",
+          rowIndex: header.rowIndex,
+          columnIndex: header.columnIndex,
+          column: header.column,
+          rect
+        });
       }
+    }
     for (const [rowIndex, row] of visibleRows.entries()) {
       left = 0;
       for (const [index, column] of columns.entries()) {
+        const covering = coveringTableCell(resolvedCells, rowIndex, index);
+        if (covering && (covering.rowIndex !== rowIndex || covering.columnIndex !== index)) {
+          left += widths[index];
+          continue;
+        }
         const top = headerHeight + rowIndex * rowHeight;
+        const colSpan = Math.min(
+          Math.max(1, covering?.colSpan ?? 1),
+          columns.length - index
+        );
+        const rowSpan = Math.min(
+          Math.max(1, covering?.rowSpan ?? 1),
+          visibleRows.length - rowIndex
+        );
+        const cellWidth = widths.slice(index, index + colSpan).reduce((sum, value2) => sum + value2, 0);
         const value = rowIndex < records.length ? readTableCell(row, column.dataIndex ?? column.key) : void 0;
         const rendered = rowIndex < records.length ? column.render?.(value, row, rowIndex, column) : void 0;
         paint(
@@ -966,15 +1571,25 @@ function drawTableElement(element, { ctx, x, y, width, scale, data }) {
           column,
           left,
           top,
-          widths[index],
-          rowHeight,
-          "body"
+          cellWidth,
+          rowHeight * rowSpan,
+          "body",
+          covering,
+          row,
+          rendered ?? value
         );
         if (rowIndex < records.length)
           cells.push({
+            area: "body",
             rowIndex,
+            columnIndex: index,
             column,
-            rect: { x: left, y: top, width: widths[index], height: rowHeight }
+            rect: {
+              x: left,
+              y: top,
+              width: cellWidth,
+              height: rowHeight * rowSpan
+            }
           });
         left += widths[index];
       }
@@ -2405,52 +3020,6 @@ var drawDividerElement = (element, context) => {
   }
   ctx.stroke();
 };
-
-// src/rendering/elements/image.ts
-var drawImageElement = (element, context) => {
-  const { ctx, x, y, width, height, onImageLoad } = context;
-  const image = resolveImage(element.src, onImageLoad);
-  if (image?.complete && image.naturalWidth > 0) {
-    drawImageFit(ctx, image, x, y, width, height, element.fit ?? "contain");
-  }
-};
-var imageCache = /* @__PURE__ */ new Map();
-var pendingImages = /* @__PURE__ */ new Set();
-function resolveImage(src, onLoad) {
-  if (typeof Image === "undefined" || !src) return void 0;
-  const cached = imageCache.get(src);
-  if (cached) return cached;
-  if (pendingImages.has(src)) return void 0;
-  pendingImages.add(src);
-  const image = new Image();
-  image.onload = () => {
-    pendingImages.delete(src);
-    imageCache.set(src, image);
-    onLoad?.();
-  };
-  image.onerror = () => pendingImages.delete(src);
-  image.src = src;
-  return void 0;
-}
-function drawImageFit(ctx, image, x, y, width, height, fit) {
-  if (fit === "fill") {
-    ctx.drawImage(image, x, y, width, height);
-    return;
-  }
-  const ratio = fit === "cover" ? Math.max(width / image.naturalWidth, height / image.naturalHeight) : Math.min(width / image.naturalWidth, height / image.naturalHeight);
-  const drawWidth = image.naturalWidth * ratio;
-  const drawHeight = image.naturalHeight * ratio;
-  const drawX = x + (width - drawWidth) / 2;
-  const drawY = y + (height - drawHeight) / 2;
-  ctx.save();
-  if (fit === "cover") {
-    ctx.beginPath();
-    ctx.rect(x, y, width, height);
-    ctx.clip();
-  }
-  ctx.drawImage(image, drawX, drawY, drawWidth, drawHeight);
-  ctx.restore();
-}
 var drawBarcodeElement = (element, context) => {
   const { ctx, x, y, width, height, data } = context;
   try {
@@ -2762,7 +3331,8 @@ function drawPrintDesignElement(ctx, element, scale, data = {}, onImageLoad) {
   const x = element.x * scale;
   const y = (element.y - (element.overflowCrop?.offset ?? 0)) * scale;
   const width = element.width * scale;
-  const height = (element.overflowCrop?.fullHeight ?? element.height) * scale;
+  const visualHeight = element.type === "table" ? resolvedTableHeight(element, data) : element.height;
+  const height = (element.overflowCrop?.fullHeight ?? visualHeight) * scale;
   const centerX = x + width / 2;
   const centerY = y + height / 2;
   ctx.save();
@@ -2853,11 +3423,12 @@ function hitTestPrintDesignPage(page, point, tolerance = 0, data = {}) {
   for (let index = page.elements.length - 1; index >= 0; index -= 1) {
     const element = page.elements[index];
     if (!resolvePrintDesignElementVisible(element, data)) continue;
+    const visualHeight = element.type === "table" ? resolvedTableHeight(element, data) : element.height;
     const localPoint = rotatePoint(
       point,
       {
         x: element.x + element.width / 2,
-        y: element.y + element.height / 2
+        y: element.y + visualHeight / 2
       },
       -((element.rotation ?? 0) * Math.PI) / 180
     );
@@ -2884,7 +3455,7 @@ function hitTestPrintDesignPage(page, point, tolerance = 0, data = {}) {
       }
       continue;
     }
-    if (localPoint.x >= element.x && localPoint.x <= element.x + element.width && localPoint.y >= element.y && localPoint.y <= element.y + element.height) {
+    if (localPoint.x >= element.x && localPoint.x <= element.x + element.width && localPoint.y >= element.y && localPoint.y <= element.y + visualHeight) {
       return element;
     }
   }
@@ -3137,6 +3708,223 @@ function resolveFontSize(value, max) {
   return Number.isFinite(value) ? Math.max(8, Math.min(max, value)) : 9;
 }
 
+// src/interaction/geometry.ts
+var RESIZE_HANDLES = [
+  "nw",
+  "ne",
+  "se",
+  "sw",
+  "n",
+  "s",
+  "w",
+  "e"
+];
+function rotatePoint2(point, center, radians) {
+  const x = point.x - center.x;
+  const y = point.y - center.y;
+  const cosine = Math.cos(radians);
+  const sine = Math.sin(radians);
+  return {
+    x: center.x + x * cosine - y * sine,
+    y: center.y + x * sine + y * cosine
+  };
+}
+function getSelectionRect(element, scale, data = {}) {
+  const minimumSize = 12 / scale;
+  const width = Math.max(element.width, minimumSize);
+  const visualHeight = element.type === "table" ? resolvedTableHeight(element, data) : element.height;
+  const height = Math.max(visualHeight, minimumSize);
+  return {
+    x: element.x - (width - element.width) / 2,
+    y: element.y - (height - visualHeight) / 2,
+    width,
+    height
+  };
+}
+function getRotatedRectangleCorner(rect, rotation, handle) {
+  const x = handle.includes("w") ? rect.x : handle.includes("e") ? rect.x + rect.width : rect.x + rect.width / 2;
+  const y = handle.includes("n") ? rect.y : handle.includes("s") ? rect.y + rect.height : rect.y + rect.height / 2;
+  return rotatePoint2(
+    { x, y },
+    { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 },
+    rotation * Math.PI / 180
+  );
+}
+
+// src/helper/measurement-layout.ts
+function measurementObstacles(elements, scale) {
+  return elements.flatMap((element) => {
+    const rect = getSelectionRect(element, scale);
+    const angle = element.rotation ?? 0;
+    const corners = RESIZE_HANDLES.map(
+      (handle) => getRotatedRectangleCorner(rect, angle, handle)
+    );
+    const center = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+    const stem = rotatePoint2(
+      { x: center.x, y: rect.y },
+      center,
+      angle * Math.PI / 180
+    );
+    const rotate = rotatePoint2(
+      { x: center.x, y: rect.y - 17 / scale },
+      center,
+      angle * Math.PI / 180
+    );
+    return [
+      ...[...corners, rotate].map((p) => ({
+        x: p.x * scale - 10,
+        y: p.y * scale - 10,
+        width: 20,
+        height: 20
+      })),
+      {
+        x: Math.min(stem.x, rotate.x) * scale - 5,
+        y: Math.min(stem.y, rotate.y) * scale - 5,
+        width: Math.abs(stem.x - rotate.x) * scale + 10,
+        height: Math.abs(stem.y - rotate.y) * scale + 10
+      }
+    ];
+  });
+}
+function placeMeasurement(line, textWidth, obstacles, viewport) {
+  const horizontal = line.y1 === line.y2;
+  const intersects = (a, b) => a.x <= b.x + b.width && a.x + a.width >= b.x && a.y <= b.y + b.height && a.y + a.height >= b.y;
+  const limit = horizontal ? viewport.height : viewport.width;
+  for (let step = 0; step <= Math.ceil(limit / 16); step++) {
+    for (const sign of step === 0 ? [1] : [1, -1]) {
+      const offset = step * 16 * sign;
+      const x1 = line.x1 + (horizontal ? 0 : offset), x2 = line.x2 + (horizontal ? 0 : offset);
+      const y1 = line.y1 + (horizontal ? offset : 0), y2 = line.y2 + (horizontal ? offset : 0);
+      const textX = (x1 + x2) / 2 + 4, textY = (y1 + y2) / 2 - 4;
+      const boxes = [
+        {
+          x: Math.min(x1, x2) - 3,
+          y: Math.min(y1, y2) - 3,
+          width: Math.abs(x2 - x1) + 6,
+          height: Math.abs(y2 - y1) + 6
+        },
+        { x: textX - 2, y: textY - 12, width: textWidth + 4, height: 16 }
+      ];
+      if (boxes.some(
+        (b) => b.x < 0 || b.y < 0 || b.x + b.width > viewport.width || b.y + b.height > viewport.height
+      ))
+        continue;
+      if (boxes.some((b) => obstacles.some((o) => intersects(b, o)))) continue;
+      return { x1, y1, x2, y2, textX, textY };
+    }
+  }
+  return null;
+}
+
+// src/helper/alignment.ts
+function elementBounds(element) {
+  const angle = (element.rotation ?? 0) * Math.PI / 180;
+  const width = Math.abs(element.width * Math.cos(angle)) + Math.abs(element.height * Math.sin(angle));
+  const height = Math.abs(element.width * Math.sin(angle)) + Math.abs(element.height * Math.cos(angle));
+  return {
+    x: element.x + (element.width - width) / 2,
+    y: element.y + (element.height - height) / 2,
+    width,
+    height
+  };
+}
+function snapCoordinate(value, targets, tolerance) {
+  return targets.reduce(
+    (best, target) => Math.abs(target - value) <= tolerance && Math.abs(target - value) < Math.abs(best - value) ? target : best,
+    targets.find((target) => Math.abs(target - value) <= tolerance) ?? value
+  );
+}
+function guideTargets(page, axis) {
+  const vertical = axis === "vertical";
+  const size = vertical ? page.width : page.height;
+  const margins = page.margins ?? { top: 10, right: 10, bottom: 10, left: 10 };
+  return [
+    0,
+    size / 2,
+    size,
+    vertical ? margins.left : margins.top,
+    size - (vertical ? margins.right : margins.bottom),
+    ...page.elements.filter((e) => e.visible !== false).flatMap((e) => {
+      const b = elementBounds(e);
+      const start = vertical ? b.x : b.y, length = vertical ? b.width : b.height;
+      return [start, start + length / 2, start + length];
+    })
+  ];
+}
+function nearestMeasurements(page, selectedIds) {
+  const selected = page.elements.filter((e) => selectedIds.includes(e.id) && e.visible !== false).map(elementBounds);
+  if (!selected.length) return [];
+  const left = Math.min(...selected.map((b) => b.x)), top = Math.min(...selected.map((b) => b.y));
+  const right = Math.max(...selected.map((b) => b.x + b.width)), bottom = Math.max(...selected.map((b) => b.y + b.height));
+  const result = /* @__PURE__ */ new Map();
+  const add = (key, x1, y1, x2, y2) => {
+    const distance = Math.hypot(x2 - x1, y2 - y1);
+    if (!result.has(key) || distance < result.get(key).distance)
+      result.set(key, { x1, y1, x2, y2, distance });
+  };
+  for (const e of page.elements) {
+    if (selectedIds.includes(e.id) || e.visible === false) continue;
+    const b = elementBounds(e), r = b.x + b.width, d = b.y + b.height;
+    if (b.y <= bottom && d >= top) {
+      const y = (Math.max(top, b.y) + Math.min(bottom, d)) / 2;
+      if (r <= left) add("left", r, y, left, y);
+      if (b.x >= right) add("right", right, y, b.x, y);
+    }
+    if (b.x <= right && r >= left) {
+      const x = (Math.max(left, b.x) + Math.min(right, r)) / 2;
+      if (d <= top) add("top", x, d, x, top);
+      if (b.y >= bottom) add("bottom", x, bottom, x, b.y);
+    }
+  }
+  return [...result.values()];
+}
+function drawMeasurements(context, page, selectedIds, scale, unit = "mm") {
+  context.save();
+  context.strokeStyle = "#e11d48";
+  context.fillStyle = "#e11d48";
+  context.font = "11px sans-serif";
+  context.setLineDash([]);
+  context.lineWidth = 1;
+  const obstacles = measurementObstacles(
+    page.elements.filter(
+      (e) => selectedIds.includes(e.id) && e.visible !== false
+    ),
+    scale
+  );
+  context.textAlign = "left";
+  context.textBaseline = "alphabetic";
+  for (const m of nearestMeasurements(page, selectedIds)) {
+    const label = formatDisplayUnit(m.distance, unit);
+    const placement = placeMeasurement(
+      {
+        x1: m.x1 * scale,
+        y1: m.y1 * scale,
+        x2: m.x2 * scale,
+        y2: m.y2 * scale
+      },
+      context.measureText(label).width,
+      obstacles,
+      { width: page.width * scale, height: page.height * scale }
+    );
+    if (!placement) continue;
+    const { x1, y1, x2, y2, textX, textY } = placement;
+    const horizontal = y1 === y2;
+    context.beginPath();
+    context.moveTo(x1, y1);
+    context.lineTo(x2, y2);
+    for (const [x, y] of [
+      [x1, y1],
+      [x2, y2]
+    ]) {
+      context.moveTo(x - (horizontal ? 0 : 3), y - (horizontal ? 3 : 0));
+      context.lineTo(x + (horizontal ? 0 : 3), y + (horizontal ? 3 : 0));
+    }
+    context.stroke();
+    context.fillText(label, textX, textY);
+  }
+  context.restore();
+}
+
 // src/model/pagination.ts
 var MAX_PAGES = 1e3;
 var PT_TO_MM = 25.4 / 72;
@@ -3244,7 +4032,7 @@ function paginatePrintDesignDocument(document, data = {}) {
           bottom,
           pageAt
         );
-        shift = Math.max(shift, result.logicalEnd - originalEnd);
+        shift = result.logicalEnd - originalEnd;
         continue;
       }
       if (element.type === "text") {
@@ -3285,8 +4073,16 @@ function splitTable(element, data, startPage, startY, top, bottom, pageAt) {
   const rows = resolveTableRows(element, data);
   const limit = Math.max(0, Math.floor(element.printRowCount ?? 0));
   const records = limit ? rows.slice(0, limit) : rows;
+  const visibleRows = element.fillEmptyRows && limit > records.length ? [
+    ...records,
+    ...Array.from({ length: limit - records.length }, () => ({}))
+  ] : records;
+  const columns = tableLeafColumns(element.columns).filter(
+    (column) => !column.hidden
+  );
+  const resolvedCells = resolveTableCells(element, records, columns);
   const rowHeight = Math.max(1, element.rowHeight ?? 8);
-  const header = element.showHeader === false ? 0 : Math.max(1, element.headerRowHeight ?? 9);
+  const header = element.showHeader === false ? 0 : tableHeaderDepth(element.columns) * Math.max(1, element.headerRowHeight ?? 9);
   const hasSummary = element.showSummary !== false && tableLeafColumns(element.columns).some(
     (column) => !!column.summary || column.summaryTitle != null
   );
@@ -3296,16 +4092,29 @@ function splitTable(element, data, startPage, startY, top, bottom, pageAt) {
   let offset = 0;
   do {
     let room = bottom - y;
-    if (room < header + Math.min(rowHeight, records.length ? rowHeight : 0) && y > top) {
+    if (room < header + Math.min(rowHeight, visibleRows.length ? rowHeight : 0) && y > top) {
       pageIndex++;
       y = top;
       room = bottom - y;
     }
-    const remaining = records.length - offset;
-    let count = records.length ? Math.min(
+    const remaining = visibleRows.length - offset;
+    let count = visibleRows.length ? Math.min(
       remaining,
       Math.max(1, Math.floor((room - header) / rowHeight))
     ) : 0;
+    if (count > 0 && count < remaining) {
+      let boundary = offset + count;
+      for (const cell of resolvedCells) {
+        if (cell.rowIndex < boundary && cell.rowIndex + Math.max(1, cell.rowSpan ?? 1) > boundary)
+          boundary = Math.min(boundary, cell.rowIndex);
+      }
+      if (boundary > offset) count = boundary - offset;
+      else if (y > top) {
+        pageIndex++;
+        y = top;
+        continue;
+      }
+    }
     if (hasSummary && count === remaining && header + count * rowHeight + summaryHeight > room) {
       const countWithSummary = Math.floor(
         (room - header - summaryHeight) / rowHeight
@@ -3320,8 +4129,21 @@ function splitTable(element, data, startPage, startY, top, bottom, pageAt) {
         count--;
       }
     }
-    const chunk = records.slice(offset, offset + count);
-    const finalChunk = offset + chunk.length >= records.length;
+    if (count > 0 && count < remaining) {
+      let boundary = offset + count;
+      for (const cell of resolvedCells) {
+        if (cell.rowIndex < boundary && cell.rowIndex + Math.max(1, cell.rowSpan ?? 1) > boundary)
+          boundary = Math.min(boundary, cell.rowIndex);
+      }
+      if (boundary > offset) count = boundary - offset;
+      else if (y > top) {
+        pageIndex++;
+        y = top;
+        continue;
+      }
+    }
+    const chunk = visibleRows.slice(offset, offset + count);
+    const finalChunk = offset + chunk.length >= visibleRows.length;
     const height = Math.min(
       room,
       Math.max(
@@ -3336,17 +4158,31 @@ function splitTable(element, data, startPage, startY, top, bottom, pageAt) {
       height,
       dataMode: "static",
       dataSource: chunk,
+      cells: resolvedCells.filter(
+        (cell) => cell.rowIndex < offset + count && cell.rowIndex + Math.max(1, cell.rowSpan ?? 1) > offset
+      ).map((cell) => {
+        const start = Math.max(cell.rowIndex, offset);
+        return {
+          ...cell,
+          rowIndex: start - offset,
+          rowSpan: Math.min(
+            cell.rowIndex + Math.max(1, cell.rowSpan ?? 1),
+            offset + count
+          ) - start
+        };
+      }),
+      mergeCell: void 0,
       printRowCount: 0,
       fillEmptyRows: false,
       showSummary: finalChunk ? element.showSummary : false
     });
     offset += chunk.length;
     y += height;
-    if (offset < records.length) {
+    if (offset < visibleRows.length) {
       pageIndex++;
       y = top;
     }
-  } while (offset < records.length);
+  } while (offset < visibleRows.length);
   return { logicalEnd: pageIndex * (bottom - top) + (y - top) };
 }
 function splitText(element, data, startPage, startY, top, bottom, pageAt) {
@@ -3719,52 +4555,159 @@ function tableMarkup(element, data) {
   const limit = Math.max(0, Math.floor(element.printRowCount ?? 0));
   const rows = limit > 0 ? allRows.slice(0, limit) : allRows;
   const displayRows = element.fillEmptyRows && limit > rows.length ? [...rows, ...Array.from({ length: limit - rows.length }, () => ({}))] : rows;
+  const resolvedCells = resolveTableCells(element, rows, columns);
   const totalWidth = columns.reduce(
     (sum, column) => sum + Math.max(1, Number(column.width) || 100),
     0
   );
   const borderWidth = element.cellBorder?.width === 0 ? 0 : Math.max(0.1, (element.cellBorder?.width ?? 1) * (25.4 / 96));
-  const border = borderWidth ? `${borderWidth}mm solid ${cssColor(element.cellBorder?.color, "#000000")}` : "none";
+  const border = borderWidth && tableBorderVisible(element, data) ? `${borderWidth}mm solid ${cssColor(element.cellBorder?.color, "#000000")}` : "none";
   const fontSize = Math.max(1, element.fontSize ?? 10);
-  const colgroup = columns.map(
-    (column) => `<col style="width:${Math.max(1, Number(column.width) || 100) / totalWidth * 100}%">`
-  ).join("");
-  const headerDepth = (items) => Math.max(
-    0,
-    ...items.map((column) => 1 + headerDepth(column.children ?? []))
-  );
-  const depth = headerDepth(visibleColumns);
-  const headerRows = Array.from({ length: depth }, () => []);
-  const addHeader = (items, level) => {
-    for (const column of items) {
-      if (column.hidden === true) continue;
-      const children = column.children?.filter((item) => item.hidden !== true) ?? [];
-      const span = children.length ? tableLeafColumns(children).filter((item) => item.hidden !== true).length : 1;
-      if (!span) continue;
-      const title = typeof column.title === "string" || typeof column.title === "number" ? column.title : column.key ?? "";
-      headerRows[level].push(
-        `<th colspan="${span}" rowspan="${children.length ? 1 : depth - level}" style="height:${cssNumber(element.headerRowHeight, 9)}mm;text-align:${cssAlign(column.headerAlign ?? column.align ?? element.cellAlign)};background:${cssColor(element.colors?.header?.backgroundColor, "transparent")};color:${cssColor(element.colors?.header?.color, "#000000")}">${escapeHtml(title)}</th>`
-      );
-      if (children.length) addHeader(children, level + 1);
+  const cellCss = (column) => {
+    const padding = resolveTableCellPadding(column, element);
+    const side = (value, fallback) => `${Math.max(0, cssNumber(value, fallback)) * (25.4 / 96)}mm`;
+    const overflow = resolveTableCellOverflow(column, element);
+    return `padding:${side(padding.top, 0)} ${side(padding.right, 4)} ${side(padding.bottom, 0)} ${side(padding.left, 4)};overflow:hidden;white-space:${overflow === "wrap" ? "pre-wrap" : "nowrap"};text-overflow:${overflow === "ellipsis" ? "ellipsis" : "clip"};`;
+  };
+  const cellContent = (column, value, weight) => {
+    const text = cellText2(value);
+    if (resolveTableCellOverflow(column, element) !== "shrink")
+      return escapeHtml(text);
+    const fontPx = fontSize * 96 / 72;
+    const padding = resolveTableCellPadding(column, element);
+    const widthPx = Math.max(
+      1,
+      element.width * 96 / 25.4 * weight / totalWidth - padding.left - padding.right
+    );
+    const estimatedPx = Array.from(text).reduce(
+      (sum, character) => sum + fontPx * (character.charCodeAt(0) < 128 ? 0.55 : 1),
+      0
+    );
+    if (estimatedPx <= widthPx) return escapeHtml(text);
+    return `<svg style="display:block;width:100%;height:1.2em" viewBox="0 0 ${widthPx} ${fontPx * 1.2}" preserveAspectRatio="none"><text x="0" y="${fontPx}" font-size="${fontPx}" fill="currentColor" textLength="${widthPx}" lengthAdjust="spacingAndGlyphs">${escapeHtml(text)}</text></svg>`;
+  };
+  const bodyCellContent = (column, value) => {
+    const content = value && typeof value === "object" && !Array.isArray(value) ? value : void 0;
+    const type = typeof content?.type === "string" ? content.type : column.cellType;
+    const payload = content?.value ?? content?.src ?? content?.text ?? value;
+    const text = cellText2(payload);
+    if (type === "chart" && typeof content?.chartType === "string") {
+      try {
+        return chart.exportCanvasChartToSvg({
+          type: content.chartType,
+          option: content.option ?? payload,
+          width: 200,
+          height: 60,
+          simple: true
+        });
+      } catch {
+        return escapeHtml(text);
+      }
     }
+    if (type === "timeline") {
+      const items = Array.isArray(content?.items) ? content.items : Array.isArray(payload) ? payload : [];
+      return `<div style="border-left:0.3mm solid #94a3b8;padding-left:1mm">${items.map((item) => `<div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">\u2022 ${escapeHtml(item && typeof item === "object" ? cellText2(item.title ?? item.content) : cellText2(item))}</div>`).join("")}</div>`;
+    }
+    if (type === "image")
+      return `<img src="${imageSource(text)}" alt="" style="display:block;max-width:100%;max-height:100%;margin:auto;object-fit:contain">`;
+    if (type === "qrcode") {
+      try {
+        return qrcode.exportQrCodeToSvg({ value: text, width: 96, height: 96 });
+      } catch {
+        return escapeHtml(text);
+      }
+    }
+    if (type === "barcode") {
+      try {
+        return barcode.exportBarcodeToSvg({
+          value: text,
+          width: 200,
+          height: 50,
+          format: "code128",
+          displayValue: false
+        });
+      } catch {
+        return escapeHtml(text);
+      }
+    }
+    if (type === "color")
+      return `<span style="display:block;width:100%;height:100%;min-height:4mm;background:${cssColor(text, "transparent")}"></span>`;
+    if (type === "progress")
+      return `<span style="display:block;height:2mm;background:#e5e7eb"><span style="display:block;height:100%;width:${Math.max(0, Math.min(100, Number(payload) || 0))}%;background:#1677ff"></span></span>`;
+    if (["checkbox", "radio", "switch"].includes(type ?? ""))
+      return payload === true || payload === 1 || payload === "true" ? "\u2611" : "\u2610";
+    if (type === "rate") {
+      const count = Math.max(0, Math.min(5, Math.round(Number(payload) || 0)));
+      return `<span style="color:#f59e0b">${"\u2605".repeat(count)}${"\u2606".repeat(5 - count)}</span>`;
+    }
+    if (type === "tag" || type === "button")
+      return `<span style="display:inline-block;padding:0.3mm 1mm;background:${type === "tag" ? "#e6f4ff" : "#1677ff"};color:${type === "tag" ? "#1677ff" : "#fff"}">${escapeHtml(text)}</span>`;
+    if (type === "json")
+      return escapeHtml(
+        typeof value === "object" ? JSON.stringify(value) : text
+      );
+    if (type === "link")
+      return `<span style="color:#1677ff;text-decoration:underline">${escapeHtml(text)}</span>`;
+    return cellContent(column, value, Math.max(1, Number(column.width) || 100));
   };
-  addHeader(visibleColumns, 0);
+  const colgroup = columns.map(
+    (column) => `<col style="width:${Math.max(1, Number(column.width) || 100) / totalWidth * 100}%">`
+  ).join("");
+  const depth = tableHeaderDepth(visibleColumns);
+  const headerRows = Array.from({ length: depth }, () => []);
+  for (const header2 of tableHeaderCells(element)) {
+    const { column } = header2;
+    const title = typeof column.title === "string" || typeof column.title === "number" ? column.title : column.key ?? "";
+    headerRows[header2.rowIndex].push(
+      `<th colspan="${header2.colSpan}" rowspan="${header2.rowSpan}" style="height:${cssNumber(element.headerRowHeight, 9)}mm;text-align:${cssAlign(column.headerAlign ?? column.align ?? element.cellAlign)};background:${cssColor(element.colors?.header?.backgroundColor, "transparent")};color:${cssColor(element.colors?.header?.color, "#000000")};${cellCss(column)}">${cellContent(
+        column,
+        title,
+        columns.slice(header2.columnIndex, header2.columnIndex + header2.colSpan).reduce(
+          (sum, leaf) => sum + Math.max(1, Number(leaf.width) || 100),
+          0
+        )
+      )}</th>`
+    );
+  }
   const header = element.showHeader === false ? "" : `<thead>${headerRows.map((cells) => `<tr>${cells.join("")}</tr>`).join("")}</thead>`;
   const body = displayRows.map(
-    (row) => `<tr>${columns.map((column) => {
+    (row, rowIndex) => `<tr>${columns.map((column, columnIndex) => {
+      const cell = coveringTableCell(
+        resolvedCells,
+        rowIndex,
+        columnIndex
+      );
+      if (cell && (cell.rowIndex !== rowIndex || cell.columnIndex !== columnIndex))
+        return "";
       const value = readTableCell(row, column.dataIndex ?? column.key);
-      const align = cssAlign(column.align ?? element.cellAlign);
-      const vertical = element.cellVerticalAlign ?? "middle";
+      const rendered = column.render?.(value, row, rowIndex, column) ?? value;
+      const align = cssAlign(
+        column.align ?? column.cellStyle?.textAlign ?? element.cellAlign
+      );
+      const vertical = column.cellStyle?.verticalAlign ?? element.cellVerticalAlign ?? "middle";
       const background = cssColor(
-        element.colors?.body?.backgroundColor,
+        cell?.backgroundColor ?? column.cellStyle?.backgroundColor ?? element.colors?.body?.backgroundColor,
         "transparent"
       );
-      const color2 = cssColor(element.colors?.body?.color, "#000000");
-      return `<td style="height:${cssNumber(element.rowHeight, 8)}mm;text-align:${align};vertical-align:${vertical === "top" || vertical === "bottom" ? vertical : "middle"};background:${background};color:${color2};${element.cellOverflow === "ellipsis" ? "white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" : ""}">${escapeHtml(cellText2(value))}</td>`;
+      const color2 = cssColor(
+        cell?.color ?? column.cellStyle?.color ?? element.colors?.body?.color,
+        "#000000"
+      );
+      const borderStyle = tableBorderVisible(element, data, cell, row) ? cell?.borderColor ? `border-color:${cssColor(cell.borderColor, "transparent")};` : "" : "border-color:transparent;";
+      const colSpan = Math.min(
+        Math.max(1, cell?.colSpan ?? 1),
+        columns.length - columnIndex
+      );
+      const rowSpan = Math.min(
+        Math.max(1, cell?.rowSpan ?? 1),
+        displayRows.length - rowIndex
+      );
+      const content = cell?.diagonal ? `<div style="display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;min-height:${cssNumber(element.rowHeight, 8) * rowSpan}mm;background:linear-gradient(${cell.diagonal === "down" ? "to top right" : "to bottom right"},transparent 49.5%,${cssColor(cell.borderColor ?? element.cellBorder?.color, "#000000")} 50%,transparent 50.5%)"><span style="align-self:flex-start">${escapeHtml(cell.diagonalStart ?? cellText2(value))}</span><span style="align-self:flex-end">${escapeHtml(cell.diagonalEnd ?? "")}</span></div>` : bodyCellContent(column, rendered);
+      return `<td colspan="${colSpan}" rowspan="${rowSpan}" style="height:${cssNumber(element.rowHeight, 8)}mm;text-align:${align};vertical-align:${vertical === "top" || vertical === "bottom" ? vertical : "middle"};background:${background};color:${color2};${borderStyle}${cellCss(column)}">${content}</td>`;
     }).join("")}</tr>`
   ).join("");
   const summary = element.showSummary === false ? /* @__PURE__ */ new Map() : computePrintTableSummaryValues(rows, columns);
-  const summaryRow = summary.size ? `<tfoot><tr>${columns.map((column, index) => `<td style="height:${cssNumber(element.summaryRowHeight ?? element.rowHeight, 8)}mm;text-align:${cssAlign(column.align ?? element.cellAlign)};background:${cssColor(element.colors?.summary?.backgroundColor, "transparent")};color:${cssColor(element.colors?.summary?.color, "#000000")}">${escapeHtml(summary.get(String(column.key ?? column.dataIndex ?? index)) ?? "")}</td>`).join("")}</tr></tfoot>` : "";
+  const summaryRow = summary.size ? `<tfoot><tr>${columns.map((column, index) => `<td style="height:${cssNumber(element.summaryRowHeight ?? element.rowHeight, 8)}mm;text-align:${cssAlign(column.align ?? element.cellAlign)};background:${cssColor(element.colors?.summary?.backgroundColor, "transparent")};color:${cssColor(element.colors?.summary?.color, "#000000")};${cellCss(column)}">${cellContent(column, summary.get(String(column.key ?? column.dataIndex ?? index)) ?? "", Math.max(1, Number(column.width) || 100))}</td>`).join("")}</tr></tfoot>` : "";
   return `<table class="pd-table" style="font-size:${fontSize}pt;--pd-border:${border}"><colgroup>${colgroup}</colgroup>${header}<tbody>${body}</tbody>${summaryRow}</table>`;
 }
 function chartMarkup(element, data) {
@@ -3933,7 +4876,7 @@ function elementMarkup(source, data, pageNumber) {
   const body = element.overflowCrop ? `<div style="position:relative;top:-${cssNumber(element.overflowCrop.offset, 0)}mm;width:100%;height:${cssNumber(element.overflowCrop.fullHeight, element.height)}mm">${content}</div>` : content;
   return `<div class="pd-element" style="${style}">${body}</div>`;
 }
-function transformPrintDesignToHtml(document, options = {}) {
+function* generatePrintHtml(document, options = {}, physicalPages, pageOffset = 0) {
   const data = options.data ?? {};
   const selectedPages = options.pageIds ? options.pageIds.map((id) => {
     const page = document.pages.find((item) => item.id === id);
@@ -3941,10 +4884,15 @@ function transformPrintDesignToHtml(document, options = {}) {
     return page;
   }) : document.pages;
   if (!selectedPages.length) throw new RangeError("\u81F3\u5C11\u9700\u8981\u4E00\u4E2A\u6253\u5370\u9875\u9762\u3002");
-  const pages = paginatePrintDesignDocument(
-    { ...document, pages: selectedPages },
-    data
-  ).pages;
+  const pages = physicalPages ?? [];
+  for (let index = 0; !physicalPages && index < selectedPages.length; index++) {
+    const result = paginatePrintDesignDocument(
+      { ...document, pages: [selectedPages[index]] },
+      data
+    ).pages;
+    for (const page of result) pages.push(page);
+    yield (index + 1) / selectedPages.length * 0.3;
+  }
   const firstPage = pages[0];
   const uniformPageSize = pages.every(
     (page) => page.width === firstPage.width && page.height === firstPage.height
@@ -3970,9 +4918,15 @@ function transformPrintDesignToHtml(document, options = {}) {
     if (!/^[\w:/?&=.%+#;,@-]+$/.test(source)) return "";
     return `@font-face{font-family:${cssFont(element.fontFamily)};src:url("${source}")}`;
   }).join("");
-  const markup = pages.map(
-    (page, index) => `<section class="pd-page pd-page-${index}" style="background:${cssColor(page.background, "#ffffff")}">${page.elements.map((element) => elementMarkup(element, data, index + 1)).join("")}</section>`
-  ).join("");
+  const parts = [];
+  for (let index = 0; index < pages.length; index++) {
+    const page = pages[index];
+    parts.push(
+      `<section class="pd-page pd-page-${index}" style="background:${cssColor(page.background, "#ffffff")}">${page.elements.map((element) => elementMarkup(element, data, pageOffset + index + 1)).join("")}</section>`
+    );
+    yield 0.3 + (index + 1) / pages.length * 0.7;
+  }
+  const markup = parts.join("");
   return `<!doctype html><html><head><meta charset="utf-8"><title>${escapeHtml(document.name)}</title><style>${fontStyles}${pageStyles}*{box-sizing:border-box}html,body{margin:0;padding:0}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}.pd-page{position:relative;overflow:hidden;break-after:page;page-break-after:always}.pd-page:last-child{break-after:auto;page-break-after:auto}.pd-element{position:absolute;overflow:hidden;transform-origin:center center}.pd-element>svg{display:block;width:100%;height:100%}.pd-text{text-spacing-trim:space-all;text-autospace:no-autospace;width:100%;height:100%;display:flex;flex-direction:column;white-space:pre-wrap;overflow:hidden;overflow-wrap:anywhere}.pd-media,.pd-watermark{display:block;width:100%;height:100%}.pd-media{object-fit:contain}.pd-watermark{display:grid;overflow:hidden}.pd-watermark span{display:flex;align-items:center;justify-content:center;white-space:nowrap}.pd-table{border-collapse:collapse;width:100%;table-layout:fixed}.pd-table th,.pd-table td{border:var(--pd-border);padding:0 1mm;overflow:hidden;overflow-wrap:anywhere}.pd-table th{font-weight:600}.pd-divider{position:absolute;left:0;top:50%;width:100%;height:0}.pd-element:has(>.pd-divider[style*="border-left"]){overflow:visible}.pd-element .pd-divider[style*="border-left"]{left:50%;top:0;width:0;height:100%}@media print{.pd-page{margin:0}}</style></head><body>${markup}</body></html>`;
 }
 function printPrintDesignHtml(popup, html) {
@@ -3994,47 +4948,73 @@ function printPrintDesignHtml(popup, html) {
   if (popup.document.readyState === "complete") print();
   else popup.addEventListener("load", print, { once: true });
 }
-
-// src/interaction/geometry.ts
-var RESIZE_HANDLES = [
-  "nw",
-  "ne",
-  "se",
-  "sw",
-  "n",
-  "s",
-  "w",
-  "e"
-];
-function rotatePoint2(point, center, radians) {
-  const x = point.x - center.x;
-  const y = point.y - center.y;
-  const cosine = Math.cos(radians);
-  const sine = Math.sin(radians);
-  return {
-    x: center.x + x * cosine - y * sine,
-    y: center.y + x * sine + y * cosine
-  };
-}
-function getSelectionRect(element, scale) {
-  const minimumSize = 12 / scale;
-  const width = Math.max(element.width, minimumSize);
-  const height = Math.max(element.height, minimumSize);
-  return {
-    x: element.x - (width - element.width) / 2,
-    y: element.y - (height - element.height) / 2,
-    width,
-    height
+function transformPrintDesignToHtml(document, options = {}) {
+  const task = generatePrintHtml(document, options);
+  let next = task.next();
+  while (!next.done) next = task.next();
+  return next.value;
+}
+async function transformPrintDesignToHtmlAsync(document, options = {}) {
+  const task = generatePrintHtml(document, options);
+  while (true) {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    options.signal?.throwIfAborted();
+    const deadline = performance.now() + 8;
+    do {
+      const next = task.next();
+      if (next.done) return next.value;
+      options.onProgress?.(next.value);
+    } while (performance.now() < deadline);
+  }
+}
+async function* transformPrintDesignToHtmlBatches(document, options) {
+  const limit = Math.max(1, Math.floor(options.pagesPerBatch));
+  if (!Number.isFinite(limit)) throw new RangeError("\u6BCF\u6B21\u6253\u5370\u9875\u6570\u5FC5\u987B\u662F\u6B63\u6574\u6570");
+  let buffer = [];
+  let offset = 0;
+  const render = async () => {
+    const task = generatePrintHtml(document, options, buffer, offset);
+    while (true) {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      options.signal?.throwIfAborted();
+      const deadline = performance.now() + 8;
+      do {
+        const next = task.next();
+        if (next.done) return next.value;
+      } while (performance.now() < deadline);
+    }
   };
-}
-function getRotatedRectangleCorner(rect, rotation, handle) {
-  const x = handle.includes("w") ? rect.x : handle.includes("e") ? rect.x + rect.width : rect.x + rect.width / 2;
-  const y = handle.includes("n") ? rect.y : handle.includes("s") ? rect.y + rect.height : rect.y + rect.height / 2;
-  return rotatePoint2(
-    { x, y },
-    { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 },
-    rotation * Math.PI / 180
-  );
+  for (let index = 0; index < document.pages.length; index++) {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    options.signal?.throwIfAborted();
+    const pages = paginatePrintDesignDocument(
+      { ...document, pages: [document.pages[index]] },
+      options.data ?? {}
+    ).pages;
+    for (let pageIndex = 0; pageIndex < pages.length; pageIndex++) {
+      buffer.push(pages[pageIndex]);
+      if (buffer.length === limit) {
+        const html = await render();
+        yield {
+          html,
+          firstPage: offset + 1,
+          lastPage: offset + buffer.length,
+          hasMore: pageIndex + 1 < pages.length || index + 1 < document.pages.length
+        };
+        offset += buffer.length;
+        buffer = [];
+        options.signal?.throwIfAborted();
+      }
+    }
+    options.onProgress?.((index + 1) / document.pages.length);
+  }
+  if (buffer.length)
+    yield {
+      html: await render(),
+      firstPage: offset + 1,
+      lastPage: offset + buffer.length,
+      hasMore: false
+    };
 }
 
 // src/interaction/table-column-resize.ts
@@ -4060,215 +5040,41 @@ function hitTableColumnBoundary(element, point, scale, _document) {
     offset += widths[i];
     const edge = offset * 25.4 / 96;
     if (Math.abs(local.x - element.x - edge) * scale <= 5)
-      return {
-        elementId: element.id,
-        boundary: i,
-        widths,
-        columns: element.columns,
-        rotation: element.rotation ?? 0
-      };
-  }
-}
-function resizeTableColumns(session, dx, dy) {
-  const angle = session.rotation * Math.PI / 180;
-  const delta = (dx * Math.cos(angle) + dy * Math.sin(angle)) * 96 / 25.4;
-  const widths = [...session.widths];
-  const i = session.boundary;
-  const minimum = Math.min(8, widths[i], widths[i + 1]);
-  const change = Math.max(
-    minimum - widths[i],
-    Math.min(widths[i + 1] - minimum, delta)
-  );
-  widths[i] += change;
-  widths[i + 1] -= change;
-  let index = 0;
-  const map = (columns) => columns.map((column) => {
-    if (column.hidden) return column;
-    if (column.children?.length)
-      return { ...column, children: map(column.children) };
-    const width = widths[index++];
-    return width == null ? column : {
-      ...column,
-      width,
-      minWidth: Math.min(column.minWidth ?? 60, width),
-      maxWidth: Math.max(column.maxWidth ?? 480, width)
-    };
-  });
-  return map(session.columns);
-}
-
-// src/helper/measurement-layout.ts
-function measurementObstacles(elements, scale) {
-  return elements.flatMap((element) => {
-    const rect = getSelectionRect(element, scale);
-    const angle = element.rotation ?? 0;
-    const corners = RESIZE_HANDLES.map(
-      (handle) => getRotatedRectangleCorner(rect, angle, handle)
-    );
-    const center = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
-    const stem = rotatePoint2(
-      { x: center.x, y: rect.y },
-      center,
-      angle * Math.PI / 180
-    );
-    const rotate = rotatePoint2(
-      { x: center.x, y: rect.y - 17 / scale },
-      center,
-      angle * Math.PI / 180
-    );
-    return [
-      ...[...corners, rotate].map((p) => ({
-        x: p.x * scale - 10,
-        y: p.y * scale - 10,
-        width: 20,
-        height: 20
-      })),
-      {
-        x: Math.min(stem.x, rotate.x) * scale - 5,
-        y: Math.min(stem.y, rotate.y) * scale - 5,
-        width: Math.abs(stem.x - rotate.x) * scale + 10,
-        height: Math.abs(stem.y - rotate.y) * scale + 10
-      }
-    ];
-  });
-}
-function placeMeasurement(line, textWidth, obstacles, viewport) {
-  const horizontal = line.y1 === line.y2;
-  const intersects = (a, b) => a.x <= b.x + b.width && a.x + a.width >= b.x && a.y <= b.y + b.height && a.y + a.height >= b.y;
-  const limit = horizontal ? viewport.height : viewport.width;
-  for (let step = 0; step <= Math.ceil(limit / 16); step++) {
-    for (const sign of step === 0 ? [1] : [1, -1]) {
-      const offset = step * 16 * sign;
-      const x1 = line.x1 + (horizontal ? 0 : offset), x2 = line.x2 + (horizontal ? 0 : offset);
-      const y1 = line.y1 + (horizontal ? offset : 0), y2 = line.y2 + (horizontal ? offset : 0);
-      const textX = (x1 + x2) / 2 + 4, textY = (y1 + y2) / 2 - 4;
-      const boxes = [
-        {
-          x: Math.min(x1, x2) - 3,
-          y: Math.min(y1, y2) - 3,
-          width: Math.abs(x2 - x1) + 6,
-          height: Math.abs(y2 - y1) + 6
-        },
-        { x: textX - 2, y: textY - 12, width: textWidth + 4, height: 16 }
-      ];
-      if (boxes.some(
-        (b) => b.x < 0 || b.y < 0 || b.x + b.width > viewport.width || b.y + b.height > viewport.height
-      ))
-        continue;
-      if (boxes.some((b) => obstacles.some((o) => intersects(b, o)))) continue;
-      return { x1, y1, x2, y2, textX, textY };
-    }
-  }
-  return null;
-}
-
-// src/helper/alignment.ts
-function elementBounds(element) {
-  const angle = (element.rotation ?? 0) * Math.PI / 180;
-  const width = Math.abs(element.width * Math.cos(angle)) + Math.abs(element.height * Math.sin(angle));
-  const height = Math.abs(element.width * Math.sin(angle)) + Math.abs(element.height * Math.cos(angle));
-  return {
-    x: element.x + (element.width - width) / 2,
-    y: element.y + (element.height - height) / 2,
-    width,
-    height
-  };
-}
-function snapCoordinate(value, targets, tolerance) {
-  return targets.reduce(
-    (best, target) => Math.abs(target - value) <= tolerance && Math.abs(target - value) < Math.abs(best - value) ? target : best,
-    targets.find((target) => Math.abs(target - value) <= tolerance) ?? value
-  );
-}
-function guideTargets(page, axis) {
-  const vertical = axis === "vertical";
-  const size = vertical ? page.width : page.height;
-  const margins = page.margins ?? { top: 10, right: 10, bottom: 10, left: 10 };
-  return [
-    0,
-    size / 2,
-    size,
-    vertical ? margins.left : margins.top,
-    size - (vertical ? margins.right : margins.bottom),
-    ...page.elements.filter((e) => e.visible !== false).flatMap((e) => {
-      const b = elementBounds(e);
-      const start = vertical ? b.x : b.y, length = vertical ? b.width : b.height;
-      return [start, start + length / 2, start + length];
-    })
-  ];
-}
-function nearestMeasurements(page, selectedIds) {
-  const selected = page.elements.filter((e) => selectedIds.includes(e.id) && e.visible !== false).map(elementBounds);
-  if (!selected.length) return [];
-  const left = Math.min(...selected.map((b) => b.x)), top = Math.min(...selected.map((b) => b.y));
-  const right = Math.max(...selected.map((b) => b.x + b.width)), bottom = Math.max(...selected.map((b) => b.y + b.height));
-  const result = /* @__PURE__ */ new Map();
-  const add = (key, x1, y1, x2, y2) => {
-    const distance = Math.hypot(x2 - x1, y2 - y1);
-    if (!result.has(key) || distance < result.get(key).distance)
-      result.set(key, { x1, y1, x2, y2, distance });
-  };
-  for (const e of page.elements) {
-    if (selectedIds.includes(e.id) || e.visible === false) continue;
-    const b = elementBounds(e), r = b.x + b.width, d = b.y + b.height;
-    if (b.y <= bottom && d >= top) {
-      const y = (Math.max(top, b.y) + Math.min(bottom, d)) / 2;
-      if (r <= left) add("left", r, y, left, y);
-      if (b.x >= right) add("right", right, y, b.x, y);
-    }
-    if (b.x <= right && r >= left) {
-      const x = (Math.max(left, b.x) + Math.min(right, r)) / 2;
-      if (d <= top) add("top", x, d, x, top);
-      if (b.y >= bottom) add("bottom", x, bottom, x, b.y);
-    }
-  }
-  return [...result.values()];
-}
-function drawMeasurements(context, page, selectedIds, scale, unit = "mm") {
-  context.save();
-  context.strokeStyle = "#e11d48";
-  context.fillStyle = "#e11d48";
-  context.font = "11px sans-serif";
-  context.setLineDash([]);
-  context.lineWidth = 1;
-  const obstacles = measurementObstacles(
-    page.elements.filter(
-      (e) => selectedIds.includes(e.id) && e.visible !== false
-    ),
-    scale
-  );
-  context.textAlign = "left";
-  context.textBaseline = "alphabetic";
-  for (const m of nearestMeasurements(page, selectedIds)) {
-    const label = formatDisplayUnit(m.distance, unit);
-    const placement = placeMeasurement(
-      {
-        x1: m.x1 * scale,
-        y1: m.y1 * scale,
-        x2: m.x2 * scale,
-        y2: m.y2 * scale
-      },
-      context.measureText(label).width,
-      obstacles,
-      { width: page.width * scale, height: page.height * scale }
-    );
-    if (!placement) continue;
-    const { x1, y1, x2, y2, textX, textY } = placement;
-    const horizontal = y1 === y2;
-    context.beginPath();
-    context.moveTo(x1, y1);
-    context.lineTo(x2, y2);
-    for (const [x, y] of [
-      [x1, y1],
-      [x2, y2]
-    ]) {
-      context.moveTo(x - (horizontal ? 0 : 3), y - (horizontal ? 3 : 0));
-      context.lineTo(x + (horizontal ? 0 : 3), y + (horizontal ? 3 : 0));
-    }
-    context.stroke();
-    context.fillText(label, textX, textY);
+      return {
+        elementId: element.id,
+        boundary: i,
+        widths,
+        columns: element.columns,
+        rotation: element.rotation ?? 0
+      };
   }
-  context.restore();
+}
+function resizeTableColumns(session, dx, dy) {
+  const angle = session.rotation * Math.PI / 180;
+  const delta = (dx * Math.cos(angle) + dy * Math.sin(angle)) * 96 / 25.4;
+  const widths = [...session.widths];
+  const i = session.boundary;
+  const minimum = Math.min(8, widths[i], widths[i + 1]);
+  const change = Math.max(
+    minimum - widths[i],
+    Math.min(widths[i + 1] - minimum, delta)
+  );
+  widths[i] += change;
+  widths[i + 1] -= change;
+  let index = 0;
+  const map = (columns) => columns.map((column) => {
+    if (column.hidden) return column;
+    if (column.children?.length)
+      return { ...column, children: map(column.children) };
+    const width = widths[index++];
+    return width == null ? column : {
+      ...column,
+      width,
+      minWidth: Math.min(column.minWidth ?? 60, width),
+      maxWidth: Math.max(column.maxWidth ?? 480, width)
+    };
+  });
+  return map(session.columns);
 }
 
 // src/helper/group-resize.ts
@@ -4451,6 +5257,94 @@ function resolvePrintDesignDebugOptions(debug) {
   return { ...DEFAULT_PRINT_DESIGN_DEBUG_OPTIONS, ...debug };
 }
 
+// src/interaction/table-selectors.ts
+function tableSelectors(element, data = {}) {
+  const leaves = tableLeafColumns(element.columns).filter(
+    (column) => !column.hidden
+  );
+  if (!leaves.length) return [];
+  const widths = leaves.map((column) => Math.max(1, column.width ?? 100));
+  const total = widths.reduce((sum, value) => sum + value, 0);
+  const headerCount = element.showHeader === false ? 0 : tableHeaderDepth(element.columns);
+  const rowLimit = Math.max(0, Math.floor(element.printRowCount ?? 0));
+  const bodyCount = rowLimit ? Math.min(resolveTableRows(element, data).length, rowLimit) : resolveTableRows(element, data).length;
+  const strip = 6;
+  const selectors = [
+    {
+      kind: "all",
+      index: 0,
+      x: element.x - strip,
+      y: element.y - strip,
+      width: strip,
+      height: strip,
+      label: "\u25E2"
+    }
+  ];
+  let left = element.x;
+  for (const [index, width] of widths.entries()) {
+    const actualWidth = element.width * width / total;
+    let number = index + 1;
+    let label = "";
+    while (number > 0) {
+      number--;
+      label = String.fromCharCode(65 + number % 26) + label;
+      number = Math.floor(number / 26);
+    }
+    selectors.push({
+      kind: "column",
+      index,
+      x: left,
+      y: element.y - strip,
+      width: actualWidth,
+      height: strip,
+      label
+    });
+    left += actualWidth;
+  }
+  let top = element.y;
+  for (let index = 0; index < headerCount; index++) {
+    selectors.push({
+      kind: "row",
+      area: "header",
+      index,
+      x: element.x - strip,
+      y: top,
+      width: strip,
+      height: element.headerRowHeight ?? 9,
+      label: `H${index + 1}`
+    });
+    top += element.headerRowHeight ?? 9;
+  }
+  for (let index = 0; index < bodyCount; index++) {
+    selectors.push({
+      kind: "row",
+      area: "body",
+      index,
+      x: element.x - strip,
+      y: top,
+      width: strip,
+      height: element.rowHeight ?? 8,
+      label: String(index + 1)
+    });
+    top += element.rowHeight ?? 8;
+  }
+  return selectors;
+}
+function hitTableSelector(element, point, data = {}) {
+  const center = {
+    x: element.x + element.width / 2,
+    y: element.y + resolvedTableHeight(element, data) / 2
+  };
+  const local = rotatePoint2(
+    point,
+    center,
+    -(element.rotation ?? 0) * Math.PI / 180
+  );
+  return tableSelectors(element, data).find(
+    (selector) => local.x >= selector.x && local.x < selector.x + selector.width && local.y >= selector.y && local.y < selector.y + selector.height
+  );
+}
+
 // src/interaction/selection.ts
 function shouldPrioritizeSelectionHandle(hitElementId, selectedElementIds) {
   return hitElementId === void 0 || selectedElementIds.includes(hitElementId);
@@ -4952,13 +5846,16 @@ var PrintDesignTextEditor = class {
 function canEditTable(element) {
   return element.type === "table" && element.dataMode !== "binding" && !element.locked && element.visible !== false;
 }
-function hitTableCell(element, point, document) {
+function hitTableCell(element, point, document, data = {}) {
   const ctx = document.createElement("canvas").getContext("2d");
   if (!ctx) return;
   const scale = 96 / 25.4;
   const local = rotatePoint2(
     point,
-    { x: element.x + element.width / 2, y: element.y + element.height / 2 },
+    {
+      x: element.x + element.width / 2,
+      y: element.y + resolvedTableHeight(element, data) / 2
+    },
     -(element.rotation ?? 0) * Math.PI / 180
   );
   const x = (local.x - element.x) * scale;
@@ -4968,14 +5865,14 @@ function hitTableCell(element, point, document) {
     x: 0,
     y: 0,
     width: element.width * scale,
-    height: element.height * scale,
+    height: resolvedTableHeight(element, data) * scale,
     scale,
-    data: {}
+    data
   }).find(
     ({ rect }) => x >= rect.x && x < rect.x + rect.width && y >= rect.y && y < rect.y + rect.height
   );
 }
-function tableCellText(element, cell, text) {
+function tableCellText(element, cell, text, data = {}) {
   const scale = 96 / 25.4;
   const { rect, column } = cell;
   const width = rect.width / scale;
@@ -4985,7 +5882,10 @@ function tableCellText(element, cell, text) {
       x: element.x + rect.x / scale + width / 2,
       y: element.y + rect.y / scale + height / 2
     },
-    { x: element.x + element.width / 2, y: element.y + element.height / 2 },
+    {
+      x: element.x + element.width / 2,
+      y: element.y + resolvedTableHeight(element, data) / 2
+    },
     (element.rotation ?? 0) * Math.PI / 180
   );
   return {
@@ -4998,7 +5898,7 @@ function tableCellText(element, cell, text) {
     height,
     rotation: element.rotation,
     fontSize: element.fontSize ?? 10,
-    textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left",
+    textAlign: (column.align ?? column.cellStyle?.textAlign ?? element.cellAlign) === "right" ? "right" : (column.align ?? column.cellStyle?.textAlign ?? element.cellAlign) === "center" ? "center" : "left",
     verticalAlign: column.cellStyle?.verticalAlign ?? element.cellVerticalAlign ?? "middle",
     color: element.colors?.body?.color
   };
@@ -5027,11 +5927,70 @@ function parseTableCell(text, initial) {
 var PrintDesignTableEditing = class extends PrintDesignBase {
   constructor() {
     super(...arguments);
+    __publicField(this, "tableCellSelection", null);
     __publicField(this, "tableEditing", null);
   }
+  /** 返回表格单元格选区，供右键菜单与选区绘制使用。 */
+  getTableCellSelection() {
+    return this.tableCellSelection && { ...this.tableCellSelection };
+  }
+  /** 选择表格整行、整列或全部单元格。 */
+  selectTableSelector(elementId, kind, index = 0, area = "body") {
+    const element = this.getActivePage().elements.find(
+      (item) => item.id === elementId
+    );
+    if (element?.type !== "table") return this;
+    const columns = tableLeafColumns(element.columns).filter(
+      (item) => !item.hidden
+    ).length;
+    const rows = resolveTableRows(element, this.options.data).length;
+    const headerRows = element.showHeader === false ? 0 : tableHeaderDepth(element.columns);
+    if (!columns || kind === "column" && (index < 0 || index >= columns) || kind === "row" && (index < 0 || index >= (area === "header" ? headerRows : rows)))
+      return this;
+    this.tableCellSelection = {
+      elementId,
+      area: kind === "row" ? area : "body",
+      selectorKind: kind,
+      startRow: kind === "row" ? index : 0,
+      endRow: kind === "row" ? index : Math.max(0, rows - 1),
+      startColumn: kind === "column" ? index : 0,
+      endColumn: kind === "column" ? index : columns - 1
+    };
+    this.selectElements([elementId]);
+    return this;
+  }
+  /** 选中一个单元格，按 Shift 扩展为矩形区域。 */
+  selectTableCellAtPoint(element, point, extend = false) {
+    const cell = hitTableCell(
+      element,
+      point,
+      this.host.ownerDocument,
+      this.options.data
+    );
+    if (!cell) return false;
+    const current = this.tableCellSelection;
+    if (extend && current?.elementId === element.id && current.area === cell.area) {
+      this.tableCellSelection = {
+        ...current,
+        endRow: cell.rowIndex,
+        endColumn: cell.columnIndex
+      };
+    } else {
+      this.tableCellSelection = {
+        elementId: element.id,
+        area: cell.area,
+        startRow: cell.rowIndex,
+        endRow: cell.rowIndex,
+        startColumn: cell.columnIndex,
+        endColumn: cell.columnIndex
+      };
+    }
+    return true;
+  }
   beginTableEditing(element, point) {
     const cell = hitTableCell(element, point, this.host.ownerDocument);
-    if (!cell || !element.dataSource[cell.rowIndex]) return;
+    if (!cell || cell.area !== "body" || !element.dataSource[cell.rowIndex])
+      return;
     this.tableEditing?.editor.finish(false);
     this.selectElements([element.id]);
     const initial = readTableCell(
@@ -5076,7 +6035,10 @@ var PrintDesignTableEditing = class extends PrintDesignBase {
       }
     );
     this.tableEditing = { editor, cell, snapshot };
-    editor.mount(tableCellText(element, cell, text), this.pageOrigin());
+    editor.mount(
+      tableCellText(element, cell, text, this.options.data),
+      this.pageOrigin()
+    );
     this.render();
   }
   /** 外部变更和选中状态变化使草稿失效；缩放、平移则同步浮层位置。 */
@@ -5091,7 +6053,12 @@ var PrintDesignTableEditing = class extends PrintDesignBase {
       return;
     }
     session.editor.update(
-      tableCellText(element, session.cell, session.editor.initialText),
+      tableCellText(
+        element,
+        session.cell,
+        session.editor.initialText,
+        this.options.data
+      ),
       this.pageOrigin()
     );
   }
@@ -5369,6 +6336,48 @@ var PrintDesignRenderer = class extends PrintDesignTextEditing {
         drawPrintDesignBindingIndicator(ctx, element, scale, this.options);
     }
     ctx.restore();
+    if (!preview && !this.options.readonly && this.selectedElementIds.length === 1) {
+      const table = page.elements.find(
+        (item) => item.id === this.selectedElementIds[0]
+      );
+      if (table?.type === "table" && table.visible !== false) {
+        const active = this.tableCellSelection?.elementId === table.id ? this.tableCellSelection : null;
+        ctx.save();
+        const centerX = (table.x + table.width / 2) * scale;
+        const centerY = (table.y + resolvedTableHeight(table, this.options.data) / 2) * scale;
+        ctx.translate(centerX, centerY);
+        ctx.rotate((table.rotation ?? 0) * Math.PI / 180);
+        ctx.translate(-centerX, -centerY);
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.font = `${Math.max(8, Math.min(11, 9 * this.zoom))}px sans-serif`;
+        for (const selector of tableSelectors(table, this.options.data)) {
+          const selected = active && (active.selectorKind === "all" || selector.kind === "column" && active.selectorKind === "column" && selector.index === active.startColumn || selector.kind === "row" && active.selectorKind === "row" && selector.area === active.area && selector.index === active.startRow);
+          ctx.fillStyle = selected ? "#dbeafe" : "#f1f5f9";
+          ctx.strokeStyle = "#94a3b8";
+          ctx.lineWidth = 1;
+          ctx.fillRect(
+            selector.x * scale,
+            selector.y * scale,
+            selector.width * scale,
+            selector.height * scale
+          );
+          ctx.strokeRect(
+            selector.x * scale,
+            selector.y * scale,
+            selector.width * scale,
+            selector.height * scale
+          );
+          ctx.fillStyle = selected ? "#1677ff" : "#475569";
+          ctx.fillText(
+            selector.label,
+            (selector.x + selector.width / 2) * scale,
+            (selector.y + selector.height / 2) * scale
+          );
+        }
+        ctx.restore();
+      }
+    }
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     drawPrintDesignGuideExtensions({
       guideColor: this.options.guideColor,
@@ -5484,7 +6493,7 @@ var PrintDesignRenderer = class extends PrintDesignTextEditing {
       if (!element || !resolvePrintDesignElementVisible(element, this.options.data))
         continue;
       const rotation = (element.rotation ?? 0) * Math.PI / 180;
-      const selectionRect = getSelectionRect(element, scale);
+      const selectionRect = getSelectionRect(element, scale, this.options.data);
       const x = selectionRect.x * scale;
       const y = selectionRect.y * scale;
       const width = selectionRect.width * scale;
@@ -5500,6 +6509,7 @@ var PrintDesignRenderer = class extends PrintDesignTextEditing {
       ctx.setLineDash([2, 1.5]);
       ctx.strokeRect(x, y, width, height);
       ctx.setLineDash([]);
+      if (element.type === "table") this.drawTableCellSelection(element, scale);
       const rotateHandleY = y - 17;
       ctx.beginPath();
       ctx.moveTo(cx, y);
@@ -5541,6 +6551,69 @@ var PrintDesignRenderer = class extends PrintDesignTextEditing {
       ctx.restore();
     }
   }
+  drawTableCellSelection(element, scale) {
+    const selection = this.tableCellSelection;
+    if (!selection || selection.elementId !== element.id) return;
+    const visible = tableLeafColumns(
+      element.columns.filter((column) => !column.hidden)
+    ).filter((column) => !column.hidden);
+    const weights = visible.map((column) => Math.max(1, column.width ?? 100));
+    const total = weights.reduce((sum, value) => sum + value, 0);
+    if (selection.selectorKind === "all" || selection.selectorKind === "column") {
+      if (total <= 0) return;
+      const left2 = selection.selectorKind === "all" ? element.x : element.x + element.width * weights.slice(0, selection.startColumn).reduce((sum, value) => sum + value, 0) / total;
+      const width = selection.selectorKind === "all" ? element.width : element.width * (weights[selection.startColumn] ?? 0) / total;
+      const ctx2 = this.context;
+      ctx2.fillStyle = "rgba(22,119,255,0.12)";
+      ctx2.strokeStyle = "#1677ff";
+      ctx2.fillRect(
+        left2 * scale,
+        element.y * scale,
+        width * scale,
+        resolvedTableHeight(element, this.options.data) * scale
+      );
+      ctx2.strokeRect(
+        left2 * scale,
+        element.y * scale,
+        width * scale,
+        resolvedTableHeight(element, this.options.data) * scale
+      );
+      return;
+    }
+    const isHeader = selection.area === "header";
+    const rows = resolveTableRows(element, this.options.data);
+    const limit = Math.max(0, Math.floor(element.printRowCount ?? 0));
+    const resolvedCells = isHeader ? tableHeaderCells(element) : resolveTableCells(
+      element,
+      limit ? rows.slice(0, limit) : rows,
+      visible
+    );
+    const bounds = expandTableCellSelection(resolvedCells, selection);
+    const firstColumn = Math.max(0, bounds.firstColumn);
+    const lastColumn = Math.min(visible.length - 1, bounds.lastColumn);
+    if (total <= 0 || lastColumn < firstColumn) return;
+    const firstRow = Math.max(0, bounds.firstRow);
+    const lastRow = bounds.lastRow;
+    const left = element.x + element.width * weights.slice(0, firstColumn).reduce((sum, value) => sum + value, 0) / total;
+    const right = element.x + element.width * weights.slice(0, lastColumn + 1).reduce((sum, value) => sum + value, 0) / total;
+    const top = element.y + (isHeader || element.showHeader === false ? 0 : tableHeaderDepth(element.columns) * (element.headerRowHeight ?? 9)) + firstRow * (isHeader ? element.headerRowHeight ?? 9 : element.rowHeight ?? 8);
+    const height = (lastRow - firstRow + 1) * (isHeader ? element.headerRowHeight ?? 9 : element.rowHeight ?? 8);
+    const ctx = this.context;
+    ctx.fillStyle = "rgba(22,119,255,0.12)";
+    ctx.strokeStyle = "#1677ff";
+    ctx.fillRect(
+      left * scale,
+      top * scale,
+      (right - left) * scale,
+      height * scale
+    );
+    ctx.strokeRect(
+      left * scale,
+      top * scale,
+      (right - left) * scale,
+      height * scale
+    );
+  }
   /** 组合四边控制柄与外部图层重叠时，优先保留其它图层的选择。 */
   hitTestGroupResizeHandle(point, page, scale) {
     if (this.options.readonly || page.elements.some(
@@ -5562,7 +6635,9 @@ var PrintDesignRenderer = class extends PrintDesignTextEditing {
     if (!element || element.groupPath?.length || element.locked || !resolvePrintDesignElementVisible(element, this.options.data))
       return void 0;
     const tolerance = 8 / scale;
-    const selectionRect = getSelectionRect(element, scale);
+    const selectionRect = getSelectionRect(element, scale, this.options.data);
+    if (element.type === "table" && point.y > selectionRect.y + 2 / scale && point.y < selectionRect.y + selectionRect.height - 2 / scale && hitTableColumnBoundary(element, point, scale, this.host.ownerDocument))
+      return void 0;
     for (const handle of RESIZE_HANDLES) {
       const corner = getRotatedRectangleCorner(
         selectionRect,
@@ -5581,7 +6656,7 @@ var PrintDesignRenderer = class extends PrintDesignTextEditing {
     );
     if (!element || element.groupPath?.length || element.locked || !resolvePrintDesignElementVisible(element, this.options.data))
       return void 0;
-    const selectionRect = getSelectionRect(element, scale);
+    const selectionRect = getSelectionRect(element, scale, this.options.data);
     const center = {
       x: selectionRect.x + selectionRect.width / 2,
       y: selectionRect.y + selectionRect.height / 2
@@ -5595,7 +6670,7 @@ var PrintDesignRenderer = class extends PrintDesignTextEditing {
   }
   getRotatedCorner(element, handle, scale) {
     return getRotatedRectangleCorner(
-      getSelectionRect(element, scale),
+      getSelectionRect(element, scale, this.options.data),
       element.rotation ?? 0,
       handle
     );
@@ -5701,6 +6776,27 @@ var PrintDesignInteraction = class extends PrintDesignRenderer {
           return;
         }
       }
+      if (!this.options.readonly && !event.metaKey && !event.ctrlKey) {
+        const selectedTable = [...page.elements].reverse().find(
+          (item) => item.type === "table" && this.selectedElementIds.includes(item.id)
+        );
+        if (selectedTable?.type === "table") {
+          const selector = hitTableSelector(
+            selectedTable,
+            point,
+            this.options.data
+          );
+          if (selector) {
+            this.selectTableSelector(
+              selectedTable.id,
+              selector.kind,
+              selector.index,
+              selector.area
+            );
+            return;
+          }
+        }
+      }
       const hit = hitTestPrintDesignPage(
         page,
         point,
@@ -5767,7 +6863,7 @@ var PrintDesignInteraction = class extends PrintDesignRenderer {
               x: element.x,
               y: element.y,
               width: element.width,
-              height: element.height
+              height: element.type === "table" ? resolvedTableHeight(element, this.options.data) : element.height
             },
             anchor,
             rotation: element.rotation ?? 0
@@ -5782,7 +6878,7 @@ var PrintDesignInteraction = class extends PrintDesignRenderer {
         );
         return;
       }
-      if (!this.options.readonly && (hit?.type === "table" || hit?.type === "pivotTable") && this.selectedElementIds.length === 1 && this.selectedElementIds[0] === hit.id) {
+      if (!this.options.readonly && (hit?.type === "table" || hit?.type === "pivotTable") && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
         const tableColumn = hitTableColumnBoundary(
           hit.type === "pivotTable" ? materializePivotTable(hit, this.options.data) : hit,
           point,
@@ -5790,6 +6886,11 @@ var PrintDesignInteraction = class extends PrintDesignRenderer {
           this.container.ownerDocument
         );
         if (tableColumn) {
+          if (this.selectedElementIds.length !== 1 || this.selectedElementIds[0] !== hit.id) {
+            this.selectedElementIds = [hit.id];
+            this.emitSelection();
+            this.render();
+          }
           this.canvas.setPointerCapture?.(event.pointerId);
           this.dragSession = {
             mode: "table-column",
@@ -5805,6 +6906,13 @@ var PrintDesignInteraction = class extends PrintDesignRenderer {
           return;
         }
       }
+      if (hit?.type === "table" && !this.options.readonly && !hit.locked && !event.metaKey && !event.ctrlKey) {
+        if (this.selectTableCellAtPoint(hit, point, event.shiftKey) && event.shiftKey) {
+          this.selectElements([hit.id]);
+          this.render();
+          return;
+        }
+      }
       if (!hit) {
         const initialIds = event.shiftKey || event.metaKey || event.ctrlKey ? [...this.selectedElementIds] : [];
         this.selectedElementIds = initialIds;
@@ -6275,6 +7383,15 @@ var PrintDesignInteraction = class extends PrintDesignRenderer {
       return;
     }
     const insidePage = cursorPoint.x >= 0 && cursorPoint.y >= 0 && cursorPoint.x <= page.width && cursorPoint.y <= page.height;
+    if (!this.spacePressed && !this.options.readonly && this.selectedElementIds.length === 1) {
+      const table = page.elements.find(
+        (item) => item.id === this.selectedElementIds[0]
+      );
+      if (table?.type === "table" && hitTableSelector(table, cursorPoint, this.options.data)) {
+        this.canvas.style.cursor = "pointer";
+        return;
+      }
+    }
     if (this.spacePressed || !insidePage) {
       this.canvas.style.cursor = "grab";
       return;
@@ -6320,7 +7437,7 @@ var PrintDesignInteraction = class extends PrintDesignRenderer {
         return;
       }
     }
-    if (!this.options.readonly && (hit?.type === "table" || hit?.type === "pivotTable") && this.selectedElementIds.length === 1 && this.selectedElementIds[0] === hit.id && hitTableColumnBoundary(
+    if (!this.options.readonly && (hit?.type === "table" || hit?.type === "pivotTable") && !event.shiftKey && !event.metaKey && !event.ctrlKey && hitTableColumnBoundary(
       hit.type === "pivotTable" ? materializePivotTable(hit, this.options.data) : hit,
       cursorPoint,
       origin.scale,
@@ -6382,6 +7499,24 @@ var PrintDesignInteraction = class extends PrintDesignRenderer {
     element.y = Math.round((center.y - height / 2) * 100) / 100;
     element.width = Math.round(width * 100) / 100;
     element.height = Math.round(height * 100) / 100;
+    if (element.type === "table" && vertical) {
+      const totalRows = resolveTableRows(element, this.options.data).length;
+      const limit = Math.max(0, Math.floor(element.printRowCount ?? 0));
+      const count = Math.max(
+        limit ? Math.min(totalRows, limit) : totalRows,
+        element.fillEmptyRows ? limit : 0,
+        1
+      );
+      const header = element.showHeader === false ? 0 : tableHeaderDepth(element.columns) * (element.headerRowHeight ?? 9);
+      const summary = tableContentHeight(
+        { ...element, fillEmptyRows: false, printRowCount: 0 },
+        0
+      ) - header;
+      element.rowHeight = Math.max(
+        1,
+        Math.round((height - header - summary) / count * 100) / 100
+      );
+    }
   }
 };
 function oppositeResizeHandle(handle) {
@@ -6573,12 +7708,244 @@ function alignPrintDesignLayers(page, ids, align) {
   });
 }
 
+// src/model/table-structure.ts
+function insertTableColumn(columns, index, column) {
+  const copy = structuredClone(columns);
+  let position = 0;
+  const walk = (items) => {
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.hidden) continue;
+      const children = item.children?.filter((child) => !child.hidden);
+      if (children?.length) {
+        if (walk(item.children)) return true;
+      } else {
+        if (position === index) {
+          items.splice(i, 0, column);
+          return true;
+        }
+        position++;
+      }
+    }
+    if (position === index && items === copy) {
+      items.push(column);
+      return true;
+    }
+    return false;
+  };
+  walk(copy);
+  return copy;
+}
+function shiftTableCells(cells, axis, index) {
+  return cells?.map((cell) => {
+    const start = axis === "row" ? cell.rowIndex : cell.columnIndex;
+    const span = axis === "row" ? cell.rowSpan ?? 1 : cell.colSpan ?? 1;
+    if (start >= index)
+      return {
+        ...cell,
+        [axis === "row" ? "rowIndex" : "columnIndex"]: start + 1
+      };
+    if (start + span > index)
+      return { ...cell, [axis === "row" ? "rowSpan" : "colSpan"]: span + 1 };
+    return cell;
+  });
+}
+function emptyTableRow(element) {
+  return tableLeafColumns(element.columns).filter((column) => !column.hidden).reduce(
+    (row, column) => writeTableCell(
+      row,
+      column.dataIndex,
+      ["money", "progress", "rate"].includes(column.cellType ?? "") ? 0 : ["checkbox", "radio", "switch"].includes(column.cellType ?? "") ? false : ""
+    ),
+    {}
+  );
+}
+
 // src/engine/print-design-actions.ts
 var PrintDesignActions = class extends PrintDesignGrouping {
   constructor() {
     super(...arguments);
     __publicField(this, "elementClipboard", []);
   }
+  /** 定位画布中的行、列或全选选择器。 */
+  tableSelectorAtClientPoint(clientX, clientY) {
+    if (this.selectedElementIds.length !== 1 || this.options.readonly)
+      return null;
+    const rect = this.canvas.getBoundingClientRect();
+    const origin = this.pageOrigin();
+    const point = {
+      x: (clientX - rect.left - origin.x) / origin.scale,
+      y: (clientY - rect.top - origin.y) / origin.scale
+    };
+    for (const item of [...this.getActivePage().elements].reverse()) {
+      if (item.type !== "table" || item.visible === false || !this.selectedElementIds.includes(item.id))
+        continue;
+      const selector = hitTableSelector(item, point, this.options.data);
+      if (selector)
+        return {
+          elementId: item.id,
+          kind: selector.kind,
+          index: selector.index,
+          area: selector.area
+        };
+    }
+    return null;
+  }
+  /** 定位画布右键所指的表头或表体单元格。 */
+  tableCellAtClientPoint(clientX, clientY) {
+    const rect = this.canvas.getBoundingClientRect();
+    const origin = this.pageOrigin();
+    const point = {
+      x: (clientX - rect.left - origin.x) / origin.scale,
+      y: (clientY - rect.top - origin.y) / origin.scale
+    };
+    const hit = hitTestPrintDesignPage(
+      this.getActivePage(),
+      point,
+      0,
+      this.options.data
+    );
+    if (hit?.type !== "table") return null;
+    const cell = hitTableCell(
+      hit,
+      point,
+      this.host.ownerDocument,
+      this.options.data
+    );
+    return cell ? {
+      elementId: hit.id,
+      area: cell.area,
+      rowIndex: cell.rowIndex,
+      columnIndex: cell.columnIndex
+    } : null;
+  }
+  /** 合并右键单元格与相邻单元格；变更纳入撤销历史。 */
+  mergeTableCell(elementId, rowIndex, columnIndex, rowSpan, colSpan) {
+    if (this.options.readonly) return this;
+    const element = this.getActivePage().elements.find(
+      (item) => item.id === elementId
+    );
+    if (element?.type !== "table" || element.locked) return this;
+    const rows = resolveTableRows(element, this.options.data);
+    const columns = tableLeafColumns(element.columns).filter(
+      (item) => !item.hidden
+    );
+    if (rowIndex < 0 || columnIndex < 0 || rowIndex + rowSpan > rows.length || columnIndex + colSpan > columns.length)
+      return this;
+    if (Array.from(
+      { length: rowSpan },
+      (_, r) => Array.from(
+        { length: colSpan },
+        (_2, c) => coveringTableCell(element.cells, rowIndex + r, columnIndex + c)
+      )
+    ).flat().some(
+      (cell) => cell && (cell.rowIndex !== rowIndex || cell.columnIndex !== columnIndex) && ((cell.rowSpan ?? 1) > 1 || (cell.colSpan ?? 1) > 1)
+    ))
+      return this;
+    this.commitMutation((document) => {
+      const target = this.getPageIn(document).elements.find(
+        (item) => item.id === elementId
+      );
+      if (target?.type !== "table") return;
+      const previous = target.cells?.find(
+        (cell) => cell.rowIndex === rowIndex && cell.columnIndex === columnIndex
+      );
+      target.cells = [
+        ...(target.cells ?? []).filter((cell) => cell !== previous),
+        { ...previous, rowIndex, columnIndex, rowSpan, colSpan }
+      ];
+    });
+    return this;
+  }
+  /** 合并表头选区，保留左上角单元格标题。 */
+  mergeTableHeaderCell(elementId, rowIndex, columnIndex, rowSpan, colSpan) {
+    if (this.options.readonly) return this;
+    const element = this.getActivePage().elements.find(
+      (item) => item.id === elementId
+    );
+    if (element?.type !== "table" || element.locked || element.showHeader === false)
+      return this;
+    const depth = tableHeaderDepth(element.columns);
+    const columns = tableLeafColumns(element.columns).filter(
+      (item) => !item.hidden
+    ).length;
+    if (rowIndex < 0 || columnIndex < 0 || rowSpan < 1 || colSpan < 1 || rowIndex + rowSpan > depth || columnIndex + colSpan > columns)
+      return this;
+    if (rowSpan * colSpan > 1) {
+      const cells = tableHeaderCells(element);
+      const intersects = (cell) => cell.rowIndex < rowIndex + rowSpan && cell.rowIndex + cell.rowSpan > rowIndex && cell.columnIndex < columnIndex + colSpan && cell.columnIndex + cell.colSpan > columnIndex;
+      if (!cells.some(
+        (cell) => cell.rowIndex === rowIndex && cell.columnIndex === columnIndex
+      ) || cells.some(
+        (cell) => intersects(cell) && (cell.rowIndex < rowIndex || cell.columnIndex < columnIndex || cell.rowIndex + cell.rowSpan > rowIndex + rowSpan || cell.columnIndex + cell.colSpan > columnIndex + colSpan)
+      ))
+        return this;
+    }
+    this.commitMutation((document) => {
+      const target = this.getPageIn(document).elements.find(
+        (item) => item.id === elementId
+      );
+      if (target?.type !== "table") return;
+      target.headerCells = [
+        ...(target.headerCells ?? []).filter(
+          (cell) => rowSpan * colSpan === 1 ? cell.rowIndex !== rowIndex || cell.columnIndex !== columnIndex : cell.rowIndex < rowIndex || cell.columnIndex < columnIndex || cell.rowIndex + (cell.rowSpan ?? 1) > rowIndex + rowSpan || cell.columnIndex + (cell.colSpan ?? 1) > columnIndex + colSpan
+        ),
+        ...rowSpan * colSpan > 1 ? [{ rowIndex, columnIndex, rowSpan, colSpan }] : []
+      ];
+    });
+    return this;
+  }
+  /** 在静态表格指定数据行的上方或下方插入空行。 */
+  insertTableRow(elementId, rowIndex, after = true) {
+    if (this.options.readonly) return this;
+    const element = this.getActivePage().elements.find(
+      (item) => item.id === elementId
+    );
+    if (element?.type !== "table" || element.locked || element.dataMode === "binding")
+      return this;
+    const index = Math.max(
+      0,
+      Math.min(element.dataSource.length, rowIndex + (after ? 1 : 0))
+    );
+    this.commitMutation((document) => {
+      const target = this.getPageIn(document).elements.find(
+        (item) => item.id === elementId
+      );
+      if (target?.type !== "table") return;
+      target.dataSource.splice(index, 0, emptyTableRow(target));
+      target.cells = shiftTableCells(target.cells, "row", index);
+    });
+    return this;
+  }
+  /** 在可见叶列的左侧或右侧插入空白列。 */
+  insertTableColumn(elementId, columnIndex, after = true) {
+    if (this.options.readonly) return this;
+    const element = this.getActivePage().elements.find(
+      (item) => item.id === elementId
+    );
+    if (element?.type !== "table" || element.locked) return this;
+    const leaves = tableLeafColumns(element.columns).filter(
+      (item) => !item.hidden
+    );
+    if (columnIndex < 0 || columnIndex >= leaves.length) return this;
+    const index = columnIndex + (after ? 1 : 0);
+    const key = createPrintDesignId("column");
+    this.commitMutation((document) => {
+      const target = this.getPageIn(document).elements.find(
+        (item) => item.id === elementId
+      );
+      if (target?.type !== "table") return;
+      target.columns = insertTableColumn(target.columns, index, {
+        key,
+        dataIndex: key,
+        title: "\u65B0\u5217",
+        width: leaves[columnIndex]?.width ?? 100
+      });
+      target.cells = shiftTableCells(target.cells, "column", index);
+      target.headerCells = shiftTableCells(target.headerCells, "column", index);
+    });
+    return this;
+  }
   /** 画布右键命中选区；点中已选项保留多选，空白清空选区。 */
   selectAtClientPoint(clientX, clientY) {
     const rect = this.canvas.getBoundingClientRect(), origin = this.pageOrigin();
@@ -6594,10 +7961,24 @@ var PrintDesignActions = class extends PrintDesignGrouping {
       this.options.data
     );
     if (hit) {
+      if (hit.type === "table") {
+        const cell = hitTableCell(
+          hit,
+          point,
+          this.host.ownerDocument,
+          this.options.data
+        );
+        const selected = this.tableCellSelection;
+        if (cell && (!selected || selected.elementId !== hit.id || selected.area !== cell.area || cell.rowIndex < Math.min(selected.startRow, selected.endRow) || cell.rowIndex > Math.max(selected.startRow, selected.endRow) || cell.columnIndex < Math.min(selected.startColumn, selected.endColumn) || cell.columnIndex > Math.max(selected.startColumn, selected.endColumn)))
+          this.selectTableCellAtPoint(hit, point);
+      } else this.tableCellSelection = null;
       this.selectElements(
         this.selectedElementIds.includes(hit.id) ? this.selectedElementIds : [hit.id]
       );
-    } else this.selectElements([]);
+    } else {
+      this.tableCellSelection = null;
+      this.selectElements([]);
+    }
     return this;
   }
   /** 复制选中元素，保留组合、数据及样式，不使用系统剪贴板。 */
@@ -6738,12 +8119,50 @@ var PrintDesignActions = class extends PrintDesignGrouping {
 
 // src/engine/print-design.ts
 var PrintDesign = class extends PrintDesignActions {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "temporaryDocumentSnapshot", null);
+  }
+  /** 临时显示演示文档；原文档、选区与撤销记录保留在实例中。 */
+  showTemporaryDocument(document, pageId, elementId) {
+    this.temporaryDocumentSnapshot ?? (this.temporaryDocumentSnapshot = {
+      document: this.getDocument(),
+      activePageId: this.activePageId,
+      elementIds: [...this.selectedElementIds],
+      guide: this.selectedGuide ? { ...this.selectedGuide } : null
+    });
+    this.document = parsePrintDesignDocument(document);
+    this.activePageId = pageId && this.document.pages.some((page) => page.id === pageId) ? pageId : this.document.pages[0].id;
+    this.selectedElementIds = elementId && this.document.pages.find((page) => page.id === this.activePageId)?.elements.some((item) => item.id === elementId) ? [elementId] : [];
+    this.selectedGuide = null;
+    this.options.onActivePageChange?.(this.activePageId);
+    this.emitSelection();
+    this.emitChange();
+    this.render();
+    return this;
+  }
+  /** 恢复临时演示前的文档和选区，保留原有撤销记录。 */
+  restoreTemporaryDocument() {
+    const saved = this.temporaryDocumentSnapshot;
+    if (!saved) return this;
+    this.temporaryDocumentSnapshot = null;
+    this.document = saved.document;
+    this.activePageId = saved.activePageId;
+    this.selectedElementIds = saved.elementIds;
+    this.selectedGuide = saved.guide;
+    this.options.onActivePageChange?.(this.activePageId);
+    this.emitSelection();
+    this.emitChange();
+    this.render();
+    return this;
+  }
   /** 获取文档副本。 */
   getDocument() {
     return clonePrintDesignDocument(this.document);
   }
   /** 替换当前文档并清空撤销历史。 */
   setDocument(document) {
+    this.temporaryDocumentSnapshot = null;
     this.document = parsePrintDesignDocument(document);
     this.activePageId = this.document.pages[0].id;
     this.selectedElementIds = [];
@@ -6871,6 +8290,22 @@ var PrintDesign = class extends PrintDesignActions {
       y: (y - origin.y) / origin.scale
     };
   }
+  /** 获取当前页元素在浏览器视口中的包围盒，包含旋转后的占用范围。 */
+  getElementClientRect(elementId) {
+    const element = this.getActivePage().elements.find(
+      (item) => item.id === elementId
+    );
+    if (!element || element.visible === false) return null;
+    const bounds = elementBounds(element);
+    const origin = this.pageOrigin();
+    const canvas = this.canvas.getBoundingClientRect();
+    return {
+      left: canvas.left + origin.x + bounds.x * origin.scale,
+      top: canvas.top + origin.y + bounds.y * origin.scale,
+      width: bounds.width * origin.scale,
+      height: bounds.height * origin.scale
+    };
+  }
   /** 新增元素并选中。 */
   addElement(element) {
     const next = { ...element, id: element.id ?? createPrintDesignId() };
@@ -7154,4 +8589,6 @@ exports.serializePrintDesignDocument = serializePrintDesignDocument;
 exports.tableLeafColumns = tableLeafColumns;
 exports.toDisplayUnit = toDisplayUnit;
 exports.transformPrintDesignToHtml = transformPrintDesignToHtml;
+exports.transformPrintDesignToHtmlAsync = transformPrintDesignToHtmlAsync;
+exports.transformPrintDesignToHtmlBatches = transformPrintDesignToHtmlBatches;
 exports.writeTableCell = writeTableCell;