Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/components/forms/custom-form-builder.tsx

@@ -454,7 +454,54 @@ export function CustomFormBuilder() {
       children.push(new DocxParagraph({ text: "" }));
     }
 
+    const tableBorder = { style: BorderStyle.SINGLE, size: 4, color: "999999" };
+    const cellBorders = {
+      top: tableBorder,
+      bottom: tableBorder,
+      left: tableBorder,
+      right: tableBorder,
+    };
+
     for (const seg of segments) {
+      if (seg.kind === "table") {
+        const cols = Math.max(...seg.rows.map((r) => r.length));
+        const totalW = 9360; // US letter content width @ 1" margins
+        const colW = Math.floor(totalW / cols);
+        children.push(
+          new DocxTable({
+            width: { size: totalW, type: WidthType.DXA },
+            columnWidths: Array(cols).fill(colW),
+            rows: seg.rows.map(
+              (row, ri) =>
+                new DocxTableRow({
+                  children: Array.from({ length: cols }).map((_, ci) => {
+                    const isHeader = seg.hasHeader && ri === 0;
+                    return new DocxTableCell({
+                      borders: cellBorders,
+                      width: { size: colW, type: WidthType.DXA },
+                      margins: { top: 80, bottom: 80, left: 120, right: 120 },
+                      children: [
+                        new DocxParagraph({
+                          children: [
+                            new TextRun({
+                              text: applyVariables(row[ci] ?? "", ctx),
+                              font: fontFamily,
+                              size: fontSize * 2,
+                              bold: isHeader,
+                            }),
+                          ],
+                        }),
+                      ],
+                    });
+                  }),
+                }),
+            ),
+          }),
+        );
+        children.push(new DocxParagraph({ text: "" }));
+        continue;
+      }
+
       const align =
         seg.align === "center"
           ? AlignmentType.CENTER
@@ -463,14 +510,18 @@ export function CustomFormBuilder() {
             : seg.align === "justify"
               ? AlignmentType.JUSTIFIED
               : AlignmentType.LEFT;
+      const indentTwips = Math.round((seg.indent || 0) * 15); // ~px → twips (1px≈15twip)
       children.push(
         new DocxParagraph({
           alignment: align,
+          indent: indentTwips ? { left: indentTwips } : undefined,
           children: [
             new TextRun({
               text: applyVariables(seg.text, ctx),
               font: fontFamily,
               size: fontSize * 2,
+              italics: seg.caption,
+              bold: !!seg.heading && seg.heading > 0,
             }),
           ],
         }),