@productcloudos/editor 1.0.1 → 1.0.4

package/dist/pc-editor.js

@@ -864,6 +864,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.
      */
@@ -2564,11 +2578,14 @@ class TextLayout {
             const emptyLine = this.createEmptyLine(startIndex, formatting, alignment);
             // Add list marker to empty line if it's a list item
             if (listFormatting) {
+                // Get formatting for the empty line (inherited from previous position)
+                const markerFormatting = formatting.getFormattingAt(startIndex > 0 ? startIndex - 1 : startIndex);
                 emptyLine.listMarker = {
                     text: markerText,
                     width: markerWidth,
                     indent: listIndent,
-                    isFirstLineOfListItem: true
+                    isFirstLineOfListItem: true,
+                    formatting: markerFormatting
                 };
             }
             lines.push(emptyLine);
@@ -3857,6 +3874,7 @@ class ImageObject extends BaseEmbeddedObject {
         const imgHeight = this._image.naturalHeight;
         let sx = 0, sy = 0, sw = imgWidth, sh = imgHeight;
         let dx = 0, dy = 0, dw = width, dh = height;
+        let needsClipping = false;
         switch (this._fit) {
             case 'fill':
                 // Stretch to fill
@@ -3880,18 +3898,31 @@ class ImageObject extends BaseEmbeddedObject {
                 break;
             }
             case 'none':
-                // Original size, centered
+                // Original size, centered - clip to box bounds if image is larger
                 dw = imgWidth;
                 dh = imgHeight;
                 dx = (width - imgWidth) / 2;
                 dy = (height - imgHeight) / 2;
+                // Need clipping if image extends beyond bounds
+                if (imgWidth > width || imgHeight > height) {
+                    needsClipping = true;
+                }
                 break;
             case 'tile':
                 // Tile the image to fill bounds
                 this.drawTiledImage(ctx, width, height);
                 return; // Early return, tiling handles its own drawing
         }
+        if (needsClipping) {
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(0, 0, width, height);
+            ctx.clip();
+        }
         ctx.drawImage(this._image, sx, sy, sw, sh, dx, dy, dw, dh);
+        if (needsClipping) {
+            ctx.restore();
+        }
     }
     drawTiledImage(ctx, width, height) {
         if (!this._image)
@@ -6407,8 +6438,9 @@ class TableObject extends BaseEmbeddedObject {
             }
             x += width;
         }
-        if (targetCol === -1)
+        if (targetCol === -1) {
             return null;
+        }
         // Calculate row positions
         let y = 0;
         let targetRow = -1;
@@ -6546,6 +6578,18 @@ class TableObject extends BaseEmbeddedObject {
         for (const row of this._rows) {
             row.removeCell(colIndex);
         }
+        // Clear selection if it references the deleted column or is now out of bounds
+        if (this._selectedRange) {
+            const { start, end } = this._selectedRange;
+            if (start.col >= this._columns.length || end.col >= this._columns.length ||
+                (colIndex >= start.col && colIndex <= end.col)) {
+                this._selectedRange = null;
+            }
+        }
+        // Clear focused cell if it references the deleted column or is now out of bounds
+        if (this._focusedCell && this._focusedCell.col >= this._columns.length) {
+            this._focusedCell = null;
+        }
         this._layoutDirty = true;
         this.updateCoveredCells();
         this.updateSizeFromLayout();
@@ -6604,6 +6648,18 @@ class TableObject extends BaseEmbeddedObject {
         const [removed] = this._rows.splice(rowIndex, 1);
         // Adjust row loop indices
         this.shiftRowLoopIndices(rowIndex, -1);
+        // Clear selection if it references the deleted row or is now out of bounds
+        if (this._selectedRange) {
+            const { start, end } = this._selectedRange;
+            if (start.row >= this._rows.length || end.row >= this._rows.length ||
+                (rowIndex >= start.row && rowIndex <= end.row)) {
+                this._selectedRange = null;
+            }
+        }
+        // Clear focused cell if it references the deleted row or is now out of bounds
+        if (this._focusedCell && this._focusedCell.row >= this._rows.length) {
+            this._focusedCell = null;
+        }
         this._layoutDirty = true;
         this.updateCoveredCells();
         this.updateSizeFromLayout();
@@ -6775,6 +6831,18 @@ class TableObject extends BaseEmbeddedObject {
     removeRowsInRange(startIndex, endIndex) {
         const count = endIndex - startIndex + 1;
         const removed = this._rows.splice(startIndex, count);
+        // Clear selection if it overlaps with removed rows or is now out of bounds
+        if (this._selectedRange) {
+            const { start, end } = this._selectedRange;
+            if (start.row >= this._rows.length || end.row >= this._rows.length ||
+                (start.row <= endIndex && end.row >= startIndex)) {
+                this._selectedRange = null;
+            }
+        }
+        // Clear focused cell if it's now out of bounds
+        if (this._focusedCell && this._focusedCell.row >= this._rows.length) {
+            this._focusedCell = null;
+        }
         this._layoutDirty = true;
         this.updateCoveredCells();
         return removed;
@@ -7198,8 +7266,74 @@ class TableObject extends BaseEmbeddedObject {
             }
             y += row.calculatedHeight;
         }
+        // Render cell range selection highlight for this slice
+        if (this._selectedRange) {
+            this.renderRangeSelectionForSlice(ctx, slice, pageLayout);
+        }
         // Note: Selection border is drawn by FlowingTextRenderer with correct slice height
     }
+    /**
+     * Render range selection highlight for a specific slice.
+     * Only renders the portion of the selection that's visible in this slice.
+     */
+    renderRangeSelectionForSlice(ctx, slice, pageLayout) {
+        if (!this._selectedRange)
+            return;
+        const { start, end } = this._selectedRange;
+        const columnPositions = this.getColumnPositions();
+        const columnWidths = this.getColumnWidths();
+        // Calculate X bounds (same for all slices)
+        const x1 = columnPositions[start.col];
+        const x2 = columnPositions[end.col] + columnWidths[end.col];
+        // Build a map of row index -> Y position in this slice's coordinate system
+        const rowYInSlice = new Map();
+        let y = 0;
+        // On continuation pages, header rows are at the top
+        if (slice.isContinuation && pageLayout.headerRowIndices.length > 0) {
+            for (const headerRowIdx of pageLayout.headerRowIndices) {
+                const row = this._rows[headerRowIdx];
+                if (row) {
+                    rowYInSlice.set(headerRowIdx, y);
+                    y += row.calculatedHeight;
+                }
+            }
+        }
+        // Data rows for this slice
+        for (let rowIdx = slice.startRow; rowIdx < slice.endRow; rowIdx++) {
+            const row = this._rows[rowIdx];
+            if (!row)
+                continue;
+            if (slice.isContinuation && row.isHeader)
+                continue; // Skip headers, already added
+            rowYInSlice.set(rowIdx, y);
+            y += row.calculatedHeight;
+        }
+        // Check if any selected rows are visible in this slice
+        let y1 = null;
+        let y2 = null;
+        for (let rowIdx = start.row; rowIdx <= end.row; rowIdx++) {
+            const rowY = rowYInSlice.get(rowIdx);
+            if (rowY !== undefined) {
+                const row = this._rows[rowIdx];
+                if (row) {
+                    if (y1 === null)
+                        y1 = rowY;
+                    y2 = rowY + row.calculatedHeight;
+                }
+            }
+        }
+        // If no selected rows are visible in this slice, don't render
+        if (y1 === null || y2 === null)
+            return;
+        // Draw selection highlight
+        ctx.fillStyle = 'rgba(0, 120, 215, 0.2)';
+        ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
+        // Draw selection border
+        ctx.strokeStyle = 'rgba(0, 120, 215, 0.8)';
+        ctx.lineWidth = 2;
+        ctx.setLineDash([]);
+        ctx.strokeRect(x1 + 1, y1 + 1, x2 - x1 - 2, y2 - y1 - 2);
+    }
     /**
      * Get rows that should be rendered for a specific page slice.
      * Includes header rows on continuation pages.
@@ -7366,6 +7500,8 @@ class TableObject extends BaseEmbeddedObject {
     }
     blur() {
         this.editing = false;
+        // Clear cell range selection when table loses focus
+        this.clearSelection();
         this.emit('blur', {});
     }
     hasFocus() {
@@ -11432,7 +11568,9 @@ class FlowingTextRenderer extends EventEmitter {
         const maxWidth = this.getAvailableWidthForRegion(region, pageIndex);
         const flowingContent = region.flowingContent;
         // Get cursor position for field selection highlighting
-        const cursorTextIndex = flowingContent.getCursorPosition();
+        // Only use cursor position if the content has focus (otherwise fields stay "selected")
+        const hasFocus = flowingContent.hasFocus();
+        const cursorTextIndex = hasFocus ? flowingContent.getCursorPosition() : undefined;
         // Setup clipping if requested (useful for text boxes)
         if (clipToBounds) {
             ctx.save();
@@ -11469,7 +11607,7 @@ class FlowingTextRenderer extends EventEmitter {
         }
         // Render cursor if this region is active and cursor should be shown
         if (renderCursor && flowingContent.hasFocus() && flowingContent.isCursorVisible()) {
-            this.renderRegionCursor(flowedLines, ctx, bounds, maxWidth, cursorTextIndex);
+            this.renderRegionCursor(flowedLines, ctx, bounds, maxWidth, flowingContent.getCursorPosition());
         }
         if (clipToBounds) {
             ctx.restore();
@@ -11577,8 +11715,10 @@ class FlowingTextRenderer extends EventEmitter {
             this.pageTextOffsets.set(pageIndex, 0);
         }
         // Get cursor position from the specified FlowingTextContent, or fall back to body
+        // Only use cursor position for field selection if the content has focus
         const contentForCursor = flowingContent || this.document.bodyFlowingContent;
-        const cursorTextIndex = contentForCursor ? contentForCursor.getCursorPosition() : 0;
+        const hasFocus = contentForCursor?.hasFocus() ?? false;
+        const cursorTextIndex = hasFocus && contentForCursor ? contentForCursor.getCursorPosition() : undefined;
         // Get total page count for page count fields
         const firstPage = this.document.pages[0];
         const pageCount = firstPage ? (this.flowedPages.get(firstPage.id)?.length || 1) : 1;
@@ -11660,7 +11800,7 @@ class FlowingTextRenderer extends EventEmitter {
         ctx.textBaseline = 'alphabetic';
         // Render list marker if this is the first line of a list item
         if (line.listMarker?.isFirstLineOfListItem && line.listMarker.text) {
-            this.renderListMarker(line.listMarker, ctx, position, line.baseline, line.runs[0]?.formatting);
+            this.renderListMarker(line.listMarker, ctx, position, line.baseline, line.runs[0]?.formatting || line.listMarker.formatting);
         }
         // Create maps for quick lookup by text index
         const substitutionFieldMap = new Map();
@@ -12894,11 +13034,14 @@ class FlowingTextRenderer extends EventEmitter {
         for (const line of flowedPage.lines) {
             if (this.lineContainsSelection(line, this.selectedText)) {
                 const selectionBounds = this.getSelectionBoundsInLine(line, this.selectedText);
-                // Add alignment offset to position the selection correctly
-                const alignmentOffset = this.getAlignmentOffset(line, bounds.width);
-                // Account for list indentation
+                // Account for list indentation - must match renderFlowedLine calculation
                 const listIndent = line.listMarker?.indent ?? 0;
-                ctx.fillRect(bounds.x + alignmentOffset + listIndent + selectionBounds.x, y, selectionBounds.width, line.height);
+                // Calculate alignment offset using effective width (excluding list indent)
+                // This matches how renderFlowedLine calculates alignment
+                const effectiveMaxWidth = bounds.width - listIndent;
+                const alignmentOffset = this.getAlignmentOffset(line, effectiveMaxWidth);
+                const baseX = bounds.x + listIndent;
+                ctx.fillRect(baseX + alignmentOffset + selectionBounds.x, y, selectionBounds.width, line.height);
             }
             y += line.height;
         }
@@ -13371,15 +13514,34 @@ class FlowingTextRenderer extends EventEmitter {
     }
     /**
      * Get a complete snapshot of all flowed content for PDF export.
-     * Returns body pages, header, and footer content.
+     * Returns body pages, header, footer content, and hyperlinks.
      */
     getFlowedPagesSnapshot() {
         const firstPage = this.document.pages[0];
         const bodyPages = firstPage ? this.flowedPages.get(firstPage.id) || [] : [];
+        // Extract hyperlinks from each content area
+        const bodyHyperlinks = this.document.bodyFlowingContent?.getAllHyperlinks().map(h => ({
+            url: h.url,
+            startIndex: h.startIndex,
+            endIndex: h.endIndex
+        }));
+        const headerHyperlinks = this.document.headerFlowingContent?.getAllHyperlinks().map(h => ({
+            url: h.url,
+            startIndex: h.startIndex,
+            endIndex: h.endIndex
+        }));
+        const footerHyperlinks = this.document.footerFlowingContent?.getAllHyperlinks().map(h => ({
+            url: h.url,
+            startIndex: h.startIndex,
+            endIndex: h.endIndex
+        }));
         return {
             body: bodyPages,
             header: this.headerFlowedPage,
-            footer: this.footerFlowedPage
+            footer: this.footerFlowedPage,
+            bodyHyperlinks: bodyHyperlinks?.length ? bodyHyperlinks : undefined,
+            headerHyperlinks: headerHyperlinks?.length ? headerHyperlinks : undefined,
+            footerHyperlinks: footerHyperlinks?.length ? footerHyperlinks : undefined
         };
     }
     // ============================================
@@ -13809,6 +13971,25 @@ class CanvasManager extends EventEmitter {
         this.canvases.clear();
         this.contexts.clear();
     }
+    /**
+     * Update canvas sizes to match current page dimensions.
+     * Call this when page size or orientation changes.
+     */
+    updateCanvasSizes() {
+        this.document.pages.forEach(page => {
+            const canvas = this.canvases.get(page.id);
+            if (!canvas)
+                return;
+            const dimensions = page.getPageDimensions();
+            // Only update if dimensions have changed
+            if (canvas.width !== dimensions.width || canvas.height !== dimensions.height) {
+                canvas.width = dimensions.width;
+                canvas.height = dimensions.height;
+            }
+        });
+        // Update zoom scale to account for new dimensions
+        this.updateCanvasScale();
+    }
     render() {
         this.document.pages.forEach(page => {
             const ctx = this.contexts.get(page.id);
@@ -14148,6 +14329,12 @@ class CanvasManager extends EventEmitter {
         const embeddedObjectHit = hitTestManager.queryByType(mouseDownPageIndex, point, 'embedded-object');
         if (embeddedObjectHit && embeddedObjectHit.data.type === 'embedded-object') {
             const object = embeddedObjectHit.data.object;
+            // Check which section the object belongs to - only interact if in active section
+            const objectSection = this.getSectionForEmbeddedObject(object);
+            if (objectSection && objectSection !== this._activeSection) {
+                // Object is in a different section - ignore the interaction
+                return;
+            }
             // For relative-positioned objects, prepare for potential drag
             // Don't start drag immediately - wait for threshold to allow double-click
             if (object.position === 'relative') {
@@ -14316,19 +14503,40 @@ class CanvasManager extends EventEmitter {
         // Handle table cell selection drag
         if (this.isSelectingTableCells && this.tableCellSelectionStart && this.tableCellSelectionTable) {
             const table = this.tableCellSelectionTable;
-            if (table.renderedPosition) {
-                const localPoint = {
-                    x: point.x - table.renderedPosition.x,
-                    y: point.y - table.renderedPosition.y
-                };
-                const cellAddr = table.getCellAtPoint(localPoint);
-                if (cellAddr) {
-                    // Update selection range
-                    table.selectRange({
-                        start: this.tableCellSelectionStart,
-                        end: cellAddr
-                    });
-                    this.render();
+            const currentPageIndex = this.document.pages.findIndex(p => p.id === pageId);
+            // Get the slice for the current page (for multi-page tables)
+            const slice = table.getRenderedSlice(currentPageIndex);
+            const tablePosition = slice?.position || table.renderedPosition;
+            const sliceHeight = slice?.height || table.height;
+            if (tablePosition) {
+                // Check if point is within the table slice on this page
+                const isInsideTable = point.x >= tablePosition.x &&
+                    point.x <= tablePosition.x + table.width &&
+                    point.y >= tablePosition.y &&
+                    point.y <= tablePosition.y + sliceHeight;
+                if (isInsideTable) {
+                    const localPoint = {
+                        x: point.x - tablePosition.x,
+                        y: point.y - tablePosition.y
+                    };
+                    // If this is a continuation slice, adjust y for the slice offset
+                    if (slice && (slice.slicePosition === 'middle' || slice.slicePosition === 'last')) {
+                        const headerHeight = slice.headerHeight;
+                        if (localPoint.y >= headerHeight) {
+                            // Click is in the data rows area - transform coordinates
+                            localPoint.y = slice.yOffset + (localPoint.y - headerHeight);
+                        }
+                        // If y < headerHeight, click is in repeated header - no adjustment needed
+                    }
+                    const cellAddr = table.getCellAtPoint(localPoint);
+                    if (cellAddr) {
+                        // Update selection range
+                        table.selectRange({
+                            start: this.tableCellSelectionStart,
+                            end: cellAddr
+                        });
+                        this.render();
+                    }
                 }
             }
             e.preventDefault();
@@ -14437,6 +14645,10 @@ class CanvasManager extends EventEmitter {
                     });
                 }
             }
+            // Re-render to update rendered positions, then update resize handle hit targets
+            // This fixes the bug where resize handles don't work after a resize operation
+            this.render();
+            this.updateResizeHandleHitTargets();
         }
         this.isResizing = false;
         this.dragStart = null;
@@ -14605,13 +14817,21 @@ class CanvasManager extends EventEmitter {
         const hitTestManager = this.flowingTextRenderer.hitTestManager;
         const embeddedObjectHit = hitTestManager.queryByType(clickedPageIndex, point, 'embedded-object');
         if (embeddedObjectHit && embeddedObjectHit.data.type === 'embedded-object') {
-            // Clicked on embedded object - clear text selection and select it
+            const clickedObject = embeddedObjectHit.data.object;
+            // Check which section the object belongs to
+            const objectSection = this.getSectionForEmbeddedObject(clickedObject);
+            // Only allow selection if object is in the active section
+            if (objectSection && objectSection !== this._activeSection) {
+                // Object is in a different section - ignore the click
+                return;
+            }
+            // Clicked on embedded object in the active section - clear text selection and select it
             const activeFlowingContent = this.getFlowingContentForActiveSection();
             if (activeFlowingContent) {
                 activeFlowingContent.clearSelection();
             }
             this.clearSelection();
-            this.selectInlineElement(embeddedObjectHit.data.object);
+            this.selectInlineElement(clickedObject);
             return;
         }
         // First check if we clicked on a repeating section indicator
@@ -14851,11 +15071,50 @@ class CanvasManager extends EventEmitter {
         const embeddedObjectHit = hitTestManager.queryByType(pageIndex, point, 'embedded-object');
         if (embeddedObjectHit && embeddedObjectHit.data.type === 'embedded-object') {
             const object = embeddedObjectHit.data.object;
-            if (object.position === 'relative') {
-                canvas.style.cursor = 'move';
-                return;
+            // Only show interactive cursors for objects in the active section
+            const objectSection = this.getSectionForEmbeddedObject(object);
+            if (objectSection && objectSection !== this._activeSection) ;
+            else {
+                if (object.position === 'relative') {
+                    canvas.style.cursor = 'move';
+                    return;
+                }
+                // Show text cursor for text boxes
+                if (object instanceof TextBoxObject) {
+                    canvas.style.cursor = 'text';
+                    return;
+                }
             }
         }
+        // Check for table cells (show text cursor)
+        const tableCellHit = hitTestManager.queryByType(pageIndex, point, 'table-cell');
+        if (tableCellHit && tableCellHit.data.type === 'table-cell') {
+            canvas.style.cursor = 'text';
+            return;
+        }
+        // Check for text regions (body, header, footer - show text cursor)
+        const textRegionHit = hitTestManager.queryByType(pageIndex, point, 'text-region');
+        if (textRegionHit && textRegionHit.data.type === 'text-region') {
+            canvas.style.cursor = 'text';
+            return;
+        }
+        // Also check if point is within any editable region (body, header, footer)
+        // This catches cases where text region hit targets may not cover empty space
+        const bodyRegion = this.regionManager.getBodyRegion();
+        if (bodyRegion && bodyRegion.containsPointInRegion(point, pageIndex)) {
+            canvas.style.cursor = 'text';
+            return;
+        }
+        const headerRegion = this.regionManager.getHeaderRegion();
+        if (headerRegion && headerRegion.containsPointInRegion(point, pageIndex)) {
+            canvas.style.cursor = 'text';
+            return;
+        }
+        const footerRegion = this.regionManager.getFooterRegion();
+        if (footerRegion && footerRegion.containsPointInRegion(point, pageIndex)) {
+            canvas.style.cursor = 'text';
+            return;
+        }
         canvas.style.cursor = 'default';
     }
     /**
@@ -15032,6 +15291,9 @@ class CanvasManager extends EventEmitter {
         return this.selectedElements.size > 0;
     }
     selectBaseEmbeddedObject(embeddedObject, isPartOfRangeSelection = false) {
+        // Clear focus from any currently focused control (e.g., header/footer text)
+        // This ensures cursor stops blinking in the previous section
+        this.setFocus(null);
         // Mark the embedded object as selected
         const obj = embeddedObject.object || embeddedObject;
         obj.selected = true;
@@ -15498,6 +15760,27 @@ class CanvasManager extends EventEmitter {
             this.emit('section-focus-changed', { section, previousSection });
         }
     }
+    /**
+     * Determine which section (body/header/footer) an embedded object belongs to.
+     */
+    getSectionForEmbeddedObject(object) {
+        const sectionMappings = [
+            { content: this.document.bodyFlowingContent, section: 'body' },
+            { content: this.document.headerFlowingContent, section: 'header' },
+            { content: this.document.footerFlowingContent, section: 'footer' }
+        ];
+        for (const { content, section } of sectionMappings) {
+            if (!content)
+                continue;
+            const embeddedObjects = content.getEmbeddedObjects();
+            for (const [, embeddedObj] of embeddedObjects.entries()) {
+                if (embeddedObj.id === object.id) {
+                    return section;
+                }
+            }
+        }
+        return null;
+    }
     /**
      * Detect which section a point is in based on Y coordinate.
      * Uses full page width areas (not just content bounds).
@@ -16111,11 +16394,11 @@ class PDFGenerator {
                         width: headerRegion.size.width,
                         height: headerRegion.size.height
                     };
-                    await this.renderFlowedPage(pdfPage, flowedContent.header, headerBounds, dimensions.height, pageIndex, document.pages.length);
+                    await this.renderFlowedPage(pdfPage, flowedContent.header, headerBounds, dimensions.height, pageIndex, document.pages.length, flowedContent.headerHyperlinks);
                 }
                 // Render body content
                 if (flowedContent?.body && flowedContent.body[pageIndex]) {
-                    await this.renderFlowedPage(pdfPage, flowedContent.body[pageIndex], contentBounds, dimensions.height, pageIndex, document.pages.length);
+                    await this.renderFlowedPage(pdfPage, flowedContent.body[pageIndex], contentBounds, dimensions.height, pageIndex, document.pages.length, flowedContent.bodyHyperlinks);
                 }
                 // Render footer if present
                 if (flowedContent?.footer && document.footerFlowingContent) {
@@ -16126,7 +16409,7 @@ class PDFGenerator {
                         width: footerRegion.size.width,
                         height: footerRegion.size.height
                     };
-                    await this.renderFlowedPage(pdfPage, flowedContent.footer, footerBounds, dimensions.height, pageIndex, document.pages.length);
+                    await this.renderFlowedPage(pdfPage, flowedContent.footer, footerBounds, dimensions.height, pageIndex, document.pages.length, flowedContent.footerHyperlinks);
                 }
             }
             catch (pageError) {
@@ -16211,10 +16494,12 @@ class PDFGenerator {
     /**
      * Render a flowed page to PDF.
      */
-    async renderFlowedPage(pdfPage, flowedPage, bounds, pageHeight, pageIndex, totalPages) {
+    async renderFlowedPage(pdfPage, flowedPage, bounds, pageHeight, pageIndex, totalPages, hyperlinks) {
         let y = bounds.y;
         // Track relative objects to render after all lines (so they appear on top)
         const relativeObjects = [];
+        // Track rendered text positions for hyperlink annotations
+        const renderedRuns = [];
         for (const line of flowedPage.lines) {
             // Collect relative objects from this line
             if (line.embeddedObjects) {
@@ -16245,10 +16530,10 @@ class PDFGenerator {
                 const font = this.getFont(formatting);
                 const fontSize = formatting.fontSize || 14;
                 const color = parseColor(formatting.color || '#000000');
+                const textWidth = font.widthOfTextAtSize(safeText, fontSize);
                 // Draw background if present
                 if (formatting.backgroundColor) {
                     const bgColor = parseColor(formatting.backgroundColor);
-                    const textWidth = font.widthOfTextAtSize(safeText, fontSize);
                     drawFilledRect(pdfPage, runX, y, textWidth, line.height, bgColor, pageHeight);
                 }
                 // Draw text - position at baseline
@@ -16260,8 +16545,19 @@ class PDFGenerator {
                     size: fontSize,
                     color
                 });
+                // Track this run's position for hyperlink annotations
+                if (hyperlinks && hyperlinks.length > 0) {
+                    renderedRuns.push({
+                        x: runX,
+                        y: y,
+                        width: textWidth,
+                        height: line.height,
+                        startIndex: run.startIndex,
+                        endIndex: run.endIndex
+                    });
+                }
                 // Advance X position
-                runX += font.widthOfTextAtSize(safeText, fontSize);
+                runX += textWidth;
                 // Add extra word spacing for justified text
                 if (line.extraWordSpacing && safeText.includes(' ')) {
                     const spaceCount = (safeText.match(/ /g) || []).length;
@@ -16299,6 +16595,62 @@ class PDFGenerator {
         }
         // Render relative objects last (so they appear on top of text)
         await this.renderRelativeObjects(pdfPage, relativeObjects, pageHeight, pageIndex, totalPages);
+        // Create hyperlink annotations
+        if (hyperlinks && hyperlinks.length > 0 && renderedRuns.length > 0) {
+            this.createHyperlinkAnnotations(pdfPage, renderedRuns, hyperlinks, pageHeight);
+        }
+    }
+    /**
+     * Create PDF link annotations for hyperlinks.
+     * Matches hyperlink ranges with rendered text positions and creates clickable links.
+     */
+    createHyperlinkAnnotations(pdfPage, renderedRuns, hyperlinks, pageHeight) {
+        for (const hyperlink of hyperlinks) {
+            // Find all runs that overlap with this hyperlink
+            const overlappingRuns = renderedRuns.filter(run => run.startIndex < hyperlink.endIndex && run.endIndex > hyperlink.startIndex);
+            if (overlappingRuns.length === 0)
+                continue;
+            // Calculate bounding box for the hyperlink
+            // For multi-line hyperlinks, we create separate annotations for each line segment
+            // Group runs by their Y position (same line)
+            const runsByLine = new Map();
+            for (const run of overlappingRuns) {
+                const key = run.y;
+                if (!runsByLine.has(key)) {
+                    runsByLine.set(key, []);
+                }
+                runsByLine.get(key).push(run);
+            }
+            // Create an annotation for each line segment
+            for (const [lineY, lineRuns] of runsByLine) {
+                // Calculate bounds for this line's portion of the hyperlink
+                const minX = Math.min(...lineRuns.map(r => r.x));
+                const maxX = Math.max(...lineRuns.map(r => r.x + r.width));
+                const height = lineRuns[0].height;
+                // Transform to PDF coordinates (Y is inverted)
+                const pdfY = pageHeight - lineY - height;
+                // Create link annotation using pdf-lib
+                const linkAnnotation = pdfPage.doc.context.obj({
+                    Type: 'Annot',
+                    Subtype: 'Link',
+                    Rect: [minX, pdfY, maxX, pdfY + height],
+                    Border: [0, 0, 0], // No visible border
+                    A: {
+                        Type: 'Action',
+                        S: 'URI',
+                        URI: hyperlink.url
+                    }
+                });
+                // Add annotation to page
+                const annotations = pdfPage.node.get(pdfPage.doc.context.obj('Annots'));
+                if (annotations) {
+                    annotations.push(linkAnnotation);
+                }
+                else {
+                    pdfPage.node.set(pdfPage.doc.context.obj('Annots'), pdfPage.doc.context.obj([linkAnnotation]));
+                }
+            }
+        }
     }
     /**
      * Calculate alignment offset for a line.
@@ -18522,11 +18874,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
@@ -18552,9 +18904,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) {
@@ -20924,8 +21277,12 @@ class PCEditor extends EventEmitter {
             }
         });
         this.document.on('settings-changed', () => {
-            // When settings change (like margins), we need to check if pages need to be added/removed
+            // When settings change (like page size, orientation, margins), we need to:
+            // 1. Update canvas sizes to match new page dimensions
+            // 2. Re-render the content
+            // 3. Check if pages need to be added/removed
             if (this.canvasManager) {
+                this.canvasManager.updateCanvasSizes();
                 this.canvasManager.render();
                 // Defer the page check to allow reflow to complete
                 setTimeout(() => {
@@ -22767,6 +23124,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)
     // ============================================
     /**
@@ -24837,8 +25332,2628 @@ class VerticalRuler extends RulerControl {
     }
 }
 
+/**
+ * BasePane - Abstract base class for editor property panes.
+ *
+ * Panes are property editors that work with PCEditor via the public API only.
+ * They are content-only (no title bar) for flexible layout by consumers.
+ */
+/**
+ * Abstract base class for editor panes.
+ */
+class BasePane extends BaseControl {
+    constructor(id, options = {}) {
+        super(id, options);
+        this.sectionElement = null;
+        this.className = options.className || '';
+    }
+    /**
+     * Attach the pane to an editor.
+     */
+    attach(options) {
+        // Store the section element if provided
+        this.sectionElement = options.sectionElement || null;
+        super.attach(options);
+    }
+    /**
+     * Show the pane (and section element if provided).
+     */
+    show() {
+        this._isVisible = true;
+        if (this.sectionElement) {
+            this.sectionElement.style.display = '';
+        }
+        if (this.element) {
+            this.element.style.display = '';
+            this.update();
+        }
+        this.emit('visibility-changed', { visible: true });
+    }
+    /**
+     * Hide the pane (and section element if provided).
+     */
+    hide() {
+        this._isVisible = false;
+        if (this.sectionElement) {
+            this.sectionElement.style.display = 'none';
+        }
+        if (this.element) {
+            this.element.style.display = 'none';
+        }
+        this.emit('visibility-changed', { visible: false });
+    }
+    /**
+     * Create a form group element with label.
+     */
+    createFormGroup(label, inputElement, options) {
+        const group = document.createElement('div');
+        group.className = 'pc-pane-form-group';
+        if (options?.inline) {
+            group.classList.add('pc-pane-form-group--inline');
+        }
+        const labelEl = document.createElement('label');
+        labelEl.className = 'pc-pane-label';
+        labelEl.textContent = label;
+        group.appendChild(labelEl);
+        group.appendChild(inputElement);
+        if (options?.hint) {
+            const hintEl = document.createElement('span');
+            hintEl.className = 'pc-pane-hint';
+            hintEl.textContent = options.hint;
+            group.appendChild(hintEl);
+        }
+        return group;
+    }
+    /**
+     * Create a text input element.
+     */
+    createTextInput(options) {
+        const input = document.createElement('input');
+        input.type = options?.type || 'text';
+        input.className = 'pc-pane-input';
+        if (options?.placeholder) {
+            input.placeholder = options.placeholder;
+        }
+        if (options?.value !== undefined) {
+            input.value = options.value;
+        }
+        return input;
+    }
+    /**
+     * Create a number input element.
+     */
+    createNumberInput(options) {
+        const input = document.createElement('input');
+        input.type = 'number';
+        input.className = 'pc-pane-input pc-pane-input--number';
+        if (options?.min !== undefined)
+            input.min = String(options.min);
+        if (options?.max !== undefined)
+            input.max = String(options.max);
+        if (options?.step !== undefined)
+            input.step = String(options.step);
+        if (options?.value !== undefined)
+            input.value = String(options.value);
+        return input;
+    }
+    /**
+     * Create a select element with options.
+     */
+    createSelect(optionsList, selectedValue) {
+        const select = document.createElement('select');
+        select.className = 'pc-pane-select';
+        for (const opt of optionsList) {
+            const option = document.createElement('option');
+            option.value = opt.value;
+            option.textContent = opt.label;
+            if (opt.value === selectedValue) {
+                option.selected = true;
+            }
+            select.appendChild(option);
+        }
+        return select;
+    }
+    /**
+     * Create a color input element.
+     */
+    createColorInput(value) {
+        const input = document.createElement('input');
+        input.type = 'color';
+        input.className = 'pc-pane-color';
+        if (value) {
+            input.value = value;
+        }
+        return input;
+    }
+    /**
+     * Create a checkbox element.
+     */
+    createCheckbox(label, checked) {
+        const wrapper = document.createElement('label');
+        wrapper.className = 'pc-pane-checkbox';
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        if (checked) {
+            input.checked = true;
+        }
+        const span = document.createElement('span');
+        span.textContent = label;
+        wrapper.appendChild(input);
+        wrapper.appendChild(span);
+        return wrapper;
+    }
+    /**
+     * Create a button element.
+     */
+    createButton(label, options) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'pc-pane-button';
+        if (options?.variant) {
+            button.classList.add(`pc-pane-button--${options.variant}`);
+        }
+        button.textContent = label;
+        return button;
+    }
+    /**
+     * Create a button group container.
+     */
+    createButtonGroup() {
+        const group = document.createElement('div');
+        group.className = 'pc-pane-button-group';
+        return group;
+    }
+    /**
+     * Create a section divider with optional label.
+     */
+    createSection(label) {
+        const section = document.createElement('div');
+        section.className = 'pc-pane-section';
+        if (label) {
+            const labelEl = document.createElement('div');
+            labelEl.className = 'pc-pane-section-label';
+            labelEl.textContent = label;
+            section.appendChild(labelEl);
+        }
+        return section;
+    }
+    /**
+     * Create a row container for inline elements.
+     */
+    createRow() {
+        const row = document.createElement('div');
+        row.className = 'pc-pane-row';
+        return row;
+    }
+    /**
+     * Create a hint/info text element.
+     */
+    createHint(text) {
+        const hint = document.createElement('div');
+        hint.className = 'pc-pane-hint';
+        hint.textContent = text;
+        return hint;
+    }
+    /**
+     * Add immediate apply listener for text inputs (blur + Enter).
+     */
+    addImmediateApplyListener(element, handler) {
+        const apply = () => {
+            handler(element.value);
+        };
+        // Selects and color inputs: apply on change
+        if (element instanceof HTMLSelectElement ||
+            (element instanceof HTMLInputElement && element.type === 'color')) {
+            element.addEventListener('change', apply);
+            this.eventCleanup.push(() => element.removeEventListener('change', apply));
+        }
+        else {
+            // Text/number inputs: apply on blur or Enter
+            element.addEventListener('blur', apply);
+            const keyHandler = (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    apply();
+                }
+            };
+            element.addEventListener('keydown', keyHandler);
+            this.eventCleanup.push(() => {
+                element.removeEventListener('blur', apply);
+                element.removeEventListener('keydown', keyHandler);
+            });
+        }
+    }
+    /**
+     * Add immediate apply listener for checkbox inputs.
+     */
+    addCheckboxListener(element, handler) {
+        const apply = () => handler(element.checked);
+        element.addEventListener('change', apply);
+        this.eventCleanup.push(() => element.removeEventListener('change', apply));
+    }
+    /**
+     * Add button click handler with focus steal prevention.
+     */
+    addButtonListener(button, handler) {
+        // Prevent focus steal on mousedown
+        const preventFocus = (e) => {
+            e.preventDefault();
+            this.saveEditorContext();
+        };
+        button.addEventListener('mousedown', preventFocus);
+        button.addEventListener('click', handler);
+        this.eventCleanup.push(() => {
+            button.removeEventListener('mousedown', preventFocus);
+            button.removeEventListener('click', handler);
+        });
+    }
+    /**
+     * Save editor context before UI elements steal focus.
+     */
+    saveEditorContext() {
+        if (this.editor) {
+            this.editor.saveEditingContext();
+        }
+    }
+    /**
+     * Final createElement that wraps content in pane structure.
+     * Content-only, no title bar.
+     */
+    createElement() {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'pc-pane';
+        if (this.className) {
+            wrapper.classList.add(this.className);
+        }
+        wrapper.setAttribute('data-pane-id', this.id);
+        const content = this.createContent();
+        wrapper.appendChild(content);
+        return wrapper;
+    }
+}
+
+/**
+ * DocumentInfoPane - Read-only document information display.
+ *
+ * Shows:
+ * - Page count
+ * - Page size
+ * - Page orientation
+ */
+class DocumentInfoPane extends BasePane {
+    constructor(id = 'document-info') {
+        super(id, { className: 'pc-pane-document-info' });
+        this.pageCountEl = null;
+        this.pageSizeEl = null;
+        this.pageOrientationEl = null;
+    }
+    attach(options) {
+        super.attach(options);
+        // Subscribe to document changes
+        if (this.editor) {
+            const updateHandler = () => this.update();
+            this.editor.on('document-changed', updateHandler);
+            this.editor.on('page-added', updateHandler);
+            this.editor.on('page-removed', updateHandler);
+            this.eventCleanup.push(() => {
+                this.editor?.off('document-changed', updateHandler);
+                this.editor?.off('page-added', updateHandler);
+                this.editor?.off('page-removed', updateHandler);
+            });
+            // Initial update
+            this.update();
+        }
+    }
+    createContent() {
+        const container = document.createElement('div');
+        container.className = 'pc-pane-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();
+    }
+}
+
 exports.BaseControl = BaseControl;
 exports.BaseEmbeddedObject = BaseEmbeddedObject;
+exports.BasePane = BasePane;
 exports.BaseTextRegion = BaseTextRegion;
 exports.BodyTextRegion = BodyTextRegion;
 exports.ClipboardManager = ClipboardManager;
@@ -24846,15 +27961,21 @@ exports.ContentAnalyzer = ContentAnalyzer;
 exports.DEFAULT_IMPORT_OPTIONS = DEFAULT_IMPORT_OPTIONS;
 exports.Document = Document;
 exports.DocumentBuilder = DocumentBuilder;
+exports.DocumentInfoPane = DocumentInfoPane;
+exports.DocumentSettingsPane = DocumentSettingsPane;
 exports.EmbeddedObjectFactory = EmbeddedObjectFactory;
 exports.EmbeddedObjectManager = EmbeddedObjectManager;
 exports.EventEmitter = EventEmitter;
 exports.FlowingTextContent = FlowingTextContent;
 exports.FooterTextRegion = FooterTextRegion;
+exports.FormattingPane = FormattingPane;
 exports.HeaderTextRegion = HeaderTextRegion;
 exports.HorizontalRuler = HorizontalRuler;
 exports.HtmlConverter = HtmlConverter;
+exports.HyperlinkPane = HyperlinkPane;
 exports.ImageObject = ImageObject;
+exports.ImagePane = ImagePane;
+exports.MergeDataPane = MergeDataPane;
 exports.PCEditor = PCEditor;
 exports.PDFImportError = PDFImportError;
 exports.PDFImporter = PDFImporter;
@@ -24862,16 +27983,22 @@ exports.PDFParser = PDFParser;
 exports.Page = Page;
 exports.RegionManager = RegionManager;
 exports.RepeatingSectionManager = RepeatingSectionManager;
+exports.RepeatingSectionPane = RepeatingSectionPane;
 exports.RulerControl = RulerControl;
 exports.SubstitutionFieldManager = SubstitutionFieldManager;
+exports.SubstitutionFieldPane = SubstitutionFieldPane;
 exports.TableCell = TableCell;
 exports.TableObject = TableObject;
+exports.TablePane = TablePane;
 exports.TableRow = TableRow;
+exports.TableRowLoopPane = TableRowLoopPane;
 exports.TextBoxObject = TextBoxObject;
+exports.TextBoxPane = TextBoxPane;
 exports.TextFormattingManager = TextFormattingManager;
 exports.TextLayout = TextLayout;
 exports.TextMeasurer = TextMeasurer;
 exports.TextPositionCalculator = TextPositionCalculator;
 exports.TextState = TextState;
 exports.VerticalRuler = VerticalRuler;
+exports.ViewSettingsPane = ViewSettingsPane;
 //# sourceMappingURL=pc-editor.js.map