whale-code 6.5.5 → 6.5.6

package/dist/server/lib/react-pdf-layout.js

@@ -1,437 +1,606 @@
 // server/lib/react-pdf-layout.ts — Generic React-PDF layout engine
 // Replaces Playwright HTML→PDF with pure Node.js React-PDF rendering.
+
 import React from "react";
-import { Document, Page, Text, View, Image, renderToBuffer, } from "@react-pdf/renderer";
-import { resolveBinding, resolveText, generateQRSvg, } from "./pdf-renderer.js";
+import { Document, Page, Text, View, Image, renderToBuffer } from "@react-pdf/renderer";
+import { resolveBinding, resolveText, generateQRSvg } from "./pdf-renderer.js";
 const e = React.createElement;
+
 // ============================================================================
 // Unit Helpers
 // ============================================================================
+
 /** Convert margin string (e.g. "15mm", "1cm", "72pt", number) to points */
 function toPoints(val, fallback = 42.5) {
-    if (val === undefined || val === null)
-        return fallback;
-    if (typeof val === "number")
-        return val;
-    const num = parseFloat(val);
-    if (isNaN(num))
-        return fallback;
-    if (val.endsWith("mm"))
-        return num * 2.835;
-    if (val.endsWith("cm"))
-        return num * 28.35;
-    if (val.endsWith("in"))
-        return num * 72;
-    if (val.endsWith("pt"))
-        return num;
-    if (val.endsWith("px"))
-        return num * 0.75;
-    return num; // default to points
+  if (val === undefined || val === null) return fallback;
+  if (typeof val === "number") return val;
+  const num = parseFloat(val);
+  if (isNaN(num)) return fallback;
+  if (val.endsWith("mm")) return num * 2.835;
+  if (val.endsWith("cm")) return num * 28.35;
+  if (val.endsWith("in")) return num * 72;
+  if (val.endsWith("pt")) return num;
+  if (val.endsWith("px")) return num * 0.75;
+  return num; // default to points
 }
+
 /** Map page size string to React-PDF page size */
 function mapPageSize(size) {
-    if (!size)
-        return "A4";
-    const s = size.toUpperCase();
-    if (s === "LETTER")
-        return "LETTER";
-    if (s === "LEGAL")
-        return "LEGAL";
-    if (s === "TABLOID")
-        return "TABLOID";
-    return s; // A4, A3, etc. — React-PDF supports these directly
+  if (!size) return "A4";
+  const s = size.toUpperCase();
+  if (s === "LETTER") return "LETTER";
+  if (s === "LEGAL") return "LEGAL";
+  if (s === "TABLOID") return "TABLOID";
+  return s; // A4, A3, etc. — React-PDF supports these directly
 }
+
 // ============================================================================
 // Element Renderer — ports renderElement() from pdf-renderer.ts
 // ============================================================================
