chordsheetjs 14.5.1 → 14.6.1

package/lib/index.js

@@ -923,6 +923,7 @@ const $3d106a0ee348cfa8$export$40141681ebb03523 = {
    * @param {Chord | null} chordObj Optional pre-parsed Chord object
    * @param {boolean} isRhythmSymbol Whether this pair represents a rhythm symbol
    */ constructor(chords = '', lyrics = null, annotation = null, chordObj = null, isRhythmSymbol = false){
+        this.parentLine = null;
         this._chordObj = null;
         this.chords = chords || '';
         this.lyrics = lyrics || '';
@@ -4034,8 +4035,9 @@ const $b0c0093f9a3a0967$export$98e6a39c04603d36 = $b0c0093f9a3a0967$var$peg$pars
    * @returns {string} the chord string
    */ toString({ useUnicodeModifier: useUnicodeModifier = false } = {}) {
         let chordString = '';
-        const suffix = this.suffix || '';
+        let suffix = this.suffix || '';
         const showMinor = suffix[0] !== 'm';
+        if (useUnicodeModifier) suffix = suffix.replace(/#(?=\d)/g, '\u266f').replace(/b(?=\d)/g, '\u266d');
         if (this.root) chordString = this.root.toString({
             showMinor: showMinor,
             useUnicodeModifier: useUnicodeModifier
@@ -5132,6 +5134,7 @@ var $6c1ed1378c3b5965$export$2e2bcd8739ae039 = $6c1ed1378c3b5965$var$ChordDefini
  * Represents a comment. See https://www.chordpro.org/chordpro/chordpro-file-format-specification/#overview
  */ class $0bd084786477abba$var$Comment {
     constructor(content){
+        this.parentLine = null;
         this.content = content;
     }
     /**
@@ -5156,6 +5159,7 @@ var $0bd084786477abba$export$2e2bcd8739ae039 = $0bd084786477abba$var$Comment;
 
 class $c5ce4fc4f57fe810$var$AstComponent {
     constructor(traceInfo = null){
+        this.parentLine = null;
         this.line = null;
         this.column = null;
         this.offset = null;
@@ -5662,129 +5666,301 @@ const $fb5aa6e96efc0a76$export$ccccd344e69710ef = {
     },
     fonts: {
         title: {
-            name: 'NimbusSansL-Bol',
+            name: 'Arial',
             style: 'bold',
-            size: 24,
-            color: 'black'
+            size: 22,
+            color: '#151515'
         },
         subtitle: {
-            name: 'NimbusSansL-Reg',
+            name: 'Arial',
             style: 'normal',
-            size: 10,
-            color: 100
+            size: 11,
+            color: '#6f6f6f'
         },
         metadata: {
-            name: 'NimbusSansL-Reg',
+            name: 'Arial',
             style: 'normal',
             size: 10,
-            color: 100
+            color: '#8b8b8b'
         },
         text: {
-            name: 'NimbusSansL-Reg',
+            name: 'Arial',
             style: 'normal',
             size: 10,
-            color: 'black'
+            color: '#232323'
         },
         chord: {
-            name: 'NimbusSansL-Bol',
+            name: 'Arial',
             style: 'bold',
             size: 9,
-            color: 'black'
+            color: '#232323'
         },
         comment: {
-            name: 'NimbusSansL-Bol',
+            name: 'Arial',
             style: 'bold',
             size: 10,
-            color: 'black'
+            color: '#232323'
         },
         sectionLabel: {
-            name: 'NimbusSansL-Bol',
+            name: 'Arial',
             style: 'bold',
             size: 10,
-            color: 'black'
+            color: '#a1312d'
         },
         annotation: {
-            name: 'NimbusSansL-Reg',
+            name: 'Arial',
             style: 'normal',
             size: 10,
-            color: 'black'
+            color: '#232323'
         }
     },
     layout: {
         global: {
             margins: {
-                top: 35,
-                bottom: 10,
+                top: 14,
+                bottom: 12,
                 left: 45,
                 right: 45
             }
         },
         header: {
-            height: 60,
+            height: 72,
             content: [
                 {
                     type: 'text',
                     template: '%{title}',
                     style: {
-                        name: 'NimbusSansL-Bol',
+                        name: 'Arial',
                         style: 'bold',
-                        size: 24,
-                        color: 'black'
+                        size: 19,
+                        color: '#151515',
+                        weight: 700
                     },
                     position: {
                         x: 'left',
-                        y: 15
+                        y: 0,
+                        clip: true,
+                        ellipsis: true
+                    },
+                    condition: {
+                        page: {
+                            first: true
+                        }
                     }
                 },
                 {
                     type: 'text',
-                    template: 'Key of %{key} - BPM %{tempo} - Time %{time}',
+                    template: '%{artist}',
                     style: {
-                        name: 'NimbusSansL-Reg',
+                        name: 'Arial',
                         style: 'normal',
-                        size: 12,
-                        color: 100
+                        size: 11,
+                        color: '#6f6f6f'
                     },
                     position: {
                         x: 'left',
-                        y: 28
+                        y: 25,
+                        clip: true,
+                        ellipsis: true
+                    },
+                    condition: {
+                        page: {
+                            first: true
+                        }
                     }
                 },
                 {
                     type: 'text',
-                    template: 'By %{artist} %{subtitle}',
+                    template: '%{tempo|%{} BPM}%{time| \u00b7 %{}}%{capo| \u00b7 Capo %{}}',
                     style: {
-                        name: 'NimbusSansL-Reg',
+                        name: 'Arial',
                         style: 'normal',
-                        size: 10,
-                        color: 100
+                        size: 11,
+                        color: '#6f6f6f'
                     },
                     position: {
                         x: 'left',
-                        y: 38
+                        y: 40,
+                        width: 240,
+                        clip: true,
+                        ellipsis: true
+                    },
+                    condition: {
+                        page: {
+                            first: true
+                        }
                     }
-                }
-            ]
-        },
-        footer: {
-            height: 30,
-            content: [
+                },
+                {
+                    type: 'line',
+                    style: {
+                        width: 1,
+                        color: '#d7d7d7'
+                    },
+                    position: {
+                        x: 0,
+                        y: 60,
+                        width: 'auto',
+                        height: 0
+                    },
+                    condition: {
+                        page: {
+                            first: true
+                        }
+                    }
+                },
                 {
                     type: 'text',
-                    value: "\xa92024 My Music Publishing",
+                    template: '%{key}',
+                    cssClass: 'measured-html-key-badge',
+                    elementStyle: {
+                        width: '28px',
+                        height: '28px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        borderRadius: '999px',
+                        backgroundColor: '#a1312d',
+                        textAlign: 'center',
+                        boxSizing: 'border-box'
+                    },
                     style: {
-                        name: 'NimbusSansL-Reg',
+                        name: 'Arial',
+                        style: 'bold',
+                        size: 12,
+                        color: '#ffffff',
+                        weight: 700
+                    },
+                    position: {
+                        x: 'right',
+                        y: 12,
+                        width: 28,
+                        offsetX: -2
+                    },
+                    condition: {
+                        and: [
+                            {
+                                page: {
+                                    first: true
+                                }
+                            },
+                            {
+                                key: {
+                                    exists: true
+                                }
+                            }
+                        ]
+                    }
+                },
+                {
+                    type: 'text',
+                    template: '%{title}',
+                    style: {
+                        name: 'Arial',
+                        style: 'bold',
+                        size: 12,
+                        color: '#151515',
+                        weight: 700
+                    },
+                    position: {
+                        x: 'left',
+                        y: 0,
+                        clip: true,
+                        ellipsis: true
+                    },
+                    condition: {
+                        page: {
+                            greater_than: 1
+                        }
+                    }
+                },
+                {
+                    type: 'text',
+                    template: '%{page}/%{pages}',
+                    style: {
+                        name: 'Arial',
                         style: 'normal',
                         size: 10,
-                        color: 'black'
+                        color: '#9a9a9a'
                     },
                     position: {
-                        x: 'left',
-                        y: 0
+                        x: 'right',
+                        y: 4,
+                        offsetX: -38
+                    },
+                    condition: {
+                        page: {
+                            greater_than: 1
+                        }
+                    }
+                },
+                {
+                    type: 'text',
+                    template: '%{key}',
+                    cssClass: 'measured-html-key-badge',
+                    elementStyle: {
+                        width: '28px',
+                        height: '28px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        borderRadius: '999px',
+                        backgroundColor: '#a1312d',
+                        textAlign: 'center',
+                        boxSizing: 'border-box'
+                    },
+                    style: {
+                        name: 'Arial',
+                        style: 'bold',
+                        size: 12,
+                        color: '#ffffff',
+                        weight: 700
+                    },
+                    position: {
+                        x: 'right',
+                        y: 2,
+                        width: 28,
+                        offsetX: -2
+                    },
+                    condition: {
+                        and: [
+                            {
+                                page: {
+                                    greater_than: 1
+                                }
+                            },
+                            {
+                                key: {
+                                    exists: true
+                                }
+                            }
+                        ]
+                    }
+                },
+                {
+                    type: 'line',
+                    style: {
+                        width: 1,
+                        color: '#d7d7d7'
+                    },
+                    position: {
+                        x: 0,
+                        y: 32,
+                        width: 'auto',
+                        height: 0
+                    },
+                    condition: {
+                        page: {
+                            greater_than: 1
+                        }
                     }
                 }
             ]
         },
+        footer: {
+            height: 0,
+            content: []
+        },
         sections: {
             global: {
                 paragraphSpacing: 10,
@@ -5831,22 +6007,22 @@ const $fb5aa6e96efc0a76$export$ccccd344e69710ef = {
             },
             fonts: {
                 title: {
-                    name: 'NimbusSansL-Bol',
+                    name: 'Arial',
                     style: 'bold',
                     size: 9,
-                    color: 'black'
+                    color: '#232323'
                 },
                 fingerings: {
-                    name: 'NimbusSansL-Bol',
+                    name: 'Arial',
                     style: 'bold',
                     size: 6,
-                    color: 'black'
+                    color: '#232323'
                 },
                 baseFret: {
-                    name: 'NimbusSansL-Bol',
+                    name: 'Arial',
                     style: 'bold',
                     size: 6,
-                    color: 'black'
+                    color: '#232323'
                 }
             }
         }
@@ -6666,7 +6842,11 @@ var $3b7d86e1e1307736$export$2e2bcd8739ae039 = $3b7d86e1e1307736$var$Font;
         if (item instanceof (0, $7251dad5f4a4c35f$export$2e2bcd8739ae039)) this.addTag(item);
         else if (item instanceof (0, $551a223fc13b5c10$export$2e2bcd8739ae039)) this.addChordLyricsPair(item);
         else if (item instanceof (0, $0bd084786477abba$export$2e2bcd8739ae039)) this.addComment(item);
-        else this.items.push(item);
+        else {
+            const addedItem = item;
+            addedItem.parentLine = this;
+            this.items.push(addedItem);
+        }
     }
     /**
    * Indicates whether the line contains items that are renderable
@@ -6735,6 +6915,7 @@ var $3b7d86e1e1307736$export$2e2bcd8739ae039 = $3b7d86e1e1307736$var$Font;
     addChordLyricsPair(chords = null, lyrics = null) {
         if (chords instanceof (0, $551a223fc13b5c10$export$2e2bcd8739ae039)) this.currentChordLyricsPair = chords;
         else this.currentChordLyricsPair = new (0, $551a223fc13b5c10$export$2e2bcd8739ae039)(chords || '', lyrics || '');
+        this.currentChordLyricsPair.parentLine = this;
         this.items.push(this.currentChordLyricsPair);
         return this.currentChordLyricsPair;
     }
@@ -6751,11 +6932,13 @@ var $3b7d86e1e1307736$export$2e2bcd8739ae039 = $3b7d86e1e1307736$var$Font;
     }
     addTag(nameOrTag, value = null) {
         const tag = nameOrTag instanceof (0, $7251dad5f4a4c35f$export$2e2bcd8739ae039) ? nameOrTag : new (0, $7251dad5f4a4c35f$export$2e2bcd8739ae039)(nameOrTag, value);
+        tag.parentLine = this;
         this.items.push(tag);
         return tag;
     }
     addComment(content) {
         const comment = content instanceof (0, $0bd084786477abba$export$2e2bcd8739ae039) ? content : new (0, $0bd084786477abba$export$2e2bcd8739ae039)(content);
+        comment.parentLine = this;
         this.items.push(comment);
         return comment;
     }
@@ -7433,6 +7616,7 @@ var $feda9c006f56d800$export$2e2bcd8739ae039 = $feda9c006f56d800$var$SongMapper;
 
 
 
+
 const $e02a17f5a26edf19$var$defaultConstructorOptions = {
     capo: 0,
     contextKey: null,
@@ -8129,7 +8313,7 @@ function $4903bcb4483a26e6$export$9b09a67f52000acf(configuration) {
                 });
             }
             if (item instanceof (0, $551a223fc13b5c10$export$2e2bcd8739ae039)) return $c53141c05fae8382$var$Song.transposeChordLyricsPair(item, delta, transposedKey, normalizeChordSuffix, accidental);
-            if (item instanceof (0, $11953cb6035032a3$export$2e2bcd8739ae039)) return $c53141c05fae8382$var$Song.transposeLiteral(item, delta, transposedKey, normalizeChordSuffix, accidental);
+            if (item instanceof (0, $11953cb6035032a3$export$2e2bcd8739ae039) && $c53141c05fae8382$var$Song.isMusicalSection(item.parentLine)) return $c53141c05fae8382$var$Song.transposeLiteral(item, delta, transposedKey, normalizeChordSuffix, accidental);
             return item;
         });
     }
@@ -8234,10 +8418,18 @@ function $4903bcb4483a26e6$export$9b09a67f52000acf(configuration) {
     changeChords(func) {
         return this.mapItems((item)=>{
             if (item instanceof (0, $551a223fc13b5c10$export$2e2bcd8739ae039)) return item.changeChord(func);
-            if (item instanceof (0, $11953cb6035032a3$export$2e2bcd8739ae039)) return $c53141c05fae8382$var$Song.mapChordsInLiteral(item, func);
+            if (item instanceof (0, $11953cb6035032a3$export$2e2bcd8739ae039) && $c53141c05fae8382$var$Song.isMusicalSection(item.parentLine)) return $c53141c05fae8382$var$Song.mapChordsInLiteral(item, func);
             return item;
         });
     }
+    static isMusicalSection(line) {
+        return line === null || ![
+            (0, $dce48cb70c4120bb$export$92249c36c213e508),
+            (0, $dce48cb70c4120bb$export$6a5a2eab72b6e3d),
+            (0, $dce48cb70c4120bb$export$13f4b12aafeba5d6),
+            (0, $dce48cb70c4120bb$export$5a2cf64ea612936a)
+        ].includes(line.type);
+    }
     static mapChordsInLiteral(item, func) {
         // Handle space-separated chords in grid format (e.g., "|| Am . . | C . |")
         const changedString = item.string.replace(/(\s|^)(\S+)(?=\s|$)/g, (_match, space, token)=>{
@@ -27162,6 +27354,7 @@ class $0594288a7c3f9fa6$export$94eb343ca6d26096 {
     /**
    * Gets conditional CSS styles from font configuration
    */ getConditionalStyles(style) {
+        const normalizedFontStyles = this.getNormalizedFontStyles(style);
         return {
             ...style.name && {
                 fontFamily: style.name
@@ -27169,15 +27362,7 @@ class $0594288a7c3f9fa6$export$94eb343ca6d26096 {
             ...style.size && {
                 fontSize: `${style.size}px`
             },
-            ...style.weight && {
-                fontWeight: style.weight
-            },
-            ...style.style && {
-                fontStyle: style.style
-            },
-            ...style.color && {
-                color: style.color
-            },
+            ...normalizedFontStyles,
             ...style.underline && {
                 textDecoration: 'underline'
             },
@@ -27225,6 +27410,7 @@ class $0594288a7c3f9fa6$export$94eb343ca6d26096 {
     /**
    * Applies font styles to an HTML element
    */ applyFontStyle(element, style) {
+        const normalizedFontStyles = this.getNormalizedFontStyles(style);
         const styles = {
             whiteSpace: 'pre',
             ...style.name && {
@@ -27233,15 +27419,7 @@ class $0594288a7c3f9fa6$export$94eb343ca6d26096 {
             ...style.size && {
                 fontSize: `${style.size}px`
             },
-            ...style.weight && {
-                fontWeight: style.weight
-            },
-            ...style.style && {
-                fontStyle: style.style
-            },
-            ...style.color && {
-                color: style.color
-            },
+            ...normalizedFontStyles,
             ...style.underline && {
                 textDecoration: 'underline'
             },
@@ -27271,6 +27449,27 @@ class $0594288a7c3f9fa6$export$94eb343ca6d26096 {
    */ getCustomClass(elementType) {
         return this.config.cssClasses?.[elementType];
     }
+    getNormalizedFontStyles(style) {
+        const fontWeight = style.weight ?? (style.style === 'bold' ? 'bold' : undefined);
+        const fontStyle = style.style && style.style !== 'bold' ? style.style : undefined;
+        const color = this.normalizeColor(style.color);
+        return {
+            ...fontWeight && {
+                fontWeight: fontWeight
+            },
+            ...fontStyle && {
+                fontStyle: fontStyle
+            },
+            ...color && {
+                color: color
+            }
+        };
+    }
+    normalizeColor(color) {
+        if (typeof color === 'number') return `rgb(${color}, ${color}, ${color})`;
+        if (typeof color === 'string' && /^\d+$/.test(color)) return `rgb(${color}, ${color}, ${color})`;
+        return color;
+    }
 }
 var $0594288a7c3f9fa6$export$2e2bcd8739ae039 = $0594288a7c3f9fa6$export$94eb343ca6d26096;
 
@@ -27522,7 +27721,14 @@ class $2e404bc796b05dec$export$f1e5feaa438be04f {
         if (!contentItem.condition) return true;
         const { metadata: songMetadata, extraMetadata: extraMetadata } = this.context;
         const metadata = new Proxy({}, {
-            get: (_, prop)=>extraMetadata?.[prop] ?? songMetadata.get(prop)
+            get: (_, prop)=>{
+                const value = extraMetadata?.[prop] ?? songMetadata.get(prop);
+                if ((prop === 'page' || prop === 'pages' || prop === 'renderTime') && typeof value === 'string') {
+                    const numericValue = Number(value);
+                    if (!Number.isNaN(numericValue)) return numericValue;
+                }
+                return value;
+            }
         });
         return new (0, $bdd8c6196670168a$export$2e2bcd8739ae039)(contentItem.condition, metadata).evaluate();
     }
@@ -27536,15 +27742,18 @@ class $2e404bc796b05dec$export$f1e5feaa438be04f {
         this.backend.setFontStyle(style);
         const availableWidth = position.width || this.getAvailableWidth();
         const y = sectionY + position.y;
-        if (position.clip) this.renderClippedText(textValue, position, availableWidth, y, style);
-        else this.renderMultilineText(textValue, position, availableWidth, y, style);
+        if (position.clip) this.renderClippedText(textValue, textItem, availableWidth, y, style);
+        else this.renderMultilineText(textValue, textItem, availableWidth, y, style);
     }
     /**
    * Renders clipped text with optional ellipsis
-   */ renderClippedText(textValue, position, availableWidth, y, style) {
+   */ renderClippedText(textValue, textItem, availableWidth, y, style) {
+        const { position: position } = textItem;
         const clippedText = position.ellipsis ? this.clipTextWithEllipsis(textValue, availableWidth, style) : this.clipText(textValue, availableWidth, style);
         const textWidth = this.backend.getTextWidth(clippedText, style);
-        const x = this.calculateX(position.x, textWidth);
+        const alignmentWidth = position.width ?? textWidth;
+        this.backend.setTextItem?.(textItem);
+        const x = this.calculateX(position.x, alignmentWidth, position.offsetX);
         this.backend.text(clippedText, x, y);
     }
     /**
@@ -27563,12 +27772,15 @@ class $2e404bc796b05dec$export$f1e5feaa438be04f {
     }
     /**
    * Renders multiline text
-   */ renderMultilineText(textValue, position, availableWidth, y, style) {
+   */ renderMultilineText(textValue, textItem, availableWidth, y, style) {
+        const { position: position } = textItem;
         const lines = this.backend.splitTextToSize(textValue, availableWidth, style);
         let tempY = y;
         lines.forEach((line)=>{
             const lineWidth = this.backend.getTextWidth(line, style);
-            const x = this.calculateX(position.x, lineWidth);
+            const alignmentWidth = position.width ?? lineWidth;
+            this.backend.setTextItem?.(textItem);
+            const x = this.calculateX(position.x, alignmentWidth, position.offsetX);
             this.backend.text(line, x, tempY);
             tempY += style.size * (style.lineHeight ?? 1.2);
         });
@@ -27577,7 +27789,7 @@ class $2e404bc796b05dec$export$f1e5feaa438be04f {
    * Renders an image
    */ renderImage(imageItem, sectionY) {
         const { src: src, position: position, size: size, alias: alias, compression: compression, rotation: rotation } = imageItem;
-        const x = this.calculateX(position.x, size.width);
+        const x = this.calculateX(position.x, size.width, position.offsetX);
         const y = sectionY + position.y;
         const format = src.split('.').pop()?.toUpperCase();
         this.backend.addImage(src, format, x, y, size.width, size.height, alias, compression, rotation);
@@ -27607,16 +27819,16 @@ class $2e404bc796b05dec$export$f1e5feaa438be04f {
     }
     /**
    * Calculates the X position based on alignment
-   */ calculateX(alignment, width = 0) {
+   */ calculateX(alignment, width = 0, offsetX = 0) {
         switch(alignment){
             case 'center':
-                return this.backend.pageSize.width / 2 - width / 2;
+                return this.backend.pageSize.width / 2 - width / 2 + offsetX;
             case 'right':
-                return this.backend.pageSize.width - this.context.margins.right - width;
+                return this.backend.pageSize.width - this.context.margins.right - width + offsetX;
             case 'left':
             default:
-                if (typeof alignment === 'number') return this.context.margins.left + alignment;
-                return this.context.margins.left;
+                if (typeof alignment === 'number') return this.context.margins.left + alignment + offsetX;
+                return this.context.margins.left + offsetX;
         }
     }
     /**
@@ -27887,8 +28099,6 @@ var $2e404bc796b05dec$export$2e2bcd8739ae039 = $2e404bc796b05dec$export$f1e5feaa
    */ recordRenderingTime() {
         const endTime = performance.now();
         this.renderTime = (endTime - this.startTime) / 1000;
-        // eslint-disable-next-line no-console
-        console.log(`Rendered in ${this.renderTime.toFixed(2)} seconds`);
     }
     /**
    * Get the elements for a specific page
@@ -28005,7 +28215,7 @@ var $952711184d4e89d8$export$2e2bcd8739ae039 = $952711184d4e89d8$var$Renderer;
     /**
    * Creates a new HtmlRenderer
    */ constructor(song, container, configuration){
-        super(song), this._dimensions = null, this._dimensionCacheKey = null;
+        super(song), this.currentLayoutFontStyle = null, this.currentLayoutSection = null, this.currentLayoutTextItem = null, this.currentLineStyle = null, this._dimensions = null, this._dimensionCacheKey = null;
         this.container = container;
         this.configuration = configuration;
         this.styler = new (0, $0594288a7c3f9fa6$export$2e2bcd8739ae039)({
@@ -28067,44 +28277,73 @@ var $952711184d4e89d8$export$2e2bcd8739ae039 = $952711184d4e89d8$var$Renderer;
         console.log('Chord diagram rendering is stubbed out');
     }
     renderHeadersAndFooters() {
-        const layoutRenderer = this.createLayoutRenderer();
-        if (this.getHeaderConfig()) this.doc.eachPage(()=>{
-            layoutRenderer.renderLayout(this.getHeaderConfig(), 'header');
-        });
-        if (this.getFooterConfig()) this.doc.eachPage(()=>{
-            layoutRenderer.renderLayout(this.getFooterConfig(), 'footer');
+        const headerConfig = this.getHeaderConfig();
+        const footerConfig = this.getFooterConfig();
+        if (headerConfig) this.renderLayoutForEachPage(headerConfig, 'header');
+        if (footerConfig) this.renderLayoutForEachPage(footerConfig, 'footer');
+        this.resetLayoutRenderingState();
+    }
+    renderLayoutForEachPage(layoutConfig, section) {
+        this.doc.eachPage((_page, index)=>{
+            this.currentLayoutSection = section;
+            this.resetLayoutRenderingState(section);
+            this.createLayoutRenderer(index + 1, this.doc.totalPages).renderLayout(layoutConfig, section);
         });
     }
-    createLayoutRenderer() {
-        const backend = this.createLayoutBackend();
+    resetLayoutRenderingState(section = null) {
+        this.currentLayoutSection = section;
+        this.currentLayoutFontStyle = null;
+        this.currentLayoutTextItem = null;
+        this.currentLineStyle = null;
+    }
+    createLayoutRenderer(page, totalPages) {
+        const backend = this.createLayoutBackend(page, totalPages);
         return new (0, $2e404bc796b05dec$export$2e2bcd8739ae039)(backend, {
             metadata: this.song.metadata,
             margins: this.dimensions.margins,
-            extraMetadata: this.getExtraMetadata(this.doc.currentPage, this.doc.totalPages)
+            extraMetadata: this.getExtraMetadata(page, totalPages)
         });
     }
-    createLayoutBackend() {
+    createLayoutBackend(page, totalPages) {
         return {
             pageSize: this.doc.pageSize,
-            currentPage: this.doc.currentPage,
-            totalPages: this.doc.totalPages,
+            currentPage: page,
+            totalPages: totalPages,
             text: (content, x, y)=>this.renderHtmlText(content, x, y),
             getTextWidth: (text, font)=>this.doc.getTextWidth(text, font),
             splitTextToSize: (text, maxWidth, font)=>this.doc.splitTextToSize(text, maxWidth, font),
-            setFontStyle: ()=>{},
+            setFontStyle: (style)=>{
+                this.currentLayoutFontStyle = style;
+            },
+            setTextItem: (item)=>{
+                this.currentLayoutTextItem = item;
+            },
             addElement: (element, x, y)=>this.doc.addElement(element, x, y),
             addImage: (src, _format, x, y, width, height)=>this.renderHtmlImage(src, x, y, width, height),
             line: (x1, y1, x2, y2)=>this.renderHtmlLine(x1, y1, x2, y2),
-            setLineStyle: ()=>{},
+            setLineStyle: (style)=>{
+                this.currentLineStyle = style;
+            },
             resetDash: ()=>{}
         };
     }
     renderHtmlText(content, x, y) {
         const element = document.createElement('div');
         element.className = `${this.styler.prefix}header-text`;
+        this.applyLayoutTextClasses(element);
         element.textContent = content;
+        this.applyLayoutTextStyles(element);
         this.doc.addElement(element, x, y);
     }
+    applyLayoutTextClasses(element) {
+        const sectionClass = this.currentLayoutSection ? this.styler.getCustomClass(this.currentLayoutSection) : undefined;
+        if (sectionClass) element.classList.add(sectionClass);
+        if (this.currentLayoutTextItem?.cssClass) element.classList.add(this.currentLayoutTextItem.cssClass);
+    }
+    applyLayoutTextStyles(element) {
+        if (this.currentLayoutTextItem?.elementStyle) Object.assign(element.style, this.currentLayoutTextItem.elementStyle);
+        if (this.currentLayoutFontStyle) this.styler.applyFontStyle(element, this.currentLayoutFontStyle);
+    }
     renderHtmlImage(src, x, y, width, height) {
         const img = document.createElement('img');
         img.className = `${this.styler.prefix}image`;
@@ -28116,11 +28355,12 @@ var $952711184d4e89d8$export$2e2bcd8739ae039 = $952711184d4e89d8$var$Renderer;
     renderHtmlLine(x1, y1, x2, _y2) {
         const lineElement = document.createElement('div');
         lineElement.className = `${this.styler.prefix}line`;
+        const lineStyle = this.currentLineStyle;
         lineElement.style.width = `${x2 - x1}px`;
-        lineElement.style.height = '1px';
-        lineElement.style.borderBottomWidth = '1px';
-        lineElement.style.borderBottomStyle = 'solid';
-        lineElement.style.borderBottomColor = '#000000';
+        lineElement.style.height = '0';
+        lineElement.style.borderBottomWidth = `${lineStyle?.width ?? 1}px`;
+        lineElement.style.borderBottomStyle = lineStyle?.dash?.length ? 'dashed' : 'solid';
+        lineElement.style.borderBottomColor = lineStyle?.color ?? '#000000';
         this.doc.addElement(lineElement, x1, y1);
     }
     renderParagraphs(paragraphLayouts) {
@@ -37655,7 +37895,7 @@ const $a5a21ced491ea51f$var$endSectionTags = {
 var $a5a21ced491ea51f$export$2e2bcd8739ae039 = $a5a21ced491ea51f$var$UltimateGuitarParser;
 
 
-var $ae92e002ce14f11a$export$2e2bcd8739ae039 = '14.5.1';
+var $ae92e002ce14f11a$export$2e2bcd8739ae039 = '14.6.1';