vector-score 1.2.1 → 1.3.1

package/dist/vector-score.js

@@ -1,4 +1,4 @@
-const R = {
+const w = {
   treble: {
     staffType: "treble",
     paddingTop: 13,
@@ -31,16 +31,16 @@ const R = {
     topLineYPos: 0,
     bottomLineYPos: 110
   }
-}, p = {
+}, I = {
   w: 4,
   h: 2,
   q: 1,
   e: 0.5,
   s: 0.25
-}, at = 6, ct = 5, _ = 22, T = 30, u = 10, g = 6, ht = 4, lt = u * 2, M = 51, dt = 12, ft = 4, $ = 1, P = 4, k = 1, W = g * 2 + P + 4, rt = 16, S = 12, Z = rt, ut = 2, V = 8, Et = 40, nt = {
+}, it = 6, at = 5, T = 22, m = 30, u = 10, A = 6, ct = 4, ht = u * 2, L = 51, lt = 12, dt = 4, $ = 1, x = 4, ft = 1, W = A * 2 + x + 8, st = 16, R = 12, k = st, Et = 2, Z = 8, ut = 40, rt = {
   sharp: ["F", "C", "G", "D", "A", "E", "B"],
   flat: ["B", "E", "A", "D", "G", "C", "F"]
-}, q = {
+}, V = {
   C: { type: "sharp", count: 0 },
   G: { type: "sharp", count: 1 },
   D: { type: "sharp", count: 2 },
@@ -54,7 +54,7 @@ const R = {
   Ab: { type: "flat", count: 4 },
   Db: { type: "flat", count: 5 },
   Gb: { type: "flat", count: 6 }
-}, x = {
+}, X = {
   treble: {
     sharp: [5, 5, 5, 5, 4, 5, 4],
     // F5 C5 G5 D5 A4 E5 B4
@@ -75,22 +75,23 @@ const R = {
   },
   grand: { sharp: [], flat: [] }
 };
-function gt(h) {
-  const e = q[h];
-  if (!e) throw new Error(`Unknown key signature "${h}". Valid keys: ${Object.keys(q).join(", ")}`);
+function gt(l) {
+  const e = V[l];
+  if (!e) throw new Error(`Unknown key signature "${l}". Valid keys: ${Object.keys(V).join(", ")}`);
   return e;
 }
-function At(h, e, t, s) {
+function pt(l, e, t, s) {
   const r = gt(t);
   if (r.count === 0) return 0;
-  const n = r.type === "sharp" ? "ACCIDENTAL_SHARP" : "ACCIDENTAL_FLAT", o = h.getLayerByName("staff");
+  const n = r.type === "sharp" ? "ACCIDENTAL_SHARP" : "ACCIDENTAL_FLAT", o = l.getLayer("staff");
+  if (!o) throw new Error("Staff Init Error: Failed to retrieve staff layer for key signature renderering.");
   return e.getKeySignatureYPositions(r.type, r.count).forEach((a) => {
-    a.forEach((c, l) => {
-      h.drawGlyph(n, o, { xOffset: s + l * V, yOffset: c });
+    a.forEach((h, d) => {
+      l.drawGlyph(n, o, { xOffset: s + d * Z, yOffset: h });
     });
-  }), r.count * V;
+  }), r.count * Z;
 }
-const pt = {
+const At = {
   CLEF_TREBLE: {
     path: "m150 273 10 58c2 7 2 7 12 7 59 0 96 46 96 97 0 45-26 79-67 95-5 2-6 2-5 7 4 25 12 63 12 85 0 68-52 80-79 80-61 0-76-39-76-65 0-25 16-46 43-46 24 0 38 19 38 41 0 23-14 34-27 38-9 2-13 4-13 6 0 6 11 12 32 12 24 0 64-7 64-66 0-19-6-54-11-81-1-5-1-4-6-3l-27 2C48 540 0 474 0 404c0-80 61-138 119-185 5-4 4-5 3-10-2-16-5-42-5-65 0-42 9-92 39-125 8-9 20-19 26-19 4 0 15 11 21 20 16 24 26 58 26 93 0 61-33 112-76 153-3 2-3 2-3 7Zm38-211c-24 0-53 38-53 101l2 37c1 5 3 5 5 3 32-28 70-64 70-108 0-22-11-33-24-33Zm-44 272-8-51c-1-4-2-5-6-1-18 15-37 30-61 56-33 38-37 70-37 93 0 56 45 95 115 95l23-2c6-2 6-2 5-6l-20-119c-1-5-1-5-8-3-24 6-40 24-40 46 0 19 12 36 29 43 3 1 6 3 6 5 0 3-2 5-5 5l-11-3c-27-9-46-34-46-70 0-34 23-66 58-78 8-2 8-2 6-10Zm28 64 20 114c0 5 1 5 6 2 22-11 38-31 38-56 0-36-27-63-60-66-4 0-5 1-4 6Z",
     xOffset: 0,
@@ -186,11 +187,11 @@ const pt = {
     xOffset: 0,
     yOffset: 0
   }
-}, It = /^(?<name>[A-Ga-g])(?<accidental>##|bb|[#bn]?)(?<octave>\d)(?<duration>[whqeWHQE]?)$/, _t = /^[whqeWHQE]$/, X = ["C", "D", "E", "F", "G", "A", "B"];
-function U(h) {
-  const e = h.match(It);
+}, It = /^(?<name>[A-Ga-g])(?<accidental>##|bb|[#bn]?)(?<octave>\d)(?<duration>[whqeWHQE]?)$/, _t = /^[whqeWHQE]$/, U = ["C", "D", "E", "F", "G", "A", "B"];
+function Y(l) {
+  const e = l.match(It);
   if (!e || !e.groups)
-    throw new Error(`Invalid note string format: ${h}. Expected format: [A-Ga-g][#|b]?[0-9][w|h|q|e].`);
+    throw new Error(`Invalid note string format: ${l}. Expected format: [A-Ga-g][#|b]?[0-9][w|h|q|e].`);
   let { name: t, accidental: s, octave: r, duration: n } = e.groups;
   t = t.toUpperCase(), n = n.toLowerCase(), n || (n = "w");
   const o = {
@@ -200,14 +201,14 @@ function U(h) {
   };
   return s && (o.accidental = s), o;
 }
-function b(h) {
-  const e = h.match(_t);
-  if (!e) throw new Error(`Invalid note duration '${h}'. Use w | h | q | e.`);
+function v(l) {
+  const e = l.match(_t);
+  if (!e) throw new Error(`Invalid note duration '${l}'. Use w | h | q | e.`);
   return e[0].toString().toLowerCase();
 }
-function Y(h) {
+function M(l) {
   let e;
-  switch (h) {
+  switch (l) {
     case "treble":
       e = "CLEF_TREBLE";
       break;
@@ -218,25 +219,25 @@ function Y(h) {
       e = "CLEF_ALTO";
       break;
   }
-  if (!e) throw new Error(`Invalid clef type: ${h}. Valid clef types are: treble, bass, alto.`);
+  if (!e) throw new Error(`Invalid clef type: ${l}. Valid clef types are: treble, bass, alto.`);
   return e;
 }
-function z(h) {
-  let e = X.indexOf(h.name);
-  return e += h.octave * 12, e;
+function z(l) {
+  let e = U.indexOf(l.name);
+  return e += l.octave * 12, e;
 }
-function N(h, e) {
-  return X.indexOf(h.name) - X.indexOf(e.name) + (h.octave - e.octave) * 7;
+function C(l, e) {
+  return U.indexOf(l.name) - U.indexOf(e.name) + (l.octave - e.octave) * 7;
 }
-const G = 48, j = 40 + 30 / 2, K = 20, Q = 90;
-class ot {
+const G = 48, q = 40 + 30 / 2, j = 20, K = 90;
+class nt {
   params;
   rendererRef;
   width = 0;
   trebleStaffHeight = 0;
   constructor(e, t) {
     this.rendererRef = e;
-    const s = R[t];
+    const s = w[t];
     if (!s) throw new Error(`Staff type ${t} is not supported`);
     this.params = s;
   }
@@ -248,16 +249,16 @@ class ot {
   };
   drawStaff = (e) => {
     this.width = e;
-    const t = this.rendererRef.getLayerByName("staff");
+    const t = this.rendererRef.createLayer("staff");
     let s = this.drawStaffLines(0, t), r = this.drawStaffLines(s + 30, t);
     this.rendererRef.drawLine(0, 0, 0, r, t), this.rendererRef.drawLine(this.width, 0, this.width, r, t), this.trebleStaffHeight = s;
     let n = r, o = 1;
-    const i = Y("treble"), a = Y("bass");
+    const i = M("treble"), a = M("bass");
     this.rendererRef.drawGlyph(i, t), this.rendererRef.drawGlyph(a, t, { yOffset: s + 30 }), n += this.params.paddingBottom + 1, o += this.params.paddingTop, this.rendererRef.addTotalRootSvgHeight(n), this.rendererRef.addTotalRootSvgYOffset(o);
   };
   shouldNoteFlip(e) {
-    const t = Math.abs(e - Q), s = Math.abs(e - K);
-    return e === j ? !1 : t <= s ? !(e >= Q) : e <= K;
+    const t = Math.abs(e - K), s = Math.abs(e - j);
+    return e === q ? !1 : t <= s ? !(e >= K) : e <= j;
   }
   getLedgerLinesX(e, t) {
     const s = [], r = z(e);
@@ -284,37 +285,37 @@ class ot {
     return s;
   }
   calculateNoteYPos = (e) => {
-    let s = N(this.params.topLineNote, e) * (10 / 2);
+    let s = C(this.params.topLineNote, e) * (10 / 2);
     const r = z(e);
-    return r < G ? s += 10 : r === G && (s = j), s;
+    return r < G ? s += 10 : r === G && (s = q), s;
   };
   getKeySignatureYPositions(e, t) {
-    const s = nt[e].slice(0, t), r = x.treble[e], n = x.bass[e], o = s.map(
-      (a, c) => N(R.treble.topLineNote, { name: a, octave: r[c] }) * (10 / 2)
+    const s = rt[e].slice(0, t), r = X.treble[e], n = X.bass[e], o = s.map(
+      (a, h) => C(w.treble.topLineNote, { name: a, octave: r[h] }) * (10 / 2)
     ), i = s.map(
-      (a, c) => N(R.bass.topLineNote, { name: a, octave: n[c] }) * (10 / 2) + this.trebleStaffHeight + 30
+      (a, h) => C(w.bass.topLineNote, { name: a, octave: n[h] }) * (10 / 2) + this.trebleStaffHeight + 30
     );
     return [o, i];
   }
 }
 const Tt = 20;
-class m {
+class S {
   params;
   rendererRef;
   constructor(e, t) {
     this.rendererRef = e;
-    const s = R[t];
+    const s = w[t];
     if (!s) throw new Error(`Staff type ${t} is not supported`);
     this.params = s;
   }
   drawStaff = (e) => {
-    const t = this.rendererRef.getLayerByName("staff");
+    const t = this.rendererRef.createLayer("staff");
     let s = 0;
     for (let i = 0; i < 5; i++)
       this.rendererRef.drawLine(0, s, e, s, t), s += 10;
     this.rendererRef.drawLine(0, 0, 0, s - 10, t), this.rendererRef.drawLine(e, 0, e, s - 10, t);
     let r = s - 10 + 1, n = 1;
-    const o = Y(this.params.staffType);
+    const o = M(this.params.staffType);
     this.rendererRef.drawGlyph(o, t), r += this.params.paddingTop + this.params.paddingBottom, n += this.params.paddingTop, this.rendererRef.addTotalRootSvgHeight(r), this.rendererRef.addTotalRootSvgYOffset(n);
   };
   shouldNoteFlip(e) {
@@ -342,15 +343,15 @@ class m {
     }
     return s;
   }
-  calculateNoteYPos = (e) => N(this.params.topLineNote, e) * (10 / 2);
+  calculateNoteYPos = (e) => C(this.params.topLineNote, e) * (10 / 2);
   getKeySignatureYPositions(e, t) {
-    const s = nt[e].slice(0, t), r = x[this.params.staffType][e];
+    const s = rt[e].slice(0, t), r = X[this.params.staffType][e];
     return [s.map(
       (o, i) => this.calculateNoteYPos({ name: o, octave: r[i] })
     )];
   }
 }
-class it {
+class ot {
   svgRendererInstance;
   strategyInstance;
   constructor(e, t) {
@@ -364,7 +365,7 @@ class it {
     for (let n = 0; n < e.length; n++) {
       const o = e[n];
       if (o.noteObj.accidental && r < 3 ? (t += -8, s = Math.min(s, t), r++) : o.noteObj.accidental && r <= 3 ? (t = -8, r = 1) : (t = 0, r = 0), t !== 0) {
-        const a = Array.from(o.noteGroup.getElementsByTagName("use")).find((c) => c.getAttribute("href")?.includes("ACCIDENTAL"));
+        const a = Array.from(o.noteGroup.getElementsByTagName("use")).find((h) => h.getAttribute("href")?.includes("ACCIDENTAL"));
         if (!a) continue;
         a.setAttribute("transform", `translate(${t + 8}, 0)`);
       }
@@ -375,13 +376,13 @@ class it {
     let t = e[0], s = 0;
     for (let r = 1; r < e.length; r++) {
       const n = e[r];
-      if (-N(t.noteObj, n.noteObj) === 1) {
+      if (-C(t.noteObj, n.noteObj) === 1) {
         s = 28 / 2, n.noteGroup.setAttribute("transform", `translate(${s}, ${n.noteYPos})`);
-        const a = Array.from(n.noteGroup.getElementsByTagName("use")).find((c) => c.getAttribute("href")?.includes("ACCIDENTAL"));
+        const a = Array.from(n.noteGroup.getElementsByTagName("use")).find((h) => h.getAttribute("href")?.includes("ACCIDENTAL"));
         if (a) {
-          const c = a.getAttribute("transform")?.match(/([-]?\d+)/), l = c && c[0];
-          let d = -s;
-          l && (d += Number(l)), a.setAttribute("transform", `translate(${d}, 0)`);
+          const h = a.getAttribute("transform")?.match(/([-]?\d+)/), d = h && h[0];
+          let c = -s;
+          d && (c += Number(d)), a.setAttribute("transform", `translate(${c}, 0)`);
         }
         r++, t = e[r];
         continue;
@@ -392,7 +393,7 @@ class it {
   }
   // Handles drawing the glyphs to internal group, applies the xPositioning to note Cursor X
   renderNote(e) {
-    const t = this.svgRendererInstance.createGroup("note"), s = U(e), r = this.strategyInstance.calculateNoteYPos({
+    const t = this.svgRendererInstance.createGroup("note"), s = Y(e), r = this.strategyInstance.calculateNoteYPos({
       name: s.name,
       octave: s.octave
     });
@@ -460,15 +461,13 @@ class it {
     };
   }
 }
-const A = "http://www.w3.org/2000/svg", mt = 0.1, v = 1200;
-class w {
+const p = "http://www.w3.org/2000/svg", St = 0.1, F = 2;
+class O {
   rootElementRef;
   svgElementRef;
   // Layers
   parentGroupContainer;
-  musicStaffLayer;
-  musicNotesLayer;
-  musicUILayer;
+  layers = {};
   // Positioning variables
   width;
   scale;
@@ -479,21 +478,36 @@ class w {
   // from get rootSvgElement().
   // HEIGHT and YOfsset should be set externally, values are calculated internally.
   constructor(e, t) {
-    this.rootElementRef = e, this.width = t.width, this.scale = t.scale, this.width > v && (this.width = v, console.warn(`Width provided for the staff ${this.width} exceeds the limit ${v}. Please use this value to fix positioning issues.`)), this.svgElementRef = document.createElementNS(A, "svg"), this.svgElementRef.classList.add("vs-svg-renderer-root"), this.svgElementRef.style.maxWidth = "100%", this.svgElementRef.style.height = "auto", this.svgElementRef.style.display = "block", this.svgElementRef.setAttribute("color", t.staffColor), this.svgElementRef.style.backgroundColor = t.staffBackgroundColor, this.makeGlyphDefs(t.useGlyphs), this.parentGroupContainer = this.createGroup("svg-renderer-parent"), this.svgElementRef.appendChild(this.parentGroupContainer), this.musicStaffLayer = this.createGroup("music-staff-layer"), this.musicNotesLayer = this.createGroup("music-notes-layer"), this.musicUILayer = this.createGroup("music-ui-layer"), this.parentGroupContainer.appendChild(this.musicStaffLayer), this.parentGroupContainer.appendChild(this.musicNotesLayer), this.parentGroupContainer.appendChild(this.musicUILayer);
+    this.rootElementRef = e, this.width = t.width, this.scale = t.scale, this.svgElementRef = document.createElementNS(p, "svg"), this.svgElementRef.classList.add("vs-svg-renderer-root"), t.svgAutoFill && (this.svgElementRef.style.maxWidth = "100%", this.svgElementRef.style.height = "auto"), this.makeGlyphDefs(t.useGlyphs), this.parentGroupContainer = this.createGroup("svg-renderer-parent"), this.svgElementRef.appendChild(this.parentGroupContainer);
   }
   // Creates SVG defs for all glyphs in GLYPH_ENTRIES, applies global scale and offsets, appends to root SVG
   makeGlyphDefs(e) {
-    const t = document.createElementNS(A, "defs");
-    Object.entries(pt).filter(([r]) => e.includes(r)).forEach(([r, n]) => {
-      const o = document.createElementNS(A, "path");
-      o.setAttribute("id", `glyph-${r}`), o.setAttribute("d", n.path), o.setAttribute("fill", "currentColor"), o.setAttribute("transform", `translate(${n.xOffset}, ${n.yOffset}) scale(${mt})`), t.appendChild(o);
+    const t = document.createElementNS(p, "defs");
+    Object.entries(At).filter(([r]) => e.includes(r)).forEach(([r, n]) => {
+      const o = document.createElementNS(p, "path");
+      o.setAttribute("id", `glyph-${r}`), o.setAttribute("d", n.path), o.setAttribute("fill", "currentColor"), o.setAttribute("transform", `translate(${n.xOffset}, ${n.yOffset}) scale(${St})`), t.appendChild(o);
     }), this.rootSvgElement.appendChild(t);
   }
   addNamespacedClassesToElement(e, t) {
     [e].flat().forEach((r) => t.classList.add(`vs-${r}`));
   }
+  /**
+   * Creates a layer that is appended to parent element.
+   * layerName arg is the key that is appended to the internal list of layers, which
+   * can be used in method getLayer() arg. Best to call on construction.
+   *
+   * @param {string} layerName 
+   * @returns {SVGGElement} 
+   */
+  createLayer(e) {
+    const t = document.createElementNS(p, "g");
+    return t.classList.add(`vs-${e}-layer`), this.layers[e] = t, this.parentGroupContainer.appendChild(this.layers[e]), t;
+  }
+  getLayer(e) {
+    return this.layers[e] ?? null;
+  }
   createGroup(e) {
-    const t = document.createElementNS(A, "g");
+    const t = document.createElementNS(p, "g");
     return e && t.classList.add(`vs-${e}`), t;
   }
   commitElementsToDOM(e, t = this.rootElementRef) {
@@ -502,18 +516,6 @@ class w {
       s.appendChild(r);
     }) : s.appendChild(e), t.appendChild(s);
   }
-  getLayerByName(e) {
-    switch (e) {
-      case "staff":
-        return this.musicStaffLayer;
-      case "notes":
-        return this.musicNotesLayer;
-      case "ui":
-        return this.musicUILayer;
-      default:
-        throw new Error(`Layer with name '${e}' does not exist.`);
-    }
-  }
   addTotalRootSvgHeight(e) {
     this.totalHeight += e;
   }
@@ -524,10 +526,10 @@ class w {
     this.totalYOffset += e;
   }
   applySizingToRootSvg() {
-    this.parentGroupContainer.setAttribute("transform", `translate(0, ${this.totalYOffset})`);
-    let e = this.width * this.scale;
+    this.parentGroupContainer.setAttribute("transform", `translate(${F / 2}, ${this.totalYOffset})`);
+    let e = Math.round(this.width * this.scale);
     const t = (this.totalHeight + this.totalYOffset) * this.scale;
-    e += 2, this.svgElementRef.setAttribute("width", e.toString()), this.svgElementRef.setAttribute("height", t.toString()), this.svgElementRef.setAttribute("viewBox", `0 0 ${this.width} ${this.totalHeight + this.totalYOffset}`);
+    e += F, this.svgElementRef.setAttribute("width", e.toString()), this.svgElementRef.setAttribute("height", t.toString()), this.svgElementRef.setAttribute("viewBox", `0 0 ${this.width + F} ${this.totalHeight + this.totalYOffset}`);
   }
   get rootSvgElement() {
     return this.svgElementRef;
@@ -536,12 +538,12 @@ class w {
     return this.parentGroupContainer;
   }
   // Drawing Methods
-  drawLine(e, t, s, r, n) {
-    const o = document.createElementNS(A, "line");
-    o.setAttribute("x1", e.toString()), o.setAttribute("y1", t.toString()), o.setAttribute("x2", s.toString()), o.setAttribute("y2", r.toString()), o.setAttribute("stroke", "currentColor"), o.setAttribute("stroke-width", "1"), n.appendChild(o);
+  drawLine(e, t, s, r, n, o) {
+    const i = o?.strokeWidth ?? 1, a = document.createElementNS(p, "line");
+    a.setAttribute("x1", e.toString()), a.setAttribute("y1", t.toString()), a.setAttribute("x2", s.toString()), a.setAttribute("y2", r.toString()), a.setAttribute("stroke", "currentColor"), a.setAttribute("stroke-width", i.toString()), o?.classes && this.addNamespacedClassesToElement(o.classes, n), n.appendChild(a);
   }
   drawRect(e, t, s, r) {
-    const n = document.createElementNS(A, "rect");
+    const n = document.createElementNS(p, "rect");
     return n.setAttribute("width", e.toString()), n.setAttribute("height", t.toString()), n.setAttribute("x", (r?.x ?? 0).toString()), n.setAttribute("y", (r?.y ?? 0).toString()), r?.fill ? n.setAttribute("fill", r.fill) : n.setAttribute("fill", "currentColor"), r?.rx && n.setAttribute("rx", r.rx.toString()), r?.classes && this.addNamespacedClassesToElement(r.classes, n), s.appendChild(n), n;
   }
   drawGlyph(e, t, s) {
@@ -550,22 +552,22 @@ class w {
       yOffset: 0,
       ...s
     };
-    const r = document.createElementNS(A, "use");
+    const r = document.createElementNS(p, "use");
     r.setAttribute("href", `#glyph-${e}`), (s.xOffset || s.yOffset) && r.setAttribute("transform", `translate(${s.xOffset}, ${s.yOffset})`), t.appendChild(r);
   }
   drawCircle(e, t, s, r, n) {
-    const o = document.createElementNS(A, "circle");
+    const o = document.createElementNS(p, "circle");
     return o.setAttribute("cx", e.toString()), o.setAttribute("cy", t.toString()), o.setAttribute("r", s.toString()), n?.filled === !1 ? (o.setAttribute("fill", "none"), o.setAttribute("stroke", "currentColor"), o.setAttribute("stroke-width", (n?.strokeWidth ?? 1.5).toString())) : o.setAttribute("fill", n?.fill ?? "currentColor"), n?.classes && this.addNamespacedClassesToElement(n.classes, o), r.appendChild(o), o;
   }
   drawText(e, t, s, r, n) {
-    const o = document.createElementNS(A, "text");
-    return o.setAttribute("x", t.toString()), o.setAttribute("y", s.toString()), o.setAttribute("text-anchor", n?.anchor ?? "middle"), o.setAttribute("fill", n?.fill ?? "currentColor"), n?.fontSize && o.setAttribute("font-size", n.fontSize + "px"), n?.fontWeight && o.setAttribute("font-weight", n.fontWeight), n?.classes && this.addNamespacedClassesToElement(n.classes, o), o.textContent = e, r.appendChild(o), o;
+    const o = document.createElementNS(p, "text");
+    return o.setAttribute("x", t.toString()), o.setAttribute("y", s.toString()), o.setAttribute("text-anchor", n?.anchor ?? "middle"), o.setAttribute("fill", n?.fill ?? "currentColor"), n?.fontSize && o.setAttribute("font-size", n.fontSize + "px"), n?.fontWeight && o.setAttribute("font-weight", n.fontWeight), n?.baseline && o.setAttribute("dominant-baseline", n.baseline), n?.classes && this.addNamespacedClassesToElement(n.classes, o), o.textContent = e, r.appendChild(o), o;
   }
   destroy() {
     this.rootElementRef && this.svgElementRef && this.rootElementRef.contains(this.svgElementRef) && this.rootElementRef.removeChild(this.svgElementRef);
   }
 }
-const Ct = [
+const mt = [
   "CLEF_TREBLE",
   "CLEF_BASS",
   "CLEF_ALTO",
@@ -602,47 +604,47 @@ class bt {
       staffType: "treble",
       spaceAbove: 0,
       spaceBelow: 0,
-      staffColor: "black",
-      staffBackgroundColor: "transparent",
+      svgAutoFill: !0,
       ...t
-    }, this.svgRendererInstance = new w(e, {
+    }, this.svgRendererInstance = new O(e, {
       width: this.options.width,
       height: 100,
       scale: this.options.scale,
-      staffColor: this.options.staffColor,
-      staffBackgroundColor: this.options.staffBackgroundColor,
-      useGlyphs: Ct
+      useGlyphs: mt,
+      svgAutoFill: this.options.svgAutoFill
     });
     const s = this.svgRendererInstance.rootSvgElement;
     switch (this.options.staffType) {
       case "grand":
-        this.strategyInstance = new ot(this.svgRendererInstance, "grand");
+        this.strategyInstance = new nt(this.svgRendererInstance, "grand");
         break;
       case "bass":
-        this.strategyInstance = new m(this.svgRendererInstance, "bass");
+        this.strategyInstance = new S(this.svgRendererInstance, "bass");
         break;
       case "treble":
-        this.strategyInstance = new m(this.svgRendererInstance, "treble");
+        this.strategyInstance = new S(this.svgRendererInstance, "treble");
         break;
       case "alto":
-        this.strategyInstance = new m(this.svgRendererInstance, "alto");
+        this.strategyInstance = new S(this.svgRendererInstance, "alto");
         break;
       default:
         throw new Error(`The staff type ${this.options.staffType} is not supported. Please use "treble", "bass", "alto", or "grand".`);
     }
-    if (this.strategyInstance.drawStaff(this.options.width), this.noteRendererInstance = new it(this.svgRendererInstance, this.strategyInstance), this.options.spaceAbove) {
-      const n = this.options.spaceAbove * 10;
-      this.svgRendererInstance.addTotalRootSvgYOffset(n);
+    this.strategyInstance.drawStaff(this.options.width);
+    const r = this.svgRendererInstance.createLayer("notes");
+    if (this.noteRendererInstance = new ot(this.svgRendererInstance, this.strategyInstance), this.options.spaceAbove) {
+      const o = this.options.spaceAbove * 10;
+      this.svgRendererInstance.addTotalRootSvgYOffset(o);
     }
     if (this.options.spaceBelow) {
-      let n = this.options.spaceBelow * 10;
-      this.options.staffType === "grand" && (n -= 10 / 2), this.svgRendererInstance.addTotalRootSvgHeight(n);
+      let o = this.options.spaceBelow * 10;
+      this.options.staffType === "grand" && (o -= 10 / 2), this.svgRendererInstance.addTotalRootSvgHeight(o);
     }
-    let r = 0;
-    this.options.keySignature && (r = this.createKeySignature(this.options.keySignature)), this.noteStartX = 38 + this.options.noteStartX + r, this.svgRendererInstance.getLayerByName("notes").setAttribute("transform", `translate(${this.noteStartX}, 0)`), this.svgRendererInstance.applySizingToRootSvg(), this.svgRendererInstance.commitElementsToDOM(s);
+    let n = 0;
+    this.options.keySignature && (n = this.createKeySignature(this.options.keySignature)), this.noteStartX = 38 + this.options.noteStartX + n, r.setAttribute("transform", `translate(${this.noteStartX}, 0)`), this.svgRendererInstance.applySizingToRootSvg(), this.svgRendererInstance.commitElementsToDOM(s);
   }
   createKeySignature(e) {
-    return At(this.svgRendererInstance, this.strategyInstance, e, Et);
+    return pt(this.svgRendererInstance, this.strategyInstance, e, ut);
   }
   /**
    * Draws a note on the staff.
@@ -665,7 +667,9 @@ class bt {
    * drawNote("D4w");
   */
   drawNote(e) {
-    const t = Array.isArray(e) ? e : [e], s = this.svgRendererInstance.getLayerByName("notes"), r = [];
+    const t = Array.isArray(e) ? e : [e], s = this.svgRendererInstance.getLayer("notes");
+    if (!s) throw new Error("DrawNote Error: Failed to retrieve notesLayer to append notes.");
+    const r = [];
     for (const n of t) {
       let o;
       try {
@@ -700,10 +704,12 @@ class bt {
   */
   drawChord(e) {
     if (e.length < 2) throw new Error("Provide more than one note for a chord.");
-    const t = this.svgRendererInstance.getLayerByName("notes"), s = this.noteRendererInstance.renderChord(e);
+    const t = this.svgRendererInstance.getLayer("notes");
+    if (!t) throw new Error("DrawChord Error: Failed to retrieve notesLayer to append chord.");
+    const s = this.noteRendererInstance.renderChord(e);
     s.noteGroup.setAttribute("transform", `translate(${this.noteCursorX + s.accidentalOffset}, 0)`), this.noteEntries.push({
       gElement: s.noteGroup,
-      note: U(e[0]),
+      note: Y(e[0]),
       xPos: this.noteCursorX + s.accidentalOffset,
       yPos: 0,
       accidentalXOffset: s.accidentalOffset
@@ -718,10 +724,10 @@ class bt {
     if (t <= 0 || e <= 0) return;
     const s = Math.round(e / t);
     this.noteEntries.map((n, o) => {
-      const i = (o + 0.5) * s, a = n.gElement.getBBox(), c = i - a.width / 2 - a.x, l = Math.round(c * 10) / 10;
+      const i = (o + 0.5) * s, a = n.gElement.getBBox(), h = i - a.width / 2 - a.x, d = Math.round(h * 10) / 10;
       return {
         entry: n,
-        newX: l,
+        newX: d,
         isChord: n.gElement.classList.contains("chord")
       };
     }).forEach((n) => {
@@ -734,7 +740,7 @@ class bt {
    * @returns void
   */
   clearAllNotes() {
-    this.noteCursorX = 0, this.svgRendererInstance.getLayerByName("notes").replaceChildren(), this.noteEntries = [];
+    this.noteCursorX = 0, this.svgRendererInstance.getLayer("notes")?.replaceChildren(), this.noteEntries = [];
   }
   /**
    * Changes the note by index to the specified note.
@@ -755,7 +761,10 @@ class bt {
   changeNoteByIndex(e, t) {
     if (t >= this.noteEntries.length) throw new Error("Note index was out of bounds.");
     const s = this.noteEntries[t], r = this.noteRendererInstance.renderNote(e), o = s.xPos - s.accidentalXOffset + r.accidentalOffset;
-    r.noteGroup.setAttribute("transform", `translate(${o}, ${r.noteYPos})`), this.svgRendererInstance.getLayerByName("notes").replaceChild(r.noteGroup, s.gElement), this.noteEntries[t] = {
+    r.noteGroup.setAttribute("transform", `translate(${o}, ${r.noteYPos})`);
+    const i = this.svgRendererInstance.getLayer("notes");
+    if (!i) throw new Error("ChangeNoteByIndex Error: Failed to retrieve notesLayer to append notes.");
+    i.replaceChild(r.noteGroup, s.gElement), this.noteEntries[t] = {
       gElement: r.noteGroup,
       note: r.noteObj,
       xPos: o,
@@ -783,9 +792,12 @@ class bt {
     if (t >= this.noteEntries.length) throw new Error("Chord index was out of bounds.");
     if (e.length < 2) throw new Error("Notes provided need to be more than one to be considered a chord.");
     const s = this.noteEntries[t], r = this.noteRendererInstance.renderChord(e), o = s.xPos - s.accidentalXOffset + r.accidentalOffset;
-    r.noteGroup.setAttribute("transform", `translate(${o}, 0)`), this.svgRendererInstance.getLayerByName("notes").replaceChild(r.noteGroup, s.gElement), this.noteEntries[t] = {
+    r.noteGroup.setAttribute("transform", `translate(${o}, 0)`);
+    const i = this.svgRendererInstance.getLayer("notes");
+    if (!i) throw new Error("DrawNote Error: Failed to retrieve notesLayer to append notes.");
+    i.replaceChild(r.noteGroup, s.gElement), this.noteEntries[t] = {
       gElement: r.noteGroup,
-      note: U(e[0]),
+      note: Y(e[0]),
       xPos: o,
       yPos: 0,
       accidentalXOffset: r.accidentalOffset
@@ -821,7 +833,7 @@ class bt {
     this.noteEntries = [], this.svgRendererInstance.destroy();
   }
 }
-const I = 30, J = 19, F = 12, St = 4, Nt = 6, tt = 1, D = 38, Lt = [
+const _ = 30, Q = 19, D = 12, Ct = 4, Nt = 6, J = 1, H = 38, Lt = [
   "TIME_4",
   "TIME_3",
   "NOTE_HEAD_WHOLE",
@@ -833,7 +845,7 @@ const I = 30, J = 19, F = 12, St = 4, Nt = 6, tt = 1, D = 38, Lt = [
   "REST_QUARTER",
   "REST_EIGHTH"
 ];
-class Gt {
+class vt {
   rendererInstance;
   options;
   barSpacing;
@@ -844,7 +856,7 @@ class Gt {
   currentBeatCount = 0;
   currentBeatUICount = 0;
   currentBeatUIElement = null;
-  currentBeatUIXPos = D;
+  currentBeatUIXPos = H;
   /**
    * Creates an instance of a RhythmStaff, A single staff that will automatically apply positioning of elements based on the duration of a note.
    *
@@ -860,67 +872,66 @@ class Gt {
       barsCount: 2,
       spaceAbove: 0,
       spaceBelow: 0,
-      staffColor: "black",
-      staffBackgroundColor: "white",
-      currentBeatUIColor: "#24ff7450",
+      svgAutoFill: !0,
       ...t
-    }, this.rendererInstance = new w(e, {
+    }, this.rendererInstance = new O(e, {
       width: this.options.width,
       height: 100,
       scale: this.options.scale,
-      staffColor: this.options.staffColor,
-      staffBackgroundColor: this.options.staffBackgroundColor,
-      useGlyphs: Lt
+      useGlyphs: Lt,
+      svgAutoFill: this.options.svgAutoFill
     });
-    const s = this.rendererInstance.rootSvgElement;
-    let r = "TIME_4";
+    const s = this.rendererInstance.rootSvgElement, r = this.rendererInstance.createLayer("staff"), n = this.rendererInstance.createLayer("notes");
+    this.rendererInstance.createLayer("ui");
+    let o = "TIME_4";
     switch (this.options.topNumber) {
       case 3:
-        r = "TIME_3";
+        o = "TIME_3";
         break;
       case 4:
-        r = "TIME_4";
+        o = "TIME_4";
         break;
       default:
         throw new Error(`Time signature ${this.options.topNumber} not supported. Please use either 3 or 4.`);
     }
     if (this.options.barsCount < 1 || this.options.barsCount > 3) throw new Error(`Bars count ${this.options.barsCount} not supported. Please use 1 - 3`);
     if (this.options.spaceAbove) {
-      const f = this.options.spaceAbove * 10;
-      this.rendererInstance.addTotalRootSvgYOffset(f);
+      const E = this.options.spaceAbove * 10;
+      this.rendererInstance.addTotalRootSvgYOffset(E);
     }
     if (this.options.spaceBelow) {
-      let f = this.options.spaceBelow * 10;
-      this.rendererInstance.addTotalRootSvgHeight(f);
+      let E = this.options.spaceBelow * 10;
+      this.rendererInstance.addTotalRootSvgHeight(E);
     }
-    const n = this.rendererInstance.getLayerByName("staff");
-    this.rendererInstance.addTotalRootSvgHeight(I * 2);
-    const o = this.rendererInstance.createGroup("time-signature");
-    n.appendChild(o);
-    const i = I - J;
-    this.rendererInstance.drawGlyph(r, o), this.rendererInstance.drawGlyph("TIME_4", o, { yOffset: J }), o.setAttribute("transform", `translate(0, ${i})`);
-    let a = this.options.width - 38;
-    this.options.barsCount > 1 && (a -= (this.options.barsCount - 1) * F), a -= tt, this.rendererInstance.drawLine(0, I, this.options.width - tt, I, n), this.barSpacing = a / this.options.barsCount, this.quarterNoteSpacing = Math.round(this.barSpacing / this.options.topNumber), this.maxBeatCount = this.options.barsCount * this.options.topNumber;
-    let c = this.barSpacing + 38;
-    const l = I / 2, d = I + l;
-    for (let f = 0; f < this.options.barsCount - 1; f++)
-      this.rendererInstance.drawLine(c, l, c, d, n), c += this.barSpacing;
-    this.rendererInstance.getLayerByName("notes").setAttribute("transform", `translate(38, ${I})`), this.rendererInstance.applySizingToRootSvg(), this.rendererInstance.commitElementsToDOM(s);
+    this.rendererInstance.addTotalRootSvgHeight(_ * 2);
+    const i = this.rendererInstance.createGroup("time-signature");
+    r.appendChild(i);
+    const a = _ - Q;
+    this.rendererInstance.drawGlyph(o, i), this.rendererInstance.drawGlyph("TIME_4", i, { yOffset: Q }), i.setAttribute("transform", `translate(0, ${a})`);
+    let h = this.options.width - 38;
+    this.options.barsCount > 1 && (h -= (this.options.barsCount - 1) * D), h -= J, this.rendererInstance.drawLine(0, _, this.options.width - J, _, r), this.barSpacing = h / this.options.barsCount, this.quarterNoteSpacing = Math.round(this.barSpacing / this.options.topNumber), this.maxBeatCount = this.options.barsCount * this.options.topNumber;
+    let d = this.barSpacing + 38;
+    const c = _ / 2, f = _ + c;
+    for (let E = 0; E < this.options.barsCount - 1; E++)
+      this.rendererInstance.drawLine(d, c, d, f, r), d += this.barSpacing;
+    n.setAttribute("transform", `translate(38, ${_})`), this.rendererInstance.applySizingToRootSvg(), this.rendererInstance.commitElementsToDOM(s);
   }
   createBeatUIElement() {
-    const e = this.rendererInstance.getLayerByName("ui");
+    const e = this.rendererInstance.getLayer("ui");
+    if (!e) throw new Error("BeatUI Error: Failed to retrieve ui layer");
     this.currentBeatUIElement = this.rendererInstance.drawRect(
       this.quarterNoteSpacing / 2,
-      I * 2,
+      _ * 2,
       e,
       {
-        x: D,
-        fill: this.options.currentBeatUIColor
+        x: H,
+        fill: "rgba(0,255,40,0.4)",
+        classes: "rhythm-current-beat"
       }
     );
   }
   handleNewBar() {
-    this.noteCursorX += F;
+    this.noteCursorX += D;
   }
   // Translates group, returns cursor increment amount
   translateGroupByDuration(e, t) {
@@ -980,19 +991,18 @@ class Gt {
     for (; s > 0; ) {
       const r = this.rendererInstance.createGroup("rest");
       let n = 0;
-      s - p.h >= 0 ? (this.rendererInstance.drawGlyph("REST_HALF", r), n = p.h) : s - p.q >= 0 ? (this.rendererInstance.drawGlyph("REST_QUARTER", r), n = p.q) : (this.rendererInstance.drawGlyph("REST_EIGHTH", r), n = p.e), s -= n, this.currentBeatCount += n, r.setAttribute("transform", `translate(${this.noteCursorX}, 0)`), this.noteCursorX += n * this.quarterNoteSpacing, t.push(r);
+      s - I.h >= 0 ? (this.rendererInstance.drawGlyph("REST_HALF", r), n = I.h) : s - I.q >= 0 ? (this.rendererInstance.drawGlyph("REST_QUARTER", r), n = I.q) : (this.rendererInstance.drawGlyph("REST_EIGHTH", r), n = I.e), s -= n, this.currentBeatCount += n, r.setAttribute("transform", `translate(${this.noteCursorX}, 0)`), this.noteCursorX += n * this.quarterNoteSpacing, t.push(r);
     }
     return t;
   }
   renderBeamRect(e, t, s, r) {
     this.rendererInstance.drawRect(
       e - t,
-      St,
+      Ct,
       s,
       {
         x: 10,
-        y: -28 + (r ?? 0),
-        fill: this.options.staffColor
+        y: -28 + (r ?? 0)
       }
     );
   }
@@ -1015,24 +1025,26 @@ class Gt {
    * drawNote("w");
   */
   drawNote(e) {
-    const t = Array.isArray(e) ? e : [e], s = this.rendererInstance.getLayerByName("notes"), r = [];
+    const t = Array.isArray(e) ? e : [e], s = this.rendererInstance.getLayer("notes");
+    if (!s) throw new Error("DrawNote Error: Failed to retrieve notes layer");
+    const r = [];
     for (const n of t) {
       let o = "w";
       try {
-        o = b(n);
-      } catch (d) {
-        throw r.length > 0 && this.rendererInstance.commitElementsToDOM(r, s), d;
+        o = v(n);
+      } catch (c) {
+        throw r.length > 0 && this.rendererInstance.commitElementsToDOM(r, s), c;
       }
-      const i = p[o];
+      const i = I[o];
       if (this.currentBeatCount >= this.maxBeatCount)
         throw r.length > 0 && this.rendererInstance.commitElementsToDOM(r, s), new Error("Max beat count reached. Can't add additional notes.");
       this.checkAndCreateNewBar();
       const a = this.checkAndFillBarWithRests(i);
-      a && a.forEach((d) => {
-        r.push(d), this.noteEntries.push(d);
+      a && a.forEach((c) => {
+        r.push(c), this.noteEntries.push(c);
       });
-      const c = this.rendererInstance.createGroup("note"), l = this.translateGroupByDuration(i, c);
-      this.noteCursorX += l, this.currentBeatCount += i, this.renderNote(o, c), r.push(c), this.noteEntries.push(c);
+      const h = this.rendererInstance.createGroup("note"), d = this.translateGroupByDuration(i, h);
+      this.noteCursorX += d, this.currentBeatCount += i, this.renderNote(o, h), r.push(h), this.noteEntries.push(h);
     }
     this.rendererInstance.commitElementsToDOM(r, s);
   }
@@ -1055,22 +1067,24 @@ class Gt {
    * drawRest("w");
   */
   drawRest(e) {
-    const t = Array.isArray(e) ? e : [e], s = this.rendererInstance.getLayerByName("notes"), r = [];
+    const t = Array.isArray(e) ? e : [e], s = this.rendererInstance.getLayer("notes");
+    if (!s) throw new Error("DrawRest Error: Failed to retrieve notes layer");
+    const r = [];
     for (const n of t) {
       let o = "w";
       try {
-        o = b(n);
-      } catch (d) {
-        throw r.length > 0 && this.rendererInstance.commitElementsToDOM(r, s), d;
+        o = v(n);
+      } catch (c) {
+        throw r.length > 0 && this.rendererInstance.commitElementsToDOM(r, s), c;
       }
-      const i = this.rendererInstance.createGroup("rest"), a = p[o], c = a * this.quarterNoteSpacing;
+      const i = this.rendererInstance.createGroup("rest"), a = I[o], h = a * this.quarterNoteSpacing;
       if (this.currentBeatCount >= this.maxBeatCount)
         throw r.length > 0 && this.rendererInstance.commitElementsToDOM(r, s), new Error("Max beat count reached. Can't add additional notes.");
       this.checkAndCreateNewBar();
-      const l = this.checkAndFillBarWithRests(a);
-      l && l.forEach((d) => {
-        r.push(d), this.noteEntries.push(d);
-      }), this.renderRest(o, i), i.setAttribute("transform", `translate(${this.noteCursorX}, 0)`), this.noteCursorX += c, this.currentBeatCount += a, r.push(i), this.noteEntries.push(i);
+      const d = this.checkAndFillBarWithRests(a);
+      d && d.forEach((c) => {
+        r.push(c), this.noteEntries.push(c);
+      }), this.renderRest(o, i), i.setAttribute("transform", `translate(${this.noteCursorX}, 0)`), this.noteCursorX += h, this.currentBeatCount += a, r.push(i), this.noteEntries.push(i);
     }
     this.rendererInstance.commitElementsToDOM(r, s);
   }
@@ -1097,13 +1111,15 @@ class Gt {
     if (this.currentBeatCount >= this.maxBeatCount)
       throw new Error("Max beat count reached. Can't add additional beamed note.");
     let s = "s";
-    e === "s" ? s = "s" : s = b(e), this.checkAndCreateNewBar();
-    const r = this.rendererInstance.getLayerByName("notes"), n = p[s], o = n * this.quarterNoteSpacing, i = this.options.topNumber - this.currentBeatCount % this.options.topNumber, a = Math.min(t, i / n), c = this.rendererInstance.createGroup("beamed-note");
-    c.setAttribute("transform", `translate(${this.noteCursorX}, 0)`);
-    let l = 0;
-    for (let d = 0; d < a; d++)
-      this.rendererInstance.drawGlyph("NOTE_HEAD_QUARTER", c, { xOffset: l }), this.drawStem(c, l), l += o, this.currentBeatCount += n;
-    this.renderBeamRect(l, o, c), e === "s" && this.renderBeamRect(l, o, c, Nt), this.noteCursorX += l, this.noteEntries.push(c), this.rendererInstance.commitElementsToDOM(c, r);
+    e === "s" ? s = "s" : s = v(e), this.checkAndCreateNewBar();
+    const r = this.rendererInstance.getLayer("notes");
+    if (!r) throw new Error("drawBeamedNotes Error: Failed to retrieve notes layer");
+    const n = I[s], o = n * this.quarterNoteSpacing, i = this.options.topNumber - this.currentBeatCount % this.options.topNumber, a = Math.min(t, i / n), h = this.rendererInstance.createGroup("beamed-note");
+    h.setAttribute("transform", `translate(${this.noteCursorX}, 0)`);
+    let d = 0;
+    for (let c = 0; c < a; c++)
+      this.rendererInstance.drawGlyph("NOTE_HEAD_QUARTER", h, { xOffset: d }), this.drawStem(h, d), d += o, this.currentBeatCount += n;
+    this.renderBeamRect(d, o, h), e === "s" && this.renderBeamRect(d, o, h, Nt), this.noteCursorX += d, this.noteEntries.push(h), this.rendererInstance.commitElementsToDOM(h, r);
   }
   /**
    * Will increment the UI showing the current beat in quarters. Once exceeded, must be reset with `resetCurrentBeatUI()`
@@ -1114,21 +1130,21 @@ class Gt {
       this.currentBeatUIElement.setAttribute("display", "none");
       return;
     }
-    this.currentBeatUIElement?.getAttribute("display") === "none" && this.currentBeatUIElement.removeAttribute("display"), this.currentBeatUICount++, this.currentBeatUICount > this.options.topNumber && this.currentBeatUICount % this.options.topNumber === 1 && (this.currentBeatUIXPos += F), this.currentBeatUICount > 1 && (this.currentBeatUIXPos += this.quarterNoteSpacing), this.currentBeatUIElement.setAttribute("x", this.currentBeatUIXPos.toString());
+    this.currentBeatUIElement?.getAttribute("display") === "none" && this.currentBeatUIElement.removeAttribute("display"), this.currentBeatUICount++, this.currentBeatUICount > this.options.topNumber && this.currentBeatUICount % this.options.topNumber === 1 && (this.currentBeatUIXPos += D), this.currentBeatUICount > 1 && (this.currentBeatUIXPos += this.quarterNoteSpacing), this.currentBeatUIElement.setAttribute("x", this.currentBeatUIXPos.toString());
   }
   /**
    * Resets the ui showing the current beat value.
    * @returns void
   */
   resetCurrentBeatUI() {
-    this.currentBeatUICount = 0, this.currentBeatUIXPos = D, this.currentBeatUIElement && (this.currentBeatUIElement.setAttribute("display", "none"), this.currentBeatUIElement.setAttribute("x", this.currentBeatUIXPos.toString()));
+    this.currentBeatUICount = 0, this.currentBeatUIXPos = H, this.currentBeatUIElement && (this.currentBeatUIElement.setAttribute("display", "none"), this.currentBeatUIElement.setAttribute("x", this.currentBeatUIXPos.toString()));
   }
   /**
    * Clears staff of notes and resets internal positioning.
    * @returns void
   */
   clearAllNotes() {
-    this.noteCursorX = 0, this.currentBeatCount = 0, this.rendererInstance.getLayerByName("notes").replaceChildren(), this.noteEntries = [];
+    this.noteCursorX = 0, this.currentBeatCount = 0, this.rendererInstance.getLayer("notes")?.replaceChildren(), this.noteEntries = [];
   }
   /**
    * Removes the root svg element and cleans up arrays.
@@ -1152,8 +1168,8 @@ const Rt = [
   "ACCIDENTAL_NATURAL",
   "ACCIDENTAL_DOUBLE_SHARP",
   "ACCIDENTAL_DOUBLE_FLAT"
-], y = 60, yt = y;
-class vt {
+], y = 60, wt = y;
+class Gt {
   svgRendererInstance;
   strategyInstance;
   noteRendererInstance;
@@ -1177,46 +1193,45 @@ class vt {
       staffType: "treble",
       spaceAbove: 0,
       spaceBelow: 0,
-      staffColor: "black",
-      staffBackgroundColor: "transparent",
+      svgAutoFill: !0,
       ...t
-    }, this.svgRendererInstance = new w(e, {
+    }, this.svgRendererInstance = new O(e, {
       width: this.options.width,
       height: 100,
       scale: this.options.scale,
-      staffColor: this.options.staffColor,
-      staffBackgroundColor: this.options.staffBackgroundColor,
-      useGlyphs: Rt
+      useGlyphs: Rt,
+      svgAutoFill: this.options.svgAutoFill
     });
     const s = this.svgRendererInstance.rootSvgElement;
     switch (this.options.staffType) {
       case "grand":
-        this.strategyInstance = new ot(this.svgRendererInstance, "grand");
+        this.strategyInstance = new nt(this.svgRendererInstance, "grand");
         break;
       case "bass":
-        this.strategyInstance = new m(this.svgRendererInstance, "bass");
+        this.strategyInstance = new S(this.svgRendererInstance, "bass");
         break;
       case "treble":
-        this.strategyInstance = new m(this.svgRendererInstance, "treble");
+        this.strategyInstance = new S(this.svgRendererInstance, "treble");
         break;
       case "alto":
-        this.strategyInstance = new m(this.svgRendererInstance, "alto");
+        this.strategyInstance = new S(this.svgRendererInstance, "alto");
         break;
       default:
         throw new Error(`The staff type ${this.options.staffType} is not supported. Please use "treble", "bass", "alto", or "grand".`);
     }
-    if (this.strategyInstance.drawStaff(this.options.width), this.noteRendererInstance = new it(this.svgRendererInstance, this.strategyInstance), this.options.spaceAbove) {
-      const r = this.options.spaceAbove * 10;
-      this.svgRendererInstance.addTotalRootSvgYOffset(r);
+    if (this.strategyInstance.drawStaff(this.options.width), this.noteRendererInstance = new ot(this.svgRendererInstance, this.strategyInstance), this.options.spaceAbove) {
+      const n = this.options.spaceAbove * 10;
+      this.svgRendererInstance.addTotalRootSvgYOffset(n);
     }
     if (this.options.spaceBelow) {
-      let r = this.options.spaceBelow * 10;
-      this.options.staffType === "grand" && (r -= 10 / 2), this.svgRendererInstance.addTotalRootSvgHeight(r);
+      let n = this.options.spaceBelow * 10;
+      this.options.staffType === "grand" && (n -= 10 / 2), this.svgRendererInstance.addTotalRootSvgHeight(n);
     }
-    this.notesLayer = this.svgRendererInstance.getLayerByName("notes"), this.notesLayer.classList.add("vs-scrolling-notes-layer"), this.noteStartX = 38 + this.options.noteStartX, this.svgRendererInstance.getLayerByName("notes").setAttribute("transform", `translate(${this.noteStartX}, 0)`), this.svgRendererInstance.applySizingToRootSvg(), this.svgRendererInstance.commitElementsToDOM(s);
+    const r = this.svgRendererInstance.createLayer("notes");
+    this.notesLayer = r, r.classList.add("vs-scrolling-notes-layer"), this.noteStartX = 38 + this.options.noteStartX, r.setAttribute("transform", `translate(${this.noteStartX}, 0)`), this.svgRendererInstance.applySizingToRootSvg(), this.svgRendererInstance.commitElementsToDOM(s);
   }
   renderFirstNoteGroups() {
-    const e = this.options.width - this.options.noteStartX + yt;
+    const e = this.options.width - this.options.noteStartX + wt;
     for (; this.noteBuffer.length > 0 && this.noteCursorX < e; )
       this.renderNextNote(), this.noteCursorX += y;
     this.activeEntries.length > 1 && (this.noteCursorX -= y);
@@ -1298,29 +1313,29 @@ class vt {
     this.svgRendererInstance.destroy(), this.activeEntries = [], this.noteBuffer = [];
   }
 }
-const wt = /^[xX\da-zA-Z]+$/, Ot = /^[\d]+$/;
-function et(h, e) {
+const yt = /^[xX\da-zA-Z]+$/, Ot = /^[\d]+$/;
+function tt(l, e) {
   const t = [];
-  for (let s = 0; s < h.length; s++)
+  for (let s = 0; s < l.length; s++)
     t.push({
-      fret: h[s],
+      fret: l[s],
       finger: e[s]
     });
   return t;
 }
-function st(h, e) {
-  const t = h.filter((n) => n.toLowerCase() !== "x" && n !== "0").map((n) => parseInt(n, 36));
+function et(l, e) {
+  const t = l.filter((n) => n.toLowerCase() !== "x" && n !== "0").map((n) => parseInt(n, 36));
   if (t.length === 0) return 1;
   const s = Math.min(...t);
   return Math.max(...t) <= e ? 1 : s;
 }
-function H(h) {
-  if (!wt.test(h)) throw new Error("Invalid frets string. Only 'x', 'X', and digits are allowed.");
-  return h.split("");
+function P(l) {
+  if (!yt.test(l)) throw new Error("Invalid frets string. Only 'x', 'X', and digits are allowed.");
+  return l.split("");
 }
-function B(h) {
-  if (!Ot.test(h)) throw new Error("Invalid fingers string. Only digits are allowed.");
-  return h.split("");
+function B(l) {
+  if (!Ot.test(l)) throw new Error("Invalid fingers string. Only digits are allowed.");
+  return l.split("");
 }
 class Ft {
   svgRendererInstance;
@@ -1341,23 +1356,22 @@ class Ft {
   */
   constructor(e, t) {
     if (this.options = {
-      stringCount: at,
-      fretCount: ct,
+      stringCount: it,
+      fretCount: at,
       stringLabels: [],
       inlineChordsAmount: 2,
+      centerChords: !0,
       scale: 1,
-      color: "black",
-      backgroundColor: "transparent",
+      svgAutoFill: !0,
       ...t
-    }, this.diagramWidth = (this.options.stringCount - 1) * _, this.diagramHeight = this.options.fretCount * T, this.gridTopY = Z + W, this.rowHeight = this.gridTopY + this.diagramHeight + $, t?.width ? this.options.width = t.width : this.options.width = (this.diagramWidth + M) * this.options.inlineChordsAmount, this.options.stringLabels.length >= 1 && (this.rowHeight += lt + ht), this.diagramWidth > this.options.width)
+    }, this.diagramWidth = (this.options.stringCount - 1) * T, this.diagramHeight = this.options.fretCount * m, this.gridTopY = k + W, this.rowHeight = this.gridTopY + this.diagramHeight + $, t?.width ? this.options.width = t.width : this.options.width = (this.diagramWidth + L) * this.options.inlineChordsAmount, this.options.stringLabels.length >= 1 && (this.rowHeight += ht + ct), this.diagramWidth > this.options.width)
       throw new Error(`The configured width (${this.options.width}) is too small to fit a single ${this.options.stringCount}-string diagram (needs at least ${this.diagramWidth}). Increase 'width'.`);
-    this.svgRendererInstance = new w(e, {
+    this.svgRendererInstance = new O(e, {
       width: this.options.width,
       height: 100,
       scale: this.options.scale,
-      staffColor: this.options.color,
-      staffBackgroundColor: this.options.backgroundColor,
-      useGlyphs: []
+      useGlyphs: [],
+      svgAutoFill: this.options.svgAutoFill
     });
     const s = this.svgRendererInstance.rootSvgElement;
     this.svgRendererInstance.setTotalRootSvgHeight(this.rowHeight), this.svgRendererInstance.applySizingToRootSvg(), this.svgRendererInstance.commitElementsToDOM(s);
@@ -1373,30 +1387,33 @@ class Ft {
   drawFretDots(e, t, s, r, n) {
     const o = this.gridTopY - W / 2;
     for (let i = 0; i < this.options.stringCount; i++) {
-      const a = i * _, c = e[i].toLowerCase(), l = t[i];
-      if (c === "x")
-        this.svgRendererInstance.drawLine(a - g, o - g, a + g, o + g, n), this.svgRendererInstance.drawLine(a - g, o + g, a + g, o - g, n);
-      else if (c === "0")
-        this.svgRendererInstance.drawCircle(a, o, g, n, { filled: !1 });
+      const a = i * T, h = e[i].toLowerCase(), d = t[i], c = this.svgRendererInstance.createGroup("");
+      if (h === "x")
+        c.classList.add("vs-guitar-fret-muted"), c.setAttribute("transform", `translate(${a}, ${o})`), this.svgRendererInstance.drawLine(-A, -A, A, A, c, {
+          strokeWidth: 1.5
+        }), this.svgRendererInstance.drawLine(-A, A, A, -A, c, {
+          strokeWidth: 1.5
+        });
+      else if (h === "0")
+        c.classList.add("vs-guitar-fret-open"), c.setAttribute("transform", `translate(${a}, ${o})`), this.svgRendererInstance.drawCircle(0, 0, A, c, { filled: !1 });
       else {
-        const d = parseInt(c, 36);
-        if (r.has(`${i}-${d}`))
+        const f = parseInt(h, 36);
+        if (r.has(`${i}-${f}`))
           continue;
-        const f = d - s + 1;
-        if (f < 1 || f > this.options.fretCount)
-          throw new Error(`Fret ${c} on string ${i + 1} is outside the visible range (${s}-${s + this.options.fretCount - 1}). Adjust 'startFret' or 'fretCount'.`);
-        const C = this.gridTopY + (f - 0.5) * T;
-        if (this.svgRendererInstance.drawCircle(a, C, u, n, {
-          classes: "guitar-fret-dot"
-        }), l !== "0") {
-          const E = this.options.backgroundColor === "transparent" ? "white" : this.options.backgroundColor;
-          this.svgRendererInstance.drawText(l, a, C + S / 3, n, {
-            fontSize: S,
-            fill: E,
-            classes: "guitar-text-small"
-          });
-        }
+        c.classList.add("vs-guitar-fret-dot");
+        const E = f - s + 1;
+        if (E < 1 || E > this.options.fretCount)
+          throw new Error(`Fret ${h} on string ${i + 1} is outside the visible range (${s}-${s + this.options.fretCount - 1}). Adjust 'startFret' or 'fretCount'.`);
+        const g = this.gridTopY + (E - 0.5) * m;
+        c.setAttribute("transform", `translate(${a}, ${g})`), this.svgRendererInstance.drawCircle(0, 0, u, c, {
+          classes: "guitar-fret-circle"
+        }), d !== "0" && this.svgRendererInstance.drawText(d, 0, -1, c, {
+          fontSize: R,
+          baseline: "central",
+          classes: ["guitar-text", "guitar-fret-text"]
+        });
       }
+      n.appendChild(c);
     }
   }
   drawStringLabels(e, t) {
@@ -1405,10 +1422,11 @@ class Ft {
     for (let n = 0; n < this.options.stringCount; n++) {
       const o = t[n];
       if (!o) continue;
-      const i = n * _, a = r + s / 2;
-      this.svgRendererInstance.drawText(o, i, a, e, {
-        fontSize: S,
-        classes: "guitar-text-small"
+      const i = n * T;
+      this.svgRendererInstance.drawText(o, i, r, e, {
+        fontSize: R,
+        baseline: "central",
+        classes: "guitar-text"
       });
     }
   }
@@ -1419,69 +1437,82 @@ class Ft {
       throw new Error(`Barre fret error: Invalid string range ${t.fromIndex + 1}:${t.toIndex + 1}.`);
     if (s < t.startingFret || s > t.startingFret + (this.options.fretCount - 1))
       throw new Error(`Barre fret error: ${t.fret} is outside the visible range.`);
-    const r = s - t.startingFret, n = t.fromIndex * _, o = t.toIndex * _, i = u * 2, a = o - n + i, c = this.gridTopY + u / 2 + T * r, l = this.gridTopY + T * r + u * 2;
-    if (this.svgRendererInstance.drawRect(a, i, e, {
-      x: n - u,
-      y: c,
+    const r = this.svgRendererInstance.createGroup("guitar-group-barre"), n = s - t.startingFret, o = t.fromIndex * T, i = t.toIndex * T, a = u * 2, h = i - o + a, d = this.gridTopY + m * n;
+    r.setAttribute("transform", `translate(0, ${d})`), this.svgRendererInstance.drawRect(h, a, r, {
+      x: o - u,
+      y: u / 2,
       rx: u,
       classes: "guitar-barre"
-    }), t.finger) {
-      const d = this.options.backgroundColor === "transparent" ? "white" : this.options.backgroundColor;
-      this.svgRendererInstance.drawText(t.finger.toString(), (n + o) / 2, l, e, {
-        fontSize: S,
-        fill: d,
-        classes: "guitar-text-small"
-      });
-    }
+    }), t.finger && this.svgRendererInstance.drawText(t.finger.toString(), (o + i) / 2, u * 1.5 - 1, r, {
+      fontSize: R,
+      baseline: "central",
+      classes: ["guitar-text", "guitar-fret-text"]
+    }), e.appendChild(r);
   }
   // Builds a single chord diagram's group element: grid, nut/fret-position label, and per-string markers.
   renderChordDiagram(e, t, s) {
     const r = this.svgRendererInstance.createGroup("chord"), n = s?.startFret ?? 1;
-    s?.label && this.svgRendererInstance.drawText(s.label, this.diagramWidth / 2, Z - 5, r, {
-      fontSize: rt,
+    s?.label && this.svgRendererInstance.drawText(s.label, this.diagramWidth / 2, k - 5, r, {
+      fontSize: st,
       fontWeight: "bold",
-      classes: "guitar-text-base"
-    });
-    for (let i = 0; i <= this.options.fretCount; i++) {
-      const a = this.gridTopY + i * T;
-      i === 0 && n === 1 ? this.svgRendererInstance.drawRect(this.diagramWidth + k * 2, P, r, {
-        x: -k,
-        y: a - P / 2
-      }) : this.svgRendererInstance.drawLine(0, a, this.diagramWidth, a, r);
-    }
-    n > 1 && this.svgRendererInstance.drawText(`${n}fr`, this.diagramWidth + u + ut, this.gridTopY + T / 2 + 4, r, {
+      classes: ["guitar-text", "guitar-diagram-label"]
+    }), n > 1 && this.svgRendererInstance.drawText(`${n}fr`, this.diagramWidth + u + Et, this.gridTopY + m / 2 + 4, r, {
       anchor: "start",
-      fontSize: S,
+      fontSize: R,
       fontWeight: "bold",
-      classes: "guitar-text-small"
+      classes: ["guitar-text", "guitar-fret-label"]
     });
-    for (let i = 0; i < this.options.stringCount; i++) {
-      const a = i * _;
-      this.svgRendererInstance.drawLine(a, this.gridTopY, a, this.gridTopY + this.diagramHeight, r);
+    const o = this.svgRendererInstance.createGroup("guitar-group-fret-lines");
+    for (let c = 0; c <= this.options.fretCount; c++) {
+      const f = this.gridTopY + c * m;
+      c === 0 && n === 1 ? this.svgRendererInstance.drawRect(this.diagramWidth + ft, x, o, {
+        x: -0.5,
+        y: f - x / 2
+      }) : this.svgRendererInstance.drawLine(0, f, this.diagramWidth, f, o);
     }
-    const o = this.getDotsToHide(s?.barres);
-    return this.drawFretDots(e, t, n, o, r), this.options.stringLabels.length >= 1 && this.drawStringLabels(r, this.options.stringLabels), s?.barres?.forEach((i) => {
-      this.drawBarre(r, {
-        fromIndex: i.fromString - 1,
-        toIndex: i.toString - 1,
-        fret: i.fret,
-        finger: i.finger,
+    r.appendChild(o);
+    const i = this.svgRendererInstance.createGroup("guitar-group-string-lines");
+    for (let c = 0; c < this.options.stringCount; c++) {
+      const f = c * T;
+      this.svgRendererInstance.drawLine(f, this.gridTopY, f, this.gridTopY + this.diagramHeight, i);
+    }
+    r.appendChild(i);
+    const a = this.svgRendererInstance.createGroup("guitar-group-fret-dots"), h = this.getDotsToHide(s?.barres);
+    this.drawFretDots(e, t, n, h, a), s?.barres?.forEach((c) => {
+      this.drawBarre(a, {
+        fromIndex: c.fromString - 1,
+        toIndex: c.toString - 1,
+        fret: c.fret,
+        finger: c.finger,
         startingFret: n
       });
-    }), r;
+    }), r.appendChild(a);
+    const d = this.svgRendererInstance.createGroup("guitar-group-string-labels");
+    return this.options.stringLabels.length >= 1 && this.drawStringLabels(d, this.options.stringLabels), r.appendChild(d), r;
   }
   // Repositions every existing chord diagram from scratch, in order, wrapping rows as needed.
-  // Called after any add/remove/change so the layout never has to track incremental deltas.
+  // Called after any add/remove/change so the layout never has to track pos.
   relayoutChords() {
-    if (this.cursorX = u, this.cursorY = ft, this.chordEntries.length === 1) {
-      const t = this.chordEntries[0];
-      this.cursorX = this.options.width / 2 - this.diagramWidth / 2, t.xPos = this.cursorX, t.yPos = this.cursorY, t.gElement.setAttribute("transform", `translate(${this.cursorX}, ${this.cursorY})`);
-    } else
-      this.chordEntries.forEach((t, s) => {
-        s > 0 && this.cursorX + this.diagramWidth > this.options.width && (this.cursorX = u, this.cursorY += this.rowHeight + dt), t.xPos = this.cursorX, t.yPos = this.cursorY, t.gElement.setAttribute("transform", `translate(${this.cursorX}, ${this.cursorY})`), this.cursorX += this.diagramWidth + M;
+    if (this.chordEntries.length === 0) {
+      this.svgRendererInstance.setTotalRootSvgHeight(0), this.svgRendererInstance.applySizingToRootSvg();
+      return;
+    }
+    const e = [];
+    let t = [], s = u;
+    this.chordEntries.forEach((n, o) => {
+      o > 0 && s + this.diagramWidth > this.options.width && (e.push(t), t = [], s = u), t.push(n), s += this.diagramWidth + L;
+    }), t.length > 0 && e.push(t), this.cursorY = dt, e.forEach((n, o) => {
+      if (o > 0 && (this.cursorY += this.rowHeight + lt), this.options.centerChords) {
+        const i = n.length * this.diagramWidth + (n.length - 1) * L, a = this.options.width / 2 - i / 2 - 16;
+        this.cursorX = a;
+      } else
+        this.cursorX = u;
+      n.forEach((i) => {
+        i.xPos = this.cursorX, i.yPos = this.cursorY, i.gElement.setAttribute("transform", `translate(${this.cursorX}, ${this.cursorY})`), this.cursorX += this.diagramWidth + L;
       });
-    const e = this.cursorY + this.rowHeight;
-    this.svgRendererInstance.setTotalRootSvgHeight(e), this.svgRendererInstance.applySizingToRootSvg();
+    });
+    const r = this.cursorY + this.rowHeight;
+    this.svgRendererInstance.setTotalRootSvgHeight(r), this.svgRendererInstance.applySizingToRootSvg();
   }
   /**
    * Adds a new chord diagram. Diagrams are placed left-to-right in the order added, wrapping to a
@@ -1507,14 +1538,14 @@ class Ft {
    * guitarChord.addChord("x32010", "032010", { label: "C" });
   */
   addChord(e, t, s) {
-    const r = H(e), n = B(t);
+    const r = P(e), n = B(t);
     if (r.length !== this.options.stringCount) throw new Error("Invalid number of frets provided, entries should be equal to number of strings in diagram.");
     if (n.length !== this.options.stringCount) throw new Error("Invalid number of fingers provided, entries should be equal to number of strings in diagram.");
-    const o = s?.startFret ?? st(r, this.options.fretCount), i = s?.label, a = s?.barres, c = { startFret: o, label: i, barres: a }, l = this.renderChordDiagram(r, n, c), d = this.svgRendererInstance.getLayerByName("notes");
-    return this.svgRendererInstance.commitElementsToDOM(l, d), this.chordEntries.push({
-      gElement: l,
-      strings: et(r, n),
-      ...c,
+    const o = s?.startFret ?? et(r, this.options.fretCount), i = s?.label, a = s?.barres, h = { startFret: o, label: i, barres: a }, d = this.renderChordDiagram(r, n, h), c = this.svgRendererInstance.parentGroupElement;
+    return this.svgRendererInstance.commitElementsToDOM(d, c), this.chordEntries.push({
+      gElement: d,
+      strings: tt(r, n),
+      ...h,
       xPos: 0,
       yPos: 0
     }), this.relayoutChords(), this.chordEntries.length - 1;
@@ -1545,14 +1576,14 @@ class Ft {
   */
   modifyChordByIndex(e, t, s, r) {
     if (s >= this.chordEntries.length || s < 0) throw new Error("Chord index was out of bounds.");
-    const n = H(e), o = B(t);
+    const n = P(e), o = B(t);
     if (n.length !== this.options.stringCount) throw new Error("Invalid number of frets provided, entries should be equal to number of strings in diagram.");
     if (o.length !== this.options.stringCount) throw new Error("Invalid number of fingers provided, entries should be equal to number of strings in diagram.");
-    const i = this.chordEntries[s], a = r && "label" in r ? r.label === "" ? void 0 : r.label : i.label, c = r?.startFret ?? st(n, this.options.fretCount), l = { ...r, label: a, startFret: c }, d = this.renderChordDiagram(n, o, l);
-    this.svgRendererInstance.getLayerByName("notes").replaceChild(d, i.gElement), this.chordEntries[s] = {
-      gElement: d,
-      strings: et(n, o),
-      ...l,
+    const i = this.chordEntries[s], a = r && "label" in r ? r.label === "" ? void 0 : r.label : i.label, h = r?.startFret ?? et(n, this.options.fretCount), d = { ...r, label: a, startFret: h }, c = this.renderChordDiagram(n, o, d);
+    this.svgRendererInstance.parentGroupElement.replaceChild(c, i.gElement), this.chordEntries[s] = {
+      gElement: c,
+      strings: tt(n, o),
+      ...d,
       xPos: i.xPos,
       yPos: i.yPos
     }, this.relayoutChords();
@@ -1572,7 +1603,7 @@ class Ft {
    * @returns void
   */
   clearAllChords() {
-    this.svgRendererInstance.getLayerByName("notes").replaceChildren(), this.chordEntries = [], this.cursorX = 0, this.cursorY = 0, this.svgRendererInstance.setTotalRootSvgHeight(this.rowHeight), this.svgRendererInstance.applySizingToRootSvg();
+    this.svgRendererInstance.parentGroupElement.replaceChildren(), this.chordEntries = [], this.cursorX = 0, this.cursorY = 0, this.svgRendererInstance.setTotalRootSvgHeight(this.rowHeight), this.svgRendererInstance.applySizingToRootSvg();
   }
   /**
    * * Used to automatically determine options for creating barre lines.
@@ -1580,25 +1611,25 @@ class Ft {
    * @returns GuitarBarreDef[]
   */
   determineBarreOptions(e, t, s) {
-    const r = H(e), n = B(t), o = [];
+    const r = P(e), n = B(t), o = [];
     return s.forEach((i) => {
       if (i === 0) return;
-      const a = [], c = {};
-      for (let E = 0; E < r.length; E++) {
-        if (r[E].toLowerCase() === "x") continue;
-        const L = parseInt(r[E], 36), O = Number(n[E]);
-        L === i && (c[O] ? c[O] += 1 : c[O] = 1, a.push(E + 1));
+      const a = [], h = {};
+      for (let g = 0; g < r.length; g++) {
+        if (r[g].toLowerCase() === "x") continue;
+        const N = parseInt(r[g], 36), b = Number(n[g]);
+        N === i && (h[b] ? h[b] += 1 : h[b] = 1, a.push(g + 1));
       }
       a.sort();
-      let l = 0, d = 0;
-      for (const [E, L] of Object.entries(c))
-        L > d && (d = L, l = Number(E));
-      const f = a[0], C = a.at(-1);
-      a.length > 1 && C && o.push({
+      let d = 0, c = 0;
+      for (const [g, N] of Object.entries(h))
+        N > c && (c = N, d = Number(g));
+      const f = a[0], E = a.at(-1);
+      a.length > 1 && E && o.push({
         fret: i,
         fromString: f,
-        toString: C,
-        finger: l
+        toString: E,
+        finger: d
       });
     }), o;
   }
@@ -1613,6 +1644,6 @@ class Ft {
 export {
   Ft as GuitarChord,
   bt as MusicStaff,
-  Gt as RhythmStaff,
-  vt as ScrollingStaff
+  vt as RhythmStaff,
+  Gt as ScrollingStaff
 };