@productcloudos/editor 1.0.4 → 1.0.6

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
@@ -7617,6 +7758,9 @@ class TableObject extends BaseEmbeddedObject {
                 result.mergedCell.markReflowDirty();
             }
             this.clearSelection();
+            // Focus the anchor (top-left) cell of the merged range
+            const normalized = TableCellMerger.normalizeRange(mergeRange);
+            this.focusCell(normalized.start.row, normalized.start.col);
             this.emit('cells-merged', { range: mergeRange });
             this.emit('content-changed', {});
         }
@@ -8296,14 +8440,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 +9430,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 +9947,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 +10055,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 +10109,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 +12648,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 +12661,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);
                 }
@@ -14194,7 +14317,8 @@ class CanvasManager extends EventEmitter {
             const pageIndex = this.document.pages.findIndex(p => p.id === pageId);
             // Get the slice for this page (for multi-page tables)
             const slice = table.getRenderedSlice(pageIndex);
-            const tablePosition = slice?.position || table.renderedPosition;
+            const tablePosition = slice?.position ||
+                (table.renderedPageIndex === pageIndex ? table.renderedPosition : null);
             const sliceHeight = slice?.height || table.height;
             // Check if point is within the table slice on this page
             const isInsideTable = tablePosition &&
@@ -14227,6 +14351,7 @@ class CanvasManager extends EventEmitter {
                             end: cellAddr
                         });
                         this.render();
+                        this.emit('table-cell-selection-changed', { table });
                         e.preventDefault();
                         return;
                     }
@@ -14506,7 +14631,8 @@ class CanvasManager extends EventEmitter {
             const currentPageIndex = this.document.pages.findIndex(p => p.id === pageId);
             // Get the slice for the current page (for multi-page tables)
             const slice = table.getRenderedSlice(currentPageIndex);
-            const tablePosition = slice?.position || table.renderedPosition;
+            const tablePosition = slice?.position ||
+                (table.renderedPageIndex === currentPageIndex ? table.renderedPosition : null);
             const sliceHeight = slice?.height || table.height;
             if (tablePosition) {
                 // Check if point is within the table slice on this page
@@ -14536,6 +14662,7 @@ class CanvasManager extends EventEmitter {
                             end: cellAddr
                         });
                         this.render();
+                        this.emit('table-cell-selection-changed', { table });
                     }
                 }
             }
@@ -15079,40 +15206,46 @@ class CanvasManager extends EventEmitter {
                     canvas.style.cursor = 'move';
                     return;
                 }
-                // Show text cursor for text boxes
-                if (object instanceof TextBoxObject) {
-                    canvas.style.cursor = 'text';
-                    return;
+                // Show text cursor for objects in edit mode, arrow otherwise
+                if (object instanceof TextBoxObject && this.editingTextBox === object) {
+                    canvas.style.cursor = CanvasManager.TEXT_CURSOR;
                 }
+                else if (object instanceof TableObject && this._focusedControl === object) {
+                    canvas.style.cursor = CanvasManager.TEXT_CURSOR;
+                }
+                else {
+                    canvas.style.cursor = 'default';
+                }
+                return;
             }
         }
         // Check for table cells (show text cursor)
         const tableCellHit = hitTestManager.queryByType(pageIndex, point, 'table-cell');
         if (tableCellHit && tableCellHit.data.type === 'table-cell') {
-            canvas.style.cursor = 'text';
+            canvas.style.cursor = CanvasManager.TEXT_CURSOR;
             return;
         }
         // Check for text regions (body, header, footer - show text cursor)
         const textRegionHit = hitTestManager.queryByType(pageIndex, point, 'text-region');
         if (textRegionHit && textRegionHit.data.type === 'text-region') {
-            canvas.style.cursor = 'text';
+            canvas.style.cursor = CanvasManager.TEXT_CURSOR;
             return;
         }
         // Also check if point is within any editable region (body, header, footer)
         // This catches cases where text region hit targets may not cover empty space
         const bodyRegion = this.regionManager.getBodyRegion();
         if (bodyRegion && bodyRegion.containsPointInRegion(point, pageIndex)) {
-            canvas.style.cursor = 'text';
+            canvas.style.cursor = CanvasManager.TEXT_CURSOR;
             return;
         }
         const headerRegion = this.regionManager.getHeaderRegion();
         if (headerRegion && headerRegion.containsPointInRegion(point, pageIndex)) {
-            canvas.style.cursor = 'text';
+            canvas.style.cursor = CanvasManager.TEXT_CURSOR;
             return;
         }
         const footerRegion = this.regionManager.getFooterRegion();
         if (footerRegion && footerRegion.containsPointInRegion(point, pageIndex)) {
-            canvas.style.cursor = 'text';
+            canvas.style.cursor = CanvasManager.TEXT_CURSOR;
             return;
         }
         canvas.style.cursor = 'default';
