@signiphi/pdf-compose 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/index.mjs

@@ -1,17 +1,21 @@
 import * as React12 from 'react';
 import React12__default, { createContext, useCallback, useState, useRef, useEffect, useMemo, useContext } from 'react';
-import { AlertTriangle, RefreshCw, FileText, ChevronDown, Circle, CheckSquare, Calendar, Hash, PenTool, Type, Braces, ChevronLeft, ChevronRight, ZoomOut, ZoomIn, Maximize2, Loader2, Plus, PanelLeftOpen, CheckCircle2, FileDown, PanelLeftClose, Undo, Redo, Bold, Italic, Underline as Underline$1, Code, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Minus, AlignLeft, AlignCenter, AlignRight, Trash2, X, PenLine, Upload, WrapText, Download } from 'lucide-react';
+import { AlertTriangle, RefreshCw, FileText, ChevronDown, Circle, CheckSquare, Calendar, Hash, PenTool, Type, Braces, Droplets, Image, ChevronLeft, ChevronRight, ZoomOut, ZoomIn, Maximize2, Loader2, Plus, Save, FileDown, CheckCircle2, PanelLeftOpen, PanelLeftClose, Undo, Redo, Bold, Italic, Underline as Underline$1, Code, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Minus, AlignLeft, AlignCenter, AlignRight, Trash2, X, PenLine, Upload, Search, WrapText, Download } from 'lucide-react';
 import { ReactNodeViewRenderer, NodeViewWrapper, useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Underline from '@tiptap/extension-underline';
 import TextAlign from '@tiptap/extension-text-align';
 import Placeholder from '@tiptap/extension-placeholder';
+import Table from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
 import { Node, mergeAttributes } from '@tiptap/core';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { v4 } from 'uuid';
-import { PDFDocument, StandardFonts, rgb, PDFName as PDFName$1, PDFString as PDFString$1 } from 'pdf-lib';
+import { PDFDocument, StandardFonts, rgb, degrees, PDFName as PDFName$1, PDFString as PDFString$1 } from 'pdf-lib';
 import { NodeSelection } from '@tiptap/pm/state';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -21,7 +25,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -213,7 +217,10 @@ var VariableNode = Node.create({
     return {
       varName: { default: "" },
       varLabel: { default: "" },
-      varDefault: { default: "" }
+      varDefault: { default: "" },
+      format: { default: "" },
+      suppressZero: { default: "" },
+      block: { default: "" }
     };
   },
   parseHTML() {
@@ -279,6 +286,235 @@ var VariableNode = Node.create({
     };
   }
 });
+var PanelNode = Node.create({
+  name: "panel",
+  group: "block",
+  content: "block+",
+  defining: true,
+  addAttributes() {
+    return {
+      title: { default: "" },
+      border: { default: "solid" },
+      headerStyle: { default: "" }
+    };
+  },
+  parseHTML() {
+    return [{
+      tag: "div[data-panel-node]",
+      contentElement: "div.panel-content"
+    }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const { title, border, headerStyle } = node.attrs;
+    const classes = ["panel-node"];
+    if (border === "dashed") classes.push("panel-border-dashed");
+    else if (border === "none") classes.push("panel-border-none");
+    else classes.push("panel-border-solid");
+    if (headerStyle === "dark") classes.push("panel-dark");
+    const attrs = mergeAttributes(
+      { "data-panel-node": "", class: classes.join(" ") },
+      HTMLAttributes
+    );
+    if (title) {
+      return [
+        "div",
+        attrs,
+        ["div", { class: "panel-title" }, title],
+        ["div", { class: "panel-content" }, 0]
+      ];
+    }
+    return ["div", attrs, ["div", { class: "panel-content" }, 0]];
+  }
+});
+var ColumnsNode = Node.create({
+  name: "columns",
+  group: "block",
+  content: "column+",
+  defining: true,
+  addAttributes() {
+    return {
+      split: { default: "50" },
+      padX: { default: "0" }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div[data-columns-node]" }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const split = node.attrs.split || "50";
+    return ["div", mergeAttributes(
+      {
+        "data-columns-node": "",
+        class: "columns-node",
+        style: `--xpc-col-split: ${split}`
+      },
+      HTMLAttributes
+    ), 0];
+  }
+});
+var ColumnNode = Node.create({
+  name: "column",
+  group: "",
+  content: "block+",
+  defining: true,
+  addAttributes() {
+    return {
+      padTop: { default: 0 }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div[data-column-node]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(
+      { "data-column-node": "", class: "column-node" },
+      HTMLAttributes
+    ), 0];
+  }
+});
+function WatermarkNodeView({ node, selected }) {
+  const { text } = node.attrs;
+  return /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-watermark-node": "",
+      className: cn(
+        "inline-flex items-center gap-2 px-3 py-1.5 rounded-md border text-sm my-1",
+        "bg-blue-50 text-blue-600 border-blue-200",
+        selected && "ring-2 ring-primary ring-offset-1"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Droplets, { size: 14 }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Watermark: ",
+          text || "(empty)"
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/extensions/watermark-node.ts
+var WatermarkNode = Node.create({
+  name: "watermark",
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: false,
+  addAttributes() {
+    return {
+      text: { default: "" },
+      opacity: { default: "0.15" },
+      angle: { default: "-45" }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div[data-watermark-node]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes({ "data-watermark-node": "" }, HTMLAttributes)];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(WatermarkNodeView);
+  }
+});
+function ImageNodeView({ node, selected }) {
+  const { src, varName, alt, width, height, align } = node.attrs;
+  const hasRenderableSrc = !!src && /^(https?:|data:)/i.test(src);
+  const wrapperJustify = align === "center" ? "justify-center" : align === "right" ? "justify-end" : "justify-start";
+  const toCssSize = (v) => /^\d+(\.\d+)?$/.test(v) ? `${v}px` : v;
+  const sizeStyle = {};
+  if (width) sizeStyle.width = toCssSize(width);
+  if (height) sizeStyle.height = toCssSize(height);
+  return /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsx("div", { className: cn("flex my-1", wrapperJustify), "data-image-node": "", children: hasRenderableSrc ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: alt || varName || "",
+      style: sizeStyle,
+      className: cn(
+        "max-w-full rounded-sm object-contain",
+        selected && "ring-2 ring-primary ring-offset-1"
+      ),
+      draggable: false
+    }
+  ) : /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-image-placeholder": "",
+      className: cn(
+        "inline-flex items-center gap-2 px-3 py-2 rounded-md border border-dashed text-sm",
+        "bg-slate-50 text-slate-500 border-slate-300",
+        selected && "ring-2 ring-primary ring-offset-1"
+      ),
+      style: height ? { minHeight: toCssSize(height) } : void 0,
+      title: varName ? `Image variable: ${varName}` : "Image",
+      children: [
+        /* @__PURE__ */ jsx(Image, { size: 16 }),
+        /* @__PURE__ */ jsx("span", { children: varName ? `Image: ${varName}` : alt || "Image" })
+      ]
+    }
+  ) }) });
+}
+
+// src/extensions/image-node.ts
+var ImageNode = Node.create({
+  name: "imageNode",
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: false,
+  addAttributes() {
+    return {
+      src: { default: "" },
+      varName: { default: "" },
+      alt: { default: "" },
+      width: { default: "" },
+      height: { default: "" },
+      align: { default: "" }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div[data-image-node]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes({ "data-image-node": "" }, HTMLAttributes)];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageNodeView);
+  }
+});
+var RepeatNode = Node.create({
+  name: "repeatBlock",
+  group: "block",
+  content: "block+",
+  addAttributes() {
+    return {
+      data: { default: "" }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div[data-repeat-node]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes({ "data-repeat-node": "" }, HTMLAttributes), 0];
+  }
+});
+var SubtotalsNode = Node.create({
+  name: "subtotalsBlock",
+  group: "block",
+  content: "block+",
+  defining: true,
+  parseHTML() {
+    return [{ tag: "div[data-subtotals-node]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(
+      { "data-subtotals-node": "", class: "subtotals-block" },
+      HTMLAttributes
+    ), 0];
+  }
+});
 
 // src/types/index.ts
 var FormFieldType = /* @__PURE__ */ ((FormFieldType2) => {
@@ -357,158 +593,23 @@ 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 replaceVariablesInContent(content, values) {
-  function walkNode(node) {
-    if (node.type === "variableNode" && node.attrs) {
-      const varName = node.attrs.varName;
-      const replacement = values[varName] || node.attrs.varDefault || `[${node.attrs.varLabel || varName}]`;
-      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);
-}
-
-// src/utils/markdown-writer.ts
-function serializeFieldToken(attrs) {
-  const parts = ["field"];
-  if (attrs.fieldType) parts.push(`type:${attrs.fieldType}`);
-  if (attrs.fieldName) parts.push(`name:${attrs.fieldName}`);
-  if (attrs.fieldLabel) parts.push(`label:${attrs.fieldLabel}`);
-  if (attrs.fieldId) parts.push(`id:${attrs.fieldId}`);
-  if (attrs.required) parts.push(`required:true`);
-  if (attrs.options) parts.push(`options:${attrs.options}`);
-  if (attrs.fontSize) parts.push(`fontSize:${attrs.fontSize}`);
-  if (attrs.placeholder) parts.push(`placeholder:${attrs.placeholder}`);
-  if (attrs.defaultValue) parts.push(`defaultValue:${attrs.defaultValue}`);
-  if (attrs.multiline) parts.push(`multiline:true`);
-  if (attrs.maxLength) parts.push(`maxLength:${attrs.maxLength}`);
-  if (attrs.acknowledgements) parts.push(`acks:${btoa(attrs.acknowledgements)}`);
-  return `{{${parts.join("|")}}}`;
-}
-function serializeVariableToken(attrs) {
-  const parts = ["var"];
-  if (attrs.varName) parts.push(`name:${attrs.varName}`);
-  if (attrs.varLabel) parts.push(`label:${attrs.varLabel}`);
-  if (attrs.varDefault) parts.push(`default:${attrs.varDefault}`);
-  return `{{${parts.join("|")}}}`;
-}
-function serializeInline(content) {
-  if (!content) return "";
-  let result = "";
-  for (const node of content) {
-    if (node.type === "fieldNode") {
-      result += serializeFieldToken(node.attrs || {});
-      continue;
-    }
-    if (node.type === "variableNode") {
-      let token = serializeVariableToken(node.attrs || {});
-      const varMarks = node.marks || [];
-      const isBold = varMarks.some((m) => m.type === "bold");
-      const isItalic = varMarks.some((m) => m.type === "italic");
-      const isUnderline = varMarks.some((m) => m.type === "underline");
-      if (isBold && isItalic) token = `***${token}***`;
-      else if (isBold) token = `**${token}**`;
-      else if (isItalic) token = `*${token}*`;
-      if (isUnderline) token = `__${token}__`;
-      result += token;
-      continue;
-    }
-    if (node.type === "text") {
-      let text = node.text || "";
-      const marks = node.marks || [];
-      for (const mark of marks) {
-        if (mark.type === "bold") text = `**${text}**`;
-        else if (mark.type === "italic") text = `*${text}*`;
-        else if (mark.type === "underline") text = `__${text}__`;
-        else if (mark.type === "code") text = `\`${text}\``;
-      }
-      result += text;
-    }
-    if (node.type === "hardBreak") {
-      result += "  \n";
-    }
-  }
-  return result;
-}
-function serializeBlock(node) {
-  switch (node.type) {
-    case "heading": {
-      const level = node.attrs?.level || 1;
-      const prefix = "#".repeat(level);
-      return `${prefix} ${serializeInline(node.content)}`;
-    }
-    case "paragraph": {
-      const inline = serializeInline(node.content);
-      return inline;
-    }
-    case "bulletList": {
-      return (node.content || []).map((item) => {
-        const inner = (item.content || []).map(serializeBlock).join("\n");
-        return `- ${inner}`;
-      }).join("\n");
-    }
-    case "orderedList": {
-      return (node.content || []).map((item, i) => {
-        const inner = (item.content || []).map(serializeBlock).join("\n");
-        return `${i + 1}. ${inner}`;
-      }).join("\n");
-    }
-    case "listItem": {
-      return (node.content || []).map(serializeBlock).join("\n");
-    }
-    case "blockquote": {
-      return (node.content || []).map(serializeBlock).map((line) => `> ${line}`).join("\n");
-    }
-    case "codeBlock": {
-      const text = serializeInline(node.content);
-      return `\`\`\`
-${text}
-\`\`\``;
-    }
-    case "horizontalRule": {
-      return "---";
-    }
-    default:
-      return serializeInline(node.content);
+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) {
+  const attrs = {};
+  if (!str) return attrs;
+  const pairs = str.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();
+    if (key) attrs[key] = value;
   }
+  return attrs;
 }
-function tiptapToMarkdown(doc) {
-  if (!doc.content) return "";
-  return doc.content.map(serializeBlock).join("\n\n");
-}
-var TOKEN_REGEX = /\{\{(field|var)\|([^}]+)\}\}/g;
 function injectMarks(token, marks) {
   const existingMatch = token.match(/\|_marks:([^}|]+)/);
   if (existingMatch) {
@@ -625,6 +726,15 @@ function parseVariableToken(tokenBody) {
       case "default":
         attrs.varDefault = value;
         break;
+      case "suppress":
+        attrs.suppressZero = value === "zero" ? "true" : "";
+        break;
+      case "format":
+        attrs.format = value;
+        break;
+      case "block":
+        attrs.block = value === "true" ? "true" : "";
+        break;
       case "_marks":
         attrs._marks = value;
         break;
@@ -632,6 +742,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 = [];
@@ -655,6 +803,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;
   }
@@ -666,45 +816,63 @@ function parseInline(text) {
 function parseFormattedText(text) {
   if (!text) return [];
   const nodes = [];
-  const parts = text.split(/(\*\*[^*]+\*\*|\*[^*]+\*|__[^_]+__|`[^`]+`)/);
+  const parts = text.split(/(\*\*\*[^*]+\*\*\*|\*\*[^*]+\*\*|\*[^*]+\*|__[^_]+__|`[^`]+`)/);
   for (const part of parts) {
     if (!part) continue;
-    if (part.startsWith("**") && part.endsWith("**")) {
-      nodes.push({
-        type: "text",
-        text: part.slice(2, -2),
-        marks: [{ type: "bold" }]
-      });
+    if (part.startsWith("***") && part.endsWith("***")) {
+      const inner = part.slice(3, -3);
+      if (inner) nodes.push({ type: "text", text: inner, marks: [{ type: "bold" }, { type: "italic" }] });
+    } else if (part.startsWith("**") && part.endsWith("**")) {
+      const inner = part.slice(2, -2);
+      if (inner) nodes.push({ type: "text", text: inner, marks: [{ type: "bold" }] });
     } else if (part.startsWith("*") && part.endsWith("*")) {
-      nodes.push({
-        type: "text",
-        text: part.slice(1, -1),
-        marks: [{ type: "italic" }]
-      });
+      const inner = part.slice(1, -1);
+      if (inner) nodes.push({ type: "text", text: inner, marks: [{ type: "italic" }] });
     } else if (part.startsWith("__") && part.endsWith("__")) {
-      nodes.push({
-        type: "text",
-        text: part.slice(2, -2),
-        marks: [{ type: "underline" }]
-      });
+      const inner = part.slice(2, -2);
+      if (inner) nodes.push({ type: "text", text: inner, marks: [{ type: "underline" }] });
     } else if (part.startsWith("`") && part.endsWith("`")) {
-      nodes.push({
-        type: "text",
-        text: part.slice(1, -1),
-        marks: [{ type: "code" }]
-      });
+      const inner = part.slice(1, -1);
+      if (inner) nodes.push({ type: "text", text: inner, marks: [{ type: "code" }] });
     } else {
       nodes.push({ type: "text", text: part });
     }
   }
   return nodes;
 }
-function markdownToTiptap(markdown) {
-  const lines = markdown.split("\n");
+function splitTableCells(row) {
+  const cells = [];
+  let current = "";
+  let depth = 0;
+  for (let i = 0; i < row.length; i++) {
+    if (row[i] === "{" && row[i + 1] === "{") {
+      depth++;
+      current += "{{";
+      i++;
+    } else if (row[i] === "}" && row[i + 1] === "}") {
+      depth = Math.max(0, depth - 1);
+      current += "}}";
+      i++;
+    } else if (row[i] === "|" && depth === 0) {
+      cells.push(current.trim());
+      current = "";
+    } else {
+      current += row[i];
+    }
+  }
+  if (current.trim()) {
+    cells.push(current.trim());
+  }
+  return cells;
+}
+function parseBlocks(lines, startIdx, stopCondition) {
   const content = [];
-  let i = 0;
+  let i = startIdx;
   while (i < lines.length) {
     const line = lines[i];
+    if (stopCondition && stopCondition(line)) {
+      break;
+    }
     if (line.trim() === "") {
       i++;
       continue;
@@ -778,13 +946,443 @@ function markdownToTiptap(markdown) {
       });
       continue;
     }
-    content.push({
-      type: "paragraph",
-      content: parseInline(line)
-    });
+    if (line.trimStart().startsWith("|") && line.trimEnd().endsWith("|")) {
+      const tableLines = [];
+      while (i < lines.length) {
+        const tl = lines[i];
+        if (tl.trimStart().startsWith("|") && tl.trimEnd().endsWith("|")) {
+          tableLines.push(tl);
+          i++;
+        } else {
+          break;
+        }
+      }
+      const separatorRegex = /^[\s|]*-+[\s|:-]*$/;
+      const dataLines = tableLines.filter(
+        (tl) => !separatorRegex.test(tl.replace(/^\s*\|/, "").replace(/\|\s*$/, ""))
+      );
+      const firstDataCellsRaw = dataLines.length > 0 ? splitTableCells(dataLines[0]) : [];
+      const isSubtotals = firstDataCellsRaw.length >= 2 && firstDataCellsRaw.every((c) => c.trim() === "_");
+      const isBorderless = isSubtotals || firstDataCellsRaw.length >= 2 && firstDataCellsRaw.every((c) => c.trim() === "");
+      const tableRows = [];
+      let isFirstDataRow = true;
+      for (const tl of tableLines) {
+        if (separatorRegex.test(tl.replace(/^\s*\|/, "").replace(/\|\s*$/, ""))) continue;
+        const cells = splitTableCells(tl).filter((c) => c !== "");
+        if (isBorderless && isFirstDataRow) {
+          isFirstDataRow = false;
+          continue;
+        }
+        const cellType = isFirstDataRow && !isBorderless ? "tableHeader" : "tableCell";
+        const rowContent = cells.map((cellText) => ({
+          type: cellType,
+          content: [{ type: "paragraph", content: cellText ? parseInline(cellText) : [] }]
+        }));
+        tableRows.push({ type: "tableRow", content: rowContent });
+        isFirstDataRow = false;
+      }
+      if (tableRows.length > 0) {
+        const tableNode = { type: "table", content: tableRows };
+        if (isBorderless) {
+          tableNode.attrs = { borderless: true, ...isSubtotals ? { subtotals: true } : {} };
+        }
+        content.push(tableNode);
+      }
+      continue;
+    }
+    const directiveMatch = line.trim().match(DIRECTIVE_OPEN);
+    if (directiveMatch) {
+      const directiveType = directiveMatch[1];
+      const rawAttrs = directiveMatch[2] || "";
+      const attrs = parseDirectiveAttrs(rawAttrs);
+      i++;
+      if (directiveType === "watermark") {
+        content.push({
+          type: "watermark",
+          attrs: {
+            text: attrs.text || "",
+            opacity: attrs.opacity || "0.15",
+            angle: attrs.angle || "-45"
+          }
+        });
+        continue;
+      }
+      if (directiveType === "panel") {
+        const inner = parseBlocks(lines, i, (l) => DIRECTIVE_CLOSE.test(l.trim()));
+        i = inner.nextIdx;
+        if (i < lines.length && DIRECTIVE_CLOSE.test(lines[i].trim())) {
+          i++;
+        }
+        content.push({
+          type: "panel",
+          attrs: {
+            title: attrs.title || "",
+            border: attrs.border || "solid",
+            headerStyle: attrs.headerStyle || ""
+          },
+          content: inner.blocks.length > 0 ? inner.blocks : [{ type: "paragraph" }]
+        });
+        continue;
+      }
+      if (directiveType === "repeat") {
+        const inner = parseBlocks(lines, i, (l) => DIRECTIVE_CLOSE.test(l.trim()));
+        i = inner.nextIdx;
+        if (i < lines.length && DIRECTIVE_CLOSE.test(lines[i].trim())) {
+          i++;
+        }
+        content.push({
+          type: "repeatBlock",
+          attrs: { data: attrs.data || "" },
+          content: inner.blocks.length > 0 ? inner.blocks : [{ type: "paragraph" }]
+        });
+        continue;
+      }
+      if (directiveType === "subtotals") {
+        const inner = parseBlocks(lines, i, (l) => DIRECTIVE_CLOSE.test(l.trim()));
+        i = inner.nextIdx;
+        if (i < lines.length && DIRECTIVE_CLOSE.test(lines[i].trim())) {
+          i++;
+        }
+        content.push({
+          type: "subtotalsBlock",
+          content: inner.blocks.length > 0 ? inner.blocks : [{ type: "paragraph" }]
+        });
+        continue;
+      }
+      if (directiveType === "columns") {
+        const splitVal = attrs.split || "50";
+        const columns = [];
+        while (i < lines.length) {
+          const colLine = lines[i].trim();
+          if (DIRECTIVE_CLOSE.test(colLine)) {
+            if (columns.length > 0) {
+              i++;
+              break;
+            }
+            i++;
+            break;
+          }
+          const colMatch = colLine.match(/^:::col(?:\{([^}]*)\})?$/);
+          if (colMatch) {
+            i++;
+            const colInner = parseBlocks(lines, i, (l) => {
+              const trimmed = l.trim();
+              return DIRECTIVE_CLOSE.test(trimmed) || /^:::col(?:\{[^}]*\})?$/.test(trimmed);
+            });
+            i = colInner.nextIdx;
+            if (i < lines.length && DIRECTIVE_CLOSE.test(lines[i].trim())) {
+              i++;
+            }
+            const colAttrsRaw = colMatch[1] || "";
+            const colAttrs = parseDirectiveAttrs(colAttrsRaw);
+            const padTop = parseFloat(colAttrs.padTop || "0") || 0;
+            columns.push({
+              type: "column",
+              attrs: padTop ? { padTop } : void 0,
+              content: colInner.blocks.length > 0 ? colInner.blocks : [{ type: "paragraph" }]
+            });
+            continue;
+          }
+          if (colLine === "") {
+            i++;
+            continue;
+          }
+          break;
+        }
+        const columnsAttrs = { split: splitVal };
+        if (attrs.padX) columnsAttrs.padX = attrs.padX;
+        content.push({
+          type: "columns",
+          attrs: columnsAttrs,
+          content: columns.length > 0 ? columns : [
+            { type: "column", content: [{ type: "paragraph" }] },
+            { type: "column", content: [{ type: "paragraph" }] }
+          ]
+        });
+        continue;
+      }
+      if (directiveType === "col") {
+        const inner = parseBlocks(lines, i, (l) => DIRECTIVE_CLOSE.test(l.trim()));
+        i = inner.nextIdx;
+        if (i < lines.length && DIRECTIVE_CLOSE.test(lines[i].trim())) {
+          i++;
+        }
+        for (const block of inner.blocks) {
+          content.push(block);
+        }
+        continue;
+      }
+      continue;
+    }
+    if (DIRECTIVE_CLOSE.test(line.trim())) {
+      i++;
+      continue;
+    }
+    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);
+    if (inlineNodes.some((n) => n.type === "imageNode")) {
+      let run = [];
+      const flushRun = () => {
+        if (run.some((n) => !(n.type === "text" && !(n.text || "").trim()))) {
+          content.push({ type: "paragraph", content: run });
+        }
+        run = [];
+      };
+      for (const n of inlineNodes) {
+        if (n.type === "imageNode") {
+          flushRun();
+          content.push(n);
+        } else {
+          run.push(n);
+        }
+      }
+      flushRun();
+    } else {
+      content.push({ type: "paragraph", content: inlineNodes });
+    }
     i++;
   }
-  return { type: "doc", content };
+  return { blocks: content, nextIdx: i };
+}
+function markdownToTiptap(markdown) {
+  const lines = markdown.split("\n");
+  const { blocks } = parseBlocks(lines, 0);
+  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
@@ -922,10 +1520,40 @@ function buildMetadataObject(fields, actualFieldNames) {
 // src/utils/pdf-generator.ts
 var PAGE_WIDTH = 595.28;
 var PAGE_HEIGHT = 841.89;
-var MARGIN = 72;
+var MARGIN = 40;
 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 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 ? rgb(0, 0, 0) : 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 ?? rgb(0.3, 0.3, 0.3),
+    tableHeaderText: primary ? contrastTextColor(primary) : rgb(1, 1, 1),
+    tableBorder: border ?? rgb(0.75, 0.75, 0.75),
+    panelDarkHeaderBg: primary ?? rgb(0.25, 0.25, 0.25),
+    panelDarkHeaderText: primary ? contrastTextColor(primary) : rgb(1, 1, 1),
+    panelBorder: border ?? rgb(0.6, 0.6, 0.6),
+    rule: primary ?? rgb(0, 0, 0),
+    pageHeaderText: primary ?? rgb(0, 0, 0),
+    pageHeaderRule: accent ?? primary ?? 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 },
   ["signature" /* SIGNATURE */]: { label: "Signature", width: 200, height: 60 },
@@ -956,17 +1584,65 @@ 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]);
     state.currentPage = newPage;
     state.pageIndex++;
     state.y = 0;
+    renderWatermarksOnPage(newPage, state.fonts, state.watermarkNodes);
   }
 }