+
 function renderElement(el, data, key) {
-    switch (el.type) {
-        case "text": {
-            const text = resolveText(el.content || el.text || "", data);
-            return e(View, { key, style: { marginBottom: 2 } }, e(Text, {
-                style: {
-                    fontSize: el.fontSize || undefined,
-                    color: el.color || undefined,
-                    fontFamily: el.bold ? "Helvetica-Bold" : undefined,
-                    textAlign: el.align || undefined,
-                },
-            }, text));
+  switch (el.type) {
+    case "text":
+      {
+        const text = resolveText(el.content || el.text || "", data);
+        return e(View, {
+          key,
+          style: {
+            marginBottom: 2
+          }
+        }, e(Text, {
+          style: {
+            fontSize: el.fontSize || undefined,
+            color: el.color || undefined,
+            fontFamily: el.bold ? "Helvetica-Bold" : undefined,
+            textAlign: el.align || undefined
+          }
+        }, text));
+      }
+    case "header":
+      {
+        const text = resolveText(el.content || el.text || "", data);
+        return e(View, {
+          key,
+          style: {
+            backgroundColor: el.backgroundColor || undefined,
+            padding: typeof el.padding === "number" ? el.padding : el.padding ? toPoints(el.padding, 0) : undefined,
+            marginBottom: 4
+          }
+        }, e(Text, {
+          style: {
+            fontFamily: "Helvetica-Bold",
+            fontSize: el.fontSize || undefined,
+            color: el.color || undefined,
+            textAlign: el.align || undefined
+          }
+        }, text));
+      }
+    case "image":
+      {
+        let src = el.src || el.url || "";
+        if (el.bind) {
+          const resolved = resolveBinding(el.bind, data);
+          if (typeof resolved === "string") src = resolved;
         }
-        case "header": {
-            const text = resolveText(el.content || el.text || "", data);
-            return e(View, {
-                key,
-                style: {
-                    backgroundColor: el.backgroundColor || undefined,
-                    padding: typeof el.padding === "number" ? el.padding : el.padding ? toPoints(el.padding, 0) : undefined,
-                    marginBottom: 4,
-                },
-            }, e(Text, {
-                style: {
-                    fontFamily: "Helvetica-Bold",
-                    fontSize: el.fontSize || undefined,
-                    color: el.color || undefined,
-                    textAlign: el.align || undefined,
-                },
-            }, text));
+        if (!src) return e(View, {
+          key
+        });
+        const style = {};
+        if (el.width) style.width = typeof el.width === "number" ? el.width : toPoints(el.width, 100);
+        if (el.height) style.height = typeof el.height === "number" ? el.height : toPoints(el.height, 100);
+        return e(Image, {
+          key,
+          src,
+          style
+        });
+      }
+    case "qrcode":
+      {
+        let qrData = el.data || el.content || "";
+        if (el.bind) {
+          const resolved = resolveBinding(el.bind, data);
+          if (typeof resolved === "string") qrData = resolved;
         }
-        case "image": {
-            let src = el.src || el.url || "";
-            if (el.bind) {
-                const resolved = resolveBinding(el.bind, data);
-                if (typeof resolved === "string")
-                    src = resolved;
+        qrData = resolveText(qrData, data);
+        const qrSize = el.size || (typeof el.width === "number" ? el.width : 100);
+        const svg = generateQRSvg(qrData, qrSize);
+        const dataUri = `data:image/svg+xml;base64,${Buffer.from(svg).toString("base64")}`;
+        return e(Image, {
+          key,
+          src: dataUri,
+          style: {
+            width: qrSize,
+            height: qrSize
+          }
+        });
+      }
+    case "spacer":
+      {
+        const h = el.height || 10;
+        return e(View, {
+          key,
+          style: {
+            height: typeof h === "number" ? h : toPoints(h, 10)
+          }
+        });
+      }
+    case "line":
+      {
+        const color = el.color || "#000";
+        const thickness = el.thickness || 1;
+        return e(View, {
+          key,
+          style: {
+            borderTopWidth: thickness,
+            borderTopColor: color,
+            borderTopStyle: "solid",
+            marginVertical: 8
+          }
+        });
+      }
+    case "columns":
+      {
+        const cols = el.columns || el.children || [];
+        const children = cols.map((child, i) => {
+          if (Array.isArray(child)) {
+            return e(View, {
+              key: `col-${i}`,
+              style: {
+                flex: 1
+              }
+            }, ...child.map((c, j) => renderElement(c, data, `col-${i}-${j}`)));
+          }
+          return e(View, {
+            key: `col-${i}`,
+            style: {
+              flex: 1
             }
-            if (!src)
-                return e(View, { key });
-            const style = {};
-            if (el.width)
-                style.width = typeof el.width === "number" ? el.width : toPoints(el.width, 100);
-            if (el.height)
-                style.height = typeof el.height === "number" ? el.height : toPoints(el.height, 100);
-            return e(Image, { key, src, style });
-        }
-        case "qrcode": {
-            let qrData = el.data || el.content || "";
-            if (el.bind) {
-                const resolved = resolveBinding(el.bind, data);
-                if (typeof resolved === "string")
-                    qrData = resolved;
+          }, renderElement(child, data, `col-${i}-inner`));
+        });
+        return e(View, {
+          key,
+          style: {
+            flexDirection: "row",
+            gap: 8
+          }
+        }, ...children);
+      }
+    case "page_break":
+      {
+        return e(View, {
+          key,
+          break: true
+        });
+      }
+    case "grid":
+      {
+        const items = Array.isArray(el.items) ? el.items : Array.isArray(el.content) ? el.content : [];
+        const rows = items.map((item, i) => {
+          const label = item.label || item.value || "";
+          let value = "";
+          if (item.bind) {
+            const resolved = resolveBinding(item.bind, data);
+            value = resolved !== undefined && resolved !== null ? String(resolved) : "";
+          }
+          value = resolveText(value || "", data);
+          return e(View, {
+            key: `row-${i}`,
+            style: {
+              flexDirection: "row",
+              borderBottomWidth: 0.5,
+              borderBottomColor: "#ddd"
             }
-            qrData = resolveText(qrData, data);
-            const qrSize = el.size || (typeof el.width === "number" ? el.width : 100);
-            const svg = generateQRSvg(qrData, qrSize);
-            const dataUri = `data:image/svg+xml;base64,${Buffer.from(svg).toString("base64")}`;
-            return e(Image, { key, src: dataUri, style: { width: qrSize, height: qrSize } });
-        }
-        case "spacer": {
-            const h = el.height || 10;
-            return e(View, { key, style: { height: typeof h === "number" ? h : toPoints(h, 10) } });
-        }
-        case "line": {
-            const color = el.color || "#000";
-            const thickness = el.thickness || 1;
-            return e(View, {
-                key,
-                style: {
-                    borderTopWidth: thickness,
-                    borderTopColor: color,
-                    borderTopStyle: "solid",
-                    marginVertical: 8,
-                },
-            });
-        }
-        case "columns": {
-            const cols = el.columns || el.children || [];
-            const children = cols.map((child, i) => {
-                if (Array.isArray(child)) {
-                    return e(View, { key: `col-${i}`, style: { flex: 1 } }, ...child.map((c, j) => renderElement(c, data, `col-${i}-${j}`)));
-                }
-                return e(View, { key: `col-${i}`, style: { flex: 1 } }, renderElement(child, data, `col-${i}-inner`));
-            });
-            return e(View, { key, style: { flexDirection: "row", gap: 8 } }, ...children);
-        }
-        case "page_break": {
-            return e(View, { key, break: true });
+          }, e(View, {
+            style: {
+              width: "40%",
+              padding: 4
+            }
+          }, e(Text, {
+            style: {
+              fontFamily: "Helvetica-Bold",
+              fontSize: 9
+            }
+          }, label)), e(View, {
+            style: {
+              width: "60%",
+              padding: 4
+            }
+          }, e(Text, {
+            style: {
+              fontSize: 9
+            }
+          }, value)));
+        });
+        return e(View, {
+          key,
+          style: {
+            width: "100%"
+          }
+        }, ...rows);
+      }
+    case "table":
+      {
+        const headers = el.headers || [];
+        const rowFields = el.row_fields;
+        let bodyRows = el.rows || [];
+        if (el.bind) {
+          const resolved = resolveBinding(el.bind, data);
+          if (Array.isArray(resolved)) bodyRows = resolved;
         }
-        case "grid": {
-            const items = (Array.isArray(el.items) ? el.items : Array.isArray(el.content) ? el.content : []);
-            const rows = items.map((item, i) => {
-                const label = item.label || item.value || "";
-                let value = "";
-                if (item.bind) {
-                    const resolved = resolveBinding(item.bind, data);
-                    value = resolved !== undefined && resolved !== null ? String(resolved) : "";
-                }
-                value = resolveText(value || "", data);
-                return e(View, { key: `row-${i}`, style: { flexDirection: "row", borderBottomWidth: 0.5, borderBottomColor: "#ddd" } }, e(View, { style: { width: "40%", padding: 4 } }, e(Text, { style: { fontFamily: "Helvetica-Bold", fontSize: 9 } }, label)), e(View, { style: { width: "60%", padding: 4 } }, e(Text, { style: { fontSize: 9 } }, value)));
+        const colCount = headers.length || rowFields?.length || 0;
+        const colWidth = colCount > 0 ? `${(100 / colCount).toFixed(1)}%` : "100%";
+        const cellStyle = {
+          padding: 5,
+          borderWidth: 0.5,
+          borderColor: "#ddd"
+        };
+        const headerCellStyle = {
+          ...cellStyle,
+          backgroundColor: "#f5f5f5"
+        };
+        const headerRow = headers.length ? e(View, {
+          key: "thead",
+          style: {
+            flexDirection: "row"
+          }
+        }, ...headers.map((h, i) => e(View, {
+          key: `th-${i}`,
+          style: {
+            ...headerCellStyle,
+            width: colWidth
+          }
+        }, e(Text, {
+          style: {
+            fontSize: 8,
+            fontFamily: "Helvetica-Bold"
+          }
+        }, h)))) : null;
+        const dataRows = bodyRows.map((row, ri) => {
+          let cells;
+          if (Array.isArray(row)) {
+            cells = row.map(c => String(c ?? ""));
+          } else if (rowFields && rowFields.length) {
+            cells = rowFields.map(field => String(row[field] ?? ""));
+          } else {
+            cells = headers.map(h => {
+              const key2 = h.toLowerCase().replace(/[^a-z0-9]/g, "");
+              return String(row[h] ?? row[key2] ?? row[h.replace(/\s+/g, "")] ?? "");
             });
-            return e(View, { key, style: { width: "100%" } }, ...rows);
-        }
-        case "table": {
-            const headers = el.headers || [];
-            const rowFields = el.row_fields;
-            let bodyRows = el.rows || [];
-            if (el.bind) {
-                const resolved = resolveBinding(el.bind, data);
-                if (Array.isArray(resolved))
-                    bodyRows = resolved;
+          }
+          return e(View, {
+            key: `tr-${ri}`,
+            style: {
+              flexDirection: "row"
             }
-            const colCount = headers.length || (rowFields?.length || 0);
-            const colWidth = colCount > 0 ? `${(100 / colCount).toFixed(1)}%` : "100%";
-            const cellStyle = { padding: 5, borderWidth: 0.5, borderColor: "#ddd" };
-            const headerCellStyle = { ...cellStyle, backgroundColor: "#f5f5f5" };
-            const headerRow = headers.length
-                ? e(View, { key: "thead", style: { flexDirection: "row" } }, ...headers.map((h, i) => e(View, { key: `th-${i}`, style: { ...headerCellStyle, width: colWidth } }, e(Text, { style: { fontSize: 8, fontFamily: "Helvetica-Bold" } }, h))))
-                : null;
-            const dataRows = bodyRows.map((row, ri) => {
-                let cells;
-                if (Array.isArray(row)) {
-                    cells = row.map((c) => String(c ?? ""));
-                }
-                else if (rowFields && rowFields.length) {
-                    cells = rowFields.map(field => String(row[field] ?? ""));
-                }
-                else {
-                    cells = headers.map((h) => {
-                        const key2 = h.toLowerCase().replace(/[^a-z0-9]/g, "");
-                        return String(row[h] ?? row[key2] ?? row[h.replace(/\s+/g, "")] ?? "");
-                    });
-                }
-                return e(View, { key: `tr-${ri}`, style: { flexDirection: "row" } }, ...cells.map((cell, ci) => e(View, { key: `td-${ri}-${ci}`, style: { ...cellStyle, width: colWidth } }, e(Text, { style: { fontSize: 8 } }, cell))));
-            });
-            const tableChildren = [];
-            if (headerRow)
-                tableChildren.push(headerRow);
-            tableChildren.push(...dataRows);
-            return e(View, { key, style: { width: "100%" } }, ...tableChildren);
-        }
-        case "box": {
-            const inner = (el.children || []).map((child, i) => renderElement(child, data, `box-${i}`));
-            const text = el.content || el.text ? resolveText(el.content || el.text || "", data) : "";
-            const boxChildren = [];
-            if (text)
-                boxChildren.push(e(Text, { key: "box-text", style: { textAlign: "center" } }, text));
-            boxChildren.push(...inner);
-            return e(View, {
-                key,
-                style: {
-                    textAlign: "center",
-                    border: el.border ? undefined : undefined,
-                    borderWidth: el.border ? 1 : undefined,
-                    borderColor: el.border ? (el.border.includes("#") ? el.border.split(" ").find(s => s.startsWith("#")) : "#000") : undefined,
-                    backgroundColor: el.background || el.backgroundColor || undefined,
-                    padding: typeof el.padding === "number" ? el.padding : el.padding ? toPoints(el.padding, 0) : undefined,
-                },
-            }, ...boxChildren);
-        }
-        default: {
-            if (el.children && Array.isArray(el.children)) {
-                return e(View, { key }, ...el.children.map((child, i) => renderElement(child, data, `child-${i}`)));
+          }, ...cells.map((cell, ci) => e(View, {
+            key: `td-${ri}-${ci}`,
+            style: {
+              ...cellStyle,
+              width: colWidth
             }
-            return e(View, { key });
+          }, e(Text, {
+            style: {
+              fontSize: 8
+            }
+          }, cell))));
+        });
+        const tableChildren = [];
+        if (headerRow) tableChildren.push(headerRow);
+        tableChildren.push(...dataRows);
+        return e(View, {
+          key,
+          style: {
+            width: "100%"
+          }
+        }, ...tableChildren);
+      }
+    case "box":
+      {
+        const inner = (el.children || []).map((child, i) => renderElement(child, data, `box-${i}`));
+        const text = el.content || el.text ? resolveText(el.content || el.text || "", data) : "";
+        const boxChildren = [];
+        if (text) boxChildren.push(e(Text, {
+          key: "box-text",
+          style: {
+            textAlign: "center"
+          }
+        }, text));
+        boxChildren.push(...inner);
+        return e(View, {
+          key,
+          style: {
+            textAlign: "center",
+            border: el.border ? undefined : undefined,
+            borderWidth: el.border ? 1 : undefined,
+            borderColor: el.border ? el.border.includes("#") ? el.border.split(" ").find(s => s.startsWith("#")) : "#000" : undefined,
+            backgroundColor: el.background || el.backgroundColor || undefined,
+            padding: typeof el.padding === "number" ? el.padding : el.padding ? toPoints(el.padding, 0) : undefined
+          }
+        }, ...boxChildren);
+      }
+    default:
+      {
+        if (el.children && Array.isArray(el.children)) {
+          return e(View, {
+            key
+          }, ...el.children.map((child, i) => renderElement(child, data, `child-${i}`)));
         }
-    }
+        return e(View, {
+          key
+        });
+      }
+  }
 }
+
 // ============================================================================
 // Layout Normalization — same logic as renderLayoutToHtml lines 896-924
 // ============================================================================
+
 function normalizeLayout(layout) {
-    if (!layout)
-        return [];
-    if (Array.isArray(layout))
-        return layout;
-    const obj = layout;
-    const elements = [];
-    if (Array.isArray(obj.pages)) {
-        for (const page of obj.pages) {
-            if (page.header)
-                elements.push(page.header);
-            if (Array.isArray(page.body))
-                elements.push(...page.body);
-            else if (page.body)
-                elements.push(page.body);
-            if (Array.isArray(page.sections))
-                elements.push(...page.sections);
-            if (Array.isArray(page.elements))
-                elements.push(...page.elements);
-            if (page.footer)
-                elements.push(page.footer);
-        }
-    }
-    else if (Array.isArray(obj.sections)) {
-        elements.push(...obj.sections);
+  if (!layout) return [];
+  if (Array.isArray(layout)) return layout;
+  const obj = layout;
+  const elements = [];
+  if (Array.isArray(obj.pages)) {
+    for (const page of obj.pages) {
+      if (page.header) elements.push(page.header);
+      if (Array.isArray(page.body)) elements.push(...page.body);else if (page.body) elements.push(page.body);
+      if (Array.isArray(page.sections)) elements.push(...page.sections);
+      if (Array.isArray(page.elements)) elements.push(...page.elements);
+      if (page.footer) elements.push(page.footer);
     }
-    else if (Array.isArray(obj.children)) {
-        elements.push(...obj.children);
-    }
-    else {
-        if (obj.header)
-            elements.push(obj.header);
-        if (obj.body) {
-            if (Array.isArray(obj.body))
-                elements.push(...obj.body);
-            else
-                elements.push(obj.body);
-        }
-        if (obj.footer)
-            elements.push(obj.footer);
+  } else if (Array.isArray(obj.sections)) {
+    elements.push(...obj.sections);
+  } else if (Array.isArray(obj.children)) {
+    elements.push(...obj.children);
+  } else {
+    if (obj.header) elements.push(obj.header);
+    if (obj.body) {
+      if (Array.isArray(obj.body)) elements.push(...obj.body);else elements.push(obj.body);
     }
-    return elements;
+    if (obj.footer) elements.push(obj.footer);
+  }
+  return elements;
 }
+
 // ============================================================================
 // renderLayoutToPdf — Generic element-based layout → PDF buffer
 // ============================================================================
+
 export async function renderLayoutToPdf(layout, pageConfig, styles, data) {
-    const elements = normalizeLayout(layout);
-    const pageSize = mapPageSize(pageConfig?.size);
-    const margins = pageConfig?.margins || {};
-    const orientation = pageConfig?.orientation === "landscape" ? "landscape" : "portrait";
-    const fontFamily = styles?.fontFamily?.split(",")[0]?.trim() || "Helvetica";
-    const fontSize = styles?.fontSize || 12;
-    const color = styles?.color || "#000";
-    const pageStyle = {
-        paddingTop: toPoints(margins.top, 42.5),
-        paddingRight: toPoints(margins.right, 42.5),
-        paddingBottom: toPoints(margins.bottom, 42.5),
-        paddingLeft: toPoints(margins.left, 42.5),
-        fontFamily,
-        fontSize,
-        color,
-        lineHeight: 1.4,
-    };
-    const rendered = elements.map((el, i) => renderElement(el, data, `el-${i}`));
-    const doc = e(Document, {}, e(Page, { size: pageSize, orientation, style: pageStyle }, ...rendered));
-    const buffer = await renderToBuffer(doc);
-    return Buffer.from(buffer);
+  const elements = normalizeLayout(layout);
+  const pageSize = mapPageSize(pageConfig?.size);
+  const margins = pageConfig?.margins || {};
+  const orientation = pageConfig?.orientation === "landscape" ? "landscape" : "portrait";
+  const fontFamily = styles?.fontFamily?.split(",")[0]?.trim() || "Helvetica";
+  const fontSize = styles?.fontSize || 12;
+  const color = styles?.color || "#000";
+  const pageStyle = {
+    paddingTop: toPoints(margins.top, 42.5),
+    paddingRight: toPoints(margins.right, 42.5),
+    paddingBottom: toPoints(margins.bottom, 42.5),
+    paddingLeft: toPoints(margins.left, 42.5),
+    fontFamily,
+    fontSize,
+    color,
+    lineHeight: 1.4
+  };
+  const rendered = elements.map((el, i) => renderElement(el, data, `el-${i}`));
+  const doc = e(Document, {}, e(Page, {
+    size: pageSize,
+    orientation,
+    style: pageStyle
+  }, ...rendered));
+  const buffer = await renderToBuffer(doc);
+  return Buffer.from(buffer);
 }
+
+// ============================================================================
+// renderLabelToPdf — Absolute-positioned Avery label layouts
+// ============================================================================
+
 export async function renderLabelToPdf(layout, pageConfig, items) {
-    const IN = 72; // 1 inch = 72 points
-    const cols = pageConfig.cols || 2;
-    const rows = pageConfig.rows || 5;
-    const pageW = (pageConfig.pageWidth || 8.5) * IN;
-    const pageH = (pageConfig.pageHeight || 11) * IN;
-    const labelW = (pageConfig.labelWidth || 4) * IN;
-    const labelH = (pageConfig.labelHeight || 2) * IN;
-    const mTop = (pageConfig.margins?.top || 0.5) * IN;
-    const mLeft = (pageConfig.margins?.left || 0.15625) * IN;
-    const gH = (pageConfig.gutters?.horizontal || 0.125) * IN;
-    const gV = (pageConfig.gutters?.vertical || 0) * IN;
-    const labelsPerPage = cols * rows;
-    const pageCount = Math.ceil(items.length / labelsPerPage);
-    const pages = [];
-    for (let p = 0; p < pageCount; p++) {
-        const labelViews = [];
-        for (let slot = 0; slot < labelsPerPage; slot++) {
-            const itemIdx = p * labelsPerPage + slot;
-            if (itemIdx >= items.length)
-                break;
-            const item = items[itemIdx];
-            const row = Math.floor(slot / cols);
-            const col = slot % cols;
-            const x = mLeft + col * (labelW + gH);
-            const y = mTop + row * (labelH + gV);
-            const labelElements = layout.elements.map((le, ei) => {
-                const elX = le.x * labelW;
-                const elY = le.y * labelH;
-                const elW = le.width * labelW;
-                const elH = le.height * labelH;
-                const value = le.field ? String(item[le.field] ?? "") : (le.text || "");
-                switch (le.type) {
-                    case "text":
-                        return e(View, {
-                            key: `le-${ei}`,
-                            style: { position: "absolute", left: elX, top: elY, width: elW, height: elH },
-                        }, e(Text, {
-                            style: {
-                                fontSize: le.style?.fontSize || 8,
-                                color: le.color || "#000",
-                                fontFamily: (le.style?.bold || le.style?.fontWeight === "bold") ? "Helvetica-Bold" : "Helvetica",
-                            },
-                        }, value));
-                    case "badge":
-                        return e(View, {
-                            key: `le-${ei}`,
-                            style: {
-                                position: "absolute", left: elX, top: elY, width: elW, height: elH,
-                                backgroundColor: le.backgroundColor || "#4CAF50",
-                                borderRadius: 4,
-                                justifyContent: "center",
-                                alignItems: "center",
-                            },
-                        }, e(Text, { style: { fontSize: 7, color: le.color || "#fff", fontFamily: "Helvetica-Bold" } }, value));
-                    case "image": {
-                        const src = le.field ? String(item[le.field] ?? "") : "";
-                        if (!src)
-                            return e(View, { key: `le-${ei}` });
-                        return e(Image, {
-                            key: `le-${ei}`,
-                            src,
-                            style: { position: "absolute", left: elX, top: elY, width: elW, height: elH },
-                        });
-                    }
-                    case "qr_code": {
-                        const svg = generateQRSvg(value, Math.min(elW, elH));
-                        const dataUri = `data:image/svg+xml;base64,${Buffer.from(svg).toString("base64")}`;
-                        return e(Image, {
-                            key: `le-${ei}`,
-                            src: dataUri,
-                            style: { position: "absolute", left: elX, top: elY, width: Math.min(elW, elH), height: Math.min(elW, elH) },
-                        });
-                    }
-                    case "date": {
-                        const dateVal = le.field ? item[le.field] : null;
-                        const formatted = dateVal ? new Date(String(dateVal)).toLocaleDateString() : value;
-                        return e(View, {
-                            key: `le-${ei}`,
-                            style: { position: "absolute", left: elX, top: elY, width: elW, height: elH },
-                        }, e(Text, { style: { fontSize: le.style?.fontSize || 8, color: le.color || "#000" } }, formatted));
-                    }
-                    default:
-                        return e(View, { key: `le-${ei}` });
+  const IN = 72; // 1 inch = 72 points
+  const cols = pageConfig.cols || 2;
+  const rows = pageConfig.rows || 5;
+  const pageW = (pageConfig.pageWidth || 8.5) * IN;
+  const pageH = (pageConfig.pageHeight || 11) * IN;
+  const labelW = (pageConfig.labelWidth || 4) * IN;
+  const labelH = (pageConfig.labelHeight || 2) * IN;
+  const mTop = (pageConfig.margins?.top || 0.5) * IN;
+  const mLeft = (pageConfig.margins?.left || 0.15625) * IN;
+  const gH = (pageConfig.gutters?.horizontal || 0.125) * IN;
+  const gV = (pageConfig.gutters?.vertical || 0) * IN;
+  const labelsPerPage = cols * rows;
+  const pageCount = Math.ceil(items.length / labelsPerPage);
+  const pages = [];
+  for (let p = 0; p < pageCount; p++) {
+    const labelViews = [];
+    for (let slot = 0; slot < labelsPerPage; slot++) {
+      const itemIdx = p * labelsPerPage + slot;
+      if (itemIdx >= items.length) break;
+      const item = items[itemIdx];
+      const row = Math.floor(slot / cols);
+      const col = slot % cols;
+      const x = mLeft + col * (labelW + gH);
+      const y = mTop + row * (labelH + gV);
+      const labelElements = layout.elements.map((le, ei) => {
+        const elX = le.x * labelW;
+        const elY = le.y * labelH;
+        const elW = le.width * labelW;
+        const elH = le.height * labelH;
+        const value = le.field ? String(item[le.field] ?? "") : le.text || "";
+        switch (le.type) {
+          case "text":
+            return e(View, {
+              key: `le-${ei}`,
+              style: {
+                position: "absolute",
+                left: elX,
+                top: elY,
+                width: elW,
+                height: elH
+              }
+            }, e(Text, {
+              style: {
+                fontSize: le.style?.fontSize || 8,
+                color: le.color || "#000",
+                fontFamily: le.style?.bold || le.style?.fontWeight === "bold" ? "Helvetica-Bold" : "Helvetica"
+              }
+            }, value));
+          case "badge":
+            return e(View, {
+              key: `le-${ei}`,
+              style: {
+                position: "absolute",
+                left: elX,
+                top: elY,
+                width: elW,
+                height: elH,
+                backgroundColor: le.backgroundColor || "#4CAF50",
+                borderRadius: 4,
+                justifyContent: "center",
+                alignItems: "center"
+              }
+            }, e(Text, {
+              style: {
+                fontSize: 7,
+                color: le.color || "#fff",
+                fontFamily: "Helvetica-Bold"
+              }
+            }, value));
+          case "image":
+            {
+              const src = le.field ? String(item[le.field] ?? "") : "";
+              if (!src) return e(View, {
+                key: `le-${ei}`
+              });
+              return e(Image, {
+                key: `le-${ei}`,
+                src,
+                style: {
+                  position: "absolute",
+                  left: elX,
+                  top: elY,
+                  width: elW,
+                  height: elH
                 }
-            });
-            labelViews.push(e(View, {
-                key: `label-${slot}`,
+              });
+            }
+          case "qr_code":
+            {
+              const svg = generateQRSvg(value, Math.min(elW, elH));
+              const dataUri = `data:image/svg+xml;base64,${Buffer.from(svg).toString("base64")}`;
+              return e(Image, {
+                key: `le-${ei}`,
+                src: dataUri,
                 style: {
-                    position: "absolute",
-                    left: x,
-                    top: y,
-                    width: labelW,
-                    height: labelH,
-                },
-            }, ...labelElements));
+                  position: "absolute",
+                  left: elX,
+                  top: elY,
+                  width: Math.min(elW, elH),
+                  height: Math.min(elW, elH)
+                }
+              });
+            }
+          case "date":
+            {
+              const dateVal = le.field ? item[le.field] : null;
+              const formatted = dateVal ? new Date(String(dateVal)).toLocaleDateString() : value;
+              return e(View, {
+                key: `le-${ei}`,
+                style: {
+                  position: "absolute",
+                  left: elX,
+                  top: elY,
+                  width: elW,
+                  height: elH
+                }
+              }, e(Text, {
+                style: {
+                  fontSize: le.style?.fontSize || 8,
+                  color: le.color || "#000"
+                }
+              }, formatted));
+            }
+          default:
+            return e(View, {
+              key: `le-${ei}`
+            });
         }
-        pages.push(e(Page, {
-            key: `page-${p}`,
-            size: [pageW, pageH],
-            style: { position: "relative" },
-        }, ...labelViews));
+      });
+      labelViews.push(e(View, {
+        key: `label-${slot}`,
+        style: {
+          position: "absolute",
+          left: x,
+          top: y,
+          width: labelW,
+          height: labelH
+        }
+      }, ...labelElements));
     }
-    const doc = e(Document, {}, ...pages);
-    const buffer = await renderToBuffer(doc);
-    return Buffer.from(buffer);
+    pages.push(e(Page, {
+      key: `page-${p}`,
+      size: [pageW, pageH],
+      style: {
+        position: "relative"
+      }
+    }, ...labelViews));
+  }
+  const doc = e(Document, {}, ...pages);
+  const buffer = await renderToBuffer(doc);
+  return Buffer.from(buffer);
 }
+
 // ============================================================================
 // renderHtmlToPdf — Direct HTML string → PDF (replaces Playwright)
 // ============================================================================
+
 export async function renderHtmlToPdf(html, options) {
-    // Sanitize: strip dangerous tags (same P0 security as the old Playwright path)
-    const sanitizedHtml = html
-        .replace(/<script[\s\S]*?<\/script>/gi, "")
-        .replace(/<script[^>]*\/?>/gi, "")
-        .replace(/<iframe[\s\S]*?<\/iframe>/gi, "")
-        .replace(/<iframe[^>]*\/?>/gi, "")
-        .replace(/<object[\s\S]*?<\/object>/gi, "")
-        .replace(/<object[^>]*\/?>/gi, "")
-        .replace(/<embed[^>]*\/?>/gi, "")
-        .replace(/<link[^>]*\/?>/gi, "");
-    // Use react-pdf-html to render HTML inside React-PDF
-    let Html;
-    try {
-        const mod = await import("react-pdf-html");
-        Html = mod.default || mod.Html || mod;
-    }
-    catch {
-        // Fallback: extract text content and render as plain text
-        const textContent = sanitizedHtml.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
-        const pageSize = mapPageSize(options?.format);
-        const orientation = options?.landscape ? "landscape" : "portrait";
-        const doc = e(Document, {}, e(Page, {
-            size: pageSize,
-            orientation,
-            style: { padding: 28, fontFamily: "Helvetica", fontSize: 12 },
-        }, e(Text, {}, textContent)));
-        const buffer = await renderToBuffer(doc);
-        return Buffer.from(buffer);
-    }
+  // Sanitize: strip dangerous tags (same P0 security as the old Playwright path)
+  const sanitizedHtml = html.replace(/<script[\s\S]*?<\/script>/gi, "").replace(/<script[^>]*\/?>/gi, "").replace(/<iframe[\s\S]*?<\/iframe>/gi, "").replace(/<iframe[^>]*\/?>/gi, "").replace(/<object[\s\S]*?<\/object>/gi, "").replace(/<object[^>]*\/?>/gi, "").replace(/<embed[^>]*\/?>/gi, "").replace(/<link[^>]*\/?>/gi, "");
+
+  // Use react-pdf-html to render HTML inside React-PDF
+  let Html;
+  try {
+    const mod = await import("react-pdf-html");
+    Html = mod.default || mod.Html || mod;
+  } catch {
+    // Fallback: extract text content and render as plain text
+    const textContent = sanitizedHtml.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
     const pageSize = mapPageSize(options?.format);
     const orientation = options?.landscape ? "landscape" : "portrait";
     const doc = e(Document, {}, e(Page, {
-        size: pageSize,
-        orientation,
-        style: { padding: 28, fontFamily: "Helvetica", fontSize: 12, lineHeight: 1.4 },
-    }, e(Html, { style: { fontSize: 12 } }, sanitizedHtml)));
+      size: pageSize,
+      orientation,
+      style: {
+        padding: 28,
+        fontFamily: "Helvetica",
+        fontSize: 12
+      }
+    }, e(Text, {}, textContent)));
     const buffer = await renderToBuffer(doc);
     return Buffer.from(buffer);
+  }
+  const pageSize = mapPageSize(options?.format);
+  const orientation = options?.landscape ? "landscape" : "portrait";
+  const doc = e(Document, {}, e(Page, {
+    size: pageSize,
+    orientation,
+    style: {
+      padding: 28,
+      fontFamily: "Helvetica",
+      fontSize: 12,
+      lineHeight: 1.4
+    }
+  }, e(Html, {
+    style: {
+      fontSize: 12
+    }
+  }, sanitizedHtml)));
+  const buffer = await renderToBuffer(doc);
+  return Buffer.from(buffer);
 }
+//# sourceMappingURL=react-pdf-layout.js.map