@productcloudos/editor 1.0.3 → 1.0.4

package/dist/pc-editor.esm.js

@@ -843,6 +843,20 @@ class TextFormattingManager extends EventEmitter {
             this.emit('formatting-changed', { start, end, formatting });
         }
     }
+    /**
+     * Set formatting at a specific position, replacing all existing formatting.
+     * Unlike applyFormatting which merges, this replaces completely.
+     * Used by undo operations to restore exact previous state.
+     * @param position Character position
+     * @param formatting Complete formatting to set
+     * @param silent If true, don't emit the formatting-changed event
+     */
+    setFormattingAt(position, formatting, silent = false) {
+        this.formatting.set(position, { ...formatting });
+        if (!silent) {
+            this.emit('formatting-changed', { start: position, end: position + 1, formatting });
+        }
+    }
     /**
      * Remove formatting from a range, reverting to default.
      */
@@ -18839,11 +18853,11 @@ class MutationUndo {
         const data = mutation.data;
         // Restore deleted text
         content.insertTextAt(data.position, data.deletedText);
-        // Restore formatting
+        // Restore formatting using setFormattingAt to replace completely
         if (data.deletedFormatting) {
             const fm = content.getFormattingManager();
             data.deletedFormatting.forEach((style, offset) => {
-                fm.applyFormatting(data.position + offset, data.position + offset + 1, style);
+                fm.setFormattingAt(data.position + offset, style, true);
             });
         }
         // Restore substitution fields
@@ -18869,9 +18883,10 @@ class MutationUndo {
             return;
         const data = mutation.data;
         const fm = content.getFormattingManager();
-        // Restore previous formatting
+        // Restore previous formatting using setFormattingAt to replace completely
+        // (not merge, which would leave properties like backgroundColor intact)
         data.previousFormatting.forEach((style, offset) => {
-            fm.applyFormatting(data.start + offset, data.start + offset + 1, style);
+            fm.setFormattingAt(data.start + offset, style, true);
         });
     }
     redoFormat(mutation) {
@@ -23088,6 +23103,144 @@ class PCEditor extends EventEmitter {
         return null;
     }
     // ============================================
+    // Text Box Update Operations
+    // ============================================
+    /**
+     * Update properties of a text box.
+     * @param textBoxId The ID of the text box to update
+     * @param updates The properties to update
+     */
+    updateTextBox(textBoxId, updates) {
+        if (!this._isReady)
+            return false;
+        // Find the text box in all flowing contents
+        const textBox = this.findTextBoxById(textBoxId);
+        if (!textBox) {
+            console.warn(`[PCEditor.updateTextBox] Text box not found: ${textBoxId}`);
+            return false;
+        }
+        // Apply updates
+        if (updates.position !== undefined) {
+            textBox.position = updates.position;
+        }
+        if (updates.relativeOffset !== undefined) {
+            textBox.relativeOffset = updates.relativeOffset;
+        }
+        if (updates.backgroundColor !== undefined) {
+            textBox.backgroundColor = updates.backgroundColor;
+        }
+        if (updates.border !== undefined) {
+            // Merge with existing border
+            const existingBorder = textBox.border;
+            textBox.border = {
+                top: updates.border.top || existingBorder.top,
+                right: updates.border.right || existingBorder.right,
+                bottom: updates.border.bottom || existingBorder.bottom,
+                left: updates.border.left || existingBorder.left
+            };
+        }
+        if (updates.padding !== undefined) {
+            textBox.padding = updates.padding;
+        }
+        this.render();
+        this.emit('textbox-updated', { textBoxId, updates });
+        return true;
+    }
+    /**
+     * Find a text box by ID across all flowing contents.
+     */
+    findTextBoxById(textBoxId) {
+        const flowingContents = [
+            this.document.bodyFlowingContent,
+            this.document.headerFlowingContent,
+            this.document.footerFlowingContent
+        ].filter(Boolean);
+        for (const flowingContent of flowingContents) {
+            const embeddedObjects = flowingContent.getEmbeddedObjects();
+            for (const [, obj] of embeddedObjects.entries()) {
+                if (obj.id === textBoxId && obj instanceof TextBoxObject) {
+                    return obj;
+                }
+            }
+        }
+        return null;
+    }
+    // ============================================
+    // Image Update Operations
+    // ============================================
+    /**
+     * Update properties of an image.
+     * @param imageId The ID of the image to update
+     * @param updates The properties to update
+     */
+    updateImage(imageId, updates) {
+        if (!this._isReady)
+            return false;
+        // Find the image in all flowing contents
+        const image = this.findImageById(imageId);
+        if (!image) {
+            console.warn(`[PCEditor.updateImage] Image not found: ${imageId}`);
+            return false;
+        }
+        // Apply updates
+        if (updates.position !== undefined) {
+            image.position = updates.position;
+        }
+        if (updates.relativeOffset !== undefined) {
+            image.relativeOffset = updates.relativeOffset;
+        }
+        if (updates.fit !== undefined) {
+            image.fit = updates.fit;
+        }
+        if (updates.resizeMode !== undefined) {
+            image.resizeMode = updates.resizeMode;
+        }
+        if (updates.alt !== undefined) {
+            image.alt = updates.alt;
+        }
+        this.render();
+        this.emit('image-updated', { imageId, updates });
+        return true;
+    }
+    /**
+     * Set the source of an image.
+     * @param imageId The ID of the image
+     * @param dataUrl The data URL of the new image source
+     * @param options Optional sizing options
+     */
+    setImageSource(imageId, dataUrl, options) {
+        if (!this._isReady)
+            return false;
+        const image = this.findImageById(imageId);
+        if (!image) {
+            console.warn(`[PCEditor.setImageSource] Image not found: ${imageId}`);
+            return false;
+        }
+        image.setSource(dataUrl, options);
+        this.render();
+        this.emit('image-source-changed', { imageId });
+        return true;
+    }
+    /**
+     * Find an image by ID across all flowing contents.
+     */
+    findImageById(imageId) {
+        const flowingContents = [
+            this.document.bodyFlowingContent,
+            this.document.headerFlowingContent,
+            this.document.footerFlowingContent
+        ].filter(Boolean);
+        for (const flowingContent of flowingContents) {
+            const embeddedObjects = flowingContent.getEmbeddedObjects();
+            for (const [, obj] of embeddedObjects.entries()) {
+                if (obj.id === imageId && obj instanceof ImageObject) {
+                    return obj;
+                }
+            }
+        }
+        return null;
+    }
+    // ============================================
     // Table Structure Operations (with undo support)
     // ============================================
     /**
@@ -25158,5 +25311,2624 @@ class VerticalRuler extends RulerControl {
     }
 }
 
-export { BaseControl, BaseEmbeddedObject, BaseTextRegion, BodyTextRegion, ClipboardManager, ContentAnalyzer, DEFAULT_IMPORT_OPTIONS, Document, DocumentBuilder, EmbeddedObjectFactory, EmbeddedObjectManager, EventEmitter, FlowingTextContent, FooterTextRegion, HeaderTextRegion, HorizontalRuler, HtmlConverter, ImageObject, PCEditor, PDFImportError, PDFImportErrorCode, PDFImporter, PDFParser, Page, RegionManager, RepeatingSectionManager, RulerControl, SubstitutionFieldManager, TableCell, TableObject, TableRow, TextBoxObject, TextFormattingManager, TextLayout, TextMeasurer, TextPositionCalculator, TextState, VerticalRuler };
+/**
+ * BasePane - Abstract base class for editor property panes.
+ *
+ * Panes are property editors that work with PCEditor via the public API only.
+ * They are content-only (no title bar) for flexible layout by consumers.
+ */
+/**
+ * Abstract base class for editor panes.
+ */
+class BasePane extends BaseControl {
+    constructor(id, options = {}) {
+        super(id, options);
+        this.sectionElement = null;
+        this.className = options.className || '';
+    }
+    /**
+     * Attach the pane to an editor.
+     */
+    attach(options) {
+        // Store the section element if provided
+        this.sectionElement = options.sectionElement || null;
+        super.attach(options);
+    }
+    /**
+     * Show the pane (and section element if provided).
+     */
+    show() {
+        this._isVisible = true;
+        if (this.sectionElement) {
+            this.sectionElement.style.display = '';
+        }
+        if (this.element) {
+            this.element.style.display = '';
+            this.update();
+        }
+        this.emit('visibility-changed', { visible: true });
+    }
+    /**
+     * Hide the pane (and section element if provided).
+     */
+    hide() {
+        this._isVisible = false;
+        if (this.sectionElement) {
+            this.sectionElement.style.display = 'none';
+        }
+        if (this.element) {
+            this.element.style.display = 'none';
+        }
+        this.emit('visibility-changed', { visible: false });
+    }
+    /**
+     * Create a form group element with label.
+     */
+    createFormGroup(label, inputElement, options) {
+        const group = document.createElement('div');
+        group.className = 'pc-pane-form-group';
+        if (options?.inline) {
+            group.classList.add('pc-pane-form-group--inline');
+        }
+        const labelEl = document.createElement('label');
+        labelEl.className = 'pc-pane-label';
+        labelEl.textContent = label;
+        group.appendChild(labelEl);
+        group.appendChild(inputElement);
+        if (options?.hint) {
+            const hintEl = document.createElement('span');
+            hintEl.className = 'pc-pane-hint';
+            hintEl.textContent = options.hint;
+            group.appendChild(hintEl);
+        }
+        return group;
+    }
+    /**
+     * Create a text input element.
+     */
+    createTextInput(options) {
+        const input = document.createElement('input');
+        input.type = options?.type || 'text';
+        input.className = 'pc-pane-input';
+        if (options?.placeholder) {
+            input.placeholder = options.placeholder;
+        }
+        if (options?.value !== undefined) {
+            input.value = options.value;
+        }
+        return input;
+    }
+    /**
+     * Create a number input element.
+     */
+    createNumberInput(options) {
+        const input = document.createElement('input');
+        input.type = 'number';
+        input.className = 'pc-pane-input pc-pane-input--number';
+        if (options?.min !== undefined)
+            input.min = String(options.min);
+        if (options?.max !== undefined)
+            input.max = String(options.max);
+        if (options?.step !== undefined)
+            input.step = String(options.step);
+        if (options?.value !== undefined)
+            input.value = String(options.value);
+        return input;
+    }
+    /**
+     * Create a select element with options.
+     */
+    createSelect(optionsList, selectedValue) {
+        const select = document.createElement('select');
+        select.className = 'pc-pane-select';
+        for (const opt of optionsList) {
+            const option = document.createElement('option');
+            option.value = opt.value;
+            option.textContent = opt.label;
+            if (opt.value === selectedValue) {
+                option.selected = true;
+            }
+            select.appendChild(option);
+        }
+        return select;
+    }
+    /**
+     * Create a color input element.
+     */
+    createColorInput(value) {
+        const input = document.createElement('input');
+        input.type = 'color';
+        input.className = 'pc-pane-color';
+        if (value) {
+            input.value = value;
+        }
+        return input;
+    }
+    /**
+     * Create a checkbox element.
+     */
+    createCheckbox(label, checked) {
+        const wrapper = document.createElement('label');
+        wrapper.className = 'pc-pane-checkbox';
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        if (checked) {
+            input.checked = true;
+        }
+        const span = document.createElement('span');
+        span.textContent = label;
+        wrapper.appendChild(input);
+        wrapper.appendChild(span);
+        return wrapper;
+    }
+    /**
+     * Create a button element.
+     */
+    createButton(label, options) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'pc-pane-button';
+        if (options?.variant) {
+            button.classList.add(`pc-pane-button--${options.variant}`);
+        }
+        button.textContent = label;
+        return button;
+    }
+    /**
+     * Create a button group container.
+     */
+    createButtonGroup() {
+        const group = document.createElement('div');
+        group.className = 'pc-pane-button-group';
+        return group;
+    }
+    /**
+     * Create a section divider with optional label.
+     */
+    createSection(label) {
+        const section = document.createElement('div');
+        section.className = 'pc-pane-section';
+        if (label) {
+            const labelEl = document.createElement('div');
+            labelEl.className = 'pc-pane-section-label';
+            labelEl.textContent = label;
+            section.appendChild(labelEl);
+        }
+        return section;
+    }
+    /**
+     * Create a row container for inline elements.
+     */
+    createRow() {
+        const row = document.createElement('div');
+        row.className = 'pc-pane-row';
+        return row;
+    }
+    /**
+     * Create a hint/info text element.
+     */
+    createHint(text) {
+        const hint = document.createElement('div');
+        hint.className = 'pc-pane-hint';
+        hint.textContent = text;
+        return hint;
+    }
+    /**
+     * Add immediate apply listener for text inputs (blur + Enter).
+     */
+    addImmediateApplyListener(element, handler) {
+        const apply = () => {
+            handler(element.value);
+        };
+        // Selects and color inputs: apply on change
+        if (element instanceof HTMLSelectElement ||
+            (element instanceof HTMLInputElement && element.type === 'color')) {
+            element.addEventListener('change', apply);
+            this.eventCleanup.push(() => element.removeEventListener('change', apply));
+        }
+        else {
+            // Text/number inputs: apply on blur or Enter
+            element.addEventListener('blur', apply);
+            const keyHandler = (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    apply();
+                }
+            };
+            element.addEventListener('keydown', keyHandler);
+            this.eventCleanup.push(() => {
+                element.removeEventListener('blur', apply);
+                element.removeEventListener('keydown', keyHandler);
+            });
+        }
+    }
+    /**
+     * Add immediate apply listener for checkbox inputs.
+     */
+    addCheckboxListener(element, handler) {
+        const apply = () => handler(element.checked);
+        element.addEventListener('change', apply);
+        this.eventCleanup.push(() => element.removeEventListener('change', apply));
+    }
+    /**
+     * Add button click handler with focus steal prevention.
+     */
+    addButtonListener(button, handler) {
+        // Prevent focus steal on mousedown
+        const preventFocus = (e) => {
+            e.preventDefault();
+            this.saveEditorContext();
+        };
+        button.addEventListener('mousedown', preventFocus);
+        button.addEventListener('click', handler);
+        this.eventCleanup.push(() => {
+            button.removeEventListener('mousedown', preventFocus);
+            button.removeEventListener('click', handler);
+        });
+    }
+    /**
+     * Save editor context before UI elements steal focus.
+     */
+    saveEditorContext() {
+        if (this.editor) {
+            this.editor.saveEditingContext();
+        }
+    }
+    /**
+     * Final createElement that wraps content in pane structure.
+     * Content-only, no title bar.
+     */
+    createElement() {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'pc-pane';
+        if (this.className) {
+            wrapper.classList.add(this.className);
+        }
+        wrapper.setAttribute('data-pane-id', this.id);
+        const content = this.createContent();
+        wrapper.appendChild(content);
+        return wrapper;
+    }
+}
+
+/**
+ * DocumentInfoPane - Read-only document information display.
+ *
+ * Shows:
+ * - Page count
+ * - Page size
+ * - Page orientation
+ */
+class DocumentInfoPane extends BasePane {
+    constructor(id = 'document-info') {
+        super(id, { className: 'pc-pane-document-info' });
+        this.pageCountEl = null;
+        this.pageSizeEl = null;
+        this.pageOrientationEl = null;
+    }
+    attach(options) {
+        super.attach(options);
+        // Subscribe to document changes
+        if (this.editor) {
+            const updateHandler = () => this.update();
+            this.editor.on('document-changed', updateHandler);
+            this.editor.on('page-added', updateHandler);
+            this.editor.on('page-removed', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('document-changed', updateHandler);
+                this.editor?.off('page-added', updateHandler);
+                this.editor?.off('page-removed', updateHandler);
+            });
+            // Initial update
+            this.update();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        container.className = 'pc-pane-info-list';
+        // Page count
+        const countRow = this.createInfoRow('Pages', '0');
+        this.pageCountEl = countRow.querySelector('.pc-pane-info-value');
+        container.appendChild(countRow);
+        // Page size
+        const sizeRow = this.createInfoRow('Size', '-');
+        this.pageSizeEl = sizeRow.querySelector('.pc-pane-info-value');
+        container.appendChild(sizeRow);
+        // Page orientation
+        const orientationRow = this.createInfoRow('Orientation', '-');
+        this.pageOrientationEl = orientationRow.querySelector('.pc-pane-info-value');
+        container.appendChild(orientationRow);
+        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;
+    }
+    /**
+     * Update the displayed information from the editor.
+     */
+    update() {
+        if (!this.editor)
+            return;
+        const doc = this.editor.getDocument();
+        if (this.pageCountEl) {
+            this.pageCountEl.textContent = doc.pages.length.toString();
+        }
+        if (this.pageSizeEl && doc.settings) {
+            this.pageSizeEl.textContent = doc.settings.pageSize;
+        }
+        if (this.pageOrientationEl && doc.settings) {
+            const orientation = doc.settings.pageOrientation;
+            this.pageOrientationEl.textContent =
+                orientation.charAt(0).toUpperCase() + orientation.slice(1);
+        }
+    }
+}
+
+/**
+ * ViewSettingsPane - Toggle buttons for view options.
+ *
+ * Toggles:
+ * - Rulers (requires external callback since rulers are optional controls)
+ * - Control characters
+ * - Margin lines
+ * - Grid
+ */
+class ViewSettingsPane extends BasePane {
+    constructor(id = 'view-settings', options = {}) {
+        super(id, { className: 'pc-pane-view-settings', ...options });
+        this.rulersBtn = null;
+        this.controlCharsBtn = null;
+        this.marginLinesBtn = null;
+        this.gridBtn = null;
+        this.onToggleRulers = options.onToggleRulers;
+        this.rulersVisible = options.rulersVisible ?? true;
+    }
+    attach(options) {
+        super.attach(options);
+        // Subscribe to editor events
+        if (this.editor) {
+            const updateHandler = () => this.updateButtonStates();
+            this.editor.on('grid-changed', updateHandler);
+            this.editor.on('margin-lines-changed', updateHandler);
+            this.editor.on('control-characters-changed', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('grid-changed', updateHandler);
+                this.editor?.off('margin-lines-changed', updateHandler);
+                this.editor?.off('control-characters-changed', updateHandler);
+            });
+            // Initial state
+            this.updateButtonStates();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        container.className = 'pc-pane-button-group pc-pane-view-toggles';
+        // Rulers toggle (only if callback provided)
+        if (this.onToggleRulers) {
+            this.rulersBtn = this.createToggleButton('Rulers', this.rulersVisible);
+            this.addButtonListener(this.rulersBtn, () => this.toggleRulers());
+            container.appendChild(this.rulersBtn);
+        }
+        // Control characters toggle
+        this.controlCharsBtn = this.createToggleButton('Control Chars', false);
+        this.addButtonListener(this.controlCharsBtn, () => this.toggleControlChars());
+        container.appendChild(this.controlCharsBtn);
+        // Margin lines toggle
+        this.marginLinesBtn = this.createToggleButton('Margin Lines', true);
+        this.addButtonListener(this.marginLinesBtn, () => this.toggleMarginLines());
+        container.appendChild(this.marginLinesBtn);
+        // Grid toggle
+        this.gridBtn = this.createToggleButton('Grid', true);
+        this.addButtonListener(this.gridBtn, () => this.toggleGrid());
+        container.appendChild(this.gridBtn);
+        return container;
+    }
+    createToggleButton(label, active) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'pc-pane-toggle';
+        if (active) {
+            button.classList.add('pc-pane-toggle--active');
+        }
+        button.textContent = label;
+        button.title = `Toggle ${label}`;
+        return button;
+    }
+    toggleRulers() {
+        if (this.onToggleRulers) {
+            this.onToggleRulers();
+            this.rulersVisible = !this.rulersVisible;
+            this.rulersBtn?.classList.toggle('pc-pane-toggle--active', this.rulersVisible);
+        }
+    }
+    toggleControlChars() {
+        if (!this.editor)
+            return;
+        const current = this.editor.getShowControlCharacters();
+        this.editor.setShowControlCharacters(!current);
+    }
+    toggleMarginLines() {
+        if (!this.editor)
+            return;
+        const current = this.editor.getShowMarginLines();
+        this.editor.setShowMarginLines(!current);
+    }
+    toggleGrid() {
+        if (!this.editor)
+            return;
+        const current = this.editor.getShowGrid();
+        this.editor.setShowGrid(!current);
+    }
+    updateButtonStates() {
+        if (!this.editor)
+            return;
+        if (this.controlCharsBtn) {
+            this.controlCharsBtn.classList.toggle('pc-pane-toggle--active', this.editor.getShowControlCharacters());
+        }
+        if (this.marginLinesBtn) {
+            this.marginLinesBtn.classList.toggle('pc-pane-toggle--active', this.editor.getShowMarginLines());
+        }
+        if (this.gridBtn) {
+            this.gridBtn.classList.toggle('pc-pane-toggle--active', this.editor.getShowGrid());
+        }
+    }
+    /**
+     * Update ruler button state externally (since rulers are external controls).
+     */
+    setRulersVisible(visible) {
+        this.rulersVisible = visible;
+        this.rulersBtn?.classList.toggle('pc-pane-toggle--active', visible);
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.updateButtonStates();
+    }
+}
+
+/**
+ * DocumentSettingsPane - Edit margins, page size, and orientation.
+ *
+ * Uses the PCEditor public API:
+ * - editor.getDocumentSettings()
+ * - editor.updateDocumentSettings()
+ */
+class DocumentSettingsPane extends BasePane {
+    constructor(id = 'document-settings') {
+        super(id, { className: 'pc-pane-document-settings' });
+        this.marginTopInput = null;
+        this.marginRightInput = null;
+        this.marginBottomInput = null;
+        this.marginLeftInput = null;
+        this.pageSizeSelect = null;
+        this.orientationSelect = null;
+    }
+    attach(options) {
+        super.attach(options);
+        // Load current settings
+        if (this.editor) {
+            this.loadSettings();
+            // Subscribe to document changes
+            const updateHandler = () => this.loadSettings();
+            this.editor.on('document-changed', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('document-changed', updateHandler);
+            });
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Margins section
+        const marginsSection = this.createSection('Margins (mm)');
+        const marginsGrid = document.createElement('div');
+        marginsGrid.className = 'pc-pane-margins-grid';
+        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 }));
+        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();
+        this.pageSizeSelect = this.createSelect([
+            { value: 'A4', label: 'A4' },
+            { value: 'Letter', label: 'Letter' },
+            { value: 'Legal', label: 'Legal' },
+            { value: 'A3', label: 'A3' }
+        ], 'A4');
+        this.addImmediateApplyListener(this.pageSizeSelect, () => this.applyPageSettings());
+        pageSizeSection.appendChild(this.createFormGroup('Page Size', this.pageSizeSelect));
+        container.appendChild(pageSizeSection);
+        // Orientation section
+        const orientationSection = this.createSection();
+        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);
+        return container;
+    }
+    loadSettings() {
+        if (!this.editor)
+            return;
+        try {
+            const settings = this.editor.getDocumentSettings();
+            if (this.marginTopInput) {
+                this.marginTopInput.value = settings.margins.top.toString();
+            }
+            if (this.marginRightInput) {
+                this.marginRightInput.value = settings.margins.right.toString();
+            }
+            if (this.marginBottomInput) {
+                this.marginBottomInput.value = settings.margins.bottom.toString();
+            }
+            if (this.marginLeftInput) {
+                this.marginLeftInput.value = settings.margins.left.toString();
+            }
+            if (this.pageSizeSelect) {
+                this.pageSizeSelect.value = settings.pageSize;
+            }
+            if (this.orientationSelect) {
+                this.orientationSelect.value = settings.pageOrientation;
+            }
+        }
+        catch (error) {
+            console.error('Failed to load document settings:', error);
+        }
+    }
+    applyMargins() {
+        if (!this.editor)
+            return;
+        const margins = {
+            top: parseFloat(this.marginTopInput?.value || '20'),
+            right: parseFloat(this.marginRightInput?.value || '20'),
+            bottom: parseFloat(this.marginBottomInput?.value || '20'),
+            left: parseFloat(this.marginLeftInput?.value || '20')
+        };
+        try {
+            this.editor.updateDocumentSettings({ margins });
+        }
+        catch (error) {
+            console.error('Failed to update margins:', error);
+        }
+    }
+    applyPageSettings() {
+        if (!this.editor)
+            return;
+        const settings = {};
+        if (this.pageSizeSelect) {
+            settings.pageSize = this.pageSizeSelect.value;
+        }
+        if (this.orientationSelect) {
+            settings.pageOrientation = this.orientationSelect.value;
+        }
+        try {
+            this.editor.updateDocumentSettings(settings);
+        }
+        catch (error) {
+            console.error('Failed to update page settings:', error);
+        }
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.loadSettings();
+    }
+}
+
+/**
+ * MergeDataPane - JSON data input for mail merge/substitution.
+ *
+ * Uses the PCEditor public API:
+ * - editor.applyMergeData()
+ */
+class MergeDataPane extends BasePane {
+    constructor(id = 'merge-data', options = {}) {
+        super(id, { className: 'pc-pane-merge-data', ...options });
+        this.textarea = null;
+        this.errorHint = null;
+        this.initialData = options.initialData;
+        this.placeholder = options.placeholder || '{"customerName": "John Doe", "orderNumber": "12345"}';
+        this.rows = options.rows ?? 10;
+        this.onApply = options.onApply;
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Textarea for JSON
+        const textareaGroup = this.createFormGroup('JSON Data', this.createTextarea());
+        container.appendChild(textareaGroup);
+        // Error hint (hidden by default)
+        this.errorHint = this.createHint('');
+        this.errorHint.style.display = 'none';
+        this.errorHint.style.color = '#dc3545';
+        container.appendChild(this.errorHint);
+        // Apply button
+        const applyBtn = this.createButton('Apply Merge Data', { variant: 'primary' });
+        this.addButtonListener(applyBtn, () => this.applyMergeData());
+        container.appendChild(applyBtn);
+        return container;
+    }
+    createTextarea() {
+        this.textarea = document.createElement('textarea');
+        this.textarea.className = 'pc-pane-textarea pc-pane-merge-data-input';
+        this.textarea.rows = this.rows;
+        this.textarea.placeholder = this.placeholder;
+        this.textarea.spellcheck = false;
+        if (this.initialData) {
+            this.textarea.value = JSON.stringify(this.initialData, null, 2);
+        }
+        // Clear error on input
+        this.textarea.addEventListener('input', () => {
+            if (this.errorHint) {
+                this.errorHint.style.display = 'none';
+            }
+        });
+        return this.textarea;
+    }
+    applyMergeData() {
+        if (!this.editor || !this.textarea)
+            return;
+        try {
+            const mergeData = JSON.parse(this.textarea.value);
+            this.editor.applyMergeData(mergeData);
+            if (this.errorHint) {
+                this.errorHint.style.display = 'none';
+            }
+            this.onApply?.(true);
+        }
+        catch (error) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            if (this.errorHint) {
+                if (error instanceof SyntaxError) {
+                    this.errorHint.textContent = 'Invalid JSON syntax';
+                }
+                else {
+                    this.errorHint.textContent = err.message;
+                }
+                this.errorHint.style.display = 'block';
+            }
+            this.onApply?.(false, err);
+        }
+    }
+    /**
+     * Get the current JSON data from the textarea.
+     * Returns null if the JSON is invalid.
+     */
+    getData() {
+        if (!this.textarea)
+            return null;
+        try {
+            return JSON.parse(this.textarea.value);
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Set the JSON data in the textarea.
+     */
+    setData(data) {
+        if (this.textarea) {
+            this.textarea.value = JSON.stringify(data, null, 2);
+            if (this.errorHint) {
+                this.errorHint.style.display = 'none';
+            }
+        }
+    }
+    /**
+     * Update the pane (no-op for MergeDataPane as it doesn't track editor state).
+     */
+    update() {
+        // MergeDataPane doesn't need to update from editor state
+    }
+}
+
+/**
+ * FormattingPane - Text formatting controls.
+ *
+ * Controls:
+ * - Bold/Italic toggles
+ * - Alignment buttons (left, center, right, justify)
+ * - List buttons (bullet, numbered, indent, outdent)
+ * - Font family/size dropdowns
+ * - Text color and highlight color pickers
+ *
+ * Uses the PCEditor public API:
+ * - editor.getUnifiedFormattingAtCursor()
+ * - editor.applyFormattingWithFallback()
+ * - editor.setPendingFormatting()
+ * - editor.getSavedOrCurrentSelection()
+ * - editor.getUnifiedAlignmentAtCursor()
+ * - editor.setUnifiedAlignment()
+ * - editor.toggleBulletList()
+ * - editor.toggleNumberedList()
+ * - editor.indentParagraph()
+ * - editor.outdentParagraph()
+ * - editor.getListFormatting()
+ */
+const DEFAULT_FONT_FAMILIES = [
+    'Arial',
+    'Times New Roman',
+    'Georgia',
+    'Verdana',
+    'Courier New'
+];
+const DEFAULT_FONT_SIZES = [10, 12, 14, 16, 18, 20, 24, 28, 32, 36];
+class FormattingPane extends BasePane {
+    constructor(id = 'formatting', options = {}) {
+        super(id, { className: 'pc-pane-formatting', ...options });
+        // Style toggles
+        this.boldBtn = null;
+        this.italicBtn = null;
+        // Alignment buttons
+        this.alignLeftBtn = null;
+        this.alignCenterBtn = null;
+        this.alignRightBtn = null;
+        this.alignJustifyBtn = null;
+        // List buttons
+        this.bulletListBtn = null;
+        this.numberedListBtn = null;
+        this.indentBtn = null;
+        this.outdentBtn = null;
+        // Font controls
+        this.fontFamilySelect = null;
+        this.fontSizeSelect = null;
+        this.colorInput = null;
+        this.highlightInput = null;
+        this.fontFamilies = options.fontFamilies ?? DEFAULT_FONT_FAMILIES;
+        this.fontSizes = options.fontSizes ?? DEFAULT_FONT_SIZES;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // Update on cursor/selection changes
+            const updateHandler = () => this.updateFromEditor();
+            this.editor.on('cursor-changed', updateHandler);
+            this.editor.on('selection-changed', updateHandler);
+            this.editor.on('text-changed', updateHandler);
+            this.editor.on('formatting-changed', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('cursor-changed', updateHandler);
+                this.editor?.off('selection-changed', updateHandler);
+                this.editor?.off('text-changed', updateHandler);
+                this.editor?.off('formatting-changed', updateHandler);
+            });
+            // Initial update
+            this.updateFromEditor();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Style section (Bold, Italic)
+        const styleSection = this.createSection('Style');
+        const styleGroup = this.createButtonGroup();
+        this.boldBtn = this.createButton('B');
+        this.boldBtn.title = 'Bold';
+        this.boldBtn.style.fontWeight = 'bold';
+        this.addButtonListener(this.boldBtn, () => this.toggleBold());
+        this.italicBtn = this.createButton('I');
+        this.italicBtn.title = 'Italic';
+        this.italicBtn.style.fontStyle = 'italic';
+        this.addButtonListener(this.italicBtn, () => this.toggleItalic());
+        styleGroup.appendChild(this.boldBtn);
+        styleGroup.appendChild(this.italicBtn);
+        styleSection.appendChild(styleGroup);
+        container.appendChild(styleSection);
+        // Alignment section
+        const alignSection = this.createSection('Alignment');
+        const alignGroup = this.createButtonGroup();
+        this.alignLeftBtn = this.createButton('');
+        this.alignLeftBtn.title = 'Align Left';
+        this.alignLeftBtn.classList.add('pc-pane-button--icon', 'pc-pane-button--align-left');
+        this.addButtonListener(this.alignLeftBtn, () => this.setAlignment('left'));
+        this.alignCenterBtn = this.createButton('');
+        this.alignCenterBtn.title = 'Center';
+        this.alignCenterBtn.classList.add('pc-pane-button--icon', 'pc-pane-button--align-center');
+        this.addButtonListener(this.alignCenterBtn, () => this.setAlignment('center'));
+        this.alignRightBtn = this.createButton('');
+        this.alignRightBtn.title = 'Align Right';
+        this.alignRightBtn.classList.add('pc-pane-button--icon', 'pc-pane-button--align-right');
+        this.addButtonListener(this.alignRightBtn, () => this.setAlignment('right'));
+        this.alignJustifyBtn = this.createButton('');
+        this.alignJustifyBtn.title = 'Justify';
+        this.alignJustifyBtn.classList.add('pc-pane-button--icon', 'pc-pane-button--align-justify');
+        this.addButtonListener(this.alignJustifyBtn, () => this.setAlignment('justify'));
+        alignGroup.appendChild(this.alignLeftBtn);
+        alignGroup.appendChild(this.alignCenterBtn);
+        alignGroup.appendChild(this.alignRightBtn);
+        alignGroup.appendChild(this.alignJustifyBtn);
+        alignSection.appendChild(alignGroup);
+        container.appendChild(alignSection);
+        // Lists section
+        const listsSection = this.createSection('Lists');
+        const listsGroup = this.createButtonGroup();
+        this.bulletListBtn = this.createButton('\u2022'); // •
+        this.bulletListBtn.title = 'Bullet List';
+        this.addButtonListener(this.bulletListBtn, () => this.toggleBulletList());
+        this.numberedListBtn = this.createButton('1.');
+        this.numberedListBtn.title = 'Numbered List';
+        this.addButtonListener(this.numberedListBtn, () => this.toggleNumberedList());
+        this.indentBtn = this.createButton('\u2192'); // →
+        this.indentBtn.title = 'Increase Indent';
+        this.addButtonListener(this.indentBtn, () => this.indent());
+        this.outdentBtn = this.createButton('\u2190'); // ←
+        this.outdentBtn.title = 'Decrease Indent';
+        this.addButtonListener(this.outdentBtn, () => this.outdent());
+        listsGroup.appendChild(this.bulletListBtn);
+        listsGroup.appendChild(this.numberedListBtn);
+        listsGroup.appendChild(this.indentBtn);
+        listsGroup.appendChild(this.outdentBtn);
+        listsSection.appendChild(listsGroup);
+        container.appendChild(listsSection);
+        // Font section
+        const fontSection = this.createSection('Font');
+        this.fontFamilySelect = this.createSelect(this.fontFamilies.map(f => ({ value: f, label: f })), 'Arial');
+        this.addImmediateApplyListener(this.fontFamilySelect, () => this.applyFontFamily());
+        fontSection.appendChild(this.createFormGroup('Family', this.fontFamilySelect));
+        this.fontSizeSelect = this.createSelect(this.fontSizes.map(s => ({ value: s.toString(), label: s.toString() })), '14');
+        this.addImmediateApplyListener(this.fontSizeSelect, () => this.applyFontSize());
+        fontSection.appendChild(this.createFormGroup('Size', this.fontSizeSelect));
+        container.appendChild(fontSection);
+        // Color section
+        const colorSection = this.createSection('Color');
+        const colorRow = this.createRow();
+        const colorGroup = document.createElement('div');
+        this.colorInput = this.createColorInput('#000000');
+        this.addImmediateApplyListener(this.colorInput, () => this.applyTextColor());
+        colorGroup.appendChild(this.createFormGroup('Text', this.colorInput));
+        colorRow.appendChild(colorGroup);
+        const highlightGroup = document.createElement('div');
+        this.highlightInput = this.createColorInput('#ffff00');
+        this.addImmediateApplyListener(this.highlightInput, () => this.applyHighlight());
+        const highlightForm = this.createFormGroup('Highlight', this.highlightInput);
+        const clearHighlightBtn = this.createButton('Clear');
+        clearHighlightBtn.className = 'pc-pane-button';
+        clearHighlightBtn.style.marginLeft = '4px';
+        this.addButtonListener(clearHighlightBtn, () => this.clearHighlight());
+        highlightForm.appendChild(clearHighlightBtn);
+        highlightGroup.appendChild(highlightForm);
+        colorRow.appendChild(highlightGroup);
+        colorSection.appendChild(colorRow);
+        container.appendChild(colorSection);
+        return container;
+    }
+    updateFromEditor() {
+        if (!this.editor)
+            return;
+        // Get formatting at cursor
+        const formatting = this.editor.getUnifiedFormattingAtCursor();
+        if (formatting) {
+            // Update bold button
+            this.boldBtn?.classList.toggle('pc-pane-button--active', formatting.fontWeight === 'bold');
+            // Update italic button
+            this.italicBtn?.classList.toggle('pc-pane-button--active', formatting.fontStyle === 'italic');
+            // Update font family
+            if (this.fontFamilySelect && formatting.fontFamily) {
+                this.fontFamilySelect.value = formatting.fontFamily;
+            }
+            // Update font size
+            if (this.fontSizeSelect && formatting.fontSize) {
+                this.fontSizeSelect.value = formatting.fontSize.toString();
+            }
+            // Update color
+            if (this.colorInput && formatting.color) {
+                this.colorInput.value = formatting.color;
+            }
+            // Update highlight
+            if (this.highlightInput && formatting.backgroundColor) {
+                this.highlightInput.value = formatting.backgroundColor;
+            }
+        }
+        // Update alignment buttons
+        const alignment = this.editor.getUnifiedAlignmentAtCursor();
+        this.updateAlignmentButtons(alignment);
+        // Update list buttons
+        this.updateListButtons();
+    }
+    updateAlignmentButtons(alignment) {
+        const buttons = [
+            { btn: this.alignLeftBtn, align: 'left' },
+            { btn: this.alignCenterBtn, align: 'center' },
+            { btn: this.alignRightBtn, align: 'right' },
+            { btn: this.alignJustifyBtn, align: 'justify' }
+        ];
+        for (const { btn, align } of buttons) {
+            btn?.classList.toggle('pc-pane-button--active', align === alignment);
+        }
+    }
+    updateListButtons() {
+        if (!this.editor)
+            return;
+        try {
+            const listFormatting = this.editor.getListFormatting();
+            if (listFormatting) {
+                this.bulletListBtn?.classList.toggle('pc-pane-button--active', listFormatting.listType === 'bullet');
+                this.numberedListBtn?.classList.toggle('pc-pane-button--active', listFormatting.listType === 'number');
+            }
+        }
+        catch {
+            // No text editing active
+        }
+    }
+    getSelection() {
+        if (!this.editor)
+            return null;
+        return this.editor.getSavedOrCurrentSelection();
+    }
+    applyFormatting(formatting) {
+        if (!this.editor)
+            return;
+        const selection = this.getSelection();
+        try {
+            if (selection) {
+                this.editor.applyFormattingWithFallback(selection.start, selection.end, formatting);
+            }
+            else {
+                this.editor.setPendingFormatting(formatting);
+            }
+            this.editor.clearSavedEditingContext();
+            this.updateFromEditor();
+            this.editor.enableTextInput();
+        }
+        catch (error) {
+            console.error('Formatting error:', error);
+        }
+    }
+    toggleBold() {
+        const isActive = this.boldBtn?.classList.contains('pc-pane-button--active');
+        this.applyFormatting({ fontWeight: isActive ? 'normal' : 'bold' });
+    }
+    toggleItalic() {
+        const isActive = this.italicBtn?.classList.contains('pc-pane-button--active');
+        this.applyFormatting({ fontStyle: isActive ? 'normal' : 'italic' });
+    }
+    applyFontFamily() {
+        if (this.fontFamilySelect) {
+            this.applyFormatting({ fontFamily: this.fontFamilySelect.value });
+        }
+    }
+    applyFontSize() {
+        if (this.fontSizeSelect) {
+            this.applyFormatting({ fontSize: parseInt(this.fontSizeSelect.value, 10) });
+        }
+    }
+    applyTextColor() {
+        if (this.colorInput) {
+            this.applyFormatting({ color: this.colorInput.value });
+        }
+    }
+    applyHighlight() {
+        if (this.highlightInput) {
+            this.applyFormatting({ backgroundColor: this.highlightInput.value });
+        }
+    }
+    clearHighlight() {
+        this.applyFormatting({ backgroundColor: undefined });
+    }
+    setAlignment(alignment) {
+        if (!this.editor)
+            return;
+        try {
+            this.editor.setUnifiedAlignment(alignment);
+            this.updateAlignmentButtons(alignment);
+        }
+        catch (error) {
+            console.error('Alignment error:', error);
+        }
+    }
+    toggleBulletList() {
+        if (!this.editor)
+            return;
+        try {
+            this.editor.toggleBulletList();
+            this.updateListButtons();
+        }
+        catch (error) {
+            console.error('Bullet list error:', error);
+        }
+    }
+    toggleNumberedList() {
+        if (!this.editor)
+            return;
+        try {
+            this.editor.toggleNumberedList();
+            this.updateListButtons();
+        }
+        catch (error) {
+            console.error('Numbered list error:', error);
+        }
+    }
+    indent() {
+        if (!this.editor)
+            return;
+        try {
+            this.editor.indentParagraph();
+            this.updateListButtons();
+        }
+        catch (error) {
+            console.error('Indent error:', error);
+        }
+    }
+    outdent() {
+        if (!this.editor)
+            return;
+        try {
+            this.editor.outdentParagraph();
+            this.updateListButtons();
+        }
+        catch (error) {
+            console.error('Outdent error:', error);
+        }
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.updateFromEditor();
+    }
+}
+
+/**
+ * HyperlinkPane - Edit hyperlink URL and title.
+ *
+ * This pane is shown when a hyperlink is selected/cursor is in a hyperlink.
+ *
+ * Uses the PCEditor public API:
+ * - editor.getHyperlinkAt()
+ * - editor.updateHyperlink()
+ * - editor.removeHyperlink()
+ * - editor.getCursorPosition()
+ */
+class HyperlinkPane extends BasePane {
+    constructor(id = 'hyperlink', options = {}) {
+        super(id, { className: 'pc-pane-hyperlink', ...options });
+        this.urlInput = null;
+        this.titleInput = null;
+        this.rangeHint = null;
+        this.currentHyperlink = null;
+        this.onApply = options.onApply;
+        this.onRemove = options.onRemove;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // Update on cursor changes
+            const updateHandler = () => this.updateFromCursor();
+            this.editor.on('cursor-changed', updateHandler);
+            this.editor.on('selection-changed', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('cursor-changed', updateHandler);
+                this.editor?.off('selection-changed', updateHandler);
+            });
+            // Initial update
+            this.updateFromCursor();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // URL input
+        this.urlInput = this.createTextInput({ placeholder: 'https://example.com' });
+        container.appendChild(this.createFormGroup('URL', this.urlInput));
+        // Title input
+        this.titleInput = this.createTextInput({ placeholder: 'Link title (optional)' });
+        container.appendChild(this.createFormGroup('Title', this.titleInput));
+        // Apply button
+        const applyBtn = this.createButton('Apply Changes', { variant: 'primary' });
+        this.addButtonListener(applyBtn, () => this.applyChanges());
+        container.appendChild(applyBtn);
+        // Remove button
+        const removeBtn = this.createButton('Remove Link', { variant: 'danger' });
+        removeBtn.style.marginTop = '0.5rem';
+        this.addButtonListener(removeBtn, () => this.removeHyperlink());
+        container.appendChild(removeBtn);
+        // Range hint
+        this.rangeHint = this.createHint('');
+        container.appendChild(this.rangeHint);
+        return container;
+    }
+    updateFromCursor() {
+        if (!this.editor)
+            return;
+        const cursorPos = this.editor.getCursorPosition();
+        const hyperlink = this.editor.getHyperlinkAt(cursorPos);
+        if (hyperlink) {
+            this.showHyperlink(hyperlink);
+        }
+        else {
+            this.hideHyperlink();
+        }
+    }
+    showHyperlink(hyperlink) {
+        this.currentHyperlink = hyperlink;
+        if (this.urlInput) {
+            this.urlInput.value = hyperlink.url;
+        }
+        if (this.titleInput) {
+            this.titleInput.value = hyperlink.title || '';
+        }
+        if (this.rangeHint) {
+            this.rangeHint.textContent = `Link spans characters ${hyperlink.startIndex} to ${hyperlink.endIndex}`;
+        }
+        // Show the pane
+        this.show();
+    }
+    hideHyperlink() {
+        this.currentHyperlink = null;
+        this.hide();
+    }
+    applyChanges() {
+        if (!this.editor || !this.currentHyperlink)
+            return;
+        try {
+            const url = this.urlInput?.value.trim() || '';
+            const title = this.titleInput?.value.trim() || undefined;
+            if (!url) {
+                this.onApply?.(false, new Error('URL is required'));
+                return;
+            }
+            this.editor.updateHyperlink(this.currentHyperlink.id, { url, title });
+            // Update local reference
+            this.currentHyperlink.url = url;
+            this.currentHyperlink.title = title;
+            this.onApply?.(true);
+        }
+        catch (error) {
+            this.onApply?.(false, error instanceof Error ? error : new Error(String(error)));
+        }
+    }
+    removeHyperlink() {
+        if (!this.editor || !this.currentHyperlink)
+            return;
+        try {
+            this.editor.removeHyperlink(this.currentHyperlink.id);
+            this.hideHyperlink();
+            this.onRemove?.(true);
+        }
+        catch {
+            this.onRemove?.(false);
+        }
+    }
+    /**
+     * Get the currently selected hyperlink.
+     */
+    getCurrentHyperlink() {
+        return this.currentHyperlink;
+    }
+    /**
+     * Check if a hyperlink is currently selected.
+     */
+    hasHyperlink() {
+        return this.currentHyperlink !== null;
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.updateFromCursor();
+    }
+}
+
+/**
+ * SubstitutionFieldPane - Edit substitution field properties.
+ *
+ * Shows:
+ * - Field name
+ * - Default value
+ * - Format configuration (value type, number/currency/date formats)
+ *
+ * Uses the PCEditor public API:
+ * - editor.getFieldAt()
+ * - editor.updateField()
+ */
+class SubstitutionFieldPane extends BasePane {
+    constructor(id = 'substitution-field', options = {}) {
+        super(id, { className: 'pc-pane-substitution-field', ...options });
+        this.fieldNameInput = null;
+        this.fieldDefaultInput = null;
+        this.valueTypeSelect = null;
+        this.numberFormatSelect = null;
+        this.currencyFormatSelect = null;
+        this.dateFormatSelect = null;
+        this.positionHint = null;
+        this.numberFormatGroup = null;
+        this.currencyFormatGroup = null;
+        this.dateFormatGroup = null;
+        this.currentField = null;
+        this.onApplyCallback = options.onApply;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // Listen for field selection events
+            const selectionHandler = (event) => {
+                if (event.type === 'field' && event.field) {
+                    this.showField(event.field);
+                }
+                else if (!event.type || event.type !== 'field') ;
+            };
+            this.editor.on('selection-change', selectionHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('selection-change', selectionHandler);
+            });
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Field name input
+        this.fieldNameInput = this.createTextInput({ placeholder: 'Field name' });
+        container.appendChild(this.createFormGroup('Field Name', this.fieldNameInput));
+        // Default value input
+        this.fieldDefaultInput = this.createTextInput({ placeholder: 'Default value (optional)' });
+        container.appendChild(this.createFormGroup('Default Value', this.fieldDefaultInput));
+        // Value type select
+        this.valueTypeSelect = this.createSelect([
+            { value: '', label: '(None)' },
+            { value: 'number', label: 'Number' },
+            { value: 'currency', label: 'Currency' },
+            { value: 'date', label: 'Date' }
+        ]);
+        this.addImmediateApplyListener(this.valueTypeSelect, () => this.updateFormatGroups());
+        container.appendChild(this.createFormGroup('Value Type', this.valueTypeSelect));
+        // Number format group
+        this.numberFormatGroup = this.createSection();
+        this.numberFormatGroup.style.display = 'none';
+        this.numberFormatSelect = this.createSelect([
+            { value: '0', label: 'Integer (0)' },
+            { value: '0.00', label: 'Two decimals (0.00)' },
+            { value: '0,0', label: 'Thousands separator (0,0)' },
+            { value: '0,0.00', label: 'Thousands + decimals (0,0.00)' }
+        ]);
+        this.numberFormatGroup.appendChild(this.createFormGroup('Number Format', this.numberFormatSelect));
+        container.appendChild(this.numberFormatGroup);
+        // Currency format group
+        this.currencyFormatGroup = this.createSection();
+        this.currencyFormatGroup.style.display = 'none';
+        this.currencyFormatSelect = this.createSelect([
+            { value: 'USD', label: 'USD ($)' },
+            { value: 'EUR', label: 'EUR' },
+            { value: 'GBP', label: 'GBP' },
+            { value: 'JPY', label: 'JPY' }
+        ]);
+        this.currencyFormatGroup.appendChild(this.createFormGroup('Currency', this.currencyFormatSelect));
+        container.appendChild(this.currencyFormatGroup);
+        // Date format group
+        this.dateFormatGroup = this.createSection();
+        this.dateFormatGroup.style.display = 'none';
+        this.dateFormatSelect = this.createSelect([
+            { value: 'MMMM D, YYYY', label: 'January 1, 2026' },
+            { value: 'MM/DD/YYYY', label: '01/01/2026' },
+            { value: 'DD/MM/YYYY', label: '01/01/2026 (EU)' },
+            { value: 'YYYY-MM-DD', label: '2026-01-01 (ISO)' }
+        ]);
+        this.dateFormatGroup.appendChild(this.createFormGroup('Date Format', this.dateFormatSelect));
+        container.appendChild(this.dateFormatGroup);
+        // Apply button
+        const applyBtn = this.createButton('Apply Changes', { variant: 'primary' });
+        this.addButtonListener(applyBtn, () => this.applyChanges());
+        container.appendChild(applyBtn);
+        // Position hint
+        this.positionHint = this.createHint('');
+        container.appendChild(this.positionHint);
+        return container;
+    }
+    updateFormatGroups() {
+        const valueType = this.valueTypeSelect?.value || '';
+        if (this.numberFormatGroup) {
+            this.numberFormatGroup.style.display = valueType === 'number' ? 'block' : 'none';
+        }
+        if (this.currencyFormatGroup) {
+            this.currencyFormatGroup.style.display = valueType === 'currency' ? 'block' : 'none';
+        }
+        if (this.dateFormatGroup) {
+            this.dateFormatGroup.style.display = valueType === 'date' ? 'block' : 'none';
+        }
+    }
+    /**
+     * Show the pane with the given field.
+     */
+    showField(field) {
+        this.currentField = field;
+        if (this.fieldNameInput) {
+            this.fieldNameInput.value = field.fieldName;
+        }
+        if (this.fieldDefaultInput) {
+            this.fieldDefaultInput.value = field.defaultValue || '';
+        }
+        if (this.positionHint) {
+            this.positionHint.textContent = `Field at position ${field.textIndex}`;
+        }
+        // Populate format options
+        if (this.valueTypeSelect) {
+            this.valueTypeSelect.value = field.formatConfig?.valueType || '';
+        }
+        if (this.numberFormatSelect && field.formatConfig?.numberFormat) {
+            this.numberFormatSelect.value = field.formatConfig.numberFormat;
+        }
+        if (this.currencyFormatSelect && field.formatConfig?.currencyFormat) {
+            this.currencyFormatSelect.value = field.formatConfig.currencyFormat;
+        }
+        if (this.dateFormatSelect && field.formatConfig?.dateFormat) {
+            this.dateFormatSelect.value = field.formatConfig.dateFormat;
+        }
+        this.updateFormatGroups();
+        this.show();
+    }
+    /**
+     * Hide the pane and clear the current field.
+     */
+    hideField() {
+        this.currentField = null;
+        this.hide();
+    }
+    applyChanges() {
+        if (!this.editor || !this.currentField) {
+            this.onApplyCallback?.(false, new Error('No field selected'));
+            return;
+        }
+        const fieldName = this.fieldNameInput?.value.trim();
+        if (!fieldName) {
+            this.onApplyCallback?.(false, new Error('Field name cannot be empty'));
+            return;
+        }
+        const updates = {};
+        if (fieldName !== this.currentField.fieldName) {
+            updates.fieldName = fieldName;
+        }
+        const defaultValue = this.fieldDefaultInput?.value || undefined;
+        if (defaultValue !== this.currentField.defaultValue) {
+            updates.defaultValue = defaultValue;
+        }
+        // Build format config
+        const valueType = this.valueTypeSelect?.value;
+        if (valueType) {
+            const formatConfig = {
+                valueType: valueType
+            };
+            if (valueType === 'number' && this.numberFormatSelect?.value) {
+                formatConfig.numberFormat = this.numberFormatSelect.value;
+            }
+            else if (valueType === 'currency' && this.currencyFormatSelect?.value) {
+                formatConfig.currencyFormat = this.currencyFormatSelect.value;
+            }
+            else if (valueType === 'date' && this.dateFormatSelect?.value) {
+                formatConfig.dateFormat = this.dateFormatSelect.value;
+            }
+            updates.formatConfig = formatConfig;
+        }
+        else if (this.currentField.formatConfig) {
+            updates.formatConfig = undefined;
+        }
+        if (Object.keys(updates).length === 0) {
+            return; // No changes
+        }
+        try {
+            const success = this.editor.updateField(this.currentField.textIndex, updates);
+            if (success) {
+                // Update the current field reference
+                this.currentField = this.editor.getFieldAt(this.currentField.textIndex) || null;
+                this.onApplyCallback?.(true);
+            }
+            else {
+                this.onApplyCallback?.(false, new Error('Failed to update field'));
+            }
+        }
+        catch (error) {
+            this.onApplyCallback?.(false, error instanceof Error ? error : new Error(String(error)));
+        }
+    }
+    /**
+     * Get the currently selected field.
+     */
+    getCurrentField() {
+        return this.currentField;
+    }
+    /**
+     * Check if a field is currently selected.
+     */
+    hasField() {
+        return this.currentField !== null;
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        // Field pane doesn't auto-update - it's driven by selection events
+    }
+}
+
+/**
+ * RepeatingSectionPane - Edit repeating section (loop) properties.
+ *
+ * Shows:
+ * - Field path (array property in merge data)
+ * - Position information
+ *
+ * Uses the PCEditor public API:
+ * - editor.getRepeatingSection()
+ * - editor.updateRepeatingSectionFieldPath()
+ * - editor.removeRepeatingSection()
+ */
+class RepeatingSectionPane extends BasePane {
+    constructor(id = 'repeating-section', options = {}) {
+        super(id, { className: 'pc-pane-repeating-section', ...options });
+        this.fieldPathInput = null;
+        this.positionHint = null;
+        this.currentSection = null;
+        this.onApplyCallback = options.onApply;
+        this.onRemoveCallback = options.onRemove;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // Listen for repeating section selection
+            const selectionHandler = (event) => {
+                if (event.type === 'repeating-section' && event.sectionId) {
+                    const section = this.editor?.getRepeatingSection(event.sectionId);
+                    if (section) {
+                        this.showSection(section);
+                    }
+                }
+            };
+            const removedHandler = () => {
+                this.hideSection();
+            };
+            this.editor.on('selection-change', selectionHandler);
+            this.editor.on('repeating-section-removed', removedHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('selection-change', selectionHandler);
+                this.editor?.off('repeating-section-removed', removedHandler);
+            });
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Field path input
+        this.fieldPathInput = this.createTextInput({ placeholder: 'items' });
+        container.appendChild(this.createFormGroup('Array Field Path', this.fieldPathInput, {
+            hint: 'Path to array in merge data (e.g., "items" or "contact.addresses")'
+        }));
+        // Apply button
+        const applyBtn = this.createButton('Apply Changes', { variant: 'primary' });
+        this.addButtonListener(applyBtn, () => this.applyChanges());
+        container.appendChild(applyBtn);
+        // Remove button
+        const removeBtn = this.createButton('Remove Loop', { variant: 'danger' });
+        removeBtn.style.marginTop = '0.5rem';
+        this.addButtonListener(removeBtn, () => this.removeSection());
+        container.appendChild(removeBtn);
+        // Position hint
+        this.positionHint = this.createHint('');
+        container.appendChild(this.positionHint);
+        return container;
+    }
+    /**
+     * Show the pane with the given section.
+     */
+    showSection(section) {
+        this.currentSection = section;
+        if (this.fieldPathInput) {
+            this.fieldPathInput.value = section.fieldPath;
+        }
+        if (this.positionHint) {
+            this.positionHint.textContent = `Loop from position ${section.startIndex} to ${section.endIndex}`;
+        }
+        this.show();
+    }
+    /**
+     * Hide the pane and clear the current section.
+     */
+    hideSection() {
+        this.currentSection = null;
+        this.hide();
+    }
+    applyChanges() {
+        if (!this.editor || !this.currentSection) {
+            this.onApplyCallback?.(false, new Error('No section selected'));
+            return;
+        }
+        const fieldPath = this.fieldPathInput?.value.trim();
+        if (!fieldPath) {
+            this.onApplyCallback?.(false, new Error('Field path cannot be empty'));
+            return;
+        }
+        if (fieldPath === this.currentSection.fieldPath) {
+            return; // No changes
+        }
+        try {
+            const success = this.editor.updateRepeatingSectionFieldPath(this.currentSection.id, fieldPath);
+            if (success) {
+                // Update the current section reference
+                this.currentSection = this.editor.getRepeatingSection(this.currentSection.id) || null;
+                if (this.currentSection) {
+                    this.showSection(this.currentSection);
+                }
+                this.onApplyCallback?.(true);
+            }
+            else {
+                this.onApplyCallback?.(false, new Error('Failed to update section'));
+            }
+        }
+        catch (error) {
+            this.onApplyCallback?.(false, error instanceof Error ? error : new Error(String(error)));
+        }
+    }
+    removeSection() {
+        if (!this.editor || !this.currentSection)
+            return;
+        try {
+            this.editor.removeRepeatingSection(this.currentSection.id);
+            this.hideSection();
+            this.onRemoveCallback?.(true);
+        }
+        catch {
+            this.onRemoveCallback?.(false);
+        }
+    }
+    /**
+     * Get the currently selected section.
+     */
+    getCurrentSection() {
+        return this.currentSection;
+    }
+    /**
+     * Check if a section is currently selected.
+     */
+    hasSection() {
+        return this.currentSection !== null;
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        // Section pane doesn't auto-update - it's driven by selection events
+    }
+}
+
+/**
+ * TableRowLoopPane - Edit table row loop properties.
+ *
+ * Shows:
+ * - Field path (array property in merge data)
+ * - Row range information
+ *
+ * Uses the TableObject API:
+ * - table.getRowLoop()
+ * - table.updateRowLoopFieldPath()
+ * - table.removeRowLoop()
+ */
+class TableRowLoopPane extends BasePane {
+    constructor(id = 'table-row-loop', options = {}) {
+        super(id, { className: 'pc-pane-table-row-loop', ...options });
+        this.fieldPathInput = null;
+        this.rangeHint = null;
+        this.currentLoop = null;
+        this.currentTable = null;
+        this.onApplyCallback = options.onApply;
+        this.onRemoveCallback = options.onRemove;
+    }
+    attach(options) {
+        super.attach(options);
+        // Table row loop pane is typically shown manually when a table's row loop is selected
+        // The consumer is responsible for calling showLoop() with the table and loop
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Field path input
+        this.fieldPathInput = this.createTextInput({ placeholder: 'items' });
+        container.appendChild(this.createFormGroup('Array Field Path', this.fieldPathInput, {
+            hint: 'Path to array in merge data (e.g., "items" or "orders")'
+        }));
+        // Apply button
+        const applyBtn = this.createButton('Apply Changes', { variant: 'primary' });
+        this.addButtonListener(applyBtn, () => this.applyChanges());
+        container.appendChild(applyBtn);
+        // Remove button
+        const removeBtn = this.createButton('Remove Loop', { variant: 'danger' });
+        removeBtn.style.marginTop = '0.5rem';
+        this.addButtonListener(removeBtn, () => this.removeLoop());
+        container.appendChild(removeBtn);
+        // Range hint
+        this.rangeHint = this.createHint('');
+        container.appendChild(this.rangeHint);
+        return container;
+    }
+    /**
+     * Show the pane with the given table and loop.
+     */
+    showLoop(table, loop) {
+        this.currentTable = table;
+        this.currentLoop = loop;
+        if (this.fieldPathInput) {
+            this.fieldPathInput.value = loop.fieldPath;
+        }
+        if (this.rangeHint) {
+            this.rangeHint.textContent = `Rows ${loop.startRowIndex} - ${loop.endRowIndex}`;
+        }
+        this.show();
+    }
+    /**
+     * Hide the pane and clear current loop.
+     */
+    hideLoop() {
+        this.currentTable = null;
+        this.currentLoop = null;
+        this.hide();
+    }
+    applyChanges() {
+        if (!this.currentTable || !this.currentLoop) {
+            this.onApplyCallback?.(false, new Error('No loop selected'));
+            return;
+        }
+        const fieldPath = this.fieldPathInput?.value.trim();
+        if (!fieldPath) {
+            this.onApplyCallback?.(false, new Error('Field path cannot be empty'));
+            return;
+        }
+        if (fieldPath === this.currentLoop.fieldPath) {
+            return; // No changes
+        }
+        try {
+            const success = this.currentTable.updateRowLoopFieldPath(this.currentLoop.id, fieldPath);
+            if (success) {
+                // Update the current loop reference
+                this.currentLoop = this.currentTable.getRowLoop(this.currentLoop.id) || null;
+                if (this.currentLoop) {
+                    this.showLoop(this.currentTable, this.currentLoop);
+                }
+                this.onApplyCallback?.(true);
+            }
+            else {
+                this.onApplyCallback?.(false, new Error('Failed to update loop'));
+            }
+        }
+        catch (error) {
+            this.onApplyCallback?.(false, error instanceof Error ? error : new Error(String(error)));
+        }
+    }
+    removeLoop() {
+        if (!this.currentTable || !this.currentLoop)
+            return;
+        try {
+            const success = this.currentTable.removeRowLoop(this.currentLoop.id);
+            if (success) {
+                this.hideLoop();
+                this.onRemoveCallback?.(true);
+            }
+            else {
+                this.onRemoveCallback?.(false);
+            }
+        }
+        catch {
+            this.onRemoveCallback?.(false);
+        }
+    }
+    /**
+     * Get the currently selected loop.
+     */
+    getCurrentLoop() {
+        return this.currentLoop;
+    }
+    /**
+     * Get the currently selected table.
+     */
+    getCurrentTable() {
+        return this.currentTable;
+    }
+    /**
+     * Check if a loop is currently selected.
+     */
+    hasLoop() {
+        return this.currentLoop !== null;
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        // Table row loop pane doesn't auto-update - it's driven by showLoop() calls
+    }
+}
+
+/**
+ * TextBoxPane - Edit text box properties.
+ *
+ * Shows:
+ * - Position (inline, block, relative)
+ * - Relative offset (for relative positioning)
+ * - Background color
+ * - Border (width, color, style)
+ * - Padding
+ *
+ * Uses the PCEditor public API:
+ * - editor.getSelectedTextBox()
+ * - editor.updateTextBox()
+ */
+class TextBoxPane extends BasePane {
+    constructor(id = 'textbox', options = {}) {
+        super(id, { className: 'pc-pane-textbox', ...options });
+        this.positionSelect = null;
+        this.offsetGroup = null;
+        this.offsetXInput = null;
+        this.offsetYInput = null;
+        this.bgColorInput = null;
+        this.borderWidthInput = null;
+        this.borderColorInput = null;
+        this.borderStyleSelect = null;
+        this.paddingInput = null;
+        this.currentTextBox = null;
+        this.onApplyCallback = options.onApply;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // Listen for selection changes
+            const updateHandler = () => this.updateFromSelection();
+            this.editor.on('selection-change', updateHandler);
+            this.editor.on('textbox-updated', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('selection-change', updateHandler);
+                this.editor?.off('textbox-updated', updateHandler);
+            });
+            // Initial update
+            this.updateFromSelection();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Position section
+        const positionSection = this.createSection('Position');
+        this.positionSelect = this.createSelect([
+            { value: 'inline', label: 'Inline' },
+            { value: 'block', label: 'Block' },
+            { value: 'relative', label: 'Relative' }
+        ], 'inline');
+        this.addImmediateApplyListener(this.positionSelect, () => this.updateOffsetVisibility());
+        positionSection.appendChild(this.createFormGroup('Type', this.positionSelect));
+        // Offset group (only visible for relative positioning)
+        this.offsetGroup = document.createElement('div');
+        this.offsetGroup.style.display = 'none';
+        const offsetRow = this.createRow();
+        this.offsetXInput = this.createNumberInput({ value: 0 });
+        this.offsetYInput = this.createNumberInput({ value: 0 });
+        offsetRow.appendChild(this.createFormGroup('X', this.offsetXInput, { inline: true }));
+        offsetRow.appendChild(this.createFormGroup('Y', this.offsetYInput, { inline: true }));
+        this.offsetGroup.appendChild(offsetRow);
+        positionSection.appendChild(this.offsetGroup);
+        container.appendChild(positionSection);
+        // Background section
+        const bgSection = this.createSection('Background');
+        this.bgColorInput = this.createColorInput('#ffffff');
+        bgSection.appendChild(this.createFormGroup('Color', this.bgColorInput));
+        container.appendChild(bgSection);
+        // Border section
+        const borderSection = this.createSection('Border');
+        const borderRow = this.createRow();
+        this.borderWidthInput = this.createNumberInput({ min: 0, max: 10, value: 1 });
+        this.borderColorInput = this.createColorInput('#cccccc');
+        borderRow.appendChild(this.createFormGroup('Width', this.borderWidthInput, { inline: true }));
+        borderRow.appendChild(this.createFormGroup('Color', this.borderColorInput, { inline: true }));
+        borderSection.appendChild(borderRow);
+        this.borderStyleSelect = this.createSelect([
+            { value: 'solid', label: 'Solid' },
+            { value: 'dashed', label: 'Dashed' },
+            { value: 'dotted', label: 'Dotted' },
+            { value: 'none', label: 'None' }
+        ], 'solid');
+        borderSection.appendChild(this.createFormGroup('Style', this.borderStyleSelect));
+        container.appendChild(borderSection);
+        // Padding section
+        const paddingSection = this.createSection('Padding');
+        this.paddingInput = this.createNumberInput({ min: 0, max: 50, value: 8 });
+        paddingSection.appendChild(this.createFormGroup('All sides (px)', this.paddingInput));
+        container.appendChild(paddingSection);
+        // Apply button
+        const applyBtn = this.createButton('Apply Changes', { variant: 'primary' });
+        this.addButtonListener(applyBtn, () => this.applyChanges());
+        container.appendChild(applyBtn);
+        return container;
+    }
+    updateFromSelection() {
+        if (!this.editor)
+            return;
+        const textBox = this.editor.getSelectedTextBox?.();
+        if (textBox && !textBox.editing) {
+            this.showTextBox(textBox);
+        }
+        else {
+            this.hideTextBox();
+        }
+    }
+    /**
+     * Show the pane with the given text box.
+     */
+    showTextBox(textBox) {
+        this.currentTextBox = textBox;
+        // Populate position
+        if (this.positionSelect) {
+            this.positionSelect.value = textBox.position || 'inline';
+        }
+        this.updateOffsetVisibility();
+        // Populate offset
+        if (this.offsetXInput) {
+            this.offsetXInput.value = String(textBox.relativeOffset?.x ?? 0);
+        }
+        if (this.offsetYInput) {
+            this.offsetYInput.value = String(textBox.relativeOffset?.y ?? 0);
+        }
+        // Populate background
+        if (this.bgColorInput) {
+            this.bgColorInput.value = textBox.backgroundColor || '#ffffff';
+        }
+        // Populate border (use first side with non-none style)
+        const border = textBox.border;
+        const activeBorder = border.top.style !== 'none' ? border.top :
+            border.right.style !== 'none' ? border.right :
+                border.bottom.style !== 'none' ? border.bottom :
+                    border.left.style !== 'none' ? border.left : border.top;
+        if (this.borderWidthInput) {
+            this.borderWidthInput.value = String(activeBorder.width);
+        }
+        if (this.borderColorInput) {
+            this.borderColorInput.value = activeBorder.color;
+        }
+        if (this.borderStyleSelect) {
+            this.borderStyleSelect.value = activeBorder.style;
+        }
+        // Populate padding
+        if (this.paddingInput) {
+            this.paddingInput.value = String(textBox.padding ?? 8);
+        }
+        this.show();
+    }
+    /**
+     * Hide the pane and clear current text box.
+     */
+    hideTextBox() {
+        this.currentTextBox = null;
+        this.hide();
+    }
+    updateOffsetVisibility() {
+        if (this.offsetGroup && this.positionSelect) {
+            this.offsetGroup.style.display = this.positionSelect.value === 'relative' ? 'block' : 'none';
+        }
+    }
+    applyChanges() {
+        if (!this.editor || !this.currentTextBox) {
+            this.onApplyCallback?.(false, new Error('No text box selected'));
+            return;
+        }
+        const updates = {};
+        // Position
+        if (this.positionSelect) {
+            updates.position = this.positionSelect.value;
+        }
+        // Relative offset
+        if (this.positionSelect?.value === 'relative') {
+            updates.relativeOffset = {
+                x: parseInt(this.offsetXInput?.value || '0', 10),
+                y: parseInt(this.offsetYInput?.value || '0', 10)
+            };
+        }
+        // Background color
+        if (this.bgColorInput) {
+            updates.backgroundColor = this.bgColorInput.value;
+        }
+        // Border
+        const width = parseInt(this.borderWidthInput?.value || '1', 10);
+        const color = this.borderColorInput?.value || '#cccccc';
+        const style = (this.borderStyleSelect?.value || 'solid');
+        const borderSide = { width, color, style };
+        updates.border = {
+            top: { ...borderSide },
+            right: { ...borderSide },
+            bottom: { ...borderSide },
+            left: { ...borderSide }
+        };
+        // Padding
+        if (this.paddingInput) {
+            updates.padding = parseInt(this.paddingInput.value, 10);
+        }
+        try {
+            const success = this.editor.updateTextBox(this.currentTextBox.id, updates);
+            if (success) {
+                this.onApplyCallback?.(true);
+            }
+            else {
+                this.onApplyCallback?.(false, new Error('Failed to update text box'));
+            }
+        }
+        catch (error) {
+            this.onApplyCallback?.(false, error instanceof Error ? error : new Error(String(error)));
+        }
+    }
+    /**
+     * Get the currently selected text box.
+     */
+    getCurrentTextBox() {
+        return this.currentTextBox;
+    }
+    /**
+     * Check if a text box is currently selected.
+     */
+    hasTextBox() {
+        return this.currentTextBox !== null;
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.updateFromSelection();
+    }
+}
+
+/**
+ * ImagePane - Edit image properties.
+ *
+ * Shows:
+ * - Position (inline, block, relative)
+ * - Relative offset (for relative positioning)
+ * - Fit mode (contain, cover, fill, none, tile)
+ * - Resize mode (free, locked-aspect-ratio)
+ * - Alt text
+ * - Source file picker
+ *
+ * Uses the PCEditor public API:
+ * - editor.getSelectedImage()
+ * - editor.updateImage()
+ * - editor.setImageSource()
+ */
+class ImagePane extends BasePane {
+    constructor(id = 'image', options = {}) {
+        super(id, { className: 'pc-pane-image', ...options });
+        this.positionSelect = null;
+        this.offsetGroup = null;
+        this.offsetXInput = null;
+        this.offsetYInput = null;
+        this.fitModeSelect = null;
+        this.resizeModeSelect = null;
+        this.altTextInput = null;
+        this.fileInput = null;
+        this.currentImage = null;
+        this.maxImageWidth = options.maxImageWidth ?? 400;
+        this.maxImageHeight = options.maxImageHeight ?? 400;
+        this.onApplyCallback = options.onApply;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // Listen for selection changes
+            const updateHandler = () => this.updateFromSelection();
+            this.editor.on('selection-change', updateHandler);
+            this.editor.on('image-updated', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('selection-change', updateHandler);
+                this.editor?.off('image-updated', updateHandler);
+            });
+            // Initial update
+            this.updateFromSelection();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Position section
+        const positionSection = this.createSection('Position');
+        this.positionSelect = this.createSelect([
+            { value: 'inline', label: 'Inline' },
+            { value: 'block', label: 'Block' },
+            { value: 'relative', label: 'Relative' }
+        ], 'inline');
+        this.addImmediateApplyListener(this.positionSelect, () => this.updateOffsetVisibility());
+        positionSection.appendChild(this.createFormGroup('Type', this.positionSelect));
+        // Offset group (only visible for relative positioning)
+        this.offsetGroup = document.createElement('div');
+        this.offsetGroup.style.display = 'none';
+        const offsetRow = this.createRow();
+        this.offsetXInput = this.createNumberInput({ value: 0 });
+        this.offsetYInput = this.createNumberInput({ value: 0 });
+        offsetRow.appendChild(this.createFormGroup('X', this.offsetXInput, { inline: true }));
+        offsetRow.appendChild(this.createFormGroup('Y', this.offsetYInput, { inline: true }));
+        this.offsetGroup.appendChild(offsetRow);
+        positionSection.appendChild(this.offsetGroup);
+        container.appendChild(positionSection);
+        // Fit mode section
+        const fitSection = this.createSection('Display');
+        this.fitModeSelect = this.createSelect([
+            { value: 'contain', label: 'Contain' },
+            { value: 'cover', label: 'Cover' },
+            { value: 'fill', label: 'Fill' },
+            { value: 'none', label: 'None (original size)' },
+            { value: 'tile', label: 'Tile' }
+        ], 'contain');
+        fitSection.appendChild(this.createFormGroup('Fit Mode', this.fitModeSelect));
+        this.resizeModeSelect = this.createSelect([
+            { value: 'locked-aspect-ratio', label: 'Lock Aspect Ratio' },
+            { value: 'free', label: 'Free Resize' }
+        ], 'locked-aspect-ratio');
+        fitSection.appendChild(this.createFormGroup('Resize Mode', this.resizeModeSelect));
+        container.appendChild(fitSection);
+        // Alt text section
+        const altSection = this.createSection('Accessibility');
+        this.altTextInput = this.createTextInput({ placeholder: 'Description of the image' });
+        altSection.appendChild(this.createFormGroup('Alt Text', this.altTextInput));
+        container.appendChild(altSection);
+        // Source section
+        const sourceSection = this.createSection('Source');
+        this.fileInput = document.createElement('input');
+        this.fileInput.type = 'file';
+        this.fileInput.accept = 'image/*';
+        this.fileInput.style.display = 'none';
+        this.fileInput.addEventListener('change', (e) => this.handleFileChange(e));
+        sourceSection.appendChild(this.fileInput);
+        const changeSourceBtn = this.createButton('Change Image...');
+        this.addButtonListener(changeSourceBtn, () => this.fileInput?.click());
+        sourceSection.appendChild(changeSourceBtn);
+        container.appendChild(sourceSection);
+        // Apply button
+        const applyBtn = this.createButton('Apply Changes', { variant: 'primary' });
+        this.addButtonListener(applyBtn, () => this.applyChanges());
+        container.appendChild(applyBtn);
+        return container;
+    }
+    updateFromSelection() {
+        if (!this.editor)
+            return;
+        const image = this.editor.getSelectedImage?.();
+        if (image) {
+            this.showImage(image);
+        }
+        else {
+            this.hideImage();
+        }
+    }
+    /**
+     * Show the pane with the given image.
+     */
+    showImage(image) {
+        this.currentImage = image;
+        // Populate position
+        if (this.positionSelect) {
+            this.positionSelect.value = image.position || 'inline';
+        }
+        this.updateOffsetVisibility();
+        // Populate offset
+        if (this.offsetXInput) {
+            this.offsetXInput.value = String(image.relativeOffset?.x ?? 0);
+        }
+        if (this.offsetYInput) {
+            this.offsetYInput.value = String(image.relativeOffset?.y ?? 0);
+        }
+        // Populate fit mode
+        if (this.fitModeSelect) {
+            this.fitModeSelect.value = image.fit || 'contain';
+        }
+        // Populate resize mode
+        if (this.resizeModeSelect) {
+            this.resizeModeSelect.value = image.resizeMode || 'locked-aspect-ratio';
+        }
+        // Populate alt text
+        if (this.altTextInput) {
+            this.altTextInput.value = image.alt || '';
+        }
+        this.show();
+    }
+    /**
+     * Hide the pane and clear current image.
+     */
+    hideImage() {
+        this.currentImage = null;
+        this.hide();
+    }
+    updateOffsetVisibility() {
+        if (this.offsetGroup && this.positionSelect) {
+            this.offsetGroup.style.display = this.positionSelect.value === 'relative' ? 'block' : 'none';
+        }
+    }
+    handleFileChange(event) {
+        if (!this.editor || !this.currentImage)
+            return;
+        const input = event.target;
+        const file = input.files?.[0];
+        if (!file)
+            return;
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const dataUrl = e.target?.result;
+            if (dataUrl && this.currentImage && this.editor) {
+                this.editor.setImageSource(this.currentImage.id, dataUrl, {
+                    maxWidth: this.maxImageWidth,
+                    maxHeight: this.maxImageHeight
+                });
+            }
+        };
+        reader.readAsDataURL(file);
+        // Reset file input so the same file can be selected again
+        input.value = '';
+    }
+    applyChanges() {
+        if (!this.editor || !this.currentImage) {
+            this.onApplyCallback?.(false, new Error('No image selected'));
+            return;
+        }
+        const updates = {};
+        // Position
+        if (this.positionSelect) {
+            updates.position = this.positionSelect.value;
+        }
+        // Relative offset
+        if (this.positionSelect?.value === 'relative') {
+            updates.relativeOffset = {
+                x: parseInt(this.offsetXInput?.value || '0', 10),
+                y: parseInt(this.offsetYInput?.value || '0', 10)
+            };
+        }
+        // Fit mode
+        if (this.fitModeSelect) {
+            updates.fit = this.fitModeSelect.value;
+        }
+        // Resize mode
+        if (this.resizeModeSelect) {
+            updates.resizeMode = this.resizeModeSelect.value;
+        }
+        // Alt text
+        if (this.altTextInput) {
+            updates.alt = this.altTextInput.value;
+        }
+        try {
+            const success = this.editor.updateImage(this.currentImage.id, updates);
+            if (success) {
+                this.onApplyCallback?.(true);
+            }
+            else {
+                this.onApplyCallback?.(false, new Error('Failed to update image'));
+            }
+        }
+        catch (error) {
+            this.onApplyCallback?.(false, error instanceof Error ? error : new Error(String(error)));
+        }
+    }
+    /**
+     * Get the currently selected image.
+     */
+    getCurrentImage() {
+        return this.currentImage;
+    }
+    /**
+     * Check if an image is currently selected.
+     */
+    hasImage() {
+        return this.currentImage !== null;
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.updateFromSelection();
+    }
+}
+
+/**
+ * TablePane - Edit table properties.
+ *
+ * Shows:
+ * - Table structure (row/column count)
+ * - Row/column insertion/removal
+ * - Header rows/columns
+ * - Default cell padding and border color
+ * - Cell-specific formatting (background, borders)
+ *
+ * Uses the PCEditor public API:
+ * - editor.getFocusedTable()
+ * - editor.tableInsertRow()
+ * - editor.tableRemoveRow()
+ * - editor.tableInsertColumn()
+ * - editor.tableRemoveColumn()
+ *
+ * And TableObject methods:
+ * - table.setHeaderRowCount()
+ * - table.setHeaderColumnCount()
+ * - table.getCell()
+ * - table.getCellsInRange()
+ */
+class TablePane extends BasePane {
+    constructor(id = 'table', options = {}) {
+        super(id, { className: 'pc-pane-table', ...options });
+        // Structure info
+        this.rowCountDisplay = null;
+        this.colCountDisplay = null;
+        this.cellSelectionDisplay = null;
+        // Header controls
+        this.headerRowInput = null;
+        this.headerColInput = null;
+        // Default controls
+        this.defaultPaddingInput = null;
+        this.defaultBorderColorInput = null;
+        // Cell formatting controls
+        this.cellBgColorInput = null;
+        this.borderTopCheck = null;
+        this.borderRightCheck = null;
+        this.borderBottomCheck = null;
+        this.borderLeftCheck = null;
+        this.borderWidthInput = null;
+        this.borderColorInput = null;
+        this.borderStyleSelect = null;
+        this.currentTable = null;
+        this.onApplyCallback = options.onApply;
+    }
+    attach(options) {
+        super.attach(options);
+        if (this.editor) {
+            // Listen for selection/focus changes
+            const updateHandler = () => this.updateFromFocusedTable();
+            this.editor.on('selection-change', updateHandler);
+            this.editor.on('table-cell-focus', updateHandler);
+            this.editor.on('table-cell-selection', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('selection-change', updateHandler);
+                this.editor?.off('table-cell-focus', updateHandler);
+                this.editor?.off('table-cell-selection', updateHandler);
+            });
+            // Initial update
+            this.updateFromFocusedTable();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        // Structure section
+        const structureSection = this.createSection('Structure');
+        const structureInfo = document.createElement('div');
+        structureInfo.className = 'pc-pane-info-list';
+        this.rowCountDisplay = document.createElement('span');
+        this.colCountDisplay = document.createElement('span');
+        const rowInfo = document.createElement('div');
+        rowInfo.className = 'pc-pane-info';
+        rowInfo.innerHTML = '<span class="pc-pane-info-label">Rows</span>';
+        rowInfo.appendChild(this.rowCountDisplay);
+        const colInfo = document.createElement('div');
+        colInfo.className = 'pc-pane-info';
+        colInfo.innerHTML = '<span class="pc-pane-info-label">Columns</span>';
+        colInfo.appendChild(this.colCountDisplay);
+        structureInfo.appendChild(rowInfo);
+        structureInfo.appendChild(colInfo);
+        structureSection.appendChild(structureInfo);
+        // Row/column buttons
+        const structureBtns = this.createButtonGroup();
+        const addRowBtn = this.createButton('+ Row');
+        this.addButtonListener(addRowBtn, () => this.insertRow());
+        const removeRowBtn = this.createButton('- Row');
+        this.addButtonListener(removeRowBtn, () => this.removeRow());
+        const addColBtn = this.createButton('+ Column');
+        this.addButtonListener(addColBtn, () => this.insertColumn());
+        const removeColBtn = this.createButton('- Column');
+        this.addButtonListener(removeColBtn, () => this.removeColumn());
+        structureBtns.appendChild(addRowBtn);
+        structureBtns.appendChild(removeRowBtn);
+        structureBtns.appendChild(addColBtn);
+        structureBtns.appendChild(removeColBtn);
+        structureSection.appendChild(structureBtns);
+        container.appendChild(structureSection);
+        // Headers section
+        const headersSection = this.createSection('Headers');
+        const headerRow = this.createRow();
+        this.headerRowInput = this.createNumberInput({ min: 0, max: 10, value: 0 });
+        this.headerColInput = this.createNumberInput({ min: 0, max: 10, value: 0 });
+        headerRow.appendChild(this.createFormGroup('Header Rows', this.headerRowInput, { inline: true }));
+        headerRow.appendChild(this.createFormGroup('Header Cols', this.headerColInput, { inline: true }));
+        headersSection.appendChild(headerRow);
+        const applyHeadersBtn = this.createButton('Apply Headers');
+        this.addButtonListener(applyHeadersBtn, () => this.applyHeaders());
+        headersSection.appendChild(applyHeadersBtn);
+        container.appendChild(headersSection);
+        // Defaults section
+        const defaultsSection = this.createSection('Defaults');
+        const defaultsRow = this.createRow();
+        this.defaultPaddingInput = this.createNumberInput({ min: 0, max: 20, value: 8 });
+        this.defaultBorderColorInput = this.createColorInput('#cccccc');
+        defaultsRow.appendChild(this.createFormGroup('Padding', this.defaultPaddingInput, { inline: true }));
+        defaultsRow.appendChild(this.createFormGroup('Border', this.defaultBorderColorInput, { inline: true }));
+        defaultsSection.appendChild(defaultsRow);
+        const applyDefaultsBtn = this.createButton('Apply Defaults');
+        this.addButtonListener(applyDefaultsBtn, () => this.applyDefaults());
+        defaultsSection.appendChild(applyDefaultsBtn);
+        container.appendChild(defaultsSection);
+        // Cell formatting section
+        const cellSection = this.createSection('Cell Formatting');
+        this.cellSelectionDisplay = this.createHint('No cell selected');
+        cellSection.appendChild(this.cellSelectionDisplay);
+        // Background
+        this.cellBgColorInput = this.createColorInput('#ffffff');
+        cellSection.appendChild(this.createFormGroup('Background', this.cellBgColorInput));
+        // Border checkboxes
+        const borderChecks = document.createElement('div');
+        borderChecks.className = 'pc-pane-row';
+        borderChecks.style.flexWrap = 'wrap';
+        borderChecks.style.gap = '4px';
+        this.borderTopCheck = document.createElement('input');
+        this.borderTopCheck.type = 'checkbox';
+        this.borderTopCheck.checked = true;
+        this.borderRightCheck = document.createElement('input');
+        this.borderRightCheck.type = 'checkbox';
+        this.borderRightCheck.checked = true;
+        this.borderBottomCheck = document.createElement('input');
+        this.borderBottomCheck.type = 'checkbox';
+        this.borderBottomCheck.checked = true;
+        this.borderLeftCheck = document.createElement('input');
+        this.borderLeftCheck.type = 'checkbox';
+        this.borderLeftCheck.checked = true;
+        borderChecks.appendChild(this.createCheckbox('Top', true));
+        borderChecks.appendChild(this.createCheckbox('Right', true));
+        borderChecks.appendChild(this.createCheckbox('Bottom', true));
+        borderChecks.appendChild(this.createCheckbox('Left', true));
+        // Replace created checkboxes with our tracked ones
+        const checkLabels = borderChecks.querySelectorAll('label');
+        if (checkLabels[0])
+            checkLabels[0].replaceChild(this.borderTopCheck, checkLabels[0].querySelector('input'));
+        if (checkLabels[1])
+            checkLabels[1].replaceChild(this.borderRightCheck, checkLabels[1].querySelector('input'));
+        if (checkLabels[2])
+            checkLabels[2].replaceChild(this.borderBottomCheck, checkLabels[2].querySelector('input'));
+        if (checkLabels[3])
+            checkLabels[3].replaceChild(this.borderLeftCheck, checkLabels[3].querySelector('input'));
+        cellSection.appendChild(this.createFormGroup('Borders', borderChecks));
+        // Border properties
+        const borderPropsRow = this.createRow();
+        this.borderWidthInput = this.createNumberInput({ min: 0, max: 5, value: 1 });
+        this.borderColorInput = this.createColorInput('#cccccc');
+        borderPropsRow.appendChild(this.createFormGroup('Width', this.borderWidthInput, { inline: true }));
+        borderPropsRow.appendChild(this.createFormGroup('Color', this.borderColorInput, { inline: true }));
+        cellSection.appendChild(borderPropsRow);
+        this.borderStyleSelect = this.createSelect([
+            { value: 'solid', label: 'Solid' },
+            { value: 'dashed', label: 'Dashed' },
+            { value: 'dotted', label: 'Dotted' },
+            { value: 'none', label: 'None' }
+        ], 'solid');
+        cellSection.appendChild(this.createFormGroup('Style', this.borderStyleSelect));
+        const applyCellBtn = this.createButton('Apply to Cell(s)', { variant: 'primary' });
+        this.addButtonListener(applyCellBtn, () => this.applyCellFormatting());
+        cellSection.appendChild(applyCellBtn);
+        container.appendChild(cellSection);
+        return container;
+    }
+    updateFromFocusedTable() {
+        if (!this.editor)
+            return;
+        const table = this.editor.getFocusedTable();
+        if (table) {
+            this.showTable(table);
+        }
+        else {
+            this.hideTable();
+        }
+    }
+    /**
+     * Show the pane with the given table.
+     */
+    showTable(table) {
+        this.currentTable = table;
+        // Update structure info
+        if (this.rowCountDisplay) {
+            this.rowCountDisplay.textContent = String(table.rowCount);
+            this.rowCountDisplay.className = 'pc-pane-info-value';
+        }
+        if (this.colCountDisplay) {
+            this.colCountDisplay.textContent = String(table.columnCount);
+            this.colCountDisplay.className = 'pc-pane-info-value';
+        }
+        // Update header counts
+        if (this.headerRowInput) {
+            this.headerRowInput.value = String(table.headerRowCount);
+        }
+        if (this.headerColInput) {
+            this.headerColInput.value = String(table.headerColumnCount);
+        }
+        // Update defaults
+        if (this.defaultPaddingInput) {
+            this.defaultPaddingInput.value = String(table.defaultCellPadding);
+        }
+        if (this.defaultBorderColorInput) {
+            this.defaultBorderColorInput.value = table.defaultBorderColor;
+        }
+        // Update cell selection info
+        this.updateCellSelectionInfo(table);
+        this.show();
+    }
+    /**
+     * Hide the pane and clear current table.
+     */
+    hideTable() {
+        this.currentTable = null;
+        this.hide();
+    }
+    updateCellSelectionInfo(table) {
+        if (!this.cellSelectionDisplay)
+            return;
+        const focusedCell = table.focusedCell;
+        const selectedRange = table.selectedRange;
+        if (selectedRange) {
+            const count = (selectedRange.end.row - selectedRange.start.row + 1) *
+                (selectedRange.end.col - selectedRange.start.col + 1);
+            this.cellSelectionDisplay.textContent = `${count} cells selected`;
+        }
+        else if (focusedCell) {
+            this.cellSelectionDisplay.textContent = `Cell [${focusedCell.row}, ${focusedCell.col}]`;
+            // Update cell formatting controls from focused cell
+            const cell = table.getCell(focusedCell.row, focusedCell.col);
+            if (cell) {
+                if (this.cellBgColorInput) {
+                    this.cellBgColorInput.value = cell.backgroundColor || '#ffffff';
+                }
+                // Update border controls
+                const border = cell.border;
+                if (this.borderTopCheck)
+                    this.borderTopCheck.checked = border.top.style !== 'none';
+                if (this.borderRightCheck)
+                    this.borderRightCheck.checked = border.right.style !== 'none';
+                if (this.borderBottomCheck)
+                    this.borderBottomCheck.checked = border.bottom.style !== 'none';
+                if (this.borderLeftCheck)
+                    this.borderLeftCheck.checked = border.left.style !== 'none';
+                // Use first active border for properties
+                const activeBorder = border.top.style !== 'none' ? border.top :
+                    border.right.style !== 'none' ? border.right :
+                        border.bottom.style !== 'none' ? border.bottom :
+                            border.left.style !== 'none' ? border.left : border.top;
+                if (this.borderWidthInput)
+                    this.borderWidthInput.value = String(activeBorder.width);
+                if (this.borderColorInput)
+                    this.borderColorInput.value = activeBorder.color;
+                if (this.borderStyleSelect)
+                    this.borderStyleSelect.value = activeBorder.style;
+            }
+        }
+        else {
+            this.cellSelectionDisplay.textContent = 'No cell selected';
+        }
+    }
+    insertRow() {
+        if (!this.editor || !this.currentTable)
+            return;
+        const focusedCell = this.currentTable.focusedCell;
+        const rowIndex = focusedCell ? focusedCell.row + 1 : this.currentTable.rowCount;
+        this.editor.tableInsertRow(this.currentTable, rowIndex);
+        this.updateFromFocusedTable();
+    }
+    removeRow() {
+        if (!this.editor || !this.currentTable)
+            return;
+        const focusedCell = this.currentTable.focusedCell;
+        if (focusedCell && this.currentTable.rowCount > 1) {
+            this.editor.tableRemoveRow(this.currentTable, focusedCell.row);
+            this.updateFromFocusedTable();
+        }
+    }
+    insertColumn() {
+        if (!this.editor || !this.currentTable)
+            return;
+        const focusedCell = this.currentTable.focusedCell;
+        const colIndex = focusedCell ? focusedCell.col + 1 : this.currentTable.columnCount;
+        this.editor.tableInsertColumn(this.currentTable, colIndex);
+        this.updateFromFocusedTable();
+    }
+    removeColumn() {
+        if (!this.editor || !this.currentTable)
+            return;
+        const focusedCell = this.currentTable.focusedCell;
+        if (focusedCell && this.currentTable.columnCount > 1) {
+            this.editor.tableRemoveColumn(this.currentTable, focusedCell.col);
+            this.updateFromFocusedTable();
+        }
+    }
+    applyHeaders() {
+        if (!this.currentTable)
+            return;
+        if (this.headerRowInput) {
+            const count = parseInt(this.headerRowInput.value, 10);
+            this.currentTable.setHeaderRowCount(count);
+        }
+        if (this.headerColInput) {
+            const count = parseInt(this.headerColInput.value, 10);
+            this.currentTable.setHeaderColumnCount(count);
+        }
+        this.editor?.render();
+        this.onApplyCallback?.(true);
+    }
+    applyDefaults() {
+        if (!this.currentTable)
+            return;
+        if (this.defaultPaddingInput) {
+            this.currentTable.defaultCellPadding = parseInt(this.defaultPaddingInput.value, 10);
+        }
+        if (this.defaultBorderColorInput) {
+            this.currentTable.defaultBorderColor = this.defaultBorderColorInput.value;
+        }
+        this.editor?.render();
+        this.onApplyCallback?.(true);
+    }
+    applyCellFormatting() {
+        if (!this.currentTable)
+            return;
+        const focusedCell = this.currentTable.focusedCell;
+        const selectedRange = this.currentTable.selectedRange;
+        // Determine cells to update
+        const cells = [];
+        if (selectedRange) {
+            for (let row = selectedRange.start.row; row <= selectedRange.end.row; row++) {
+                for (let col = selectedRange.start.col; col <= selectedRange.end.col; col++) {
+                    cells.push({ row, col });
+                }
+            }
+        }
+        else if (focusedCell) {
+            cells.push(focusedCell);
+        }
+        if (cells.length === 0)
+            return;
+        // Build border config
+        const width = parseInt(this.borderWidthInput?.value || '1', 10);
+        const color = this.borderColorInput?.value || '#cccccc';
+        const style = (this.borderStyleSelect?.value || 'solid');
+        const borderSide = { width, color, style };
+        const noneBorder = { width: 0, color: '#000000', style: 'none' };
+        const border = {
+            top: this.borderTopCheck?.checked ? { ...borderSide } : { ...noneBorder },
+            right: this.borderRightCheck?.checked ? { ...borderSide } : { ...noneBorder },
+            bottom: this.borderBottomCheck?.checked ? { ...borderSide } : { ...noneBorder },
+            left: this.borderLeftCheck?.checked ? { ...borderSide } : { ...noneBorder }
+        };
+        const bgColor = this.cellBgColorInput?.value;
+        // Apply to each cell
+        for (const { row, col } of cells) {
+            const cell = this.currentTable.getCell(row, col);
+            if (cell) {
+                if (bgColor) {
+                    cell.backgroundColor = bgColor;
+                }
+                cell.border = border;
+            }
+        }
+        this.editor?.render();
+        this.onApplyCallback?.(true);
+    }
+    /**
+     * Get the currently focused table.
+     */
+    getCurrentTable() {
+        return this.currentTable;
+    }
+    /**
+     * Check if a table is currently focused.
+     */
+    hasTable() {
+        return this.currentTable !== null;
+    }
+    /**
+     * Update the pane from current editor state.
+     */
+    update() {
+        this.updateFromFocusedTable();
+    }
+}
+
+export { BaseControl, BaseEmbeddedObject, BasePane, BaseTextRegion, BodyTextRegion, ClipboardManager, ContentAnalyzer, DEFAULT_IMPORT_OPTIONS, Document, DocumentBuilder, DocumentInfoPane, DocumentSettingsPane, EmbeddedObjectFactory, EmbeddedObjectManager, EventEmitter, FlowingTextContent, FooterTextRegion, FormattingPane, HeaderTextRegion, HorizontalRuler, HtmlConverter, HyperlinkPane, ImageObject, ImagePane, MergeDataPane, PCEditor, PDFImportError, PDFImportErrorCode, PDFImporter, PDFParser, Page, RegionManager, RepeatingSectionManager, RepeatingSectionPane, RulerControl, SubstitutionFieldManager, SubstitutionFieldPane, TableCell, TableObject, TablePane, TableRow, TableRowLoopPane, TextBoxObject, TextBoxPane, TextFormattingManager, TextLayout, TextMeasurer, TextPositionCalculator, TextState, VerticalRuler, ViewSettingsPane };
 //# sourceMappingURL=pc-editor.esm.js.map