-function drawText(state, text, font, fontSize, indent = 0) {
+function drawText(state, text, font, fontSize, indent = 0, region = DEFAULT_REGION) {
   const lineHeight = fontSize * LINE_HEIGHT_FACTOR;
-  const maxWidth = CONTENT_WIDTH - indent;
+  const maxWidth = region.width - indent;
   const words = text.split(/\s+/);
   let line = "";
   let totalAdvance = 0;
@@ -977,7 +1653,7 @@ function drawText(state, text, font, fontSize, indent = 0) {
       ensureSpace(state, lineHeight);
       const pdfY = PAGE_HEIGHT - MARGIN - state.y - fontSize;
       state.currentPage.drawText(line, {
-        x: MARGIN + indent,
+        x: region.leftX + indent,
         y: pdfY,
         size: fontSize,
         font,
@@ -994,7 +1670,7 @@ function drawText(state, text, font, fontSize, indent = 0) {
     ensureSpace(state, lineHeight);
     const pdfY = PAGE_HEIGHT - MARGIN - state.y - fontSize;
     state.currentPage.drawText(line, {
-      x: MARGIN + indent,
+      x: region.leftX + indent,
       y: pdfY,
       size: fontSize,
       font,
@@ -1038,10 +1714,10 @@ function collectInlineSegments(content, fonts, fontSize) {
   }
   return segments;
 }
-function layoutInlineSegments(state, segments, fontSize, indent = 0) {
+function layoutInlineSegments(state, segments, fontSize, indent = 0, region = DEFAULT_REGION) {
   const textLineHeight = fontSize * LINE_HEIGHT_FACTOR;
-  const maxX = MARGIN + CONTENT_WIDTH;
-  const startX = MARGIN + indent;
+  const maxX = region.leftX + region.width;
+  const startX = region.leftX + indent;
   let currentX = startX;
   let currentLineHeight = 0;
   let lineHasContent = false;
@@ -1146,13 +1822,318 @@ function layoutInlineSegments(state, segments, fontSize, indent = 0) {
   }
   flushLine();
 }
-function processInlineContent(state, content, fontSize, indent = 0) {
+function processInlineContent(state, content, fontSize, indent = 0, region = DEFAULT_REGION) {
   if (!content) return;
   const segments = collectInlineSegments(content, state.fonts, fontSize);
   if (segments.length === 0) return;
-  layoutInlineSegments(state, segments, fontSize, indent);
+  layoutInlineSegments(state, segments, fontSize, indent, region);
+}
+function extractCellText(cell) {
+  const parts = [];
+  for (const child of cell.content || []) {
+    if (child.type === "paragraph" || child.type === "heading") {
+      for (const inline of child.content || []) {
+        if (inline.type === "text") {
+          parts.push(inline.text || "");
+        } else if (inline.type === "variableNode") {
+          const label = inline.attrs?.varLabel || inline.attrs?.varName || "Variable";
+          parts.push(`[${label}]`);
+        } else if (inline.type === "fieldNode") {
+          const label = inline.attrs?.fieldLabel || inline.attrs?.fieldName || "Field";
+          parts.push(`[ ${label} ]`);
+        }
+      }
+    }
+  }
+  return parts.join("");
 }
-function processBlock(state, node) {
+function isNumericText(text) {
+  return /^\s*\$?\s*[\d,.]+\s*$/.test(text);
+}
+function measureCellHeight(cell, maxWidth, fonts, fontSize, isHeader) {
+  const lineHeight = fontSize * LINE_HEIGHT_FACTOR;
+  const font = isHeader ? fonts.bold : fonts.regular;
+  let totalHeight = 0;
+  for (const child of cell.content || []) {
+    if (child.type === "paragraph" || child.type === "heading") {
+      const text = extractCellText({ content: [child] });
+      if (!text) {
+        totalHeight += lineHeight;
+        continue;
+      }
+      const words = text.split(/\s+/);
+      let line = "";
+      let lineCount = 0;
+      for (const word of words) {
+        const testLine = line ? `${line} ${word}` : word;
+        const testWidth = font.widthOfTextAtSize(testLine, fontSize);
+        if (testWidth > maxWidth && line) {
+          lineCount++;
+          line = word;
+        } else {
+          line = testLine;
+        }
+      }
+      if (line) lineCount++;
+      totalHeight += lineCount * lineHeight;
+    }
+  }
+  return Math.max(totalHeight, lineHeight);
+}
+function renderCellContent(state, cell, cellX, cellY, cellWidth, fonts, fontSize, isHeader, rightAlign, textColor = rgb(0, 0, 0)) {
+  const lineHeight = fontSize * LINE_HEIGHT_FACTOR;
+  const cellPadding = 4;
+  const maxTextWidth = cellWidth - cellPadding * 2;
+  let textX = cellX + cellPadding;
+  let textY = cellY;
+  for (const child of cell.content || []) {
+    if (child.type === "paragraph" || child.type === "heading") {
+      const segments = collectInlineSegments(
+        child.content || [],
+        isHeader ? { regular: fonts.bold, bold: fonts.bold, italic: fonts.boldItalic, boldItalic: fonts.boldItalic } : fonts,
+        fontSize
+      );
+      if (rightAlign && segments.length > 0) {
+        const fullText = segments.filter((s) => s.kind === "text").map((s) => s.text).join("");
+        const textWidth = (isHeader ? fonts.bold : fonts.regular).widthOfTextAtSize(fullText, fontSize);
+        if (textWidth <= maxTextWidth) {
+          const pdfY = PAGE_HEIGHT - textY - fontSize;
+          state.currentPage.drawText(fullText, {
+            x: cellX + cellWidth - cellPadding - textWidth,
+            y: pdfY,
+            size: fontSize,
+            font: isHeader ? fonts.bold : fonts.regular,
+            color: textColor
+          });
+          return;
+        }
+      }
+      let currentX = textX;
+      for (const seg of segments) {
+        if (seg.kind === "break") {
+          textY += lineHeight;
+          currentX = textX;
+          continue;
+        }
+        if (seg.kind === "text") {
+          const words = seg.text.split(/(\s+)/);
+          const spaceWidth = seg.font.widthOfTextAtSize(" ", fontSize);
+          for (const token of words) {
+            if (!token) continue;
+            if (/^\s+$/.test(token)) {
+              currentX += spaceWidth;
+              continue;
+            }
+            const wordWidth = seg.font.widthOfTextAtSize(token, fontSize);
+            if (currentX + wordWidth > textX + maxTextWidth && currentX > textX) {
+              textY += lineHeight;
+              currentX = textX;
+            }
+            const pdfY = PAGE_HEIGHT - textY - fontSize;
+            state.currentPage.drawText(token, {
+              x: currentX,
+              y: pdfY,
+              size: fontSize,
+              font: seg.font,
+              color: textColor
+            });
+            currentX += wordWidth;
+          }
+        } else if (seg.kind === "field") {
+          const pdfY = PAGE_HEIGHT - textY - seg.height;
+          if (state.drawFieldPlaceholders) {
+            state.currentPage.drawRectangle({
+              x: currentX,
+              y: pdfY,
+              width: seg.width,
+              height: seg.height,
+              borderColor: rgb(0.5, 0.5, 0.7),
+              borderWidth: 0.5,
+              color: rgb(0.95, 0.95, 1),
+              borderDashArray: [4, 2]
+            });
+          }
+          const fieldId = seg.attrs.fieldId;
+          if (fieldId) {
+            state.fieldPositions.set(fieldId, {
+              x: currentX,
+              y: pdfY,
+              width: seg.width,
+              height: seg.height,
+              page: state.pageIndex + 1
+            });
+          }
+          currentX += seg.width + 4;
+        }
+      }
+    }
+  }
+}
+function renderTable(state, node, region = DEFAULT_REGION) {
+  const tableRows = node.content || [];
+  if (tableRows.length === 0) return;
+  const borderless = node.attrs?.borderless === true;
+  const subtotals = node.attrs?.subtotals === true;
+  const fontSize = 10;
+  const cellPadding = borderless ? 2 : 4;
+  const lineHeight = fontSize * LINE_HEIGHT_FACTOR;
+  const rowPadding = cellPadding * 2;
+  const borderColor = state.theme.tableBorder;
+  const headerBg = state.theme.tableHeaderBg;
+  const headerTextColor = state.theme.tableHeaderText;
+  let colCount = 0;
+  for (const row of tableRows) {
+    colCount = Math.max(colCount, row.content?.length || 0);
+  }
+  if (colCount === 0) return;
+  const colMaxWidths = new Array(colCount).fill(0);
+  for (const row of tableRows) {
+    const cells = row.content || [];
+    for (let c = 0; c < cells.length && c < colCount; c++) {
+      const cell = cells[c];
+      const isHeader = cell.type === "tableHeader";
+      const text = extractCellText(cell);
+      const font = isHeader ? state.fonts.bold : state.fonts.regular;
+      const textWidth = font.widthOfTextAtSize(text, fontSize);
+      colMaxWidths[c] = Math.max(colMaxWidths[c], textWidth + cellPadding * 2 + 4);
+    }
+  }
+  const totalMeasured = colMaxWidths.reduce((a, b) => a + b, 0);
+  const minColWidth = 40;
+  let colWidths;
+  if (totalMeasured <= region.width) {
+    const scale = region.width / totalMeasured;
+    colWidths = colMaxWidths.map((w) => Math.max(w * scale, minColWidth));
+  } else {
+    colWidths = colMaxWidths.map(
+      (w) => Math.max(w / totalMeasured * region.width, minColWidth)
+    );
+  }
+  const colSum = colWidths.reduce((a, b) => a + b, 0);
+  if (colSum > 0) {
+    const normFactor = region.width / colSum;
+    colWidths = colWidths.map((w) => w * normFactor);
+  }
+  const headerRow = tableRows[0];
+  const hasHeader = headerRow?.content?.[0]?.type === "tableHeader";
+  function renderRow(row, isHeaderRow) {
+    const cells = row.content || [];
+    const isHeader = isHeaderRow && hasHeader;
+    let rowHeight = lineHeight;
+    for (let c = 0; c < cells.length && c < colCount; c++) {
+      const cellContentWidth = colWidths[c] - cellPadding * 2;
+      const cellH = measureCellHeight(cells[c], cellContentWidth, state.fonts, fontSize, isHeader);
+      rowHeight = Math.max(rowHeight, cellH);
+    }
+    rowHeight += rowPadding;
+    ensureSpace(state, rowHeight);
+    const rowTopY = state.y;
+    let cellX = region.leftX;
+    for (let c = 0; c < cells.length && c < colCount; c++) {
+      const cellW = colWidths[c];
+      const cell = cells[c];
+      const pdfCellTop = PAGE_HEIGHT - MARGIN - rowTopY;
+      const pdfCellBottom = pdfCellTop - rowHeight;
+      if (isHeader && !borderless) {
+        state.currentPage.drawRectangle({
+          x: cellX,
+          y: pdfCellBottom,
+          width: cellW,
+          height: rowHeight,
+          color: headerBg
+        });
+      }
+      if (!borderless) {
+        state.currentPage.drawRectangle({
+          x: cellX,
+          y: pdfCellBottom,
+          width: cellW,
+          height: rowHeight,
+          borderColor,
+          borderWidth: 0.5
+        });
+      }
+      const cellText = extractCellText(cell);
+      const rightAlign = !isHeader && isNumericText(cellText);
+      const contentY = MARGIN + rowTopY + cellPadding;
+      const effectiveHeader = isHeader && !borderless;
+      renderCellContent(
+        state,
+        cell,
+        cellX,
+        contentY,
+        cellW,
+        state.fonts,
+        fontSize,
+        effectiveHeader,
+        rightAlign,
+        effectiveHeader ? headerTextColor : rgb(0, 0, 0)
+      );
+      cellX += cellW;
+    }
+    state.y += rowHeight;
+  }
+  if (hasHeader && tableRows.length > 0) {
+    renderRow(tableRows[0], true);
+  }
+  let lastPageIndex = state.pageIndex;
+  const startIdx = hasHeader ? 1 : 0;
+  const bodyRowCount = tableRows.length - startIdx;
+  for (let r = startIdx; r < tableRows.length; r++) {
+    const cells = tableRows[r].content || [];
+    let estRowHeight = lineHeight;
+    for (let c = 0; c < cells.length && c < colCount; c++) {
+      const cellContentWidth = colWidths[c] - cellPadding * 2;
+      const cellH = measureCellHeight(cells[c], cellContentWidth, state.fonts, fontSize, false);
+      estRowHeight = Math.max(estRowHeight, cellH);
+    }
+    estRowHeight += rowPadding;
+    if (state.y + estRowHeight > CONTENT_HEIGHT) {
+      ensureSpace(state, estRowHeight + (hasHeader ? lineHeight + rowPadding : 0));
+      if (state.pageIndex !== lastPageIndex && hasHeader) {
+        renderRow(headerRow, true);
+        lastPageIndex = state.pageIndex;
+      }
+    }
+    const rowTopYBeforeRender = state.y;
+    renderRow(tableRows[r], false);
+    lastPageIndex = state.pageIndex;
+    if (subtotals && colCount >= 2) {
+      const bodyIdx = r - startIdx;
+      const isFirstBody = bodyIdx === 0;
+      const isLastBody = bodyIdx === bodyRowCount - 1;
+      if (isFirstBody || isLastBody) {
+        const valueStartX = region.leftX + colWidths[0];
+        const valueEndX = region.leftX + colWidths.reduce((a, b) => a + b, 0);
+        const pdfRowTopY = PAGE_HEIGHT - MARGIN - rowTopYBeforeRender;
+        const overlineColor = rgb(0, 0, 0);
+        if (isFirstBody) {
+          state.currentPage.drawLine({
+            start: { x: valueStartX, y: pdfRowTopY },
+            end: { x: valueEndX, y: pdfRowTopY },
+            thickness: 0.5,
+            color: overlineColor
+          });
+        } else if (isLastBody) {
+          state.currentPage.drawLine({
+            start: { x: valueStartX, y: pdfRowTopY + 2 },
+            end: { x: valueEndX, y: pdfRowTopY + 2 },
+            thickness: 0.5,
+            color: overlineColor
+          });
+          state.currentPage.drawLine({
+            start: { x: valueStartX, y: pdfRowTopY },
+            end: { x: valueEndX, y: pdfRowTopY },
+            thickness: 0.5,
+            color: overlineColor
+          });
+        }
+      }
+    }
+  }
+  state.y += 3;
+}
+function processBlock(state, node, region = DEFAULT_REGION) {
   switch (node.type) {
     case "heading": {
       const level = node.attrs?.level || 1;
@@ -1169,34 +2150,34 @@ function processBlock(state, node) {
         boldItalic: state.fonts.boldItalic
       };
       const segments = collectInlineSegments(node.content, headingFonts, fontSize);
-      layoutInlineSegments(state, segments, fontSize);
+      layoutInlineSegments(state, segments, fontSize, 0, region);
       state.y += spacing / 2;
       break;
     }
     case "paragraph": {
-      const fontSize = 12;
+      const fontSize = BODY_FONT_SIZE;
       if (!node.content || node.content.length === 0) {
-        state.y += fontSize * LINE_HEIGHT_FACTOR;
+        state.y += fontSize * LINE_HEIGHT_FACTOR * 0.65;
         break;
       }
-      processInlineContent(state, node.content, fontSize);
-      state.y += 4;
+      processInlineContent(state, node.content, fontSize, 0, region);
+      state.y += 2;
       break;
     }
     case "bulletList": {
       for (const item of node.content || []) {
         for (const child of item.content || []) {
-          const fontSize = 12;
+          const fontSize = BODY_FONT_SIZE;
           ensureSpace(state, fontSize * LINE_HEIGHT_FACTOR);
           const bulletPdfY = PAGE_HEIGHT - MARGIN - state.y - fontSize;
           state.currentPage.drawText("\u2022", {
-            x: MARGIN + 8,
+            x: region.leftX + 8,
             y: bulletPdfY,
             size: fontSize,
             font: state.fonts.regular,
             color: rgb(0, 0, 0)
           });
-          processInlineContent(state, child.content, fontSize, 24);
+          processInlineContent(state, child.content, fontSize, 24, region);
         }
       }
       state.y += 4;
@@ -1206,17 +2187,17 @@ function processBlock(state, node) {
       let num = 1;
       for (const item of node.content || []) {
         for (const child of item.content || []) {
-          const fontSize = 12;
+          const fontSize = BODY_FONT_SIZE;
           ensureSpace(state, fontSize * LINE_HEIGHT_FACTOR);
           const numPdfY = PAGE_HEIGHT - MARGIN - state.y - fontSize;
           state.currentPage.drawText(`${num}.`, {
-            x: MARGIN + 4,
+            x: region.leftX + 4,
             y: numPdfY,
             size: fontSize,
             font: state.fonts.regular,
             color: rgb(0, 0, 0)
           });
-          processInlineContent(state, child.content, fontSize, 24);
+          processInlineContent(state, child.content, fontSize, 24, region);
         }
         num++;
       }
@@ -1226,10 +2207,10 @@ function processBlock(state, node) {
     case "blockquote": {
       const startY = state.y;
       for (const child of node.content || []) {
-        processInlineContent(state, child.content, 12, 16);
+        processInlineContent(state, child.content, 12, 16, region);
       }
       const endY = state.y;
-      const barX = MARGIN + 4;
+      const barX = region.leftX + 4;
       const barTop = PAGE_HEIGHT - MARGIN - startY;
       const barBottom = PAGE_HEIGHT - MARGIN - endY;
       state.currentPage.drawLine({
@@ -1242,16 +2223,16 @@ function processBlock(state, node) {
       break;
     }
     case "horizontalRule": {
-      ensureSpace(state, 16);
-      state.y += 8;
+      ensureSpace(state, 10);
+      state.y += 4;
       const ruleY = PAGE_HEIGHT - MARGIN - state.y;
       state.currentPage.drawLine({
-        start: { x: MARGIN, y: ruleY },
-        end: { x: PAGE_WIDTH - MARGIN, y: ruleY },
-        thickness: 1,
-        color: rgb(0.7, 0.7, 0.7)
+        start: { x: region.leftX, y: ruleY },
+        end: { x: region.leftX + region.width, y: ruleY },
+        thickness: 2.5,
+        color: state.theme.rule
       });
-      state.y += 8;
+      state.y += 4;
       break;
     }
     case "codeBlock": {
@@ -1263,9 +2244,9 @@ function processBlock(state, node) {
       ensureSpace(state, blockHeight);
       const boxY = PAGE_HEIGHT - MARGIN - state.y - blockHeight;
       state.currentPage.drawRectangle({
-        x: MARGIN,
+        x: region.leftX,
         y: boxY,
-        width: CONTENT_WIDTH,
+        width: region.width,
         height: blockHeight,
         color: rgb(0.95, 0.95, 0.95),
         borderColor: rgb(0.85, 0.85, 0.85),
@@ -1273,18 +2254,325 @@ function processBlock(state, node) {
       });
       state.y += 8;
       for (const line of lines) {
-        drawText(state, line || " ", state.fonts.regular, fontSize, 8);
+        drawText(state, line || " ", state.fonts.regular, fontSize, 8, region);
       }
       state.y += 8;
       break;
     }
+    case "table": {
+      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 || "";
+      const border = node.attrs?.border || "solid";
+      const headerStyle = node.attrs?.headerStyle || "";
+      const padding = 8;
+      const titleFontSize = 10;
+      const titleHeight = title ? titleFontSize * LINE_HEIGHT_FACTOR + 6 : 0;
+      const panelStartY = state.y;
+      const panelStartPage = state.pageIndex;
+      if (title) {
+        state.y += titleHeight;
+      }
+      const isHeaderOnly = border === "none";
+      if (!isHeaderOnly) {
+        state.y += padding;
+      }
+      const innerRegion = {
+        leftX: region.leftX + padding,
+        width: region.width - padding * 2
+      };
+      if (!isHeaderOnly) {
+        for (const child of node.content || []) {
+          processBlock(state, child, innerRegion);
+        }
+        state.y += padding;
+      }
+      const startPage = state.pdfDoc.getPages()[panelStartPage];
+      if (title) {
+        const titleBarY = PAGE_HEIGHT - MARGIN - panelStartY - titleHeight;
+        const isDarkHeader = headerStyle === "dark";
+        startPage.drawRectangle({
+          x: region.leftX,
+          y: titleBarY,
+          width: region.width,
+          height: titleHeight,
+          color: isDarkHeader ? state.theme.panelDarkHeaderBg : rgb(0.93, 0.93, 0.93),
+          borderColor: state.theme.panelBorder,
+          borderWidth: 0.75
+        });
+        startPage.drawText(title, {
+          x: region.leftX + padding,
+          y: titleBarY + 4,
+          size: titleFontSize,
+          font: state.fonts.bold,
+          color: isDarkHeader ? state.theme.panelDarkHeaderText : rgb(0, 0, 0)
+        });
+      }
+      if (border !== "none") {
+        const borderDashArray = border === "dashed" ? [4, 2] : void 0;
+        if (panelStartPage === state.pageIndex) {
+          const borderY = PAGE_HEIGHT - MARGIN - state.y;
+          const panelHeight = state.y - panelStartY;
+          startPage.drawRectangle({
+            x: region.leftX,
+            y: borderY,
+            width: region.width,
+            height: panelHeight,
+            borderColor: state.theme.panelBorder,
+            borderWidth: 0.75,
+            borderDashArray
+          });
+        } else {
+          const startBorderBottom = MARGIN;
+          const startPanelHeight = PAGE_HEIGHT - MARGIN - panelStartY - startBorderBottom;
+          startPage.drawRectangle({
+            x: region.leftX,
+            y: startBorderBottom,
+            width: region.width,
+            height: startPanelHeight,
+            borderColor: state.theme.panelBorder,
+            borderWidth: 0.75,
+            borderDashArray
+          });
+          const contTop = PAGE_HEIGHT - MARGIN;
+          const contBorderY = PAGE_HEIGHT - MARGIN - state.y;
+          const contHeight = contTop - contBorderY;
+          state.currentPage.drawRectangle({
+            x: region.leftX,
+            y: contBorderY,
+            width: region.width,
+            height: contHeight,
+            borderColor: state.theme.panelBorder,
+            borderWidth: 0.75,
+            borderDashArray
+          });
+        }
+      }
+      state.y += 4;
+      break;
+    }
+    case "columns": {
+      const split = parseInt(node.attrs?.split || "50", 10);
+      const padX = parseFloat(node.attrs?.padX || "0") || 0;
+      const columns = (node.content || []).filter((c) => c.type === "column");
+      if (columns.length === 0) break;
+      const colRegionLeftX = region.leftX + padX;
+      const colRegionWidth = region.width - 2 * padX;
+      const gap = 12;
+      const columnsStartY = state.y;
+      const columnsStartPage = state.pageIndex;
+      let colWidths;
+      if (columns.length === 2) {
+        const firstWidth = (colRegionWidth - gap) * (split / 100);
+        const secondWidth = colRegionWidth - gap - firstWidth;
+        colWidths = [firstWidth, secondWidth];
+      } else {
+        const eachWidth = (colRegionWidth - gap * (columns.length - 1)) / columns.length;
+        colWidths = columns.map(() => eachWidth);
+      }
+      let maxEndY = columnsStartY;
+      let colX = colRegionLeftX;
+      for (let ci = 0; ci < columns.length; ci++) {
+        const col = columns[ci];
+        const colWidth = colWidths[ci];
+        const colRegion = { leftX: colX, width: colWidth };
+        state.y = columnsStartY;
+        state.pageIndex = columnsStartPage;
+        state.currentPage = state.pdfDoc.getPages()[state.pageIndex];
+        const padTop = parseFloat(col.attrs?.padTop || "0") || 0;
+        if (padTop > 0) {
+          state.y += padTop * BODY_FONT_SIZE * LINE_HEIGHT_FACTOR;
+        }
+        for (const child of col.content || []) {
+          processBlock(state, child, colRegion);
+        }
+        maxEndY = Math.max(maxEndY, state.y);
+        colX += colWidth + gap;
+      }
+      state.y = maxEndY;
+      state.y += 4;
+      break;
+    }
+    case "column": {
+      for (const child of node.content || []) {
+        processBlock(state, child, region);
+      }
+      break;
+    }
+    case "watermark": {
+      break;
+    }
+    case "subtotalsBlock": {
+      const stFontSize = BODY_FONT_SIZE;
+      const stLineHeight = stFontSize * LINE_HEIGHT_FACTOR;
+      const valueRightX = region.leftX + region.width;
+      const rows = (node.content || []).filter(
+        (c) => c.type === "paragraph" && c.content?.length
+      );
+      const parsed = [];
+      for (const row of rows) {
+        let label = "";
+        let value = "";
+        for (const seg of row.content || []) {
+          if (seg.type === "text") {
+            const isBold = seg.marks?.some((m) => m.type === "bold");
+            if (isBold) {
+              label += seg.text || "";
+            } else {
+              const t = (seg.text || "").trim();
+              if (t) value += (value ? " " : "") + t;
+            }
+          } else if (seg.type === "variableNode") {
+            const varLabel = seg.attrs?.varLabel || seg.attrs?.varName || "";
+            const isBoldVar = seg.marks?.some((m) => m.type === "bold");
+            if (isBoldVar) {
+              label += varLabel;
+            } else {
+              value += (value ? " " : "") + `[${varLabel}]`;
+            }
+          }
+        }
+        parsed.push({ label: label.trim(), value: value.trim() });
+      }
+      let maxLabelWidth = 0;
+      for (const { label } of parsed) {
+        if (label) {
+          const w = state.fonts.bold.widthOfTextAtSize(label, stFontSize);
+          if (w > maxLabelWidth) maxLabelWidth = w;
+        }
+      }
+      const gap = 12;
+      const labelX = region.width > 300 ? Math.max(region.leftX + region.width - maxLabelWidth - gap - 80, region.leftX + region.width * 0.4) : region.leftX + 4;
+      const valueColStartX = labelX + maxLabelWidth + gap;
+      const isLastRowTotal = parsed.length > 1;
+      for (let ri = 0; ri < parsed.length; ri++) {
+        const isTotal = isLastRowTotal && ri === parsed.length - 1;
+        if (isTotal) {
+          state.y += stLineHeight * 0.6;
+        }
+        ensureSpace(state, stLineHeight + (isTotal ? 8 : 4));
+        const { label, value } = parsed[ri];
+        const pdfY = PAGE_HEIGHT - MARGIN - state.y - stFontSize;
+        if (isTotal) {
+          state.currentPage.drawLine({
+            start: { x: valueColStartX, y: pdfY + stFontSize + 6 },
+            end: { x: valueRightX, y: pdfY + stFontSize + 6 },
+            thickness: 0.75,
+            color: rgb(0, 0, 0)
+          });
+          state.currentPage.drawLine({
+            start: { x: valueColStartX, y: pdfY + stFontSize + 3 },
+            end: { x: valueRightX, y: pdfY + stFontSize + 3 },
+            thickness: 0.75,
+            color: rgb(0, 0, 0)
+          });
+        }
+        if (label) {
+          state.currentPage.drawText(label, {
+            x: labelX,
+            y: pdfY,
+            size: stFontSize,
+            font: state.fonts.bold,
+            color: rgb(0, 0, 0)
+          });
+        }
+        if (value) {
+          const valueFont = state.fonts.bold;
+          const valueWidth = valueFont.widthOfTextAtSize(value, stFontSize);
+          state.currentPage.drawText(value, {
+            x: valueRightX - valueWidth,
+            y: pdfY,
+            size: stFontSize,
+            font: valueFont,
+            color: rgb(0, 0, 0)
+          });
+        }
+        state.y += stLineHeight;
+      }
+      state.y += 4;
+      break;
+    }
+    case "repeatBlock":
+      if (node.content) {
+        for (const child of node.content) {
+          processBlock(state, child, region);
+        }
+      }
+      break;
     default:
       if (node.content) {
-        processInlineContent(state, node.content, 12);
+        processInlineContent(state, node.content, 12, 0, region);
       }
       break;
   }
 }
+function renderWatermarksOnPage(page, fonts, watermarkNodes) {
+  for (const wmNode of watermarkNodes) {
+    const text = wmNode.attrs?.text || "";
+    if (!text) continue;
+    const opacity = parseFloat(wmNode.attrs?.opacity || "0.15");
+    const angle = parseFloat(wmNode.attrs?.angle || "-45");
+    const fontSize = 100;
+    const { width, height } = page.getSize();
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const textWidth = fonts.bold.widthOfTextAtSize(text, fontSize);
+    page.drawText(text, {
+      x: centerX - textWidth / 2 * Math.cos(angle * Math.PI / 180),
+      y: centerY - textWidth / 2 * Math.sin(angle * Math.PI / 180),
+      size: fontSize,
+      font: fonts.bold,
+      color: rgb(0.5, 0.5, 0.5),
+      opacity,
+      rotate: degrees(angle)
+    });
+  }
+}
+function collectWatermarkNodes(content) {
+  const nodes = [];
+  for (const block of content.content || []) {
+    if (block.type === "watermark") {
+      nodes.push(block);
+    }
+  }
+  return nodes;
+}
 function ensureFieldSuffix(fieldName, suffix) {
   const cleanName = fieldName.replace(/_signature$/i, "").replace(/_initials$/i, "").replace(/_date$/i, "");
   return `${cleanName}${suffix}`;
@@ -1394,6 +2682,24 @@ async function addFormFields(pdfDoc, fieldPositions, fields) {
               PDFString$1.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(PDFName$1.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(PDFName$1.of("DA"), PDFString$1.of(newDa));
+              }
+            }
+          } catch (fontError) {
+            console.warn(`Failed to set initials font:`, fontError);
+          }
           initialsField.enableReadOnly();
           if (field.required) initialsField.enableRequired();
           break;
@@ -1497,47 +2803,367 @@ async function addFormFields(pdfDoc, fieldPositions, fields) {
     } catch (err) {
       warnings.push(`Failed to create ${field.type} field "${field.name}": ${getErrorMessage(err)}`);
     }
-  }
-  initPdfMetadata({ PDFName: PDFName$1, PDFString: PDFString$1 });
-  const metadata = buildMetadataObject(fields, actualFieldNames);
-  setSigniphiMetadata(pdfDoc, metadata);
-  return warnings;
-}
-async function generatePdfFromContent(content, options = {}) {
-  const { drawFieldPlaceholders = false, embedFormFields = false, fields = [] } = options;
-  const pdfDoc = await PDFDocument.create();
-  const firstPage = pdfDoc.addPage([PAGE_WIDTH, PAGE_HEIGHT]);
-  const fonts = {
-    regular: await pdfDoc.embedFont(StandardFonts.Helvetica),
-    bold: await pdfDoc.embedFont(StandardFonts.HelveticaBold),
-    italic: await pdfDoc.embedFont(StandardFonts.HelveticaOblique),
-    boldItalic: await pdfDoc.embedFont(StandardFonts.HelveticaBoldOblique)
-  };
-  const state = {
-    currentPage: firstPage,
-    pageIndex: 0,
-    y: 0,
-    fonts,
-    pdfDoc,
-    fieldPositions: /* @__PURE__ */ new Map(),
-    drawFieldPlaceholders
-  };
-  if (content.content) {
-    for (const block of content.content) {
-      processBlock(state, block);
+  }
+  initPdfMetadata({ PDFName: PDFName$1, PDFString: PDFString$1 });
+  const metadata = buildMetadataObject(fields, actualFieldNames);
+  setSigniphiMetadata(pdfDoc, metadata);
+  return warnings;
+}
+async function generatePdfFromContent(content, options = {}) {
+  const { drawFieldPlaceholders = false, embedFormFields = false, fields = [], header, footer } = options;
+  const theme = resolveTheme(options.theme);
+  const pdfDoc = await PDFDocument.create();
+  const firstPage = pdfDoc.addPage([PAGE_WIDTH, PAGE_HEIGHT]);
+  const fonts = {
+    regular: await pdfDoc.embedFont(StandardFonts.Helvetica),
+    bold: await pdfDoc.embedFont(StandardFonts.HelveticaBold),
+    italic: await pdfDoc.embedFont(StandardFonts.HelveticaOblique),
+    boldItalic: await pdfDoc.embedFont(StandardFonts.HelveticaBoldOblique)
+  };
+  const watermarkNodes = collectWatermarkNodes(content);
+  const { images, warnings: imageWarnings } = await preloadImages(pdfDoc, content);
+  const state = {
+    currentPage: firstPage,
+    pageIndex: 0,
+    y: 0,
+    fonts,
+    pdfDoc,
+    fieldPositions: /* @__PURE__ */ new Map(),
+    drawFieldPlaceholders,
+    watermarkNodes,
+    theme,
+    images
+  };
+  renderWatermarksOnPage(firstPage, fonts, watermarkNodes);
+  if (content.content) {
+    for (const block of content.content) {
+      processBlock(state, block);
+    }
+  }
+  const allPages = pdfDoc.getPages();
+  const totalPages = allPages.length;
+  const pageNumFontSize = 9;
+  const hfFontSize = 8;
+  const hfColor = 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}`;
+    const labelWidth = fonts.bold.widthOfTextAtSize(label, pageNumFontSize);
+    page.drawText(label, {
+      x: PAGE_WIDTH - MARGIN - labelWidth,
+      y: MARGIN / 2 - pageNumFontSize / 2,
+      size: pageNumFontSize,
+      font: fonts.bold,
+      color: 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) {
+    const warnings = await addFormFields(pdfDoc, state.fieldPositions, fields);
+    if (warnings.length > 0) fieldWarnings = warnings;
+  }
+  const pdfBytes = new Uint8Array(await pdfDoc.save({ useObjectStreams: false }));
+  return {
+    pdfBytes,
+    fieldPositions: state.fieldPositions,
+    fieldWarnings,
+    imageWarnings: imageWarnings.length > 0 ? imageWarnings : void 0
+  };
+}
+
+// src/utils/template-pipeline.ts
+async function generatePdfFromTiptap(content, values, options = {}) {
+  const { content: expanded, values: enrichedValues } = expandRepeatContent(content, values);
+  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,
+    theme: options.theme,
+    header: options.header,
+    footer: options.footer,
+    drawFieldPlaceholders: options.drawFieldPlaceholders
+  });
+  return { pdfBytes: result.pdfBytes, imageWarnings: result.imageWarnings };
+}
+async function generatePdfFromMarkdown(markdown, values, options = {}) {
+  const content = markdownToTiptap(markdown);
+  return generatePdfFromTiptap(content, values, options);
+}
+
+// src/utils/markdown-writer.ts
+function serializeFieldToken(attrs) {
+  const parts = ["field"];
+  if (attrs.fieldType) parts.push(`type:${attrs.fieldType}`);
+  if (attrs.fieldName) parts.push(`name:${attrs.fieldName}`);
+  if (attrs.fieldLabel) parts.push(`label:${attrs.fieldLabel}`);
+  if (attrs.fieldId) parts.push(`id:${attrs.fieldId}`);
+  if (attrs.required) parts.push(`required:true`);
+  if (attrs.options) parts.push(`options:${attrs.options}`);
+  if (attrs.fontSize) parts.push(`fontSize:${attrs.fontSize}`);
+  if (attrs.placeholder) parts.push(`placeholder:${attrs.placeholder}`);
+  if (attrs.defaultValue) parts.push(`defaultValue:${attrs.defaultValue}`);
+  if (attrs.multiline) parts.push(`multiline:true`);
+  if (attrs.maxLength) parts.push(`maxLength:${attrs.maxLength}`);
+  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}`);
+  if (attrs.varLabel) parts.push(`label:${attrs.varLabel}`);
+  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) {
+  if (!content) return "";
+  let result = "";
+  for (const node of content) {
+    if (node.type === "fieldNode") {
+      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 || [];
+      const isBold = varMarks.some((m) => m.type === "bold");
+      const isItalic = varMarks.some((m) => m.type === "italic");
+      const isUnderline = varMarks.some((m) => m.type === "underline");
+      if (isBold && isItalic) token = `***${token}***`;
+      else if (isBold) token = `**${token}**`;
+      else if (isItalic) token = `*${token}*`;
+      if (isUnderline) token = `__${token}__`;
+      result += token;
+      continue;
+    }
+    if (node.type === "text") {
+      let text = node.text || "";
+      const marks = node.marks || [];
+      for (const mark of marks) {
+        if (mark.type === "bold") text = `**${text}**`;
+        else if (mark.type === "italic") text = `*${text}*`;
+        else if (mark.type === "underline") text = `__${text}__`;
+        else if (mark.type === "code") text = `\`${text}\``;
+      }
+      result += text;
+    }
+    if (node.type === "hardBreak") {
+      result += "  \n";
+    }
+  }
+  return result;
+}
+function serializeBlock(node) {
+  switch (node.type) {
+    case "heading": {
+      const level = node.attrs?.level || 1;
+      const prefix = "#".repeat(level);
+      return `${prefix} ${serializeInline(node.content)}`;
+    }
+    case "paragraph": {
+      const inline = serializeInline(node.content);
+      return inline;
+    }
+    case "bulletList": {
+      return (node.content || []).map((item) => {
+        const inner = (item.content || []).map(serializeBlock).join("\n");
+        return `- ${inner}`;
+      }).join("\n");
+    }
+    case "orderedList": {
+      return (node.content || []).map((item, i) => {
+        const inner = (item.content || []).map(serializeBlock).join("\n");
+        return `${i + 1}. ${inner}`;
+      }).join("\n");
+    }
+    case "listItem": {
+      return (node.content || []).map(serializeBlock).join("\n");
+    }
+    case "blockquote": {
+      return (node.content || []).map(serializeBlock).map((line) => `> ${line}`).join("\n");
+    }
+    case "codeBlock": {
+      const text = serializeInline(node.content);
+      return `\`\`\`
+${text}
+\`\`\``;
+    }
+    case "horizontalRule": {
+      return "---";
+    }
+    case "table": {
+      const rows = node.content || [];
+      const isBorderless = node.attrs?.borderless === true;
+      const isSubtotals = node.attrs?.subtotals === true;
+      const serializedRows = [];
+      if (isBorderless && rows.length > 0) {
+        const colCount = rows[0].content?.length || 0;
+        const markerCell = isSubtotals ? "_" : "";
+        const markerRow = "| " + new Array(colCount).fill(markerCell).join(" | ") + " |";
+        const sep = "|" + new Array(colCount).fill("---").join("|") + "|";
+        serializedRows.push(markerRow);
+        serializedRows.push(sep);
+      }
+      for (let ri = 0; ri < rows.length; ri++) {
+        const row = rows[ri];
+        const cells = (row.content || []).map((cell) => {
+          const inner = (cell.content || []).map(serializeBlock).join("");
+          return inner;
+        });
+        serializedRows.push(`| ${cells.join(" | ")} |`);
+        if (!isBorderless && ri === 0 && row.content?.[0]?.type === "tableHeader") {
+          const sep = cells.map(() => "------").join("|");
+          serializedRows.push(`|${sep}|`);
+        }
+      }
+      return serializedRows.join("\n");
+    }
+    case "tableRow": {
+      const cells = (node.content || []).map((cell) => {
+        const inner = (cell.content || []).map(serializeBlock).join("");
+        return inner;
+      });
+      return `| ${cells.join(" | ")} |`;
+    }
+    case "tableHeader":
+    case "tableCell": {
+      return (node.content || []).map(serializeBlock).join("");
+    }
+    case "imageNode": {
+      return serializeImageNode(node.attrs || {});
+    }
+    case "watermark": {
+      const attrs = node.attrs || {};
+      const parts = [];
+      if (attrs.text) parts.push(`text:${attrs.text}`);
+      if (attrs.opacity && attrs.opacity !== "0.15") parts.push(`opacity:${attrs.opacity}`);
+      if (attrs.angle && attrs.angle !== "-45") parts.push(`angle:${attrs.angle}`);
+      return `:::watermark{${parts.join("|")}}`;
+    }
+    case "panel": {
+      const attrs = node.attrs || {};
+      const parts = [];
+      if (attrs.title) parts.push(`title:${attrs.title}`);
+      if (attrs.border && attrs.border !== "solid") parts.push(`border:${attrs.border}`);
+      else if (attrs.border === "solid") parts.push(`border:solid`);
+      if (attrs.headerStyle) parts.push(`headerStyle:${attrs.headerStyle}`);
+      const attrStr = parts.length > 0 ? `{${parts.join("|")}}` : "";
+      const children = (node.content || []).map(serializeBlock).join("\n\n");
+      return `:::panel${attrStr}
+${children}
+:::`;
+    }
+    case "repeatBlock": {
+      const attrs = node.attrs || {};
+      const parts = [];
+      if (attrs.data) parts.push(`data:${attrs.data}`);
+      const attrStr = parts.length > 0 ? `{${parts.join("|")}}` : "";
+      const children = (node.content || []).map(serializeBlock).join("\n\n");
+      return `:::repeat${attrStr}
+${children}
+:::`;
+    }
+    case "subtotalsBlock": {
+      const children = (node.content || []).map(serializeBlock).join("\n");
+      return `:::subtotals
+${children}
+:::`;
+    }
+    case "columns": {
+      const attrs = node.attrs || {};
+      const splitVal = attrs.split || "50";
+      const cols = (node.content || []).filter((c) => c.type === "column");
+      const colBlocks = cols.map((col) => {
+        const children = (col.content || []).map(serializeBlock).join("\n\n");
+        const colAttrs = col.attrs || {};
+        const padTop = parseFloat(colAttrs.padTop || "0") || 0;
+        const colTag = padTop ? `:::col{padTop:${padTop}}` : ":::col";
+        return `${colTag}
+${children}
+:::`;
+      });
+      const padX = parseFloat(attrs.padX || "0") || 0;
+      const colsAttrs = padX ? `split:${splitVal}|padX:${padX}` : `split:${splitVal}`;
+      return `:::columns{${colsAttrs}}
+${colBlocks.join("\n")}
+:::`;
+    }
+    case "column": {
+      const children = (node.content || []).map(serializeBlock).join("\n\n");
+      const colAttrs = node.attrs || {};
+      const padTop = parseFloat(colAttrs.padTop || "0") || 0;
+      const colTag = padTop ? `:::col{padTop:${padTop}}` : ":::col";
+      return `${colTag}
+${children}
+:::`;
     }
+    default:
+      return serializeInline(node.content);
   }
-  let fieldWarnings;
-  if (embedFormFields && fields.length > 0) {
-    const warnings = await addFormFields(pdfDoc, state.fieldPositions, fields);
-    if (warnings.length > 0) fieldWarnings = warnings;
-  }
-  const pdfBytes = await pdfDoc.save({ useObjectStreams: false });
-  return {
-    pdfBytes,
-    fieldPositions: state.fieldPositions,
-    fieldWarnings
-  };
+}
+function tiptapToMarkdown(doc) {
+  if (!doc.content) return "";
+  return doc.content.map(serializeBlock).join("\n\n");
 }
 
 // src/utils/pdf-preview.ts
@@ -1626,8 +3252,27 @@ function useDocumentGenerator(options = {}) {
       Placeholder.configure({
         placeholder: options.placeholder || "Start writing your document..."
       }),
+      Table.extend({
+        addAttributes() {
+          return {
+            ...this.parent?.(),
+            borderless: { default: false },
+            subtotals: { default: false }
+          };
+        }
+      }).configure({ resizable: false }),
+      TableRow,
+      TableCell,
+      TableHeader,
       FieldNode,
-      VariableNode
+      VariableNode,
+      PanelNode,
+      ColumnsNode,
+      ColumnNode,
+      WatermarkNode,
+      ImageNode,
+      RepeatNode,
+      SubtotalsNode
     ],
     content: initialContent || { type: "doc", content: [{ type: "paragraph" }] },
     onUpdate: ({ editor: ed }) => {
@@ -1731,10 +3376,9 @@ function useDocumentGenerator(options = {}) {
     async (values) => {
       if (!editor) throw new Error("Editor is not initialized yet \u2014 wait for the editor to load before generating");
       const content = editor.getJSON();
-      const replacedContent = replaceVariablesInContent(content, values);
-      const result = await generatePdfFromContent(replacedContent);
-      const pages = await pdfToImages(result.pdfBytes);
-      return { pdfBytes: result.pdfBytes, pdfPages: pages };
+      const { pdfBytes: pdfBytes2 } = await generatePdfFromTiptap(content, values);
+      const pdfPages2 = await pdfToImages(pdfBytes2);
+      return { pdfBytes: pdfBytes2, pdfPages: pdfPages2 };
     },
     [editor]
   );
@@ -2888,15 +4532,47 @@ function FieldEditPopover({
     ] }) })
   ] });
 }
-function labelToVarName(label) {
+var sizeClasses = {
+  md: "px-3 py-1.5 text-xs font-medium",
+  sm: "px-2 py-0.5 text-[10px] font-medium"
+};
+function ToggleGroup({
+  value,
+  onChange,
+  options,
+  size = "md",
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center gap-1 bg-muted/50 p-0.5 rounded-lg", className), children: options.map((opt) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "rounded-md transition-colors",
+        sizeClasses[size],
+        value === opt.value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+      ),
+      onClick: () => onChange(opt.value),
+      children: opt.label
+    },
+    opt.value
+  )) });
+}
+function labelToVarName2(label) {
   return label.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
 }
+function varNameToLabel(name) {
+  return name.split("_").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
 function VariableInsertPopover({
   open,
   onOpenChange,
   onInsert,
+  predefinedVariables,
   children
 }) {
+  const hasPredefined = !!predefinedVariables?.length;
+  const [mode, setMode] = useState(hasPredefined ? "existing" : "new");
+  const [search, setSearch] = useState("");
   const [varLabel, setVarLabel] = useState("");
   const [varName, setVarName] = useState("");
   const [varDefault, setVarDefault] = useState("");
@@ -2906,7 +4582,9 @@ function VariableInsertPopover({
     setVarName("");
     setVarDefault("");
     setNameManuallyEdited(false);
-  }, []);
+    setSearch("");
+    setMode(hasPredefined ? "existing" : "new");
+  }, [hasPredefined]);
   const handleOpenChange = useCallback(
     (nextOpen) => {
       if (!nextOpen) reset();
@@ -2916,7 +4594,7 @@ function VariableInsertPopover({
   );
   useEffect(() => {
     if (!nameManuallyEdited) {
-      setVarName(labelToVarName(varLabel));
+      setVarName(labelToVarName2(varLabel));
     }
   }, [varLabel, nameManuallyEdited]);
   const handleInsert = useCallback(() => {
@@ -2924,10 +4602,32 @@ function VariableInsertPopover({
     onInsert({
       varName: varName.trim(),
       varLabel: varLabel.trim(),
-      varDefault: varDefault.trim()
+      varDefault: varDefault.trim(),
+      format: ""
     });
     handleOpenChange(false);
   }, [varLabel, varName, varDefault, onInsert, handleOpenChange]);
+  const handlePickPredefined = useCallback(
+    (pv) => {
+      onInsert({
+        varName: pv.varName,
+        varLabel: pv.varLabel || varNameToLabel(pv.varName),
+        varDefault: "",
+        format: ""
+      });
+      handleOpenChange(false);
+    },
+    [onInsert, handleOpenChange]
+  );
+  const filteredVars = useMemo(() => {
+    if (!predefinedVariables?.length) return [];
+    const q = search.toLowerCase();
+    if (!q) return predefinedVariables;
+    return predefinedVariables.filter((pv) => {
+      const label = (pv.varLabel || varNameToLabel(pv.varName)).toLowerCase();
+      return pv.varName.toLowerCase().includes(q) || label.includes(q);
+    });
+  }, [predefinedVariables, search]);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children }),
     /* @__PURE__ */ jsx(PopoverContent, { className: "w-72 p-0", align: "start", sideOffset: 8, children: /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-3", children: [
@@ -2935,72 +4635,114 @@ function VariableInsertPopover({
         /* @__PURE__ */ jsx(Braces, { size: 14 }),
         /* @__PURE__ */ jsx("span", { children: "Insert Variable" })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "var-label", className: "text-xs", children: "Label" }),
+      hasPredefined && /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          value: mode,
+          onChange: setMode,
+          options: [
+            { value: "existing", label: "Existing" },
+            { value: "new", label: "New" }
+          ],
+          size: "sm"
+        }
+      ),
+      mode === "existing" && hasPredefined ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(Search, { size: 14, className: "absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" }),
           /* @__PURE__ */ jsx(
             Input,
             {
-              id: "var-label",
-              value: varLabel,
-              onChange: (e) => setVarLabel(e.target.value),
-              placeholder: "e.g. Company Name",
-              className: "h-8 text-xs"
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              placeholder: "Search variables...",
+              className: "h-8 text-xs pl-7"
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "var-name", className: "text-xs", children: "Name (identifier)" }),
+        /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto -mx-1", children: filteredVars.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground px-2 py-3 text-center", children: "No variables found" }) : filteredVars.map((pv) => {
+          const label = pv.varLabel || varNameToLabel(pv.varName);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: "w-full text-left px-2 py-1.5 rounded-md text-xs hover:bg-accent transition-colors flex flex-col gap-0.5",
+              onClick: () => handlePickPredefined(pv),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: label }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground font-mono", children: pv.varName })
+              ]
+            },
+            pv.varName
+          );
+        }) })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "var-label", className: "text-xs", children: "Label" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "var-label",
+                value: varLabel,
+                onChange: (e) => setVarLabel(e.target.value),
+                placeholder: "e.g. Company Name",
+                className: "h-8 text-xs"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "var-name", className: "text-xs", children: "Name (identifier)" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "var-name",
+                value: varName,
+                onChange: (e) => {
+                  setVarName(e.target.value);
+                  setNameManuallyEdited(true);
+                },
+                placeholder: "e.g. company_name",
+                className: "h-8 text-xs font-mono"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: "Used as key in data objects" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "var-default", className: "text-xs", children: "Default Value" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "var-default",
+                value: varDefault,
+                onChange: (e) => setVarDefault(e.target.value),
+                placeholder: "Optional",
+                className: "h-8 text-xs"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-1", children: [
           /* @__PURE__ */ jsx(
-            Input,
+            Button,
             {
-              id: "var-name",
-              value: varName,
-              onChange: (e) => {
-                setVarName(e.target.value);
-                setNameManuallyEdited(true);
-              },
-              placeholder: "e.g. company_name",
-              className: "h-8 text-xs font-mono"
+              size: "sm",
+              className: "h-8 flex-1 text-xs",
+              onClick: handleInsert,
+              disabled: !varLabel.trim() || !varName.trim(),
+              children: "Insert"
             }
           ),
