@productcloudos/editor 1.0.4 → 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 };
     }
@@ -931,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).
      */
@@ -3834,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;
@@ -4729,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 {
@@ -4793,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
@@ -4948,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.
@@ -5041,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.
@@ -5091,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) {
@@ -5408,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.
@@ -5446,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
@@ -5454,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) {
@@ -5528,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({
@@ -5565,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)) {
@@ -5806,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({
@@ -6146,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';
@@ -6685,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;
             }
         }
@@ -7508,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
@@ -8296,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)) {
@@ -9280,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) {
@@ -9797,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
@@ -9932,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}`);
                 }
             }
         }
@@ -9986,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}`);
                 }
             }
         }
@@ -12525,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)
@@ -12538,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);
                 }
@@ -15184,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 = [
@@ -15196,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) });
@@ -15251,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,
@@ -15265,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;
                     }
                 }
@@ -15273,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: [] });
@@ -15522,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);
         });
@@ -15997,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 {
@@ -16743,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);
@@ -16766,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
@@ -18794,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);
         }
     }
     /**
@@ -18844,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 ---
@@ -20176,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;
     }
@@ -21209,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({
@@ -21233,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() {
@@ -21640,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
@@ -21730,6 +21863,7 @@ class PCEditor extends EventEmitter {
         }
     }
     loadDocument(documentData) {
+        Logger.log('[pc-editor] loadDocument');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -21756,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');
         }
@@ -21764,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');
         }
@@ -21805,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');
         }
@@ -21816,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);
@@ -21833,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');
         }
@@ -21853,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');
         }
@@ -21941,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');
         }
@@ -21966,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();
@@ -21978,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();
@@ -22011,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);
@@ -22057,6 +22205,7 @@ class PCEditor extends EventEmitter {
         return this.canvasManager.getContentOffset();
     }
     fitToWidth() {
+        Logger.log('[pc-editor] fitToWidth');
         if (!this._isReady)
             return;
         this.canvasManager.fitToWidth();
@@ -22065,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');
         }
@@ -22123,6 +22276,7 @@ class PCEditor extends EventEmitter {
         };
     }
     addPage() {
+        Logger.log('[pc-editor] addPage');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -22134,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');
         }
@@ -22208,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
@@ -22232,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
@@ -22598,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
@@ -22798,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');
@@ -22814,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');
         }
@@ -22830,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');
         }
@@ -22843,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');
         }
@@ -22888,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');
         }
@@ -22914,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');
         }
@@ -22939,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');
         }
@@ -22964,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');
         }
@@ -22989,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');
         }
@@ -23137,7 +23302,7 @@ class PCEditor extends EventEmitter {
         // Find the text box in all flowing contents
         const textBox = this.findTextBoxById(textBoxId);
         if (!textBox) {
-            console.warn(`[PCEditor.updateTextBox] Text box not found: ${textBoxId}`);
+            Logger.warn(`[pc-editor:updateTextBox] Text box not found: ${textBoxId}`);
             return false;
         }
         // Apply updates
@@ -23200,7 +23365,7 @@ class PCEditor extends EventEmitter {
         // Find the image in all flowing contents
         const image = this.findImageById(imageId);
         if (!image) {
-            console.warn(`[PCEditor.updateImage] Image not found: ${imageId}`);
+            Logger.warn(`[pc-editor:updateImage] Image not found: ${imageId}`);
             return false;
         }
         // Apply updates
@@ -23234,7 +23399,7 @@ class PCEditor extends EventEmitter {
             return false;
         const image = this.findImageById(imageId);
         if (!image) {
-            console.warn(`[PCEditor.setImageSource] Image not found: ${imageId}`);
+            Logger.warn(`[pc-editor:setImageSource] Image not found: ${imageId}`);
             return false;
         }
         image.setSource(dataUrl, options);
@@ -23361,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.
@@ -24086,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();
@@ -24475,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;
     }
@@ -24504,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) {
@@ -25646,33 +25837,38 @@ class DocumentInfoPane extends BasePane {
     }
     createContent() {
         const container = document.createElement('div');
-        container.className = 'pc-pane-info-list';
+        container.className = 'pc-pane-label-value-grid';
         // Page count
-        const countRow = this.createInfoRow('Pages', '0');
-        this.pageCountEl = countRow.querySelector('.pc-pane-info-value');
-        container.appendChild(countRow);
+        container.appendChild(this.createLabel('Pages:'));
+        this.pageCountEl = this.createValue('0');
+        container.appendChild(this.pageCountEl);
+        container.appendChild(this.createSpacer());
         // Page size
-        const sizeRow = this.createInfoRow('Size', '-');
-        this.pageSizeEl = sizeRow.querySelector('.pc-pane-info-value');
-        container.appendChild(sizeRow);
+        container.appendChild(this.createLabel('Size:'));
+        this.pageSizeEl = this.createValue('-');
+        container.appendChild(this.pageSizeEl);
+        container.appendChild(this.createSpacer());
         // Page orientation
-        const orientationRow = this.createInfoRow('Orientation', '-');
-        this.pageOrientationEl = orientationRow.querySelector('.pc-pane-info-value');
-        container.appendChild(orientationRow);
+        container.appendChild(this.createLabel('Orientation:'));
+        this.pageOrientationEl = this.createValue('-');
+        container.appendChild(this.pageOrientationEl);
+        container.appendChild(this.createSpacer());
         return container;
     }
-    createInfoRow(label, value) {
-        const row = document.createElement('div');
-        row.className = 'pc-pane-info';
-        const labelEl = document.createElement('span');
-        labelEl.className = 'pc-pane-info-label';
-        labelEl.textContent = label;
-        const valueEl = document.createElement('span');
-        valueEl.className = 'pc-pane-info-value';
-        valueEl.textContent = value;
-        row.appendChild(labelEl);
-        row.appendChild(valueEl);
-        return row;
+    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.
@@ -25852,24 +26048,48 @@ class DocumentSettingsPane extends BasePane {
         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';
+        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 });
-        marginsGrid.appendChild(this.createFormGroup('Top', this.marginTopInput, { inline: true }));
-        marginsGrid.appendChild(this.createFormGroup('Right', this.marginRightInput, { inline: true }));
-        marginsGrid.appendChild(this.createFormGroup('Bottom', this.marginBottomInput, { inline: true }));
-        marginsGrid.appendChild(this.createFormGroup('Left', this.marginLeftInput, { inline: true }));
+        // 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);
-        // Apply margins button
-        const applyMarginsBtn = this.createButton('Apply Margins');
-        this.addButtonListener(applyMarginsBtn, () => this.applyMargins());
-        marginsSection.appendChild(applyMarginsBtn);
         container.appendChild(marginsSection);
-        // Page size section
-        const pageSizeSection = this.createSection();
+        // 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' },
@@ -25877,19 +26097,32 @@ class DocumentSettingsPane extends BasePane {
             { value: 'A3', label: 'A3' }
         ], 'A4');
         this.addImmediateApplyListener(this.pageSizeSelect, () => this.applyPageSettings());
-        pageSizeSection.appendChild(this.createFormGroup('Page Size', this.pageSizeSelect));
-        container.appendChild(pageSizeSection);
-        // Orientation section
-        const orientationSection = this.createSection();
+        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());
-        orientationSection.appendChild(this.createFormGroup('Orientation', this.orientationSelect));
-        container.appendChild(orientationSection);
+        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;
@@ -26429,6 +26662,7 @@ class HyperlinkPane extends BasePane {
         this.titleInput = null;
         this.rangeHint = null;
         this.currentHyperlink = null;
+        this._isUpdating = false;
         this.onApply = options.onApply;
         this.onRemove = options.onRemove;
     }
@@ -26470,15 +26704,21 @@ class HyperlinkPane extends BasePane {
         return container;
     }
     updateFromCursor() {
-        if (!this.editor)
+        if (!this.editor || this._isUpdating)
             return;
-        const cursorPos = this.editor.getCursorPosition();
-        const hyperlink = this.editor.getHyperlinkAt(cursorPos);
-        if (hyperlink) {
-            this.showHyperlink(hyperlink);
+        this._isUpdating = true;
+        try {
+            const cursorPos = this.editor.getCursorPosition();
+            const hyperlink = this.editor.getHyperlinkAt(cursorPos);
+            if (hyperlink) {
+                this.showHyperlink(hyperlink);
+            }
+            else {
+                this.hideHyperlink();
+            }
         }
-        else {
-            this.hideHyperlink();
+        finally {
+            this._isUpdating = false;
         }
     }
     showHyperlink(hyperlink) {
@@ -27097,6 +27337,7 @@ class TextBoxPane extends BasePane {
         this.borderColorInput = null;
         this.borderStyleSelect = null;
         this.paddingInput = null;
+        this._isUpdating = false;
         this.currentTextBox = null;
         this.onApplyCallback = options.onApply;
     }
@@ -27170,14 +27411,20 @@ class TextBoxPane extends BasePane {
         return container;
     }
     updateFromSelection() {
-        if (!this.editor)
+        if (!this.editor || this._isUpdating)
             return;
-        const textBox = this.editor.getSelectedTextBox?.();
-        if (textBox && !textBox.editing) {
-            this.showTextBox(textBox);
+        this._isUpdating = true;
+        try {
+            const textBox = this.editor.getSelectedTextBox?.();
+            if (textBox && !textBox.editing) {
+                this.showTextBox(textBox);
+            }
+            else {
+                this.hideTextBox();
+            }
         }
-        else {
-            this.hideTextBox();
+        finally {
+            this._isUpdating = false;
         }
     }
     /**
@@ -27331,6 +27578,7 @@ class ImagePane extends BasePane {
         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;
@@ -27412,14 +27660,20 @@ class ImagePane extends BasePane {
         return container;
     }
     updateFromSelection() {
-        if (!this.editor)
+        if (!this.editor || this._isUpdating)
             return;
-        const image = this.editor.getSelectedImage?.();
-        if (image) {
-            this.showImage(image);
+        this._isUpdating = true;
+        try {
+            const image = this.editor.getSelectedImage?.();
+            if (image) {
+                this.showImage(image);
+            }
+            else {
+                this.hideImage();
+            }
         }
-        else {
-            this.hideImage();
+        finally {
+            this._isUpdating = false;
         }
     }
     /**
@@ -27584,6 +27838,8 @@ class TablePane extends BasePane {
         // Default controls
         this.defaultPaddingInput = null;
         this.defaultBorderColorInput = null;
+        // Row loop controls
+        this.loopFieldInput = null;
         // Cell formatting controls
         this.cellBgColorInput = null;
         this.borderTopCheck = null;
@@ -27594,6 +27850,7 @@ class TablePane extends BasePane {
         this.borderColorInput = null;
         this.borderStyleSelect = null;
         this.currentTable = null;
+        this._isUpdating = false;
         this.onApplyCallback = options.onApply;
     }
     attach(options) {
@@ -27660,6 +27917,16 @@ class TablePane extends BasePane {
         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();
@@ -27732,14 +27999,20 @@ class TablePane extends BasePane {
         return container;
     }
     updateFromFocusedTable() {
-        if (!this.editor)
+        if (!this.editor || this._isUpdating)
             return;
-        const table = this.editor.getFocusedTable();
-        if (table) {
-            this.showTable(table);
+        this._isUpdating = true;
+        try {
+            const table = this.editor.getFocusedTable();
+            if (table) {
+                this.showTable(table);
+            }
+            else {
+                this.hideTable();
+            }
         }
-        else {
-            this.hideTable();
+        finally {
+            this._isUpdating = false;
         }
     }
     /**
@@ -27943,6 +28216,21 @@ class TablePane extends BasePane {
     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.
      */
@@ -27975,6 +28263,7 @@ exports.HtmlConverter = HtmlConverter;
 exports.HyperlinkPane = HyperlinkPane;
 exports.ImageObject = ImageObject;
 exports.ImagePane = ImagePane;
+exports.Logger = Logger;
 exports.MergeDataPane = MergeDataPane;
 exports.PCEditor = PCEditor;
 exports.PDFImportError = PDFImportError;