chordsheetjs 14.5.1 → 14.6.1

package/lib/module.js

@@ -841,6 +841,7 @@ const $0cb401ed3f1d0550$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 || '';
@@ -3952,8 +3953,9 @@ const $33f7017b34767c5f$export$98e6a39c04603d36 = $33f7017b34767c5f$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
@@ -5050,6 +5052,7 @@ var $7494e305d9bdc641$export$2e2bcd8739ae039 = $7494e305d9bdc641$var$ChordDefini
  * Represents a comment. See https://www.chordpro.org/chordpro/chordpro-file-format-specification/#overview
  */ class $acbb1127ce68c11a$var$Comment {
     constructor(content){
+        this.parentLine = null;
         this.content = content;
     }
     /**
@@ -5074,6 +5077,7 @@ var $acbb1127ce68c11a$export$2e2bcd8739ae039 = $acbb1127ce68c11a$var$Comment;
 
 class $9be84d5515dccc21$var$AstComponent {
     constructor(traceInfo = null){
+        this.parentLine = null;
         this.line = null;
         this.column = null;
         this.offset = null;
@@ -5580,129 +5584,301 @@ const $152f7db1a9a2d897$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,
@@ -5749,22 +5925,22 @@ const $152f7db1a9a2d897$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'
                 }
             }
         }
@@ -6584,7 +6760,11 @@ var $7011f990fc73fda8$export$2e2bcd8739ae039 = $7011f990fc73fda8$var$Font;
         if (item instanceof (0, $b58c551853385714$export$2e2bcd8739ae039)) this.addTag(item);
         else if (item instanceof (0, $0d04ced54ebef610$export$2e2bcd8739ae039)) this.addChordLyricsPair(item);
         else if (item instanceof (0, $acbb1127ce68c11a$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
@@ -6653,6 +6833,7 @@ var $7011f990fc73fda8$export$2e2bcd8739ae039 = $7011f990fc73fda8$var$Font;
     addChordLyricsPair(chords = null, lyrics = null) {
         if (chords instanceof (0, $0d04ced54ebef610$export$2e2bcd8739ae039)) this.currentChordLyricsPair = chords;
         else this.currentChordLyricsPair = new (0, $0d04ced54ebef610$export$2e2bcd8739ae039)(chords || '', lyrics || '');
+        this.currentChordLyricsPair.parentLine = this;
         this.items.push(this.currentChordLyricsPair);
         return this.currentChordLyricsPair;
     }
@@ -6669,11 +6850,13 @@ var $7011f990fc73fda8$export$2e2bcd8739ae039 = $7011f990fc73fda8$var$Font;
     }
     addTag(nameOrTag, value = null) {
         const tag = nameOrTag instanceof (0, $b58c551853385714$export$2e2bcd8739ae039) ? nameOrTag : new (0, $b58c551853385714$export$2e2bcd8739ae039)(nameOrTag, value);
+        tag.parentLine = this;
         this.items.push(tag);
         return tag;
     }
     addComment(content) {
         const comment = content instanceof (0, $acbb1127ce68c11a$export$2e2bcd8739ae039) ? content : new (0, $acbb1127ce68c11a$export$2e2bcd8739ae039)(content);
+        comment.parentLine = this;
         this.items.push(comment);
         return comment;
     }
@@ -7351,6 +7534,7 @@ var $f548c8fca0a868b3$export$2e2bcd8739ae039 = $f548c8fca0a868b3$var$SongMapper;
 
 
 
+
 const $3d08fc52230ec46a$var$defaultConstructorOptions = {
     capo: 0,
     contextKey: null,
@@ -8047,7 +8231,7 @@ function $05ed9bcf33bcd31b$export$9b09a67f52000acf(configuration) {
                 });
             }
             if (item instanceof (0, $0d04ced54ebef610$export$2e2bcd8739ae039)) return $962eb86a322c5cfb$var$Song.transposeChordLyricsPair(item, delta, transposedKey, normalizeChordSuffix, accidental);
-            if (item instanceof (0, $34ab5875df061287$export$2e2bcd8739ae039)) return $962eb86a322c5cfb$var$Song.transposeLiteral(item, delta, transposedKey, normalizeChordSuffix, accidental);
+            if (item instanceof (0, $34ab5875df061287$export$2e2bcd8739ae039) && $962eb86a322c5cfb$var$Song.isMusicalSection(item.parentLine)) return $962eb86a322c5cfb$var$Song.transposeLiteral(item, delta, transposedKey, normalizeChordSuffix, accidental);
             return item;
         });
     }
@@ -8152,10 +8336,18 @@ function $05ed9bcf33bcd31b$export$9b09a67f52000acf(configuration) {
     changeChords(func) {
         return this.mapItems((item)=>{
             if (item instanceof (0, $0d04ced54ebef610$export$2e2bcd8739ae039)) return item.changeChord(func);
-            if (item instanceof (0, $34ab5875df061287$export$2e2bcd8739ae039)) return $962eb86a322c5cfb$var$Song.mapChordsInLiteral(item, func);
+            if (item instanceof (0, $34ab5875df061287$export$2e2bcd8739ae039) && $962eb86a322c5cfb$var$Song.isMusicalSection(item.parentLine)) return $962eb86a322c5cfb$var$Song.mapChordsInLiteral(item, func);
             return item;
         });
     }
+    static isMusicalSection(line) {
+        return line === null || ![
+            (0, $72b24102c7d826fd$export$92249c36c213e508),
+            (0, $72b24102c7d826fd$export$6a5a2eab72b6e3d),
+            (0, $72b24102c7d826fd$export$13f4b12aafeba5d6),
+            (0, $72b24102c7d826fd$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)=>{
@@ -27080,6 +27272,7 @@ class $51b611548911e213$export$94eb343ca6d26096 {
     /**
    * Gets conditional CSS styles from font configuration
    */ getConditionalStyles(style) {
+        const normalizedFontStyles = this.getNormalizedFontStyles(style);
         return {
             ...style.name && {
                 fontFamily: style.name
@@ -27087,15 +27280,7 @@ class $51b611548911e213$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'
             },
@@ -27143,6 +27328,7 @@ class $51b611548911e213$export$94eb343ca6d26096 {
     /**
    * Applies font styles to an HTML element
    */ applyFontStyle(element, style) {
+        const normalizedFontStyles = this.getNormalizedFontStyles(style);
         const styles = {
             whiteSpace: 'pre',
             ...style.name && {
@@ -27151,15 +27337,7 @@ class $51b611548911e213$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'
             },
@@ -27189,6 +27367,27 @@ class $51b611548911e213$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 $51b611548911e213$export$2e2bcd8739ae039 = $51b611548911e213$export$94eb343ca6d26096;
 
@@ -27440,7 +27639,14 @@ class $6be14f9184cf598f$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, $fb708a54a5f79aab$export$2e2bcd8739ae039)(contentItem.condition, metadata).evaluate();
     }
@@ -27454,15 +27660,18 @@ class $6be14f9184cf598f$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);
     }
     /**
@@ -27481,12 +27690,15 @@ class $6be14f9184cf598f$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);
         });
@@ -27495,7 +27707,7 @@ class $6be14f9184cf598f$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);
@@ -27525,16 +27737,16 @@ class $6be14f9184cf598f$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;
         }
     }
     /**
@@ -27805,8 +28017,6 @@ var $6be14f9184cf598f$export$2e2bcd8739ae039 = $6be14f9184cf598f$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
@@ -27923,7 +28133,7 @@ var $d8f61af58ffafb14$export$2e2bcd8739ae039 = $d8f61af58ffafb14$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, $51b611548911e213$export$2e2bcd8739ae039)({
@@ -27985,44 +28195,73 @@ var $d8f61af58ffafb14$export$2e2bcd8739ae039 = $d8f61af58ffafb14$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, $6be14f9184cf598f$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`;
@@ -28034,11 +28273,12 @@ var $d8f61af58ffafb14$export$2e2bcd8739ae039 = $d8f61af58ffafb14$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) {
@@ -37573,7 +37813,7 @@ const $ecd3f348894bfbde$var$endSectionTags = {
 var $ecd3f348894bfbde$export$2e2bcd8739ae039 = $ecd3f348894bfbde$var$UltimateGuitarParser;
 
 
-var $a91afe1497b28cb4$export$2e2bcd8739ae039 = '14.5.1';
+var $a91afe1497b28cb4$export$2e2bcd8739ae039 = '14.6.1';