-          /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: "Used as key in data objects" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "var-default", className: "text-xs", children: "Default Value" }),
           /* @__PURE__ */ jsx(
-            Input,
+            Button,
             {
-              id: "var-default",
-              value: varDefault,
-              onChange: (e) => setVarDefault(e.target.value),
-              placeholder: "Optional",
-              className: "h-8 text-xs"
+              variant: "outline",
+              size: "sm",
+              className: "h-8 text-xs",
+              onClick: () => handleOpenChange(false),
+              children: "Cancel"
             }
           )
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-1", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "sm",
-            className: "h-8 flex-1 text-xs",
-            onClick: handleInsert,
-            disabled: !varLabel.trim() || !varName.trim(),
-            children: "Insert"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            className: "h-8 text-xs",
-            onClick: () => handleOpenChange(false),
-            children: "Cancel"
-          }
-        )
       ] })
     ] }) })
   ] });
@@ -3222,7 +4964,6 @@ function PreviewPanel({
       (f) => f.position.page === currentPageIndex + 1 && f.position.width > 0
     );
   }, [positionedFields, currentPage, currentPageIndex]);
-  const showScrollbars = zoomLevel > 1;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full border border-border rounded-lg overflow-hidden bg-muted/20", className), children: [
     /* @__PURE__ */ jsx("div", { className: "border-b border-border px-2 py-1.5 flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
@@ -3338,12 +5079,13 @@ function PreviewPanel({
             "div",
             {
               className: cn(
-                "border border-border rounded-lg bg-muted/30 shrink-0",
-                showScrollbars ? "overflow-auto" : "overflow-hidden"
+                "border border-border rounded-lg bg-muted/30 shrink-0 overflow-auto scrollbar-hidden"
               ),
               style: {
                 width: pageDisplaySize.viewportWidth,
-                height: pageDisplaySize.viewportHeight
+                height: pageDisplaySize.viewportHeight,
+                maxWidth: "100%",
+                maxHeight: "100%"
               },
               children: /* @__PURE__ */ jsxs(
                 "div",
@@ -3414,8 +5156,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("|");
@@ -3429,12 +5171,48 @@ 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`);
+            }
           }
         }
       }
       searchFrom = closeIdx + 2;
     }
   }
+  const DIRECTIVE_OPEN_RE = /^:::(panel|columns|col|watermark)(?:\{[^}]*\})?$/;
+  const DIRECTIVE_CLOSE_RE = /^:::$/;
+  const directiveStack = [];
+  for (let i = 0; i < lines.length; i++) {
+    const trimmed = lines[i].trim();
+    const lineNum = i + 1;
+    const openMatch = trimmed.match(DIRECTIVE_OPEN_RE);
+    if (openMatch) {
+      const dtype = openMatch[1];
+      if (dtype !== "watermark") {
+        if (dtype === "col") {
+          const parent = directiveStack[directiveStack.length - 1];
+          if (!parent || parent.type !== "columns") {
+            warnings.push(`:::col at line ${lineNum} appears outside :::columns`);
+          }
+        }
+        directiveStack.push({ type: dtype, line: lineNum });
+      }
+      continue;
+    }
+    if (DIRECTIVE_CLOSE_RE.test(trimmed)) {
+      if (directiveStack.length === 0) {
+        warnings.push(`Stray ::: close at line ${lineNum} with no matching open directive`);
+      } else {
+        directiveStack.pop();
+      }
+    }
+  }
+  for (const open of directiveStack) {
+    errors.push(`Unclosed :::${open.type} directive opened at line ${open.line}`);
+  }
   let fields = [];
   let variables = [];
   try {
@@ -3468,31 +5246,6 @@ function validateMarkdown(markdown) {
     fields
   };
 }
-var sizeClasses = {
-  md: "px-3 py-1.5 text-xs font-medium",
-  sm: "px-2 py-0.5 text-[10px] font-medium"
-};
-function ToggleGroup({
-  value,
-  onChange,
-  options,
-  size = "md",
-  className
-}) {
-  return /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center gap-1 bg-muted/50 p-0.5 rounded-lg", className), children: options.map((opt) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: cn(
-        "rounded-md transition-colors",
-        sizeClasses[size],
-        value === opt.value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
-      ),
-      onClick: () => onChange(opt.value),
-      children: opt.label
-    },
-    opt.value
-  )) });
-}
 function parseCsv(text) {
   const lines = text.split(/\r?\n/).filter((l) => l.trim() !== "");
   if (lines.length < 2) return [];
@@ -3542,7 +5295,10 @@ function GeneratePanel({
   editorContent,
   editorVariables,
   onGeneratePdf,
-  initialBulkData
+  initialBulkData,
+  initialVariableValues,
+  exportFileName,
+  templateMode
 }) {
   const [templateSource, setTemplateSource] = useState("editor");
   const [importedMarkdown, setImportedMarkdown] = useState(null);
@@ -3550,6 +5306,7 @@ function GeneratePanel({
   const [validationResult, setValidationResult] = useState(null);
   const [mode, setMode] = useState("single");
   const [variableValues, setVariableValues] = useState({});
+  const [variableSearch, setVariableSearch] = useState("");
   const [bulkInputFormat, setBulkInputFormat] = useState("json");
   const [bulkInput, setBulkInput] = useState("");
   const [bulkData, setBulkData] = useState(null);
@@ -3576,11 +5333,22 @@ function GeneratePanel({
     const col = pos - textBefore.lastIndexOf("\n");
     setJsonCursor({ line, col });
   }, []);
+  const lockedVarNames = React12__default.useMemo(
+    () => templateMode && initialVariableValues ? new Set(Object.keys(initialVariableValues)) : /* @__PURE__ */ new Set(),
+    [templateMode, initialVariableValues]
+  );
   const activeVariables = templateSource === "imported" && validationResult?.valid ? validationResult.variables : editorVariables;
   const hasVariables = activeVariables.length > 0;
   const hasEditorContent = editorMarkdown.trim().length > 0;
   const hasImportedContent = templateSource === "imported" && importedMarkdown != null;
   const hasContent = hasImportedContent || hasEditorContent;
+  const filteredVariables = React12__default.useMemo(() => {
+    if (!variableSearch.trim()) return activeVariables;
+    const q = variableSearch.toLowerCase();
+    return activeVariables.filter(
+      (v) => v.varName.toLowerCase().includes(q) || (v.varLabel || "").toLowerCase().includes(q)
+    );
+  }, [activeVariables, variableSearch]);
   const getActiveContent = useCallback(() => {
     if (templateSource === "imported" && importedMarkdown) {
       return markdownToTiptap(importedMarkdown);
@@ -3748,7 +5516,10 @@ function GeneratePanel({
     setPreviewError(null);
     try {
       const content = getActiveContent();
-      const replaced = replaceVariablesInContent(content, variableValues);
+      const { content: expanded, values: enrichedValues } = expandRepeatContent(content, variableValues);
+      const blockExpanded = expandBlockVariables(expanded, enrichedValues);
+      const suppressed = suppressZeroContent(blockExpanded, enrichedValues);
+      const replaced = replaceVariablesInContent(suppressed, enrichedValues);
       const fields = extractFieldsFromContent(replaced);
       const result = await generatePdfFromContent(replaced);
       const pages = await pdfToImages(result.pdfBytes);
@@ -3769,7 +5540,10 @@ function GeneratePanel({
     setExportSuccess(null);
     try {
       const content = getActiveContent();
-      const replaced = replaceVariablesInContent(content, variableValues);
+      const { content: expanded, values: enrichedValues } = expandRepeatContent(content, variableValues);
+      const blockExpanded = expandBlockVariables(expanded, enrichedValues);
+      const suppressed = suppressZeroContent(blockExpanded, enrichedValues);
+      const replaced = replaceVariablesInContent(suppressed, enrichedValues);
       const fields = extractFieldsFromContent(replaced);
       const result = await generatePdfFromContent(replaced, {
         drawFieldPlaceholders: false,
@@ -3777,7 +5551,7 @@ function GeneratePanel({
         fields
       });
       const blob = new Blob([result.pdfBytes], { type: "application/pdf" });
-      const fileName = importedFileName ? importedFileName.replace(".md", ".pdf") : "document.pdf";
+      const fileName = exportFileName ? exportFileName.endsWith(".pdf") ? exportFileName : `${exportFileName}.pdf` : importedFileName ? importedFileName.replace(".md", ".pdf") : "document.pdf";
       if (onGeneratePdf) {
         onGeneratePdf(blob, fileName);
       } else {
@@ -3849,7 +5623,10 @@ function GeneratePanel({
       const allWarnings = [];
       for (let i = 0; i < bulkData.length; i++) {
         const values = bulkData[i];
-        const replaced = replaceVariablesInContent(content, values);
+        const { content: expanded, values: enrichedValues } = expandRepeatContent(content, values);
+        const blockExpanded = expandBlockVariables(expanded, enrichedValues);
+        const suppressed = suppressZeroContent(blockExpanded, enrichedValues);
+        const replaced = replaceVariablesInContent(suppressed, enrichedValues);
         const fields = extractFieldsFromContent(replaced);
         const result = await generatePdfFromContent(replaced, {
           drawFieldPlaceholders: false,
@@ -3904,13 +5681,15 @@ ${allWarnings.join("\n")}`);
   }, [mode, bulkInputFormat, bulkInput, initialBulkJson]);
   React12__default.useEffect(() => {
     if (templateSource === "editor") {
-      const defaults = {};
+      const defaults = initialVariableValues ? { ...initialVariableValues } : {};
       for (const v of editorVariables) {
-        defaults[v.varName] = variableValues[v.varName] || v.varDefault || "";
+        if (!defaults[v.varName]) {
+          defaults[v.varName] = variableValues[v.varName] || v.varDefault || "";
+        }
       }
       setVariableValues(defaults);
     }
-  }, [editorVariables, templateSource]);
+  }, [editorVariables, templateSource, initialVariableValues]);
   useEffect(() => {
     setPreviewFresh(false);
   }, [variableValues, templateSource, importedMarkdown, editorMarkdown, editorContent]);
@@ -3922,8 +5701,8 @@ ${allWarnings.join("\n")}`);
   }, [exportSuccess]);
   return /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 grid grid-cols-[1fr_1px_1fr]", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-0 min-w-0", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 scrollbar-hidden", children: [
+        !templateMode && /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
             /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Template" }),
             templateSource === "imported" && /* @__PURE__ */ jsxs(
@@ -4016,10 +5795,10 @@ ${allWarnings.join("\n")}`);
         !hasContent && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 text-muted-foreground", children: [
           /* @__PURE__ */ jsx(Braces, { size: 32, className: "mb-2 opacity-50" }),
           /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "No template content" }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs mt-1", children: "Import a .md template above or add content in the Editor tab." })
