vector-score 1.1.0 → 1.2.0

package/dist/vector-score.js

@@ -1,4 +1,4 @@
-const I = {
+const S = {
   treble: {
     staffType: "treble",
     paddingTop: 13,
@@ -31,16 +31,16 @@ const I = {
     topLineYPos: 0,
     bottomLineYPos: 110
   }
-}, E = {
+}, p = {
   w: 4,
   h: 2,
   q: 1,
   e: 0.5,
   s: 0.25
-}, w = 8, M = 40, X = {
+}, st = 6, rt = 5, I = 22, T = 30, E = 10, f = 6, nt = 4, ot = E * 2, it = 40, at = 16, X = 1, F = 4, U = 1, Y = f * 2 + F + 4, D = 16, C = 14, ct = 14, M = D, ht = E + 2, $ = 8, lt = 40, J = {
   sharp: ["F", "C", "G", "D", "A", "E", "B"],
   flat: ["B", "E", "A", "D", "G", "C", "F"]
-}, G = {
+}, k = {
   C: { type: "sharp", count: 0 },
   G: { type: "sharp", count: 1 },
   D: { type: "sharp", count: 2 },
@@ -54,7 +54,7 @@ const I = {
   Ab: { type: "flat", count: 4 },
   Db: { type: "flat", count: 5 },
   Gb: { type: "flat", count: 6 }
-}, L = {
+}, B = {
   treble: {
     sharp: [5, 5, 5, 5, 4, 5, 4],
     // F5 C5 G5 D5 A4 E5 B4
@@ -75,22 +75,22 @@ const I = {
   },
   grand: { sharp: [], flat: [] }
 };
-function Y(h) {
-  const e = G[h];
-  if (!e) throw new Error(`Unknown key signature "${h}". Valid keys: ${Object.keys(G).join(", ")}`);
+function dt(h) {
+  const e = k[h];
+  if (!e) throw new Error(`Unknown key signature "${h}". Valid keys: ${Object.keys(k).join(", ")}`);
   return e;
 }
-function k(h, e, t, s) {
-  const r = Y(t);
+function ft(h, e, t, s) {
+  const r = dt(t);
   if (r.count === 0) return 0;
-  const n = r.type === "sharp" ? "ACCIDENTAL_SHARP" : "ACCIDENTAL_FLAT", o = h.getLayerByName("staff");
-  return e.getKeySignatureYPositions(r.type, r.count).forEach((i) => {
-    i.forEach((c, l) => {
-      h.drawGlyph(n, o, { xOffset: s + l * w, yOffset: c });
+  const o = r.type === "sharp" ? "ACCIDENTAL_SHARP" : "ACCIDENTAL_FLAT", n = h.getLayerByName("staff");
+  return e.getKeySignatureYPositions(r.type, r.count).forEach((a) => {
+    a.forEach((c, l) => {
+      h.drawGlyph(o, n, { xOffset: s + l * $, yOffset: c });
     });
-  }), r.count * w;
+  }), r.count * $;
 }
-const $ = {
+const Et = {
   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,26 +186,26 @@ const $ = {
     xOffset: 0,
     yOffset: 0
   }
-}, W = /^(?<name>[A-Ga-g])(?<accidental>##|bb|[#bn]?)(?<octave>\d)(?<duration>[whqeWHQE]?)$/, Z = /^[whqeWHQE]$/, y = ["C", "D", "E", "F", "G", "A", "B"];
-function O(h) {
-  const e = h.match(W);
+}, ut = /^(?<name>[A-Ga-g])(?<accidental>##|bb|[#bn]?)(?<octave>\d)(?<duration>[whqeWHQE]?)$/, gt = /^[whqeWHQE]$/, H = ["C", "D", "E", "F", "G", "A", "B"];
+function P(h) {
+  const e = h.match(ut);
   if (!e || !e.groups)
     throw new Error(`Invalid note string format: ${h}. 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 = {
+  let { name: t, accidental: s, octave: r, duration: o } = e.groups;
+  t = t.toUpperCase(), o = o.toLowerCase(), o || (o = "w");
+  const n = {
     name: t,
     octave: parseInt(r),
-    duration: n
+    duration: o
   };
-  return s && (o.accidental = s), o;
+  return s && (n.accidental = s), n;
 }
-function N(h) {
-  const e = h.match(Z);
+function R(h) {
+  const e = h.match(gt);
   if (!e) throw new Error(`Invalid note duration '${h}'. Use w | h | q | e.`);
   return e[0].toString().toLowerCase();
 }
-function R(h) {
+function x(h) {
   let e;
   switch (h) {
     case "treble":
@@ -221,22 +221,22 @@ function R(h) {
   if (!e) throw new Error(`Invalid clef type: ${h}. Valid clef types are: treble, bass, alto.`);
   return e;
 }
-function F(h) {
-  let e = y.indexOf(h.name);
+function W(h) {
+  let e = H.indexOf(h.name);
   return e += h.octave * 12, e;
 }
-function _(h, e) {
-  return y.indexOf(h.name) - y.indexOf(e.name) + (h.octave - e.octave) * 7;
+function m(h, e) {
+  return H.indexOf(h.name) - H.indexOf(e.name) + (h.octave - e.octave) * 7;
 }
-const C = 48, v = 40 + 30 / 2, D = 20, B = 90;
-class x {
+const y = 48, Z = 40 + 30 / 2, V = 20, q = 90;
+class tt {
   params;
   rendererRef;
   width = 0;
   trebleStaffHeight = 0;
   constructor(e, t) {
     this.rendererRef = e;
-    const s = I[t];
+    const s = S[t];
     if (!s) throw new Error(`Staff type ${t} is not supported`);
     this.params = s;
   }
@@ -251,106 +251,106 @@ class x {
     const t = this.rendererRef.getLayerByName("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 a = R("treble"), i = R("bass");
-    this.rendererRef.drawGlyph(a, t), this.rendererRef.drawGlyph(i, t, { yOffset: s + 30 }), n += this.params.paddingBottom + 1, o += this.params.paddingTop, this.rendererRef.addTotalRootSvgHeight(n), this.rendererRef.addTotalRootSvgYOffset(o);
+    let o = r, n = 1;
+    const i = x("treble"), a = x("bass");
+    this.rendererRef.drawGlyph(i, t), this.rendererRef.drawGlyph(a, t, { yOffset: s + 30 }), o += this.params.paddingBottom + 1, n += this.params.paddingTop, this.rendererRef.addTotalRootSvgHeight(o), this.rendererRef.addTotalRootSvgYOffset(n);
   };
   shouldNoteFlip(e) {
-    const t = Math.abs(e - B), s = Math.abs(e - D);
-    return e === v ? !1 : t <= s ? !(e >= B) : e <= D;
+    const t = Math.abs(e - q), s = Math.abs(e - V);
+    return e === Z ? !1 : t <= s ? !(e >= q) : e <= V;
   }
   getLedgerLinesX(e, t) {
-    const s = [], r = F(e);
-    let n = e.duration === "w" ? 17 : 12.5;
-    if (r === C)
-      return s.push({ x1: -2, x2: n, yPos: 0 }), s;
+    const s = [], r = W(e);
+    let o = e.duration === "w" ? 17 : 12.5;
+    if (r === y)
+      return s.push({ x1: -2, x2: o, yPos: 0 }), s;
     if (t < this.params.topLineYPos) {
-      let o = this.params.topLineYPos - 10;
-      for (; o >= t; )
+      let n = this.params.topLineYPos - 10;
+      for (; n >= t; )
         s.push({
           x1: -2,
-          x2: n,
-          yPos: o - t
-        }), o -= 10;
+          x2: o,
+          yPos: n - t
+        }), n -= 10;
     } else if (t > this.params.bottomLineYPos) {
-      let o = this.params.bottomLineYPos + 10;
-      for (; o <= t; )
+      let n = this.params.bottomLineYPos + 10;
+      for (; n <= t; )
         s.push({
           x1: -2,
-          x2: n,
-          yPos: o - t
-        }), o += 10;
+          x2: o,
+          yPos: n - t
+        }), n += 10;
     }
     return s;
   }
   calculateNoteYPos = (e) => {
-    let s = _(this.params.topLineNote, e) * (10 / 2);
-    const r = F(e);
-    return r < C ? s += 10 : r === C && (s = v), s;
+    let s = m(this.params.topLineNote, e) * (10 / 2);
+    const r = W(e);
+    return r < y ? s += 10 : r === y && (s = Z), s;
   };
   getKeySignatureYPositions(e, t) {
-    const s = X[e].slice(0, t), r = L.treble[e], n = L.bass[e], o = s.map(
-      (i, c) => _(I.treble.topLineNote, { name: i, octave: r[c] }) * (10 / 2)
-    ), a = s.map(
-      (i, c) => _(I.bass.topLineNote, { name: i, octave: n[c] }) * (10 / 2) + this.trebleStaffHeight + 30
+    const s = J[e].slice(0, t), r = B.treble[e], o = B.bass[e], n = s.map(
+      (a, c) => m(S.treble.topLineNote, { name: a, octave: r[c] }) * (10 / 2)
+    ), i = s.map(
+      (a, c) => m(S.bass.topLineNote, { name: a, octave: o[c] }) * (10 / 2) + this.trebleStaffHeight + 30
     );
-    return [o, a];
+    return [n, i];
   }
 }
-const V = 20;
-class A {
+const pt = 20;
+class _ {
   params;
   rendererRef;
   constructor(e, t) {
     this.rendererRef = e;
-    const s = I[t];
+    const s = S[t];
     if (!s) throw new Error(`Staff type ${t} is not supported`);
     this.params = s;
   }
   drawStaff = (e) => {
     const t = this.rendererRef.getLayerByName("staff");
     let s = 0;
-    for (let a = 0; a < 5; a++)
+    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 = R(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);
+    let r = s - 10 + 1, o = 1;
+    const n = x(this.params.staffType);
+    this.rendererRef.drawGlyph(n, t), r += this.params.paddingTop + this.params.paddingBottom, o += this.params.paddingTop, this.rendererRef.addTotalRootSvgHeight(r), this.rendererRef.addTotalRootSvgYOffset(o);
   };
   shouldNoteFlip(e) {
-    return e <= V;
+    return e <= pt;
   }
   getLedgerLinesX(e, t) {
     const s = [];
     let r = e.duration === "w" ? 17 : 12.5;
     if (t < this.params.topLineYPos) {
-      let n = this.params.topLineYPos - 10;
-      for (; n >= t; )
+      let o = this.params.topLineYPos - 10;
+      for (; o >= t; )
         s.push({
           x1: -2,
           x2: r,
-          yPos: n - t
-        }), n -= 10;
+          yPos: o - t
+        }), o -= 10;
     } else if (t > this.params.bottomLineYPos) {
-      let n = this.params.bottomLineYPos + 10;
-      for (; n <= t; )
+      let o = this.params.bottomLineYPos + 10;
+      for (; o <= t; )
         s.push({
           x1: -2,
           x2: r,
-          yPos: n - t
-        }), n += 10;
+          yPos: o - t
+        }), o += 10;
     }
     return s;
   }
-  calculateNoteYPos = (e) => _(this.params.topLineNote, e) * (10 / 2);
+  calculateNoteYPos = (e) => m(this.params.topLineNote, e) * (10 / 2);
   getKeySignatureYPositions(e, t) {
-    const s = X[e].slice(0, t), r = L[this.params.staffType][e];
+    const s = J[e].slice(0, t), r = B[this.params.staffType][e];
     return [s.map(
-      (o, a) => this.calculateNoteYPos({ name: o, octave: r[a] })
+      (n, i) => this.calculateNoteYPos({ name: n, octave: r[i] })
     )];
   }
 }
-class U {
+class et {
   svgRendererInstance;
   strategyInstance;
   constructor(e, t) {
@@ -361,12 +361,12 @@ class U {
   }
   chordOffsetConsecutiveAccidentals(e) {
     let t = 0, s = 0, r = 0;
-    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 i = Array.from(o.noteGroup.getElementsByTagName("use")).find((c) => c.getAttribute("href")?.includes("ACCIDENTAL"));
-        if (!i) continue;
-        i.setAttribute("transform", `translate(${t + 8}, 0)`);
+    for (let o = 0; o < e.length; o++) {
+      const n = e[o];
+      if (n.noteObj.accidental && r < 3 ? (t += -8, s = Math.min(s, t), r++) : n.noteObj.accidental && r <= 3 ? (t = -8, r = 1) : (t = 0, r = 0), t !== 0) {
+        const a = Array.from(n.noteGroup.getElementsByTagName("use")).find((c) => c.getAttribute("href")?.includes("ACCIDENTAL"));
+        if (!a) continue;
+        a.setAttribute("transform", `translate(${t + 8}, 0)`);
       }
     }
     return -s;
@@ -374,94 +374,94 @@ class U {
   chordOffsetCloseNotes(e) {
     let t = e[0], s = 0;
     for (let r = 1; r < e.length; r++) {
-      const n = e[r];
-      if (-_(t.noteObj, n.noteObj) === 1) {
-        s = 28 / 2, n.noteGroup.setAttribute("transform", `translate(${s}, ${n.noteYPos})`);
-        const i = Array.from(n.noteGroup.getElementsByTagName("use")).find((c) => c.getAttribute("href")?.includes("ACCIDENTAL"));
-        if (i) {
-          const c = i.getAttribute("transform")?.match(/([-]?\d+)/), l = c && c[0];
-          let f = -s;
-          l && (f += Number(l)), i.setAttribute("transform", `translate(${f}, 0)`);
+      const o = e[r];
+      if (-m(t.noteObj, o.noteObj) === 1) {
+        s = 28 / 2, o.noteGroup.setAttribute("transform", `translate(${s}, ${o.noteYPos})`);
+        const a = Array.from(o.noteGroup.getElementsByTagName("use")).find((c) => c.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)`);
         }
         r++, t = e[r];
         continue;
       }
-      t = n;
+      t = o;
     }
     return s;
   }
   // Handles drawing the glyphs to internal group, applies the xPositioning to note Cursor X
   renderNote(e) {
-    const t = this.svgRendererInstance.createGroup("note"), s = O(e), r = this.strategyInstance.calculateNoteYPos({
+    const t = this.svgRendererInstance.createGroup("note"), s = P(e), r = this.strategyInstance.calculateNoteYPos({
       name: s.name,
       octave: s.octave
     });
-    let n = this.strategyInstance.shouldNoteFlip(r);
+    let o = this.strategyInstance.shouldNoteFlip(r);
     switch (s.duration) {
       case "h":
-        this.svgRendererInstance.drawGlyph("NOTE_HEAD_HALF", t), this.drawStem(t, n);
+        this.svgRendererInstance.drawGlyph("NOTE_HEAD_HALF", t), this.drawStem(t, o);
         break;
       case "q":
-        this.svgRendererInstance.drawGlyph("NOTE_HEAD_QUARTER", t), this.drawStem(t, n);
+        this.svgRendererInstance.drawGlyph("NOTE_HEAD_QUARTER", t), this.drawStem(t, o);
         break;
       case "e":
-        n ? this.svgRendererInstance.drawGlyph("EIGHTH_NOTE_FLIPPED", t) : this.svgRendererInstance.drawGlyph("EIGHTH_NOTE", t);
+        o ? this.svgRendererInstance.drawGlyph("EIGHTH_NOTE_FLIPPED", t) : this.svgRendererInstance.drawGlyph("EIGHTH_NOTE", t);
         break;
       default:
         this.svgRendererInstance.drawGlyph("NOTE_HEAD_WHOLE", t);
     }
-    let o = 0;
+    let n = 0;
     switch (s.accidental) {
       case "#":
-        this.svgRendererInstance.drawGlyph("ACCIDENTAL_SHARP", t), o -= -8;
+        this.svgRendererInstance.drawGlyph("ACCIDENTAL_SHARP", t), n -= -8;
         break;
       case "b":
-        this.svgRendererInstance.drawGlyph("ACCIDENTAL_FLAT", t), o -= -8;
+        this.svgRendererInstance.drawGlyph("ACCIDENTAL_FLAT", t), n -= -8;
         break;
       case "n":
-        this.svgRendererInstance.drawGlyph("ACCIDENTAL_NATURAL", t), o -= -8;
+        this.svgRendererInstance.drawGlyph("ACCIDENTAL_NATURAL", t), n -= -8;
         break;
       case "##":
-        this.svgRendererInstance.drawGlyph("ACCIDENTAL_DOUBLE_SHARP", t), o -= -10;
+        this.svgRendererInstance.drawGlyph("ACCIDENTAL_DOUBLE_SHARP", t), n -= -10;
         break;
       case "bb":
-        this.svgRendererInstance.drawGlyph("ACCIDENTAL_DOUBLE_FLAT", t), o -= -14;
+        this.svgRendererInstance.drawGlyph("ACCIDENTAL_DOUBLE_FLAT", t), n -= -14;
         break;
     }
-    return this.strategyInstance.getLedgerLinesX(s, r).forEach((i) => {
-      this.svgRendererInstance.drawLine(i.x1, i.yPos, i.x2, i.yPos, t);
+    return this.strategyInstance.getLedgerLinesX(s, r).forEach((a) => {
+      this.svgRendererInstance.drawLine(a.x1, a.yPos, a.x2, a.yPos, t);
     }), {
       noteGroup: t,
       noteObj: s,
       noteYPos: r,
-      accidentalOffset: o,
+      accidentalOffset: n,
       cursorOffset: 0
     };
   }
   renderChord(e) {
     const t = this.svgRendererInstance.createGroup("chord"), s = [];
-    for (const o of e) {
-      const a = this.renderNote(o);
-      a.noteGroup.setAttribute("transform", `translate(0, ${a.noteYPos})`), t.appendChild(a.noteGroup), s.push({
-        noteGroup: a.noteGroup,
-        noteObj: a.noteObj,
-        noteYPos: a.noteYPos,
+    for (const n of e) {
+      const i = this.renderNote(n);
+      i.noteGroup.setAttribute("transform", `translate(0, ${i.noteYPos})`), t.appendChild(i.noteGroup), s.push({
+        noteGroup: i.noteGroup,
+        noteObj: i.noteObj,
+        noteYPos: i.noteYPos,
         cursorOffset: 0,
         accidentalOffset: 0
       });
     }
-    const r = this.chordOffsetConsecutiveAccidentals(s), n = this.chordOffsetCloseNotes(s);
+    const r = this.chordOffsetConsecutiveAccidentals(s), o = this.chordOffsetCloseNotes(s);
     return {
       noteGroup: t,
       noteObj: s[0].noteObj,
       noteYPos: 0,
       accidentalOffset: r,
-      cursorOffset: n
+      cursorOffset: o
     };
   }
 }
-const u = "http://www.w3.org/2000/svg", q = 0.1, S = 1200;
-class b {
+const g = "http://www.w3.org/2000/svg", At = 0.1, w = 1200;
+class L {
   rootElementRef;
   svgElementRef;
   // Layers
@@ -479,18 +479,18 @@ class b {
   // 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 > S && (this.width = S, console.warn(`Width provided for the staff ${this.width} exceeds the limit ${S}. Please use this value to fix positioning issues.`)), this.svgElementRef = document.createElementNS(u, "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.width > w && (this.width = w, console.warn(`Width provided for the staff ${this.width} exceeds the limit ${w}. Please use this value to fix positioning issues.`)), this.svgElementRef = document.createElementNS(g, "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);
   }
   // Creates SVG defs for all glyphs in GLYPH_ENTRIES, applies global scale and offsets, appends to root SVG
   makeGlyphDefs(e) {
-    const t = document.createElementNS(u, "defs");
-    Object.entries($).filter(([r]) => e.includes(r)).forEach(([r, n]) => {
-      const o = document.createElementNS(u, "path");
-      o.setAttribute("id", `glyph-${r}`), o.setAttribute("d", n.path), o.setAttribute("fill", "currentColor"), o.setAttribute("transform", `translate(${n.xOffset}, ${n.yOffset}) scale(${q})`), t.appendChild(o);
+    const t = document.createElementNS(g, "defs");
+    Object.entries(Et).filter(([r]) => e.includes(r)).forEach(([r, o]) => {
+      const n = document.createElementNS(g, "path");
+      n.setAttribute("id", `glyph-${r}`), n.setAttribute("d", o.path), n.setAttribute("fill", "currentColor"), n.setAttribute("transform", `translate(${o.xOffset}, ${o.yOffset}) scale(${At})`), t.appendChild(n);
     }), this.rootSvgElement.appendChild(t);
   }
   createGroup(e) {
-    const t = document.createElementNS(u, "g");
+    const t = document.createElementNS(g, "g");
     return e && t.classList.add(`vs-${e}`), t;
   }
   commitElementsToDOM(e, t = this.rootElementRef) {
@@ -514,6 +514,9 @@ class b {
   addTotalRootSvgHeight(e) {
     this.totalHeight += e;
   }
+  setTotalRootSvgHeight(e) {
+    this.totalHeight = e;
+  }
   addTotalRootSvgYOffset(e) {
     this.totalYOffset += e;
   }
@@ -530,13 +533,13 @@ class b {
     return this.parentGroupContainer;
   }
   // Drawing Methods
-  drawLine(e, t, s, r, n) {
-    const o = document.createElementNS(u, "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, o) {
+    const n = document.createElementNS(g, "line");
+    n.setAttribute("x1", e.toString()), n.setAttribute("y1", t.toString()), n.setAttribute("x2", s.toString()), n.setAttribute("y2", r.toString()), n.setAttribute("stroke", "currentColor"), n.setAttribute("stroke-width", "1"), o.appendChild(n);
   }
   drawRect(e, t, s, r) {
-    const n = document.createElementNS(u, "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"), s.appendChild(n), n;
+    const o = document.createElementNS(g, "rect");
+    return o.setAttribute("width", e.toString()), o.setAttribute("height", t.toString()), o.setAttribute("x", (r?.x ?? 0).toString()), o.setAttribute("y", (r?.y ?? 0).toString()), r?.fill ? o.setAttribute("fill", r.fill) : o.setAttribute("fill", "currentColor"), r?.rx && o.setAttribute("rx", r.rx.toString()), s.appendChild(o), o;
   }
   drawGlyph(e, t, s) {
     s = {
@@ -544,14 +547,22 @@ class b {
       yOffset: 0,
       ...s
     };
-    const r = document.createElementNS(u, "use");
+    const r = document.createElementNS(g, "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, o) {
+    const n = document.createElementNS(g, "circle");
+    return n.setAttribute("cx", e.toString()), n.setAttribute("cy", t.toString()), n.setAttribute("r", s.toString()), o?.filled === !1 ? (n.setAttribute("fill", "none"), n.setAttribute("stroke", "currentColor"), n.setAttribute("stroke-width", (o?.strokeWidth ?? 1.5).toString())) : n.setAttribute("fill", o?.fill ?? "currentColor"), r.appendChild(n), n;
+  }
+  drawText(e, t, s, r, o) {
+    const n = document.createElementNS(g, "text");
+    return n.setAttribute("x", t.toString()), n.setAttribute("y", s.toString()), n.setAttribute("text-anchor", o?.anchor ?? "middle"), n.setAttribute("font-size", (o?.fontSize ?? 10).toString()), n.setAttribute("fill", o?.fill ?? "currentColor"), o?.fontWeight && n.setAttribute("font-weight", o.fontWeight), n.textContent = e, r.appendChild(n), n;
+  }
   destroy() {
     this.rootElementRef && this.svgElementRef && this.rootElementRef.contains(this.svgElementRef) && this.rootElementRef.removeChild(this.svgElementRef);
   }
 }
-const j = [
+const It = [
   "CLEF_TREBLE",
   "CLEF_BASS",
   "CLEF_ALTO",
@@ -566,7 +577,7 @@ const j = [
   "ACCIDENTAL_DOUBLE_SHARP",
   "ACCIDENTAL_DOUBLE_FLAT"
 ];
-class et {
+class Rt {
   svgRendererInstance;
   strategyInstance;
   noteRendererInstance;
@@ -591,44 +602,44 @@ class et {
       staffColor: "black",
       staffBackgroundColor: "transparent",
       ...t
-    }, this.svgRendererInstance = new b(e, {
+    }, this.svgRendererInstance = new L(e, {
       width: this.options.width,
       height: 100,
       scale: this.options.scale,
       staffColor: this.options.staffColor,
       staffBackgroundColor: this.options.staffBackgroundColor,
-      useGlyphs: j
+      useGlyphs: It
     });
     const s = this.svgRendererInstance.rootSvgElement;
     switch (this.options.staffType) {
       case "grand":
-        this.strategyInstance = new x(this.svgRendererInstance, "grand");
+        this.strategyInstance = new tt(this.svgRendererInstance, "grand");
         break;
       case "bass":
-        this.strategyInstance = new A(this.svgRendererInstance, "bass");
+        this.strategyInstance = new _(this.svgRendererInstance, "bass");
         break;
       case "treble":
-        this.strategyInstance = new A(this.svgRendererInstance, "treble");
+        this.strategyInstance = new _(this.svgRendererInstance, "treble");
         break;
       case "alto":
-        this.strategyInstance = new A(this.svgRendererInstance, "alto");
+        this.strategyInstance = new _(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 U(this.svgRendererInstance, this.strategyInstance), this.options.spaceAbove) {
-      const n = this.options.spaceAbove * 10;
-      this.svgRendererInstance.addTotalRootSvgYOffset(n);
+    if (this.strategyInstance.drawStaff(this.options.width), this.noteRendererInstance = new et(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);
   }
   createKeySignature(e) {
-    return k(this.svgRendererInstance, this.strategyInstance, e, M);
+    return ft(this.svgRendererInstance, this.strategyInstance, e, lt);
   }
   /**
    * Draws a note on the staff.
@@ -652,20 +663,20 @@ class et {
   */
   drawNote(e) {
     const t = Array.isArray(e) ? e : [e], s = this.svgRendererInstance.getLayerByName("notes"), r = [];
-    for (const n of t) {
-      let o;
+    for (const o of t) {
+      let n;
       try {
-        o = this.noteRendererInstance.renderNote(n);
-      } catch (a) {
-        throw r.length > 0 && this.svgRendererInstance.commitElementsToDOM(r, s), a;
+        n = this.noteRendererInstance.renderNote(o);
+      } catch (i) {
+        throw r.length > 0 && this.svgRendererInstance.commitElementsToDOM(r, s), i;
       }
-      o.noteGroup.setAttribute("transform", `translate(${this.noteCursorX + o.accidentalOffset}, ${o.noteYPos})`), this.noteEntries.push({
-        gElement: o.noteGroup,
-        note: o.noteObj,
-        xPos: this.noteCursorX + o.accidentalOffset,
-        yPos: o.noteYPos,
-        accidentalXOffset: o.accidentalOffset
-      }), this.noteCursorX += 28 + o.accidentalOffset, r.push(o.noteGroup);
+      n.noteGroup.setAttribute("transform", `translate(${this.noteCursorX + n.accidentalOffset}, ${n.noteYPos})`), this.noteEntries.push({
+        gElement: n.noteGroup,
+        note: n.noteObj,
+        xPos: this.noteCursorX + n.accidentalOffset,
+        yPos: n.noteYPos,
+        accidentalXOffset: n.accidentalOffset
+      }), this.noteCursorX += 28 + n.accidentalOffset, r.push(n.noteGroup);
     }
     this.svgRendererInstance.commitElementsToDOM(r, s);
   }
@@ -689,7 +700,7 @@ class et {
     const t = this.svgRendererInstance.getLayerByName("notes"), s = this.noteRendererInstance.renderChord(e);
     s.noteGroup.setAttribute("transform", `translate(${this.noteCursorX + s.accidentalOffset}, 0)`), this.noteEntries.push({
       gElement: s.noteGroup,
-      note: O(e[0]),
+      note: P(e[0]),
       xPos: this.noteCursorX + s.accidentalOffset,
       yPos: 0,
       accidentalXOffset: s.accidentalOffset
@@ -703,16 +714,16 @@ class et {
     const e = this.options.width - this.noteStartX, t = this.noteEntries.length;
     if (t <= 0 || e <= 0) return;
     const s = Math.round(e / t);
-    this.noteEntries.map((n, o) => {
-      const a = (o + 0.5) * s, i = n.gElement.getBBox(), c = a - i.width / 2 - i.x, l = Math.round(c * 10) / 10;
+    this.noteEntries.map((o, n) => {
+      const i = (n + 0.5) * s, a = o.gElement.getBBox(), c = i - a.width / 2 - a.x, l = Math.round(c * 10) / 10;
       return {
-        entry: n,
+        entry: o,
         newX: l,
-        isChord: n.gElement.classList.contains("chord")
+        isChord: o.gElement.classList.contains("chord")
       };
-    }).forEach((n) => {
-      const { entry: o, newX: a, isChord: i } = n;
-      i ? o.gElement.setAttribute("transform", `translate(${a}, 0)`) : o.gElement.setAttribute("transform", `translate(${a}, ${o.yPos})`), o.xPos = a;
+    }).forEach((o) => {
+      const { entry: n, newX: i, isChord: a } = o;
+      a ? n.gElement.setAttribute("transform", `translate(${i}, 0)`) : n.gElement.setAttribute("transform", `translate(${i}, ${n.yPos})`), n.xPos = i;
     });
   }
   /**
@@ -740,11 +751,11 @@ class et {
   */
   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] = {
+    const s = this.noteEntries[t], r = this.noteRendererInstance.renderNote(e), n = s.xPos - s.accidentalXOffset + r.accidentalOffset;
+    r.noteGroup.setAttribute("transform", `translate(${n}, ${r.noteYPos})`), this.svgRendererInstance.getLayerByName("notes").replaceChild(r.noteGroup, s.gElement), this.noteEntries[t] = {
       gElement: r.noteGroup,
       note: r.noteObj,
-      xPos: o,
+      xPos: n,
       yPos: r.noteYPos,
       accidentalXOffset: r.accidentalOffset
     };
@@ -768,11 +779,11 @@ class et {
   changeChordByIndex(e, t) {
     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] = {
+    const s = this.noteEntries[t], r = this.noteRendererInstance.renderChord(e), n = s.xPos - s.accidentalXOffset + r.accidentalOffset;
+    r.noteGroup.setAttribute("transform", `translate(${n}, 0)`), this.svgRendererInstance.getLayerByName("notes").replaceChild(r.noteGroup, s.gElement), this.noteEntries[t] = {
       gElement: r.noteGroup,
-      note: O(e[0]),
-      xPos: o,
+      note: P(e[0]),
+      xPos: n,
       yPos: 0,
       accidentalXOffset: r.accidentalOffset
     };
@@ -807,7 +818,7 @@ class et {
     this.noteEntries = [], this.svgRendererInstance.destroy();
   }
 }
-const d = 30, H = 19, g = 12, K = 4, Q = 6, P = 1, m = 38, z = [
+const A = 30, z = 19, O = 12, _t = 4, Tt = 6, j = 1, b = 38, mt = [
   "TIME_4",
   "TIME_3",
   "NOTE_HEAD_WHOLE",
@@ -819,7 +830,7 @@ const d = 30, H = 19, g = 12, K = 4, Q = 6, P = 1, m = 38, z = [
   "REST_QUARTER",
   "REST_EIGHTH"
 ];
-class st {
+class yt {
   rendererInstance;
   options;
   barSpacing;
@@ -830,7 +841,7 @@ class st {
   currentBeatCount = 0;
   currentBeatUICount = 0;
   currentBeatUIElement = null;
-  currentBeatUIXPos = m;
+  currentBeatUIXPos = b;
   /**
    * Creates an instance of a RhythmStaff, A single staff that will automatically apply positioning of elements based on the duration of a note.
    *
@@ -850,13 +861,13 @@ class st {
       staffBackgroundColor: "white",
       currentBeatUIColor: "#24ff7450",
       ...t
-    }, this.rendererInstance = new b(e, {
+    }, this.rendererInstance = new L(e, {
       width: this.options.width,
       height: 100,
       scale: this.options.scale,
       staffColor: this.options.staffColor,
       staffBackgroundColor: this.options.staffBackgroundColor,
-      useGlyphs: z
+      useGlyphs: mt
     });
     const s = this.rendererInstance.rootSvgElement;
     let r = "TIME_4";
@@ -872,41 +883,41 @@ class st {
     }
     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 p = this.options.spaceAbove * 10;
-      this.rendererInstance.addTotalRootSvgYOffset(p);
+      const u = this.options.spaceAbove * 10;
+      this.rendererInstance.addTotalRootSvgYOffset(u);
     }
     if (this.options.spaceBelow) {
-      let p = this.options.spaceBelow * 10;
-      this.rendererInstance.addTotalRootSvgHeight(p);
+      let u = this.options.spaceBelow * 10;
+      this.rendererInstance.addTotalRootSvgHeight(u);
     }
-    const n = this.rendererInstance.getLayerByName("staff");
-    this.rendererInstance.addTotalRootSvgHeight(d * 2);
-    const o = this.rendererInstance.createGroup("time-signature");
-    n.appendChild(o);
-    const a = d - H;
-    this.rendererInstance.drawGlyph(r, o), this.rendererInstance.drawGlyph("TIME_4", o, { yOffset: H }), o.setAttribute("transform", `translate(0, ${a})`);
-    let i = this.options.width - 38;
-    this.options.barsCount > 1 && (i -= (this.options.barsCount - 1) * g), i -= P, this.rendererInstance.drawLine(0, d, this.options.width - P, d, n), this.barSpacing = i / this.options.barsCount, this.quarterNoteSpacing = Math.round(this.barSpacing / this.options.topNumber), this.maxBeatCount = this.options.barsCount * this.options.topNumber;
+    const o = this.rendererInstance.getLayerByName("staff");
+    this.rendererInstance.addTotalRootSvgHeight(A * 2);
+    const n = this.rendererInstance.createGroup("time-signature");
+    o.appendChild(n);
+    const i = A - z;
+    this.rendererInstance.drawGlyph(r, n), this.rendererInstance.drawGlyph("TIME_4", n, { yOffset: z }), n.setAttribute("transform", `translate(0, ${i})`);
+    let a = this.options.width - 38;
+    this.options.barsCount > 1 && (a -= (this.options.barsCount - 1) * O), a -= j, this.rendererInstance.drawLine(0, A, this.options.width - j, A, o), 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 = d / 2, f = d + l;
-    for (let p = 0; p < this.options.barsCount - 1; p++)
-      this.rendererInstance.drawLine(c, l, c, f, n), c += this.barSpacing;
-    this.rendererInstance.getLayerByName("notes").setAttribute("transform", `translate(38, ${d})`), this.rendererInstance.applySizingToRootSvg(), this.rendererInstance.commitElementsToDOM(s);
+    const l = A / 2, d = A + l;
+    for (let u = 0; u < this.options.barsCount - 1; u++)
+      this.rendererInstance.drawLine(c, l, c, d, o), c += this.barSpacing;
+    this.rendererInstance.getLayerByName("notes").setAttribute("transform", `translate(38, ${A})`), this.rendererInstance.applySizingToRootSvg(), this.rendererInstance.commitElementsToDOM(s);
   }
   createBeatUIElement() {
     const e = this.rendererInstance.getLayerByName("ui");
     this.currentBeatUIElement = this.rendererInstance.drawRect(
       this.quarterNoteSpacing / 2,
-      d * 2,
+      A * 2,
       e,
       {
-        x: m,
+        x: b,
         fill: this.options.currentBeatUIColor
       }
     );
   }
   handleNewBar() {
-    this.noteCursorX += g;
+    this.noteCursorX += O;
   }
   // Translates group, returns cursor increment amount
   translateGroupByDuration(e, t) {
@@ -965,15 +976,15 @@ class st {
     let s = e;
     for (; s > 0; ) {
       const r = this.rendererInstance.createGroup("rest");
-      let n = 0;
-      s - E.h >= 0 ? (this.rendererInstance.drawGlyph("REST_HALF", r), n = E.h) : s - E.q >= 0 ? (this.rendererInstance.drawGlyph("REST_QUARTER", r), n = E.q) : (this.rendererInstance.drawGlyph("REST_EIGHTH", r), n = E.e), s -= n, this.currentBeatCount += n, r.setAttribute("transform", `translate(${this.noteCursorX}, 0)`), this.noteCursorX += n * this.quarterNoteSpacing, t.push(r);
+      let o = 0;
+      s - p.h >= 0 ? (this.rendererInstance.drawGlyph("REST_HALF", r), o = p.h) : s - p.q >= 0 ? (this.rendererInstance.drawGlyph("REST_QUARTER", r), o = p.q) : (this.rendererInstance.drawGlyph("REST_EIGHTH", r), o = p.e), s -= o, this.currentBeatCount += o, r.setAttribute("transform", `translate(${this.noteCursorX}, 0)`), this.noteCursorX += o * this.quarterNoteSpacing, t.push(r);
     }
     return t;
   }
   renderBeamRect(e, t, s, r) {
     this.rendererInstance.drawRect(
       e - t,
-      K,
+      _t,
       s,
       {
         x: 10,
@@ -1002,23 +1013,23 @@ class st {
   */
   drawNote(e) {
     const t = Array.isArray(e) ? e : [e], s = this.rendererInstance.getLayerByName("notes"), r = [];
-    for (const n of t) {
-      let o = "w";
+    for (const o of t) {
+      let n = "w";
       try {
-        o = N(n);
-      } catch (f) {
-        throw r.length > 0 && this.rendererInstance.commitElementsToDOM(r, s), f;
+        n = R(o);
+      } catch (d) {
+        throw r.length > 0 && this.rendererInstance.commitElementsToDOM(r, s), d;
       }
-      const a = E[o];
+      const i = p[n];
       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 i = this.checkAndFillBarWithRests(a);
-      i && i.forEach((f) => {
-        r.push(f), this.noteEntries.push(f);
+      const a = this.checkAndFillBarWithRests(i);
+      a && a.forEach((d) => {
+        r.push(d), this.noteEntries.push(d);
       });
-      const c = this.rendererInstance.createGroup("note"), l = this.translateGroupByDuration(a, c);
-      this.noteCursorX += l, this.currentBeatCount += a, this.renderNote(o, 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(n, c), r.push(c), this.noteEntries.push(c);
     }
     this.rendererInstance.commitElementsToDOM(r, s);
   }
@@ -1042,21 +1053,21 @@ class st {
   */
   drawRest(e) {
     const t = Array.isArray(e) ? e : [e], s = this.rendererInstance.getLayerByName("notes"), r = [];
-    for (const n of t) {
-      let o = "w";
+    for (const o of t) {
+      let n = "w";
       try {
-        o = N(n);
-      } catch (f) {
-        throw r.length > 0 && this.rendererInstance.commitElementsToDOM(r, s), f;
+        n = R(o);
+      } catch (d) {
+        throw r.length > 0 && this.rendererInstance.commitElementsToDOM(r, s), d;
       }
-      const a = this.rendererInstance.createGroup("rest"), i = E[o], c = i * this.quarterNoteSpacing;
+      const i = this.rendererInstance.createGroup("rest"), a = p[n], c = 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(i);
-      l && l.forEach((f) => {
-        r.push(f), this.noteEntries.push(f);
-      }), this.renderRest(o, a), a.setAttribute("transform", `translate(${this.noteCursorX}, 0)`), this.noteCursorX += c, this.currentBeatCount += i, r.push(a), this.noteEntries.push(a);
+      const l = this.checkAndFillBarWithRests(a);
+      l && l.forEach((d) => {
+        r.push(d), this.noteEntries.push(d);
+      }), this.renderRest(n, i), i.setAttribute("transform", `translate(${this.noteCursorX}, 0)`), this.noteCursorX += c, this.currentBeatCount += a, r.push(i), this.noteEntries.push(i);
     }
     this.rendererInstance.commitElementsToDOM(r, s);
   }
@@ -1083,13 +1094,13 @@ class st {
     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 = N(e), this.checkAndCreateNewBar();
-    const r = this.rendererInstance.getLayerByName("notes"), n = E[s], o = n * this.quarterNoteSpacing, a = this.options.topNumber - this.currentBeatCount % this.options.topNumber, i = Math.min(t, a / n), c = this.rendererInstance.createGroup("beamed-note");
+    e === "s" ? s = "s" : s = R(e), this.checkAndCreateNewBar();
+    const r = this.rendererInstance.getLayerByName("notes"), o = p[s], n = o * this.quarterNoteSpacing, i = this.options.topNumber - this.currentBeatCount % this.options.topNumber, a = Math.min(t, i / o), c = this.rendererInstance.createGroup("beamed-note");
     c.setAttribute("transform", `translate(${this.noteCursorX}, 0)`);
     let l = 0;
-    for (let f = 0; f < i; f++)
-      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, Q), this.noteCursorX += l, this.noteEntries.push(c), this.rendererInstance.commitElementsToDOM(c, r);
+    for (let d = 0; d < a; d++)
+      this.rendererInstance.drawGlyph("NOTE_HEAD_QUARTER", c, { xOffset: l }), this.drawStem(c, l), l += n, this.currentBeatCount += o;
+    this.renderBeamRect(l, n, c), e === "s" && this.renderBeamRect(l, n, c, Tt), this.noteCursorX += l, this.noteEntries.push(c), this.rendererInstance.commitElementsToDOM(c, r);
   }
   /**
    * Will increment the UI showing the current beat in quarters. Once exceeded, must be reset with `resetCurrentBeatUI()`
@@ -1100,14 +1111,14 @@ class st {
       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 += g), 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 += O), 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 = m, this.currentBeatUIElement && (this.currentBeatUIElement.setAttribute("display", "none"), this.currentBeatUIElement.setAttribute("x", this.currentBeatUIXPos.toString()));
+    this.currentBeatUICount = 0, this.currentBeatUIXPos = b, this.currentBeatUIElement && (this.currentBeatUIElement.setAttribute("display", "none"), this.currentBeatUIElement.setAttribute("x", this.currentBeatUIXPos.toString()));
   }
   /**
    * Clears staff of notes and resets internal positioning.
@@ -1124,7 +1135,7 @@ class st {
     this.noteEntries = [], this.rendererInstance.destroy();
   }
 }
-const J = [
+const Ct = [
   "CLEF_TREBLE",
   "CLEF_BASS",
   "CLEF_ALTO",
@@ -1138,8 +1149,8 @@ const J = [
   "ACCIDENTAL_NATURAL",
   "ACCIDENTAL_DOUBLE_SHARP",
   "ACCIDENTAL_DOUBLE_FLAT"
-], T = 60, tt = T;
-class rt {
+], N = 60, St = N;
+class wt {
   svgRendererInstance;
   strategyInstance;
   noteRendererInstance;
@@ -1166,32 +1177,32 @@ class rt {
       staffColor: "black",
       staffBackgroundColor: "transparent",
       ...t
-    }, this.svgRendererInstance = new b(e, {
+    }, this.svgRendererInstance = new L(e, {
       width: this.options.width,
       height: 100,
       scale: this.options.scale,
       staffColor: this.options.staffColor,
       staffBackgroundColor: this.options.staffBackgroundColor,
-      useGlyphs: J
+      useGlyphs: Ct
     });
     const s = this.svgRendererInstance.rootSvgElement;
     switch (this.options.staffType) {
       case "grand":
-        this.strategyInstance = new x(this.svgRendererInstance, "grand");
+        this.strategyInstance = new tt(this.svgRendererInstance, "grand");
         break;
       case "bass":
-        this.strategyInstance = new A(this.svgRendererInstance, "bass");
+        this.strategyInstance = new _(this.svgRendererInstance, "bass");
         break;
       case "treble":
-        this.strategyInstance = new A(this.svgRendererInstance, "treble");
+        this.strategyInstance = new _(this.svgRendererInstance, "treble");
         break;
       case "alto":
-        this.strategyInstance = new A(this.svgRendererInstance, "alto");
+        this.strategyInstance = new _(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 U(this.svgRendererInstance, this.strategyInstance), this.options.spaceAbove) {
+    if (this.strategyInstance.drawStaff(this.options.width), this.noteRendererInstance = new et(this.svgRendererInstance, this.strategyInstance), this.options.spaceAbove) {
       const r = this.options.spaceAbove * 10;
       this.svgRendererInstance.addTotalRootSvgYOffset(r);
     }
@@ -1202,10 +1213,10 @@ class rt {
     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);
   }
   renderFirstNoteGroups() {
-    const e = this.options.width - this.options.noteStartX + tt;
+    const e = this.options.width - this.options.noteStartX + St;
     for (; this.noteBuffer.length > 0 && this.noteCursorX < e; )
-      this.renderNextNote(), this.noteCursorX += T;
-    this.activeEntries.length > 1 && (this.noteCursorX -= T);
+      this.renderNextNote(), this.noteCursorX += N;
+    this.activeEntries.length > 1 && (this.noteCursorX -= N);
   }
   renderNextNote() {
     if (this.noteBuffer.length < 1) return;
@@ -1264,7 +1275,7 @@ class rt {
       return;
     }
     this.activeEntries.forEach((t) => {
-      t.xPos -= T, t.noteWrapper.style.transform = `translate(${t.xPos}px, 0px)`;
+      t.xPos -= N, t.noteWrapper.style.transform = `translate(${t.xPos}px, 0px)`;
     });
     const e = this.activeEntries[0];
     e.xPos <= 0 && (this.notesLayer.removeChild(e.noteWrapper), this.activeEntries.shift()), this.renderNextNote();
@@ -1284,8 +1295,297 @@ class rt {
     this.svgRendererInstance.destroy(), this.activeEntries = [], this.noteBuffer = [];
   }
 }
+const Nt = /^[xX\da-zA-Z]+$/, Lt = /^[\d]+$/;
+function K(h, e) {
+  const t = [];
+  for (let s = 0; s < h.length; s++)
+    t.push({
+      fret: h[s],
+      finger: e[s]
+    });
+  return t;
+}
+function Q(h, e) {
+  const t = h.filter((o) => o.toLowerCase() !== "x" && o !== "0").map((o) => parseInt(o, 36));
+  if (t.length === 0) return 1;
+  const s = Math.min(...t);
+  return Math.max(...t) <= e ? 1 : s;
+}
+function v(h) {
+  if (!Nt.test(h)) throw new Error("Invalid frets string. Only 'x', 'X', and digits are allowed.");
+  return h.split("");
+}
+function G(h) {
+  if (!Lt.test(h)) throw new Error("Invalid fingers string. Only digits are allowed.");
+  return h.split("");
+}
+class Ot {
+  svgRendererInstance;
+  options;
+  chordEntries = [];
+  cursorX = 0;
+  cursorY = 0;
+  // Fixed per-instance sizing, derived once from options
+  diagramWidth;
+  diagramHeight;
+  gridTopY;
+  rowHeight;
+  /**
+   * Creates an instance of a GuitarChord diagram renderer.
+   *
+   * @param rootElementCtx - The element (div) reference that the chord diagram(s) will be appended to.
+   * @param options - Optional configuration. Can adjust total width, scale, string/fret count, and coloring.
+   * All config options are in the type GuitarChordOptions.
+  */
+  constructor(e, t) {
+    if (this.options = {
+      width: 300,
+      scale: 1,
+      stringCount: st,
+      fretCount: rt,
+      stringLabels: [],
+      color: "black",
+      backgroundColor: "transparent",
+      ...t
+    }, this.diagramWidth = (this.options.stringCount - 1) * I, this.diagramHeight = this.options.fretCount * T, this.gridTopY = M + Y, this.rowHeight = this.gridTopY + this.diagramHeight + X, this.options.stringLabels.length >= 1 && (this.rowHeight += ot + nt), 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 L(e, {
+      width: this.options.width,
+      height: 100,
+      scale: this.options.scale,
+      staffColor: this.options.color,
+      staffBackgroundColor: this.options.backgroundColor,
+      useGlyphs: []
+    });
+    const s = this.svgRendererInstance.rootSvgElement;
+    this.svgRendererInstance.setTotalRootSvgHeight(this.rowHeight), this.svgRendererInstance.applySizingToRootSvg(), this.svgRendererInstance.commitElementsToDOM(s);
+  }
+  drawStringDots(e, t, s, r) {
+    const o = this.gridTopY - Y / 2;
+    for (let n = 0; n < this.options.stringCount; n++) {
+      const i = n * I, a = e[n].toLowerCase(), c = t[n];
+      if (a === "x")
+        this.svgRendererInstance.drawLine(i - f, o - f, i + f, o + f, r), this.svgRendererInstance.drawLine(i - f, o + f, i + f, o - f, r);
+      else if (a === "0")
+        this.svgRendererInstance.drawCircle(i, o, f, r, { filled: !1 });
+      else {
+        const l = parseInt(a, 36) - s + 1;
+        if (l < 1 || l > this.options.fretCount)
+          throw new Error(`Fret ${a} on string ${n + 1} is outside the visible range (${s}-${s + this.options.fretCount - 1}). Adjust 'startFret' or 'fretCount'.`);
+        const d = this.gridTopY + (l - 0.5) * T;
+        if (this.svgRendererInstance.drawCircle(i, d, E, r), c !== "0") {
+          const u = this.options.backgroundColor === "transparent" ? "white" : this.options.backgroundColor;
+          this.svgRendererInstance.drawText(c, i, d + C / 3, r, {
+            fontSize: C,
+            fill: u
+          });
+        }
+      }
+    }
+  }
+  drawStringLabels(e, t) {
+    if (!t || t.length === 0) return;
+    const s = E - 1, r = this.rowHeight - s - X;
+    for (let o = 0; o < this.options.stringCount; o++) {
+      const n = t[o];
+      if (!n) continue;
+      const i = o * I, a = r + s / 2;
+      this.svgRendererInstance.drawCircle(i, r, s, e, { filled: !1 }), this.svgRendererInstance.drawText(n, i, a, e, { fontSize: D });
+    }
+  }
+  // Passed in 'from' and 'to' index values are zero-based
+  drawBarre(e, t) {
+    const s = t.fret;
+    if (t.fromIndex < 0 || t.toIndex >= this.options.stringCount || t.fromIndex >= t.toIndex)
+      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, o = t.fromIndex * I, n = t.toIndex * I, i = E * 2, a = n - o + i, c = this.gridTopY + E / 2 + T * r;
+    if (this.svgRendererInstance.drawRect(a, i, e, {
+      x: o - E,
+      y: c,
+      rx: E
+    }), t.finger) {
+      const l = this.options.backgroundColor === "transparent" ? "white" : this.options.backgroundColor;
+      this.svgRendererInstance.drawText(t.finger.toString(), (o + n) / 2, c + C, e, {
+        fontSize: C,
+        fill: l
+      });
+    }
+  }
+  // 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"), o = s?.startFret ?? 1;
+    s?.label && this.svgRendererInstance.drawText(s.label, this.diagramWidth / 2, M - 5, r, {
+      fontSize: D,
+      fontWeight: "bold"
+    });
+    for (let n = 0; n <= this.options.fretCount; n++) {
+      const i = this.gridTopY + n * T;
+      n === 0 && o === 1 ? this.svgRendererInstance.drawRect(this.diagramWidth + U * 2, F, r, {
+        x: -U,
+        y: i - F / 2
+      }) : this.svgRendererInstance.drawLine(0, i, this.diagramWidth, i, r);
+    }
+    o > 1 && this.svgRendererInstance.drawText(`${o}fr`, this.diagramWidth + ht, this.gridTopY + T / 2 + 4, r, {
+      anchor: "start",
+      fontSize: ct,
+      fontWeight: "bold"
+    });
+    for (let n = 0; n < this.options.stringCount; n++) {
+      const i = n * I;
+      this.svgRendererInstance.drawLine(i, this.gridTopY, i, this.gridTopY + this.diagramHeight, r);
+    }
+    return this.drawStringDots(e, t, o, r), this.options.stringLabels.length >= 1 && this.drawStringLabels(r, this.options.stringLabels), s?.barres?.forEach((n) => {
+      this.drawBarre(r, {
+        fromIndex: n.fromString - 1,
+        toIndex: n.toString - 1,
+        fret: n.fret,
+        finger: n.finger,
+        startingFret: o
+      });
+    }), 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.
+  relayoutChords() {
+    if (this.cursorX = E, this.cursorY = 0, 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 = E, this.cursorY += this.rowHeight + at), t.xPos = this.cursorX, t.yPos = this.cursorY, t.gElement.setAttribute("transform", `translate(${this.cursorX}, ${this.cursorY})`), this.cursorX += this.diagramWidth + it;
+      });
+    const e = this.cursorY + this.rowHeight;
+    this.svgRendererInstance.setTotalRootSvgHeight(e), this.svgRendererInstance.applySizingToRootSvg();
+  }
+  /**
+   * Adds a new chord diagram. Diagrams are placed left-to-right in the order added, wrapping to a
+   * new row automatically once the configured width is exceeded.
+   *
+   * @param frets - A string, with each value being ordered low-to-high (e.g. first position in string 0 is the low E string)
+   * * `x` - muted string
+   * * `0` - open string
+   * * `1...n` - fretted at the given absolute fret number (e.g. `3`)
+   * @param fingers - A string, with each value being ordered low-to-high (e.g. first position in string 0 is the low E string)
+   * * `0` - No finger labeled
+   * * `1...n` - Finger labeled as number provided
+   * 
+   * @param options - Optional per-chord settings: `startFret` (default `1`, for diagrams higher up the neck)
+   * and `label` (a chord name drawn above the diagram).
+   * 
+   * @returns The index of the newly added chord, for later use with the CRUD-by-index methods.
+   * 
+   * @throws {Error} If fret or finger's string length doesn't match the configured string count.
+   *
+   * @example
+   * // Draw an open C major chord
+   * guitarChord.addChord("x32010", "032010", { label: "C" });
+  */
+  addChord(e, t, s) {
+    const r = v(e), o = G(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 (o.length !== this.options.stringCount) throw new Error("Invalid number of fingers provided, entries should be equal to number of strings in diagram.");
+    const n = s?.startFret ?? Q(r, this.options.fretCount), i = s?.label, a = s?.barres, c = { startFret: n, label: i, barres: a }, l = this.renderChordDiagram(r, o, c), d = this.svgRendererInstance.getLayerByName("notes");
+    return this.svgRendererInstance.commitElementsToDOM(l, d), this.chordEntries.push({
+      gElement: l,
+      strings: K(r, o),
+      ...c,
+      xPos: 0,
+      yPos: 0
+    }), this.relayoutChords(), this.chordEntries.length - 1;
+  }
+  /**
+   * Replaces the chord diagram at the specified index with a new one, in place.
+   * 
+  * @param frets - A string, with each value being ordered low-to-high (e.g. first position in string 0 is the low E string)
+   * * `x` - muted string
+   * * `0` - open string
+   * * `1...n` - fretted at the given absolute fret number (e.g. `3`)
+   * @param fingers - A string, with each value being ordered low-to-high (e.g. first position in string 0 is the low E string)
+   * * `0` - No finger labeled
+   * * `1...n` - Finger labeled as number provided
+   * 
+   * @param chordIndex - The index of the chord to replace (as returned by addChord).
+   * 
+   * @param options - Optional per-chord settings, see addChord.
+   * 
+   * @returns void
+   * 
+   * @throws {Error} If the index is out of bounds, or if chordDef is invalid (see addChord).
+   *
+   * @example
+   * // Change chord at index 0 to a D major chord
+   * guitarChord.modifyChordByIndex("xx0232", "000132", 0, { label: "D" });
+   *   
+  */
+  modifyChordByIndex(e, t, s, r) {
+    if (s >= this.chordEntries.length || s < 0) throw new Error("Chord index was out of bounds.");
+    const o = v(e), n = G(t);
+    if (o.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 i = this.chordEntries[s], a = r && "label" in r ? r.label === "" ? void 0 : r.label : i.label, c = r?.startFret ?? Q(o, this.options.fretCount), l = { ...r, label: a, startFret: c }, d = this.renderChordDiagram(o, n, l);
+    this.svgRendererInstance.getLayerByName("notes").replaceChild(d, i.gElement), this.chordEntries[s] = {
+      gElement: d,
+      strings: K(o, n),
+      ...l,
+      xPos: i.xPos,
+      yPos: i.yPos
+    }, this.relayoutChords();
+  }
+  /**
+   * Removes the chord diagram at the specified index. Remaining chords are re-flowed to close the gap.
+   * @param chordIndex - The index of the chord to remove.
+   * @returns void
+   * @throws {Error} If the index is out of bounds.
+  */
+  removeChordByIndex(e) {
+    if (e >= this.chordEntries.length || e < 0) throw new Error("Chord index was out of bounds.");
+    this.chordEntries[e].gElement.remove(), this.chordEntries.splice(e, 1), this.relayoutChords();
+  }
+  /**
+   * Removes all chord diagrams and resets internal positioning.
+   * @returns void
+  */
+  clearAllChords() {
+    this.svgRendererInstance.getLayerByName("notes").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.
+   * * The returned value then can be used in addChord and modifyChord methods.
+   * @returns GuitarBarreDef[]
+  */
+  determineBarreOptions(e, t, s) {
+    const r = v(e), o = G(t), n = [];
+    return s.forEach((i) => {
+      const a = {};
+      for (let c = 0; c < r.length; c++) {
+        if (r[c].toLowerCase() === "x") continue;
+        if (parseInt(r[c], 36) === i && o[c] !== "0") {
+          const d = o[c];
+          a[d] || (a[d] = []), a[d].push(c);
+        }
+      }
+      for (const [c, l] of Object.entries(a))
+        l.length > 1 && n.push({
+          fret: i,
+          fromString: Math.min(...l) + 1,
+          toString: Math.max(...l) + 1,
+          finger: Number(c)
+        });
+    }), n;
+  }
+  /**
+   * Removes the root svg element and cleans up arrays.
+   * @returns void
+  */
+  destroy() {
+    this.chordEntries = [], this.svgRendererInstance.destroy();
+  }
+}
 export {
-  et as MusicStaff,
-  st as RhythmStaff,
-  rt as ScrollingStaff
+  Ot as GuitarChord,
+  Rt as MusicStaff,
+  yt as RhythmStaff,
+  wt as ScrollingStaff
 };