@signiphi/pdf-compose 0.1.0-beta.7 → 0.1.0-beta.9

package/dist/index.js

@@ -253,7 +253,8 @@ var VariableNode = core.Node.create({
       varLabel: { default: "" },
       varDefault: { default: "" },
       format: { default: "" },
-      suppressZero: { default: "" }
+      suppressZero: { default: "" },
+      block: { default: "" }
     };
   },
   parseHTML() {
@@ -560,183 +561,8 @@ function extractFieldsFromContent(content) {
   }
   return fields;
 }
-
-// src/utils/variable-helpers.ts
-function extractVariablesFromContent(content) {
-  const seen = /* @__PURE__ */ new Map();
-  function walk(node) {
-    if (node.type === "variableNode" && node.attrs) {
-      const varName = node.attrs.varName;
-      if (varName && !seen.has(varName)) {
-        seen.set(varName, {
-          varName,
-          varLabel: node.attrs.varLabel || varName,
-          varDefault: node.attrs.varDefault || ""
-        });
-      }
-    }
-    if (node.content) {
-      node.content.forEach(walk);
-    }
-  }
-  if (content.content) {
-    content.content.forEach(walk);
-  }
-  return Array.from(seen.values());
-}
-function applyFormat(value, format) {
-  if (format === "phone") {
-    const digits = value.replace(/\D/g, "");
-    if (digits.length === 10) {
-      return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)} - ${digits.slice(6)}`;
-    }
-  }
-  return value;
-}
-function replaceVariablesInContent(content, values) {
-  function walkNode(node) {
-    if (node.type === "variableNode" && node.attrs) {
-      const varName = node.attrs.varName;
-      let replacement = values[varName] || node.attrs.varDefault || "";
-      const format = node.attrs.format;
-      if (format && replacement) {
-        replacement = applyFormat(replacement, format);
-      }
-      const textNode = { type: "text", text: replacement };
-      if (node.marks && node.marks.length > 0) {
-        textNode.marks = node.marks;
-      }
-      return textNode;
-    }
-    if (node.content) {
-      return { ...node, content: node.content.map(walkNode) };
-    }
-    return node;
-  }
-  return walkNode(content);
-}
-function labelToVarName(label) {
-  return label.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
-}
-function isZeroLike(value) {
-  if (!value || value.trim() === "") return true;
-  const cleaned = value.replace(/[$,\s]/g, "");
-  return /^-?0+(\.0+)?$/.test(cleaned);
-}
-function suppressZeroContent(content, values) {
-  function hasSuppressedVar(node) {
-    if (node.type === "variableNode" && node.attrs?.suppressZero === "true") {
-      const varName = node.attrs.varName;
-      const val = values[varName] || node.attrs.varDefault || "";
-      return isZeroLike(val);
-    }
-    return (node.content || []).some(hasSuppressedVar);
-  }
-  function walkNode(node) {
-    if (node.type === "table" && node.content) {
-      const filtered = node.content.filter((row) => {
-        if (row.type !== "tableRow") return true;
-        const isHeader = row.content?.[0]?.type === "tableHeader";
-        if (isHeader) return true;
-        return !hasSuppressedVar(row);
-      });
-      const bodyRows = filtered.filter(
-        (r) => r.type === "tableRow" && r.content?.[0]?.type !== "tableHeader"
-      );
-      if (bodyRows.length === 0) return null;
-      return { ...node, content: filtered };
-    }
-    if (node.type === "paragraph" && hasSuppressedVar(node)) {
-      return null;
-    }
-    if (node.content) {
-      const filtered = node.content.map((child) => walkNode(child)).filter((c) => c !== null);
-      return { ...node, content: filtered };
-    }
-    return node;
-  }
-  return walkNode(content) || content;
-}
-function expandRepeatContent(content, values) {
-  const enrichedValues = { ...values };
-  function cloneNode(node, dataKey, index) {
-    if (node.type === "variableNode" && node.attrs?.varName) {
-      const oldName = node.attrs.varName;
-      const bareName = oldName.replace(/^operation_/, "");
-      const newName = `${dataKey}_${index}_${bareName}`;
-      return { ...node, attrs: { ...node.attrs, varName: newName } };
-    }
-    if (node.content) {
-      return { ...node, content: node.content.map((n) => cloneNode(n, dataKey, index)) };
-    }
-    return { ...node };
-  }
-  function walkNode(node) {
-    if (node.type === "repeatBlock" && node.attrs?.data) {
-      const dataKey = node.attrs.data;
-      const arrayJson = values[dataKey];
-      if (!arrayJson) return [];
-      let items;
-      try {
-        items = JSON.parse(arrayJson);
-      } catch {
-        return [];
-      }
-      const sums = /* @__PURE__ */ new Map();
-      for (const item of items) {
-        for (const [key, val] of Object.entries(item)) {
-          const num = parseFloat(val);
-          if (!isNaN(num)) {
-            sums.set(key, (sums.get(key) || 0) + num);
-          }
-        }
-      }
-      const woKeysByNorm = /* @__PURE__ */ new Map();
-      for (const k of Object.keys(enrichedValues)) {
-        if (k.startsWith("workorder_")) {
-          const norm = k.replace(/_/g, "");
-          woKeysByNorm.set(norm, k);
-        }
-      }
-      for (const [field, total] of sums) {
-        const formatted = total % 1 === 0 ? total.toFixed(2) : total.toFixed(2);
-        const directKey = `workorder_${field}`;
-        enrichedValues[directKey] = formatted;
-        const norm = `workorder${field}`.replace(/_/g, "");
-        const existing = woKeysByNorm.get(norm);
-        if (existing && existing !== directKey) {
-          enrichedValues[existing] = formatted;
-        }
-      }
-      const expanded = [];
-      for (let i = 0; i < items.length; i++) {
-        const item = items[i];
-        for (const [key, val] of Object.entries(item)) {
-          enrichedValues[`${dataKey}_${i}_${key}`] = String(val);
-        }
-        const cloned = (node.content || []).map((n) => cloneNode(n, dataKey, i));
-        expanded.push(...cloned);
-      }
-      return expanded;
-    }
-    if (node.content) {
-      const newContent = [];
-      for (const child of node.content) {
-        const result2 = walkNode(child);
-        if (Array.isArray(result2)) newContent.push(...result2);
-        else newContent.push(result2);
-      }
-      return { ...node, content: newContent };
-    }
-    return node;
-  }
-  const result = walkNode(content);
-  return {
-    content: Array.isArray(result) ? { ...content, content: result } : result,
-    values: enrichedValues
-  };
-}
-var TOKEN_REGEX = /\{\{(field|var)\|([^}]+)\}\}/g;
+var TOKEN_REGEX = /\{\{(field|var|image)\|([^}]+)\}\}/g;
+var BLOCK_IMAGE_REGEX = /^!\[([^\]]*)\]\(([^)\s]+)\)$/;
 var DIRECTIVE_OPEN = /^:::(panel|columns|col|watermark|repeat|subtotals)(?:\{([^}]*)\})?$/;
 var DIRECTIVE_CLOSE = /^:::$/;
 function parseDirectiveAttrs(str) {
@@ -874,6 +700,9 @@ function parseVariableToken(tokenBody) {
       case "format":
         attrs.format = value;
         break;
+      case "block":
+        attrs.block = value === "true" ? "true" : "";
+        break;
       case "_marks":
         attrs._marks = value;
         break;
@@ -881,6 +710,44 @@ function parseVariableToken(tokenBody) {
   }
   return attrs;
 }
+function parseImageToken(tokenBody) {
+  const attrs = {
+    src: "",
+    varName: "",
+    alt: "",
+    width: "",
+    height: "",
+    align: ""
+  };
+  const pairs = tokenBody.split("|");
+  for (const pair of pairs) {
+    const colonIdx = pair.indexOf(":");
+    if (colonIdx === -1) continue;
+    const key = pair.slice(0, colonIdx).trim();
+    const value = pair.slice(colonIdx + 1).trim();
+    switch (key) {
+      case "src":
+        attrs.src = value;
+        break;
+      case "var":
+        attrs.varName = value;
+        break;
+      case "alt":
+        attrs.alt = value;
+        break;
+      case "width":
+        attrs.width = value;
+        break;
+      case "height":
+        attrs.height = value;
+        break;
+      case "align":
+        attrs.align = value;
+        break;
+    }
+  }
+  return attrs;
+}
 function parseInline(text) {
   text = preprocessMarkedTokens(text);
   const nodes = [];
@@ -904,6 +771,8 @@ function parseInline(text) {
       const node = { type: "variableNode", attrs };
       if (marks.length > 0) node.marks = marks;
       nodes.push(node);
+    } else if (match[1] === "image") {
+      nodes.push({ type: "imageNode", attrs: parseImageToken(match[2]) });
     }
     lastIndex = match.index + match[0].length;
   }
@@ -1217,10 +1086,24 @@ function parseBlocks(lines, startIdx, stopCondition) {
       i++;
       continue;
     }
-    content.push({
-      type: "paragraph",
-      content: parseInline(line)
-    });
+    const imageMatch = line.trim().match(BLOCK_IMAGE_REGEX);
+    if (imageMatch) {
+      content.push({
+        type: "imageNode",
+        attrs: { src: imageMatch[2], varName: "", alt: imageMatch[1], width: "", height: "", align: "" }
+      });
+      i++;
+      continue;
+    }
+    const inlineNodes = parseInline(line);
+    const nonWhitespace = inlineNodes.filter(
+      (n) => !(n.type === "text" && !(n.text || "").trim())
+    );
+    if (nonWhitespace.length === 1 && nonWhitespace[0].type === "imageNode") {
+      content.push(nonWhitespace[0]);
+    } else {
+      content.push({ type: "paragraph", content: inlineNodes });
+    }
     i++;
   }
   return { blocks: content, nextIdx: i };
@@ -1231,6 +1114,233 @@ function markdownToTiptap(markdown) {
   return { type: "doc", content: blocks };
 }
 
+// src/utils/variable-helpers.ts
+function extractVariablesFromContent(content) {
+  const seen = /* @__PURE__ */ new Map();
+  function walk(node) {
+    if (node.type === "variableNode" && node.attrs) {
+      const varName = node.attrs.varName;
+      if (varName && !seen.has(varName)) {
+        seen.set(varName, {
+          varName,
+          varLabel: node.attrs.varLabel || varName,
+          varDefault: node.attrs.varDefault || ""
+        });
+      }
+    }
+    if (node.content) {
+      node.content.forEach(walk);
+    }
+  }
+  if (content.content) {
+    content.content.forEach(walk);
+  }
+  return Array.from(seen.values());
+}
+function applyFormat(value, format) {
+  if (format === "phone") {
+    const digits = value.replace(/\D/g, "");
+    if (digits.length === 10) {
+      return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)} - ${digits.slice(6)}`;
+    }
+  }
+  return value;
+}
+function replaceVariablesInContent(content, values) {
+  function walkNode(node) {
+    if (node.type === "variableNode" && node.attrs) {
+      const varName = node.attrs.varName;
+      let replacement = values[varName] || node.attrs.varDefault || "";
+      const format = node.attrs.format;
+      if (format && replacement) {
+        replacement = applyFormat(replacement, format);
+      }
+      const textNode = { type: "text", text: replacement };
+      if (node.marks && node.marks.length > 0) {
+        textNode.marks = node.marks;
+      }
+      return textNode;
+    }
+    if (node.type === "imageNode" && node.attrs?.varName) {
+      const varName = node.attrs.varName;
+      const resolved = values[varName] || node.attrs.src || "";
+      return { ...node, attrs: { ...node.attrs, src: resolved } };
+    }
+    if (node.content) {
+      return { ...node, content: node.content.map(walkNode) };
+    }
+    return node;
+  }
+  return walkNode(content);
+}
+function expandBlockVariables(content, values) {
+  function soleVariableOf(node) {
+    if (node.type !== "paragraph" || !node.content) return null;
+    const meaningful = node.content.filter(
+      (c) => !(c.type === "text" && !(c.text || "").trim())
+    );
+    if (meaningful.length === 1 && meaningful[0].type === "variableNode") {
+      return meaningful[0];
+    }
+    return null;
+  }
+  function stripUnsafeNodes(node) {
+    if (!node.content) return node;
+    return {
+      ...node,
+      content: node.content.filter((c) => c.type !== "fieldNode" && c.type !== "watermark").map(stripUnsafeNodes)
+    };
+  }
+  function isCellSafe(blocks) {
+    return blocks.every((b) => b.type === "paragraph" || b.type === "heading");
+  }
+  function walkNode(node, inCell) {
+    if (!node.content) return node;
+    const childInCell = inCell || node.type === "tableCell" || node.type === "tableHeader";
+    const newContent = [];
+    for (const child of node.content) {
+      const varNode = soleVariableOf(child);
+      if (varNode?.attrs) {
+        const varName = varNode.attrs.varName;
+        const value = values[varName] || varNode.attrs.varDefault || "";
+        const isBlock = varNode.attrs.block === "true" || value.includes("\n");
+        if (isBlock) {
+          const parsed = stripUnsafeNodes(markdownToTiptap(value));
+          const blocks = parsed.content || [];
+          if (!childInCell || isCellSafe(blocks)) {
+            newContent.push(...blocks);
+            continue;
+          }
+        }
+      }
+      newContent.push(walkNode(child, childInCell));
+    }
+    return { ...node, content: newContent };
+  }
+  return walkNode(content, false);
+}
+function labelToVarName(label) {
+  return label.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
+}
+function isZeroLike(value) {
+  if (!value || value.trim() === "") return true;
+  const cleaned = value.replace(/[$,\s]/g, "");
+  return /^-?0+(\.0+)?$/.test(cleaned);
+}
+function suppressZeroContent(content, values) {
+  function hasSuppressedVar(node) {
+    if (node.type === "variableNode" && node.attrs?.suppressZero === "true") {
+      const varName = node.attrs.varName;
+      const val = values[varName] || node.attrs.varDefault || "";
+      return isZeroLike(val);
+    }
+    return (node.content || []).some(hasSuppressedVar);
+  }
+  function walkNode(node) {
+    if (node.type === "table" && node.content) {
+      const filtered = node.content.filter((row) => {
+        if (row.type !== "tableRow") return true;
+        const isHeader = row.content?.[0]?.type === "tableHeader";
+        if (isHeader) return true;
+        return !hasSuppressedVar(row);
+      });
+      const bodyRows = filtered.filter(
+        (r) => r.type === "tableRow" && r.content?.[0]?.type !== "tableHeader"
+      );
+      if (bodyRows.length === 0) return null;
+      return { ...node, content: filtered };
+    }
+    if (node.type === "paragraph" && hasSuppressedVar(node)) {
+      return null;
+    }
+    if (node.content) {
+      const filtered = node.content.map((child) => walkNode(child)).filter((c) => c !== null);
+      return { ...node, content: filtered };
+    }
+    return node;
+  }
+  return walkNode(content) || content;
+}
+function expandRepeatContent(content, values) {
+  const enrichedValues = { ...values };
+  function cloneNode(node, dataKey, index) {
+    if (node.type === "variableNode" && node.attrs?.varName) {
+      const oldName = node.attrs.varName;
+      const bareName = oldName.replace(/^operation_/, "");
+      const newName = `${dataKey}_${index}_${bareName}`;
+      return { ...node, attrs: { ...node.attrs, varName: newName } };
+    }
+    if (node.content) {
+      return { ...node, content: node.content.map((n) => cloneNode(n, dataKey, index)) };
+    }
+    return { ...node };
+  }
+  function walkNode(node) {
+    if (node.type === "repeatBlock" && node.attrs?.data) {
+      const dataKey = node.attrs.data;
+      const arrayJson = values[dataKey];
+      if (!arrayJson) return [];
+      let items;
+      try {
+        items = JSON.parse(arrayJson);
+      } catch {
+        return [];
+      }
+      const sums = /* @__PURE__ */ new Map();
+      for (const item of items) {
+        for (const [key, val] of Object.entries(item)) {
+          const num = parseFloat(val);
+          if (!isNaN(num)) {
+            sums.set(key, (sums.get(key) || 0) + num);
+          }
+        }
+      }
+      const woKeysByNorm = /* @__PURE__ */ new Map();
+      for (const k of Object.keys(enrichedValues)) {
+        if (k.startsWith("workorder_")) {
+          const norm = k.replace(/_/g, "");
+          woKeysByNorm.set(norm, k);
+        }
+      }
+      for (const [field, total] of sums) {
+        const formatted = total % 1 === 0 ? total.toFixed(2) : total.toFixed(2);
+        const directKey = `workorder_${field}`;
+        enrichedValues[directKey] = formatted;
+        const norm = `workorder${field}`.replace(/_/g, "");
+        const existing = woKeysByNorm.get(norm);
+        if (existing && existing !== directKey) {
+          enrichedValues[existing] = formatted;
+        }
+      }
+      const expanded = [];
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        for (const [key, val] of Object.entries(item)) {
+          enrichedValues[`${dataKey}_${i}_${key}`] = String(val);
+        }
+        const cloned = (node.content || []).map((n) => cloneNode(n, dataKey, i));
+        expanded.push(...cloned);
+      }
+      return expanded;
+    }
+    if (node.content) {
+      const newContent = [];
+      for (const child of node.content) {
+        const result2 = walkNode(child);
+        if (Array.isArray(result2)) newContent.push(...result2);
+        else newContent.push(result2);
+      }
+      return { ...node, content: newContent };
+    }
+    return node;
+  }
+  const result = walkNode(content);
+  return {
+    content: Array.isArray(result) ? { ...content, content: result } : result,
+    values: enrichedValues
+  };
+}
+
 // src/utils/error-helpers.ts
 function getErrorMessage(error) {
   if (error instanceof Error) return error.message;
@@ -1371,6 +1481,34 @@ var CONTENT_WIDTH = PAGE_WIDTH - 2 * MARGIN;
 var CONTENT_HEIGHT = PAGE_HEIGHT - 2 * MARGIN;
 var LINE_HEIGHT_FACTOR = 1.4;
 var BODY_FONT_SIZE = 10;
+function hexToRgbColor(hex) {
+  if (!hex) return null;
+  const m = hex.trim().match(/^#?([0-9a-fA-F]{6})$/);
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return pdfLib.rgb((n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255);
+}
+function contrastTextColor(fill) {
+  const c = fill;
+  const luminance = 0.299 * c.red + 0.587 * c.green + 0.114 * c.blue;
+  return luminance > 0.6 ? pdfLib.rgb(0, 0, 0) : pdfLib.rgb(1, 1, 1);
+}
+function resolveTheme(theme) {
+  const primary = hexToRgbColor(theme?.primaryColor);
+  const accent = hexToRgbColor(theme?.accentColor);
+  const border = hexToRgbColor(theme?.borderColor);
+  return {
+    tableHeaderBg: primary ?? pdfLib.rgb(0.3, 0.3, 0.3),
+    tableHeaderText: primary ? contrastTextColor(primary) : pdfLib.rgb(1, 1, 1),
+    tableBorder: border ?? pdfLib.rgb(0.75, 0.75, 0.75),
+    panelDarkHeaderBg: primary ?? pdfLib.rgb(0.25, 0.25, 0.25),
+    panelDarkHeaderText: primary ? contrastTextColor(primary) : pdfLib.rgb(1, 1, 1),
+    panelBorder: border ?? pdfLib.rgb(0.6, 0.6, 0.6),
+    rule: primary ?? pdfLib.rgb(0, 0, 0),
+    pageHeaderText: primary ?? pdfLib.rgb(0, 0, 0),
+    pageHeaderRule: accent ?? primary ?? pdfLib.rgb(0.75, 0.75, 0.75)
+  };
+}
 var DEFAULT_REGION = { leftX: MARGIN, width: CONTENT_WIDTH };
 var FIELD_DISPLAY = {
   ["text" /* TEXT */]: { label: "Text", width: 120, height: 30 },
@@ -1402,6 +1540,53 @@ function getFieldDimensions(fieldType, attrs, font, fontSize) {
   const height = textLineHeight + 4;
   return { width, height };
 }
+async function loadImageBytes(src) {
+  if (src.startsWith("data:")) {
+    const comma = src.indexOf(",");
+    if (comma === -1) throw new Error("malformed data URL");
+    const meta = src.slice(0, comma);
+    if (!/;base64$/i.test(meta)) throw new Error("data URL must be base64-encoded");
+    const bin = atob(src.slice(comma + 1));
+    const bytes = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+    return bytes;
+  }
+  const res = await fetch(src);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return new Uint8Array(await res.arrayBuffer());
+}
+function describeImageSrc(src) {
+  return src.length > 80 ? `${src.slice(0, 77)}...` : src;
+}
+async function preloadImages(pdfDoc, content) {
+  const srcs = /* @__PURE__ */ new Set();
+  (function walk(node) {
+    if (node.type === "imageNode") {
+      const src = node.attrs?.src || "";
+      if (src) srcs.add(src);
+    }
+    for (const child of node.content || []) walk(child);
+  })(content);
+  const images = /* @__PURE__ */ new Map();
+  const warnings = [];
+  for (const src of srcs) {
+    try {
+      const bytes = await loadImageBytes(src);
+      const isPng = bytes.length > 4 && bytes[0] === 137 && bytes[1] === 80 && bytes[2] === 78 && bytes[3] === 71;
+      const isJpeg = bytes.length > 2 && bytes[0] === 255 && bytes[1] === 216;
+      if (isPng) {
+        images.set(src, await pdfDoc.embedPng(bytes));
+      } else if (isJpeg) {
+        images.set(src, await pdfDoc.embedJpg(bytes));
+      } else {
+        warnings.push(`Image skipped (unsupported format \u2014 only PNG/JPEG embed): ${describeImageSrc(src)}`);
+      }
+    } catch (err) {
+      warnings.push(`Image skipped (${getErrorMessage(err)}): ${describeImageSrc(src)}`);
+    }
+  }
+  return { images, warnings };
+}
 function ensureSpace(state, neededHeight) {
   if (state.y + neededHeight > CONTENT_HEIGHT) {
     const newPage = state.pdfDoc.addPage([PAGE_WIDTH, PAGE_HEIGHT]);
@@ -1749,9 +1934,9 @@ function renderTable(state, node, region = DEFAULT_REGION) {
   const cellPadding = borderless ? 2 : 4;
   const lineHeight = fontSize * LINE_HEIGHT_FACTOR;
   const rowPadding = cellPadding * 2;
-  const borderColor = pdfLib.rgb(0.75, 0.75, 0.75);
-  const headerBg = pdfLib.rgb(0.3, 0.3, 0.3);
-  const headerTextColor = pdfLib.rgb(1, 1, 1);
+  const borderColor = state.theme.tableBorder;
+  const headerBg = state.theme.tableHeaderBg;
+  const headerTextColor = state.theme.tableHeaderText;
   const firstRow = tableRows[0];
   const colCount = firstRow.content?.length || 0;
   if (colCount === 0) return;
@@ -1999,7 +2184,7 @@ function processBlock(state, node, region = DEFAULT_REGION) {
         start: { x: region.leftX, y: ruleY },
         end: { x: region.leftX + region.width, y: ruleY },
         thickness: 2.5,
-        color: pdfLib.rgb(0, 0, 0)
+        color: state.theme.rule
       });
       state.y += 4;
       break;
@@ -2032,6 +2217,39 @@ function processBlock(state, node, region = DEFAULT_REGION) {
       renderTable(state, node, region);
       break;
     }
+    case "imageNode": {
+      const src = node.attrs?.src || "";
+      const image = src ? state.images.get(src) : void 0;
+      if (!image) break;
+      const natW = image.width;
+      const natH = image.height;
+      let w = parseFloat(node.attrs?.width || "") || 0;
+      let h = parseFloat(node.attrs?.height || "") || 0;
+      if (w && !h) h = natH / natW * w;
+      else if (h && !w) w = natW / natH * h;
+      else if (!w && !h) {
+        w = natW;
+        h = natH;
+      }
+      if (w > region.width) {
+        h = h * (region.width / w);
+        w = region.width;
+      }
+      const maxH = CONTENT_HEIGHT * 0.6;
+      if (h > maxH) {
+        w = w * (maxH / h);
+        h = maxH;
+      }
+      ensureSpace(state, h + 4);
+      const align = node.attrs?.align || "left";
+      let x = region.leftX;
+      if (align === "center") x = region.leftX + (region.width - w) / 2;
+      else if (align === "right") x = region.leftX + region.width - w;
+      const pdfY = PAGE_HEIGHT - MARGIN - state.y - h;
+      state.currentPage.drawImage(image, { x, y: pdfY, width: w, height: h });
+      state.y += h + 4;
+      break;
+    }
     // ─── Layout directives ─────────────────────────────────────────
     case "panel": {
       const title = node.attrs?.title || "";
@@ -2068,8 +2286,8 @@ function processBlock(state, node, region = DEFAULT_REGION) {
           y: titleBarY,
           width: region.width,
           height: titleHeight,
-          color: isDarkHeader ? pdfLib.rgb(0.25, 0.25, 0.25) : pdfLib.rgb(0.93, 0.93, 0.93),
-          borderColor: pdfLib.rgb(0.6, 0.6, 0.6),
+          color: isDarkHeader ? state.theme.panelDarkHeaderBg : pdfLib.rgb(0.93, 0.93, 0.93),
+          borderColor: state.theme.panelBorder,
           borderWidth: 0.75
         });
         startPage.drawText(title, {
@@ -2077,7 +2295,7 @@ function processBlock(state, node, region = DEFAULT_REGION) {
           y: titleBarY + 4,
           size: titleFontSize,
           font: state.fonts.bold,
-          color: isDarkHeader ? pdfLib.rgb(1, 1, 1) : pdfLib.rgb(0, 0, 0)
+          color: isDarkHeader ? state.theme.panelDarkHeaderText : pdfLib.rgb(0, 0, 0)
         });
       }
       if (border !== "none") {
@@ -2090,7 +2308,7 @@ function processBlock(state, node, region = DEFAULT_REGION) {
             y: borderY,
             width: region.width,
             height: panelHeight,
-            borderColor: pdfLib.rgb(0.6, 0.6, 0.6),
+            borderColor: state.theme.panelBorder,
             borderWidth: 0.75,
             borderDashArray
           });
@@ -2102,7 +2320,7 @@ function processBlock(state, node, region = DEFAULT_REGION) {
             y: startBorderBottom,
             width: region.width,
             height: startPanelHeight,
-            borderColor: pdfLib.rgb(0.6, 0.6, 0.6),
+            borderColor: state.theme.panelBorder,
             borderWidth: 0.75,
             borderDashArray
           });
@@ -2114,7 +2332,7 @@ function processBlock(state, node, region = DEFAULT_REGION) {
             y: contBorderY,
             width: region.width,
             height: contHeight,
-            borderColor: pdfLib.rgb(0.6, 0.6, 0.6),
+            borderColor: state.theme.panelBorder,
             borderWidth: 0.75,
             borderDashArray
           });
@@ -2418,6 +2636,24 @@ async function addFormFields(pdfDoc, fieldPositions, fields) {
               pdfLib.PDFString.of(field.label)
             );
           }
+          const initialsFontSize = Math.min(
+            72,
+            Math.max(8, Math.round(position.height * 0.55))
+          );
+          try {
+            initialsField.setFontSize(initialsFontSize);
+            const acro = initialsField;
+            const daRef = acro.acroField.dict.get(pdfLib.PDFName.of("DA"));
+            if (daRef) {
+              const daStr = daRef.value;
+              if (typeof daStr === "string") {
+                const newDa = daStr.replace(/\/Helv\b/, "/TiBo").replace(/\/HeBo\b/, "/TiBo");
+                acro.acroField.dict.set(pdfLib.PDFName.of("DA"), pdfLib.PDFString.of(newDa));
+              }
+            }
+          } catch (fontError) {
+            console.warn(`Failed to set initials font:`, fontError);
+          }
           initialsField.enableReadOnly();
           if (field.required) initialsField.enableRequired();
           break;
@@ -2528,7 +2764,8 @@ async function addFormFields(pdfDoc, fieldPositions, fields) {
   return warnings;
 }
 async function generatePdfFromContent(content, options = {}) {
-  const { drawFieldPlaceholders = false, embedFormFields = false, fields = [] } = options;
+  const { drawFieldPlaceholders = false, embedFormFields = false, fields = [], header, footer } = options;
+  const theme = resolveTheme(options.theme);
   const pdfDoc = await pdfLib.PDFDocument.create();
   const firstPage = pdfDoc.addPage([PAGE_WIDTH, PAGE_HEIGHT]);
   const fonts = {
@@ -2538,6 +2775,7 @@ async function generatePdfFromContent(content, options = {}) {
     boldItalic: await pdfDoc.embedFont(pdfLib.StandardFonts.HelveticaBoldOblique)
   };
   const watermarkNodes = collectWatermarkNodes(content);
+  const { images, warnings: imageWarnings } = await preloadImages(pdfDoc, content);
   const state = {
     currentPage: firstPage,
     pageIndex: 0,
@@ -2546,7 +2784,9 @@ async function generatePdfFromContent(content, options = {}) {
     pdfDoc,
     fieldPositions: /* @__PURE__ */ new Map(),
     drawFieldPlaceholders,
-    watermarkNodes
+    watermarkNodes,
+    theme,
+    images
   };
   renderWatermarksOnPage(firstPage, fonts, watermarkNodes);
   if (content.content) {
@@ -2557,6 +2797,8 @@ async function generatePdfFromContent(content, options = {}) {
   const allPages = pdfDoc.getPages();
   const totalPages = allPages.length;
   const pageNumFontSize = 9;
+  const hfFontSize = 8;
+  const hfColor = pdfLib.rgb(0.45, 0.45, 0.45);
   for (let i = 0; i < totalPages; i++) {
     const page = allPages[i];
     const label = `Page ${i + 1} of ${totalPages}`;
@@ -2568,6 +2810,43 @@ async function generatePdfFromContent(content, options = {}) {
       font: fonts.bold,
       color: pdfLib.rgb(0, 0, 0)
     });
+    if (header && (header.left || header.right) && !(header.skipFirstPage && i === 0)) {
+      const headerBaseY = PAGE_HEIGHT - MARGIN + 10;
+      if (header.left) {
+        page.drawText(header.left, {
+          x: MARGIN,
+          y: headerBaseY,
+          size: pageNumFontSize,
+          font: fonts.bold,
+          color: theme.pageHeaderText
+        });
+      }
+      if (header.right) {
+        const rightWidth = fonts.regular.widthOfTextAtSize(header.right, hfFontSize);
+        page.drawText(header.right, {
+          x: PAGE_WIDTH - MARGIN - rightWidth,
+          y: headerBaseY,
+          size: hfFontSize,
+          font: fonts.regular,
+          color: hfColor
+        });
+      }
+      page.drawLine({
+        start: { x: MARGIN, y: headerBaseY - 6 },
+        end: { x: PAGE_WIDTH - MARGIN, y: headerBaseY - 6 },
+        thickness: 0.75,
+        color: theme.pageHeaderRule
+      });
+    }
+    if (footer?.left) {
+      page.drawText(footer.left, {
+        x: MARGIN,
+        y: MARGIN / 2 - pageNumFontSize / 2,
+        size: hfFontSize,
+        font: fonts.regular,
+        color: hfColor
+      });
+    }
   }
   let fieldWarnings;
   if (embedFormFields && fields.length > 0) {
@@ -2578,25 +2857,31 @@ async function generatePdfFromContent(content, options = {}) {
   return {
     pdfBytes,
     fieldPositions: state.fieldPositions,
-    fieldWarnings
+    fieldWarnings,
+    imageWarnings: imageWarnings.length > 0 ? imageWarnings : void 0
   };
 }
 
 // src/utils/template-pipeline.ts
-async function generatePdfFromTiptap(content, values) {
+async function generatePdfFromTiptap(content, values, options = {}) {
   const { content: expanded, values: enrichedValues } = expandRepeatContent(content, values);
-  const suppressed = suppressZeroContent(expanded, enrichedValues);
+  const blockExpanded = expandBlockVariables(expanded, enrichedValues);
+  const suppressed = suppressZeroContent(blockExpanded, enrichedValues);
   const replaced = replaceVariablesInContent(suppressed, enrichedValues);
   const fields = extractFieldsFromContent(replaced);
   const result = await generatePdfFromContent(replaced, {
     embedFormFields: fields.length > 0,
-    fields
+    fields,
+    theme: options.theme,
+    header: options.header,
+    footer: options.footer,
+    drawFieldPlaceholders: options.drawFieldPlaceholders
   });
-  return { pdfBytes: result.pdfBytes };
+  return { pdfBytes: result.pdfBytes, imageWarnings: result.imageWarnings };
 }
-async function generatePdfFromMarkdown(markdown, values) {
+async function generatePdfFromMarkdown(markdown, values, options = {}) {
   const content = markdownToTiptap(markdown);
-  return generatePdfFromTiptap(content, values);
+  return generatePdfFromTiptap(content, values, options);
 }
 
 // src/utils/markdown-writer.ts
@@ -2616,6 +2901,20 @@ function serializeFieldToken(attrs) {
   if (attrs.acknowledgements) parts.push(`acks:${btoa(attrs.acknowledgements)}`);
   return `{{${parts.join("|")}}}`;
 }
+function serializeImageNode(attrs) {
+  const hasExtras = attrs.varName || attrs.width || attrs.height || attrs.align;
+  if (!hasExtras && attrs.src) {
+    return `![${attrs.alt || ""}](${attrs.src})`;
+  }
+  const parts = ["image"];
+  if (attrs.varName) parts.push(`var:${attrs.varName}`);
+  else if (attrs.src) parts.push(`src:${attrs.src}`);
+  if (attrs.alt) parts.push(`alt:${attrs.alt}`);
+  if (attrs.width) parts.push(`width:${attrs.width}`);
+  if (attrs.height) parts.push(`height:${attrs.height}`);
+  if (attrs.align) parts.push(`align:${attrs.align}`);
+  return `{{${parts.join("|")}}}`;
+}
 function serializeVariableToken(attrs) {
   const parts = ["var"];
   if (attrs.varName) parts.push(`name:${attrs.varName}`);
@@ -2623,6 +2922,7 @@ function serializeVariableToken(attrs) {
   if (attrs.varDefault) parts.push(`default:${attrs.varDefault}`);
   if (attrs.suppressZero === "true") parts.push(`suppress:zero`);
   if (attrs.format) parts.push(`format:${attrs.format}`);
+  if (attrs.block === "true") parts.push(`block:true`);
   return `{{${parts.join("|")}}}`;
 }
 function serializeInline(content) {
@@ -2633,6 +2933,10 @@ function serializeInline(content) {
       result += serializeFieldToken(node.attrs || {});
       continue;
     }
+    if (node.type === "imageNode") {
+      result += serializeImageNode(node.attrs || {});
+      continue;
+    }
     if (node.type === "variableNode") {
       let token = serializeVariableToken(node.attrs || {});
       const varMarks = node.marks || [];
@@ -2739,6 +3043,9 @@ ${text}
     case "tableCell": {
       return (node.content || []).map(serializeBlock).join("");
     }
+    case "imageNode": {
+      return serializeImageNode(node.attrs || {});
+    }
     case "watermark": {
       const attrs = node.attrs || {};
       const parts = [];
@@ -4802,8 +5109,8 @@ function validateMarkdown(markdown) {
         errors.push(`Malformed token at line ${lineNum}: missing | delimiter`);
       } else {
         const tokenType = tokenContent.slice(0, pipeIdx);
-        if (tokenType !== "field" && tokenType !== "var") {
-          errors.push(`Unknown token type "${tokenType}" at line ${lineNum} (expected "field" or "var")`);
+        if (tokenType !== "field" && tokenType !== "var" && tokenType !== "image") {
+          errors.push(`Unknown token type "${tokenType}" at line ${lineNum} (expected "field", "var" or "image")`);
         } else {
           const body = tokenContent.slice(pipeIdx + 1);
           const pairs = body.split("|");
@@ -4817,6 +5124,11 @@ function validateMarkdown(markdown) {
             if (!hasName) {
               errors.push(`Variable token at line ${lineNum} is missing required "name" attribute`);
             }
+          } else if (tokenType === "image") {
+            const hasSource = pairs.some((p) => p.startsWith("src:") || p.startsWith("var:"));
+            if (!hasSource) {
+              errors.push(`Image token at line ${lineNum} needs a "src" or "var" attribute`);
+            }
           }
         }
       }
@@ -5158,7 +5470,8 @@ function GeneratePanel({
     try {
       const content = getActiveContent();
       const { content: expanded, values: enrichedValues } = expandRepeatContent(content, variableValues);
-      const suppressed = suppressZeroContent(expanded, enrichedValues);
+      const blockExpanded = expandBlockVariables(expanded, enrichedValues);
+      const suppressed = suppressZeroContent(blockExpanded, enrichedValues);
       const replaced = replaceVariablesInContent(suppressed, enrichedValues);
       const fields = extractFieldsFromContent(replaced);
       const result = await generatePdfFromContent(replaced);
@@ -5181,7 +5494,8 @@ function GeneratePanel({
     try {
       const content = getActiveContent();
       const { content: expanded, values: enrichedValues } = expandRepeatContent(content, variableValues);
-      const suppressed = suppressZeroContent(expanded, enrichedValues);
+      const blockExpanded = expandBlockVariables(expanded, enrichedValues);
+      const suppressed = suppressZeroContent(blockExpanded, enrichedValues);
       const replaced = replaceVariablesInContent(suppressed, enrichedValues);
       const fields = extractFieldsFromContent(replaced);
       const result = await generatePdfFromContent(replaced, {
@@ -5263,7 +5577,8 @@ function GeneratePanel({
       for (let i = 0; i < bulkData.length; i++) {
         const values = bulkData[i];
         const { content: expanded, values: enrichedValues } = expandRepeatContent(content, values);
-        const suppressed = suppressZeroContent(expanded, enrichedValues);
+        const blockExpanded = expandBlockVariables(expanded, enrichedValues);
+        const suppressed = suppressZeroContent(blockExpanded, enrichedValues);
         const replaced = replaceVariablesInContent(suppressed, enrichedValues);
         const fields = extractFieldsFromContent(replaced);
         const result = await generatePdfFromContent(replaced, {
@@ -7152,6 +7467,7 @@ exports.PreviewPanel = PreviewPanel;
 exports.RepeatNode = RepeatNode;
 exports.SubtotalsNode = SubtotalsNode;
 exports.ThemeProvider = ThemeProvider;
+exports.expandBlockVariables = expandBlockVariables;
 exports.expandRepeatContent = expandRepeatContent;
 exports.extractVariablesFromContent = extractVariablesFromContent;
 exports.generatePdfFromMarkdown = generatePdfFromMarkdown;