+          /* @__PURE__ */ jsx("p", { className: "text-xs mt-1", children: templateMode ? "No template content was provided." : "Import a .md template above or add content in the Editor tab." })
         ] }),
         hasVariables && hasContent && /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-lg overflow-hidden", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 px-3 py-2 bg-muted/30 border-b border-border", children: /* @__PURE__ */ jsx(
+          !templateMode && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 px-3 py-2 bg-muted/30 border-b border-border", children: /* @__PURE__ */ jsx(
             ToggleGroup,
             {
               value: mode,
@@ -4031,20 +5810,53 @@ ${allWarnings.join("\n")}`);
             }
           ) }),
           mode === "single" && /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-3", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Variables" }),
-            activeVariables.map((v) => /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(Label, { htmlFor: `gen-${v.varName}`, className: "text-xs", children: v.varLabel || v.varName }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Variables" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: activeVariables.length })
+            ] }),
+            activeVariables.length > 5 && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(Search, { size: 14, className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" }),
               /* @__PURE__ */ jsx(
                 Input,
                 {
-                  id: `gen-${v.varName}`,
-                  value: variableValues[v.varName] || "",
-                  onChange: (e) => updateVariableValue(v.varName, e.target.value),
-                  placeholder: v.varDefault || `Enter ${v.varLabel || v.varName}`,
-                  className: "h-8 text-xs"
+                  value: variableSearch,
+                  onChange: (e) => setVariableSearch(e.target.value),
+                  placeholder: "Search variables...",
+                  className: "h-8 text-xs pl-8"
+                }
+              ),
+              variableSearch && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setVariableSearch(""),
+                  className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                  children: /* @__PURE__ */ jsx(X, { size: 12 })
                 }
               )
-            ] }, v.varName))
+            ] }),
+            filteredVariables.length === 0 && variableSearch.trim() && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground py-2 text-center", children: [
+              "No variables match \u201C",
+              variableSearch,
+              "\u201D"
+            ] }),
+            filteredVariables.map((v) => {
+              const isLocked = lockedVarNames.has(v.varName);
+              return /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: `gen-${v.varName}`, className: "text-xs", children: v.varLabel || v.varName }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: `gen-${v.varName}`,
+                    value: variableValues[v.varName] || "",
+                    onChange: (e) => updateVariableValue(v.varName, e.target.value),
+                    placeholder: v.varDefault || `Enter ${v.varLabel || v.varName}`,
+                    disabled: isLocked,
+                    className: cn("h-8 text-xs", isLocked && "opacity-60 cursor-not-allowed")
+                  }
+                )
+              ] }, v.varName);
+            })
           ] }),
           mode === "bulk" && /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-3", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -4233,56 +6045,60 @@ ${allWarnings.join("\n")}`);
         ] }),
         !hasVariables && hasContent && /* @__PURE__ */ jsx("div", { className: "p-3 rounded-md bg-muted/30 border border-border", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: 'This template has no variables. You can still preview and export the PDF as-is, or add variables in the Editor tab using the "Insert Variable" button.' }) })
       ] }),
