chordsheetjs 14.5.1 → 14.7.0-canary.0

package/lib/bundle.js

@@ -14251,7 +14251,7 @@ var ChordSheetJS = (() => {
   function createDOMPurify() {
     let window2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : getGlobal();
     const DOMPurify = (root) => createDOMPurify(root);
-    DOMPurify.version = "3.4.0";
+    DOMPurify.version = "3.3.2";
     DOMPurify.removed = [];
     if (!window2 || !window2.document || window2.document.nodeType !== NODE_TYPE.document || !window2.Element) {
       DOMPurify.isSupported = false;
@@ -14434,7 +14434,7 @@ var ChordSheetJS = (() => {
       NAMESPACE = cfg.NAMESPACE || HTML_NAMESPACE;
       MATHML_TEXT_INTEGRATION_POINTS = cfg.MATHML_TEXT_INTEGRATION_POINTS || MATHML_TEXT_INTEGRATION_POINTS;
       HTML_INTEGRATION_POINTS = cfg.HTML_INTEGRATION_POINTS || HTML_INTEGRATION_POINTS;
-      CUSTOM_ELEMENT_HANDLING = cfg.CUSTOM_ELEMENT_HANDLING || create(null);
+      CUSTOM_ELEMENT_HANDLING = cfg.CUSTOM_ELEMENT_HANDLING || {};
       if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck)) {
         CUSTOM_ELEMENT_HANDLING.tagNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck;
       }
@@ -14473,8 +14473,12 @@ var ChordSheetJS = (() => {
           addToSet(ALLOWED_ATTR, xml);
         }
       }
-      EXTRA_ELEMENT_HANDLING.tagCheck = null;
-      EXTRA_ELEMENT_HANDLING.attributeCheck = null;
+      if (!objectHasOwnProperty(cfg, "ADD_TAGS")) {
+        EXTRA_ELEMENT_HANDLING.tagCheck = null;
+      }
+      if (!objectHasOwnProperty(cfg, "ADD_ATTR")) {
+        EXTRA_ELEMENT_HANDLING.attributeCheck = null;
+      }
       if (cfg.ADD_TAGS) {
         if (typeof cfg.ADD_TAGS === "function") {
           EXTRA_ELEMENT_HANDLING.tagCheck = cfg.ADD_TAGS;
@@ -14697,10 +14701,6 @@ var ChordSheetJS = (() => {
         _forceRemove(currentNode);
         return true;
       }
-      if (SAFE_FOR_XML && currentNode.namespaceURI === HTML_NAMESPACE && tagName === "style" && _isNode(currentNode.firstElementChild)) {
-        _forceRemove(currentNode);
-        return true;
-      }
       if (currentNode.nodeType === NODE_TYPE.progressingInstruction) {
         _forceRemove(currentNode);
         return true;
@@ -14709,7 +14709,7 @@ var ChordSheetJS = (() => {
         _forceRemove(currentNode);
         return true;
       }
-      if (FORBID_TAGS[tagName] || !(EXTRA_ELEMENT_HANDLING.tagCheck instanceof Function && EXTRA_ELEMENT_HANDLING.tagCheck(tagName)) && !ALLOWED_TAGS[tagName]) {
+      if (!(EXTRA_ELEMENT_HANDLING.tagCheck instanceof Function && EXTRA_ELEMENT_HANDLING.tagCheck(tagName)) && (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName])) {
         if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) {
           if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) {
             return false;
@@ -14889,7 +14889,7 @@ var ChordSheetJS = (() => {
       }
       _executeHooks(hooks.afterSanitizeAttributes, currentNode, null);
     };
-    const _sanitizeShadowDOM2 = function _sanitizeShadowDOM(fragment) {
+    const _sanitizeShadowDOM = function _sanitizeShadowDOM2(fragment) {
       let shadowNode = null;
       const shadowIterator = _createNodeIterator(fragment);
       _executeHooks(hooks.beforeSanitizeShadowDOM, fragment, null);
@@ -14968,21 +14968,13 @@ var ChordSheetJS = (() => {
         _sanitizeElements(currentNode);
         _sanitizeAttributes(currentNode);
         if (currentNode.content instanceof DocumentFragment) {
-          _sanitizeShadowDOM2(currentNode.content);
+          _sanitizeShadowDOM(currentNode.content);
         }
       }
       if (IN_PLACE) {
         return dirty;
       }
       if (RETURN_DOM) {
-        if (SAFE_FOR_TEMPLATES) {
-          body.normalize();
-          let html2 = body.innerHTML;
-          arrayForEach([MUSTACHE_EXPR2, ERB_EXPR2, TMPLIT_EXPR2], (expr) => {
-            html2 = stringReplace(html2, expr, " ");
-          });
-          body.innerHTML = html2;
-        }
         if (RETURN_DOM_FRAGMENT) {
           returnNode = createDocumentFragment.call(body.ownerDocument);
           while (body.firstChild) {
@@ -15113,7 +15105,7 @@ var ChordSheetJS = (() => {
       text = freeze(["#text"]);
       html = freeze(["accept", "action", "align", "alt", "autocapitalize", "autocomplete", "autopictureinpicture", "autoplay", "background", "bgcolor", "border", "capture", "cellpadding", "cellspacing", "checked", "cite", "class", "clear", "color", "cols", "colspan", "controls", "controlslist", "coords", "crossorigin", "datetime", "decoding", "default", "dir", "disabled", "disablepictureinpicture", "disableremoteplayback", "download", "draggable", "enctype", "enterkeyhint", "exportparts", "face", "for", "headers", "height", "hidden", "high", "href", "hreflang", "id", "inert", "inputmode", "integrity", "ismap", "kind", "label", "lang", "list", "loading", "loop", "low", "max", "maxlength", "media", "method", "min", "minlength", "multiple", "muted", "name", "nonce", "noshade", "novalidate", "nowrap", "open", "optimum", "part", "pattern", "placeholder", "playsinline", "popover", "popovertarget", "popovertargetaction", "poster", "preload", "pubdate", "radiogroup", "readonly", "rel", "required", "rev", "reversed", "role", "rows", "rowspan", "spellcheck", "scope", "selected", "shape", "size", "sizes", "slot", "span", "srclang", "start", "src", "srcset", "step", "style", "summary", "tabindex", "title", "translate", "type", "usemap", "valign", "value", "width", "wrap", "xmlns", "slot"]);
       svg = freeze(["accent-height", "accumulate", "additive", "alignment-baseline", "amplitude", "ascent", "attributename", "attributetype", "azimuth", "basefrequency", "baseline-shift", "begin", "bias", "by", "class", "clip", "clippathunits", "clip-path", "clip-rule", "color", "color-interpolation", "color-interpolation-filters", "color-profile", "color-rendering", "cx", "cy", "d", "dx", "dy", "diffuseconstant", "direction", "display", "divisor", "dur", "edgemode", "elevation", "end", "exponent", "fill", "fill-opacity", "fill-rule", "filter", "filterunits", "flood-color", "flood-opacity", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-weight", "fx", "fy", "g1", "g2", "glyph-name", "glyphref", "gradientunits", "gradienttransform", "height", "href", "id", "image-rendering", "in", "in2", "intercept", "k", "k1", "k2", "k3", "k4", "kerning", "keypoints", "keysplines", "keytimes", "lang", "lengthadjust", "letter-spacing", "kernelmatrix", "kernelunitlength", "lighting-color", "local", "marker-end", "marker-mid", "marker-start", "markerheight", "markerunits", "markerwidth", "maskcontentunits", "maskunits", "max", "mask", "mask-type", "media", "method", "mode", "min", "name", "numoctaves", "offset", "operator", "opacity", "order", "orient", "orientation", "origin", "overflow", "paint-order", "path", "pathlength", "patterncontentunits", "patterntransform", "patternunits", "points", "preservealpha", "preserveaspectratio", "primitiveunits", "r", "rx", "ry", "radius", "refx", "refy", "repeatcount", "repeatdur", "restart", "result", "rotate", "scale", "seed", "shape-rendering", "slope", "specularconstant", "specularexponent", "spreadmethod", "startoffset", "stddeviation", "stitchtiles", "stop-color", "stop-opacity", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke", "stroke-width", "style", "surfacescale", "systemlanguage", "tabindex", "tablevalues", "targetx", "targety", "transform", "transform-origin", "text-anchor", "text-decoration", "text-rendering", "textlength", "type", "u1", "u2", "unicode", "values", "viewbox", "visibility", "version", "vert-adv-y", "vert-origin-x", "vert-origin-y", "width", "word-spacing", "wrap", "writing-mode", "xchannelselector", "ychannelselector", "x", "x1", "x2", "xmlns", "y", "y1", "y2", "z", "zoomandpan"]);
-      mathMl = freeze(["accent", "accentunder", "align", "bevelled", "close", "columnalign", "columnlines", "columnspacing", "columnspan", "denomalign", "depth", "dir", "display", "displaystyle", "encoding", "fence", "frame", "height", "href", "id", "largeop", "length", "linethickness", "lquote", "lspace", "mathbackground", "mathcolor", "mathsize", "mathvariant", "maxsize", "minsize", "movablelimits", "notation", "numalign", "open", "rowalign", "rowlines", "rowspacing", "rowspan", "rspace", "rquote", "scriptlevel", "scriptminsize", "scriptsizemultiplier", "selection", "separator", "separators", "stretchy", "subscriptshift", "supscriptshift", "symmetric", "voffset", "width", "xmlns"]);
+      mathMl = freeze(["accent", "accentunder", "align", "bevelled", "close", "columnsalign", "columnlines", "columnspan", "denomalign", "depth", "dir", "display", "displaystyle", "encoding", "fence", "frame", "height", "href", "id", "largeop", "length", "linethickness", "lspace", "lquote", "mathbackground", "mathcolor", "mathsize", "mathvariant", "maxsize", "minsize", "movablelimits", "notation", "numalign", "open", "rowalign", "rowlines", "rowspacing", "rowspan", "rspace", "rquote", "scriptlevel", "scriptminsize", "scriptsizemultiplier", "selection", "separator", "separators", "stretchy", "subscriptshift", "supscriptshift", "symmetric", "voffset", "width", "xmlns"]);
       xml = freeze(["xlink:href", "xml:id", "xlink:title", "xml:space", "xmlns:xlink"]);
       MUSTACHE_EXPR = seal(/\{\{[\w\W]*|[\w\W]*\}\}/gm);
       ERB_EXPR = seal(/<%[\w\W]*|[\w\W]*%>/gm);
@@ -15146,11 +15138,20 @@ var ChordSheetJS = (() => {
       });
       NODE_TYPE = {
         element: 1,
+        attribute: 2,
         text: 3,
+        cdataSection: 4,
+        entityReference: 5,
+        // Deprecated
+        entityNode: 6,
         // Deprecated
         progressingInstruction: 7,
         comment: 8,
-        document: 9
+        document: 9,
+        documentType: 10,
+        documentFragment: 11,
+        notation: 12
+        // Deprecated
       };
       getGlobal = function getGlobal2() {
         return typeof window === "undefined" ? null : window;
@@ -33032,6 +33033,8 @@ var ChordSheetJS = (() => {
       $parcel$export(module.exports, "UltimateGuitarParser", () => $a5a21ced491ea51f$export$2e2bcd8739ae039);
       $parcel$export(module.exports, "templateHelpers", () => $f9c5006b26957916$export$2e2bcd8739ae039);
       $parcel$export(module.exports, "version", () => $ae92e002ce14f11a$export$2e2bcd8739ae039);
+      $parcel$export(module.exports, "formatterConfiguration", () => $2a7926da41d163b3$export$2e2bcd8739ae039);
+      $parcel$export(module.exports, "keyHelpers", () => $3f8a8e161b112441$export$2e2bcd8739ae039);
       $parcel$export(module.exports, "IMAGE", () => $d21c5c7a462f3c34$export$74f94c628b84d921);
       $parcel$export(module.exports, "defaultPangoRenderer", () => $1883202621c13add$export$6be9e661c5b42166);
       $parcel$export(module.exports, "pangoToHtml", () => $1883202621c13add$export$599bd3ab2aa4735e);
@@ -36962,8 +36965,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 +38545,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 +38886,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"
               }
             }
           }
@@ -40242,6 +40418,74 @@ ${formattedContentLines}`;
         }
       };
       var $e02a17f5a26edf19$export$2e2bcd8739ae039 = $e02a17f5a26edf19$var$ChordRenderer;
+      var $a7ae2843546189cc$export$1e6f8e38ccd793b = {
+        solfege: [
+          "La",
+          "Sib",
+          "Si",
+          "Do",
+          "Do#",
+          "Reb",
+          "Re",
+          "Mib",
+          "Mi",
+          "Fa",
+          "Fa#",
+          "Solb",
+          "Sol",
+          "Sol#",
+          "Lab"
+        ],
+        symbol: [
+          "A",
+          "Bb",
+          "B",
+          "C",
+          "C#",
+          "Db",
+          "D",
+          "Eb",
+          "E",
+          "F",
+          "F#",
+          "Gb",
+          "G",
+          "G#",
+          "Ab"
+        ]
+      };
+      var $a7ae2843546189cc$export$24a0bd6af7756225 = {
+        solfege: [
+          "Fa#m",
+          "Solm",
+          "Sol#m",
+          "Lam",
+          "Sibm",
+          "Sim",
+          "Dom",
+          "Do#m",
+          "Rem",
+          "Re#m",
+          "Mibm",
+          "Mim",
+          "Fam"
+        ],
+        symbol: [
+          "F#m",
+          "Gm",
+          "G#m",
+          "Am",
+          "Bbm",
+          "Bm",
+          "Cm",
+          "C#m",
+          "Dm",
+          "D#m",
+          "Ebm",
+          "Em",
+          "Fm"
+        ]
+      };
       var $a7ae2843546189cc$export$1ba61c6fa2f892a9 = {
         solfege: {
           "Sib": {
@@ -40549,6 +40793,11 @@ ${formattedContentLines}`;
         const chordType = keyObj.type === "solfege" ? "solfege" : "symbol";
         return (0, $a7ae2843546189cc$export$1ba61c6fa2f892a9)[chordType][(0, $c2d6ab25ad00308f$export$2e2bcd8739ae039).toString(key)];
       }
+      function $2ce1086ce25c9ac0$export$74743eda5dda3ccf(key) {
+        const keyObj = (0, $c2d6ab25ad00308f$export$2e2bcd8739ae039).wrapOrFail(key);
+        const chordType = keyObj.type === "solfege" ? "solfege" : "symbol";
+        return keyObj.isMinor() ? (0, $a7ae2843546189cc$export$24a0bd6af7756225)[chordType] : (0, $a7ae2843546189cc$export$1e6f8e38ccd793b)[chordType];
+      }
       function $2ce1086ce25c9ac0$export$efb38dd75b8e2957({ selector, isNegated }, { configuration, metadata }) {
         if (selector === configuration.instrument?.type) return !isNegated;
         if (selector === configuration.user?.name) return !isNegated;
@@ -46209,6 +46458,10 @@ Or set the song key before changing key:
         }
       };
       var $e9ad1e86e7afd0c0$export$2e2bcd8739ae039 = $e9ad1e86e7afd0c0$var$When;
+      function $181068e44290b873$export$8d21e34596265fa2(config) {
+        const defautlBaseConfig = (0, $fe1d3ba9df1ecad5$export$cb4529290f33d264)();
+        return (0, $28a2fcb6fb95a147$export$5d86b86a654a7039)(defautlBaseConfig, config);
+      }
       function $f9c5006b26957916$export$17c9e635b932873b(item) {
         return item instanceof (0, $551a223fc13b5c10$export$2e2bcd8739ae039);
       }
@@ -59606,6 +59859,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 +59867,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 +59918,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 +59927,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 +59960,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 +60215,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 +60237,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 +60271,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 +60289,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 +60326,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 +60608,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 +60741,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 +60802,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 +60856,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 +60881,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 +70293,19 @@ AjwCRQJ5AAAAAAABAAAAANpTmfAAAAAA0e+yRgAAAADR77JG
         }
       };
       var $a5a21ced491ea51f$export$2e2bcd8739ae039 = $a5a21ced491ea51f$var$UltimateGuitarParser;
-      var $ae92e002ce14f11a$export$2e2bcd8739ae039 = "14.5.1";
+      var $ae92e002ce14f11a$export$2e2bcd8739ae039 = "14.7.0-canary.0";
+      var $2a7926da41d163b3$export$2e2bcd8739ae039 = {
+        configure: $181068e44290b873$export$8d21e34596265fa2,
+        getDefaultConfig: $fe1d3ba9df1ecad5$export$ed30944e0fe6ae5c,
+        getHTMLDefaultConfig: $fe1d3ba9df1ecad5$export$feae4e1ddbcbea1a,
+        getMeasuredHtmlDefaultConfig: $fe1d3ba9df1ecad5$export$fe41e6106c4780cb,
+        getPDFDefaultConfig: $fe1d3ba9df1ecad5$export$a9bd96cef660c12c,
+        mergeConfigs: $28a2fcb6fb95a147$export$5d86b86a654a7039
+      };
+      var $3f8a8e161b112441$export$2e2bcd8739ae039 = {
+        getCapos: $2ce1086ce25c9ac0$export$b07b16221c14aaa,
+        getKeys: $2ce1086ce25c9ac0$export$74743eda5dda3ccf
+      };
       var $a3816b486f741c00$exports = {};
       var $892913528e7f60f9$export$2e2bcd8739ae039 = {
         CHORUS: $dce48cb70c4120bb$export$8db6c706fc9142b2,
@@ -70033,6 +70345,8 @@ AjwCRQJ5AAAAAAABAAAAANpTmfAAAAAA0e+yRgAAAADR77JG
         CanvasMeasurer: $5aa067f9e49dac6d$export$6d4390fed2af4771,
         JsPdfMeasurer: $084c3084a14f9d9d$export$341872369d2a416a,
         LayoutEngine: $7fa32b9e3992eddb$export$12b762d1038ddc6b,
+        formatterConfiguration: $2a7926da41d163b3$export$2e2bcd8739ae039,
+        keyHelpers: $3f8a8e161b112441$export$2e2bcd8739ae039,
         version: $ae92e002ce14f11a$export$2e2bcd8739ae039,
         templateHelpers: {
           isEvaluatable: $28a2fcb6fb95a147$export$e3f63561d52b936d,
@@ -70087,7 +70401,7 @@ html2canvas/dist/html2canvas.js:
       ***************************************************************************** *)
 
 dompurify/dist/purify.es.mjs:
-  (*! @license DOMPurify 3.4.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.0/LICENSE *)
+  (*! @license DOMPurify 3.3.2 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.2/LICENSE *)
 
 svg-pathdata/lib/SVGPathData.module.js:
   (*! *****************************************************************************