@@ -15130,7 +15263,8 @@ class CanvasManager extends EventEmitter {
             const { table, dividerType, index } = target.data;
             // Get the table position from slice info
             const slice = table.getRenderedSlice(pageIndex);
-            const tablePosition = slice?.position || table.renderedPosition;
+            const tablePosition = slice?.position ||
+                (table.renderedPageIndex === pageIndex ? table.renderedPosition : null);
             if (tablePosition) {
                 // Calculate the divider position based on type and index
                 let position;
@@ -15184,7 +15318,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 +15330,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 +15385,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 +15399,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 +15407,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 +15656,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);
         });
@@ -15858,7 +15992,9 @@ class CanvasManager extends EventEmitter {
                 if (obj instanceof TableObject) {
                     // For multi-page tables, check if this page has a rendered slice
                     const slice = obj.getRenderedSlice(pageIndex);
-                    const tablePosition = slice?.position || obj.renderedPosition;
+                    // Only use renderedPosition if the table was actually rendered on this page
+                    const tablePosition = slice?.position ||
+                        (obj.renderedPageIndex === pageIndex ? obj.renderedPosition : null);
                     if (tablePosition) {
                         // Check if point is inside the table slice on this page
                         const sliceHeight = slice?.height || obj.height;
@@ -15997,14 +16133,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 {
@@ -16101,6 +16238,10 @@ class CanvasManager extends EventEmitter {
 }
 CanvasManager.CELL_SELECTION_THRESHOLD = 5; // Minimum pixels to drag before cell selection starts
 CanvasManager.RELATIVE_DRAG_THRESHOLD = 3; // Minimum pixels to drag before moving starts
+// Custom text cursor as a black I-beam SVG data URI.
+// The native 'text' cursor can render as white on Windows browsers,
+// making it invisible over the white canvas background.
+CanvasManager.TEXT_CURSOR = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M5 1h2v1h2V1h2v2h-2v6h2v2h-2v6h2v2h-2v-1H7v1H5v-2h2v-6H5V9h2V3H5z' fill='%23000'/%3E%3C/svg%3E\") 8 10, text";
 
 /**
  * DataBinder handles binding data to documents.
@@ -16743,7 +16884,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 +16915,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 +18943,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 +18993,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 +20325,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 +21358,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 +21384,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() {
@@ -21378,6 +21530,10 @@ class PCEditor extends EventEmitter {
         this.canvasManager.on('tablecell-cursor-changed', (data) => {
             this.emit('tablecell-cursor-changed', data);
         });
+        // Forward table cell selection changes (multi-cell drag/shift-click)
+        this.canvasManager.on('table-cell-selection-changed', (data) => {
+            this.emit('table-cell-selection-changed', data);
+        });
         this.canvasManager.on('repeating-section-clicked', (data) => {
             // Repeating section clicked - update selection state
             if (data.section && data.section.id) {
@@ -21640,6 +21796,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 +21887,7 @@ class PCEditor extends EventEmitter {
         }
     }
     loadDocument(documentData) {
+        Logger.log('[pc-editor] loadDocument');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -21756,6 +21914,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 +21923,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 +21965,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 +21977,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 +21995,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 +22016,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 +22105,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 +22133,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 +22146,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 +22180,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 +22229,7 @@ class PCEditor extends EventEmitter {
         return this.canvasManager.getContentOffset();
     }
     fitToWidth() {
+        Logger.log('[pc-editor] fitToWidth');
         if (!this._isReady)
             return;
         this.canvasManager.fitToWidth();
@@ -22065,23 +22238,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 +22300,7 @@ class PCEditor extends EventEmitter {
         };
     }
     addPage() {
+        Logger.log('[pc-editor] addPage');
         if (!this._isReady) {
             throw new Error('Editor is not ready');
         }
@@ -22134,6 +22312,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 +22387,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 +22411,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 +22777,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 +22978,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 +22995,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 +23012,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 +23026,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 +23072,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 +23099,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 +23125,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 +23151,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 +23177,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 +23326,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 +23389,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 +23423,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);
@@ -23314,6 +23503,39 @@ class PCEditor extends EventEmitter {
         table.removeColumn(colIndex);
         this.canvasManager.render();
     }
+    /**
+     * Merge selected cells in a table.
+     * Uses the table's current cell selection range.
+     * @param table The table containing the cells to merge
+     * @returns true if cells were merged successfully
+     */
+    tableMergeCells(table) {
+        Logger.log('[pc-editor] tableMergeCells');
+        if (!this._isReady)
+            return false;
+        const result = table.mergeCells();
+        if (result.success) {
+            this.canvasManager.render();
+        }
+        return result.success;
+    }
+    /**
+     * Split a merged cell back into individual cells.
+     * @param table The table containing the merged cell
+     * @param row Row index of the merged cell
+     * @param col Column index of the merged cell
+     * @returns true if the cell was split successfully
+     */
+    tableSplitCell(table, row, col) {
+        Logger.log('[pc-editor] tableSplitCell', row, col);
+        if (!this._isReady)
+            return false;
+        const result = table.splitCell(row, col);
+        if (result.success) {
+            this.canvasManager.render();
+        }
+        return result.success;
+    }
     /**
      * Begin a compound operation. Groups multiple mutations into a single undo entry.
      * Call endCompoundOperation after making changes.
@@ -23361,7 +23583,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 +24308,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 +24716,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 +24745,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 +25894,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 +26105,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 +26154,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;
@@ -26288,9 +26578,15 @@ class FormattingPane extends BasePane {
                 this.bulletListBtn?.classList.toggle('pc-pane-button--active', listFormatting.listType === 'bullet');
                 this.numberedListBtn?.classList.toggle('pc-pane-button--active', listFormatting.listType === 'number');
             }
+            else {
+                this.bulletListBtn?.classList.remove('pc-pane-button--active');
+                this.numberedListBtn?.classList.remove('pc-pane-button--active');
+            }
         }
         catch {
             // No text editing active
+            this.bulletListBtn?.classList.remove('pc-pane-button--active');
+            this.numberedListBtn?.classList.remove('pc-pane-button--active');
         }
     }
     getSelection() {
@@ -26429,6 +26725,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 +26767,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 +27400,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 +27474,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 +27641,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 +27723,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 +27901,9 @@ class TablePane extends BasePane {
         // Default controls
         this.defaultPaddingInput = null;
         this.defaultBorderColorInput = null;
+        // Merge/split buttons
+        this.mergeCellsBtn = null;
+        this.splitCellBtn = null;
         // Cell formatting controls
         this.cellBgColorInput = null;
         this.borderTopCheck = null;
@@ -27594,6 +27914,7 @@ class TablePane extends BasePane {
         this.borderColorInput = null;
         this.borderStyleSelect = null;
         this.currentTable = null;
+        this._isUpdating = false;
         this.onApplyCallback = options.onApply;
     }
     attach(options) {
@@ -27602,12 +27923,12 @@ class TablePane extends BasePane {
             // 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.editor.on('tablecell-cursor-changed', updateHandler);
+            this.editor.on('table-cell-selection-changed', updateHandler);
             this.eventCleanup.push(() => {
                 this.editor?.off('selection-change', updateHandler);
-                this.editor?.off('table-cell-focus', updateHandler);
-                this.editor?.off('table-cell-selection', updateHandler);
+                this.editor?.off('tablecell-cursor-changed', updateHandler);
+                this.editor?.off('table-cell-selection-changed', updateHandler);
             });
             // Initial update
             this.updateFromFocusedTable();
@@ -27676,6 +27997,17 @@ class TablePane extends BasePane {
         const cellSection = this.createSection('Cell Formatting');
         this.cellSelectionDisplay = this.createHint('No cell selected');
         cellSection.appendChild(this.cellSelectionDisplay);
+        // Merge/Split buttons
+        const mergeBtnGroup = this.createButtonGroup();
+        this.mergeCellsBtn = this.createButton('Merge Cells');
+        this.mergeCellsBtn.disabled = true;
+        this.splitCellBtn = this.createButton('Split Cell');
+        this.splitCellBtn.disabled = true;
+        this.addButtonListener(this.mergeCellsBtn, () => this.doMergeCells());
+        this.addButtonListener(this.splitCellBtn, () => this.doSplitCell());
+        mergeBtnGroup.appendChild(this.mergeCellsBtn);
+        mergeBtnGroup.appendChild(this.splitCellBtn);
+        cellSection.appendChild(mergeBtnGroup);
         // Background
         this.cellBgColorInput = this.createColorInput('#ffffff');
         cellSection.appendChild(this.createFormGroup('Background', this.cellBgColorInput));
@@ -27732,14 +28064,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;
         }
     }
     /**
@@ -27786,6 +28124,15 @@ class TablePane extends BasePane {
             return;
         const focusedCell = table.focusedCell;
         const selectedRange = table.selectedRange;
+        // Update merge/split button states
+        if (this.mergeCellsBtn) {
+            const canMerge = selectedRange ? table.canMergeRange(selectedRange).canMerge : false;
+            this.mergeCellsBtn.disabled = !canMerge;
+        }
+        if (this.splitCellBtn) {
+            const canSplit = focusedCell ? table.canSplitCell(focusedCell.row, focusedCell.col).canSplit : false;
+            this.splitCellBtn.disabled = !canSplit;
+        }
         if (selectedRange) {
             const count = (selectedRange.end.row - selectedRange.start.row + 1) *
                 (selectedRange.end.col - selectedRange.start.col + 1);
@@ -27943,6 +28290,21 @@ class TablePane extends BasePane {
     hasTable() {
         return this.currentTable !== null;
     }
+    doMergeCells() {
+        if (!this.editor || !this.currentTable)
+            return;
+        this.editor.tableMergeCells(this.currentTable);
+        this.updateFromFocusedTable();
+    }
+    doSplitCell() {
+        if (!this.editor || !this.currentTable)
+            return;
+        const focused = this.currentTable.focusedCell;
+        if (!focused)
+            return;
+        this.editor.tableSplitCell(this.currentTable, focused.row, focused.col);
+        this.updateFromFocusedTable();
+    }
     /**
      * Update the pane from current editor state.
      */
@@ -27975,6 +28337,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;