-      previewError && /* @__PURE__ */ jsx("div", { className: "px-4 pb-0", children: /* @__PURE__ */ jsx("div", { className: "p-2 rounded-md bg-destructive/10 border border-destructive/20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
-        /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "text-destructive shrink-0 mt-0.5" }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: previewError })
-      ] }) }) }),
-      exportError && /* @__PURE__ */ jsx("div", { className: "px-4 pb-0", children: /* @__PURE__ */ jsx("div", { className: "p-2 rounded-md bg-destructive/10 border border-destructive/20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
-        /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "text-destructive shrink-0 mt-0.5" }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: exportError })
-      ] }) }) }),
-      exportSuccess && /* @__PURE__ */ jsx("div", { className: "px-4 pb-0", children: /* @__PURE__ */ jsx("div", { className: "p-2 rounded-md bg-emerald-500/10 border border-emerald-500/20", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx(CheckCircle2, { size: 14, className: "text-emerald-600 shrink-0" }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-emerald-700", children: exportSuccess })
-      ] }) }) }),
-      hasContent && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 py-3 flex items-center gap-2 bg-gradient-to-b from-background to-muted/20", children: mode === "single" || !hasVariables ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(
-          Button,
-          {
-            variant: "secondary",
-            onClick: handlePreview,
-            disabled: isGenerating,
-            className: "h-10 px-4 font-semibold shadow-sm hover:shadow-md transition-all duration-200 text-sm",
-            children: [
-              isGenerating ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(RefreshCw, { size: 16 }),
-              isGenerating ? "Generating..." : "Generate PDF"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
+      hasContent && /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-4 py-3 flex items-center gap-2 bg-gradient-to-b from-background to-muted/20", children: [
+        mode === "single" || !hasVariables ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "secondary",
+              onClick: handlePreview,
+              disabled: isGenerating,
+              className: "h-10 px-4 font-semibold shadow-sm hover:shadow-md transition-all duration-200 text-sm",
+              children: [
+                isGenerating ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(RefreshCw, { size: 16 }),
+                isGenerating ? "Generating..." : "Generate PDF"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              onClick: handleExportSingle,
+              disabled: !previewFresh || isExporting,
+              className: "h-10 px-4 font-semibold bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm hover:shadow-md transition-all duration-200 text-sm",
+              children: [
+                isExporting ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(Download, { size: 16 }),
+                isExporting ? "Exporting..." : "Export PDF"
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(
           Button,
           {
-            onClick: handleExportSingle,
-            disabled: !previewFresh || isExporting,
-            className: "h-10 px-4 font-semibold bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm hover:shadow-md transition-all duration-200 text-sm",
+            onClick: handleBulkGenerate,
+            disabled: isExporting || !bulkData || bulkData.length === 0,
+            className: "h-10 px-4 font-semibold bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg hover:shadow-xl transition-all duration-200 text-sm",
             children: [
               isExporting ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(Download, { size: 16 }),
-              isExporting ? "Exporting..." : "Export PDF"
+              isExporting ? "Generating..." : `Generate All (${bulkData?.length || 0} PDFs)`
             ]
           }
-        )
-      ] }) : /* @__PURE__ */ jsxs(
-        Button,
-        {
-          onClick: handleBulkGenerate,
-          disabled: isExporting || !bulkData || bulkData.length === 0,
-          className: "h-10 px-4 font-semibold bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg hover:shadow-xl transition-all duration-200 text-sm",
-          children: [
-            isExporting ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(Download, { size: 16 }),
-            isExporting ? "Generating..." : `Generate All (${bulkData?.length || 0} PDFs)`
-          ]
-        }
-      ) })
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 ml-auto", children: [
+          previewError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-destructive max-w-[300px]", children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: previewError })
+          ] }),
+          exportError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-destructive max-w-[300px]", children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: exportError })
+          ] }),
+          exportSuccess && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-emerald-600 max-w-[300px]", children: [
+            /* @__PURE__ */ jsx(CheckCircle2, { size: 14, className: "shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: exportSuccess })
+          ] })
+        ] })
+      ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "bg-border" }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-col min-h-0 min-w-0", children: /* @__PURE__ */ jsx(
@@ -4460,7 +6276,13 @@ function DocumentGeneratorInner({
   showToolbar = true,
   showGenerateTab = true,
   onGeneratePdf,
-  initialBulkData
+  initialBulkData,
+  defaultTab = "editor",
+  initialVariableValues,
+  predefinedVariables,
+  exportFileName,
+  templateMode,
+  onSaveTemplate
 }) {
   const {
     editor,
@@ -4487,7 +6309,7 @@ function DocumentGeneratorInner({
     placeholder,
     onChange
   });
-  const [activeTab, setActiveTab] = useState("editor");
+  const [activeTab, setActiveTab] = useState(defaultTab);
   const [insertPopoverOpen, setInsertPopoverOpen] = useState(false);
   const [insertVarPopoverOpen, setInsertVarPopoverOpen] = useState(false);
   const [editFieldId, setEditFieldId] = useState(null);
@@ -4499,6 +6321,7 @@ function DocumentGeneratorInner({
   const editorWrapperRef = useRef(null);
   const [editorCollapsed, setEditorCollapsed] = useState(false);
   const [mdExportError, setMdExportError] = useState(null);
+  const [isSaving, setIsSaving] = useState(false);
   const [exportSuccess, setExportSuccess] = useState(null);
   useEffect(() => {
     const handler = (e) => {
@@ -4569,7 +6392,28 @@ function DocumentGeneratorInner({
       onExport(result);
       setExportSuccess("Document exported successfully");
     }
-  }, [exportDocument, onExport]);
+  }, [exportDocument, onExport]);
+  const handleSaveTemplate = useCallback(async () => {
+    const md = exportMarkdown();
+    if (!md.trim()) {
+      setMdExportError("Editor content is empty");
+      return;
+    }
+    const validation = validateMarkdown(md);
+    if (!validation.valid) {
+      setMdExportError(validation.errors.join("; "));
+      return;
+    }
+    setMdExportError(null);
+    setIsSaving(true);
+    try {
+      await onSaveTemplate?.(md);
+      setExportSuccess("Template saved");
+    } catch {
+    } finally {
+      setIsSaving(false);
+    }
+  }, [exportMarkdown, onSaveTemplate]);
   const handleExportMarkdown = useCallback(() => {
     const md = exportMarkdown();
     if (!md.trim()) {
@@ -4586,10 +6430,10 @@ function DocumentGeneratorInner({
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = "template.md";
+    a.download = exportFileName ? `${exportFileName}.md` : "template.md";
     a.click();
     URL.revokeObjectURL(url);
-  }, [exportMarkdown]);
+  }, [exportMarkdown, exportFileName]);
   useEffect(() => {
     if (mdExportError) setMdExportError(null);
   }, [markdown]);
@@ -4625,6 +6469,7 @@ function DocumentGeneratorInner({
       open: insertVarPopoverOpen,
       onOpenChange: setInsertVarPopoverOpen,
       onInsert: handleInsertVariable,
+      predefinedVariables,
       children: /* @__PURE__ */ jsxs(
         Button,
         {
@@ -4665,118 +6510,141 @@ function DocumentGeneratorInner({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: cn(
+    /* @__PURE__ */ jsx("div", { className: cn(
       "flex flex-col flex-1 min-h-0",
       activeTab !== "editor" && "hidden"
+    ), children: /* @__PURE__ */ jsxs("div", { className: cn(
+      "flex-1 min-h-0",
+      showPreview && !editorCollapsed ? "grid grid-cols-[1fr_1px_1fr]" : "flex flex-col"
     ), children: [
-      /* @__PURE__ */ jsxs("div", { className: cn(
-        "flex-1 min-h-0",
-        showPreview && !editorCollapsed ? "grid grid-cols-[1fr_1px_1fr]" : "flex flex-col"
-      ), children: [
-        !editorCollapsed && /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-0 min-w-0", children: [
-          showToolbar && !readOnly && /* @__PURE__ */ jsx("div", { className: "border-b border-border", children: /* @__PURE__ */ jsx(
-            EditorToolbar,
-            {
-              editor,
-              insertFieldButton,
-              insertVariableButton,
-              onCollapse: showPreview ? () => setEditorCollapsed(true) : void 0
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { ref: editorWrapperRef, className: "flex-1 overflow-y-auto min-h-0", children: /* @__PURE__ */ jsx(
-            EditorContent,
-            {
-              editor,
-              className: "prose prose-sm max-w-none p-4 focus-within:outline-none"
-            }
-          ) })
-        ] }),
-        showPreview && !editorCollapsed && /* @__PURE__ */ jsx("div", { className: "bg-border" }),
-        showPreview && /* @__PURE__ */ jsx(
-          PreviewPanel,
+      !editorCollapsed && /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-0 min-w-0", children: [
+        showToolbar && !readOnly && /* @__PURE__ */ jsx("div", { className: "border-b border-border", children: /* @__PURE__ */ jsx(
+          EditorToolbar,
           {
-            pages: pdfPages,
-            isGenerating,
-            positionedFields,
-            headerLeft: editorCollapsed ? /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                className: "h-8 w-8 p-0",
-                onClick: () => setEditorCollapsed(false),
-                children: /* @__PURE__ */ jsx(PanelLeftOpen, { size: 14 })
-              }
-            ) : void 0,
-            className: "flex-1 border-0 rounded-none"
+            editor,
+            insertFieldButton,
+            insertVariableButton,
+            onCollapse: showPreview ? () => setEditorCollapsed(true) : void 0
           }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-border bg-gradient-to-b from-background to-muted/20", children: [
-        /* @__PURE__ */ jsxs(
-          Button,
+        ) }),
+        /* @__PURE__ */ jsx("div", { ref: editorWrapperRef, className: "flex-1 overflow-y-auto min-h-0 scrollbar-hidden", children: /* @__PURE__ */ jsx(
+          EditorContent,
           {
-            variant: "secondary",
-            onClick: generatePdf,
-            disabled: isGenerating || !editor,
-            className: "h-10 px-4 font-semibold shadow-sm hover:shadow-md transition-all duration-200 text-sm",
-            children: [
-              isGenerating ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(RefreshCw, { size: 16 }),
-              isGenerating ? "Generating..." : "Generate PDF"
-            ]
+            editor,
+            className: "prose prose-sm max-w-none p-4 focus-within:outline-none"
           }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-          mdExportError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-destructive max-w-[300px]", children: [
-            /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "shrink-0" }),
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: mdExportError })
-          ] }),
-          generationError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-destructive max-w-[300px]", children: [
-            /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "shrink-0" }),
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: generationError })
-          ] }),
-          fieldWarnings.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-orange-600 max-w-[400px]", children: [
-            /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "shrink-0" }),
-            /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
-              fieldWarnings.length,
-              " field",
-              fieldWarnings.length !== 1 ? "s" : "",
-              " had warnings during generation"
-            ] })
-          ] }),
-          exportSuccess && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-emerald-600 max-w-[300px]", children: [
-            /* @__PURE__ */ jsx(CheckCircle2, { size: 14, className: "shrink-0" }),
-            /* @__PURE__ */ jsx("span", { children: exportSuccess })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-3 border-t border-border bg-gradient-to-b from-background to-muted/20", children: [
           /* @__PURE__ */ jsxs(
             Button,
             {
-              onClick: handleExportMarkdown,
-              disabled: !editor || !markdown.trim(),
-              className: "h-10 px-4 font-semibold bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm hover:shadow-md transition-all duration-200 text-sm",
+              variant: "secondary",
+              onClick: generatePdf,
+              disabled: isGenerating || !editor,
+              className: "h-10 px-4 font-semibold shadow-sm hover:shadow-md transition-all duration-200 text-sm",
               children: [
-                /* @__PURE__ */ jsx(FileText, { size: 16 }),
-                "Export MD"
+                isGenerating ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(RefreshCw, { size: 16 }),
+                isGenerating ? "Generating..." : "Generate PDF"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs(
+          onSaveTemplate ? /* @__PURE__ */ jsxs(
             Button,
             {
-              onClick: handleExport,
-              disabled: isGenerating || !editor || pdfPages.length === 0,
+              onClick: handleSaveTemplate,
+              disabled: isSaving || !editor || !markdown.trim(),
               className: "h-10 px-4 font-semibold bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm hover:shadow-md transition-all duration-200 text-sm",
               children: [
-                /* @__PURE__ */ jsx(FileDown, { size: 16 }),
-                exportButtonText
+                isSaving ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx(Save, { size: 16 }),
+                isSaving ? "Saving..." : exportButtonText || "Save Template"
               ]
             }
-          )
+          ) : /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                disabled: !editor || !markdown.trim() && pdfPages.length === 0,
+                className: "h-10 px-4 font-semibold bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm hover:shadow-md transition-all duration-200 text-sm",
+                children: [
+                  /* @__PURE__ */ jsx(FileDown, { size: 16 }),
+                  "Export",
+                  /* @__PURE__ */ jsx(ChevronDown, { size: 14 })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-48 p-1", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: handleExportMarkdown,
+                  disabled: !editor || !markdown.trim(),
+                  className: "flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx(FileText, { size: 16 }),
+                    "Export as MD"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: handleExport,
+                  disabled: isGenerating || !editor || pdfPages.length === 0,
+                  className: "flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx(FileDown, { size: 16 }),
+                    "Export as PDF"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 ml-auto", children: [
+            mdExportError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-destructive max-w-[300px]", children: [
+              /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: mdExportError })
+            ] }),
+            generationError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-destructive max-w-[300px]", children: [
+              /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: generationError })
+            ] }),
+            fieldWarnings.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-orange-600 max-w-[400px]", children: [
+              /* @__PURE__ */ jsx(AlertTriangle, { size: 14, className: "shrink-0" }),
+              /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+                fieldWarnings.length,
+                " field",
+                fieldWarnings.length !== 1 ? "s" : "",
+                " had warnings during generation"
+              ] })
+            ] }),
+            exportSuccess && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-emerald-600 max-w-[300px]", children: [
+              /* @__PURE__ */ jsx(CheckCircle2, { size: 14, className: "shrink-0" }),
+              /* @__PURE__ */ jsx("span", { children: exportSuccess })
+            ] })
+          ] })
         ] })
