@productcloudos/editor 1.0.6 → 1.0.7

package/dist/pc-editor.esm.js

@@ -1,4 +1,5 @@
 import { StandardFonts, rgb, PDFDocument } from 'pdf-lib';
+import fontkit from '@pdf-lib/fontkit';
 import * as pdfjsLib from 'pdfjs-dist';
 
 class EventEmitter {
@@ -2286,6 +2287,291 @@ class RepeatingSectionManager extends EventEmitter {
     }
 }
 
+/**
+ * Manages conditional sections within text content.
+ * Conditional sections define ranges of content that are shown or hidden
+ * based on a boolean predicate evaluated against merge data.
+ * They start and end at paragraph boundaries.
+ */
+class ConditionalSectionManager extends EventEmitter {
+    constructor() {
+        super();
+        this.sections = new Map();
+        this.nextId = 1;
+    }
+    /**
+     * Create a new conditional section.
+     * @param startIndex Text index at paragraph start (must be 0 or immediately after a newline)
+     * @param endIndex Text index at closing paragraph start (must be immediately after a newline)
+     * @param predicate The predicate expression to evaluate (e.g., "isActive")
+     */
+    create(startIndex, endIndex, predicate) {
+        const id = `cond-${this.nextId++}`;
+        const section = {
+            id,
+            predicate,
+            startIndex,
+            endIndex
+        };
+        this.sections.set(id, section);
+        this.emit('section-added', { section });
+        return section;
+    }
+    /**
+     * Remove a conditional section by ID.
+     */
+    remove(id) {
+        const section = this.sections.get(id);
+        if (section) {
+            this.sections.delete(id);
+            this.emit('section-removed', { section });
+        }
+        return section;
+    }
+    /**
+     * Get a conditional section by ID.
+     */
+    getSection(id) {
+        return this.sections.get(id);
+    }
+    /**
+     * Get all conditional sections.
+     */
+    getSections() {
+        return Array.from(this.sections.values());
+    }
+    /**
+     * Get all conditional sections sorted by startIndex.
+     */
+    getSectionsSorted() {
+        return this.getSections().sort((a, b) => a.startIndex - b.startIndex);
+    }
+    /**
+     * Get all conditional sections sorted by startIndex in descending order.
+     * Useful for processing sections end-to-start during merge.
+     */
+    getSectionsDescending() {
+        return this.getSections().sort((a, b) => b.startIndex - a.startIndex);
+    }
+    /**
+     * Find a conditional section that contains the given text index.
+     */
+    getSectionContaining(textIndex) {
+        for (const section of this.sections.values()) {
+            if (textIndex >= section.startIndex && textIndex < section.endIndex) {
+                return section;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Find a conditional section that has a boundary at the given text index.
+     * Returns the section if textIndex matches startIndex or endIndex.
+     */
+    getSectionAtBoundary(textIndex) {
+        for (const section of this.sections.values()) {
+            if (section.startIndex === textIndex || section.endIndex === textIndex) {
+                return section;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Update a section's predicate.
+     */
+    updatePredicate(id, predicate) {
+        const section = this.sections.get(id);
+        if (!section) {
+            return false;
+        }
+        section.predicate = predicate;
+        this.emit('section-updated', { section });
+        return true;
+    }
+    /**
+     * Update a section's visual state (called during rendering).
+     */
+    updateVisualState(id, visualState) {
+        const section = this.sections.get(id);
+        if (!section) {
+            return false;
+        }
+        section.visualState = visualState;
+        return true;
+    }
+    /**
+     * Shift section positions when text is inserted.
+     * @param fromIndex The position where text was inserted
+     * @param delta The number of characters inserted (positive)
+     */
+    shiftSections(fromIndex, delta) {
+        let changed = false;
+        for (const section of this.sections.values()) {
+            if (fromIndex <= section.startIndex) {
+                section.startIndex += delta;
+                section.endIndex += delta;
+                changed = true;
+            }
+            else if (fromIndex < section.endIndex) {
+                section.endIndex += delta;
+                changed = true;
+            }
+        }
+        if (changed) {
+            this.emit('sections-shifted', { fromIndex, delta });
+        }
+    }
+    /**
+     * Handle deletion of text range.
+     * Sections entirely within the deleted range are removed.
+     * Sections partially overlapping are adjusted or removed.
+     * @returns Array of removed sections
+     */
+    handleDeletion(start, length) {
+        const end = start + length;
+        const removedSections = [];
+        const sectionsToUpdate = [];
+        for (const section of this.sections.values()) {
+            if (section.startIndex >= start && section.endIndex <= end) {
+                removedSections.push(section);
+                continue;
+            }
+            if (section.startIndex < end && section.endIndex > start) {
+                if (start <= section.startIndex) {
+                    removedSections.push(section);
+                    continue;
+                }
+                if (start < section.endIndex) {
+                    if (end >= section.endIndex) {
+                        const newEnd = start;
+                        if (newEnd <= section.startIndex) {
+                            removedSections.push(section);
+                            continue;
+                        }
+                        sectionsToUpdate.push({
+                            id: section.id,
+                            newStart: section.startIndex,
+                            newEnd: newEnd
+                        });
+                    }
+                    else {
+                        const newEnd = section.endIndex - length;
+                        sectionsToUpdate.push({
+                            id: section.id,
+                            newStart: section.startIndex,
+                            newEnd: newEnd
+                        });
+                    }
+                    continue;
+                }
+            }
+            if (section.startIndex >= end) {
+                sectionsToUpdate.push({
+                    id: section.id,
+                    newStart: section.startIndex - length,
+                    newEnd: section.endIndex - length
+                });
+            }
+        }
+        for (const section of removedSections) {
+            this.sections.delete(section.id);
+            this.emit('section-removed', { section });
+        }
+        for (const update of sectionsToUpdate) {
+            const section = this.sections.get(update.id);
+            if (section) {
+                section.startIndex = update.newStart;
+                section.endIndex = update.newEnd;
+            }
+        }
+        if (removedSections.length > 0 || sectionsToUpdate.length > 0) {
+            this.emit('sections-changed');
+        }
+        return removedSections;
+    }
+    /**
+     * Validate that the given boundaries are at paragraph boundaries.
+     * Also checks that conditionals don't partially overlap repeating sections.
+     * @param start The proposed start index
+     * @param end The proposed end index
+     * @param content The text content to validate against
+     * @returns true if valid, false otherwise
+     */
+    validateBoundaries(start, end, content) {
+        if (start !== 0 && content[start - 1] !== '\n') {
+            return false;
+        }
+        if (end !== 0 && end < content.length && content[end - 1] !== '\n') {
+            return false;
+        }
+        if (end <= start) {
+            return false;
+        }
+        // Check for overlapping conditional sections
+        for (const existing of this.sections.values()) {
+            if ((start >= existing.startIndex && start < existing.endIndex) ||
+                (end > existing.startIndex && end <= existing.endIndex) ||
+                (start <= existing.startIndex && end >= existing.endIndex)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+     * Get the number of conditional sections.
+     */
+    get count() {
+        return this.sections.size;
+    }
+    /**
+     * Check if there are any conditional sections.
+     */
+    get isEmpty() {
+        return this.sections.size === 0;
+    }
+    /**
+     * Clear all conditional sections.
+     */
+    clear() {
+        const hadSections = this.sections.size > 0;
+        this.sections.clear();
+        if (hadSections) {
+            this.emit('sections-cleared');
+        }
+    }
+    /**
+     * Serialize all sections to JSON.
+     */
+    toJSON() {
+        return this.getSectionsSorted().map(section => ({
+            id: section.id,
+            predicate: section.predicate,
+            startIndex: section.startIndex,
+            endIndex: section.endIndex
+        }));
+    }
+    /**
+     * Load sections from serialized data.
+     */
+    fromJSON(data) {
+        this.clear();
+        for (const sectionData of data) {
+            const section = {
+                id: sectionData.id,
+                predicate: sectionData.predicate,
+                startIndex: sectionData.startIndex,
+                endIndex: sectionData.endIndex
+            };
+            this.sections.set(section.id, section);
+            const idNum = parseInt(sectionData.id.replace('cond-', ''), 10);
+            if (!isNaN(idNum) && idNum >= this.nextId) {
+                this.nextId = idNum + 1;
+            }
+        }
+        this.emit('sections-loaded', { count: this.sections.size });
+    }
+}
+
 /**
  * HyperlinkManager - Manages hyperlinks within flowing text content
  */
@@ -6191,12 +6477,20 @@ class TableObject extends BaseEmbeddedObject {
         this._coveredCells = new Map();
         // Row loops for merge expansion
         this._rowLoops = new Map();
+        // Row conditionals for conditional display
+        this._rowConditionals = new Map();
         // Layout caching for performance
         this._layoutDirty = true;
         this._cachedRowHeights = [];
         this._cachedRowPositions = [];
         // Multi-page rendering info: pageIndex -> slice render info
         this._renderedSlices = new Map();
+        // ============================================
+        // Table Row Conditionals
+        // ============================================
+        this._nextCondId = 1;
+        this._selectedRowLoopId = null;
+        this._selectedRowConditionalId = null;
         // Tables ONLY support block positioning - force it regardless of config
         this._position = 'block';
         // Initialize defaults
@@ -6890,6 +7184,85 @@ class TableObject extends BaseEmbeddedObject {
     loopRangesOverlap(start1, end1, start2, end2) {
         return start1 <= end2 && start2 <= end1;
     }
+    generateRowConditionalId() {
+        return `row-cond-${this._nextCondId++}`;
+    }
+    /**
+     * Create a row conditional.
+     */
+    createRowConditional(startRowIndex, endRowIndex, predicate) {
+        if (startRowIndex < 0 || endRowIndex >= this._rows.length) {
+            Logger.warn('[pc-editor:TableObject.createRowConditional] Invalid row range');
+            return null;
+        }
+        if (startRowIndex > endRowIndex) {
+            Logger.warn('[pc-editor:TableObject.createRowConditional] Start index must be <= end index');
+            return null;
+        }
+        // Check for overlapping conditionals
+        for (const existing of this._rowConditionals.values()) {
+            if (this.loopRangesOverlap(startRowIndex, endRowIndex, existing.startRowIndex, existing.endRowIndex)) {
+                Logger.warn('[pc-editor:TableObject.createRowConditional] Range overlaps with existing conditional');
+                return null;
+            }
+        }
+        const cond = {
+            id: this.generateRowConditionalId(),
+            predicate,
+            startRowIndex,
+            endRowIndex
+        };
+        this._rowConditionals.set(cond.id, cond);
+        this.emit('row-conditional-created', { conditional: cond });
+        this.emit('content-changed', {});
+        return cond;
+    }
+    /**
+     * Remove a row conditional by ID.
+     */
+    removeRowConditional(id) {
+        const cond = this._rowConditionals.get(id);
+        if (!cond)
+            return false;
+        this._rowConditionals.delete(id);
+        this.emit('row-conditional-removed', { conditionalId: id });
+        return true;
+    }
+    /**
+     * Get a row conditional by ID.
+     */
+    getRowConditional(id) {
+        return this._rowConditionals.get(id);
+    }
+    /**
+     * Get all row conditionals.
+     */
+    getAllRowConditionals() {
+        return Array.from(this._rowConditionals.values());
+    }
+    /**
+     * Get the row conditional at a given row index.
+     */
+    getRowConditionalAtRow(rowIndex) {
+        for (const cond of this._rowConditionals.values()) {
+            if (rowIndex >= cond.startRowIndex && rowIndex <= cond.endRowIndex) {
+                return cond;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Update a row conditional's predicate.
+     */
+    updateRowConditionalPredicate(id, predicate) {
+        const cond = this._rowConditionals.get(id);
+        if (!cond)
+            return false;
+        cond.predicate = predicate;
+        this.emit('row-conditional-updated', { conditional: cond });
+        this.emit('content-changed', {});
+        return true;
+    }
     /**
      * Shift row loop indices when rows are inserted or removed.
      * @param fromIndex The row index where insertion/removal occurred
@@ -6930,6 +7303,41 @@ class TableObject extends BaseEmbeddedObject {
             this._rowLoops.delete(id);
             this.emit('row-loop-removed', { loopId: id, reason: 'row-deleted' });
         }
+        // Also shift row conditional indices
+        this.shiftRowConditionalIndices(fromIndex, delta);
+    }
+    /**
+     * Shift row conditional indices when rows are inserted or removed.
+     */
+    shiftRowConditionalIndices(fromIndex, delta) {
+        const condsToRemove = [];
+        for (const cond of this._rowConditionals.values()) {
+            if (delta < 0) {
+                const removeCount = Math.abs(delta);
+                const removeEnd = fromIndex + removeCount - 1;
+                if (fromIndex <= cond.endRowIndex && removeEnd >= cond.startRowIndex) {
+                    condsToRemove.push(cond.id);
+                    continue;
+                }
+                if (fromIndex < cond.startRowIndex) {
+                    cond.startRowIndex += delta;
+                    cond.endRowIndex += delta;
+                }
+            }
+            else {
+                if (fromIndex <= cond.startRowIndex) {
+                    cond.startRowIndex += delta;
+                    cond.endRowIndex += delta;
+                }
+                else if (fromIndex <= cond.endRowIndex) {
+                    cond.endRowIndex += delta;
+                }
+            }
+        }
+        for (const id of condsToRemove) {
+            this._rowConditionals.delete(id);
+            this.emit('row-conditional-removed', { conditionalId: id, reason: 'row-deleted' });
+        }
     }
     /**
      * Get rows in a range (for loop expansion).
@@ -7830,6 +8238,10 @@ class TableObject extends BaseEmbeddedObject {
         if (this._rowLoops.size > 0) {
             this.renderRowLoopIndicators(ctx);
         }
+        // Render row conditional indicators
+        if (this._rowConditionals.size > 0) {
+            this.renderRowConditionalIndicators(ctx);
+        }
         // Render cell range selection highlight
         if (this._selectedRange) {
             this.renderRangeSelection(ctx);
@@ -7844,11 +8256,54 @@ class TableObject extends BaseEmbeddedObject {
         }
     }
     /**
-     * Render row loop indicators (colored stripe on left side of loop rows).
+     * Select a row loop by ID (for pane display).
+     */
+    selectRowLoop(loopId) {
+        this._selectedRowLoopId = loopId;
+    }
+    /**
+     * Get the currently selected row loop ID.
+     */
+    get selectedRowLoopId() {
+        return this._selectedRowLoopId;
+    }
+    /**
+     * Hit-test a point against row loop labels.
+     * Point should be in table-local coordinates.
+     * Returns the loop if a label was clicked, null otherwise.
      */
+    getRowLoopAtPoint(point) {
+        let rowPositions = this._cachedRowPositions;
+        if (rowPositions.length === 0) {
+            rowPositions = [];
+            let y = 0;
+            for (const row of this._rows) {
+                rowPositions.push(y);
+                y += row.calculatedHeight;
+            }
+        }
+        for (const loop of this._rowLoops.values()) {
+            const startY = rowPositions[loop.startRowIndex] || 0;
+            let _endY = startY;
+            for (let i = loop.startRowIndex; i <= loop.endRowIndex && i < this._rows.length; i++) {
+                _endY += this._rows[i].calculatedHeight;
+            }
+            // Label bounds (matches rendering)
+            const labelWidth = 30; // approximate for "Loop" at 10px
+            const labelHeight = 10 + TableObject.LOOP_LABEL_PADDING * 2;
+            const labelX = -6 - labelWidth - 4;
+            const labelY = startY - labelHeight - 2;
+            if (point.x >= labelX && point.x <= labelX + labelWidth + 4 &&
+                point.y >= labelY && point.y <= labelY + labelHeight + 4) {
+                return loop;
+            }
+        }
+        return null;
+    }
     renderRowLoopIndicators(ctx) {
-        const indicatorWidth = 4;
-        const labelPadding = 4;
+        const color = TableObject.LOOP_COLOR;
+        const padding = TableObject.LOOP_LABEL_PADDING;
+        const radius = TableObject.LOOP_LABEL_RADIUS;
         // Calculate row Y positions if not cached
         let rowPositions = this._cachedRowPositions;
         if (rowPositions.length === 0) {
@@ -7859,12 +8314,8 @@ class TableObject extends BaseEmbeddedObject {
                 y += row.calculatedHeight;
             }
         }
-        // Colors for different loops (cycle through these)
-        const loopColors = ['#9b59b6', '#3498db', '#e67e22', '#1abc9c', '#e74c3c'];
-        let colorIndex = 0;
         for (const loop of this._rowLoops.values()) {
-            const color = loopColors[colorIndex % loopColors.length];
-            colorIndex++;
+            const isSelected = this._selectedRowLoopId === loop.id;
             // Calculate the Y range for this loop
             const startY = rowPositions[loop.startRowIndex] || 0;
             let endY = startY;
@@ -7874,31 +8325,149 @@ class TableObject extends BaseEmbeddedObject {
             const loopHeight = endY - startY;
             // Draw colored stripe on left side
             ctx.fillStyle = color;
-            ctx.fillRect(-indicatorWidth - 2, startY, indicatorWidth, loopHeight);
-            // Draw loop label on the first row
+            ctx.fillRect(-6, startY, 4, loopHeight);
+            // Draw vertical connector line
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(-4, startY);
+            ctx.lineTo(-4, endY);
+            ctx.stroke();
+            // Draw "Loop" label — matches text flow style
             ctx.save();
             ctx.font = '10px Arial';
-            ctx.fillStyle = color;
-            // Rotate text to be vertical along the stripe
-            const labelText = `⟳ ${loop.fieldPath}`;
-            const textMetrics = ctx.measureText(labelText);
-            // Position label to the left of the stripe
-            ctx.translate(-indicatorWidth - labelPadding - textMetrics.width - 4, startY + loopHeight / 2);
-            ctx.fillText(labelText, 0, 4);
+            const labelText = 'Loop';
+            const metrics = ctx.measureText(labelText);
+            const boxWidth = metrics.width + padding * 2;
+            const boxHeight = 10 + padding * 2;
+            const labelX = -6 - boxWidth - 4;
+            const labelY = startY - boxHeight - 2;
+            ctx.beginPath();
+            ctx.roundRect(labelX, labelY, boxWidth, boxHeight, radius);
+            if (isSelected) {
+                // Selected: filled background with white text
+                ctx.fillStyle = color;
+                ctx.fill();
+                ctx.fillStyle = '#ffffff';
+            }
+            else {
+                // Not selected: white background, outlined with colored text
+                ctx.fillStyle = '#ffffff';
+                ctx.fill();
+                ctx.strokeStyle = color;
+                ctx.lineWidth = 1.5;
+                ctx.stroke();
+                ctx.fillStyle = color;
+            }
+            ctx.textBaseline = 'middle';
+            ctx.fillText(labelText, labelX + padding, labelY + boxHeight / 2);
             ctx.restore();
-            // Draw top and bottom brackets
+        }
+    }
+    /**
+     * Select a row conditional by ID (for pane display).
+     */
+    selectRowConditional(conditionalId) {
+        this._selectedRowConditionalId = conditionalId;
+    }
+    /**
+     * Get the currently selected row conditional ID.
+     */
+    get selectedRowConditionalId() {
+        return this._selectedRowConditionalId;
+    }
+    /**
+     * Hit-test a point against row conditional labels.
+     * Point should be in table-local coordinates.
+     */
+    getRowConditionalAtPoint(point) {
+        let rowPositions = this._cachedRowPositions;
+        if (rowPositions.length === 0) {
+            rowPositions = [];
+            let y = 0;
+            for (const row of this._rows) {
+                rowPositions.push(y);
+                y += row.calculatedHeight;
+            }
+        }
+        for (const cond of this._rowConditionals.values()) {
+            const startY = rowPositions[cond.startRowIndex] || 0;
+            let _endY = startY;
+            for (let i = cond.startRowIndex; i <= cond.endRowIndex && i < this._rows.length; i++) {
+                _endY += this._rows[i].calculatedHeight;
+            }
+            // Label bounds (right side of table, offset from loop labels)
+            const totalWidth = this._columns.reduce((sum, col) => sum + col.width, 0);
+            const labelWidth = 22; // approximate for "If" at 10px
+            const labelHeight = 10 + TableObject.LOOP_LABEL_PADDING * 2;
+            const labelX = totalWidth + 10;
+            const labelY = startY - labelHeight - 2;
+            if (point.x >= labelX && point.x <= labelX + labelWidth + 4 &&
+                point.y >= labelY && point.y <= labelY + labelHeight + 4) {
+                return cond;
+            }
+        }
+        return null;
+    }
+    renderRowConditionalIndicators(ctx) {
+        const color = TableObject.COND_COLOR;
+        const padding = TableObject.LOOP_LABEL_PADDING;
+        const radius = TableObject.LOOP_LABEL_RADIUS;
+        let rowPositions = this._cachedRowPositions;
+        if (rowPositions.length === 0) {
+            rowPositions = [];
+            let y = 0;
+            for (const row of this._rows) {
+                rowPositions.push(y);
+                y += row.calculatedHeight;
+            }
+        }
+        const totalWidth = this._columns.reduce((sum, col) => sum + col.width, 0);
+        for (const cond of this._rowConditionals.values()) {
+            const isSelected = this._selectedRowConditionalId === cond.id;
+            const startY = rowPositions[cond.startRowIndex] || 0;
+            let endY = startY;
+            for (let i = cond.startRowIndex; i <= cond.endRowIndex && i < this._rows.length; i++) {
+                endY += this._rows[i].calculatedHeight;
+            }
+            const condHeight = endY - startY;
+            // Draw colored stripe on right side
+            ctx.fillStyle = color;
+            ctx.fillRect(totalWidth + 2, startY, 4, condHeight);
+            // Draw vertical connector line
             ctx.strokeStyle = color;
             ctx.lineWidth = 1;
             ctx.beginPath();
-            // Top bracket
-            ctx.moveTo(-indicatorWidth - 2, startY);
-            ctx.lineTo(-indicatorWidth - 6, startY);
-            ctx.lineTo(-indicatorWidth - 6, startY + 6);
-            // Bottom bracket
-            ctx.moveTo(-indicatorWidth - 2, endY);
-            ctx.lineTo(-indicatorWidth - 6, endY);
-            ctx.lineTo(-indicatorWidth - 6, endY - 6);
+            ctx.moveTo(totalWidth + 4, startY);
+            ctx.lineTo(totalWidth + 4, endY);
             ctx.stroke();
+            // Draw "If" label
+            ctx.save();
+            ctx.font = '10px Arial';
+            const labelText = 'If';
+            const metrics = ctx.measureText(labelText);
+            const boxWidth = metrics.width + padding * 2;
+            const boxHeight = 10 + padding * 2;
+            const labelX = totalWidth + 10;
+            const labelY = startY - boxHeight - 2;
+            ctx.beginPath();
+            ctx.roundRect(labelX, labelY, boxWidth, boxHeight, radius);
+            if (isSelected) {
+                ctx.fillStyle = color;
+                ctx.fill();
+                ctx.fillStyle = '#ffffff';
+            }
+            else {
+                ctx.fillStyle = '#ffffff';
+                ctx.fill();
+                ctx.strokeStyle = color;
+                ctx.lineWidth = 1.5;
+                ctx.stroke();
+                ctx.fillStyle = color;
+            }
+            ctx.textBaseline = 'middle';
+            ctx.fillText(labelText, labelX + padding, labelY + boxHeight / 2);
+            ctx.restore();
         }
     }
     /**
@@ -8017,6 +8586,14 @@ class TableObject extends BaseEmbeddedObject {
                 columns: this._columns.map(col => ({ ...col })),
                 rows: this._rows.map(row => row.toData()),
                 rowLoops,
+                rowConditionals: this._rowConditionals.size > 0
+                    ? Array.from(this._rowConditionals.values()).map(c => ({
+                        id: c.id,
+                        predicate: c.predicate,
+                        startRowIndex: c.startRowIndex,
+                        endRowIndex: c.endRowIndex
+                    }))
+                    : undefined,
                 defaultCellPadding: this._defaultCellPadding,
                 defaultBorderColor: this._defaultBorderColor,
                 defaultBorderWidth: this._defaultBorderWidth,
@@ -8060,6 +8637,17 @@ class TableObject extends BaseEmbeddedObject {
                 });
             }
         }
+        // Load row conditionals if present
+        if (data.data.rowConditionals) {
+            for (const condData of data.data.rowConditionals) {
+                table._rowConditionals.set(condData.id, {
+                    id: condData.id,
+                    predicate: condData.predicate,
+                    startRowIndex: condData.startRowIndex,
+                    endRowIndex: condData.endRowIndex
+                });
+            }
+        }
         table.updateCoveredCells();
         return table;
     }
@@ -8089,6 +8677,18 @@ class TableObject extends BaseEmbeddedObject {
                 });
             }
         }
+        // Restore row conditionals if any
+        this._rowConditionals.clear();
+        if (data.data.rowConditionals) {
+            for (const condData of data.data.rowConditionals) {
+                this._rowConditionals.set(condData.id, {
+                    id: condData.id,
+                    predicate: condData.predicate,
+                    startRowIndex: condData.startRowIndex,
+                    endRowIndex: condData.endRowIndex
+                });
+            }
+        }
         // Restore defaults
         if (data.data.defaultCellPadding !== undefined) {
             this._defaultCellPadding = data.data.defaultCellPadding;
@@ -8108,6 +8708,13 @@ class TableObject extends BaseEmbeddedObject {
         return TableObject.fromData(this.toData());
     }
 }
+/**
+ * Render row loop indicators (colored stripe on left side of loop rows).
+ */
+TableObject.LOOP_COLOR = '#6B46C1';
+TableObject.LOOP_LABEL_PADDING = 4;
+TableObject.LOOP_LABEL_RADIUS = 4;
+TableObject.COND_COLOR = '#D97706'; // Orange
 
 /**
  * TableResizeHandler - Handles column and row resize operations for tables.
@@ -8493,6 +9100,7 @@ class FlowingTextContent extends EventEmitter {
         this.substitutionFields = new SubstitutionFieldManager();
         this.embeddedObjects = new EmbeddedObjectManager();
         this.repeatingSections = new RepeatingSectionManager();
+        this.conditionalSections = new ConditionalSectionManager();
         this.hyperlinks = new HyperlinkManager();
         this.layout = new TextLayout();
         this.setupEventForwarding();
@@ -8530,6 +9138,7 @@ class FlowingTextContent extends EventEmitter {
             this.substitutionFields.handleDeletion(data.start, data.length);
             this.embeddedObjects.handleDeletion(data.start, data.length);
             this.repeatingSections.handleDeletion(data.start, data.length);
+            this.conditionalSections.handleDeletion(data.start, data.length);
             this.paragraphFormatting.handleDeletion(data.start, data.length);
             this.hyperlinks.handleDeletion(data.start, data.length);
             this.emit('content-changed', {
@@ -8581,6 +9190,16 @@ class FlowingTextContent extends EventEmitter {
         this.repeatingSections.on('section-updated', (data) => {
             this.emit('repeating-section-updated', data);
         });
+        // Forward conditional section events
+        this.conditionalSections.on('section-added', (data) => {
+            this.emit('conditional-section-added', data);
+        });
+        this.conditionalSections.on('section-removed', (data) => {
+            this.emit('conditional-section-removed', data);
+        });
+        this.conditionalSections.on('section-updated', (data) => {
+            this.emit('conditional-section-updated', data);
+        });
         // Forward hyperlink events
         this.hyperlinks.on('hyperlink-added', (data) => {
             this.emit('hyperlink-added', data);
@@ -8638,6 +9257,7 @@ class FlowingTextContent extends EventEmitter {
         this.substitutionFields.shiftFields(insertAt, text.length);
         this.embeddedObjects.shiftObjects(insertAt, text.length);
         this.repeatingSections.shiftSections(insertAt, text.length);
+        this.conditionalSections.shiftSections(insertAt, text.length);
         this.hyperlinks.shiftHyperlinks(insertAt, text.length);
         // Insert the text first so we have the full content
         this.textState.insertText(text, insertAt);
@@ -8710,6 +9330,7 @@ class FlowingTextContent extends EventEmitter {
         this.substitutionFields.shiftFields(position, text.length);
         this.embeddedObjects.shiftObjects(position, text.length);
         this.repeatingSections.shiftSections(position, text.length);
+        this.conditionalSections.shiftSections(position, text.length);
         this.hyperlinks.shiftHyperlinks(position, text.length);
         // Insert the text
         const content = this.textState.getText();
@@ -8727,6 +9348,7 @@ class FlowingTextContent extends EventEmitter {
         this.substitutionFields.handleDeletion(position, length);
         this.embeddedObjects.handleDeletion(position, length);
         this.repeatingSections.handleDeletion(position, length);
+        this.conditionalSections.handleDeletion(position, length);
         this.paragraphFormatting.handleDeletion(position, length);
         this.hyperlinks.handleDeletion(position, length);
         // Delete the text
@@ -9116,6 +9738,7 @@ class FlowingTextContent extends EventEmitter {
         this.substitutionFields.shiftFields(insertAt, 1);
         this.embeddedObjects.shiftObjects(insertAt, 1);
         this.repeatingSections.shiftSections(insertAt, 1);
+        this.conditionalSections.shiftSections(insertAt, 1);
         // Insert the placeholder character
         this.textState.insertText(OBJECT_REPLACEMENT_CHAR, insertAt);
         // Shift paragraph formatting with the complete content
@@ -9363,6 +9986,7 @@ class FlowingTextContent extends EventEmitter {
         this.substitutionFields.clear();
         this.embeddedObjects.clear();
         this.repeatingSections.clear();
+        this.conditionalSections.clear();
         this.hyperlinks.clear();
     }
     // ============================================
@@ -9719,44 +10343,60 @@ class FlowingTextContent extends EventEmitter {
     // List Operations
     // ============================================
     /**
-     * Toggle bullet list for the current paragraph (or selection).
+     * Get paragraph starts affected by the current selection or cursor position.
      */
-    toggleBulletList() {
+    getAffectedParagraphStarts() {
+        const content = this.textState.getText();
+        const selection = this.getSelection();
+        if (selection && selection.start !== selection.end) {
+            return this.paragraphFormatting.getParagraphBoundariesInRange(selection.start, selection.end, content);
+        }
         const cursorPos = this.textState.getCursorPosition();
+        return [this.paragraphFormatting.getParagraphStart(cursorPos, content)];
+    }
+    /**
+     * Toggle bullet list for the current paragraph(s) in selection.
+     */
+    toggleBulletList() {
         const content = this.textState.getText();
-        const paragraphStart = this.paragraphFormatting.getParagraphStart(cursorPos, content);
-        this.paragraphFormatting.toggleList(paragraphStart, 'bullet');
-        this.emit('content-changed', { text: content, cursorPosition: cursorPos });
+        const paragraphStarts = this.getAffectedParagraphStarts();
+        for (const start of paragraphStarts) {
+            this.paragraphFormatting.toggleList(start, 'bullet');
+        }
+        this.emit('content-changed', { text: content, cursorPosition: this.textState.getCursorPosition() });
     }
     /**
-     * Toggle numbered list for the current paragraph (or selection).
+     * Toggle numbered list for the current paragraph(s) in selection.
      */
     toggleNumberedList() {
-        const cursorPos = this.textState.getCursorPosition();
         const content = this.textState.getText();
-        const paragraphStart = this.paragraphFormatting.getParagraphStart(cursorPos, content);
-        this.paragraphFormatting.toggleList(paragraphStart, 'number');
-        this.emit('content-changed', { text: content, cursorPosition: cursorPos });
+        const paragraphStarts = this.getAffectedParagraphStarts();
+        for (const start of paragraphStarts) {
+            this.paragraphFormatting.toggleList(start, 'number');
+        }
+        this.emit('content-changed', { text: content, cursorPosition: this.textState.getCursorPosition() });
     }
     /**
-     * Indent the current paragraph (increase list nesting level).
+     * Indent the current paragraph(s) in selection.
      */
     indentParagraph() {
-        const cursorPos = this.textState.getCursorPosition();
         const content = this.textState.getText();
-        const paragraphStart = this.paragraphFormatting.getParagraphStart(cursorPos, content);
-        this.paragraphFormatting.indentParagraph(paragraphStart);
-        this.emit('content-changed', { text: content, cursorPosition: cursorPos });
+        const paragraphStarts = this.getAffectedParagraphStarts();
+        for (const start of paragraphStarts) {
+            this.paragraphFormatting.indentParagraph(start);
+        }
+        this.emit('content-changed', { text: content, cursorPosition: this.textState.getCursorPosition() });
     }
     /**
-     * Outdent the current paragraph (decrease list nesting level).
+     * Outdent the current paragraph(s) in selection.
      */
     outdentParagraph() {
-        const cursorPos = this.textState.getCursorPosition();
         const content = this.textState.getText();
-        const paragraphStart = this.paragraphFormatting.getParagraphStart(cursorPos, content);
-        this.paragraphFormatting.outdentParagraph(paragraphStart);
-        this.emit('content-changed', { text: content, cursorPosition: cursorPos });
+        const paragraphStarts = this.getAffectedParagraphStarts();
+        for (const start of paragraphStarts) {
+            this.paragraphFormatting.outdentParagraph(start);
+        }
+        this.emit('content-changed', { text: content, cursorPosition: this.textState.getCursorPosition() });
     }
     /**
      * Get the list formatting for the current paragraph.
@@ -9918,6 +10558,79 @@ class FlowingTextContent extends EventEmitter {
         return result;
     }
     // ============================================
+    // Conditional Section Operations
+    // ============================================
+    /**
+     * Get the conditional section manager.
+     */
+    getConditionalSectionManager() {
+        return this.conditionalSections;
+    }
+    /**
+     * Get all conditional sections.
+     */
+    getConditionalSections() {
+        return this.conditionalSections.getSections();
+    }
+    /**
+     * Create a conditional section.
+     * @param startIndex Text index at paragraph start (must be at a paragraph boundary)
+     * @param endIndex Text index at closing paragraph start (must be at a paragraph boundary)
+     * @param predicate The predicate expression to evaluate
+     * @returns The created section, or null if boundaries are invalid
+     */
+    createConditionalSection(startIndex, endIndex, predicate) {
+        const content = this.textState.getText();
+        if (!this.conditionalSections.validateBoundaries(startIndex, endIndex, content)) {
+            return null;
+        }
+        const section = this.conditionalSections.create(startIndex, endIndex, predicate);
+        this.emit('content-changed', {
+            text: content,
+            cursorPosition: this.textState.getCursorPosition()
+        });
+        return section;
+    }
+    /**
+     * Remove a conditional section by ID.
+     */
+    removeConditionalSection(id) {
+        const section = this.conditionalSections.remove(id);
+        if (section) {
+            this.emit('content-changed', {
+                text: this.textState.getText(),
+                cursorPosition: this.textState.getCursorPosition()
+            });
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Get a conditional section by ID.
+     */
+    getConditionalSection(id) {
+        return this.conditionalSections.getSection(id);
+    }
+    /**
+     * Find a conditional section that has a boundary at the given text index.
+     */
+    getConditionalSectionAtBoundary(textIndex) {
+        return this.conditionalSections.getSectionAtBoundary(textIndex);
+    }
+    /**
+     * Update a conditional section's predicate.
+     */
+    updateConditionalSectionPredicate(id, predicate) {
+        const result = this.conditionalSections.updatePredicate(id, predicate);
+        if (result) {
+            this.emit('content-changed', {
+                text: this.textState.getText(),
+                cursorPosition: this.textState.getCursorPosition()
+            });
+        }
+        return result;
+    }
+    // ============================================
     // Serialization
     // ============================================
     /**
@@ -9971,6 +10684,8 @@ class FlowingTextContent extends EventEmitter {
         }));
         // Serialize repeating sections
         const repeatingSectionsData = this.repeatingSections.toJSON();
+        // Serialize conditional sections
+        const conditionalSectionsData = this.conditionalSections.toJSON();
         // Serialize embedded objects
         const embeddedObjects = [];
         const objectsMap = this.embeddedObjects.getObjects();
@@ -9988,6 +10703,7 @@ class FlowingTextContent extends EventEmitter {
             paragraphFormatting: paragraphFormatting.length > 0 ? paragraphFormatting : undefined,
             substitutionFields: substitutionFieldsData.length > 0 ? substitutionFieldsData : undefined,
             repeatingSections: repeatingSectionsData.length > 0 ? repeatingSectionsData : undefined,
+            conditionalSections: conditionalSectionsData.length > 0 ? conditionalSectionsData : undefined,
             embeddedObjects: embeddedObjects.length > 0 ? embeddedObjects : undefined,
             hyperlinks: hyperlinksData.length > 0 ? hyperlinksData : undefined
         };
@@ -10026,6 +10742,10 @@ class FlowingTextContent extends EventEmitter {
         if (data.repeatingSections && data.repeatingSections.length > 0) {
             content.getRepeatingSectionManager().fromJSON(data.repeatingSections);
         }
+        // Restore conditional sections
+        if (data.conditionalSections && data.conditionalSections.length > 0) {
+            content.getConditionalSectionManager().fromJSON(data.conditionalSections);
+        }
         // Restore embedded objects using factory
         if (data.embeddedObjects && data.embeddedObjects.length > 0) {
             for (const ref of data.embeddedObjects) {
@@ -10080,6 +10800,10 @@ class FlowingTextContent extends EventEmitter {
         if (data.repeatingSections && data.repeatingSections.length > 0) {
             this.repeatingSections.fromJSON(data.repeatingSections);
         }
+        // Restore conditional sections
+        if (data.conditionalSections && data.conditionalSections.length > 0) {
+            this.conditionalSections.fromJSON(data.conditionalSections);
+        }
         // Restore embedded objects
         if (data.embeddedObjects && data.embeddedObjects.length > 0) {
             for (const ref of data.embeddedObjects) {
@@ -10099,6 +10823,349 @@ class FlowingTextContent extends EventEmitter {
     }
 }
 
+/**
+ * Simple recursive-descent predicate evaluator.
+ * Supports:
+ * - Truthiness: `isActive`
+ * - Negation: `!isActive`
+ * - Comparisons: ==, !=, >, <, >=, <=
+ * - Logical: &&, ||, parentheses
+ * - Literals: "approved", 100, true/false
+ * - Dot notation: customer.isVIP
+ */
+function tokenize(input) {
+    const tokens = [];
+    let i = 0;
+    while (i < input.length) {
+        const ch = input[i];
+        // Skip whitespace
+        if (ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r') {
+            i++;
+            continue;
+        }
+        // Parentheses
+        if (ch === '(' || ch === ')') {
+            tokens.push({ type: 'paren', value: ch });
+            i++;
+            continue;
+        }
+        // Two-character operators
+        if (i + 1 < input.length) {
+            const two = input[i] + input[i + 1];
+            if (two === '==' || two === '!=' || two === '>=' || two === '<=' || two === '&&' || two === '||' || two === '=~' || two === '!~') {
+                tokens.push({ type: 'operator', value: two });
+                i += 2;
+                continue;
+            }
+        }
+        // Single-character operators
+        if (ch === '>' || ch === '<') {
+            tokens.push({ type: 'operator', value: ch });
+            i++;
+            continue;
+        }
+        // Not operator
+        if (ch === '!') {
+            tokens.push({ type: 'not' });
+            i++;
+            continue;
+        }
+        // String literals
+        if (ch === '"' || ch === "'") {
+            const quote = ch;
+            i++;
+            let str = '';
+            while (i < input.length && input[i] !== quote) {
+                if (input[i] === '\\' && i + 1 < input.length) {
+                    i++;
+                    str += input[i];
+                }
+                else {
+                    str += input[i];
+                }
+                i++;
+            }
+            i++; // skip closing quote
+            tokens.push({ type: 'string', value: str });
+            continue;
+        }
+        // Numbers
+        if (ch >= '0' && ch <= '9') {
+            let num = '';
+            while (i < input.length && ((input[i] >= '0' && input[i] <= '9') || input[i] === '.')) {
+                num += input[i];
+                i++;
+            }
+            tokens.push({ type: 'number', value: parseFloat(num) });
+            continue;
+        }
+        // Identifiers (including dot notation: customer.isVIP)
+        if ((ch >= 'a' && ch <= 'z') || (ch >= 'A' && ch <= 'Z') || ch === '_' || ch === '$') {
+            let ident = '';
+            while (i < input.length &&
+                ((input[i] >= 'a' && input[i] <= 'z') ||
+                    (input[i] >= 'A' && input[i] <= 'Z') ||
+                    (input[i] >= '0' && input[i] <= '9') ||
+                    input[i] === '_' || input[i] === '$' || input[i] === '.')) {
+                ident += input[i];
+                i++;
+            }
+            if (ident === 'true') {
+                tokens.push({ type: 'boolean', value: true });
+            }
+            else if (ident === 'false') {
+                tokens.push({ type: 'boolean', value: false });
+            }
+            else {
+                tokens.push({ type: 'identifier', value: ident });
+            }
+            continue;
+        }
+        // Unknown character — skip
+        i++;
+    }
+    tokens.push({ type: 'eof' });
+    return tokens;
+}
+class Parser {
+    constructor(tokens, data) {
+        this.pos = 0;
+        this.tokens = tokens;
+        this.data = data;
+    }
+    peek() {
+        return this.tokens[this.pos];
+    }
+    advance() {
+        const token = this.tokens[this.pos];
+        this.pos++;
+        return token;
+    }
+    /**
+     * Parse the full expression.
+     * Grammar:
+     *   expr     → or_expr
+     *   or_expr  → and_expr ('||' and_expr)*
+     *   and_expr → unary (('==' | '!=' | '>' | '<' | '>=' | '<=') unary)?
+     *              | unary ('&&' unary_or_comparison)*
+     *   unary    → '!' unary | primary
+     *   primary  → '(' expr ')' | literal | identifier
+     */
+    parse() {
+        const result = this.parseOr();
+        return result;
+    }
+    parseOr() {
+        let left = this.parseAnd();
+        while (this.peek().type === 'operator' && this.peek().value === '||') {
+            this.advance();
+            const right = this.parseAnd();
+            left = this.isTruthy(left) || this.isTruthy(right);
+        }
+        return left;
+    }
+    parseAnd() {
+        let left = this.parseComparison();
+        while (this.peek().type === 'operator' && this.peek().value === '&&') {
+            this.advance();
+            const right = this.parseComparison();
+            left = this.isTruthy(left) && this.isTruthy(right);
+        }
+        return left;
+    }
+    parseComparison() {
+        const left = this.parseUnary();
+        const token = this.peek();
+        if (token.type === 'operator') {
+            const op = token.value;
+            if (op === '==' || op === '!=' || op === '>' || op === '<' || op === '>=' || op === '<=' || op === '=~' || op === '!~') {
+                this.advance();
+                const right = this.parseUnary();
+                return this.compare(left, op, right);
+            }
+        }
+        return left;
+    }
+    parseUnary() {
+        if (this.peek().type === 'not') {
+            this.advance();
+            const value = this.parseUnary();
+            return !this.isTruthy(value);
+        }
+        return this.parsePrimary();
+    }
+    parsePrimary() {
+        const token = this.peek();
+        if (token.type === 'paren' && token.value === '(') {
+            this.advance();
+            const value = this.parseOr();
+            // Consume closing paren
+            if (this.peek().type === 'paren' && this.peek().value === ')') {
+                this.advance();
+            }
+            return value;
+        }
+        if (token.type === 'string') {
+            this.advance();
+            return token.value;
+        }
+        if (token.type === 'number') {
+            this.advance();
+            return token.value;
+        }
+        if (token.type === 'boolean') {
+            this.advance();
+            return token.value;
+        }
+        if (token.type === 'identifier') {
+            this.advance();
+            return this.resolveIdentifier(token.value);
+        }
+        // EOF or unexpected — return undefined
+        this.advance();
+        return undefined;
+    }
+    resolveIdentifier(path) {
+        const parts = path.split('.');
+        let current = this.data;
+        for (const part of parts) {
+            if (current === null || current === undefined) {
+                return undefined;
+            }
+            if (typeof current === 'object') {
+                current = current[part];
+            }
+            else {
+                return undefined;
+            }
+        }
+        return current;
+    }
+    compare(left, op, right) {
+        // Regex match: left is coerced to string, right is the pattern string
+        if (op === '=~' || op === '!~') {
+            const str = this.toString(left);
+            const pattern = this.toString(right);
+            try {
+                const regex = new RegExp(pattern);
+                const matches = regex.test(str);
+                return op === '=~' ? matches : !matches;
+            }
+            catch {
+                // Invalid regex pattern — treat as no match
+                return op === '!~';
+            }
+        }
+        // For ordering operators, coerce both sides to numbers if either side is numeric
+        if (op === '>' || op === '<' || op === '>=' || op === '<=') {
+            const l = this.toNumber(left);
+            const r = this.toNumber(right);
+            switch (op) {
+                case '>': return l > r;
+                case '<': return l < r;
+                case '>=': return l >= r;
+                case '<=': return l <= r;
+            }
+        }
+        // For equality, coerce to numbers if both sides look numeric
+        const ln = this.toNumberIfNumeric(left);
+        const rn = this.toNumberIfNumeric(right);
+        switch (op) {
+            case '==': return ln == rn; // eslint-disable-line eqeqeq
+            case '!=': return ln != rn; // eslint-disable-line eqeqeq
+            default: return false;
+        }
+    }
+    /**
+     * Convert a value to a string for regex matching.
+     */
+    toString(value) {
+        if (value === null || value === undefined)
+            return '';
+        if (typeof value === 'string')
+            return value;
+        return String(value);
+    }
+    /**
+     * Convert a value to a number. Strings that look like numbers are parsed.
+     * Non-numeric values become NaN.
+     */
+    toNumber(value) {
+        if (typeof value === 'number')
+            return value;
+        if (typeof value === 'string') {
+            const n = Number(value);
+            return isNaN(n) ? NaN : n;
+        }
+        if (typeof value === 'boolean')
+            return value ? 1 : 0;
+        return NaN;
+    }
+    /**
+     * If a value is a string that looks like a number, convert it.
+     * Otherwise return the value as-is. Used for == / != so that
+     * "5" == 5 is true but "hello" == "hello" still works.
+     */
+    toNumberIfNumeric(value) {
+        if (typeof value === 'string' && value.length > 0) {
+            const n = Number(value);
+            if (!isNaN(n))
+                return n;
+        }
+        return value;
+    }
+    isTruthy(value) {
+        if (value === null || value === undefined)
+            return false;
+        if (typeof value === 'boolean')
+            return value;
+        if (typeof value === 'number')
+            return value !== 0;
+        if (typeof value === 'string')
+            return value.length > 0;
+        if (Array.isArray(value))
+            return value.length > 0;
+        return true;
+    }
+}
+/**
+ * Static predicate evaluator for conditional sections.
+ */
+class PredicateEvaluator {
+    /**
+     * Evaluate a predicate expression against data.
+     * @param predicate The predicate string (e.g., "isActive", "count > 0")
+     * @param data The data context to evaluate against
+     * @returns true if the predicate is truthy, false otherwise
+     */
+    static evaluate(predicate, data) {
+        if (!predicate || predicate.trim().length === 0) {
+            return false;
+        }
+        try {
+            const tokens = tokenize(predicate.trim());
+            const parser = new Parser(tokens, data);
+            const result = parser.parse();
+            // Convert result to boolean
+            if (result === null || result === undefined)
+                return false;
+            if (typeof result === 'boolean')
+                return result;
+            if (typeof result === 'number')
+                return result !== 0;
+            if (typeof result === 'string')
+                return result.length > 0;
+            if (Array.isArray(result))
+                return result.length > 0;
+            return true;
+        }
+        catch {
+            // If evaluation fails, treat as false
+            return false;
+        }
+    }
+}
+
 /**
  * Abstract base class providing common functionality for regions.
  */
@@ -11134,6 +12201,11 @@ const LOOP_INDICATOR_COLOR = '#6B46C1'; // Purple
 const LOOP_LABEL_PADDING = 4;
 const LOOP_LABEL_RADIUS = 4;
 const LOOP_LINE_DASH = [4, 4];
+// Conditional section indicator styling
+const COND_INDICATOR_COLOR = '#D97706'; // Orange
+const COND_LABEL_PADDING = 4;
+const COND_LABEL_RADIUS = 4;
+const COND_LINE_DASH = [4, 4];
 // Hyperlink styling
 const DEFAULT_HYPERLINK_COLOR = '#0066CC'; // Blue
 class FlowingTextRenderer extends EventEmitter {
@@ -11391,8 +12463,6 @@ class FlowingTextRenderer extends EventEmitter {
         if (pageIndex === 0) {
             // Clear table continuations when starting a new render cycle
             this.clearTableContinuations();
-            // Clear content hit targets - they will be re-registered during render
-            this._hitTestManager.clearCategory('content');
             // This is the first page, flow all text
             const flowedPages = this.flowTextForPage(page, ctx, contentBounds);
             this.flowedPages.set(page.id, flowedPages);
@@ -11692,6 +12762,8 @@ class FlowingTextRenderer extends EventEmitter {
         const pageCount = firstPage ? (this.flowedPages.get(firstPage.id)?.length || 1) : 1;
         // Get hyperlinks for rendering
         const hyperlinks = flowingContent.getAllHyperlinks();
+        // Track relative objects to render after all lines (so they appear on top)
+        const relativeObjects = [];
         // Render each line
         let y = bounds.y;
         for (let lineIndex = 0; lineIndex < flowedLines.length; lineIndex++) {
@@ -11704,6 +12776,18 @@ class FlowingTextRenderer extends EventEmitter {
             if (clipToBounds && y > bounds.y + bounds.height) {
                 break;
             }
+            // Collect relative objects from this line
+            if (line.embeddedObjects) {
+                for (const embeddedObj of line.embeddedObjects) {
+                    if (embeddedObj.isAnchor && embeddedObj.object.position === 'relative') {
+                        relativeObjects.push({
+                            object: embeddedObj.object,
+                            anchorX: bounds.x,
+                            anchorY: y
+                        });
+                    }
+                }
+            }
             this.renderFlowedLine(line, ctx, { x: bounds.x, y }, maxWidth, pageIndex, cursorTextIndex, pageCount, hyperlinks);
             y += line.height;
         }
@@ -11714,6 +12798,10 @@ class FlowingTextRenderer extends EventEmitter {
         if (clipToBounds) {
             ctx.restore();
         }
+        // Render relative objects on top of text (outside clip region)
+        if (relativeObjects.length > 0) {
+            this.renderRelativeObjects(relativeObjects, ctx, pageIndex);
+        }
     }
     /**
      * Render selection highlight for a region.
@@ -13773,11 +14861,283 @@ class FlowingTextRenderer extends EventEmitter {
             verticalEndY = endInfo.y;
         }
         else if (endsAfterPage) {
-            // Section continues to next page, end at bottom of content area
+            // Section continues to next page, end at bottom of content area
+            verticalEndY = contentBounds.y + contentBounds.height;
+        }
+        else {
+            verticalEndY = verticalStartY; // No vertical line if neither start nor end
+        }
+        if (verticalEndY > verticalStartY) {
+            ctx.beginPath();
+            ctx.moveTo(connectorX, verticalStartY);
+            ctx.lineTo(connectorX, verticalEndY);
+            ctx.stroke();
+        }
+        // Draw "Loop" label last so it's in front of all lines
+        if (hasStart) {
+            const startY = startInfo.y;
+            this.drawLoopLabel(ctx, labelX, startY - 10, 'Loop', isSelected);
+        }
+        // Update section's visual state
+        section.visualState = {
+            startPageIndex: hasStart ? pageIndex : -1,
+            startY: hasStart ? startInfo.y : 0,
+            endPageIndex: hasEnd ? pageIndex : -1,
+            endY: hasEnd ? endInfo.y : 0,
+            spansMultiplePages: !hasStart || !hasEnd
+        };
+        ctx.restore();
+    }
+    /**
+     * Draw the "Loop" label in a rounded rectangle.
+     * When not selected, draws an outlined rectangle.
+     * When selected, draws a filled rectangle.
+     */
+    drawLoopLabel(ctx, x, y, text, isSelected = false) {
+        ctx.save();
+        ctx.font = '10px Arial';
+        const metrics = ctx.measureText(text);
+        const textWidth = metrics.width;
+        const textHeight = 10;
+        const boxWidth = textWidth + LOOP_LABEL_PADDING * 2;
+        const boxHeight = textHeight + LOOP_LABEL_PADDING * 2;
+        ctx.beginPath();
+        this.roundRect(ctx, x, y, boxWidth, boxHeight, LOOP_LABEL_RADIUS);
+        if (isSelected) {
+            // Selected: filled background with white text
+            ctx.fillStyle = LOOP_INDICATOR_COLOR;
+            ctx.fill();
+            ctx.fillStyle = '#ffffff';
+        }
+        else {
+            // Not selected: white background, outlined with colored text
+            ctx.fillStyle = '#ffffff';
+            ctx.fill();
+            ctx.strokeStyle = LOOP_INDICATOR_COLOR;
+            ctx.lineWidth = 1.5;
+            ctx.stroke();
+            ctx.fillStyle = LOOP_INDICATOR_COLOR;
+        }
+        // Draw text
+        ctx.textBaseline = 'middle';
+        ctx.fillText(text, x + LOOP_LABEL_PADDING, y + boxHeight / 2);
+        ctx.restore();
+    }
+    /**
+     * Draw a rounded rectangle path.
+     */
+    roundRect(ctx, x, y, width, height, radius) {
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + width - radius, y);
+        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+        ctx.lineTo(x + width, y + height - radius);
+        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+        ctx.lineTo(x + radius, y + height);
+        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+        ctx.lineTo(x, y + radius);
+        ctx.quadraticCurveTo(x, y, x + radius, y);
+        ctx.closePath();
+    }
+    /**
+     * Find the Y position for a text index on a flowed page.
+     * Returns the Y position at the TOP of the line containing the text index.
+     */
+    findLineYForTextIndex(flowedPage, textIndex, contentBounds) {
+        let y = contentBounds.y;
+        for (let i = 0; i < flowedPage.lines.length; i++) {
+            const line = flowedPage.lines[i];
+            // Check if this line contains the text index
+            if (textIndex >= line.startIndex && textIndex <= line.endIndex) {
+                return { y, lineIndex: i };
+            }
+            // Check if text index is exactly at the start of this line
+            // (for section boundaries that are at paragraph starts)
+            if (textIndex === line.startIndex) {
+                return { y, lineIndex: i };
+            }
+            y += line.height;
+        }
+        // Check if text index is just past the last line (end of content)
+        if (flowedPage.lines.length > 0) {
+            const lastLine = flowedPage.lines[flowedPage.lines.length - 1];
+            if (textIndex === lastLine.endIndex + 1) {
+                return { y, lineIndex: flowedPage.lines.length - 1 };
+            }
+        }
+        return null;
+    }
+    /**
+     * Check if a section spans across a flowed page (starts before and ends after).
+     */
+    sectionSpansPage(section, flowedPage) {
+        if (flowedPage.lines.length === 0)
+            return false;
+        const pageStart = flowedPage.startIndex;
+        const pageEnd = flowedPage.endIndex;
+        // Section spans this page if it started before and ends after
+        return section.startIndex < pageStart && section.endIndex > pageEnd;
+    }
+    /**
+     * Get a repeating section at a point (for click detection).
+     * Checks if the point is on the Loop label or vertical connector.
+     */
+    getRepeatingSectionAtPoint(point, sections, _pageIndex, pageBounds, contentBounds, flowedPage) {
+        const labelX = pageBounds.x + 5;
+        const labelWidth = 32;
+        const connectorX = labelX + labelWidth / 2;
+        const hitRadius = 10; // Pixels for click detection
+        for (const section of sections) {
+            const startInfo = this.findLineYForTextIndex(flowedPage, section.startIndex, contentBounds);
+            const endInfo = this.findLineYForTextIndex(flowedPage, section.endIndex, contentBounds);
+            const sectionSpansThisPage = this.sectionSpansPage(section, flowedPage);
+            if (!startInfo && !endInfo && !sectionSpansThisPage) {
+                continue;
+            }
+            // Check if click is on the Loop label
+            if (startInfo) {
+                const labelY = startInfo.y - 10;
+                const labelHeight = 18;
+                if (point.x >= labelX &&
+                    point.x <= labelX + labelWidth &&
+                    point.y >= labelY &&
+                    point.y <= labelY + labelHeight) {
+                    return section;
+                }
+            }
+            // Check if click is on the vertical connector line
+            let verticalStartY;
+            let verticalEndY;
+            if (startInfo) {
+                verticalStartY = startInfo.y;
+            }
+            else {
+                verticalStartY = contentBounds.y;
+            }
+            if (endInfo) {
+                verticalEndY = endInfo.y;
+            }
+            else if (sectionSpansThisPage) {
+                verticalEndY = contentBounds.y + flowedPage.height;
+            }
+            else {
+                continue;
+            }
+            if (Math.abs(point.x - connectorX) <= hitRadius &&
+                point.y >= verticalStartY &&
+                point.y <= verticalEndY) {
+                return section;
+            }
+        }
+        return null;
+    }
+    // ============================================
+    // Conditional Section Indicators
+    // ============================================
+    /**
+     * Render conditional section indicators for a page.
+     */
+    renderConditionalSectionIndicators(sections, pageIndex, ctx, contentBounds, flowedPage, pageBounds, selectedSectionId = null) {
+        for (const section of sections) {
+            this.renderConditionalIndicator(section, pageIndex, ctx, contentBounds, flowedPage, pageBounds, section.id === selectedSectionId);
+        }
+    }
+    /**
+     * Render a single conditional section indicator.
+     */
+    renderConditionalIndicator(section, pageIndex, ctx, contentBounds, flowedPage, _pageBounds, isSelected = false) {
+        const startInfo = this.findLineYForTextIndex(flowedPage, section.startIndex, contentBounds);
+        const endInfo = this.findLineYForTextIndex(flowedPage, section.endIndex, contentBounds);
+        const sectionOverlapsPage = section.startIndex < flowedPage.endIndex &&
+            section.endIndex > flowedPage.startIndex;
+        if (!sectionOverlapsPage) {
+            return;
+        }
+        const hasStart = startInfo !== null;
+        const hasEnd = endInfo !== null;
+        const startsBeforePage = section.startIndex < flowedPage.startIndex;
+        const endsAfterPage = section.endIndex > flowedPage.endIndex;
+        ctx.save();
+        ctx.strokeStyle = COND_INDICATOR_COLOR;
+        ctx.fillStyle = COND_INDICATOR_COLOR;
+        ctx.lineWidth = 1;
+        // Position on the right side of the content area
+        const labelWidth = 22;
+        const labelX = contentBounds.x + contentBounds.width + 5;
+        const connectorX = labelX + labelWidth / 2;
+        // Draw start indicator lines
+        if (hasStart) {
+            const startY = startInfo.y;
+            ctx.setLineDash(COND_LINE_DASH);
+            ctx.beginPath();
+            ctx.moveTo(contentBounds.x, startY);
+            ctx.lineTo(contentBounds.x + contentBounds.width, startY);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.beginPath();
+            ctx.moveTo(contentBounds.x + contentBounds.width, startY);
+            ctx.lineTo(labelX, startY);
+            ctx.stroke();
+        }
+        else if (startsBeforePage) {
+            const topY = contentBounds.y;
+            ctx.setLineDash(COND_LINE_DASH);
+            ctx.beginPath();
+            ctx.moveTo(contentBounds.x, topY);
+            ctx.lineTo(contentBounds.x + contentBounds.width, topY);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.beginPath();
+            ctx.moveTo(connectorX, topY);
+            ctx.lineTo(contentBounds.x + contentBounds.width, topY);
+            ctx.stroke();
+        }
+        // Draw end indicator
+        if (hasEnd) {
+            const endY = endInfo.y;
+            ctx.setLineDash(COND_LINE_DASH);
+            ctx.beginPath();
+            ctx.moveTo(contentBounds.x, endY);
+            ctx.lineTo(contentBounds.x + contentBounds.width, endY);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.beginPath();
+            ctx.moveTo(connectorX, endY);
+            ctx.lineTo(contentBounds.x + contentBounds.width, endY);
+            ctx.stroke();
+        }
+        else if (endsAfterPage) {
+            const bottomY = contentBounds.y + contentBounds.height;
+            ctx.setLineDash(COND_LINE_DASH);
+            ctx.beginPath();
+            ctx.moveTo(contentBounds.x, bottomY);
+            ctx.lineTo(contentBounds.x + contentBounds.width, bottomY);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.beginPath();
+            ctx.moveTo(connectorX, bottomY);
+            ctx.lineTo(contentBounds.x + contentBounds.width, bottomY);
+            ctx.stroke();
+        }
+        // Draw vertical connector line
+        let verticalStartY;
+        let verticalEndY;
+        if (hasStart) {
+            verticalStartY = startInfo.y;
+        }
+        else if (startsBeforePage) {
+            verticalStartY = contentBounds.y;
+        }
+        else {
+            verticalStartY = contentBounds.y;
+        }
+        if (hasEnd) {
+            verticalEndY = endInfo.y;
+        }
+        else if (endsAfterPage) {
             verticalEndY = contentBounds.y + contentBounds.height;
         }
         else {
-            verticalEndY = verticalStartY; // No vertical line if neither start nor end
+            verticalEndY = verticalStartY;
         }
         if (verticalEndY > verticalStartY) {
             ctx.beginPath();
@@ -13785,12 +15145,12 @@ class FlowingTextRenderer extends EventEmitter {
             ctx.lineTo(connectorX, verticalEndY);
             ctx.stroke();
         }
-        // Draw "Loop" label last so it's in front of all lines
+        // Draw "If" label
         if (hasStart) {
             const startY = startInfo.y;
-            this.drawLoopLabel(ctx, labelX, startY - 10, 'Loop', isSelected);
+            this.drawCondLabel(ctx, labelX, startY - 10, 'If', isSelected);
         }
-        // Update section's visual state
+        // Update visual state
         section.visualState = {
             startPageIndex: hasStart ? pageIndex : -1,
             startY: hasStart ? startInfo.y : 0,
@@ -13801,111 +15161,52 @@ class FlowingTextRenderer extends EventEmitter {
         ctx.restore();
     }
     /**
-     * Draw the "Loop" label in a rounded rectangle.
-     * When not selected, draws an outlined rectangle.
-     * When selected, draws a filled rectangle.
+     * Draw the "If" label in a rounded rectangle.
      */
-    drawLoopLabel(ctx, x, y, text, isSelected = false) {
+    drawCondLabel(ctx, x, y, text, isSelected = false) {
         ctx.save();
         ctx.font = '10px Arial';
         const metrics = ctx.measureText(text);
         const textWidth = metrics.width;
         const textHeight = 10;
-        const boxWidth = textWidth + LOOP_LABEL_PADDING * 2;
-        const boxHeight = textHeight + LOOP_LABEL_PADDING * 2;
+        const boxWidth = textWidth + COND_LABEL_PADDING * 2;
+        const boxHeight = textHeight + COND_LABEL_PADDING * 2;
         ctx.beginPath();
-        this.roundRect(ctx, x, y, boxWidth, boxHeight, LOOP_LABEL_RADIUS);
+        this.roundRect(ctx, x, y, boxWidth, boxHeight, COND_LABEL_RADIUS);
         if (isSelected) {
-            // Selected: filled background with white text
-            ctx.fillStyle = LOOP_INDICATOR_COLOR;
+            ctx.fillStyle = COND_INDICATOR_COLOR;
             ctx.fill();
             ctx.fillStyle = '#ffffff';
         }
         else {
-            // Not selected: white background, outlined with colored text
             ctx.fillStyle = '#ffffff';
             ctx.fill();
-            ctx.strokeStyle = LOOP_INDICATOR_COLOR;
+            ctx.strokeStyle = COND_INDICATOR_COLOR;
             ctx.lineWidth = 1.5;
             ctx.stroke();
-            ctx.fillStyle = LOOP_INDICATOR_COLOR;
+            ctx.fillStyle = COND_INDICATOR_COLOR;
         }
-        // Draw text
         ctx.textBaseline = 'middle';
-        ctx.fillText(text, x + LOOP_LABEL_PADDING, y + boxHeight / 2);
+        ctx.fillText(text, x + COND_LABEL_PADDING, y + boxHeight / 2);
         ctx.restore();
     }
     /**
-     * Draw a rounded rectangle path.
-     */
-    roundRect(ctx, x, y, width, height, radius) {
-        ctx.moveTo(x + radius, y);
-        ctx.lineTo(x + width - radius, y);
-        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-        ctx.lineTo(x + width, y + height - radius);
-        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-        ctx.lineTo(x + radius, y + height);
-        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-        ctx.lineTo(x, y + radius);
-        ctx.quadraticCurveTo(x, y, x + radius, y);
-        ctx.closePath();
-    }
-    /**
-     * Find the Y position for a text index on a flowed page.
-     * Returns the Y position at the TOP of the line containing the text index.
-     */
-    findLineYForTextIndex(flowedPage, textIndex, contentBounds) {
-        let y = contentBounds.y;
-        for (let i = 0; i < flowedPage.lines.length; i++) {
-            const line = flowedPage.lines[i];
-            // Check if this line contains the text index
-            if (textIndex >= line.startIndex && textIndex <= line.endIndex) {
-                return { y, lineIndex: i };
-            }
-            // Check if text index is exactly at the start of this line
-            // (for section boundaries that are at paragraph starts)
-            if (textIndex === line.startIndex) {
-                return { y, lineIndex: i };
-            }
-            y += line.height;
-        }
-        // Check if text index is just past the last line (end of content)
-        if (flowedPage.lines.length > 0) {
-            const lastLine = flowedPage.lines[flowedPage.lines.length - 1];
-            if (textIndex === lastLine.endIndex + 1) {
-                return { y, lineIndex: flowedPage.lines.length - 1 };
-            }
-        }
-        return null;
-    }
-    /**
-     * Check if a section spans across a flowed page (starts before and ends after).
-     */
-    sectionSpansPage(section, flowedPage) {
-        if (flowedPage.lines.length === 0)
-            return false;
-        const pageStart = flowedPage.startIndex;
-        const pageEnd = flowedPage.endIndex;
-        // Section spans this page if it started before and ends after
-        return section.startIndex < pageStart && section.endIndex > pageEnd;
-    }
-    /**
-     * Get a repeating section at a point (for click detection).
-     * Checks if the point is on the Loop label or vertical connector.
+     * Get a conditional section at a point (for click detection).
      */
-    getRepeatingSectionAtPoint(point, sections, _pageIndex, pageBounds, contentBounds, flowedPage) {
-        const labelX = pageBounds.x + 5;
-        const labelWidth = 32;
+    getConditionalSectionAtPoint(point, sections, _pageIndex, _pageBounds, contentBounds, flowedPage) {
+        const labelWidth = 22;
+        const labelX = contentBounds.x + contentBounds.width + 5;
         const connectorX = labelX + labelWidth / 2;
-        const hitRadius = 10; // Pixels for click detection
+        const hitRadius = 10;
         for (const section of sections) {
             const startInfo = this.findLineYForTextIndex(flowedPage, section.startIndex, contentBounds);
             const endInfo = this.findLineYForTextIndex(flowedPage, section.endIndex, contentBounds);
-            const sectionSpansThisPage = this.sectionSpansPage(section, flowedPage);
+            const sectionSpansThisPage = section.startIndex < flowedPage.startIndex &&
+                section.endIndex > flowedPage.endIndex;
             if (!startInfo && !endInfo && !sectionSpansThisPage) {
                 continue;
             }
-            // Check if click is on the Loop label
+            // Check if click is on the "If" label
             if (startInfo) {
                 const labelY = startInfo.y - 10;
                 const labelHeight = 18;
@@ -13970,6 +15271,7 @@ class CanvasManager extends EventEmitter {
         this.isSelectingText = false;
         this.textSelectionStartPageId = null;
         this.selectedSectionId = null;
+        this.selectedConditionalSectionId = null;
         this._activeSection = 'body';
         this.lastClickTime = 0;
         this.lastClickPosition = null;
@@ -14109,6 +15411,11 @@ class CanvasManager extends EventEmitter {
             }
             // 2. CONTENT: Render all text and elements
             const pageIndex = this.document.pages.findIndex(p => p.id === page.id);
+            // Clear content hit targets before rendering all sections (header, body, footer)
+            // so that each section's hit targets are re-registered during render
+            if (pageIndex === 0) {
+                this.flowingTextRenderer.hitTestManager.clearCategory('content');
+            }
             // Render header content
             const headerRegion = this.regionManager.getHeaderRegion();
             this.flowingTextRenderer.renderHeaderText(page, ctx, this._activeSection === 'header', headerRegion ?? undefined, pageIndex);
@@ -14136,6 +15443,16 @@ class CanvasManager extends EventEmitter {
                     this.flowingTextRenderer.renderRepeatingSectionIndicators(sections, pageIndex, ctx, contentRect, flowedPages[pageIndex], pageBounds, this.selectedSectionId);
                 }
             }
+            // Render conditional section indicators (only in body)
+            const condSections = bodyFlowingContent?.getConditionalSections() ?? [];
+            if (condSections.length > 0) {
+                const flowedPages = this.flowingTextRenderer.getFlowedPagesForPage(this.document.pages[0].id);
+                if (flowedPages && flowedPages[pageIndex]) {
+                    const pageDimensions = page.getPageDimensions();
+                    const pageBounds = { x: 0, y: 0, width: pageDimensions.width, height: pageDimensions.height };
+                    this.flowingTextRenderer.renderConditionalSectionIndicators(condSections, pageIndex, ctx, contentRect, flowedPages[pageIndex], pageBounds, this.selectedConditionalSectionId);
+                }
+            }
             // Render all elements (without selection marks)
             this.renderPageElements(page, ctx);
             // 3. DISABLEMENT OVERLAYS: Draw overlays on inactive sections
@@ -14433,11 +15750,10 @@ class CanvasManager extends EventEmitter {
         const embeddedObjectHit = hitTestManager.queryByType(mouseDownPageIndex, point, 'embedded-object');
         if (embeddedObjectHit && embeddedObjectHit.data.type === 'embedded-object') {
             const object = embeddedObjectHit.data.object;
-            // Check which section the object belongs to - only interact if in active section
+            // If object is in a different section, switch to that section first
             const objectSection = this.getSectionForEmbeddedObject(object);
             if (objectSection && objectSection !== this._activeSection) {
-                // Object is in a different section - ignore the interaction
-                return;
+                this.setActiveSection(objectSection);
             }
             // For relative-positioned objects, prepare for potential drag
             // Don't start drag immediately - wait for threshold to allow double-click
@@ -14924,14 +16240,12 @@ class CanvasManager extends EventEmitter {
         const embeddedObjectHit = hitTestManager.queryByType(clickedPageIndex, point, 'embedded-object');
         if (embeddedObjectHit && embeddedObjectHit.data.type === 'embedded-object') {
             const clickedObject = embeddedObjectHit.data.object;
-            // Check which section the object belongs to
+            // If object is in a different section, switch to that section first
             const objectSection = this.getSectionForEmbeddedObject(clickedObject);
-            // Only allow selection if object is in the active section
             if (objectSection && objectSection !== this._activeSection) {
-                // Object is in a different section - ignore the click
-                return;
+                this.setActiveSection(objectSection);
             }
-            // Clicked on embedded object in the active section - clear text selection and select it
+            // Clicked on embedded object - clear text selection and select it
             const activeFlowingContent = this.getFlowingContentForActiveSection();
             if (activeFlowingContent) {
                 activeFlowingContent.clearSelection();
@@ -14968,6 +16282,64 @@ class CanvasManager extends EventEmitter {
                 }
             }
         }
+        // Check if we clicked on a conditional section indicator
+        if (bodyFlowingContent) {
+            const condSections = bodyFlowingContent.getConditionalSections();
+            if (condSections.length > 0 && page) {
+                const pageIndex = this.document.pages.findIndex(p => p.id === pageId);
+                const flowedPages = this.flowingTextRenderer.getFlowedPagesForPage(this.document.pages[0].id);
+                if (flowedPages && flowedPages[pageIndex]) {
+                    const contentBounds = page.getContentBounds();
+                    const contentRect = {
+                        x: contentBounds.position.x,
+                        y: contentBounds.position.y,
+                        width: contentBounds.size.width,
+                        height: contentBounds.size.height
+                    };
+                    const pageDimensions = page.getPageDimensions();
+                    const pageBounds = { x: 0, y: 0, width: pageDimensions.width, height: pageDimensions.height };
+                    const clickedCondSection = this.flowingTextRenderer.getConditionalSectionAtPoint(point, condSections, pageIndex, pageBounds, contentRect, flowedPages[pageIndex]);
+                    if (clickedCondSection) {
+                        this.clearSelection();
+                        this.selectedConditionalSectionId = clickedCondSection.id;
+                        this.render();
+                        this.emit('conditional-section-clicked', { section: clickedCondSection });
+                        return;
+                    }
+                }
+            }
+        }
+        // Check if we clicked on a table row loop label
+        const clickedPageIdx = this.document.pages.findIndex(p => p.id === pageId);
+        const bodyContent = this.document.bodyFlowingContent;
+        if (bodyContent) {
+            const embeddedObjects = bodyContent.getEmbeddedObjects();
+            for (const [, obj] of embeddedObjects.entries()) {
+                if (obj instanceof TableObject && obj.renderedPosition && obj.renderedPageIndex === clickedPageIdx) {
+                    // Convert to table-local coordinates
+                    const localPoint = {
+                        x: point.x - obj.renderedPosition.x,
+                        y: point.y - obj.renderedPosition.y
+                    };
+                    const clickedLoop = obj.getRowLoopAtPoint(localPoint);
+                    if (clickedLoop) {
+                        // Select this loop
+                        obj.selectRowLoop(clickedLoop.id);
+                        this.render();
+                        this.emit('table-row-loop-clicked', { table: obj, loop: clickedLoop });
+                        return;
+                    }
+                    // Check for row conditional click
+                    const clickedCond = obj.getRowConditionalAtPoint(localPoint);
+                    if (clickedCond) {
+                        obj.selectRowConditional(clickedCond.id);
+                        this.render();
+                        this.emit('table-row-conditional-clicked', { table: obj, conditional: clickedCond });
+                        return;
+                    }
+                }
+            }
+        }
         // If no regular element was clicked, try flowing text using unified region click handler
         const ctx = this.contexts.get(pageId);
         const pageIndex = this.document.pages.findIndex(p => p.id === pageId);
@@ -15177,26 +16549,21 @@ class CanvasManager extends EventEmitter {
         const embeddedObjectHit = hitTestManager.queryByType(pageIndex, point, 'embedded-object');
         if (embeddedObjectHit && embeddedObjectHit.data.type === 'embedded-object') {
             const object = embeddedObjectHit.data.object;
-            // Only show interactive cursors for objects in the active section
-            const objectSection = this.getSectionForEmbeddedObject(object);
-            if (objectSection && objectSection !== this._activeSection) ;
-            else {
-                if (object.position === 'relative') {
-                    canvas.style.cursor = 'move';
-                    return;
-                }
-                // Show text cursor for objects in edit mode, arrow otherwise
-                if (object instanceof TextBoxObject && this.editingTextBox === object) {
-                    canvas.style.cursor = CanvasManager.TEXT_CURSOR;
-                }
-                else if (object instanceof TableObject && this._focusedControl === object) {
-                    canvas.style.cursor = CanvasManager.TEXT_CURSOR;
-                }
-                else {
-                    canvas.style.cursor = 'default';
-                }
+            if (object.position === 'relative') {
+                canvas.style.cursor = 'move';
                 return;
             }
+            // Show text cursor for objects in edit mode, arrow otherwise
+            if (object instanceof TextBoxObject && this.editingTextBox === object) {
+                canvas.style.cursor = CanvasManager.TEXT_CURSOR;
+            }
+            else if (object instanceof TableObject && this._focusedControl === object) {
+                canvas.style.cursor = CanvasManager.TEXT_CURSOR;
+            }
+            else {
+                canvas.style.cursor = 'default';
+            }
+            return;
         }
         // Check for table cells (show text cursor)
         const tableCellHit = hitTestManager.queryByType(pageIndex, point, 'table-cell');
@@ -15386,6 +16753,7 @@ class CanvasManager extends EventEmitter {
         });
         this.selectedElements.clear();
         this.selectedSectionId = null;
+        this.selectedConditionalSectionId = null;
         Logger.log('[pc-editor:CanvasManager] About to render after clearing selection...');
         this.render();
         this.updateResizeHandleHitTargets();
@@ -16468,8 +17836,10 @@ function drawLine(page, x1, y1, x2, y2, color, thickness, pageHeight) {
  * - Repeating section indicators, loop markers
  */
 class PDFGenerator {
-    constructor() {
+    constructor(fontManager) {
         this.fontCache = new Map();
+        this.customFontCache = new Map();
+        this.fontManager = fontManager;
     }
     /**
      * Generate a PDF from the document.
@@ -16480,9 +17850,13 @@ class PDFGenerator {
      */
     async generate(document, flowedContent, _options) {
         const pdfDoc = await PDFDocument.create();
+        pdfDoc.registerFontkit(fontkit);
         this.fontCache.clear();
+        this.customFontCache.clear();
         // Embed standard fonts we'll need
         await this.embedStandardFonts(pdfDoc);
+        // Embed any custom fonts that have font data
+        await this.embedCustomFonts(pdfDoc);
         // Render each page
         for (let pageIndex = 0; pageIndex < document.pages.length; pageIndex++) {
             try {
@@ -16604,11 +17978,59 @@ class PDFGenerator {
         }
         return result;
     }
+    /**
+     * Embed custom fonts that have raw font data available.
+     */
+    async embedCustomFonts(pdfDoc) {
+        const fonts = this.fontManager.getAvailableFonts();
+        for (const font of fonts) {
+            if (font.source !== 'custom')
+                continue;
+            for (const variant of font.variants) {
+                if (!variant.fontData)
+                    continue;
+                const cacheKey = `custom:${font.family.toLowerCase()}:${variant.weight}:${variant.style}`;
+                try {
+                    // Ensure we pass Uint8Array (some pdf-lib versions need it)
+                    const fontBytes = variant.fontData instanceof Uint8Array
+                        ? variant.fontData
+                        : new Uint8Array(variant.fontData);
+                    const embedded = await pdfDoc.embedFont(fontBytes, { subset: true });
+                    this.customFontCache.set(cacheKey, embedded);
+                    Logger.log('[pc-editor:PDFGenerator] Embedded custom font:', font.family, variant.weight, variant.style);
+                }
+                catch (e) {
+                    Logger.warn('[pc-editor:PDFGenerator] Failed to embed custom font:', font.family, e);
+                }
+            }
+        }
+    }
+    /**
+     * Check if a font family is a custom font with embedded data.
+     */
+    isCustomFont(family) {
+        return !this.fontManager.isBuiltIn(family) && this.fontManager.isRegistered(family);
+    }
     /**
      * Get a font from cache by formatting style.
+     * Checks custom fonts first, then falls back to standard fonts.
      */
     getFont(formatting) {
-        const standardFont = getStandardFont(formatting.fontFamily || 'Arial', formatting.fontWeight, formatting.fontStyle);
+        const family = formatting.fontFamily || 'Arial';
+        const weight = formatting.fontWeight || 'normal';
+        const style = formatting.fontStyle || 'normal';
+        // Try custom font first
+        const customKey = `custom:${family.toLowerCase()}:${weight}:${style}`;
+        const customFont = this.customFontCache.get(customKey);
+        if (customFont)
+            return customFont;
+        // Try custom font with normal variant as fallback
+        const customNormalKey = `custom:${family.toLowerCase()}:normal:normal`;
+        const customNormalFont = this.customFontCache.get(customNormalKey);
+        if (customNormalFont)
+            return customNormalFont;
+        // Fall back to standard fonts
+        const standardFont = getStandardFont(family, weight, style);
         return this.fontCache.get(standardFont) || this.fontCache.get(StandardFonts.Helvetica);
     }
     /**
@@ -16641,12 +18063,14 @@ class PDFGenerator {
             for (const run of line.runs) {
                 if (!run.text)
                     continue;
-                // Filter text to WinAnsi-compatible characters (standard PDF fonts limitation)
-                const safeText = this.filterToWinAnsi(run.text);
-                if (!safeText)
-                    continue;
                 // Ensure formatting has required properties with defaults
                 const formatting = run.formatting || {};
+                // Custom fonts support full Unicode; standard fonts need WinAnsi filtering
+                const safeText = this.isCustomFont(formatting.fontFamily || 'Arial')
+                    ? run.text
+                    : this.filterToWinAnsi(run.text);
+                if (!safeText)
+                    continue;
                 const font = this.getFont(formatting);
                 const fontSize = formatting.fontSize || 14;
                 const color = parseColor(formatting.color || '#000000');
@@ -21321,6 +22745,156 @@ class PDFImporter {
     }
 }
 
+/**
+ * FontManager - Manages font registration and availability for the editor.
+ *
+ * Built-in fonts are web-safe and map to pdf-lib StandardFonts.
+ * Custom fonts are loaded via the FontFace API for canvas rendering
+ * and their raw bytes are stored for PDF embedding.
+ */
+/**
+ * Built-in web-safe fonts that need no loading.
+ */
+const BUILT_IN_FONTS = [
+    'Arial',
+    'Times New Roman',
+    'Courier New',
+    'Georgia',
+    'Verdana'
+];
+class FontManager extends EventEmitter {
+    constructor() {
+        super();
+        this.fonts = new Map();
+        // Register built-in fonts
+        for (const family of BUILT_IN_FONTS) {
+            this.fonts.set(family.toLowerCase(), {
+                family,
+                source: 'built-in',
+                variants: [{
+                        weight: 'normal',
+                        style: 'normal',
+                        fontData: null,
+                        loaded: true
+                    }]
+            });
+        }
+    }
+    /**
+     * Register a custom font. Fetches the font data if a URL is provided,
+     * creates a FontFace for canvas rendering, and stores the raw bytes for PDF embedding.
+     */
+    async registerFont(options) {
+        const { family, url, data, weight = 'normal', style = 'normal' } = options;
+        Logger.log('[pc-editor:FontManager] registerFont', family, weight, style);
+        let fontData = null;
+        // Get font bytes
+        if (data) {
+            fontData = data;
+        }
+        else if (url) {
+            try {
+                const response = await fetch(url);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch font: ${response.status} ${response.statusText}`);
+                }
+                fontData = await response.arrayBuffer();
+            }
+            catch (e) {
+                Logger.error(`[pc-editor:FontManager] Failed to fetch font "${family}" from ${url}:`, e);
+                throw e;
+            }
+        }
+        // Create FontFace for canvas rendering
+        if (fontData && typeof FontFace !== 'undefined') {
+            try {
+                const fontFace = new FontFace(family, fontData, {
+                    weight,
+                    style
+                });
+                await fontFace.load();
+                document.fonts.add(fontFace);
+                Logger.log('[pc-editor:FontManager] FontFace loaded:', family, weight, style);
+            }
+            catch (e) {
+                Logger.error(`[pc-editor:FontManager] Failed to load FontFace "${family}":`, e);
+                throw e;
+            }
+        }
+        // Register in our map
+        const key = family.toLowerCase();
+        let registration = this.fonts.get(key);
+        if (!registration) {
+            registration = {
+                family,
+                source: 'custom',
+                variants: []
+            };
+            this.fonts.set(key, registration);
+        }
+        else if (registration.source === 'built-in') {
+            // Upgrading a built-in font with custom data (e.g., for PDF embedding)
+            registration.source = 'custom';
+        }
+        // Add or update variant
+        const existingVariant = registration.variants.find(v => v.weight === weight && v.style === style);
+        if (existingVariant) {
+            existingVariant.fontData = fontData;
+            existingVariant.loaded = true;
+        }
+        else {
+            registration.variants.push({
+                weight,
+                style,
+                fontData,
+                loaded: true
+            });
+        }
+        this.emit('font-registered', { family, weight, style });
+    }
+    /**
+     * Get all registered font families.
+     */
+    getAvailableFonts() {
+        return Array.from(this.fonts.values());
+    }
+    /**
+     * Get all available font family names.
+     */
+    getAvailableFontFamilies() {
+        return Array.from(this.fonts.values()).map(f => f.family);
+    }
+    /**
+     * Check if a font family is built-in.
+     */
+    isBuiltIn(family) {
+        const reg = this.fonts.get(family.toLowerCase());
+        return reg?.source === 'built-in';
+    }
+    /**
+     * Check if a font family is registered (built-in or custom).
+     */
+    isRegistered(family) {
+        return this.fonts.has(family.toLowerCase());
+    }
+    /**
+     * Get raw font bytes for PDF embedding.
+     * Returns null for built-in fonts (they use StandardFonts in pdf-lib).
+     */
+    getFontData(family, weight = 'normal', style = 'normal') {
+        const reg = this.fonts.get(family.toLowerCase());
+        if (!reg)
+            return null;
+        // Try exact match first
+        const exact = reg.variants.find(v => v.weight === weight && v.style === style);
+        if (exact?.fontData)
+            return exact.fontData;
+        // Fall back to normal variant
+        const normal = reg.variants.find(v => v.weight === 'normal' && v.style === 'normal');
+        return normal?.fontData || null;
+    }
+}
+
 class PCEditor extends EventEmitter {
     constructor(container, options) {
         super();
@@ -21347,7 +22921,8 @@ class PCEditor extends EventEmitter {
             units: this.options.units
         });
         this.dataBinder = new DataBinder();
-        this.pdfGenerator = new PDFGenerator();
+        this.fontManager = new FontManager();
+        this.pdfGenerator = new PDFGenerator(this.fontManager);
         this.clipboardManager = new ClipboardManager();
         this.initialize();
     }
@@ -21513,6 +23088,10 @@ class PCEditor extends EventEmitter {
         this.canvasManager.on('table-cell-selection-changed', (data) => {
             this.emit('table-cell-selection-changed', data);
         });
+        // Forward table row loop clicks
+        this.canvasManager.on('table-row-loop-clicked', (data) => {
+            this.emit('table-row-loop-clicked', data);
+        });
         this.canvasManager.on('repeating-section-clicked', (data) => {
             // Repeating section clicked - update selection state
             if (data.section && data.section.id) {
@@ -21523,6 +23102,16 @@ class PCEditor extends EventEmitter {
                 this.emitSelectionChange();
             }
         });
+        this.canvasManager.on('conditional-section-clicked', (data) => {
+            // Conditional section clicked - update selection state
+            if (data.section && data.section.id) {
+                this.currentSelection = {
+                    type: 'conditional-section',
+                    sectionId: data.section.id
+                };
+                this.emitSelectionChange();
+            }
+        });
         // Listen for section focus changes from CanvasManager (double-click)
         this.canvasManager.on('section-focus-changed', (data) => {
             // Update our internal state to match the canvas manager
@@ -22351,17 +23940,24 @@ class PCEditor extends EventEmitter {
             this.selectAll();
             return;
         }
-        // If an embedded object is selected (but not being edited), arrow keys should deselect it
-        // and move the cursor in the text flow
-        const isArrowKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key);
-        if (isArrowKey && this.canvasManager.hasSelectedElements()) {
-            // Check if we're not in editing mode
+        // If an embedded object is selected (but not being edited), handle special keys
+        if (this.canvasManager.hasSelectedElements()) {
             const editingTextBox = this.canvasManager.getEditingTextBox();
             const focusedTable = this.canvasManager.getFocusedControl();
             const isEditing = editingTextBox?.editing || (focusedTable instanceof TableObject && focusedTable.editing);
             if (!isEditing) {
-                // Clear the selection and let the key be handled by the body content
-                this.canvasManager.clearSelection();
+                // Arrow keys: deselect and move cursor in text flow
+                const isArrowKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key);
+                if (isArrowKey) {
+                    this.canvasManager.clearSelection();
+                    // Fall through to normal key handling
+                }
+                // Backspace/Delete: delete the selected object from the text flow
+                if (e.key === 'Backspace' || e.key === 'Delete') {
+                    e.preventDefault();
+                    this.deleteSelectedElements();
+                    return;
+                }
             }
         }
         // Use the unified focus system to get the currently focused control
@@ -22464,6 +24060,32 @@ class PCEditor extends EventEmitter {
         this.canvasManager.clearSelection();
         this.canvasManager.render();
     }
+    /**
+     * Delete all currently selected embedded objects from the text flow.
+     */
+    deleteSelectedElements() {
+        const selectedElements = this.canvasManager.getSelectedElements();
+        if (selectedElements.length === 0)
+            return;
+        for (const elementId of selectedElements) {
+            const objectInfo = this.findEmbeddedObjectInfo(elementId);
+            if (objectInfo) {
+                // Delete the placeholder character at the object's text index
+                // This removes the object from the text flow
+                objectInfo.content.deleteText(objectInfo.textIndex, 1);
+                // Return focus to the parent flowing content
+                const cursorPos = Math.min(objectInfo.textIndex, objectInfo.content.getText().length);
+                objectInfo.content.setCursorPosition(cursorPos);
+                this.canvasManager.setFocus(objectInfo.content);
+                if (objectInfo.section !== this.canvasManager.getActiveSection()) {
+                    this.canvasManager.setActiveSection(objectInfo.section);
+                }
+            }
+        }
+        this.canvasManager.clearSelection();
+        this.canvasManager.render();
+        this.emit('content-changed', {});
+    }
     /**
      * Find embedded object info by ID across all flowing content sources.
      */
@@ -23581,11 +25203,17 @@ class PCEditor extends EventEmitter {
         let totalFieldCount = 0;
         // Step 1: Expand repeating sections in body (header/footer don't support them)
         this.expandRepeatingSections(bodyContent, data);
-        // Step 2: Expand table row loops in body, header, and footer
+        // Step 2: Evaluate conditional sections in body (remove content where predicate is false)
+        this.evaluateConditionalSections(bodyContent, data);
+        // Step 3: Expand table row loops in body, header, and footer
         this.expandTableRowLoops(bodyContent, data);
         this.expandTableRowLoops(this.document.headerFlowingContent, data);
         this.expandTableRowLoops(this.document.footerFlowingContent, data);
-        // Step 3: Substitute all fields in body
+        // Step 4: Evaluate table row conditionals in body, header, and footer
+        this.evaluateTableRowConditionals(bodyContent, data);
+        this.evaluateTableRowConditionals(this.document.headerFlowingContent, data);
+        this.evaluateTableRowConditionals(this.document.footerFlowingContent, data);
+        // Step 5: Substitute all fields in body
         totalFieldCount += this.substituteFieldsInContent(bodyContent, data);
         // Step 4: Substitute all fields in embedded objects in body
         totalFieldCount += this.substituteFieldsInEmbeddedObjects(bodyContent, data);
@@ -23788,14 +25416,67 @@ class PCEditor extends EventEmitter {
                     }
                 }
             }
-            // Rewrite field names in the original (first) iteration to use index 0
-            for (const field of fieldsInSection) {
-                const newFieldName = this.rewriteFieldNameWithIndex(field.fieldName, section.fieldPath, 0);
-                fieldManager.updateFieldConfig(field.textIndex, { fieldName: newFieldName });
+            // Rewrite field names in the original (first) iteration to use index 0
+            for (const field of fieldsInSection) {
+                const newFieldName = this.rewriteFieldNameWithIndex(field.fieldName, section.fieldPath, 0);
+                fieldManager.updateFieldConfig(field.textIndex, { fieldName: newFieldName });
+            }
+            // Remove the section after expansion
+            sectionManager.remove(section.id);
+        }
+    }
+    /**
+     * Evaluate conditional sections by removing content where predicate is false.
+     * Processes sections from end to start to preserve text indices.
+     */
+    evaluateConditionalSections(flowingContent, data) {
+        const sectionManager = flowingContent.getConditionalSectionManager();
+        // Get sections in descending order (process end-to-start)
+        const sections = sectionManager.getSectionsDescending();
+        for (const section of sections) {
+            const result = PredicateEvaluator.evaluate(section.predicate, data);
+            if (!result) {
+                // Predicate is false — remove the content within this section
+                const deleteStart = section.startIndex;
+                const deleteLength = section.endIndex - section.startIndex;
+                flowingContent.deleteText(deleteStart, deleteLength);
+            }
+            // Remove the conditional section marker regardless
+            sectionManager.remove(section.id);
+        }
+    }
+    /**
+     * Evaluate table row conditionals in embedded tables within a FlowingTextContent.
+     * For each table with row conditionals, removes rows where predicate is false.
+     */
+    evaluateTableRowConditionals(flowingContent, data) {
+        const embeddedObjects = flowingContent.getEmbeddedObjects();
+        for (const [, obj] of embeddedObjects.entries()) {
+            if (obj instanceof TableObject) {
+                this.evaluateTableRowConditionalsInTable(obj, data);
+            }
+        }
+    }
+    /**
+     * Evaluate row conditionals in a single table.
+     * Processes conditionals from end to start to preserve row indices.
+     */
+    evaluateTableRowConditionalsInTable(table, data) {
+        const conditionals = table.getAllRowConditionals();
+        if (conditionals.length === 0)
+            return;
+        // Sort by startRowIndex descending (process end-to-start)
+        const sorted = [...conditionals].sort((a, b) => b.startRowIndex - a.startRowIndex);
+        for (const cond of sorted) {
+            const result = PredicateEvaluator.evaluate(cond.predicate, data);
+            if (!result) {
+                // Predicate is false — remove the rows
+                table.removeRowsInRange(cond.startRowIndex, cond.endRowIndex);
             }
-            // Remove the section after expansion
-            sectionManager.remove(section.id);
+            // Remove the conditional marker regardless
+            table.removeRowConditional(cond.id);
         }
+        table.markLayoutDirty();
     }
     /**
      * Get a value at a path without array defaulting.
@@ -24044,7 +25725,7 @@ class PCEditor extends EventEmitter {
     toggleBulletList() {
         if (!this._isReady)
             return;
-        const flowingContent = this.getActiveFlowingContent();
+        const flowingContent = this.getEditingFlowingContent() || this.getActiveFlowingContent();
         if (!flowingContent)
             return;
         flowingContent.toggleBulletList();
@@ -24057,7 +25738,7 @@ class PCEditor extends EventEmitter {
     toggleNumberedList() {
         if (!this._isReady)
             return;
-        const flowingContent = this.getActiveFlowingContent();
+        const flowingContent = this.getEditingFlowingContent() || this.getActiveFlowingContent();
         if (!flowingContent)
             return;
         flowingContent.toggleNumberedList();
@@ -24070,7 +25751,7 @@ class PCEditor extends EventEmitter {
     indentParagraph() {
         if (!this._isReady)
             return;
-        const flowingContent = this.getActiveFlowingContent();
+        const flowingContent = this.getEditingFlowingContent() || this.getActiveFlowingContent();
         if (!flowingContent)
             return;
         flowingContent.indentParagraph();
@@ -24083,7 +25764,7 @@ class PCEditor extends EventEmitter {
     outdentParagraph() {
         if (!this._isReady)
             return;
-        const flowingContent = this.getActiveFlowingContent();
+        const flowingContent = this.getEditingFlowingContent() || this.getActiveFlowingContent();
         if (!flowingContent)
             return;
         flowingContent.outdentParagraph();
@@ -24096,7 +25777,7 @@ class PCEditor extends EventEmitter {
     getListFormatting() {
         if (!this._isReady)
             return undefined;
-        const flowingContent = this.getActiveFlowingContent();
+        const flowingContent = this.getEditingFlowingContent() || this.getActiveFlowingContent();
         if (!flowingContent)
             return undefined;
         return flowingContent.getListFormatting();
@@ -24307,9 +25988,12 @@ class PCEditor extends EventEmitter {
         // If a table is focused, create a row loop instead of a text repeating section
         const focusedTable = this.getFocusedTable();
         if (focusedTable && focusedTable.focusedCell) {
-            Logger.log('[pc-editor] createRepeatingSection → table row loop', fieldPath);
-            const row = focusedTable.focusedCell.row;
-            const loop = focusedTable.createRowLoop(row, row, fieldPath);
+            // Use the selected range if multiple rows are selected, otherwise use the focused cell's row
+            const selectedRange = focusedTable.selectedRange;
+            const startRow = selectedRange ? selectedRange.start.row : focusedTable.focusedCell.row;
+            const endRow = selectedRange ? selectedRange.end.row : focusedTable.focusedCell.row;
+            Logger.log('[pc-editor] createRepeatingSection → table row loop', startRow, endRow, fieldPath);
+            const loop = focusedTable.createRowLoop(startRow, endRow, fieldPath);
             if (loop) {
                 this.canvasManager.render();
                 this.emit('table-row-loop-added', { table: focusedTable, loop });
@@ -24381,6 +26065,103 @@ class PCEditor extends EventEmitter {
         return this.document.bodyFlowingContent.getRepeatingSectionAtBoundary(textIndex) || null;
     }
     // ============================================
+    // Conditional Section API
+    // ============================================
+    /**
+     * Create a conditional section.
+     *
+     * If a table is currently being edited (focused), creates a table row conditional
+     * based on the focused cell's row.
+     *
+     * Otherwise, creates a body text conditional section at the given paragraph boundaries.
+     *
+     * @param startIndex Text index at paragraph start (ignored for table row conditionals)
+     * @param endIndex Text index at closing paragraph start (ignored for table row conditionals)
+     * @param predicate The predicate expression to evaluate (e.g., "isActive")
+     * @returns The created section, or null if creation failed
+     */
+    addConditionalSection(startIndex, endIndex, predicate) {
+        if (!this._isReady) {
+            throw new Error('Editor is not ready');
+        }
+        // If a table is focused, create a row conditional instead
+        const focusedTable = this.getFocusedTable();
+        if (focusedTable && focusedTable.focusedCell) {
+            const selectedRange = focusedTable.selectedRange;
+            const startRow = selectedRange ? selectedRange.start.row : focusedTable.focusedCell.row;
+            const endRow = selectedRange ? selectedRange.end.row : focusedTable.focusedCell.row;
+            Logger.log('[pc-editor] addConditionalSection → table row conditional', startRow, endRow, predicate);
+            const cond = focusedTable.createRowConditional(startRow, endRow, predicate);
+            if (cond) {
+                this.canvasManager.render();
+                this.emit('table-row-conditional-added', { table: focusedTable, conditional: cond });
+            }
+            return null; // Row conditionals are not ConditionalSections, return null
+        }
+        Logger.log('[pc-editor] addConditionalSection', startIndex, endIndex, predicate);
+        const section = this.document.bodyFlowingContent.createConditionalSection(startIndex, endIndex, predicate);
+        if (section) {
+            this.canvasManager.render();
+            this.emit('conditional-section-added', { section });
+        }
+        return section;
+    }
+    /**
+     * Get a conditional section by ID.
+     */
+    getConditionalSection(id) {
+        if (!this._isReady) {
+            return null;
+        }
+        return this.document.bodyFlowingContent.getConditionalSection(id) || null;
+    }
+    /**
+     * Get all conditional sections.
+     */
+    getConditionalSections() {
+        if (!this._isReady) {
+            return [];
+        }
+        return this.document.bodyFlowingContent.getConditionalSections();
+    }
+    /**
+     * Update a conditional section's predicate.
+     */
+    updateConditionalSectionPredicate(id, predicate) {
+        if (!this._isReady) {
+            return false;
+        }
+        const success = this.document.bodyFlowingContent.updateConditionalSectionPredicate(id, predicate);
+        if (success) {
+            this.canvasManager.render();
+            this.emit('conditional-section-updated', { id, predicate });
+        }
+        return success;
+    }
+    /**
+     * Remove a conditional section by ID.
+     */
+    removeConditionalSection(id) {
+        if (!this._isReady) {
+            return false;
+        }
+        const success = this.document.bodyFlowingContent.removeConditionalSection(id);
+        if (success) {
+            this.canvasManager.render();
+            this.emit('conditional-section-removed', { id });
+        }
+        return success;
+    }
+    /**
+     * Find a conditional section that has a boundary at the given text index.
+     */
+    getConditionalSectionAtBoundary(textIndex) {
+        if (!this._isReady) {
+            return null;
+        }
+        return this.document.bodyFlowingContent.getConditionalSectionAtBoundary(textIndex) || null;
+    }
+    // ============================================
     // Header/Footer API
     // ============================================
     /**
@@ -24731,6 +26512,39 @@ class PCEditor extends EventEmitter {
     setLogging(enabled) {
         Logger.setEnabled(enabled);
     }
+    // ============================================
+    // Font Management
+    // ============================================
+    /**
+     * Register a custom font for use in the editor and PDF export.
+     * The font will be loaded via the FontFace API for canvas rendering
+     * and its raw bytes stored for PDF embedding.
+     * @param options Font registration options (family + url or data)
+     */
+    async registerFont(options) {
+        Logger.log('[pc-editor] registerFont', options.family);
+        await this.fontManager.registerFont(options);
+        this.emit('font-registered', { family: options.family });
+        // Re-render to pick up the new font if it's already in use
+        if (this._isReady) {
+            this.canvasManager.render();
+        }
+    }
+    /**
+     * Get all registered fonts (built-in and custom).
+     */
+    getAvailableFonts() {
+        return this.fontManager.getAvailableFonts().map(f => ({
+            family: f.family,
+            source: f.source
+        }));
+    }
+    /**
+     * Get all available font family names.
+     */
+    getAvailableFontFamilies() {
+        return this.fontManager.getAvailableFontFamilies();
+    }
     destroy() {
         this.disableTextInput();
         if (this.canvasManager) {
@@ -26247,7 +28061,7 @@ class MergeDataPane extends BasePane {
     createContent() {
         const container = document.createElement('div');
         // Textarea for JSON
-        const textareaGroup = this.createFormGroup('JSON Data', this.createTextarea());
+        const textareaGroup = this.createFormGroup('JSON Data:', this.createTextarea());
         container.appendChild(textareaGroup);
         // Error hint (hidden by default)
         this.errorHint = this.createHint('');
@@ -26393,17 +28207,29 @@ class FormattingPane extends BasePane {
     attach(options) {
         super.attach(options);
         if (this.editor) {
+            // Populate font list from editor if no explicit list was provided
+            if (this.fontFamilies === DEFAULT_FONT_FAMILIES) {
+                this.fontFamilies = this.editor.getAvailableFontFamilies();
+                this.rebuildFontSelect();
+            }
             // Update on cursor/selection changes
             const updateHandler = () => this.updateFromEditor();
             this.editor.on('cursor-changed', updateHandler);
             this.editor.on('selection-changed', updateHandler);
             this.editor.on('text-changed', updateHandler);
             this.editor.on('formatting-changed', updateHandler);
+            // Update font list when new fonts are registered
+            const fontHandler = () => {
+                this.fontFamilies = this.editor.getAvailableFontFamilies();
+                this.rebuildFontSelect();
+            };
+            this.editor.on('font-registered', fontHandler);
             this.eventCleanup.push(() => {
                 this.editor?.off('cursor-changed', updateHandler);
                 this.editor?.off('selection-changed', updateHandler);
                 this.editor?.off('text-changed', updateHandler);
                 this.editor?.off('formatting-changed', updateHandler);
+                this.editor?.off('font-registered', fontHandler);
             });
             // Initial update
             this.updateFromEditor();
@@ -26472,38 +28298,82 @@ class FormattingPane extends BasePane {
         listsGroup.appendChild(this.outdentBtn);
         listsSection.appendChild(listsGroup);
         container.appendChild(listsSection);
-        // Font section
+        // Font section - label-value grid with right-aligned labels
         const fontSection = this.createSection('Font');
+        const fontGrid = document.createElement('div');
+        fontGrid.className = 'pc-pane-label-value-grid';
+        // Family row
+        const familyLabel = document.createElement('label');
+        familyLabel.className = 'pc-pane-label pc-pane-margin-label';
+        familyLabel.textContent = 'Family:';
         this.fontFamilySelect = this.createSelect(this.fontFamilies.map(f => ({ value: f, label: f })), 'Arial');
         this.addImmediateApplyListener(this.fontFamilySelect, () => this.applyFontFamily());
-        fontSection.appendChild(this.createFormGroup('Family', this.fontFamilySelect));
+        fontGrid.appendChild(familyLabel);
+        fontGrid.appendChild(this.fontFamilySelect);
+        fontGrid.appendChild(document.createElement('div'));
+        // Size row
+        const sizeLabel = document.createElement('label');
+        sizeLabel.className = 'pc-pane-label pc-pane-margin-label';
+        sizeLabel.textContent = 'Size:';
         this.fontSizeSelect = this.createSelect(this.fontSizes.map(s => ({ value: s.toString(), label: s.toString() })), '14');
         this.addImmediateApplyListener(this.fontSizeSelect, () => this.applyFontSize());
-        fontSection.appendChild(this.createFormGroup('Size', this.fontSizeSelect));
+        fontGrid.appendChild(sizeLabel);
+        fontGrid.appendChild(this.fontSizeSelect);
+        fontGrid.appendChild(document.createElement('div'));
+        fontSection.appendChild(fontGrid);
         container.appendChild(fontSection);
-        // Color section
+        // Color section - label-value grid with right-aligned labels
         const colorSection = this.createSection('Color');
-        const colorRow = this.createRow();
-        const colorGroup = document.createElement('div');
+        const colorGrid = document.createElement('div');
+        colorGrid.className = 'pc-pane-label-value-grid';
+        // Text color row: label | picker | spacer
+        const textColorLabel = document.createElement('label');
+        textColorLabel.className = 'pc-pane-label pc-pane-margin-label';
+        textColorLabel.textContent = 'Text:';
         this.colorInput = this.createColorInput('#000000');
         this.addImmediateApplyListener(this.colorInput, () => this.applyTextColor());
-        colorGroup.appendChild(this.createFormGroup('Text', this.colorInput));
-        colorRow.appendChild(colorGroup);
-        const highlightGroup = document.createElement('div');
+        colorGrid.appendChild(textColorLabel);
+        colorGrid.appendChild(this.colorInput);
+        colorGrid.appendChild(document.createElement('div'));
+        // Highlight row: label | picker + clear button | spacer
+        const highlightLabel = document.createElement('label');
+        highlightLabel.className = 'pc-pane-label pc-pane-margin-label';
+        highlightLabel.textContent = 'Highlight:';
         this.highlightInput = this.createColorInput('#ffff00');
         this.addImmediateApplyListener(this.highlightInput, () => this.applyHighlight());
-        const highlightForm = this.createFormGroup('Highlight', this.highlightInput);
+        const highlightControls = document.createElement('div');
+        highlightControls.style.display = 'flex';
+        highlightControls.style.alignItems = 'center';
+        highlightControls.style.gap = '4px';
+        highlightControls.appendChild(this.highlightInput);
         const clearHighlightBtn = this.createButton('Clear');
         clearHighlightBtn.className = 'pc-pane-button';
-        clearHighlightBtn.style.marginLeft = '4px';
         this.addButtonListener(clearHighlightBtn, () => this.clearHighlight());
-        highlightForm.appendChild(clearHighlightBtn);
-        highlightGroup.appendChild(highlightForm);
-        colorRow.appendChild(highlightGroup);
-        colorSection.appendChild(colorRow);
+        highlightControls.appendChild(clearHighlightBtn);
+        colorGrid.appendChild(highlightLabel);
+        colorGrid.appendChild(highlightControls);
+        colorGrid.appendChild(document.createElement('div'));
+        colorSection.appendChild(colorGrid);
         container.appendChild(colorSection);
         return container;
     }
+    rebuildFontSelect() {
+        if (!this.fontFamilySelect)
+            return;
+        const currentValue = this.fontFamilySelect.value;
+        this.fontFamilySelect.innerHTML = '';
+        for (const family of this.fontFamilies) {
+            const option = document.createElement('option');
+            option.value = family;
+            option.textContent = family;
+            option.style.fontFamily = family;
+            this.fontFamilySelect.appendChild(option);
+        }
+        // Restore selection if the font still exists
+        if (this.fontFamilies.includes(currentValue)) {
+            this.fontFamilySelect.value = currentValue;
+        }
+    }
     updateFromEditor() {
         if (!this.editor)
             return;
@@ -26727,10 +28597,10 @@ class HyperlinkPane extends BasePane {
         const container = document.createElement('div');
         // URL input
         this.urlInput = this.createTextInput({ placeholder: 'https://example.com' });
-        container.appendChild(this.createFormGroup('URL', this.urlInput));
+        container.appendChild(this.createFormGroup('URL:', this.urlInput));
         // Title input
         this.titleInput = this.createTextInput({ placeholder: 'Link title (optional)' });
-        container.appendChild(this.createFormGroup('Title', this.titleInput));
+        container.appendChild(this.createFormGroup('Title:', this.titleInput));
         // Apply button
         const applyBtn = this.createButton('Apply Changes', { variant: 'primary' });
         this.addButtonListener(applyBtn, () => this.applyChanges());
@@ -26881,10 +28751,10 @@ class SubstitutionFieldPane extends BasePane {
         const container = document.createElement('div');
         // Field name input
         this.fieldNameInput = this.createTextInput({ placeholder: 'Field name' });
-        container.appendChild(this.createFormGroup('Field Name', this.fieldNameInput));
+        container.appendChild(this.createFormGroup('Field Name:', this.fieldNameInput));
         // Default value input
         this.fieldDefaultInput = this.createTextInput({ placeholder: 'Default value (optional)' });
-        container.appendChild(this.createFormGroup('Default Value', this.fieldDefaultInput));
+        container.appendChild(this.createFormGroup('Default Value:', this.fieldDefaultInput));
         // Value type select
         this.valueTypeSelect = this.createSelect([
             { value: '', label: '(None)' },
@@ -26893,7 +28763,7 @@ class SubstitutionFieldPane extends BasePane {
             { value: 'date', label: 'Date' }
         ]);
         this.addImmediateApplyListener(this.valueTypeSelect, () => this.updateFormatGroups());
-        container.appendChild(this.createFormGroup('Value Type', this.valueTypeSelect));
+        container.appendChild(this.createFormGroup('Value Type:', this.valueTypeSelect));
         // Number format group
         this.numberFormatGroup = this.createSection();
         this.numberFormatGroup.style.display = 'none';
@@ -26903,7 +28773,7 @@ class SubstitutionFieldPane extends BasePane {
             { value: '0,0', label: 'Thousands separator (0,0)' },
             { value: '0,0.00', label: 'Thousands + decimals (0,0.00)' }
         ]);
-        this.numberFormatGroup.appendChild(this.createFormGroup('Number Format', this.numberFormatSelect));
+        this.numberFormatGroup.appendChild(this.createFormGroup('Number Format:', this.numberFormatSelect));
         container.appendChild(this.numberFormatGroup);
         // Currency format group
         this.currencyFormatGroup = this.createSection();
@@ -26914,7 +28784,7 @@ class SubstitutionFieldPane extends BasePane {
             { value: 'GBP', label: 'GBP' },
             { value: 'JPY', label: 'JPY' }
         ]);
-        this.currencyFormatGroup.appendChild(this.createFormGroup('Currency', this.currencyFormatSelect));
+        this.currencyFormatGroup.appendChild(this.createFormGroup('Currency:', this.currencyFormatSelect));
         container.appendChild(this.currencyFormatGroup);
         // Date format group
         this.dateFormatGroup = this.createSection();
@@ -26925,7 +28795,7 @@ class SubstitutionFieldPane extends BasePane {
             { value: 'DD/MM/YYYY', label: '01/01/2026 (EU)' },
             { value: 'YYYY-MM-DD', label: '2026-01-01 (ISO)' }
         ]);
-        this.dateFormatGroup.appendChild(this.createFormGroup('Date Format', this.dateFormatSelect));
+        this.dateFormatGroup.appendChild(this.createFormGroup('Date Format:', this.dateFormatSelect));
         container.appendChild(this.dateFormatGroup);
         // Apply button
         const applyBtn = this.createButton('Apply Changes', { variant: 'primary' });
@@ -27087,12 +28957,17 @@ class RepeatingSectionPane extends BasePane {
         if (this.editor) {
             // Listen for repeating section selection
             const selectionHandler = (event) => {
-                if (event.type === 'repeating-section' && event.sectionId) {
-                    const section = this.editor?.getRepeatingSection(event.sectionId);
+                const sel = event.selection || event;
+                if (sel.type === 'repeating-section' && sel.sectionId) {
+                    const section = this.editor?.getRepeatingSection(sel.sectionId);
                     if (section) {
                         this.showSection(section);
                     }
                 }
+                else {
+                    // Selection changed away from repeating section — hide pane
+                    this.hideSection();
+                }
             };
             const removedHandler = () => {
                 this.hideSection();
@@ -27109,7 +28984,7 @@ class RepeatingSectionPane extends BasePane {
         const container = document.createElement('div');
         // Field path input
         this.fieldPathInput = this.createTextInput({ placeholder: 'items' });
-        container.appendChild(this.createFormGroup('Array Field Path', this.fieldPathInput, {
+        container.appendChild(this.createFormGroup('Array Field Path:', this.fieldPathInput, {
             hint: 'Path to array in merge data (e.g., "items" or "contact.addresses")'
         }));
         // Apply button
@@ -27209,6 +29084,158 @@ class RepeatingSectionPane extends BasePane {
     }
 }
 
+/**
+ * ConditionalSectionPane - Edit conditional section properties.
+ *
+ * Shows:
+ * - Predicate input (boolean expression in merge data)
+ * - Position information
+ *
+ * Uses the PCEditor public API:
+ * - editor.getConditionalSection()
+ * - editor.updateConditionalSectionPredicate()
+ * - editor.removeConditionalSection()
+ */
+class ConditionalSectionPane extends BasePane {
+    constructor(id = 'conditional-section', options = {}) {
+        super(id, { className: 'pc-pane-conditional-section', ...options });
+        this.predicateInput = null;
+        this.positionHint = null;
+        this.currentSection = null;
+        this.onApplyCallback = options.onApply;
+        this.onRemoveCallback = options.onRemove;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // Listen for conditional section selection
+            const selectionHandler = (event) => {
+                const sel = event.selection || event;
+                if (sel.type === 'conditional-section' && sel.sectionId) {
+                    const section = this.editor?.getConditionalSection(sel.sectionId);
+                    if (section) {
+                        this.showSection(section);
+                    }
+                }
+                else {
+                    // Selection changed away from conditional section — hide pane
+                    this.hideSection();
+                }
+            };
+            const removedHandler = () => {
+                this.hideSection();
+            };
+            this.editor.on('selection-change', selectionHandler);
+            this.editor.on('conditional-section-removed', removedHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('selection-change', selectionHandler);
+                this.editor?.off('conditional-section-removed', removedHandler);
+            });
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Predicate input
+        this.predicateInput = this.createTextInput({ placeholder: 'isActive' });
+        container.appendChild(this.createFormGroup('Condition:', this.predicateInput, {
+            hint: 'Boolean expression evaluated against merge data (e.g., "isActive", "count > 0")'
+        }));
+        // Apply button
+        const applyBtn = this.createButton('Apply Changes', { variant: 'primary' });
+        this.addButtonListener(applyBtn, () => this.applyChanges());
+        container.appendChild(applyBtn);
+        // Remove button
+        const removeBtn = this.createButton('Remove Condition', { variant: 'danger' });
+        removeBtn.style.marginTop = '0.5rem';
+        this.addButtonListener(removeBtn, () => this.removeSection());
+        container.appendChild(removeBtn);
+        // Position hint
+        this.positionHint = this.createHint('');
+        container.appendChild(this.positionHint);
+        return container;
+    }
+    /**
+     * Show the pane with the given section.
+     */
+    showSection(section) {
+        this.currentSection = section;
+        if (this.predicateInput) {
+            this.predicateInput.value = section.predicate;
+        }
+        if (this.positionHint) {
+            this.positionHint.textContent = `Condition from position ${section.startIndex} to ${section.endIndex}`;
+        }
+        this.show();
+    }
+    /**
+     * Hide the pane and clear the current section.
+     */
+    hideSection() {
+        this.currentSection = null;
+        this.hide();
+    }
+    applyChanges() {
+        if (!this.editor || !this.currentSection) {
+            this.onApplyCallback?.(false, new Error('No section selected'));
+            return;
+        }
+        const predicate = this.predicateInput?.value.trim();
+        if (!predicate) {
+            this.onApplyCallback?.(false, new Error('Predicate cannot be empty'));
+            return;
+        }
+        if (predicate === this.currentSection.predicate) {
+            return; // No changes
+        }
+        try {
+            const success = this.editor.updateConditionalSectionPredicate(this.currentSection.id, predicate);
+            if (success) {
+                this.currentSection = this.editor.getConditionalSection(this.currentSection.id) || null;
+                if (this.currentSection) {
+                    this.showSection(this.currentSection);
+                }
+                this.onApplyCallback?.(true);
+            }
+            else {
+                this.onApplyCallback?.(false, new Error('Failed to update section'));
+            }
+        }
+        catch (error) {
+            this.onApplyCallback?.(false, error instanceof Error ? error : new Error(String(error)));
+        }
+    }
+    removeSection() {
+        if (!this.editor || !this.currentSection)
+            return;
+        try {
+            this.editor.removeConditionalSection(this.currentSection.id);
+            this.hideSection();
+            this.onRemoveCallback?.(true);
+        }
+        catch {
+            this.onRemoveCallback?.(false);
+        }
+    }
+    /**
+     * Get the currently selected section.
+     */
+    getCurrentSection() {
+        return this.currentSection;
+    }
+    /**
+     * Check if a section is currently selected.
+     */
+    hasSection() {
+        return this.currentSection !== null;
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        // Section pane doesn't auto-update - it's driven by selection events
+    }
+}
+
 /**
  * TableRowLoopPane - Edit table row loop properties.
  *
@@ -27233,14 +29260,28 @@ class TableRowLoopPane extends BasePane {
     }
     attach(options) {
         super.attach(options);
-        // Table row loop pane is typically shown manually when a table's row loop is selected
-        // The consumer is responsible for calling showLoop() with the table and loop
+        if (this.editor) {
+            // Auto-show when a table row loop is clicked
+            const loopClickHandler = (data) => {
+                this.showLoop(data.table, data.loop);
+            };
+            // Hide when selection changes away from a loop
+            const selectionHandler = () => {
+                this.hideLoop();
+            };
+            this.editor.on('table-row-loop-clicked', loopClickHandler);
+            this.editor.on('selection-change', selectionHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('table-row-loop-clicked', loopClickHandler);
+                this.editor?.off('selection-change', selectionHandler);
+            });
+        }
     }
     createContent() {
         const container = document.createElement('div');
         // Field path input
         this.fieldPathInput = this.createTextInput({ placeholder: 'items' });
-        container.appendChild(this.createFormGroup('Array Field Path', this.fieldPathInput, {
+        container.appendChild(this.createFormGroup('Array Field Path:', this.fieldPathInput, {
             hint: 'Path to array in merge data (e.g., "items" or "orders")'
         }));
         // Apply button
@@ -27400,56 +29441,63 @@ class TextBoxPane extends BasePane {
     }
     createContent() {
         const container = document.createElement('div');
-        // Position section
+        // Position section - Type on same row as label
         const positionSection = this.createSection('Position');
         this.positionSelect = this.createSelect([
             { value: 'inline', label: 'Inline' },
             { value: 'block', label: 'Block' },
             { value: 'relative', label: 'Relative' }
         ], 'inline');
-        this.addImmediateApplyListener(this.positionSelect, () => this.updateOffsetVisibility());
-        positionSection.appendChild(this.createFormGroup('Type', this.positionSelect));
+        this.addImmediateApplyListener(this.positionSelect, () => {
+            this.updateOffsetVisibility();
+            this.applyChanges();
+        });
+        positionSection.appendChild(this.createFormGroup('Type:', this.positionSelect, { inline: true }));
         // Offset group (only visible for relative positioning)
         this.offsetGroup = document.createElement('div');
         this.offsetGroup.style.display = 'none';
         const offsetRow = this.createRow();
         this.offsetXInput = this.createNumberInput({ value: 0 });
         this.offsetYInput = this.createNumberInput({ value: 0 });
-        offsetRow.appendChild(this.createFormGroup('X', this.offsetXInput, { inline: true }));
-        offsetRow.appendChild(this.createFormGroup('Y', this.offsetYInput, { inline: true }));
+        this.addImmediateApplyListener(this.offsetXInput, () => this.applyChanges());
+        this.addImmediateApplyListener(this.offsetYInput, () => this.applyChanges());
+        offsetRow.appendChild(this.createFormGroup('X:', this.offsetXInput, { inline: true }));
+        offsetRow.appendChild(this.createFormGroup('Y:', this.offsetYInput, { inline: true }));
         this.offsetGroup.appendChild(offsetRow);
         positionSection.appendChild(this.offsetGroup);
         container.appendChild(positionSection);
-        // Background section
-        const bgSection = this.createSection('Background');
+        // Background - color on same row as label
+        const bgSection = this.createSection();
         this.bgColorInput = this.createColorInput('#ffffff');
-        bgSection.appendChild(this.createFormGroup('Color', this.bgColorInput));
+        this.addImmediateApplyListener(this.bgColorInput, () => this.applyChanges());
+        bgSection.appendChild(this.createFormGroup('Background:', this.bgColorInput, { inline: true }));
         container.appendChild(bgSection);
         // Border section
         const borderSection = this.createSection('Border');
         const borderRow = this.createRow();
         this.borderWidthInput = this.createNumberInput({ min: 0, max: 10, value: 1 });
         this.borderColorInput = this.createColorInput('#cccccc');
-        borderRow.appendChild(this.createFormGroup('Width', this.borderWidthInput, { inline: true }));
-        borderRow.appendChild(this.createFormGroup('Color', this.borderColorInput, { inline: true }));
+        this.addImmediateApplyListener(this.borderWidthInput, () => this.applyChanges());
+        this.addImmediateApplyListener(this.borderColorInput, () => this.applyChanges());
+        borderRow.appendChild(this.createFormGroup('Width:', this.borderWidthInput, { inline: true }));
+        borderRow.appendChild(this.createFormGroup('Color:', this.borderColorInput, { inline: true }));
         borderSection.appendChild(borderRow);
+        // Border style on same row as label
         this.borderStyleSelect = this.createSelect([
             { value: 'solid', label: 'Solid' },
             { value: 'dashed', label: 'Dashed' },
             { value: 'dotted', label: 'Dotted' },
             { value: 'none', label: 'None' }
         ], 'solid');
-        borderSection.appendChild(this.createFormGroup('Style', this.borderStyleSelect));
+        this.addImmediateApplyListener(this.borderStyleSelect, () => this.applyChanges());
+        borderSection.appendChild(this.createFormGroup('Style:', this.borderStyleSelect, { inline: true }));
         container.appendChild(borderSection);
-        // Padding section
-        const paddingSection = this.createSection('Padding');
+        // Padding on same row as label
+        const paddingSection = this.createSection();
         this.paddingInput = this.createNumberInput({ min: 0, max: 50, value: 8 });
-        paddingSection.appendChild(this.createFormGroup('All sides (px)', this.paddingInput));
+        this.addImmediateApplyListener(this.paddingInput, () => this.applyChanges());
+        paddingSection.appendChild(this.createFormGroup('Padding:', this.paddingInput, { inline: true }));
         container.appendChild(paddingSection);
-        // Apply button
-        const applyBtn = this.createButton('Apply Changes', { variant: 'primary' });
-        this.addButtonListener(applyBtn, () => this.applyChanges());
-        container.appendChild(applyBtn);
         return container;
     }
     updateFromSelection() {
@@ -27525,7 +29573,6 @@ class TextBoxPane extends BasePane {
     }
     applyChanges() {
         if (!this.editor || !this.currentTextBox) {
-            this.onApplyCallback?.(false, new Error('No text box selected'));
             return;
         }
         const updates = {};
@@ -27561,12 +29608,7 @@ class TextBoxPane extends BasePane {
         }
         try {
             const success = this.editor.updateTextBox(this.currentTextBox.id, updates);
-            if (success) {
-                this.onApplyCallback?.(true);
-            }
-            else {
-                this.onApplyCallback?.(false, new Error('Failed to update text box'));
-            }
+            this.onApplyCallback?.(success);
         }
         catch (error) {
             this.onApplyCallback?.(false, error instanceof Error ? error : new Error(String(error)));
@@ -27642,28 +29684,35 @@ class ImagePane extends BasePane {
     }
     createContent() {
         const container = document.createElement('div');
-        // Position section
+        // Position section — with heading, matching TextBoxPane
         const positionSection = this.createSection('Position');
         this.positionSelect = this.createSelect([
             { value: 'inline', label: 'Inline' },
             { value: 'block', label: 'Block' },
             { value: 'relative', label: 'Relative' }
         ], 'inline');
-        this.addImmediateApplyListener(this.positionSelect, () => this.updateOffsetVisibility());
-        positionSection.appendChild(this.createFormGroup('Type', this.positionSelect));
+        this.addImmediateApplyListener(this.positionSelect, () => {
+            this.updateOffsetVisibility();
+            this.applyChanges();
+        });
+        positionSection.appendChild(this.createFormGroup('Type:', this.positionSelect, { inline: true }));
         // Offset group (only visible for relative positioning)
         this.offsetGroup = document.createElement('div');
         this.offsetGroup.style.display = 'none';
         const offsetRow = this.createRow();
         this.offsetXInput = this.createNumberInput({ value: 0 });
         this.offsetYInput = this.createNumberInput({ value: 0 });
-        offsetRow.appendChild(this.createFormGroup('X', this.offsetXInput, { inline: true }));
-        offsetRow.appendChild(this.createFormGroup('Y', this.offsetYInput, { inline: true }));
+        this.addImmediateApplyListener(this.offsetXInput, () => this.applyChanges());
+        this.addImmediateApplyListener(this.offsetYInput, () => this.applyChanges());
+        offsetRow.appendChild(this.createFormGroup('X:', this.offsetXInput, { inline: true }));
+        offsetRow.appendChild(this.createFormGroup('Y:', this.offsetYInput, { inline: true }));
         this.offsetGroup.appendChild(offsetRow);
         positionSection.appendChild(this.offsetGroup);
         container.appendChild(positionSection);
-        // Fit mode section
-        const fitSection = this.createSection('Display');
+        container.appendChild(document.createElement('hr'));
+        // Display section — Fit Mode and Resize Mode with aligned labels
+        const displaySection = document.createElement('div');
+        displaySection.className = 'pc-pane-image-display';
         this.fitModeSelect = this.createSelect([
             { value: 'contain', label: 'Contain' },
             { value: 'cover', label: 'Cover' },
@@ -27671,34 +29720,31 @@ class ImagePane extends BasePane {
             { value: 'none', label: 'None (original size)' },
             { value: 'tile', label: 'Tile' }
         ], 'contain');
-        fitSection.appendChild(this.createFormGroup('Fit Mode', this.fitModeSelect));
+        this.addImmediateApplyListener(this.fitModeSelect, () => this.applyChanges());
+        displaySection.appendChild(this.createFormGroup('Fit Mode:', this.fitModeSelect, { inline: true }));
         this.resizeModeSelect = this.createSelect([
             { value: 'locked-aspect-ratio', label: 'Lock Aspect Ratio' },
             { value: 'free', label: 'Free Resize' }
         ], 'locked-aspect-ratio');
-        fitSection.appendChild(this.createFormGroup('Resize Mode', this.resizeModeSelect));
-        container.appendChild(fitSection);
-        // Alt text section
-        const altSection = this.createSection('Accessibility');
+        this.addImmediateApplyListener(this.resizeModeSelect, () => this.applyChanges());
+        displaySection.appendChild(this.createFormGroup('Resize Mode:', this.resizeModeSelect, { inline: true }));
+        container.appendChild(displaySection);
+        container.appendChild(document.createElement('hr'));
+        // Alt Text — inline row
         this.altTextInput = this.createTextInput({ placeholder: 'Description of the image' });
-        altSection.appendChild(this.createFormGroup('Alt Text', this.altTextInput));
-        container.appendChild(altSection);
-        // Source section
-        const sourceSection = this.createSection('Source');
+        this.addImmediateApplyListener(this.altTextInput, () => this.applyChanges());
+        container.appendChild(this.createFormGroup('Alt Text:', this.altTextInput, { inline: true }));
+        container.appendChild(document.createElement('hr'));
+        // Source — change image button
         this.fileInput = document.createElement('input');
         this.fileInput.type = 'file';
         this.fileInput.accept = 'image/*';
         this.fileInput.style.display = 'none';
         this.fileInput.addEventListener('change', (e) => this.handleFileChange(e));
-        sourceSection.appendChild(this.fileInput);
+        container.appendChild(this.fileInput);
         const changeSourceBtn = this.createButton('Change Image...');
         this.addButtonListener(changeSourceBtn, () => this.fileInput?.click());
-        sourceSection.appendChild(changeSourceBtn);
-        container.appendChild(sourceSection);
-        // Apply button
-        const applyBtn = this.createButton('Apply Changes', { variant: 'primary' });
-        this.addButtonListener(applyBtn, () => this.applyChanges());
-        container.appendChild(applyBtn);
+        container.appendChild(changeSourceBtn);
         return container;
     }
     updateFromSelection() {
@@ -27917,60 +29963,57 @@ class TablePane extends BasePane {
         const container = document.createElement('div');
         // Structure section
         const structureSection = this.createSection('Structure');
+        // Rows/Columns info with aligned labels
         const structureInfo = document.createElement('div');
-        structureInfo.className = 'pc-pane-info-list';
+        structureInfo.className = 'pc-pane-table-structure-info';
         this.rowCountDisplay = document.createElement('span');
+        this.rowCountDisplay.className = 'pc-pane-info-value';
         this.colCountDisplay = document.createElement('span');
-        const rowInfo = document.createElement('div');
-        rowInfo.className = 'pc-pane-info';
-        rowInfo.innerHTML = '<span class="pc-pane-info-label">Rows</span>';
-        rowInfo.appendChild(this.rowCountDisplay);
-        const colInfo = document.createElement('div');
-        colInfo.className = 'pc-pane-info';
-        colInfo.innerHTML = '<span class="pc-pane-info-label">Columns</span>';
-        colInfo.appendChild(this.colCountDisplay);
-        structureInfo.appendChild(rowInfo);
-        structureInfo.appendChild(colInfo);
+        this.colCountDisplay.className = 'pc-pane-info-value';
+        structureInfo.appendChild(this.createFormGroup('Rows:', this.rowCountDisplay, { inline: true }));
+        structureInfo.appendChild(this.createFormGroup('Columns:', this.colCountDisplay, { inline: true }));
         structureSection.appendChild(structureInfo);
-        // Row/column buttons
-        const structureBtns = this.createButtonGroup();
+        // Row buttons
+        const rowBtns = this.createButtonGroup();
         const addRowBtn = this.createButton('+ Row');
         this.addButtonListener(addRowBtn, () => this.insertRow());
         const removeRowBtn = this.createButton('- Row');
         this.addButtonListener(removeRowBtn, () => this.removeRow());
+        rowBtns.appendChild(addRowBtn);
+        rowBtns.appendChild(removeRowBtn);
+        structureSection.appendChild(rowBtns);
+        // Column buttons (separate row)
+        const colBtns = this.createButtonGroup();
         const addColBtn = this.createButton('+ Column');
         this.addButtonListener(addColBtn, () => this.insertColumn());
         const removeColBtn = this.createButton('- Column');
         this.addButtonListener(removeColBtn, () => this.removeColumn());
-        structureBtns.appendChild(addRowBtn);
-        structureBtns.appendChild(removeRowBtn);
-        structureBtns.appendChild(addColBtn);
-        structureBtns.appendChild(removeColBtn);
-        structureSection.appendChild(structureBtns);
-        container.appendChild(structureSection);
-        // Headers section
-        const headersSection = this.createSection('Headers');
-        const headerRow = this.createRow();
+        colBtns.appendChild(addColBtn);
+        colBtns.appendChild(removeColBtn);
+        structureSection.appendChild(colBtns);
+        // Header rows/cols (with separator and aligned labels)
+        structureSection.appendChild(document.createElement('hr'));
+        const headersGroup = document.createElement('div');
+        headersGroup.className = 'pc-pane-table-headers';
         this.headerRowInput = this.createNumberInput({ min: 0, max: 10, value: 0 });
+        this.addImmediateApplyListener(this.headerRowInput, () => this.applyHeaders());
+        headersGroup.appendChild(this.createFormGroup('Header Rows:', this.headerRowInput, { inline: true }));
         this.headerColInput = this.createNumberInput({ min: 0, max: 10, value: 0 });
-        headerRow.appendChild(this.createFormGroup('Header Rows', this.headerRowInput, { inline: true }));
-        headerRow.appendChild(this.createFormGroup('Header Cols', this.headerColInput, { inline: true }));
-        headersSection.appendChild(headerRow);
-        const applyHeadersBtn = this.createButton('Apply Headers');
-        this.addButtonListener(applyHeadersBtn, () => this.applyHeaders());
-        headersSection.appendChild(applyHeadersBtn);
-        container.appendChild(headersSection);
-        // Defaults section
+        this.addImmediateApplyListener(this.headerColInput, () => this.applyHeaders());
+        headersGroup.appendChild(this.createFormGroup('Header Cols:', this.headerColInput, { inline: true }));
+        structureSection.appendChild(headersGroup);
+        container.appendChild(structureSection);
+        // Defaults section (aligned labels)
         const defaultsSection = this.createSection('Defaults');
-        const defaultsRow = this.createRow();
+        const defaultsGroup = document.createElement('div');
+        defaultsGroup.className = 'pc-pane-table-defaults';
         this.defaultPaddingInput = this.createNumberInput({ min: 0, max: 20, value: 8 });
+        this.addImmediateApplyListener(this.defaultPaddingInput, () => this.applyDefaults());
+        defaultsGroup.appendChild(this.createFormGroup('Padding:', this.defaultPaddingInput, { inline: true }));
         this.defaultBorderColorInput = this.createColorInput('#cccccc');
-        defaultsRow.appendChild(this.createFormGroup('Padding', this.defaultPaddingInput, { inline: true }));
-        defaultsRow.appendChild(this.createFormGroup('Border', this.defaultBorderColorInput, { inline: true }));
-        defaultsSection.appendChild(defaultsRow);
-        const applyDefaultsBtn = this.createButton('Apply Defaults');
-        this.addButtonListener(applyDefaultsBtn, () => this.applyDefaults());
-        defaultsSection.appendChild(applyDefaultsBtn);
+        this.addImmediateApplyListener(this.defaultBorderColorInput, () => this.applyDefaults());
+        defaultsGroup.appendChild(this.createFormGroup('Border:', this.defaultBorderColorInput, { inline: true }));
+        defaultsSection.appendChild(defaultsGroup);
         container.appendChild(defaultsSection);
         // Cell formatting section
         const cellSection = this.createSection('Cell Formatting');
@@ -27987,9 +30030,11 @@ class TablePane extends BasePane {
         mergeBtnGroup.appendChild(this.mergeCellsBtn);
         mergeBtnGroup.appendChild(this.splitCellBtn);
         cellSection.appendChild(mergeBtnGroup);
-        // Background
+        cellSection.appendChild(document.createElement('hr'));
+        // Background — inline
         this.cellBgColorInput = this.createColorInput('#ffffff');
-        cellSection.appendChild(this.createFormGroup('Background', this.cellBgColorInput));
+        this.addImmediateApplyListener(this.cellBgColorInput, () => this.applyCellFormatting());
+        cellSection.appendChild(this.createFormGroup('Background:', this.cellBgColorInput, { inline: true }));
         // Border checkboxes
         const borderChecks = document.createElement('div');
         borderChecks.className = 'pc-pane-row';
@@ -28021,24 +30066,29 @@ class TablePane extends BasePane {
             checkLabels[2].replaceChild(this.borderBottomCheck, checkLabels[2].querySelector('input'));
         if (checkLabels[3])
             checkLabels[3].replaceChild(this.borderLeftCheck, checkLabels[3].querySelector('input'));
-        cellSection.appendChild(this.createFormGroup('Borders', borderChecks));
+        // Add change listeners for immediate apply on checkboxes
+        for (const check of [this.borderTopCheck, this.borderRightCheck, this.borderBottomCheck, this.borderLeftCheck]) {
+            check.addEventListener('change', () => this.applyCellFormatting());
+        }
+        cellSection.appendChild(this.createFormGroup('Borders:', borderChecks));
         // Border properties
         const borderPropsRow = this.createRow();
         this.borderWidthInput = this.createNumberInput({ min: 0, max: 5, value: 1 });
         this.borderColorInput = this.createColorInput('#cccccc');
-        borderPropsRow.appendChild(this.createFormGroup('Width', this.borderWidthInput, { inline: true }));
-        borderPropsRow.appendChild(this.createFormGroup('Color', this.borderColorInput, { inline: true }));
+        this.addImmediateApplyListener(this.borderWidthInput, () => this.applyCellFormatting());
+        this.addImmediateApplyListener(this.borderColorInput, () => this.applyCellFormatting());
+        borderPropsRow.appendChild(this.createFormGroup('Width:', this.borderWidthInput, { inline: true }));
+        borderPropsRow.appendChild(this.createFormGroup('Color:', this.borderColorInput, { inline: true }));
         cellSection.appendChild(borderPropsRow);
+        // Style — inline
         this.borderStyleSelect = this.createSelect([
             { value: 'solid', label: 'Solid' },
             { value: 'dashed', label: 'Dashed' },
             { value: 'dotted', label: 'Dotted' },
             { value: 'none', label: 'None' }
         ], 'solid');
-        cellSection.appendChild(this.createFormGroup('Style', this.borderStyleSelect));
-        const applyCellBtn = this.createButton('Apply to Cell(s)', { variant: 'primary' });
-        this.addButtonListener(applyCellBtn, () => this.applyCellFormatting());
-        cellSection.appendChild(applyCellBtn);
+        this.addImmediateApplyListener(this.borderStyleSelect, () => this.applyCellFormatting());
+        cellSection.appendChild(this.createFormGroup('Style:', this.borderStyleSelect, { inline: true }));
         container.appendChild(cellSection);
         return container;
     }
@@ -28292,5 +30342,5 @@ class TablePane extends BasePane {
     }
 }
 
-export { BaseControl, BaseEmbeddedObject, BasePane, BaseTextRegion, BodyTextRegion, ClipboardManager, ContentAnalyzer, DEFAULT_IMPORT_OPTIONS, Document, DocumentBuilder, DocumentInfoPane, DocumentSettingsPane, EmbeddedObjectFactory, EmbeddedObjectManager, EventEmitter, FlowingTextContent, FooterTextRegion, FormattingPane, HeaderTextRegion, HorizontalRuler, HtmlConverter, HyperlinkPane, ImageObject, ImagePane, Logger, MergeDataPane, PCEditor, PDFImportError, PDFImportErrorCode, PDFImporter, PDFParser, Page, RegionManager, RepeatingSectionManager, RepeatingSectionPane, RulerControl, SubstitutionFieldManager, SubstitutionFieldPane, TableCell, TableObject, TablePane, TableRow, TableRowLoopPane, TextBoxObject, TextBoxPane, TextFormattingManager, TextLayout, TextMeasurer, TextPositionCalculator, TextState, VerticalRuler, ViewSettingsPane };
+export { BaseControl, BaseEmbeddedObject, BasePane, BaseTextRegion, BodyTextRegion, ClipboardManager, ConditionalSectionManager, ConditionalSectionPane, ContentAnalyzer, DEFAULT_IMPORT_OPTIONS, Document, DocumentBuilder, DocumentInfoPane, DocumentSettingsPane, EmbeddedObjectFactory, EmbeddedObjectManager, EventEmitter, FlowingTextContent, FontManager, FooterTextRegion, FormattingPane, HeaderTextRegion, HorizontalRuler, HtmlConverter, HyperlinkPane, ImageObject, ImagePane, Logger, MergeDataPane, PCEditor, PDFImportError, PDFImportErrorCode, PDFImporter, PDFParser, Page, PredicateEvaluator, RegionManager, RepeatingSectionManager, RepeatingSectionPane, RulerControl, SubstitutionFieldManager, SubstitutionFieldPane, TableCell, TableObject, TablePane, TableRow, TableRowLoopPane, TextBoxObject, TextBoxPane, TextFormattingManager, TextLayout, TextMeasurer, TextPositionCalculator, TextState, VerticalRuler, ViewSettingsPane };
 //# sourceMappingURL=pc-editor.esm.js.map