chordsheetjs 14.5.1 → 14.6.0

package/lib/bundle.js

@@ -36962,8 +36962,9 @@ ${error.stack}`);
         */
         toString({ 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,
             useUnicodeModifier
@@ -38541,129 +38542,301 @@ ${error.stack}`);
         },
         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| \xB7 %{}}%{capo| \xB7 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,
@@ -38710,22 +38883,22 @@ ${error.stack}`);
             },
             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"
               }
             }
           }
@@ -59606,6 +59779,7 @@ Or set the song key before changing key:
         * Gets conditional CSS styles from font configuration
         */
         getConditionalStyles(style) {
+          const normalizedFontStyles = this.getNormalizedFontStyles(style);
           return {
             ...style.name && {
               fontFamily: style.name
@@ -59613,15 +59787,7 @@ Or set the song key before changing key:
             ...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"
             },
@@ -59672,6 +59838,7 @@ Or set the song key before changing key:
         * Applies font styles to an HTML element
         */
         applyFontStyle(element, style) {
+          const normalizedFontStyles = this.getNormalizedFontStyles(style);
           const styles = {
             whiteSpace: "pre",
             ...style.name && {
@@ -59680,15 +59847,7 @@ Or set the song key before changing key:
             ...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"
             },
@@ -59721,6 +59880,27 @@ Or set the song key before changing key:
         getCustomClass(elementType) {
           return this.config.cssClasses?.[elementType];
         }
+        getNormalizedFontStyles(style) {
+          const fontWeight = style.weight ?? (style.style === "bold" ? "bold" : void 0);
+          const fontStyle = style.style && style.style !== "bold" ? style.style : void 0;
+          const color = this.normalizeColor(style.color);
+          return {
+            ...fontWeight && {
+              fontWeight
+            },
+            ...fontStyle && {
+              fontStyle
+            },
+            ...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;
       function $bdd8c6196670168a$var$isNumber(value) {
@@ -59955,7 +60135,14 @@ Or set the song key before changing key:
           if (!contentItem.condition) return true;
           const { metadata: songMetadata, extraMetadata } = this.context;
           const metadata = new Proxy({}, {
-            get: (_3, prop) => extraMetadata?.[prop] ?? songMetadata.get(prop)
+            get: (_3, 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();
         }
@@ -59970,16 +60157,19 @@ Or set the song key before changing key:
           this.backend.setFontStyle(style);
           const availableWidth = position.width || this.getAvailableWidth();
           const y3 = sectionY + position.y;
-          if (position.clip) this.renderClippedText(textValue, position, availableWidth, y3, style);
-          else this.renderMultilineText(textValue, position, availableWidth, y3, style);
+          if (position.clip) this.renderClippedText(textValue, textItem, availableWidth, y3, style);
+          else this.renderMultilineText(textValue, textItem, availableWidth, y3, style);
         }
         /**
         * Renders clipped text with optional ellipsis
         */
-        renderClippedText(textValue, position, availableWidth, y3, style) {
+        renderClippedText(textValue, textItem, availableWidth, y3, style) {
+          const { position } = textItem;
           const clippedText = position.ellipsis ? this.clipTextWithEllipsis(textValue, availableWidth, style) : this.clipText(textValue, availableWidth, style);
           const textWidth = this.backend.getTextWidth(clippedText, style);
-          const x2 = this.calculateX(position.x, textWidth);
+          const alignmentWidth = position.width ?? textWidth;
+          this.backend.setTextItem?.(textItem);
+          const x2 = this.calculateX(position.x, alignmentWidth, position.offsetX);
           this.backend.text(clippedText, x2, y3);
         }
         /**
@@ -60001,12 +60191,15 @@ Or set the song key before changing key:
         /**
         * Renders multiline text
         */
-        renderMultilineText(textValue, position, availableWidth, y3, style) {
+        renderMultilineText(textValue, textItem, availableWidth, y3, style) {
+          const { position } = textItem;
           const lines = this.backend.splitTextToSize(textValue, availableWidth, style);
           let tempY = y3;
           lines.forEach((line) => {
             const lineWidth = this.backend.getTextWidth(line, style);
-            const x2 = this.calculateX(position.x, lineWidth);
+            const alignmentWidth = position.width ?? lineWidth;
+            this.backend.setTextItem?.(textItem);
+            const x2 = this.calculateX(position.x, alignmentWidth, position.offsetX);
             this.backend.text(line, x2, tempY);
             tempY += style.size * (style.lineHeight ?? 1.2);
           });
@@ -60016,7 +60209,7 @@ Or set the song key before changing key:
         */
         renderImage(imageItem, sectionY) {
           const { src, position, size, alias, compression, rotation } = imageItem;
-          const x2 = this.calculateX(position.x, size.width);
+          const x2 = this.calculateX(position.x, size.width, position.offsetX);
           const y3 = sectionY + position.y;
           const format = src.split(".").pop()?.toUpperCase();
           this.backend.addImage(src, format, x2, y3, size.width, size.height, alias, compression, rotation);
@@ -60053,16 +60246,16 @@ ${template}
         /**
         * 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;
           }
         }
         /**
@@ -60335,7 +60528,6 @@ ${template}
         recordRenderingTime() {
           const endTime = performance.now();
           this.renderTime = (endTime - this.startTime) / 1e3;
-          console.log(`Rendered in ${this.renderTime.toFixed(2)} seconds`);
         }
         /**
         * Get the elements for a specific page
@@ -60469,7 +60661,7 @@ ${template}
         * 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)({
@@ -60530,36 +60722,52 @@ ${template}
           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, index2) => {
+            this.currentLayoutSection = section;
+            this.resetLayoutRenderingState(section);
+            this.createLayoutRenderer(index2 + 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,
             text: (content, x2, y3) => this.renderHtmlText(content, x2, y3),
             getTextWidth: (text2, font) => this.doc.getTextWidth(text2, font),
             splitTextToSize: (text2, maxWidth, font) => this.doc.splitTextToSize(text2, maxWidth, font),
-            setFontStyle: () => {
+            setFontStyle: (style) => {
+              this.currentLayoutFontStyle = style;
+            },
+            setTextItem: (item) => {
+              this.currentLayoutTextItem = item;
             },
             addElement: (element, x2, y3) => this.doc.addElement(element, x2, y3),
             addImage: (src, _format, x2, y3, width, height) => this.renderHtmlImage(src, x2, y3, width, height),
             line: (x1, y1, x2, y22) => this.renderHtmlLine(x1, y1, x2, y22),
-            setLineStyle: () => {
+            setLineStyle: (style) => {
+              this.currentLineStyle = style;
             },
             resetDash: () => {
             }
@@ -60568,9 +60776,20 @@ ${template}
         renderHtmlText(content, x2, y3) {
           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, x2, y3);
         }
+        applyLayoutTextClasses(element) {
+          const sectionClass = this.currentLayoutSection ? this.styler.getCustomClass(this.currentLayoutSection) : void 0;
+          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, x2, y3, width, height) {
           const img = document.createElement("img");
           img.className = `${this.styler.prefix}image`;
@@ -60582,11 +60801,12 @@ ${template}
         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) {
@@ -69993,7 +70213,7 @@ AjwCRQJ5AAAAAAABAAAAANpTmfAAAAAA0e+yRgAAAADR77JG
         }
       };
       var $a5a21ced491ea51f$export$2e2bcd8739ae039 = $a5a21ced491ea51f$var$UltimateGuitarParser;
-      var $ae92e002ce14f11a$export$2e2bcd8739ae039 = "14.5.1";
+      var $ae92e002ce14f11a$export$2e2bcd8739ae039 = "14.6.0";
       var $a3816b486f741c00$exports = {};
       var $892913528e7f60f9$export$2e2bcd8739ae039 = {
         CHORUS: $dce48cb70c4120bb$export$8db6c706fc9142b2,