-      ] })
-    ] }),
+      ] }),
+      showPreview && !editorCollapsed && /* @__PURE__ */ jsx("div", { className: "bg-border" }),
+      showPreview && /* @__PURE__ */ jsx(
+        PreviewPanel,
+        {
+          pages: pdfPages,
+          isGenerating,
+          positionedFields,
+          headerLeft: editorCollapsed ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-8 w-8 p-0",
+              onClick: () => setEditorCollapsed(false),
+              children: /* @__PURE__ */ jsx(PanelLeftOpen, { size: 14 })
+            }
+          ) : void 0,
+          className: "flex-1 border-0 rounded-none"
+        }
+      )
+    ] }) }),
     showGenerateTab && activeTab === "generate" && /* @__PURE__ */ jsx(
       GeneratePanel,
       {
@@ -4784,7 +6652,10 @@ function DocumentGeneratorInner({
         editorContent: editor?.getJSON(),
         editorVariables: variables,
         onGeneratePdf,
-        initialBulkData
+        initialBulkData,
+        initialVariableValues,
+        exportFileName,
+        templateMode
       }
     ),
     /* @__PURE__ */ jsx(
@@ -4925,6 +6796,717 @@ function EditorPanel({
   ] });
 }
 
-export { DocumentGenerator, EditorPanel, FormFieldType, PreviewPanel, ThemeProvider, useDocumentGenerator, useTheme };
+// src/utils/xml-template-parser.ts
+function extractFieldRefs(expr) {
+  const refs = [];
+  const re = /\[([^\]]+)\](?:\.\[([^\]]+)\])?/g;
+  let m;
+  while ((m = re.exec(expr)) !== null) {
+    if (m[2]) {
+      refs.push(`${m[1]}.${m[2]}`);
+    } else {
+      refs.push(m[1]);
+    }
+  }
+  return refs;
+}
+function fieldRefToVarName(ref, bandContext) {
+  if (ref.includes(".")) {
+    return labelToVarName(ref.replace(/\./g, "_"));
+  }
+  if (bandContext) {
+    return labelToVarName(bandContext + "_" + ref);
+  }
+  return labelToVarName(ref);
+}
+function fieldRefToLabel(ref) {
+  const parts = ref.split(".");
+  const raw = parts[parts.length - 1];
+  return raw.replace(/_/g, " ");
+}
+function resolveExpression(expr, registry, siblingLabel, bandContext) {
+  const trimmed = expr.trim();
+  const suppressZero = /<>\s*0/.test(trimmed);
+  const szOpts = suppressZero ? { suppressZero: true } : void 0;
+  const aggMatch = trimmed.match(
+    /^\[([^\]]+)\]\.sum\(\[([^\]]+)\]\)$/i
+  );
+  if (aggMatch) {
+    const fieldName = aggMatch[2];
+    const varName = labelToVarName("workorder_" + fieldName);
+    const label = fieldName.replace(/_/g, " ");
+    return registry.register(varName, label, szOpts);
+  }
+  const concatSingle = trimmed.match(
+    /^concat\(\s*'[^']*'\s*,\s*\[([^\]]+)\](?:\.\[([^\]]+)\])?\s*\)$/i
+  );
+  if (concatSingle) {
+    const ref = concatSingle[2] ? `${concatSingle[1]}.${concatSingle[2]}` : concatSingle[1];
+    const varName = fieldRefToVarName(ref, bandContext);
+    const label = fieldRefToLabel(ref);
+    return registry.register(varName, label, szOpts);
+  }
+  const concatMulti = trimmed.match(
+    /^concat\(/i
+  );
+  if (concatMulti) {
+    const refs = extractFieldRefs(trimmed);
+    if (refs.length > 0) {
+      const uniqueRefs = [...new Set(refs)];
+      const tokens = uniqueRefs.map((ref) => {
+        const varName = fieldRefToVarName(ref, bandContext);
+        const label = fieldRefToLabel(ref);
+        return registry.register(varName, label, szOpts);
+      });
+      return tokens.join(" ");
+    }
+  }
+  const toLongMatch = trimmed.match(
+    /^ToLong\(\s*\[([^\]]+)\](?:\.\[([^\]]+)\])?\s*\)$/i
+  );
+  if (toLongMatch) {
+    const ref = toLongMatch[2] ? `${toLongMatch[1]}.${toLongMatch[2]}` : toLongMatch[1];
+    const varName = fieldRefToVarName(ref, bandContext);
+    const label = fieldRefToLabel(ref);
+    return registry.register(varName, label, szOpts);
+  }
+  const fmtMatch = trimmed.match(
+    /^FormatString\(\s*'[^']*'\s*,\s*(.+)\s*\)$/i
+  );
+  if (fmtMatch) {
+    return resolveExpression(fmtMatch[1], registry, siblingLabel, bandContext);
+  }
+  const replaceMatch = trimmed.match(
+    /^Replace\(\s*\[([^\]]+)\]/i
+  );
+  if (replaceMatch) {
+    const ref = replaceMatch[1];
+    const varName = fieldRefToVarName(ref, bandContext);
+    const label = fieldRefToLabel(ref);
+    return registry.register(varName, label, szOpts);
+  }
+  const iifLabelMatch = trimmed.match(
+    /^iif\s*\(.+?,\s*'([^']+)'\s*,\s*\?\s*\)$/i
+  );
+  if (iifLabelMatch) {
+    return iifLabelMatch[1];
+  }
+  const iifLabelElse = trimmed.match(
+    /^iif\s*\(.+?,\s*'([^']+)'\s*,\s*'([^']+)'\s*\)$/i
+  );
+  if (iifLabelElse) {
+    return iifLabelElse[1];
+  }
+  const iifEmptyElse = trimmed.match(
+    /^[Ii]if\s*\(.+?,\s*'([^']+)'\s*,\s*''\s*\)$/i
+  );
+  if (iifEmptyElse) {
+    return iifEmptyElse[1];
+  }
+  const nestedIifStaticLabel = trimmed.match(
+    /^iif\s*\(.*,\s*[Ii]if\s*\([^,]+,\s*'([^']+)'\s*,/i
+  );
+  if (nestedIifStaticLabel) {
+    return nestedIifStaticLabel[1];
+  }
+  const iifValueMatch = trimmed.match(
+    /^iif\s*\(/i
+  );
+  if (iifValueMatch) {
+    const refs = extractFieldRefs(trimmed);
+    if (refs.length > 0) {
+      const uniqueRefs = [...new Set(refs)];
+      const innerAggMatch = trimmed.match(
+        /\[([^\]]+)\]\.sum\(\[([^\]]+)\]\)/i
+      );
+      if (innerAggMatch) {
+        const fieldName = innerAggMatch[2];
+        const varName2 = labelToVarName("workorder_" + fieldName);
+        const label2 = fieldName.replace(/_/g, " ");
+        return registry.register(varName2, label2, szOpts);
+      }
+      const ref = uniqueRefs[uniqueRefs.length - 1];
+      const varName = fieldRefToVarName(ref, bandContext);
+      const label = fieldRefToLabel(ref);
+      return registry.register(varName, label, szOpts);
+    }
+    const staticMatch = trimmed.match(/'([^']+)'/);
+    if (staticMatch) return staticMatch[1];
+    return "";
+  }
+  const arithmeticRefs = extractFieldRefs(trimmed);
+  if (arithmeticRefs.length > 1 && /[+\-*/]/.test(trimmed)) {
+    if (siblingLabel) {
+      const cleanLabel = siblingLabel.replace(/[:\s]+$/, "");
+      const varName = labelToVarName(
+        (bandContext ? bandContext + "_" : "") + cleanLabel.replace(/\s+/g, "_")
+      );
+      return registry.register(varName, cleanLabel, szOpts);
+    }
+    const uniqueRefs = [...new Set(arithmeticRefs)];
+    const tokens = uniqueRefs.map((ref) => {
+      const varName = fieldRefToVarName(ref, bandContext);
+      const label = fieldRefToLabel(ref);
+      return registry.register(varName, label, szOpts);
+    });
+    return tokens.join(" ");
+  }
+  const simpleMatch = trimmed.match(
+    /^\[([^\]]+)\](?:\.\[([^\]]+)\])?$/
+  );
+  if (simpleMatch) {
+    const ref = simpleMatch[2] ? `${simpleMatch[1]}.${simpleMatch[2]}` : simpleMatch[1];
+    const varName = fieldRefToVarName(ref, bandContext);
+    const label = fieldRefToLabel(ref);
+    return registry.register(varName, label, szOpts);
+  }
+  if (arithmeticRefs.length >= 1) {
+    const ref = arithmeticRefs[arithmeticRefs.length - 1];
+    const varName = fieldRefToVarName(ref, bandContext);
+    const label = fieldRefToLabel(ref);
+    return registry.register(varName, label, szOpts);
+  }
+  return "";
+}
+var VariableRegistry = class {
+  constructor() {
+    __publicField(this, "map", /* @__PURE__ */ new Map());
+  }
+  register(varName, varLabel, options) {
+    if (!this.map.has(varName)) {
+      this.map.set(varName, { varName, varLabel, varDefault: "" });
+    }
+    const suppress = options?.suppressZero ? "|suppress:zero" : "";
+    return `{{var|name:${varName}|label:${varLabel}${suppress}}}`;
+  }
+  getAll() {
+    return Array.from(this.map.values());
+  }
+};
+function parseLocationFloat(s) {
+  if (!s) return { x: 0, y: 0 };
+  const parts = s.split(",");
+  return {
+    x: parseFloat(parts[0]) || 0,
+    y: parseFloat(parts[1]) || 0
+  };
+}
+function parseSizeF(s) {
+  if (!s) return { w: 0, h: 0 };
+  const parts = s.split(",");
+  return {
+    w: parseFloat(parts[0]) || 0,
+    h: parseFloat(parts[1]) || 0
+  };
+}
+function extractControls(bandEl) {
+  const controlsEl = bandEl.querySelector(":scope > Controls");
+  if (!controlsEl) return [];
+  const items = [];
+  for (const child of Array.from(controlsEl.children)) {
+    items.push(extractControl(child));
+  }
+  return items;
+}
+function extractControl(el) {
+  const ctrlType = el.getAttribute("ControlType") || "";
+  const name = el.getAttribute("Name") || "";
+  const text = el.getAttribute("Text") || "";
+  const loc = parseLocationFloat(el.getAttribute("LocationFloat"));
+  const size = parseSizeF(el.getAttribute("SizeF"));
+  const formatString = el.getAttribute("TextFormatString") || null;
+  let expression = null;
+  const bindingsEl = el.querySelector(":scope > ExpressionBindings");
+  if (bindingsEl) {
+    for (const item of Array.from(bindingsEl.children)) {
+      if (item.getAttribute("PropertyName") === "Text" && item.getAttribute("EventName") === "BeforePrint") {
+        expression = item.getAttribute("Expression");
+        break;
+      }
+    }
+  }
+  const children = [];
+  if (ctrlType === "XRPanel") {
+    const panelControls = extractControls(el);
+    children.push(...panelControls);
+  }
+  return {
+    name,
+    type: ctrlType,
+    text,
+    x: loc.x,
+    y: loc.y,
+    width: size.w,
+    expression,
+    formatString,
+    children
+  };
+}
+function groupByRow(controls, threshold = 8) {
+  const sorted = [...controls].sort((a, b) => a.y - b.y);
+  const rows = [];
+  for (const ctrl of sorted) {
+    const lastRow = rows[rows.length - 1];
+    if (lastRow && Math.abs(ctrl.y - lastRow.y) < threshold) {
+      lastRow.controls.push(ctrl);
+    } else {
+      rows.push({ y: ctrl.y, controls: [ctrl] });
+    }
+  }
+  for (const row of rows) {
+    row.controls.sort((a, b) => a.x - b.x);
+  }
+  return rows;
+}
+function isStaticLabel(ctrl) {
+  return ctrl.type === "XRLabel" && !ctrl.expression;
+}
+function isBound(ctrl) {
+  return ctrl.type === "XRLabel" && !!ctrl.expression;
+}
+function computeSplitPercent(leftControls, rightControls, contentWidth) {
+  const leftExtent = leftControls.reduce(
+    (max, c) => Math.max(max, c.x + c.width),
+    0
+  );
+  const rightMinX = rightControls.reduce(
+    (min, c) => Math.min(min, c.x),
+    contentWidth
+  );
+  const rightMaxExtent = rightControls.reduce(
+    (max, c) => Math.max(max, c.x + c.width),
+    0
+  );
+  const rightExtent = rightMaxExtent - rightMinX;
+  if (leftExtent + rightExtent === 0) return 50;
+  return Math.round(leftExtent / (leftExtent + rightExtent) * 100);
+}
+function renderTopMarginBand(controls, registry, contentWidth, calculatedFieldNames) {
+  const lines = [];
+  const leftControls = controls.filter((c) => c.x < 437);
+  const rightControls = controls.filter((c) => c.x >= 437);
+  const leftEntries = [];
+  if (leftControls.length > 0) {
+    const leftRows = groupByRow(leftControls);
+    for (const row of leftRows) {
+      const parts = [];
+      for (const ctrl of row.controls) {
+        if (isBound(ctrl)) {
+          let resolved = resolveExpression(ctrl.expression, registry, void 0, "workorder");
+          if (ctrl.formatString && /\(###\)\s*###\s*-\s*####/.test(ctrl.formatString) && resolved.startsWith("{{var|")) {
+            resolved = resolved.replace("}}", "|format:phone}}");
+          }
+          if (resolved) parts.push(resolved);
+        } else if (isStaticLabel(ctrl)) {
+          const text = ctrl.text.trim();
+          if (text && !text.match(/^label\d+$/)) {
+            parts.push(text);
+          }
+        }
+      }
+      if (parts.length > 0) {
+        leftEntries.push(parts.join(" "));
+      }
+    }
+  }
+  const rightEntries = [];
+  if (rightControls.length > 0) {
+    const rightRows = groupByRow(rightControls);
+    for (const row of rightRows) {
+      let label = "";
+      let value = "";
+      for (const ctrl of row.controls) {
+        if (isStaticLabel(ctrl)) {
+          const text = ctrl.text.trim();
+          if (text && !text.match(/^label\d+$/)) {
+            label = text;
+          }
+        } else if (isBound(ctrl)) {
+          value = resolveExpression(ctrl.expression, registry, label, "workorder");
+          if (ctrl.expression) {
+            const refs = extractFieldRefs(ctrl.expression);
+            if (refs.some((ref) => calculatedFieldNames.has(ref)) && value.startsWith("{{var|")) {
+              value = value.replace("}}", "|suppress:zero}}");
+            }
+          }
+          if (ctrl.formatString && /\(###\)\s*###\s*-\s*####/.test(ctrl.formatString) && value.startsWith("{{var|")) {
+            value = value.replace("}}", "|format:phone}}");
+          }
+        }
+      }
+      if (label || value) {
+        rightEntries.push({ label, value, y: row.y });
+      }
+    }
+  }
+  if (leftEntries.length > 0 || rightEntries.length > 0) {
+    const outerSplit = computeSplitPercent(leftControls, rightControls, contentWidth);
+    lines.push(`:::columns{split:${outerSplit}}`);
+    const leftMinY = leftControls.length > 0 ? Math.min(...leftControls.map((c) => c.y)) : 0;
+    const rightMinY = rightControls.length > 0 ? Math.min(...rightControls.map((c) => c.y)) : 0;
+    const xmlLineHeight = 17;
+    const leftPadTop = leftMinY > rightMinY ? Math.round((leftMinY - rightMinY) / xmlLineHeight) : 0;
+    const rightPadTop = rightMinY > leftMinY ? Math.round((rightMinY - leftMinY) / xmlLineHeight) : 0;
+    const leftColTag = leftPadTop ? `:::col{padTop:${leftPadTop}}` : ":::col";
+    lines.push(leftColTag);
+    for (const entry of leftEntries) {
+      lines.push(entry);
+    }
+    lines.push(":::");
+    const rightColTag = rightPadTop ? `:::col{padTop:${rightPadTop}}` : ":::col";
+    lines.push(rightColTag);
+    if (rightEntries.length > 0) {
+      lines.push("| | |");
+      lines.push("|---|---|");
+      let prevY = -Infinity;
+      for (const entry of rightEntries) {
+        if (prevY > -Infinity && entry.y - prevY > 25) {
+          lines.push("| | |");
+        }
+        const label = entry.label || "";
+        const colon = entry.label ? ":" : "";
+        const value = entry.value ? ` ${entry.value}` : "";
+        lines.push(`| ${label} | ${colon}${value} |`);
+        prevY = entry.y;
+      }
+    }
+    lines.push(":::");
+    lines.push(":::");
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+function renderReportHeaderBand(controls, registry, contentWidth) {
+  const lines = [];
+  const leftControls = controls.filter((c) => c.x < 437);
+  const rightControls = controls.filter((c) => c.x >= 437);
+  const leftEntries = [];
+  if (leftControls.length > 0) {
+    const leftRows = groupByRow(leftControls);
+    for (const row of leftRows) {
+      const parts = [];
+      for (const ctrl of row.controls) {
+        if (isBound(ctrl)) {
+          const resolved = resolveExpression(ctrl.expression, registry, void 0, "workorder");
+          if (resolved) parts.push(resolved);
+        } else if (isStaticLabel(ctrl)) {
+          const text = ctrl.text.trim();
+          if (text && !text.match(/^label\d+$/)) {
+            parts.push(text);
+          }
+        }
+      }
+      if (parts.length > 0) {
+        leftEntries.push(parts.join(" "));
+      }
+    }
+  }
+  const rightEntries = [];
+  if (rightControls.length > 0) {
+    const rightRows = groupByRow(rightControls);
+    for (const row of rightRows) {
+      let label = "";
+      let value = "";
+      for (const ctrl of row.controls) {
+        if (isStaticLabel(ctrl)) {
+          const text = ctrl.text.trim();
+          if (text && !text.match(/^label\d+$/)) {
+            label = text;
+          }
+        } else if (isBound(ctrl)) {
+          value = resolveExpression(ctrl.expression, registry, void 0, "workorder");
+          if (ctrl.formatString && /\(###\)\s*###\s*-\s*####/.test(ctrl.formatString) && value.startsWith("{{var|")) {
+            value = value.replace("}}", "|format:phone}}");
+          }
+        }
+      }
+      if (label || value) {
+        rightEntries.push({ label, value });
+      }
+    }
+  }
+  if (leftEntries.length > 0 || rightEntries.length > 0) {
+    const outerSplit = computeSplitPercent(leftControls, rightControls, contentWidth);
+    lines.push(`:::columns{split:${outerSplit}}`);
+    lines.push(":::col");
+    for (const entry of leftEntries) {
+      lines.push(entry);
+    }
+    lines.push(":::");
+    lines.push(":::col");
+    lines.push("| | |");
+    lines.push("|---|---|");
+    for (const entry of rightEntries) {
+      const label = entry.label || "";
+      const value = entry.value ? ` ${entry.value}` : "";
+      lines.push(`| ${label} |${value} |`);
+    }
+    lines.push(":::");
+    lines.push(":::");
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+function renderOperationsSection(pageHeaderControls, detailControls, groupFooterControls, registry, contentWidth) {
+  const lines = [];
+  const headerTexts = [];
+  for (const ctrl of [...pageHeaderControls].sort((a, b) => a.x - b.x)) {
+    if (isStaticLabel(ctrl)) {
+      const text = ctrl.text.trim();
+      if (text) headerTexts.push(text);
+    }
+  }
+  const titleText = headerTexts.join("        ");
+  lines.push(`:::panel{title:${titleText}|headerStyle:dark|border:none}`);
+  lines.push(":::");
+  lines.push(":::repeat{data:operations}");
+  const sortedDetail = [...detailControls].sort((a, b) => a.x - b.x);
+  const detailParts = [];
+  for (const ctrl of sortedDetail) {
+    if (isBound(ctrl)) {
+      const resolved = resolveExpression(ctrl.expression, registry, void 0, "operation");
+      if (resolved) detailParts.push(resolved);
+    }
+  }
+  if (detailParts.length > 0) {
+    if (detailParts.length >= 2) {
+      lines.push(":::columns{split:12}");
+      lines.push(":::col");
+      lines.push(`**${detailParts[0]}**`);
+      lines.push(":::");
+      lines.push(":::col");
+      lines.push(`**${detailParts.slice(1).join(" ")}**`);
+      lines.push(":::");
+      lines.push(":::");
+    } else {
+      lines.push(`**${detailParts[0]}**`);
+    }
+    lines.push("");
+  }
+  if (groupFooterControls.length > 0) {
+    const subtotalsMarkdown = renderGroupFooterBand(groupFooterControls, registry);
+    if (subtotalsMarkdown) lines.push(subtotalsMarkdown);
+  }
+  lines.push("---");
+  lines.push(":::");
+  lines.push("");
+  return lines.join("\n");
+}
+function renderGroupFooterBand(controls, registry, _contentWidth) {
+  const rows = groupByRow(controls);
+  const entries = [];
+  for (const row of rows) {
+    const labels = row.controls.filter((c) => c.type === "XRLabel");
+    if (labels.length === 0) continue;
+    let label = "";
+    let value = "";
+    const sorted = [...labels].sort((a, b) => a.x - b.x);
+    for (const ctrl of sorted) {
+      if (isStaticLabel(ctrl)) {
+        const text = ctrl.text.trim();
+        if (text && !text.match(/^label\d+$/)) {
+          label = text;
+        }
+      } else if (isBound(ctrl)) {
+        const resolved = resolveExpression(ctrl.expression, registry, label, "operation");
+        if (resolved) {
+          if (!resolved.startsWith("{{var|")) {
+            if (!label) label = resolved;
+          } else {
+            value = resolved;
+          }
+        }
+      }
+    }
+    if (label && value) {
+      entries.push({ label, value });
+    }
+  }
+  if (entries.length === 0) return "";
+  const lines = [];
+  lines.push(":::subtotals");
+  for (const entry of entries) {
+    lines.push(`**${entry.label}** ${entry.value}`);
+  }
+  lines.push(":::");
+  lines.push("");
+  return lines.join("\n");
+}
+function renderReportFooterBand(controls, registry) {
+  const lines = [];
+  const panel = controls.find((c) => c.type === "XRPanel");
+  const thankYouLabel = controls.find(
+    (c) => c.type === "XRLabel" && c.text.includes("Thank You")
+  );
+  const priceRows = [];
+  if (panel && panel.children.length > 0) {
+    const rows = groupByRow(panel.children, 15);
+    for (const row of rows) {
+      const labels = row.controls.filter((c) => c.type === "XRLabel");
+      if (labels.length === 0) continue;
+      let label = "";
+      let value = "";
+      const sorted = [...labels].sort((a, b) => a.x - b.x);
+      for (const ctrl of sorted) {
+        if (isStaticLabel(ctrl) && ctrl.text.includes("Estimate Price Summary")) {
+          continue;
+        }
+        const isLabelPos = ctrl.x < 150;
+        if (isStaticLabel(ctrl)) {
+          const text = ctrl.text.trim();
+          if (isLabelPos && text && !text.match(/^label\d+$/) && text !== "0.00") {
+            label = text;
+          }
+        } else if (isBound(ctrl)) {
+          const resolved = resolveExpression(ctrl.expression, registry, label || void 0, "workorder");
+          if (resolved) {
+            if (isLabelPos) {
+              if (!label) label = resolved;
+            } else {
+              if (!value) value = resolved;
+            }
+          }
+        }
+      }
+      if (label && value) {
+        priceRows.push({ label, value });
+      } else if (value) {
+        priceRows.push({ label: "", value });
+      }
+    }
+  }
+  lines.push(":::columns{split:40|padX:20}");
+  lines.push(":::col{padTop:1}");
+  if (thankYouLabel) {
+    lines.push(`## ***${thankYouLabel.text.trim()}***`);
+  }
+  lines.push(":::");
+  lines.push(":::col{padTop:1}");
+  lines.push(":::panel{title:Estimate Price Summary|border:solid|headerStyle:dark}");
+  if (priceRows.length > 0) {
+    lines.push(":::subtotals");
+    for (const row of priceRows) {
+      const label = row.label ? `**${row.label}**` : "";
+      lines.push(`${label} ${row.value}`);
+    }
+    lines.push(":::");
+  }
+  lines.push(":::");
+  lines.push(":::");
+  lines.push(":::");
+  lines.push("");
+  return lines.join("\n");
+}
+function parseXmlTemplate(xmlString) {
+  const warnings = [];
+  const registry = new VariableRegistry();
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(xmlString, "text/xml");
+  const parseError = doc.querySelector("parsererror");
+  if (parseError) {
+    return {
+      markdown: "",
+      variables: [],
+      reportName: "",
+      warnings: ["XML parse error: " + (parseError.textContent || "Unknown error")]
+    };
+  }
+  const root = doc.documentElement;
+  const reportName = root.getAttribute("DisplayName") || root.getAttribute("Name") || "Report";
+  const pageWidth = parseInt(root.getAttribute("PageWidth") || "850", 10);
+  const marginsStr = root.getAttribute("Margins") || "50,50,250,50";
+  const marginParts = marginsStr.split(",").map(Number);
+  const leftMargin = marginParts[0] || 50;
+  const rightMargin = marginParts[1] || 50;
+  const contentWidth = pageWidth - leftMargin - rightMargin;
+  const calculatedFieldNames = /* @__PURE__ */ new Set();
+  const calcFieldsEl = root.querySelector(":scope > CalculatedFields");
+  if (calcFieldsEl) {
+    for (const item of Array.from(calcFieldsEl.children)) {
+      const name = item.getAttribute("Name");
+      if (name) calculatedFieldNames.add(name);
+    }
+  }
+  const markdownSections = [];
+  const watermarkEl = root.querySelector("Watermarks > Item1");
+  if (watermarkEl) {
+    const wmText = watermarkEl.getAttribute("Text");
+    if (wmText) {
+      markdownSections.push(`:::watermark{text:${wmText}|opacity:0.15|angle:45}`);
+      markdownSections.push("");
+    }
+  }
+  const bandsEl = root.querySelector(":scope > Bands");
+  if (!bandsEl) {
+    warnings.push("No <Bands> element found in the XML");
+    return {
+      markdown: "",
+      variables: registry.getAll(),
+      reportName,
+      warnings
+    };
+  }
+  let topMarginControls = [];
+  let reportHeaderControls = [];
+  let pageHeaderControls = [];
+  let detailControls = [];
+  let groupFooterControls = [];
+  let reportFooterControls = [];
+  for (const bandItem of Array.from(bandsEl.children)) {
+    const ctrlType = bandItem.getAttribute("ControlType") || "";
+    if (ctrlType === "TopMarginBand") {
+      topMarginControls = extractControls(bandItem);
+    } else if (ctrlType === "ReportHeaderBand") {
+      reportHeaderControls = extractControls(bandItem);
+    } else if (ctrlType === "PageHeaderBand") {
+      pageHeaderControls = extractControls(bandItem);
+    } else if (ctrlType === "DetailReportBand") {
+      const nestedBands = bandItem.querySelector(":scope > Bands");
+      if (nestedBands) {
+        for (const nested of Array.from(nestedBands.children)) {
+          const nestedType = nested.getAttribute("ControlType") || "";
+          if (nestedType === "DetailBand") {
+            detailControls = extractControls(nested);
+          } else if (nestedType === "GroupFooterBand") {
+            groupFooterControls = extractControls(nested);
+          }
+        }
+      }
+    } else if (ctrlType === "ReportFooterBand") {
+      reportFooterControls = extractControls(bandItem);
+    }
+  }
+  if (topMarginControls.length > 0) {
+    markdownSections.push(renderTopMarginBand(topMarginControls, registry, contentWidth, calculatedFieldNames));
+  }
+  if (reportHeaderControls.length > 0) {
+    markdownSections.push(
+      renderReportHeaderBand(reportHeaderControls, registry, contentWidth)
+    );
+  }
+  if (pageHeaderControls.length > 0 || detailControls.length > 0) {
+    markdownSections.push(
+      renderOperationsSection(
+        pageHeaderControls,
+        detailControls,
+        groupFooterControls,
+        registry)
+    );
+  }
+  if (reportFooterControls.length > 0) {
+    markdownSections.push(
+      renderReportFooterBand(reportFooterControls, registry)
+    );
+  }
+  const markdown = markdownSections.join("\n").replace(/\n{4,}/g, "\n\n\n");
+  return {
+    markdown,
+    variables: registry.getAll(),
+    reportName,
+    warnings
+  };
+}
+
+export { DocumentGenerator, EditorPanel, FormFieldType, ImageNode, PreviewPanel, RepeatNode, SubtotalsNode, ThemeProvider, expandBlockVariables, expandRepeatContent, extractVariablesFromContent, generatePdfFromMarkdown, generatePdfFromTiptap, isZeroLike, markdownToTiptap, parseXmlTemplate, suppressZeroContent, tiptapToMarkdown, useDocumentGenerator, useTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map