@productcloudos/editor 1.0.3 → 1.0.5

package/dist/pc-editor.js

@@ -839,12 +839,13 @@ class TextFormattingManager extends EventEmitter {
     }
     /**
      * Get formatting at a specific character position.
-     * Returns the position-specific formatting or the default.
+     * Returns the position-specific formatting merged with defaults,
+     * ensuring all properties are consistently present.
      */
     getFormattingAt(position) {
         const override = this.formatting.get(position);
         if (override) {
-            return { ...override };
+            return { ...this._defaultFormatting, ...override };
         }
         return { ...this._defaultFormatting };
     }
@@ -864,6 +865,20 @@ class TextFormattingManager extends EventEmitter {
             this.emit('formatting-changed', { start, end, formatting });
         }
     }
+    /**
+     * Set formatting at a specific position, replacing all existing formatting.
+     * Unlike applyFormatting which merges, this replaces completely.
+     * Used by undo operations to restore exact previous state.
+     * @param position Character position
+     * @param formatting Complete formatting to set
+     * @param silent If true, don't emit the formatting-changed event
+     */
+    setFormattingAt(position, formatting, silent = false) {
+        this.formatting.set(position, { ...formatting });
+        if (!silent) {
+            this.emit('formatting-changed', { start: position, end: position + 1, formatting });
+        }
+    }
     /**
      * Remove formatting from a range, reverting to default.
      */
@@ -917,6 +932,43 @@ class TextFormattingManager extends EventEmitter {
     getAllFormatting() {
         return new Map(this.formatting);
     }
+    /**
+     * Get formatting as compressed runs for serialization.
+     * Only outputs entries where formatting changes from the previous character.
+     * Skips leading default formatting to minimize output size.
+     * @param textLength Length of the text to serialize formatting for
+     */
+    getCompressedRuns(textLength) {
+        const runs = [];
+        const defaultFormat = this._defaultFormatting;
+        let lastFormat = null;
+        for (let i = 0; i < textLength; i++) {
+            const currentFormat = this.getFormattingAt(i);
+            const formatChanged = lastFormat === null ||
+                currentFormat.fontFamily !== lastFormat.fontFamily ||
+                currentFormat.fontSize !== lastFormat.fontSize ||
+                currentFormat.fontWeight !== lastFormat.fontWeight ||
+                currentFormat.fontStyle !== lastFormat.fontStyle ||
+                currentFormat.color !== lastFormat.color ||
+                currentFormat.backgroundColor !== lastFormat.backgroundColor;
+            if (formatChanged) {
+                const isDefault = currentFormat.fontFamily === defaultFormat.fontFamily &&
+                    currentFormat.fontSize === defaultFormat.fontSize &&
+                    currentFormat.fontWeight === defaultFormat.fontWeight &&
+                    currentFormat.fontStyle === defaultFormat.fontStyle &&
+                    currentFormat.color === defaultFormat.color &&
+                    currentFormat.backgroundColor === defaultFormat.backgroundColor;
+                if (!isDefault || runs.length > 0) {
+                    runs.push({
+                        index: i,
+                        formatting: { ...currentFormat }
+                    });
+                }
+                lastFormat = currentFormat;
+            }
+        }
+        return runs;
+    }
     /**
      * Restore formatting from a map (for deserialization).
      */
@@ -3820,6 +3872,35 @@ class ImageObject extends BaseEmbeddedObject {
     get hasError() {
         return this._error;
     }
+    /**
+     * Get the loaded HTMLImageElement, if available.
+     * Used by PDFGenerator to convert unsupported formats to PNG.
+     */
+    get imageElement() {
+        return this._loaded ? this._image : null;
+    }
+    /**
+     * Convert the image to a PNG data URL via canvas.
+     * Used when the original format (e.g., SVG, WebP, GIF) is not supported by pdf-lib.
+     * Returns null if the image is not loaded or conversion fails.
+     */
+    toPngDataUrl() {
+        if (!this._loaded || !this._image)
+            return null;
+        try {
+            const canvas = document.createElement('canvas');
+            canvas.width = this._image.naturalWidth || this._size.width;
+            canvas.height = this._image.naturalHeight || this._size.height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return null;
+            ctx.drawImage(this._image, 0, 0, canvas.width, canvas.height);
+            return canvas.toDataURL('image/png');
+        }
+        catch {
+            return null;
+        }
+    }
     loadImage() {
         if (!this._src) {
             this._error = true;
@@ -4715,12 +4796,10 @@ class TextBoxObject extends BaseEmbeddedObject {
         this.editing = false;
     }
     toData() {
-        // Serialize formatting map to array of [index, style] pairs
-        const formattingMap = this._flowingContent.getFormattingManager().getAllFormatting();
-        const formattingEntries = [];
-        formattingMap.forEach((value, key) => {
-            formattingEntries.push([key, { ...value }]);
-        });
+        // Serialize formatting as compressed runs (only at change boundaries)
+        const text = this._flowingContent.getText();
+        const compressedRuns = this._flowingContent.getFormattingManager().getCompressedRuns(text.length);
+        const formattingEntries = compressedRuns.map(run => [run.index, { ...run.formatting }]);
         // Get substitution fields as array
         const fields = this._flowingContent.getSubstitutionFieldManager().getFieldsArray();
         return {
@@ -4779,12 +4858,19 @@ class TextBoxObject extends BaseEmbeddedObject {
                 this._border = { ...boxData.border };
             if (boxData.padding !== undefined)
                 this._padding = boxData.padding;
-            // Restore formatting runs
-            if (boxData.formattingRuns) {
+            // Restore formatting runs (run-based: each entry applies from its index to the next)
+            if (boxData.formattingRuns && boxData.formattingRuns.length > 0) {
                 const formattingManager = this._flowingContent.getFormattingManager();
                 formattingManager.clear();
-                for (const [index, style] of boxData.formattingRuns) {
-                    formattingManager.applyFormatting(index, index + 1, style);
+                const textLength = this._flowingContent.getText().length;
+                for (let i = 0; i < boxData.formattingRuns.length; i++) {
+                    const [startIndex, style] = boxData.formattingRuns[i];
+                    const nextIndex = i + 1 < boxData.formattingRuns.length
+                        ? boxData.formattingRuns[i + 1][0]
+                        : textLength;
+                    if (startIndex < nextIndex) {
+                        formattingManager.applyFormatting(startIndex, nextIndex, style);
+                    }
                 }
             }
             // Restore substitution fields
@@ -4934,15 +5020,19 @@ class TextBoxObject extends BaseEmbeddedObject {
     }
     /**
      * Check if a point is within this text box region.
+     * Uses the full object bounds (including padding/border) so that
+     * double-click to enter edit mode works on the entire text box area,
+     * not just the inner text area.
      * @param point Point in canvas coordinates
-     * @param pageIndex The page index (ignored for text boxes)
+     * @param _pageIndex The page index (ignored for text boxes)
      */
-    containsPointInRegion(point, pageIndex) {
-        const bounds = this.getRegionBounds(pageIndex);
-        if (!bounds)
+    containsPointInRegion(point, _pageIndex) {
+        if (!this._renderedPosition)
             return false;
-        return point.x >= bounds.x && point.x <= bounds.x + bounds.width &&
-            point.y >= bounds.y && point.y <= bounds.y + bounds.height;
+        return point.x >= this._renderedPosition.x &&
+            point.x <= this._renderedPosition.x + this._size.width &&
+            point.y >= this._renderedPosition.y &&
+            point.y <= this._renderedPosition.y + this._size.height;
     }
     /**
      * Trigger a reflow of text in this text box.
@@ -5027,6 +5117,41 @@ function getVerticalPadding(padding) {
     return padding.top + padding.bottom;
 }
 
+/**
+ * Logger - Centralized logging for PC Editor.
+ *
+ * When enabled, logs informational messages to the console.
+ * When disabled, only errors are logged.
+ * Controlled via EditorOptions.enableLogging or Logger.setEnabled().
+ */
+let _enabled = false;
+const Logger = {
+    /** Enable or disable logging. When disabled, only errors are logged. */
+    setEnabled(enabled) {
+        _enabled = enabled;
+    },
+    /** Check if logging is enabled. */
+    isEnabled() {
+        return _enabled;
+    },
+    /** Log an informational message. Only outputs when logging is enabled. */
+    log(...args) {
+        if (_enabled) {
+            console.log(...args);
+        }
+    },
+    /** Log a warning. Only outputs when logging is enabled. */
+    warn(...args) {
+        if (_enabled) {
+            console.warn(...args);
+        }
+    },
+    /** Log an error. Always outputs regardless of logging state. */
+    error(...args) {
+        console.error(...args);
+    }
+};
+
 /**
  * TableCell - A cell within a table that contains editable text.
  * Implements EditableTextRegion for unified text interaction.
@@ -5077,7 +5202,7 @@ class TableCell extends EventEmitter {
         });
         // Prevent embedded objects in table cells (only substitution fields allowed)
         this._flowingContent.insertEmbeddedObject = () => {
-            console.warn('Embedded objects are not allowed in table cells. Use insertSubstitutionField instead.');
+            Logger.warn('[pc-editor:TableCell] Embedded objects are not allowed in table cells. Use insertSubstitutionField instead.');
         };
         // Set initial content
         if (config.content) {
@@ -5394,7 +5519,7 @@ class TableCell extends EventEmitter {
         this._reflowDirty = false;
         this._lastReflowWidth = width;
         this._cachedContentHeight = null; // Clear cached height since lines changed
-        console.log('[TableCell.reflow] cellId:', this._id, 'text:', JSON.stringify(this._flowingContent.getText()), 'lines:', this._flowedLines.length);
+        Logger.log('[pc-editor:TableCell.reflow] cellId:', this._id, 'text:', JSON.stringify(this._flowingContent.getText()), 'lines:', this._flowedLines.length);
     }
     /**
      * Mark this cell as needing reflow.
@@ -5432,7 +5557,7 @@ class TableCell extends EventEmitter {
         return this._editing && this._flowingContent.hasFocus();
     }
     handleKeyDown(e) {
-        console.log('[TableCell.handleKeyDown] Key:', e.key, '_editing:', this._editing, 'flowingContent.hasFocus:', this._flowingContent.hasFocus());
+        Logger.log('[pc-editor:TableCell.handleKeyDown] Key:', e.key, '_editing:', this._editing, 'flowingContent.hasFocus:', this._flowingContent.hasFocus());
         if (!this._editing)
             return false;
         // Let parent table handle Tab navigation
@@ -5440,9 +5565,9 @@ class TableCell extends EventEmitter {
             return false; // Not handled - parent will handle
         }
         // Delegate to FlowingTextContent
-        console.log('[TableCell.handleKeyDown] Delegating to FlowingTextContent.handleKeyDown');
+        Logger.log('[pc-editor:TableCell.handleKeyDown] Delegating to FlowingTextContent.handleKeyDown');
         const handled = this._flowingContent.handleKeyDown(e);
-        console.log('[TableCell.handleKeyDown] FlowingTextContent handled:', handled);
+        Logger.log('[pc-editor:TableCell.handleKeyDown] FlowingTextContent handled:', handled);
         return handled;
     }
     onCursorBlink(handler) {
@@ -5514,28 +5639,49 @@ class TableCell extends EventEmitter {
     // Serialization
     // ============================================
     toData() {
-        const formattingMap = this._flowingContent.getFormattingManager().getAllFormatting();
-        const formattingRuns = [];
-        formattingMap.forEach((style, index) => {
-            formattingRuns.push([index, { ...style }]);
-        });
+        const text = this._flowingContent.getText();
+        const compressedRuns = this._flowingContent.getFormattingManager().getCompressedRuns(text.length);
+        const formattingRuns = compressedRuns.map(run => [run.index, run.formatting]);
         // Get substitution fields for serialization
         const fields = this._flowingContent.getSubstitutionFieldManager().getFieldsArray();
-        return {
-            id: this._id,
-            rowSpan: this._rowSpan,
-            colSpan: this._colSpan,
-            backgroundColor: this._backgroundColor,
-            border: this._border,
-            padding: this._padding,
-            verticalAlign: this._verticalAlign,
-            content: this._flowingContent.getText(),
-            fontFamily: this._fontFamily,
-            fontSize: this._fontSize,
-            color: this._color,
-            formattingRuns: formattingRuns.length > 0 ? formattingRuns : undefined,
-            substitutionFields: fields.length > 0 ? fields : undefined
-        };
+        // Only include non-default values to minimize export size
+        const defaults = DEFAULT_TABLE_STYLE;
+        const defaultBorder = DEFAULT_CELL_BORDER_SIDE;
+        const isDefaultBorderSide = (side) => side.width === defaultBorder.width && side.color === defaultBorder.color && side.style === defaultBorder.style;
+        const isDefaultBorder = isDefaultBorderSide(this._border.top) &&
+            isDefaultBorderSide(this._border.right) &&
+            isDefaultBorderSide(this._border.bottom) &&
+            isDefaultBorderSide(this._border.left);
+        const isDefaultPadding = this._padding.top === defaults.cellPadding &&
+            this._padding.right === defaults.cellPadding &&
+            this._padding.bottom === defaults.cellPadding &&
+            this._padding.left === defaults.cellPadding;
+        const data = {};
+        if (this._rowSpan !== 1)
+            data.rowSpan = this._rowSpan;
+        if (this._colSpan !== 1)
+            data.colSpan = this._colSpan;
+        if (this._backgroundColor !== defaults.backgroundColor)
+            data.backgroundColor = this._backgroundColor;
+        if (!isDefaultBorder)
+            data.border = this._border;
+        if (!isDefaultPadding)
+            data.padding = this._padding;
+        if (this._verticalAlign !== 'top')
+            data.verticalAlign = this._verticalAlign;
+        if (text)
+            data.content = text;
+        if (this._fontFamily !== defaults.fontFamily)
+            data.fontFamily = this._fontFamily;
+        if (this._fontSize !== defaults.fontSize)
+            data.fontSize = this._fontSize;
+        if (this._color !== defaults.color)
+            data.color = this._color;
+        if (formattingRuns.length > 0)
+            data.formattingRuns = formattingRuns;
+        if (fields.length > 0)
+            data.substitutionFields = fields;
+        return data;
     }
     static fromData(data) {
         const cell = new TableCell({
@@ -5551,14 +5697,19 @@ class TableCell extends EventEmitter {
             fontSize: data.fontSize,
             color: data.color
         });
-        // Restore formatting runs
-        if (data.formattingRuns) {
+        // Restore formatting runs (run-based: each entry applies from its index to the next)
+        if (data.formattingRuns && data.formattingRuns.length > 0) {
             const formattingManager = cell._flowingContent.getFormattingManager();
-            const formattingMap = new Map();
-            for (const [index, style] of data.formattingRuns) {
-                formattingMap.set(index, style);
+            const textLength = (data.content || '').length;
+            for (let i = 0; i < data.formattingRuns.length; i++) {
+                const [startIndex, style] = data.formattingRuns[i];
+                const nextIndex = i + 1 < data.formattingRuns.length
+                    ? data.formattingRuns[i + 1][0]
+                    : textLength;
+                if (startIndex < nextIndex) {
+                    formattingManager.applyFormatting(startIndex, nextIndex, style);
+                }
             }
-            formattingManager.setAllFormatting(formattingMap);
         }
         // Restore substitution fields
         if (data.substitutionFields && Array.isArray(data.substitutionFields)) {
@@ -5792,13 +5943,17 @@ class TableRow extends EventEmitter {
     // Serialization
     // ============================================
     toData() {
-        return {
-            id: this._id,
-            height: this._height,
-            minHeight: this._minHeight,
-            isHeader: this._isHeader,
+        const data = {
             cells: this._cells.map(cell => cell.toData())
         };
+        // Only include non-default values
+        if (this._height !== null)
+            data.height = this._height;
+        if (this._minHeight !== DEFAULT_TABLE_STYLE.minRowHeight)
+            data.minHeight = this._minHeight;
+        if (this._isHeader)
+            data.isHeader = this._isHeader;
+        return data;
     }
     static fromData(data) {
         const row = new TableRow({
@@ -6132,7 +6287,7 @@ class TableObject extends BaseEmbeddedObject {
     set position(value) {
         // Tables only support block positioning - ignore any attempt to set other modes
         if (value !== 'block') {
-            console.warn(`Tables only support 'block' positioning. Ignoring attempt to set '${value}'.`);
+            Logger.warn(`[pc-editor:TableObject] Tables only support 'block' positioning. Ignoring attempt to set '${value}'.`);
         }
         // Always set to block
         super.position = 'block';
@@ -6671,24 +6826,24 @@ class TableObject extends BaseEmbeddedObject {
     createRowLoop(startRowIndex, endRowIndex, fieldPath) {
         // Validate range
         if (startRowIndex < 0 || endRowIndex >= this._rows.length) {
-            console.warn('[TableObject.createRowLoop] Invalid row range');
+            Logger.warn('[pc-editor:TableObject.createRowLoop] Invalid row range');
             return null;
         }
         if (startRowIndex > endRowIndex) {
-            console.warn('[TableObject.createRowLoop] Start index must be <= end index');
+            Logger.warn('[pc-editor:TableObject.createRowLoop] Start index must be <= end index');
             return null;
         }
         // Check for overlap with existing loops
         for (const existingLoop of this._rowLoops.values()) {
             if (this.loopRangesOverlap(startRowIndex, endRowIndex, existingLoop.startRowIndex, existingLoop.endRowIndex)) {
-                console.warn('[TableObject.createRowLoop] Loop range overlaps with existing loop');
+                Logger.warn('[pc-editor:TableObject.createRowLoop] Loop range overlaps with existing loop');
                 return null;
             }
         }
         // Check that loop rows are not header rows
         for (let i = startRowIndex; i <= endRowIndex; i++) {
             if (this._rows[i]?.isHeader) {
-                console.warn('[TableObject.createRowLoop] Loop rows cannot be header rows');
+                Logger.warn('[pc-editor:TableObject.createRowLoop] Loop rows cannot be header rows');
                 return null;
             }
         }
@@ -7494,7 +7649,7 @@ class TableObject extends BaseEmbeddedObject {
         return this._editing;
     }
     handleKeyDown(e) {
-        console.log('[TableObject.handleKeyDown] Key:', e.key, '_editing:', this._editing, '_focusedCell:', this._focusedCell);
+        Logger.log('[pc-editor:TableObject.handleKeyDown] Key:', e.key, '_editing:', this._editing, '_focusedCell:', this._focusedCell);
         if (!this._editing)
             return false;
         // Handle Tab navigation
@@ -8282,14 +8437,20 @@ class EmbeddedObjectFactory {
                 border: data.data.border,
                 padding: data.data.padding
             });
-            // Restore formatting runs if present
+            // Restore formatting runs (run-based: each entry applies from its index to the next)
             if (data.data.formattingRuns && Array.isArray(data.data.formattingRuns)) {
-                const formattingManager = textBox.flowingContent.getFormattingManager();
-                const formattingMap = new Map();
-                for (const [index, style] of data.data.formattingRuns) {
-                    formattingMap.set(index, style);
+                const runs = data.data.formattingRuns;
+                if (runs.length > 0) {
+                    const formattingManager = textBox.flowingContent.getFormattingManager();
+                    const textLength = textBox.flowingContent.getText().length;
+                    for (let i = 0; i < runs.length; i++) {
+                        const [startIndex, style] = runs[i];
+                        const nextIndex = i + 1 < runs.length ? runs[i + 1][0] : textLength;
+                        if (startIndex < nextIndex) {
+                            formattingManager.applyFormatting(startIndex, nextIndex, style);
+                        }
+                    }
                 }
-                formattingManager.setAllFormatting(formattingMap);
             }
             // Restore substitution fields if present
             if (data.data.substitutionFields && Array.isArray(data.data.substitutionFields)) {
@@ -9266,9 +9427,9 @@ class FlowingTextContent extends EventEmitter {
      * @returns true if the event was handled, false otherwise
      */
     handleKeyDown(e) {
-        console.log('[FlowingTextContent.handleKeyDown] Key:', e.key, '_hasFocus:', this._hasFocus);
+        Logger.log('[pc-editor:FlowingTextContent.handleKeyDown] Key:', e.key, '_hasFocus:', this._hasFocus);
         if (!this._hasFocus) {
-            console.log('[FlowingTextContent.handleKeyDown] No focus, returning false');
+            Logger.log('[pc-editor:FlowingTextContent.handleKeyDown] No focus, returning false');
             return false;
         }
         switch (e.key) {
@@ -9783,46 +9944,19 @@ class FlowingTextContent extends EventEmitter {
     toData() {
         // Serialize text content
         const text = this.textState.getText();
-        // Serialize text formatting as runs - only output when format changes
-        // This optimizes document size by not storing redundant formatting entries
-        const formattingRuns = [];
-        const defaultFormat = this.formatting.defaultFormatting;
-        let lastFormat = null;
-        for (let i = 0; i < text.length; i++) {
-            const currentFormat = this.formatting.getFormattingAt(i);
-            // Check if formatting changed from previous character
-            const formatChanged = lastFormat === null ||
-                currentFormat.fontFamily !== lastFormat.fontFamily ||
-                currentFormat.fontSize !== lastFormat.fontSize ||
-                currentFormat.fontWeight !== lastFormat.fontWeight ||
-                currentFormat.fontStyle !== lastFormat.fontStyle ||
-                currentFormat.color !== lastFormat.color ||
-                currentFormat.backgroundColor !== lastFormat.backgroundColor;
-            if (formatChanged) {
-                // Only output if different from default (to further reduce size)
-                const isDefault = currentFormat.fontFamily === defaultFormat.fontFamily &&
-                    currentFormat.fontSize === defaultFormat.fontSize &&
-                    currentFormat.fontWeight === defaultFormat.fontWeight &&
-                    currentFormat.fontStyle === defaultFormat.fontStyle &&
-                    currentFormat.color === defaultFormat.color &&
-                    currentFormat.backgroundColor === defaultFormat.backgroundColor;
-                // Always output first run if it's not default, or output when format changes
-                if (!isDefault || formattingRuns.length > 0) {
-                    formattingRuns.push({
-                        index: i,
-                        formatting: {
-                            fontFamily: currentFormat.fontFamily,
-                            fontSize: currentFormat.fontSize,
-                            fontWeight: currentFormat.fontWeight,
-                            fontStyle: currentFormat.fontStyle,
-                            color: currentFormat.color,
-                            backgroundColor: currentFormat.backgroundColor
-                        }
-                    });
-                }
-                lastFormat = currentFormat;
+        // Serialize text formatting as compressed runs (only at change boundaries)
+        const compressedRuns = this.formatting.getCompressedRuns(text.length);
+        const formattingRuns = compressedRuns.map(run => ({
+            index: run.index,
+            formatting: {
+                fontFamily: run.formatting.fontFamily,
+                fontSize: run.formatting.fontSize,
+                fontWeight: run.formatting.fontWeight,
+                fontStyle: run.formatting.fontStyle,
+                color: run.formatting.color,
+                backgroundColor: run.formatting.backgroundColor
             }
-        }
+        }));
         // Serialize paragraph formatting
         const paragraphFormatting = this.paragraphFormatting.toJSON();
         // Serialize substitution fields
@@ -9918,7 +10052,7 @@ class FlowingTextContent extends EventEmitter {
                     content.getEmbeddedObjectManager().insert(object, ref.textIndex);
                 }
                 else {
-                    console.warn(`Failed to create embedded object of type: ${ref.object.objectType}`);
+                    Logger.warn(`[pc-editor:FlowingTextContent] Failed to create embedded object of type: ${ref.object.objectType}`);
                 }
             }
         }
@@ -9972,7 +10106,7 @@ class FlowingTextContent extends EventEmitter {
                     this.embeddedObjects.insert(object, ref.textIndex);
                 }
                 else {
-                    console.warn(`Failed to create embedded object of type: ${ref.object.objectType}`);
+                    Logger.warn(`[pc-editor:FlowingTextContent] Failed to create embedded object of type: ${ref.object.objectType}`);
                 }
             }
         }
@@ -12511,7 +12645,7 @@ class FlowingTextRenderer extends EventEmitter {
     updateResizeHandleTargets(selectedObjects) {
         // Clear existing resize handle targets
         this._hitTestManager.clearCategory('resize-handles');
-        console.log('[updateResizeHandleTargets] selectedObjects:', selectedObjects.length);
+        Logger.log('[pc-editor:FlowingTextRenderer] updateResizeHandleTargets selectedObjects:', selectedObjects.length);
         // Register resize handles for each selected object
         for (const object of selectedObjects) {
             if (!object.resizable)
@@ -12524,7 +12658,7 @@ class FlowingTextRenderer extends EventEmitter {
                 // For regular objects, use renderedPosition
                 const pos = object.renderedPosition;
                 const pageIndex = object.renderedPageIndex;
-                console.log('[updateResizeHandleTargets] object:', object.id, 'pageIndex:', pageIndex, 'pos:', pos);
+                Logger.log('[pc-editor:FlowingTextRenderer] updateResizeHandleTargets object:', object.id, 'pageIndex:', pageIndex, 'pos:', pos);
                 if (pos && pageIndex >= 0) {
                     this.registerObjectResizeHandles(object, pageIndex, pos);
                 }
@@ -15170,7 +15304,7 @@ class CanvasManager extends EventEmitter {
         this.emit('element-removed', { elementId: objectId });
     }
     selectElement(elementId) {
-        console.log('Selecting element:', elementId);
+        Logger.log('[pc-editor:CanvasManager] Selecting element:', elementId);
         this.selectedElements.add(elementId);
         // Update embedded object's selected state
         const flowingContents = [
@@ -15182,12 +15316,12 @@ class CanvasManager extends EventEmitter {
             const embeddedObjects = flowingContent.getEmbeddedObjects();
             for (const [, obj] of embeddedObjects.entries()) {
                 if (obj.id === elementId) {
-                    console.log('Found embedded object to select:', obj.id);
+                    Logger.log('[pc-editor:CanvasManager] Found embedded object to select:', obj.id);
                     obj.selected = true;
                 }
             }
         }
-        console.log('Selected elements after selection:', Array.from(this.selectedElements));
+        Logger.log('[pc-editor:CanvasManager] Selected elements after selection:', Array.from(this.selectedElements));
         this.render();
         this.updateResizeHandleHitTargets();
         this.emit('selection-change', { selectedElements: Array.from(this.selectedElements) });
@@ -15237,10 +15371,10 @@ class CanvasManager extends EventEmitter {
         this.flowingTextRenderer.updateResizeHandleTargets(selectedObjects);
     }
     clearSelection() {
-        console.log('clearSelection called, current selected elements:', Array.from(this.selectedElements));
+        Logger.log('[pc-editor:CanvasManager] clearSelection called, current selected elements:', Array.from(this.selectedElements));
         // Clear selected state on all embedded objects
         this.selectedElements.forEach(elementId => {
-            console.log('Clearing selection for element:', elementId);
+            Logger.log('[pc-editor:CanvasManager] Clearing selection for element:', elementId);
             // Check embedded objects in all flowing content sources (body, header, footer)
             const flowingContents = [
                 this.document.bodyFlowingContent,
@@ -15251,7 +15385,7 @@ class CanvasManager extends EventEmitter {
                 const embeddedObjects = flowingContent.getEmbeddedObjects();
                 for (const [, embeddedObj] of embeddedObjects.entries()) {
                     if (embeddedObj.id === elementId) {
-                        console.log('Clearing selection on embedded object:', elementId);
+                        Logger.log('[pc-editor:CanvasManager] Clearing selection on embedded object:', elementId);
                         embeddedObj.selected = false;
                     }
                 }
@@ -15259,7 +15393,7 @@ class CanvasManager extends EventEmitter {
         });
         this.selectedElements.clear();
         this.selectedSectionId = null;
-        console.log('About to render after clearing selection...');
+        Logger.log('[pc-editor:CanvasManager] About to render after clearing selection...');
         this.render();
         this.updateResizeHandleHitTargets();
         this.emit('selection-change', { selectedElements: [] });
@@ -15508,7 +15642,7 @@ class CanvasManager extends EventEmitter {
         });
         // Handle substitution field clicks
         this.flowingTextRenderer.on('substitution-field-clicked', (data) => {
-            console.log('[substitution-field-clicked] Field:', data.field?.fieldName, 'Section:', data.section);
+            Logger.log('[pc-editor:CanvasManager] substitution-field-clicked Field:', data.field?.fieldName, 'Section:', data.section);
             // Emit event for external handling (e.g., showing field properties panel)
             this.emit('substitution-field-clicked', data);
         });
@@ -15983,14 +16117,15 @@ class CanvasManager extends EventEmitter {
         this.editingTextBox = textBox;
         this._editingTextBoxPageId = pageId || null;
         if (textBox) {
-            // Use the unified focus system to handle focus/blur and cursor blink
-            // This blurs the previous control, hiding its cursor
-            this.setFocus(textBox);
             // Clear selection in main flowing content
             this.document.bodyFlowingContent.clearSelection();
-            // Select the text box
+            // Select the text box visually (this calls setFocus(null) internally,
+            // so we must set focus to the text box AFTER this call)
             this.clearSelection();
             this.selectInlineElement({ type: 'embedded-object', object: textBox, textIndex: textBox.textIndex });
+            // Now set focus to the text box for editing — must be AFTER selectInlineElement
+            // because selectBaseEmbeddedObject calls setFocus(null) which would undo it
+            this.setFocus(textBox);
             this.emit('textbox-editing-started', { textBox });
         }
         else {
@@ -16729,7 +16864,15 @@ class PDFGenerator {
         // Check if it's a data URL we can embed
         if (src.startsWith('data:')) {
             try {
-                const embeddedImage = await this.embedImageFromDataUrl(pdfDoc, src);
+                let embeddedImage = await this.embedImageFromDataUrl(pdfDoc, src);
+                // If the format isn't directly supported (e.g., SVG, WebP, GIF),
+                // convert to PNG via canvas and try again
+                if (!embeddedImage) {
+                    const pngDataUrl = image.toPngDataUrl();
+                    if (pngDataUrl) {
+                        embeddedImage = await this.embedImageFromDataUrl(pdfDoc, pngDataUrl);
+                    }
+                }
                 if (embeddedImage) {
                     // Calculate draw position/size based on fit mode
                     const drawParams = this.calculateImageDrawParams(embeddedImage.width, embeddedImage.height, image.width, image.height, image.fit);
@@ -16752,7 +16895,7 @@ class PDFGenerator {
                 }
             }
             catch (e) {
-                console.warn('Failed to embed image:', e);
+                Logger.warn('[pc-editor:PDFGenerator] Failed to embed image:', e);
             }
         }
         // Fallback: draw placeholder rectangle for images we can't embed
@@ -18780,7 +18923,7 @@ class MutationUndo {
                 this.undoTableStructure(mutation);
                 break;
             default:
-                console.warn('Unknown mutation type for undo:', mutation.type);
+                Logger.warn('[pc-editor:MutationUndo] Unknown mutation type for undo:', mutation.type);
         }
     }
     /**
@@ -18830,7 +18973,7 @@ class MutationUndo {
                 this.redoTableStructure(mutation);
                 break;
             default:
-                console.warn('Unknown mutation type for redo:', mutation.type);
+                Logger.warn('[pc-editor:MutationUndo] Unknown mutation type for redo:', mutation.type);
         }
     }
     // --- Text Mutations ---
@@ -18860,11 +19003,11 @@ class MutationUndo {
         const data = mutation.data;
         // Restore deleted text
         content.insertTextAt(data.position, data.deletedText);
-        // Restore formatting
+        // Restore formatting using setFormattingAt to replace completely
         if (data.deletedFormatting) {
             const fm = content.getFormattingManager();
             data.deletedFormatting.forEach((style, offset) => {
-                fm.applyFormatting(data.position + offset, data.position + offset + 1, style);
+                fm.setFormattingAt(data.position + offset, style, true);
             });
         }
         // Restore substitution fields
@@ -18890,9 +19033,10 @@ class MutationUndo {
             return;
         const data = mutation.data;
         const fm = content.getFormattingManager();
-        // Restore previous formatting
+        // Restore previous formatting using setFormattingAt to replace completely
+        // (not merge, which would leave properties like backgroundColor intact)
         data.previousFormatting.forEach((style, offset) => {
-            fm.applyFormatting(data.start + offset, data.start + offset + 1, style);
+            fm.setFormattingAt(data.start + offset, style, true);
         });
     }
     redoFormat(mutation) {
@@ -20161,13 +20305,13 @@ class PDFParser {
                     }
                     catch {
                         // Skip images that fail to extract
-                        console.warn(`Failed to extract image: ${imageName}`);
+                        Logger.warn(`[pc-editor:PDFParser] Failed to extract image: ${imageName}`);
                     }
                 }
             }
         }
         catch (error) {
-            console.warn('Image extraction failed:', error);
+            Logger.warn('[pc-editor:PDFParser] Image extraction failed:', error);
         }
         return images;
     }
@@ -21194,6 +21338,8 @@ class PCEditor extends EventEmitter {
         }
         this.container = container;
         this.options = this.mergeOptions(options);
+        // Initialize logging
+        Logger.setEnabled(this.options.enableLogging ?? false);
         this.document = new Document();
         // Apply constructor options to document settings
         this.document.updateSettings({
@@ -21218,7 +21364,8 @@ class PCEditor extends EventEmitter {
             showControlCharacters: options?.showControlCharacters ?? false,
             defaultFont: options?.defaultFont || 'Arial',
             defaultFontSize: options?.defaultFontSize || 12,
-            theme: options?.theme || 'light'
+            theme: options?.theme || 'light',
+            enableLogging: options?.enableLogging ?? false
         };
     }
     initialize() {
@@ -21625,6 +21772,7 @@ class PCEditor extends EventEmitter {
      * This changes which section receives keyboard input and cursor positioning.
      */
     setActiveSection(section) {
+        Logger.log('[pc-editor] setActiveSection', section);
         if (this._activeEditingSection !== section) {
             this._activeEditingSection = section;
             // Delegate to canvas manager which handles the section change and emits events
@@ -21715,6 +21863,7 @@ class PCEditor extends EventEmitter {
         }
     }
     loadDocument(documentData) {
+        Logger.log('[pc-editor] loadDocument');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -21741,6 +21890,7 @@ class PCEditor extends EventEmitter {
         return this.document.toData();
     }
     bindData(data) {
+        Logger.log('[pc-editor] bindData');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -21749,6 +21899,7 @@ class PCEditor extends EventEmitter {
         this.emit('data-bound', { data });
     }
     async exportPDF(options) {
+        Logger.log('[pc-editor] exportPDF');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -21790,6 +21941,7 @@ class PCEditor extends EventEmitter {
      * @returns JSON string representation of the document
      */
     saveDocument() {
+        Logger.log('[pc-editor] saveDocument');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -21801,6 +21953,7 @@ class PCEditor extends EventEmitter {
      * @param filename Optional filename (defaults to 'document.pceditor.json')
      */
     saveDocumentToFile(filename = 'document.pceditor.json') {
+        Logger.log('[pc-editor] saveDocumentToFile', filename);
         const jsonString = this.saveDocument();
         const blob = new Blob([jsonString], { type: 'application/json' });
         const url = URL.createObjectURL(blob);
@@ -21818,6 +21971,7 @@ class PCEditor extends EventEmitter {
      * @param jsonString JSON string representation of the document
      */
     loadDocumentFromJSON(jsonString) {
+        Logger.log('[pc-editor] loadDocumentFromJSON');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -21838,6 +21992,7 @@ class PCEditor extends EventEmitter {
      * @returns Promise that resolves when loading is complete
      */
     async loadDocumentFromFile(file) {
+        Logger.log('[pc-editor] loadDocumentFromFile', file.name);
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -21926,22 +22081,25 @@ class PCEditor extends EventEmitter {
         // Version compatibility check
         const [major] = doc.version.split('.').map(Number);
         if (major > 1) {
-            console.warn(`Document version ${doc.version} may not be fully compatible with this editor`);
+            Logger.warn(`[pc-editor] Document version ${doc.version} may not be fully compatible with this editor`);
         }
     }
     selectElement(elementId) {
+        Logger.log('[pc-editor] selectElement', elementId);
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
         this.canvasManager.selectElement(elementId);
     }
     clearSelection() {
+        Logger.log('[pc-editor] clearSelection');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
         this.canvasManager.clearSelection();
     }
     removeEmbeddedObject(objectId) {
+        Logger.log('[pc-editor] removeEmbeddedObject', objectId);
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -21951,6 +22109,7 @@ class PCEditor extends EventEmitter {
      * Undo the last operation.
      */
     undo() {
+        Logger.log('[pc-editor] undo');
         if (!this._isReady)
             return;
         const success = this.transactionManager.undo();
@@ -21963,6 +22122,7 @@ class PCEditor extends EventEmitter {
      * Redo the last undone operation.
      */
     redo() {
+        Logger.log('[pc-editor] redo');
         if (!this._isReady)
             return;
         const success = this.transactionManager.redo();
@@ -21996,16 +22156,19 @@ class PCEditor extends EventEmitter {
         this.transactionManager.setMaxHistory(count);
     }
     zoomIn() {
+        Logger.log('[pc-editor] zoomIn');
         if (!this._isReady)
             return;
         this.canvasManager.zoomIn();
     }
     zoomOut() {
+        Logger.log('[pc-editor] zoomOut');
         if (!this._isReady)
             return;
         this.canvasManager.zoomOut();
     }
     setZoom(level) {
+        Logger.log('[pc-editor] setZoom', level);
         if (!this._isReady)
             return;
         this.canvasManager.setZoom(level);
@@ -22042,6 +22205,7 @@ class PCEditor extends EventEmitter {
         return this.canvasManager.getContentOffset();
     }
     fitToWidth() {
+        Logger.log('[pc-editor] fitToWidth');
         if (!this._isReady)
             return;
         this.canvasManager.fitToWidth();
@@ -22050,23 +22214,27 @@ class PCEditor extends EventEmitter {
      * Force a re-render of the canvas.
      */
     render() {
+        Logger.log('[pc-editor] render');
         if (!this._isReady)
             return;
         this.canvasManager.render();
     }
     fitToPage() {
+        Logger.log('[pc-editor] fitToPage');
         if (!this._isReady)
             return;
         this.canvasManager.fitToPage();
     }
     // Layout control methods
     setAutoFlow(enabled) {
+        Logger.log('[pc-editor] setAutoFlow', enabled);
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
         this.layoutEngine.setAutoFlow(enabled);
     }
     reflowDocument() {
+        Logger.log('[pc-editor] reflowDocument');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -22108,6 +22276,7 @@ class PCEditor extends EventEmitter {
         };
     }
     addPage() {
+        Logger.log('[pc-editor] addPage');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -22119,6 +22288,7 @@ class PCEditor extends EventEmitter {
         this.canvasManager.setDocument(this.document);
     }
     removePage(pageId) {
+        Logger.log('[pc-editor] removePage', pageId);
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -22193,7 +22363,7 @@ class PCEditor extends EventEmitter {
         }
         // Use the unified focus system to get the currently focused control
         const focusedControl = this.canvasManager.getFocusedControl();
-        console.log('[PCEditor.handleKeyDown] Key:', e.key, 'focusedControl:', focusedControl?.constructor?.name);
+        Logger.log('[pc-editor:handleKeyDown] Key:', e.key, 'focusedControl:', focusedControl?.constructor?.name);
         if (!focusedControl)
             return;
         // Vertical navigation needs layout context - handle specially
@@ -22217,9 +22387,9 @@ class PCEditor extends EventEmitter {
             }
         }
         // Delegate to the focused control's handleKeyDown
-        console.log('[PCEditor.handleKeyDown] Calling focusedControl.handleKeyDown');
+        Logger.log('[pc-editor:handleKeyDown] Calling focusedControl.handleKeyDown');
         const handled = focusedControl.handleKeyDown(e);
-        console.log('[PCEditor.handleKeyDown] handled:', handled);
+        Logger.log('[pc-editor:handleKeyDown] handled:', handled);
         if (handled) {
             this.canvasManager.render();
             // Handle text box-specific post-processing
@@ -22583,6 +22753,7 @@ class PCEditor extends EventEmitter {
      * This is useful when UI controls have stolen focus.
      */
     applyFormattingWithFallback(start, end, formatting) {
+        Logger.log('[pc-editor] applyFormattingWithFallback', start, end, formatting);
         // Try current context first
         let flowingContent = this.getEditingFlowingContent();
         // Fall back to saved context
@@ -22783,6 +22954,7 @@ class PCEditor extends EventEmitter {
      * Works for body text, text boxes, and table cells.
      */
     setUnifiedAlignment(alignment) {
+        Logger.log('[pc-editor] setUnifiedAlignment', alignment);
         const flowingContent = this.getEditingFlowingContent();
         if (!flowingContent) {
             throw new Error('No text is being edited');
@@ -22799,6 +22971,7 @@ class PCEditor extends EventEmitter {
         this.canvasManager.render();
     }
     insertText(text) {
+        Logger.log('[pc-editor] insertText', text);
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -22815,6 +22988,7 @@ class PCEditor extends EventEmitter {
         return flowingContent ? flowingContent.getText() : '';
     }
     setFlowingText(text) {
+        Logger.log('[pc-editor] setFlowingText');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -22828,6 +23002,7 @@ class PCEditor extends EventEmitter {
      * Works for body, header, footer, text boxes, and table cells.
      */
     setCursorPosition(position) {
+        Logger.log('[pc-editor] setCursorPosition', position);
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -22873,6 +23048,7 @@ class PCEditor extends EventEmitter {
      * Works for body, header, footer, text boxes, and table cells.
      */
     insertEmbeddedObject(object, position = 'inline') {
+        Logger.log('[pc-editor] insertEmbeddedObject', object.id, position);
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -22899,6 +23075,7 @@ class PCEditor extends EventEmitter {
      * Works for body, header, footer, text boxes, and table cells.
      */
     insertSubstitutionField(fieldName, config) {
+        Logger.log('[pc-editor] insertSubstitutionField', fieldName);
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -22924,6 +23101,7 @@ class PCEditor extends EventEmitter {
      * @param displayFormat Optional format string (e.g., "Page %d" where %d is replaced by page number)
      */
     insertPageNumberField(displayFormat) {
+        Logger.log('[pc-editor] insertPageNumberField');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -22949,6 +23127,7 @@ class PCEditor extends EventEmitter {
      * @param displayFormat Optional format string (e.g., "of %d" where %d is replaced by page count)
      */
     insertPageCountField(displayFormat) {
+        Logger.log('[pc-editor] insertPageCountField');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -22974,6 +23153,7 @@ class PCEditor extends EventEmitter {
      * or table cells are not recommended as these don't span pages.
      */
     insertPageBreak() {
+        Logger.log('[pc-editor] insertPageBreak');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -23109,6 +23289,144 @@ class PCEditor extends EventEmitter {
         return null;
     }
     // ============================================
+    // Text Box Update Operations
+    // ============================================
+    /**
+     * Update properties of a text box.
+     * @param textBoxId The ID of the text box to update
+     * @param updates The properties to update
+     */
+    updateTextBox(textBoxId, updates) {
+        if (!this._isReady)
+            return false;
+        // Find the text box in all flowing contents
+        const textBox = this.findTextBoxById(textBoxId);
+        if (!textBox) {
+            Logger.warn(`[pc-editor:updateTextBox] Text box not found: ${textBoxId}`);
+            return false;
+        }
+        // Apply updates
+        if (updates.position !== undefined) {
+            textBox.position = updates.position;
+        }
+        if (updates.relativeOffset !== undefined) {
+            textBox.relativeOffset = updates.relativeOffset;
+        }
+        if (updates.backgroundColor !== undefined) {
+            textBox.backgroundColor = updates.backgroundColor;
+        }
+        if (updates.border !== undefined) {
+            // Merge with existing border
+            const existingBorder = textBox.border;
+            textBox.border = {
+                top: updates.border.top || existingBorder.top,
+                right: updates.border.right || existingBorder.right,
+                bottom: updates.border.bottom || existingBorder.bottom,
+                left: updates.border.left || existingBorder.left
+            };
+        }
+        if (updates.padding !== undefined) {
+            textBox.padding = updates.padding;
+        }
+        this.render();
+        this.emit('textbox-updated', { textBoxId, updates });
+        return true;
+    }
+    /**
+     * Find a text box by ID across all flowing contents.
+     */
+    findTextBoxById(textBoxId) {
+        const flowingContents = [
+            this.document.bodyFlowingContent,
+            this.document.headerFlowingContent,
+            this.document.footerFlowingContent
+        ].filter(Boolean);
+        for (const flowingContent of flowingContents) {
+            const embeddedObjects = flowingContent.getEmbeddedObjects();
+            for (const [, obj] of embeddedObjects.entries()) {
+                if (obj.id === textBoxId && obj instanceof TextBoxObject) {
+                    return obj;
+                }
+            }
+        }
+        return null;
+    }
+    // ============================================
+    // Image Update Operations
+    // ============================================
+    /**
+     * Update properties of an image.
+     * @param imageId The ID of the image to update
+     * @param updates The properties to update
+     */
+    updateImage(imageId, updates) {
+        if (!this._isReady)
+            return false;
+        // Find the image in all flowing contents
+        const image = this.findImageById(imageId);
+        if (!image) {
+            Logger.warn(`[pc-editor:updateImage] Image not found: ${imageId}`);
+            return false;
+        }
+        // Apply updates
+        if (updates.position !== undefined) {
+            image.position = updates.position;
+        }
+        if (updates.relativeOffset !== undefined) {
+            image.relativeOffset = updates.relativeOffset;
+        }
+        if (updates.fit !== undefined) {
+            image.fit = updates.fit;
+        }
+        if (updates.resizeMode !== undefined) {
+            image.resizeMode = updates.resizeMode;
+        }
+        if (updates.alt !== undefined) {
+            image.alt = updates.alt;
+        }
+        this.render();
+        this.emit('image-updated', { imageId, updates });
+        return true;
+    }
+    /**
+     * Set the source of an image.
+     * @param imageId The ID of the image
+     * @param dataUrl The data URL of the new image source
+     * @param options Optional sizing options
+     */
+    setImageSource(imageId, dataUrl, options) {
+        if (!this._isReady)
+            return false;
+        const image = this.findImageById(imageId);
+        if (!image) {
+            Logger.warn(`[pc-editor:setImageSource] Image not found: ${imageId}`);
+            return false;
+        }
+        image.setSource(dataUrl, options);
+        this.render();
+        this.emit('image-source-changed', { imageId });
+        return true;
+    }
+    /**
+     * Find an image by ID across all flowing contents.
+     */
+    findImageById(imageId) {
+        const flowingContents = [
+            this.document.bodyFlowingContent,
+            this.document.headerFlowingContent,
+            this.document.footerFlowingContent
+        ].filter(Boolean);
+        for (const flowingContent of flowingContents) {
+            const embeddedObjects = flowingContent.getEmbeddedObjects();
+            for (const [, obj] of embeddedObjects.entries()) {
+                if (obj.id === imageId && obj instanceof ImageObject) {
+                    return obj;
+                }
+            }
+        }
+        return null;
+    }
+    // ============================================
     // Table Structure Operations (with undo support)
     // ============================================
     /**
@@ -23208,7 +23526,7 @@ class PCEditor extends EventEmitter {
      * @deprecated Use insertEmbeddedObject instead
      */
     insertInlineElement(_elementData, _position = 'inline') {
-        console.warn('insertInlineElement is deprecated and no longer functional. Use insertEmbeddedObject instead.');
+        Logger.warn('[pc-editor] insertInlineElement is deprecated and no longer functional. Use insertEmbeddedObject instead.');
     }
     /**
      * Apply merge data to substitute all substitution fields with their values.
@@ -23933,18 +24251,37 @@ class PCEditor extends EventEmitter {
         return this.document.bodyFlowingContent.getParagraphBoundaries();
     }
     /**
-     * Create a repeating section in the body content.
-     * Note: Repeating sections are only supported in the body, not in header/footer.
-     * @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)
+     * Create a repeating section.
+     *
+     * If a table is currently being edited (focused), creates a table row loop
+     * based on the focused cell's row. In this case, startIndex and endIndex
+     * are ignored — the focused cell's row determines the loop range.
+     *
+     * Otherwise, creates a body text repeating section at the given paragraph boundaries.
+     *
+     * @param startIndex Text index at paragraph start (ignored for table row loops)
+     * @param endIndex Text index at closing paragraph start (ignored for table row loops)
      * @param fieldPath The field path to the array to loop over (e.g., "items")
-     * @returns The created section, or null if boundaries are invalid
+     * @returns The created section/loop, or null if creation failed
      */
     createRepeatingSection(startIndex, endIndex, fieldPath) {
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
+        // 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);
+            if (loop) {
+                this.canvasManager.render();
+                this.emit('table-row-loop-added', { table: focusedTable, loop });
+            }
+            return null; // Row loops are not RepeatingSections, return null
+        }
         // Repeating sections only work in body (document-level)
+        Logger.log('[pc-editor] createRepeatingSection', startIndex, endIndex, fieldPath);
         const section = this.document.bodyFlowingContent.createRepeatingSection(startIndex, endIndex, fieldPath);
         if (section) {
             this.canvasManager.render();
@@ -24322,7 +24659,7 @@ class PCEditor extends EventEmitter {
     createEmbeddedObjectFromData(data) {
         const object = EmbeddedObjectFactory.tryCreate(data);
         if (!object) {
-            console.warn('Unknown object type:', data.objectType);
+            Logger.warn('[pc-editor] Unknown object type:', data.objectType);
         }
         return object;
     }
@@ -24351,6 +24688,13 @@ class PCEditor extends EventEmitter {
             return false;
         }
     }
+    /**
+     * Enable or disable verbose logging.
+     * When disabled (default), only errors are logged to the console.
+     */
+    setLogging(enabled) {
+        Logger.setEnabled(enabled);
+    }
     destroy() {
         this.disableTextInput();
         if (this.canvasManager) {
@@ -25179,8 +25523,2725 @@ class VerticalRuler extends RulerControl {
     }
 }
 
+/**
+ * BasePane - Abstract base class for editor property panes.
+ *
+ * Panes are property editors that work with PCEditor via the public API only.
+ * They are content-only (no title bar) for flexible layout by consumers.
+ */
+/**
+ * Abstract base class for editor panes.
+ */
+class BasePane extends BaseControl {
+    constructor(id, options = {}) {
+        super(id, options);
+        this.sectionElement = null;
+        this.className = options.className || '';
+    }
+    /**
+     * Attach the pane to an editor.
+     */
+    attach(options) {
+        // Store the section element if provided
+        this.sectionElement = options.sectionElement || null;
+        super.attach(options);
+    }
+    /**
+     * Show the pane (and section element if provided).
+     */
+    show() {
+        this._isVisible = true;
+        if (this.sectionElement) {
+            this.sectionElement.style.display = '';
+        }
+        if (this.element) {
+            this.element.style.display = '';
+            this.update();
+        }
+        this.emit('visibility-changed', { visible: true });
+    }
+    /**
+     * Hide the pane (and section element if provided).
+     */
+    hide() {
+        this._isVisible = false;
+        if (this.sectionElement) {
+            this.sectionElement.style.display = 'none';
+        }
+        if (this.element) {
+            this.element.style.display = 'none';
+        }
+        this.emit('visibility-changed', { visible: false });
+    }
+    /**
+     * Create a form group element with label.
+     */
+    createFormGroup(label, inputElement, options) {
+        const group = document.createElement('div');
+        group.className = 'pc-pane-form-group';
+        if (options?.inline) {
+            group.classList.add('pc-pane-form-group--inline');
+        }
+        const labelEl = document.createElement('label');
+        labelEl.className = 'pc-pane-label';
+        labelEl.textContent = label;
+        group.appendChild(labelEl);
+        group.appendChild(inputElement);
+        if (options?.hint) {
+            const hintEl = document.createElement('span');
+            hintEl.className = 'pc-pane-hint';
+            hintEl.textContent = options.hint;
+            group.appendChild(hintEl);
+        }
+        return group;
+    }
+    /**
+     * Create a text input element.
+     */
+    createTextInput(options) {
+        const input = document.createElement('input');
+        input.type = options?.type || 'text';
+        input.className = 'pc-pane-input';
+        if (options?.placeholder) {
+            input.placeholder = options.placeholder;
+        }
+        if (options?.value !== undefined) {
+            input.value = options.value;
+        }
+        return input;
+    }
+    /**
+     * Create a number input element.
+     */
+    createNumberInput(options) {
+        const input = document.createElement('input');
+        input.type = 'number';
+        input.className = 'pc-pane-input pc-pane-input--number';
+        if (options?.min !== undefined)
+            input.min = String(options.min);
+        if (options?.max !== undefined)
+            input.max = String(options.max);
+        if (options?.step !== undefined)
+            input.step = String(options.step);
+        if (options?.value !== undefined)
+            input.value = String(options.value);
+        return input;
+    }
+    /**
+     * Create a select element with options.
+     */
+    createSelect(optionsList, selectedValue) {
+        const select = document.createElement('select');
+        select.className = 'pc-pane-select';
+        for (const opt of optionsList) {
+            const option = document.createElement('option');
+            option.value = opt.value;
+            option.textContent = opt.label;
+            if (opt.value === selectedValue) {
+                option.selected = true;
+            }
+            select.appendChild(option);
+        }
+        return select;
+    }
+    /**
+     * Create a color input element.
+     */
+    createColorInput(value) {
+        const input = document.createElement('input');
+        input.type = 'color';
+        input.className = 'pc-pane-color';
+        if (value) {
+            input.value = value;
+        }
+        return input;
+    }
+    /**
+     * Create a checkbox element.
+     */
+    createCheckbox(label, checked) {
+        const wrapper = document.createElement('label');
+        wrapper.className = 'pc-pane-checkbox';
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        if (checked) {
+            input.checked = true;
+        }
+        const span = document.createElement('span');
+        span.textContent = label;
+        wrapper.appendChild(input);
+        wrapper.appendChild(span);
+        return wrapper;
+    }
+    /**
+     * Create a button element.
+     */
+    createButton(label, options) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'pc-pane-button';
+        if (options?.variant) {
+            button.classList.add(`pc-pane-button--${options.variant}`);
+        }
+        button.textContent = label;
+        return button;
+    }
+    /**
+     * Create a button group container.
+     */
+    createButtonGroup() {
+        const group = document.createElement('div');
+        group.className = 'pc-pane-button-group';
+        return group;
+    }
+    /**
+     * Create a section divider with optional label.
+     */
+    createSection(label) {
+        const section = document.createElement('div');
+        section.className = 'pc-pane-section';
+        if (label) {
+            const labelEl = document.createElement('div');
+            labelEl.className = 'pc-pane-section-label';
+            labelEl.textContent = label;
+            section.appendChild(labelEl);
+        }
+        return section;
+    }
+    /**
+     * Create a row container for inline elements.
+     */
+    createRow() {
+        const row = document.createElement('div');
+        row.className = 'pc-pane-row';
+        return row;
+    }
+    /**
+     * Create a hint/info text element.
+     */
+    createHint(text) {
+        const hint = document.createElement('div');
+        hint.className = 'pc-pane-hint';
+        hint.textContent = text;
+        return hint;
+    }
+    /**
+     * Add immediate apply listener for text inputs (blur + Enter).
+     */
+    addImmediateApplyListener(element, handler) {
+        const apply = () => {
+            handler(element.value);
+        };
+        // Selects and color inputs: apply on change
+        if (element instanceof HTMLSelectElement ||
+            (element instanceof HTMLInputElement && element.type === 'color')) {
+            element.addEventListener('change', apply);
+            this.eventCleanup.push(() => element.removeEventListener('change', apply));
+        }
+        else {
+            // Text/number inputs: apply on blur or Enter
+            element.addEventListener('blur', apply);
+            const keyHandler = (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    apply();
+                }
+            };
+            element.addEventListener('keydown', keyHandler);
+            this.eventCleanup.push(() => {
+                element.removeEventListener('blur', apply);
+                element.removeEventListener('keydown', keyHandler);
+            });
+        }
+    }
+    /**
+     * Add immediate apply listener for checkbox inputs.
+     */
+    addCheckboxListener(element, handler) {
+        const apply = () => handler(element.checked);
+        element.addEventListener('change', apply);
+        this.eventCleanup.push(() => element.removeEventListener('change', apply));
+    }
+    /**
+     * Add button click handler with focus steal prevention.
+     */
+    addButtonListener(button, handler) {
+        // Prevent focus steal on mousedown
+        const preventFocus = (e) => {
+            e.preventDefault();
+            this.saveEditorContext();
+        };
+        button.addEventListener('mousedown', preventFocus);
+        button.addEventListener('click', handler);
+        this.eventCleanup.push(() => {
+            button.removeEventListener('mousedown', preventFocus);
+            button.removeEventListener('click', handler);
+        });
+    }
+    /**
+     * Save editor context before UI elements steal focus.
+     */
+    saveEditorContext() {
+        if (this.editor) {
+            this.editor.saveEditingContext();
+        }
+    }
+    /**
+     * Final createElement that wraps content in pane structure.
+     * Content-only, no title bar.
+     */
+    createElement() {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'pc-pane';
+        if (this.className) {
+            wrapper.classList.add(this.className);
+        }
+        wrapper.setAttribute('data-pane-id', this.id);
+        const content = this.createContent();
+        wrapper.appendChild(content);
+        return wrapper;
+    }
+}
+
+/**
+ * DocumentInfoPane - Read-only document information display.
+ *
+ * Shows:
+ * - Page count
+ * - Page size
+ * - Page orientation
+ */
+class DocumentInfoPane extends BasePane {
+    constructor(id = 'document-info') {
+        super(id, { className: 'pc-pane-document-info' });
+        this.pageCountEl = null;
+        this.pageSizeEl = null;
+        this.pageOrientationEl = null;
+    }
+    attach(options) {
+        super.attach(options);
+        // Subscribe to document changes
+        if (this.editor) {
+            const updateHandler = () => this.update();
+            this.editor.on('document-changed', updateHandler);
+            this.editor.on('page-added', updateHandler);
+            this.editor.on('page-removed', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('document-changed', updateHandler);
+                this.editor?.off('page-added', updateHandler);
+                this.editor?.off('page-removed', updateHandler);
+            });
+            // Initial update
+            this.update();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        container.className = 'pc-pane-label-value-grid';
+        // Page count
+        container.appendChild(this.createLabel('Pages:'));
+        this.pageCountEl = this.createValue('0');
+        container.appendChild(this.pageCountEl);
+        container.appendChild(this.createSpacer());
+        // Page size
+        container.appendChild(this.createLabel('Size:'));
+        this.pageSizeEl = this.createValue('-');
+        container.appendChild(this.pageSizeEl);
+        container.appendChild(this.createSpacer());
+        // Page orientation
+        container.appendChild(this.createLabel('Orientation:'));
+        this.pageOrientationEl = this.createValue('-');
+        container.appendChild(this.pageOrientationEl);
+        container.appendChild(this.createSpacer());
+        return container;
+    }
+    createLabel(text) {
+        const label = document.createElement('span');
+        label.className = 'pc-pane-label pc-pane-margin-label';
+        label.textContent = text;
+        return label;
+    }
+    createValue(text) {
+        const value = document.createElement('span');
+        value.className = 'pc-pane-info-value';
+        value.textContent = text;
+        return value;
+    }
+    createSpacer() {
+        return document.createElement('div');
+    }
+    /**
+     * Update the displayed information from the editor.
+     */
+    update() {
+        if (!this.editor)
+            return;
+        const doc = this.editor.getDocument();
+        if (this.pageCountEl) {
+            this.pageCountEl.textContent = doc.pages.length.toString();
+        }
+        if (this.pageSizeEl && doc.settings) {
+            this.pageSizeEl.textContent = doc.settings.pageSize;
+        }
+        if (this.pageOrientationEl && doc.settings) {
+            const orientation = doc.settings.pageOrientation;
+            this.pageOrientationEl.textContent =
+                orientation.charAt(0).toUpperCase() + orientation.slice(1);
+        }
+    }
+}
+
+/**
+ * ViewSettingsPane - Toggle buttons for view options.
+ *
+ * Toggles:
+ * - Rulers (requires external callback since rulers are optional controls)
+ * - Control characters
+ * - Margin lines
+ * - Grid
+ */
+class ViewSettingsPane extends BasePane {
+    constructor(id = 'view-settings', options = {}) {
+        super(id, { className: 'pc-pane-view-settings', ...options });
+        this.rulersBtn = null;
+        this.controlCharsBtn = null;
+        this.marginLinesBtn = null;
+        this.gridBtn = null;
+        this.onToggleRulers = options.onToggleRulers;
+        this.rulersVisible = options.rulersVisible ?? true;
+    }
+    attach(options) {
+        super.attach(options);
+        // Subscribe to editor events
+        if (this.editor) {
+            const updateHandler = () => this.updateButtonStates();
+            this.editor.on('grid-changed', updateHandler);
+            this.editor.on('margin-lines-changed', updateHandler);
+            this.editor.on('control-characters-changed', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('grid-changed', updateHandler);
+                this.editor?.off('margin-lines-changed', updateHandler);
+                this.editor?.off('control-characters-changed', updateHandler);
+            });
+            // Initial state
+            this.updateButtonStates();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        container.className = 'pc-pane-button-group pc-pane-view-toggles';
+        // Rulers toggle (only if callback provided)
+        if (this.onToggleRulers) {
+            this.rulersBtn = this.createToggleButton('Rulers', this.rulersVisible);
+            this.addButtonListener(this.rulersBtn, () => this.toggleRulers());
+            container.appendChild(this.rulersBtn);
+        }
+        // Control characters toggle
+        this.controlCharsBtn = this.createToggleButton('Control Chars', false);
+        this.addButtonListener(this.controlCharsBtn, () => this.toggleControlChars());
+        container.appendChild(this.controlCharsBtn);
+        // Margin lines toggle
+        this.marginLinesBtn = this.createToggleButton('Margin Lines', true);
+        this.addButtonListener(this.marginLinesBtn, () => this.toggleMarginLines());
+        container.appendChild(this.marginLinesBtn);
+        // Grid toggle
+        this.gridBtn = this.createToggleButton('Grid', true);
+        this.addButtonListener(this.gridBtn, () => this.toggleGrid());
+        container.appendChild(this.gridBtn);
+        return container;
+    }
+    createToggleButton(label, active) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'pc-pane-toggle';
+        if (active) {
+            button.classList.add('pc-pane-toggle--active');
+        }
+        button.textContent = label;
+        button.title = `Toggle ${label}`;
+        return button;
+    }
+    toggleRulers() {
+        if (this.onToggleRulers) {
+            this.onToggleRulers();
+            this.rulersVisible = !this.rulersVisible;
+            this.rulersBtn?.classList.toggle('pc-pane-toggle--active', this.rulersVisible);
+        }
+    }
+    toggleControlChars() {
+        if (!this.editor)
+            return;
+        const current = this.editor.getShowControlCharacters();
+        this.editor.setShowControlCharacters(!current);
+    }
+    toggleMarginLines() {
+        if (!this.editor)
+            return;
+        const current = this.editor.getShowMarginLines();
+        this.editor.setShowMarginLines(!current);
+    }
+    toggleGrid() {
+        if (!this.editor)
+            return;
+        const current = this.editor.getShowGrid();
+        this.editor.setShowGrid(!current);
+    }
+    updateButtonStates() {
+        if (!this.editor)
+            return;
+        if (this.controlCharsBtn) {
+            this.controlCharsBtn.classList.toggle('pc-pane-toggle--active', this.editor.getShowControlCharacters());
+        }
+        if (this.marginLinesBtn) {
+            this.marginLinesBtn.classList.toggle('pc-pane-toggle--active', this.editor.getShowMarginLines());
+        }
+        if (this.gridBtn) {
+            this.gridBtn.classList.toggle('pc-pane-toggle--active', this.editor.getShowGrid());
+        }
+    }
+    /**
+     * Update ruler button state externally (since rulers are external controls).
+     */
+    setRulersVisible(visible) {
+        this.rulersVisible = visible;
+        this.rulersBtn?.classList.toggle('pc-pane-toggle--active', visible);
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.updateButtonStates();
+    }
+}
+
+/**
+ * DocumentSettingsPane - Edit margins, page size, and orientation.
+ *
+ * Uses the PCEditor public API:
+ * - editor.getDocumentSettings()
+ * - editor.updateDocumentSettings()
+ */
+class DocumentSettingsPane extends BasePane {
+    constructor(id = 'document-settings') {
+        super(id, { className: 'pc-pane-document-settings' });
+        this.marginTopInput = null;
+        this.marginRightInput = null;
+        this.marginBottomInput = null;
+        this.marginLeftInput = null;
+        this.pageSizeSelect = null;
+        this.orientationSelect = null;
+    }
+    attach(options) {
+        super.attach(options);
+        // Load current settings
+        if (this.editor) {
+            this.loadSettings();
+            // Subscribe to document changes
+            const updateHandler = () => this.loadSettings();
+            this.editor.on('document-changed', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('document-changed', updateHandler);
+            });
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Margins section
+        const marginsSection = this.createSection('Margins (mm)');
+        // Five-column grid: label, edit, label, edit, stretch
+        const marginsGrid = document.createElement('div');
+        marginsGrid.className = 'pc-pane-margins-grid-5col';
+        this.marginTopInput = this.createNumberInput({ min: 5, max: 50, step: 0.5, value: 20 });
+        this.marginRightInput = this.createNumberInput({ min: 5, max: 50, step: 0.5, value: 20 });
+        this.marginBottomInput = this.createNumberInput({ min: 5, max: 50, step: 0.5, value: 20 });
+        this.marginLeftInput = this.createNumberInput({ min: 5, max: 50, step: 0.5, value: 20 });
+        // Apply margins on blur
+        const applyMargins = () => this.applyMargins();
+        this.marginTopInput.addEventListener('blur', applyMargins);
+        this.marginRightInput.addEventListener('blur', applyMargins);
+        this.marginBottomInput.addEventListener('blur', applyMargins);
+        this.marginLeftInput.addEventListener('blur', applyMargins);
+        this.eventCleanup.push(() => {
+            this.marginTopInput?.removeEventListener('blur', applyMargins);
+            this.marginRightInput?.removeEventListener('blur', applyMargins);
+            this.marginBottomInput?.removeEventListener('blur', applyMargins);
+            this.marginLeftInput?.removeEventListener('blur', applyMargins);
+        });
+        // Row 1: Top / Right
+        const topLabel = this.createMarginLabel('Top:');
+        const rightLabel = this.createMarginLabel('Right:');
+        marginsGrid.appendChild(topLabel);
+        marginsGrid.appendChild(this.marginTopInput);
+        marginsGrid.appendChild(rightLabel);
+        marginsGrid.appendChild(this.marginRightInput);
+        marginsGrid.appendChild(this.createSpacer());
+        // Row 2: Bottom / Left
+        const bottomLabel = this.createMarginLabel('Bottom:');
+        const leftLabel = this.createMarginLabel('Left:');
+        marginsGrid.appendChild(bottomLabel);
+        marginsGrid.appendChild(this.marginBottomInput);
+        marginsGrid.appendChild(leftLabel);
+        marginsGrid.appendChild(this.marginLeftInput);
+        marginsGrid.appendChild(this.createSpacer());
+        marginsSection.appendChild(marginsGrid);
+        container.appendChild(marginsSection);
+        // Page settings section using label-value grid: label, value, stretch
+        const pageSection = this.createSection();
+        const pageGrid = document.createElement('div');
+        pageGrid.className = 'pc-pane-label-value-grid';
+        // Page Size
+        this.pageSizeSelect = this.createSelect([
+            { value: 'A4', label: 'A4' },
+            { value: 'Letter', label: 'Letter' },
+            { value: 'Legal', label: 'Legal' },
+            { value: 'A3', label: 'A3' }
+        ], 'A4');
+        this.addImmediateApplyListener(this.pageSizeSelect, () => this.applyPageSettings());
+        pageGrid.appendChild(this.createMarginLabel('Page Size:'));
+        pageGrid.appendChild(this.pageSizeSelect);
+        pageGrid.appendChild(this.createSpacer());
+        // Orientation
+        this.orientationSelect = this.createSelect([
+            { value: 'portrait', label: 'Portrait' },
+            { value: 'landscape', label: 'Landscape' }
+        ], 'portrait');
+        this.addImmediateApplyListener(this.orientationSelect, () => this.applyPageSettings());
+        pageGrid.appendChild(this.createMarginLabel('Orientation:'));
+        pageGrid.appendChild(this.orientationSelect);
+        pageGrid.appendChild(this.createSpacer());
+        pageSection.appendChild(pageGrid);
+        container.appendChild(pageSection);
+        return container;
+    }
+    createMarginLabel(text) {
+        const label = document.createElement('label');
+        label.className = 'pc-pane-label pc-pane-margin-label';
+        label.textContent = text;
+        return label;
+    }
+    createSpacer() {
+        const spacer = document.createElement('div');
+        return spacer;
+    }
+    loadSettings() {
+        if (!this.editor)
+            return;
+        try {
+            const settings = this.editor.getDocumentSettings();
+            if (this.marginTopInput) {
+                this.marginTopInput.value = settings.margins.top.toString();
+            }
+            if (this.marginRightInput) {
+                this.marginRightInput.value = settings.margins.right.toString();
+            }
+            if (this.marginBottomInput) {
+                this.marginBottomInput.value = settings.margins.bottom.toString();
+            }
+            if (this.marginLeftInput) {
+                this.marginLeftInput.value = settings.margins.left.toString();
+            }
+            if (this.pageSizeSelect) {
+                this.pageSizeSelect.value = settings.pageSize;
+            }
+            if (this.orientationSelect) {
+                this.orientationSelect.value = settings.pageOrientation;
+            }
+        }
+        catch (error) {
+            console.error('Failed to load document settings:', error);
+        }
+    }
+    applyMargins() {
+        if (!this.editor)
+            return;
+        const margins = {
+            top: parseFloat(this.marginTopInput?.value || '20'),
+            right: parseFloat(this.marginRightInput?.value || '20'),
+            bottom: parseFloat(this.marginBottomInput?.value || '20'),
+            left: parseFloat(this.marginLeftInput?.value || '20')
+        };
+        try {
+            this.editor.updateDocumentSettings({ margins });
+        }
+        catch (error) {
+            console.error('Failed to update margins:', error);
+        }
+    }
+    applyPageSettings() {
+        if (!this.editor)
+            return;
+        const settings = {};
+        if (this.pageSizeSelect) {
+            settings.pageSize = this.pageSizeSelect.value;
+        }
+        if (this.orientationSelect) {
+            settings.pageOrientation = this.orientationSelect.value;
+        }
+        try {
+            this.editor.updateDocumentSettings(settings);
+        }
+        catch (error) {
+            console.error('Failed to update page settings:', error);
+        }
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.loadSettings();
+    }
+}
+
+/**
+ * MergeDataPane - JSON data input for mail merge/substitution.
+ *
+ * Uses the PCEditor public API:
+ * - editor.applyMergeData()
+ */
+class MergeDataPane extends BasePane {
+    constructor(id = 'merge-data', options = {}) {
+        super(id, { className: 'pc-pane-merge-data', ...options });
+        this.textarea = null;
+        this.errorHint = null;
+        this.initialData = options.initialData;
+        this.placeholder = options.placeholder || '{"customerName": "John Doe", "orderNumber": "12345"}';
+        this.rows = options.rows ?? 10;
+        this.onApply = options.onApply;
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Textarea for JSON
+        const textareaGroup = this.createFormGroup('JSON Data', this.createTextarea());
+        container.appendChild(textareaGroup);
+        // Error hint (hidden by default)
+        this.errorHint = this.createHint('');
+        this.errorHint.style.display = 'none';
+        this.errorHint.style.color = '#dc3545';
+        container.appendChild(this.errorHint);
+        // Apply button
+        const applyBtn = this.createButton('Apply Merge Data', { variant: 'primary' });
+        this.addButtonListener(applyBtn, () => this.applyMergeData());
+        container.appendChild(applyBtn);
+        return container;
+    }
+    createTextarea() {
+        this.textarea = document.createElement('textarea');
+        this.textarea.className = 'pc-pane-textarea pc-pane-merge-data-input';
+        this.textarea.rows = this.rows;
+        this.textarea.placeholder = this.placeholder;
+        this.textarea.spellcheck = false;
+        if (this.initialData) {
+            this.textarea.value = JSON.stringify(this.initialData, null, 2);
+        }
+        // Clear error on input
+        this.textarea.addEventListener('input', () => {
+            if (this.errorHint) {
+                this.errorHint.style.display = 'none';
+            }
+        });
+        return this.textarea;
+    }
+    applyMergeData() {
+        if (!this.editor || !this.textarea)
+            return;
+        try {
+            const mergeData = JSON.parse(this.textarea.value);
+            this.editor.applyMergeData(mergeData);
+            if (this.errorHint) {
+                this.errorHint.style.display = 'none';
+            }
+            this.onApply?.(true);
+        }
+        catch (error) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            if (this.errorHint) {
+                if (error instanceof SyntaxError) {
+                    this.errorHint.textContent = 'Invalid JSON syntax';
+                }
+                else {
+                    this.errorHint.textContent = err.message;
+                }
+                this.errorHint.style.display = 'block';
+            }
+            this.onApply?.(false, err);
+        }
+    }
+    /**
+     * Get the current JSON data from the textarea.
+     * Returns null if the JSON is invalid.
+     */
+    getData() {
+        if (!this.textarea)
+            return null;
+        try {
+            return JSON.parse(this.textarea.value);
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Set the JSON data in the textarea.
+     */
+    setData(data) {
+        if (this.textarea) {
+            this.textarea.value = JSON.stringify(data, null, 2);
+            if (this.errorHint) {
+                this.errorHint.style.display = 'none';
+            }
+        }
+    }
+    /**
+     * Update the pane (no-op for MergeDataPane as it doesn't track editor state).
+     */
+    update() {
+        // MergeDataPane doesn't need to update from editor state
+    }
+}
+
+/**
+ * FormattingPane - Text formatting controls.
+ *
+ * Controls:
+ * - Bold/Italic toggles
+ * - Alignment buttons (left, center, right, justify)
+ * - List buttons (bullet, numbered, indent, outdent)
+ * - Font family/size dropdowns
+ * - Text color and highlight color pickers
+ *
+ * Uses the PCEditor public API:
+ * - editor.getUnifiedFormattingAtCursor()
+ * - editor.applyFormattingWithFallback()
+ * - editor.setPendingFormatting()
+ * - editor.getSavedOrCurrentSelection()
+ * - editor.getUnifiedAlignmentAtCursor()
+ * - editor.setUnifiedAlignment()
+ * - editor.toggleBulletList()
+ * - editor.toggleNumberedList()
+ * - editor.indentParagraph()
+ * - editor.outdentParagraph()
+ * - editor.getListFormatting()
+ */
+const DEFAULT_FONT_FAMILIES = [
+    'Arial',
+    'Times New Roman',
+    'Georgia',
+    'Verdana',
+    'Courier New'
+];
+const DEFAULT_FONT_SIZES = [10, 12, 14, 16, 18, 20, 24, 28, 32, 36];
+class FormattingPane extends BasePane {
+    constructor(id = 'formatting', options = {}) {
+        super(id, { className: 'pc-pane-formatting', ...options });
+        // Style toggles
+        this.boldBtn = null;
+        this.italicBtn = null;
+        // Alignment buttons
+        this.alignLeftBtn = null;
+        this.alignCenterBtn = null;
+        this.alignRightBtn = null;
+        this.alignJustifyBtn = null;
+        // List buttons
+        this.bulletListBtn = null;
+        this.numberedListBtn = null;
+        this.indentBtn = null;
+        this.outdentBtn = null;
+        // Font controls
+        this.fontFamilySelect = null;
+        this.fontSizeSelect = null;
+        this.colorInput = null;
+        this.highlightInput = null;
+        this.fontFamilies = options.fontFamilies ?? DEFAULT_FONT_FAMILIES;
+        this.fontSizes = options.fontSizes ?? DEFAULT_FONT_SIZES;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // 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);
+            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);
+            });
+            // Initial update
+            this.updateFromEditor();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Style section (Bold, Italic)
+        const styleSection = this.createSection('Style');
+        const styleGroup = this.createButtonGroup();
+        this.boldBtn = this.createButton('B');
+        this.boldBtn.title = 'Bold';
+        this.boldBtn.style.fontWeight = 'bold';
+        this.addButtonListener(this.boldBtn, () => this.toggleBold());
+        this.italicBtn = this.createButton('I');
+        this.italicBtn.title = 'Italic';
+        this.italicBtn.style.fontStyle = 'italic';
+        this.addButtonListener(this.italicBtn, () => this.toggleItalic());
+        styleGroup.appendChild(this.boldBtn);
+        styleGroup.appendChild(this.italicBtn);
+        styleSection.appendChild(styleGroup);
+        container.appendChild(styleSection);
+        // Alignment section
+        const alignSection = this.createSection('Alignment');
+        const alignGroup = this.createButtonGroup();
+        this.alignLeftBtn = this.createButton('');
+        this.alignLeftBtn.title = 'Align Left';
+        this.alignLeftBtn.classList.add('pc-pane-button--icon', 'pc-pane-button--align-left');
+        this.addButtonListener(this.alignLeftBtn, () => this.setAlignment('left'));
+        this.alignCenterBtn = this.createButton('');
+        this.alignCenterBtn.title = 'Center';
+        this.alignCenterBtn.classList.add('pc-pane-button--icon', 'pc-pane-button--align-center');
+        this.addButtonListener(this.alignCenterBtn, () => this.setAlignment('center'));
+        this.alignRightBtn = this.createButton('');
+        this.alignRightBtn.title = 'Align Right';
+        this.alignRightBtn.classList.add('pc-pane-button--icon', 'pc-pane-button--align-right');
+        this.addButtonListener(this.alignRightBtn, () => this.setAlignment('right'));
+        this.alignJustifyBtn = this.createButton('');
+        this.alignJustifyBtn.title = 'Justify';
+        this.alignJustifyBtn.classList.add('pc-pane-button--icon', 'pc-pane-button--align-justify');
+        this.addButtonListener(this.alignJustifyBtn, () => this.setAlignment('justify'));
+        alignGroup.appendChild(this.alignLeftBtn);
+        alignGroup.appendChild(this.alignCenterBtn);
+        alignGroup.appendChild(this.alignRightBtn);
+        alignGroup.appendChild(this.alignJustifyBtn);
+        alignSection.appendChild(alignGroup);
+        container.appendChild(alignSection);
+        // Lists section
+        const listsSection = this.createSection('Lists');
+        const listsGroup = this.createButtonGroup();
+        this.bulletListBtn = this.createButton('\u2022'); // •
+        this.bulletListBtn.title = 'Bullet List';
+        this.addButtonListener(this.bulletListBtn, () => this.toggleBulletList());
+        this.numberedListBtn = this.createButton('1.');
+        this.numberedListBtn.title = 'Numbered List';
+        this.addButtonListener(this.numberedListBtn, () => this.toggleNumberedList());
+        this.indentBtn = this.createButton('\u2192'); // →
+        this.indentBtn.title = 'Increase Indent';
+        this.addButtonListener(this.indentBtn, () => this.indent());
+        this.outdentBtn = this.createButton('\u2190'); // ←
+        this.outdentBtn.title = 'Decrease Indent';
+        this.addButtonListener(this.outdentBtn, () => this.outdent());
+        listsGroup.appendChild(this.bulletListBtn);
+        listsGroup.appendChild(this.numberedListBtn);
+        listsGroup.appendChild(this.indentBtn);
+        listsGroup.appendChild(this.outdentBtn);
+        listsSection.appendChild(listsGroup);
+        container.appendChild(listsSection);
+        // Font section
+        const fontSection = this.createSection('Font');
+        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));
+        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));
+        container.appendChild(fontSection);
+        // Color section
+        const colorSection = this.createSection('Color');
+        const colorRow = this.createRow();
+        const colorGroup = document.createElement('div');
+        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');
+        this.highlightInput = this.createColorInput('#ffff00');
+        this.addImmediateApplyListener(this.highlightInput, () => this.applyHighlight());
+        const highlightForm = this.createFormGroup('Highlight', 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);
+        container.appendChild(colorSection);
+        return container;
+    }
+    updateFromEditor() {
+        if (!this.editor)
+            return;
+        // Get formatting at cursor
+        const formatting = this.editor.getUnifiedFormattingAtCursor();
+        if (formatting) {
+            // Update bold button
+            this.boldBtn?.classList.toggle('pc-pane-button--active', formatting.fontWeight === 'bold');
+            // Update italic button
+            this.italicBtn?.classList.toggle('pc-pane-button--active', formatting.fontStyle === 'italic');
+            // Update font family
+            if (this.fontFamilySelect && formatting.fontFamily) {
+                this.fontFamilySelect.value = formatting.fontFamily;
+            }
+            // Update font size
+            if (this.fontSizeSelect && formatting.fontSize) {
+                this.fontSizeSelect.value = formatting.fontSize.toString();
+            }
+            // Update color
+            if (this.colorInput && formatting.color) {
+                this.colorInput.value = formatting.color;
+            }
+            // Update highlight
+            if (this.highlightInput && formatting.backgroundColor) {
+                this.highlightInput.value = formatting.backgroundColor;
+            }
+        }
+        // Update alignment buttons
+        const alignment = this.editor.getUnifiedAlignmentAtCursor();
+        this.updateAlignmentButtons(alignment);
+        // Update list buttons
+        this.updateListButtons();
+    }
+    updateAlignmentButtons(alignment) {
+        const buttons = [
+            { btn: this.alignLeftBtn, align: 'left' },
+            { btn: this.alignCenterBtn, align: 'center' },
+            { btn: this.alignRightBtn, align: 'right' },
+            { btn: this.alignJustifyBtn, align: 'justify' }
+        ];
+        for (const { btn, align } of buttons) {
+            btn?.classList.toggle('pc-pane-button--active', align === alignment);
+        }
+    }
+    updateListButtons() {
+        if (!this.editor)
+            return;
+        try {
+            const listFormatting = this.editor.getListFormatting();
+            if (listFormatting) {
+                this.bulletListBtn?.classList.toggle('pc-pane-button--active', listFormatting.listType === 'bullet');
+                this.numberedListBtn?.classList.toggle('pc-pane-button--active', listFormatting.listType === 'number');
+            }
+        }
+        catch {
+            // No text editing active
+        }
+    }
+    getSelection() {
+        if (!this.editor)
+            return null;
+        return this.editor.getSavedOrCurrentSelection();
+    }
+    applyFormatting(formatting) {
+        if (!this.editor)
+            return;
+        const selection = this.getSelection();
+        try {
+            if (selection) {
+                this.editor.applyFormattingWithFallback(selection.start, selection.end, formatting);
+            }
+            else {
+                this.editor.setPendingFormatting(formatting);
+            }
+            this.editor.clearSavedEditingContext();
+            this.updateFromEditor();
+            this.editor.enableTextInput();
+        }
+        catch (error) {
+            console.error('Formatting error:', error);
+        }
+    }
+    toggleBold() {
+        const isActive = this.boldBtn?.classList.contains('pc-pane-button--active');
+        this.applyFormatting({ fontWeight: isActive ? 'normal' : 'bold' });
+    }
+    toggleItalic() {
+        const isActive = this.italicBtn?.classList.contains('pc-pane-button--active');
+        this.applyFormatting({ fontStyle: isActive ? 'normal' : 'italic' });
+    }
+    applyFontFamily() {
+        if (this.fontFamilySelect) {
+            this.applyFormatting({ fontFamily: this.fontFamilySelect.value });
+        }
+    }
+    applyFontSize() {
+        if (this.fontSizeSelect) {
+            this.applyFormatting({ fontSize: parseInt(this.fontSizeSelect.value, 10) });
+        }
+    }
+    applyTextColor() {
+        if (this.colorInput) {
+            this.applyFormatting({ color: this.colorInput.value });
+        }
+    }
+    applyHighlight() {
+        if (this.highlightInput) {
+            this.applyFormatting({ backgroundColor: this.highlightInput.value });
+        }
+    }
+    clearHighlight() {
+        this.applyFormatting({ backgroundColor: undefined });
+    }
+    setAlignment(alignment) {
+        if (!this.editor)
+            return;
+        try {
+            this.editor.setUnifiedAlignment(alignment);
+            this.updateAlignmentButtons(alignment);
+        }
+        catch (error) {
+            console.error('Alignment error:', error);
+        }
+    }
+    toggleBulletList() {
+        if (!this.editor)
+            return;
+        try {
+            this.editor.toggleBulletList();
+            this.updateListButtons();
+        }
+        catch (error) {
+            console.error('Bullet list error:', error);
+        }
+    }
+    toggleNumberedList() {
+        if (!this.editor)
+            return;
+        try {
+            this.editor.toggleNumberedList();
+            this.updateListButtons();
+        }
+        catch (error) {
+            console.error('Numbered list error:', error);
+        }
+    }
+    indent() {
+        if (!this.editor)
+            return;
+        try {
+            this.editor.indentParagraph();
+            this.updateListButtons();
+        }
+        catch (error) {
+            console.error('Indent error:', error);
+        }
+    }
+    outdent() {
+        if (!this.editor)
+            return;
+        try {
+            this.editor.outdentParagraph();
+            this.updateListButtons();
+        }
+        catch (error) {
+            console.error('Outdent error:', error);
+        }
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.updateFromEditor();
+    }
+}
+
+/**
+ * HyperlinkPane - Edit hyperlink URL and title.
+ *
+ * This pane is shown when a hyperlink is selected/cursor is in a hyperlink.
+ *
+ * Uses the PCEditor public API:
+ * - editor.getHyperlinkAt()
+ * - editor.updateHyperlink()
+ * - editor.removeHyperlink()
+ * - editor.getCursorPosition()
+ */
+class HyperlinkPane extends BasePane {
+    constructor(id = 'hyperlink', options = {}) {
+        super(id, { className: 'pc-pane-hyperlink', ...options });
+        this.urlInput = null;
+        this.titleInput = null;
+        this.rangeHint = null;
+        this.currentHyperlink = null;
+        this._isUpdating = false;
+        this.onApply = options.onApply;
+        this.onRemove = options.onRemove;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // Update on cursor changes
+            const updateHandler = () => this.updateFromCursor();
+            this.editor.on('cursor-changed', updateHandler);
+            this.editor.on('selection-changed', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('cursor-changed', updateHandler);
+                this.editor?.off('selection-changed', updateHandler);
+            });
+            // Initial update
+            this.updateFromCursor();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // URL input
+        this.urlInput = this.createTextInput({ placeholder: 'https://example.com' });
+        container.appendChild(this.createFormGroup('URL', this.urlInput));
+        // Title input
+        this.titleInput = this.createTextInput({ placeholder: 'Link title (optional)' });
+        container.appendChild(this.createFormGroup('Title', this.titleInput));
+        // 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 Link', { variant: 'danger' });
+        removeBtn.style.marginTop = '0.5rem';
+        this.addButtonListener(removeBtn, () => this.removeHyperlink());
+        container.appendChild(removeBtn);
+        // Range hint
+        this.rangeHint = this.createHint('');
+        container.appendChild(this.rangeHint);
+        return container;
+    }
+    updateFromCursor() {
+        if (!this.editor || this._isUpdating)
+            return;
+        this._isUpdating = true;
+        try {
+            const cursorPos = this.editor.getCursorPosition();
+            const hyperlink = this.editor.getHyperlinkAt(cursorPos);
+            if (hyperlink) {
+                this.showHyperlink(hyperlink);
+            }
+            else {
+                this.hideHyperlink();
+            }
+        }
+        finally {
+            this._isUpdating = false;
+        }
+    }
+    showHyperlink(hyperlink) {
+        this.currentHyperlink = hyperlink;
+        if (this.urlInput) {
+            this.urlInput.value = hyperlink.url;
+        }
+        if (this.titleInput) {
+            this.titleInput.value = hyperlink.title || '';
+        }
+        if (this.rangeHint) {
+            this.rangeHint.textContent = `Link spans characters ${hyperlink.startIndex} to ${hyperlink.endIndex}`;
+        }
+        // Show the pane
+        this.show();
+    }
+    hideHyperlink() {
+        this.currentHyperlink = null;
+        this.hide();
+    }
+    applyChanges() {
+        if (!this.editor || !this.currentHyperlink)
+            return;
+        try {
+            const url = this.urlInput?.value.trim() || '';
+            const title = this.titleInput?.value.trim() || undefined;
+            if (!url) {
+                this.onApply?.(false, new Error('URL is required'));
+                return;
+            }
+            this.editor.updateHyperlink(this.currentHyperlink.id, { url, title });
+            // Update local reference
+            this.currentHyperlink.url = url;
+            this.currentHyperlink.title = title;
+            this.onApply?.(true);
+        }
+        catch (error) {
+            this.onApply?.(false, error instanceof Error ? error : new Error(String(error)));
+        }
+    }
+    removeHyperlink() {
+        if (!this.editor || !this.currentHyperlink)
+            return;
+        try {
+            this.editor.removeHyperlink(this.currentHyperlink.id);
+            this.hideHyperlink();
+            this.onRemove?.(true);
+        }
+        catch {
+            this.onRemove?.(false);
+        }
+    }
+    /**
+     * Get the currently selected hyperlink.
+     */
+    getCurrentHyperlink() {
+        return this.currentHyperlink;
+    }
+    /**
+     * Check if a hyperlink is currently selected.
+     */
+    hasHyperlink() {
+        return this.currentHyperlink !== null;
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.updateFromCursor();
+    }
+}
+
+/**
+ * SubstitutionFieldPane - Edit substitution field properties.
+ *
+ * Shows:
+ * - Field name
+ * - Default value
+ * - Format configuration (value type, number/currency/date formats)
+ *
+ * Uses the PCEditor public API:
+ * - editor.getFieldAt()
+ * - editor.updateField()
+ */
+class SubstitutionFieldPane extends BasePane {
+    constructor(id = 'substitution-field', options = {}) {
+        super(id, { className: 'pc-pane-substitution-field', ...options });
+        this.fieldNameInput = null;
+        this.fieldDefaultInput = null;
+        this.valueTypeSelect = null;
+        this.numberFormatSelect = null;
+        this.currencyFormatSelect = null;
+        this.dateFormatSelect = null;
+        this.positionHint = null;
+        this.numberFormatGroup = null;
+        this.currencyFormatGroup = null;
+        this.dateFormatGroup = null;
+        this.currentField = null;
+        this.onApplyCallback = options.onApply;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // Listen for field selection events
+            const selectionHandler = (event) => {
+                if (event.type === 'field' && event.field) {
+                    this.showField(event.field);
+                }
+                else if (!event.type || event.type !== 'field') ;
+            };
+            this.editor.on('selection-change', selectionHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('selection-change', selectionHandler);
+            });
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Field name input
+        this.fieldNameInput = this.createTextInput({ placeholder: 'Field name' });
+        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));
+        // Value type select
+        this.valueTypeSelect = this.createSelect([
+            { value: '', label: '(None)' },
+            { value: 'number', label: 'Number' },
+            { value: 'currency', label: 'Currency' },
+            { value: 'date', label: 'Date' }
+        ]);
+        this.addImmediateApplyListener(this.valueTypeSelect, () => this.updateFormatGroups());
+        container.appendChild(this.createFormGroup('Value Type', this.valueTypeSelect));
+        // Number format group
+        this.numberFormatGroup = this.createSection();
+        this.numberFormatGroup.style.display = 'none';
+        this.numberFormatSelect = this.createSelect([
+            { value: '0', label: 'Integer (0)' },
+            { value: '0.00', label: 'Two decimals (0.00)' },
+            { 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));
+        container.appendChild(this.numberFormatGroup);
+        // Currency format group
+        this.currencyFormatGroup = this.createSection();
+        this.currencyFormatGroup.style.display = 'none';
+        this.currencyFormatSelect = this.createSelect([
+            { value: 'USD', label: 'USD ($)' },
+            { value: 'EUR', label: 'EUR' },
+            { value: 'GBP', label: 'GBP' },
+            { value: 'JPY', label: 'JPY' }
+        ]);
+        this.currencyFormatGroup.appendChild(this.createFormGroup('Currency', this.currencyFormatSelect));
+        container.appendChild(this.currencyFormatGroup);
+        // Date format group
+        this.dateFormatGroup = this.createSection();
+        this.dateFormatGroup.style.display = 'none';
+        this.dateFormatSelect = this.createSelect([
+            { value: 'MMMM D, YYYY', label: 'January 1, 2026' },
+            { value: 'MM/DD/YYYY', label: '01/01/2026' },
+            { 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));
+        container.appendChild(this.dateFormatGroup);
+        // Apply button
+        const applyBtn = this.createButton('Apply Changes', { variant: 'primary' });
+        this.addButtonListener(applyBtn, () => this.applyChanges());
+        container.appendChild(applyBtn);
+        // Position hint
+        this.positionHint = this.createHint('');
+        container.appendChild(this.positionHint);
+        return container;
+    }
+    updateFormatGroups() {
+        const valueType = this.valueTypeSelect?.value || '';
+        if (this.numberFormatGroup) {
+            this.numberFormatGroup.style.display = valueType === 'number' ? 'block' : 'none';
+        }
+        if (this.currencyFormatGroup) {
+            this.currencyFormatGroup.style.display = valueType === 'currency' ? 'block' : 'none';
+        }
+        if (this.dateFormatGroup) {
+            this.dateFormatGroup.style.display = valueType === 'date' ? 'block' : 'none';
+        }
+    }
+    /**
+     * Show the pane with the given field.
+     */
+    showField(field) {
+        this.currentField = field;
+        if (this.fieldNameInput) {
+            this.fieldNameInput.value = field.fieldName;
+        }
+        if (this.fieldDefaultInput) {
+            this.fieldDefaultInput.value = field.defaultValue || '';
+        }
+        if (this.positionHint) {
+            this.positionHint.textContent = `Field at position ${field.textIndex}`;
+        }
+        // Populate format options
+        if (this.valueTypeSelect) {
+            this.valueTypeSelect.value = field.formatConfig?.valueType || '';
+        }
+        if (this.numberFormatSelect && field.formatConfig?.numberFormat) {
+            this.numberFormatSelect.value = field.formatConfig.numberFormat;
+        }
+        if (this.currencyFormatSelect && field.formatConfig?.currencyFormat) {
+            this.currencyFormatSelect.value = field.formatConfig.currencyFormat;
+        }
+        if (this.dateFormatSelect && field.formatConfig?.dateFormat) {
+            this.dateFormatSelect.value = field.formatConfig.dateFormat;
+        }
+        this.updateFormatGroups();
+        this.show();
+    }
+    /**
+     * Hide the pane and clear the current field.
+     */
+    hideField() {
+        this.currentField = null;
+        this.hide();
+    }
+    applyChanges() {
+        if (!this.editor || !this.currentField) {
+            this.onApplyCallback?.(false, new Error('No field selected'));
+            return;
+        }
+        const fieldName = this.fieldNameInput?.value.trim();
+        if (!fieldName) {
+            this.onApplyCallback?.(false, new Error('Field name cannot be empty'));
+            return;
+        }
+        const updates = {};
+        if (fieldName !== this.currentField.fieldName) {
+            updates.fieldName = fieldName;
+        }
+        const defaultValue = this.fieldDefaultInput?.value || undefined;
+        if (defaultValue !== this.currentField.defaultValue) {
+            updates.defaultValue = defaultValue;
+        }
+        // Build format config
+        const valueType = this.valueTypeSelect?.value;
+        if (valueType) {
+            const formatConfig = {
+                valueType: valueType
+            };
+            if (valueType === 'number' && this.numberFormatSelect?.value) {
+                formatConfig.numberFormat = this.numberFormatSelect.value;
+            }
+            else if (valueType === 'currency' && this.currencyFormatSelect?.value) {
+                formatConfig.currencyFormat = this.currencyFormatSelect.value;
+            }
+            else if (valueType === 'date' && this.dateFormatSelect?.value) {
+                formatConfig.dateFormat = this.dateFormatSelect.value;
+            }
+            updates.formatConfig = formatConfig;
+        }
+        else if (this.currentField.formatConfig) {
+            updates.formatConfig = undefined;
+        }
+        if (Object.keys(updates).length === 0) {
+            return; // No changes
+        }
+        try {
+            const success = this.editor.updateField(this.currentField.textIndex, updates);
+            if (success) {
+                // Update the current field reference
+                this.currentField = this.editor.getFieldAt(this.currentField.textIndex) || null;
+                this.onApplyCallback?.(true);
+            }
+            else {
+                this.onApplyCallback?.(false, new Error('Failed to update field'));
+            }
+        }
+        catch (error) {
+            this.onApplyCallback?.(false, error instanceof Error ? error : new Error(String(error)));
+        }
+    }
+    /**
+     * Get the currently selected field.
+     */
+    getCurrentField() {
+        return this.currentField;
+    }
+    /**
+     * Check if a field is currently selected.
+     */
+    hasField() {
+        return this.currentField !== null;
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        // Field pane doesn't auto-update - it's driven by selection events
+    }
+}
+
+/**
+ * RepeatingSectionPane - Edit repeating section (loop) properties.
+ *
+ * Shows:
+ * - Field path (array property in merge data)
+ * - Position information
+ *
+ * Uses the PCEditor public API:
+ * - editor.getRepeatingSection()
+ * - editor.updateRepeatingSectionFieldPath()
+ * - editor.removeRepeatingSection()
+ */
+class RepeatingSectionPane extends BasePane {
+    constructor(id = 'repeating-section', options = {}) {
+        super(id, { className: 'pc-pane-repeating-section', ...options });
+        this.fieldPathInput = 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 repeating section selection
+            const selectionHandler = (event) => {
+                if (event.type === 'repeating-section' && event.sectionId) {
+                    const section = this.editor?.getRepeatingSection(event.sectionId);
+                    if (section) {
+                        this.showSection(section);
+                    }
+                }
+            };
+            const removedHandler = () => {
+                this.hideSection();
+            };
+            this.editor.on('selection-change', selectionHandler);
+            this.editor.on('repeating-section-removed', removedHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('selection-change', selectionHandler);
+                this.editor?.off('repeating-section-removed', removedHandler);
+            });
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Field path input
+        this.fieldPathInput = this.createTextInput({ placeholder: 'items' });
+        container.appendChild(this.createFormGroup('Array Field Path', this.fieldPathInput, {
+            hint: 'Path to array in merge data (e.g., "items" or "contact.addresses")'
+        }));
+        // 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 Loop', { 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.fieldPathInput) {
+            this.fieldPathInput.value = section.fieldPath;
+        }
+        if (this.positionHint) {
+            this.positionHint.textContent = `Loop 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 fieldPath = this.fieldPathInput?.value.trim();
+        if (!fieldPath) {
+            this.onApplyCallback?.(false, new Error('Field path cannot be empty'));
+            return;
+        }
+        if (fieldPath === this.currentSection.fieldPath) {
+            return; // No changes
+        }
+        try {
+            const success = this.editor.updateRepeatingSectionFieldPath(this.currentSection.id, fieldPath);
+            if (success) {
+                // Update the current section reference
+                this.currentSection = this.editor.getRepeatingSection(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.removeRepeatingSection(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.
+ *
+ * Shows:
+ * - Field path (array property in merge data)
+ * - Row range information
+ *
+ * Uses the TableObject API:
+ * - table.getRowLoop()
+ * - table.updateRowLoopFieldPath()
+ * - table.removeRowLoop()
+ */
+class TableRowLoopPane extends BasePane {
+    constructor(id = 'table-row-loop', options = {}) {
+        super(id, { className: 'pc-pane-table-row-loop', ...options });
+        this.fieldPathInput = null;
+        this.rangeHint = null;
+        this.currentLoop = null;
+        this.currentTable = null;
+        this.onApplyCallback = options.onApply;
+        this.onRemoveCallback = options.onRemove;
+    }
+    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
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Field path input
+        this.fieldPathInput = this.createTextInput({ placeholder: 'items' });
+        container.appendChild(this.createFormGroup('Array Field Path', this.fieldPathInput, {
+            hint: 'Path to array in merge data (e.g., "items" or "orders")'
+        }));
+        // 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 Loop', { variant: 'danger' });
+        removeBtn.style.marginTop = '0.5rem';
+        this.addButtonListener(removeBtn, () => this.removeLoop());
+        container.appendChild(removeBtn);
+        // Range hint
+        this.rangeHint = this.createHint('');
+        container.appendChild(this.rangeHint);
+        return container;
+    }
+    /**
+     * Show the pane with the given table and loop.
+     */
+    showLoop(table, loop) {
+        this.currentTable = table;
+        this.currentLoop = loop;
+        if (this.fieldPathInput) {
+            this.fieldPathInput.value = loop.fieldPath;
+        }
+        if (this.rangeHint) {
+            this.rangeHint.textContent = `Rows ${loop.startRowIndex} - ${loop.endRowIndex}`;
+        }
+        this.show();
+    }
+    /**
+     * Hide the pane and clear current loop.
+     */
+    hideLoop() {
+        this.currentTable = null;
+        this.currentLoop = null;
+        this.hide();
+    }
+    applyChanges() {
+        if (!this.currentTable || !this.currentLoop) {
+            this.onApplyCallback?.(false, new Error('No loop selected'));
+            return;
+        }
+        const fieldPath = this.fieldPathInput?.value.trim();
+        if (!fieldPath) {
+            this.onApplyCallback?.(false, new Error('Field path cannot be empty'));
+            return;
+        }
+        if (fieldPath === this.currentLoop.fieldPath) {
+            return; // No changes
+        }
+        try {
+            const success = this.currentTable.updateRowLoopFieldPath(this.currentLoop.id, fieldPath);
+            if (success) {
+                // Update the current loop reference
+                this.currentLoop = this.currentTable.getRowLoop(this.currentLoop.id) || null;
+                if (this.currentLoop) {
+                    this.showLoop(this.currentTable, this.currentLoop);
+                }
+                this.onApplyCallback?.(true);
+            }
+            else {
+                this.onApplyCallback?.(false, new Error('Failed to update loop'));
+            }
+        }
+        catch (error) {
+            this.onApplyCallback?.(false, error instanceof Error ? error : new Error(String(error)));
+        }
+    }
+    removeLoop() {
+        if (!this.currentTable || !this.currentLoop)
+            return;
+        try {
+            const success = this.currentTable.removeRowLoop(this.currentLoop.id);
+            if (success) {
+                this.hideLoop();
+                this.onRemoveCallback?.(true);
+            }
+            else {
+                this.onRemoveCallback?.(false);
+            }
+        }
+        catch {
+            this.onRemoveCallback?.(false);
+        }
+    }
+    /**
+     * Get the currently selected loop.
+     */
+    getCurrentLoop() {
+        return this.currentLoop;
+    }
+    /**
+     * Get the currently selected table.
+     */
+    getCurrentTable() {
+        return this.currentTable;
+    }
+    /**
+     * Check if a loop is currently selected.
+     */
+    hasLoop() {
+        return this.currentLoop !== null;
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        // Table row loop pane doesn't auto-update - it's driven by showLoop() calls
+    }
+}
+
+/**
+ * TextBoxPane - Edit text box properties.
+ *
+ * Shows:
+ * - Position (inline, block, relative)
+ * - Relative offset (for relative positioning)
+ * - Background color
+ * - Border (width, color, style)
+ * - Padding
+ *
+ * Uses the PCEditor public API:
+ * - editor.getSelectedTextBox()
+ * - editor.updateTextBox()
+ */
+class TextBoxPane extends BasePane {
+    constructor(id = 'textbox', options = {}) {
+        super(id, { className: 'pc-pane-textbox', ...options });
+        this.positionSelect = null;
+        this.offsetGroup = null;
+        this.offsetXInput = null;
+        this.offsetYInput = null;
+        this.bgColorInput = null;
+        this.borderWidthInput = null;
+        this.borderColorInput = null;
+        this.borderStyleSelect = null;
+        this.paddingInput = null;
+        this._isUpdating = false;
+        this.currentTextBox = null;
+        this.onApplyCallback = options.onApply;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // Listen for selection changes
+            const updateHandler = () => this.updateFromSelection();
+            this.editor.on('selection-change', updateHandler);
+            this.editor.on('textbox-updated', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('selection-change', updateHandler);
+                this.editor?.off('textbox-updated', updateHandler);
+            });
+            // Initial update
+            this.updateFromSelection();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Position section
+        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));
+        // 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.offsetGroup.appendChild(offsetRow);
+        positionSection.appendChild(this.offsetGroup);
+        container.appendChild(positionSection);
+        // Background section
+        const bgSection = this.createSection('Background');
+        this.bgColorInput = this.createColorInput('#ffffff');
+        bgSection.appendChild(this.createFormGroup('Color', this.bgColorInput));
+        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 }));
+        borderSection.appendChild(borderRow);
+        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));
+        container.appendChild(borderSection);
+        // Padding section
+        const paddingSection = this.createSection('Padding');
+        this.paddingInput = this.createNumberInput({ min: 0, max: 50, value: 8 });
+        paddingSection.appendChild(this.createFormGroup('All sides (px)', this.paddingInput));
+        container.appendChild(paddingSection);
+        // Apply button
+        const applyBtn = this.createButton('Apply Changes', { variant: 'primary' });
+        this.addButtonListener(applyBtn, () => this.applyChanges());
+        container.appendChild(applyBtn);
+        return container;
+    }
+    updateFromSelection() {
+        if (!this.editor || this._isUpdating)
+            return;
+        this._isUpdating = true;
+        try {
+            const textBox = this.editor.getSelectedTextBox?.();
+            if (textBox && !textBox.editing) {
+                this.showTextBox(textBox);
+            }
+            else {
+                this.hideTextBox();
+            }
+        }
+        finally {
+            this._isUpdating = false;
+        }
+    }
+    /**
+     * Show the pane with the given text box.
+     */
+    showTextBox(textBox) {
+        this.currentTextBox = textBox;
+        // Populate position
+        if (this.positionSelect) {
+            this.positionSelect.value = textBox.position || 'inline';
+        }
+        this.updateOffsetVisibility();
+        // Populate offset
+        if (this.offsetXInput) {
+            this.offsetXInput.value = String(textBox.relativeOffset?.x ?? 0);
+        }
+        if (this.offsetYInput) {
+            this.offsetYInput.value = String(textBox.relativeOffset?.y ?? 0);
+        }
+        // Populate background
+        if (this.bgColorInput) {
+            this.bgColorInput.value = textBox.backgroundColor || '#ffffff';
+        }
+        // Populate border (use first side with non-none style)
+        const border = textBox.border;
+        const activeBorder = border.top.style !== 'none' ? border.top :
+            border.right.style !== 'none' ? border.right :
+                border.bottom.style !== 'none' ? border.bottom :
+                    border.left.style !== 'none' ? border.left : border.top;
+        if (this.borderWidthInput) {
+            this.borderWidthInput.value = String(activeBorder.width);
+        }
+        if (this.borderColorInput) {
+            this.borderColorInput.value = activeBorder.color;
+        }
+        if (this.borderStyleSelect) {
+            this.borderStyleSelect.value = activeBorder.style;
+        }
+        // Populate padding
+        if (this.paddingInput) {
+            this.paddingInput.value = String(textBox.padding ?? 8);
+        }
+        this.show();
+    }
+    /**
+     * Hide the pane and clear current text box.
+     */
+    hideTextBox() {
+        this.currentTextBox = null;
+        this.hide();
+    }
+    updateOffsetVisibility() {
+        if (this.offsetGroup && this.positionSelect) {
+            this.offsetGroup.style.display = this.positionSelect.value === 'relative' ? 'block' : 'none';
+        }
+    }
+    applyChanges() {
+        if (!this.editor || !this.currentTextBox) {
+            this.onApplyCallback?.(false, new Error('No text box selected'));
+            return;
+        }
+        const updates = {};
+        // Position
+        if (this.positionSelect) {
+            updates.position = this.positionSelect.value;
+        }
+        // Relative offset
+        if (this.positionSelect?.value === 'relative') {
+            updates.relativeOffset = {
+                x: parseInt(this.offsetXInput?.value || '0', 10),
+                y: parseInt(this.offsetYInput?.value || '0', 10)
+            };
+        }
+        // Background color
+        if (this.bgColorInput) {
+            updates.backgroundColor = this.bgColorInput.value;
+        }
+        // Border
+        const width = parseInt(this.borderWidthInput?.value || '1', 10);
+        const color = this.borderColorInput?.value || '#cccccc';
+        const style = (this.borderStyleSelect?.value || 'solid');
+        const borderSide = { width, color, style };
+        updates.border = {
+            top: { ...borderSide },
+            right: { ...borderSide },
+            bottom: { ...borderSide },
+            left: { ...borderSide }
+        };
+        // Padding
+        if (this.paddingInput) {
+            updates.padding = parseInt(this.paddingInput.value, 10);
+        }
+        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'));
+            }
+        }
+        catch (error) {
+            this.onApplyCallback?.(false, error instanceof Error ? error : new Error(String(error)));
+        }
+    }
+    /**
+     * Get the currently selected text box.
+     */
+    getCurrentTextBox() {
+        return this.currentTextBox;
+    }
+    /**
+     * Check if a text box is currently selected.
+     */
+    hasTextBox() {
+        return this.currentTextBox !== null;
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.updateFromSelection();
+    }
+}
+
+/**
+ * ImagePane - Edit image properties.
+ *
+ * Shows:
+ * - Position (inline, block, relative)
+ * - Relative offset (for relative positioning)
+ * - Fit mode (contain, cover, fill, none, tile)
+ * - Resize mode (free, locked-aspect-ratio)
+ * - Alt text
+ * - Source file picker
+ *
+ * Uses the PCEditor public API:
+ * - editor.getSelectedImage()
+ * - editor.updateImage()
+ * - editor.setImageSource()
+ */
+class ImagePane extends BasePane {
+    constructor(id = 'image', options = {}) {
+        super(id, { className: 'pc-pane-image', ...options });
+        this.positionSelect = null;
+        this.offsetGroup = null;
+        this.offsetXInput = null;
+        this.offsetYInput = null;
+        this.fitModeSelect = null;
+        this.resizeModeSelect = null;
+        this.altTextInput = null;
+        this.fileInput = null;
+        this.currentImage = null;
+        this._isUpdating = false;
+        this.maxImageWidth = options.maxImageWidth ?? 400;
+        this.maxImageHeight = options.maxImageHeight ?? 400;
+        this.onApplyCallback = options.onApply;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // Listen for selection changes
+            const updateHandler = () => this.updateFromSelection();
+            this.editor.on('selection-change', updateHandler);
+            this.editor.on('image-updated', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('selection-change', updateHandler);
+                this.editor?.off('image-updated', updateHandler);
+            });
+            // Initial update
+            this.updateFromSelection();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Position section
+        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));
+        // 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.offsetGroup.appendChild(offsetRow);
+        positionSection.appendChild(this.offsetGroup);
+        container.appendChild(positionSection);
+        // Fit mode section
+        const fitSection = this.createSection('Display');
+        this.fitModeSelect = this.createSelect([
+            { value: 'contain', label: 'Contain' },
+            { value: 'cover', label: 'Cover' },
+            { value: 'fill', label: 'Fill' },
+            { value: 'none', label: 'None (original size)' },
+            { value: 'tile', label: 'Tile' }
+        ], 'contain');
+        fitSection.appendChild(this.createFormGroup('Fit Mode', this.fitModeSelect));
+        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.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.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);
+        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);
+        return container;
+    }
+    updateFromSelection() {
+        if (!this.editor || this._isUpdating)
+            return;
+        this._isUpdating = true;
+        try {
+            const image = this.editor.getSelectedImage?.();
+            if (image) {
+                this.showImage(image);
+            }
+            else {
+                this.hideImage();
+            }
+        }
+        finally {
+            this._isUpdating = false;
+        }
+    }
+    /**
+     * Show the pane with the given image.
+     */
+    showImage(image) {
+        this.currentImage = image;
+        // Populate position
+        if (this.positionSelect) {
+            this.positionSelect.value = image.position || 'inline';
+        }
+        this.updateOffsetVisibility();
+        // Populate offset
+        if (this.offsetXInput) {
+            this.offsetXInput.value = String(image.relativeOffset?.x ?? 0);
+        }
+        if (this.offsetYInput) {
+            this.offsetYInput.value = String(image.relativeOffset?.y ?? 0);
+        }
+        // Populate fit mode
+        if (this.fitModeSelect) {
+            this.fitModeSelect.value = image.fit || 'contain';
+        }
+        // Populate resize mode
+        if (this.resizeModeSelect) {
+            this.resizeModeSelect.value = image.resizeMode || 'locked-aspect-ratio';
+        }
+        // Populate alt text
+        if (this.altTextInput) {
+            this.altTextInput.value = image.alt || '';
+        }
+        this.show();
+    }
+    /**
+     * Hide the pane and clear current image.
+     */
+    hideImage() {
+        this.currentImage = null;
+        this.hide();
+    }
+    updateOffsetVisibility() {
+        if (this.offsetGroup && this.positionSelect) {
+            this.offsetGroup.style.display = this.positionSelect.value === 'relative' ? 'block' : 'none';
+        }
+    }
+    handleFileChange(event) {
+        if (!this.editor || !this.currentImage)
+            return;
+        const input = event.target;
+        const file = input.files?.[0];
+        if (!file)
+            return;
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const dataUrl = e.target?.result;
+            if (dataUrl && this.currentImage && this.editor) {
+                this.editor.setImageSource(this.currentImage.id, dataUrl, {
+                    maxWidth: this.maxImageWidth,
+                    maxHeight: this.maxImageHeight
+                });
+            }
+        };
+        reader.readAsDataURL(file);
+        // Reset file input so the same file can be selected again
+        input.value = '';
+    }
+    applyChanges() {
+        if (!this.editor || !this.currentImage) {
+            this.onApplyCallback?.(false, new Error('No image selected'));
+            return;
+        }
+        const updates = {};
+        // Position
+        if (this.positionSelect) {
+            updates.position = this.positionSelect.value;
+        }
+        // Relative offset
+        if (this.positionSelect?.value === 'relative') {
+            updates.relativeOffset = {
+                x: parseInt(this.offsetXInput?.value || '0', 10),
+                y: parseInt(this.offsetYInput?.value || '0', 10)
+            };
+        }
+        // Fit mode
+        if (this.fitModeSelect) {
+            updates.fit = this.fitModeSelect.value;
+        }
+        // Resize mode
+        if (this.resizeModeSelect) {
+            updates.resizeMode = this.resizeModeSelect.value;
+        }
+        // Alt text
+        if (this.altTextInput) {
+            updates.alt = this.altTextInput.value;
+        }
+        try {
+            const success = this.editor.updateImage(this.currentImage.id, updates);
+            if (success) {
+                this.onApplyCallback?.(true);
+            }
+            else {
+                this.onApplyCallback?.(false, new Error('Failed to update image'));
+            }
+        }
+        catch (error) {
+            this.onApplyCallback?.(false, error instanceof Error ? error : new Error(String(error)));
+        }
+    }
+    /**
+     * Get the currently selected image.
+     */
+    getCurrentImage() {
+        return this.currentImage;
+    }
+    /**
+     * Check if an image is currently selected.
+     */
+    hasImage() {
+        return this.currentImage !== null;
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.updateFromSelection();
+    }
+}
+
+/**
+ * TablePane - Edit table properties.
+ *
+ * Shows:
+ * - Table structure (row/column count)
+ * - Row/column insertion/removal
+ * - Header rows/columns
+ * - Default cell padding and border color
+ * - Cell-specific formatting (background, borders)
+ *
+ * Uses the PCEditor public API:
+ * - editor.getFocusedTable()
+ * - editor.tableInsertRow()
+ * - editor.tableRemoveRow()
+ * - editor.tableInsertColumn()
+ * - editor.tableRemoveColumn()
+ *
+ * And TableObject methods:
+ * - table.setHeaderRowCount()
+ * - table.setHeaderColumnCount()
+ * - table.getCell()
+ * - table.getCellsInRange()
+ */
+class TablePane extends BasePane {
+    constructor(id = 'table', options = {}) {
+        super(id, { className: 'pc-pane-table', ...options });
+        // Structure info
+        this.rowCountDisplay = null;
+        this.colCountDisplay = null;
+        this.cellSelectionDisplay = null;
+        // Header controls
+        this.headerRowInput = null;
+        this.headerColInput = null;
+        // Default controls
+        this.defaultPaddingInput = null;
+        this.defaultBorderColorInput = null;
+        // Row loop controls
+        this.loopFieldInput = null;
+        // Cell formatting controls
+        this.cellBgColorInput = null;
+        this.borderTopCheck = null;
+        this.borderRightCheck = null;
+        this.borderBottomCheck = null;
+        this.borderLeftCheck = null;
+        this.borderWidthInput = null;
+        this.borderColorInput = null;
+        this.borderStyleSelect = null;
+        this.currentTable = null;
+        this._isUpdating = false;
+        this.onApplyCallback = options.onApply;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // Listen for selection/focus changes
+            const updateHandler = () => this.updateFromFocusedTable();
+            this.editor.on('selection-change', updateHandler);
+            this.editor.on('table-cell-focus', updateHandler);
+            this.editor.on('table-cell-selection', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('selection-change', updateHandler);
+                this.editor?.off('table-cell-focus', updateHandler);
+                this.editor?.off('table-cell-selection', updateHandler);
+            });
+            // Initial update
+            this.updateFromFocusedTable();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Structure section
+        const structureSection = this.createSection('Structure');
+        const structureInfo = document.createElement('div');
+        structureInfo.className = 'pc-pane-info-list';
+        this.rowCountDisplay = document.createElement('span');
+        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);
+        structureSection.appendChild(structureInfo);
+        // Row/column buttons
+        const structureBtns = this.createButtonGroup();
+        const addRowBtn = this.createButton('+ Row');
+        this.addButtonListener(addRowBtn, () => this.insertRow());
+        const removeRowBtn = this.createButton('- Row');
+        this.addButtonListener(removeRowBtn, () => this.removeRow());
+        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();
+        this.headerRowInput = this.createNumberInput({ min: 0, max: 10, value: 0 });
+        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);
+        // Row Loop section
+        const loopSection = this.createSection('Row Loop');
+        this.loopFieldInput = this.createTextInput({ placeholder: 'items' });
+        loopSection.appendChild(this.createFormGroup('Array Field', this.loopFieldInput, {
+            hint: 'Creates a loop on the currently focused row'
+        }));
+        const createLoopBtn = this.createButton('Create Row Loop');
+        this.addButtonListener(createLoopBtn, () => this.createRowLoop());
+        loopSection.appendChild(createLoopBtn);
+        container.appendChild(loopSection);
+        // Defaults section
+        const defaultsSection = this.createSection('Defaults');
+        const defaultsRow = this.createRow();
+        this.defaultPaddingInput = this.createNumberInput({ min: 0, max: 20, value: 8 });
+        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);
+        container.appendChild(defaultsSection);
+        // Cell formatting section
+        const cellSection = this.createSection('Cell Formatting');
+        this.cellSelectionDisplay = this.createHint('No cell selected');
+        cellSection.appendChild(this.cellSelectionDisplay);
+        // Background
+        this.cellBgColorInput = this.createColorInput('#ffffff');
+        cellSection.appendChild(this.createFormGroup('Background', this.cellBgColorInput));
+        // Border checkboxes
+        const borderChecks = document.createElement('div');
+        borderChecks.className = 'pc-pane-row';
+        borderChecks.style.flexWrap = 'wrap';
+        borderChecks.style.gap = '4px';
+        this.borderTopCheck = document.createElement('input');
+        this.borderTopCheck.type = 'checkbox';
+        this.borderTopCheck.checked = true;
+        this.borderRightCheck = document.createElement('input');
+        this.borderRightCheck.type = 'checkbox';
+        this.borderRightCheck.checked = true;
+        this.borderBottomCheck = document.createElement('input');
+        this.borderBottomCheck.type = 'checkbox';
+        this.borderBottomCheck.checked = true;
+        this.borderLeftCheck = document.createElement('input');
+        this.borderLeftCheck.type = 'checkbox';
+        this.borderLeftCheck.checked = true;
+        borderChecks.appendChild(this.createCheckbox('Top', true));
+        borderChecks.appendChild(this.createCheckbox('Right', true));
+        borderChecks.appendChild(this.createCheckbox('Bottom', true));
+        borderChecks.appendChild(this.createCheckbox('Left', true));
+        // Replace created checkboxes with our tracked ones
+        const checkLabels = borderChecks.querySelectorAll('label');
+        if (checkLabels[0])
+            checkLabels[0].replaceChild(this.borderTopCheck, checkLabels[0].querySelector('input'));
+        if (checkLabels[1])
+            checkLabels[1].replaceChild(this.borderRightCheck, checkLabels[1].querySelector('input'));
+        if (checkLabels[2])
+            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));
+        // 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 }));
+        cellSection.appendChild(borderPropsRow);
+        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);
+        container.appendChild(cellSection);
+        return container;
+    }
+    updateFromFocusedTable() {
+        if (!this.editor || this._isUpdating)
+            return;
+        this._isUpdating = true;
+        try {
+            const table = this.editor.getFocusedTable();
+            if (table) {
+                this.showTable(table);
+            }
+            else {
+                this.hideTable();
+            }
+        }
+        finally {
+            this._isUpdating = false;
+        }
+    }
+    /**
+     * Show the pane with the given table.
+     */
+    showTable(table) {
+        this.currentTable = table;
+        // Update structure info
+        if (this.rowCountDisplay) {
+            this.rowCountDisplay.textContent = String(table.rowCount);
+            this.rowCountDisplay.className = 'pc-pane-info-value';
+        }
+        if (this.colCountDisplay) {
+            this.colCountDisplay.textContent = String(table.columnCount);
+            this.colCountDisplay.className = 'pc-pane-info-value';
+        }
+        // Update header counts
+        if (this.headerRowInput) {
+            this.headerRowInput.value = String(table.headerRowCount);
+        }
+        if (this.headerColInput) {
+            this.headerColInput.value = String(table.headerColumnCount);
+        }
+        // Update defaults
+        if (this.defaultPaddingInput) {
+            this.defaultPaddingInput.value = String(table.defaultCellPadding);
+        }
+        if (this.defaultBorderColorInput) {
+            this.defaultBorderColorInput.value = table.defaultBorderColor;
+        }
+        // Update cell selection info
+        this.updateCellSelectionInfo(table);
+        this.show();
+    }
+    /**
+     * Hide the pane and clear current table.
+     */
+    hideTable() {
+        this.currentTable = null;
+        this.hide();
+    }
+    updateCellSelectionInfo(table) {
+        if (!this.cellSelectionDisplay)
+            return;
+        const focusedCell = table.focusedCell;
+        const selectedRange = table.selectedRange;
+        if (selectedRange) {
+            const count = (selectedRange.end.row - selectedRange.start.row + 1) *
+                (selectedRange.end.col - selectedRange.start.col + 1);
+            this.cellSelectionDisplay.textContent = `${count} cells selected`;
+        }
+        else if (focusedCell) {
+            this.cellSelectionDisplay.textContent = `Cell [${focusedCell.row}, ${focusedCell.col}]`;
+            // Update cell formatting controls from focused cell
+            const cell = table.getCell(focusedCell.row, focusedCell.col);
+            if (cell) {
+                if (this.cellBgColorInput) {
+                    this.cellBgColorInput.value = cell.backgroundColor || '#ffffff';
+                }
+                // Update border controls
+                const border = cell.border;
+                if (this.borderTopCheck)
+                    this.borderTopCheck.checked = border.top.style !== 'none';
+                if (this.borderRightCheck)
+                    this.borderRightCheck.checked = border.right.style !== 'none';
+                if (this.borderBottomCheck)
+                    this.borderBottomCheck.checked = border.bottom.style !== 'none';
+                if (this.borderLeftCheck)
+                    this.borderLeftCheck.checked = border.left.style !== 'none';
+                // Use first active border for properties
+                const activeBorder = border.top.style !== 'none' ? border.top :
+                    border.right.style !== 'none' ? border.right :
+                        border.bottom.style !== 'none' ? border.bottom :
+                            border.left.style !== 'none' ? border.left : border.top;
+                if (this.borderWidthInput)
+                    this.borderWidthInput.value = String(activeBorder.width);
+                if (this.borderColorInput)
+                    this.borderColorInput.value = activeBorder.color;
+                if (this.borderStyleSelect)
+                    this.borderStyleSelect.value = activeBorder.style;
+            }
+        }
+        else {
+            this.cellSelectionDisplay.textContent = 'No cell selected';
+        }
+    }
+    insertRow() {
+        if (!this.editor || !this.currentTable)
+            return;
+        const focusedCell = this.currentTable.focusedCell;
+        const rowIndex = focusedCell ? focusedCell.row + 1 : this.currentTable.rowCount;
+        this.editor.tableInsertRow(this.currentTable, rowIndex);
+        this.updateFromFocusedTable();
+    }
+    removeRow() {
+        if (!this.editor || !this.currentTable)
+            return;
+        const focusedCell = this.currentTable.focusedCell;
+        if (focusedCell && this.currentTable.rowCount > 1) {
+            this.editor.tableRemoveRow(this.currentTable, focusedCell.row);
+            this.updateFromFocusedTable();
+        }
+    }
+    insertColumn() {
+        if (!this.editor || !this.currentTable)
+            return;
+        const focusedCell = this.currentTable.focusedCell;
+        const colIndex = focusedCell ? focusedCell.col + 1 : this.currentTable.columnCount;
+        this.editor.tableInsertColumn(this.currentTable, colIndex);
+        this.updateFromFocusedTable();
+    }
+    removeColumn() {
+        if (!this.editor || !this.currentTable)
+            return;
+        const focusedCell = this.currentTable.focusedCell;
+        if (focusedCell && this.currentTable.columnCount > 1) {
+            this.editor.tableRemoveColumn(this.currentTable, focusedCell.col);
+            this.updateFromFocusedTable();
+        }
+    }
+    applyHeaders() {
+        if (!this.currentTable)
+            return;
+        if (this.headerRowInput) {
+            const count = parseInt(this.headerRowInput.value, 10);
+            this.currentTable.setHeaderRowCount(count);
+        }
+        if (this.headerColInput) {
+            const count = parseInt(this.headerColInput.value, 10);
+            this.currentTable.setHeaderColumnCount(count);
+        }
+        this.editor?.render();
+        this.onApplyCallback?.(true);
+    }
+    applyDefaults() {
+        if (!this.currentTable)
+            return;
+        if (this.defaultPaddingInput) {
+            this.currentTable.defaultCellPadding = parseInt(this.defaultPaddingInput.value, 10);
+        }
+        if (this.defaultBorderColorInput) {
+            this.currentTable.defaultBorderColor = this.defaultBorderColorInput.value;
+        }
+        this.editor?.render();
+        this.onApplyCallback?.(true);
+    }
+    applyCellFormatting() {
+        if (!this.currentTable)
+            return;
+        const focusedCell = this.currentTable.focusedCell;
+        const selectedRange = this.currentTable.selectedRange;
+        // Determine cells to update
+        const cells = [];
+        if (selectedRange) {
+            for (let row = selectedRange.start.row; row <= selectedRange.end.row; row++) {
+                for (let col = selectedRange.start.col; col <= selectedRange.end.col; col++) {
+                    cells.push({ row, col });
+                }
+            }
+        }
+        else if (focusedCell) {
+            cells.push(focusedCell);
+        }
+        if (cells.length === 0)
+            return;
+        // Build border config
+        const width = parseInt(this.borderWidthInput?.value || '1', 10);
+        const color = this.borderColorInput?.value || '#cccccc';
+        const style = (this.borderStyleSelect?.value || 'solid');
+        const borderSide = { width, color, style };
+        const noneBorder = { width: 0, color: '#000000', style: 'none' };
+        const border = {
+            top: this.borderTopCheck?.checked ? { ...borderSide } : { ...noneBorder },
+            right: this.borderRightCheck?.checked ? { ...borderSide } : { ...noneBorder },
+            bottom: this.borderBottomCheck?.checked ? { ...borderSide } : { ...noneBorder },
+            left: this.borderLeftCheck?.checked ? { ...borderSide } : { ...noneBorder }
+        };
+        const bgColor = this.cellBgColorInput?.value;
+        // Apply to each cell
+        for (const { row, col } of cells) {
+            const cell = this.currentTable.getCell(row, col);
+            if (cell) {
+                if (bgColor) {
+                    cell.backgroundColor = bgColor;
+                }
+                cell.border = border;
+            }
+        }
+        this.editor?.render();
+        this.onApplyCallback?.(true);
+    }
+    /**
+     * Get the currently focused table.
+     */
+    getCurrentTable() {
+        return this.currentTable;
+    }
+    /**
+     * Check if a table is currently focused.
+     */
+    hasTable() {
+        return this.currentTable !== null;
+    }
+    createRowLoop() {
+        if (!this.editor || !this.currentTable) {
+            this.onApplyCallback?.(false, new Error('No table focused'));
+            return;
+        }
+        const fieldPath = this.loopFieldInput?.value.trim() || '';
+        if (!fieldPath) {
+            this.onApplyCallback?.(false, new Error('Array field path is required'));
+            return;
+        }
+        // Uses the unified createRepeatingSection API which detects
+        // that a table is focused and creates a row loop on the focused row
+        this.editor.createRepeatingSection(0, 0, fieldPath);
+        this.onApplyCallback?.(true);
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.updateFromFocusedTable();
+    }
+}
+
 exports.BaseControl = BaseControl;
 exports.BaseEmbeddedObject = BaseEmbeddedObject;
+exports.BasePane = BasePane;
 exports.BaseTextRegion = BaseTextRegion;
 exports.BodyTextRegion = BodyTextRegion;
 exports.ClipboardManager = ClipboardManager;
@@ -25188,15 +28249,22 @@ exports.ContentAnalyzer = ContentAnalyzer;
 exports.DEFAULT_IMPORT_OPTIONS = DEFAULT_IMPORT_OPTIONS;
 exports.Document = Document;
 exports.DocumentBuilder = DocumentBuilder;
+exports.DocumentInfoPane = DocumentInfoPane;
+exports.DocumentSettingsPane = DocumentSettingsPane;
 exports.EmbeddedObjectFactory = EmbeddedObjectFactory;
 exports.EmbeddedObjectManager = EmbeddedObjectManager;
 exports.EventEmitter = EventEmitter;
 exports.FlowingTextContent = FlowingTextContent;
 exports.FooterTextRegion = FooterTextRegion;
+exports.FormattingPane = FormattingPane;
 exports.HeaderTextRegion = HeaderTextRegion;
 exports.HorizontalRuler = HorizontalRuler;
 exports.HtmlConverter = HtmlConverter;
+exports.HyperlinkPane = HyperlinkPane;
 exports.ImageObject = ImageObject;
+exports.ImagePane = ImagePane;
+exports.Logger = Logger;
+exports.MergeDataPane = MergeDataPane;
 exports.PCEditor = PCEditor;
 exports.PDFImportError = PDFImportError;
 exports.PDFImporter = PDFImporter;
@@ -25204,16 +28272,22 @@ exports.PDFParser = PDFParser;
 exports.Page = Page;
 exports.RegionManager = RegionManager;
 exports.RepeatingSectionManager = RepeatingSectionManager;
+exports.RepeatingSectionPane = RepeatingSectionPane;
 exports.RulerControl = RulerControl;
 exports.SubstitutionFieldManager = SubstitutionFieldManager;
+exports.SubstitutionFieldPane = SubstitutionFieldPane;
 exports.TableCell = TableCell;
 exports.TableObject = TableObject;
+exports.TablePane = TablePane;
 exports.TableRow = TableRow;
+exports.TableRowLoopPane = TableRowLoopPane;
 exports.TextBoxObject = TextBoxObject;
+exports.TextBoxPane = TextBoxPane;
 exports.TextFormattingManager = TextFormattingManager;
 exports.TextLayout = TextLayout;
 exports.TextMeasurer = TextMeasurer;
 exports.TextPositionCalculator = TextPositionCalculator;
 exports.TextState = TextState;
 exports.VerticalRuler = VerticalRuler;
+exports.ViewSettingsPane = ViewSettingsPane;
 //# sourceMappingURL=pc-editor.js.map