@tspro/web-music-score 3.0.0 → 3.1.0

package/dist/score/index.js

@@ -1,4 +1,4 @@
-/* WebMusicScore v3.0.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+/* WebMusicScore v3.1.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -81,6 +81,7 @@ __export(score_exports, {
   StaffPreset: () => StaffPreset,
   Stem: () => Stem,
   TieType: () => TieType,
+  VerticalPosition: () => VerticalPosition,
   getStringNumbers: () => getStringNumbers,
   getVoiceIds: () => getVoiceIds
 });
@@ -413,6 +414,13 @@ var Connective = /* @__PURE__ */ ((Connective3) => {
   Connective3[Connective3["Slide"] = 2] = "Slide";
   return Connective3;
 })(Connective || {});
+var VerticalPosition = /* @__PURE__ */ ((VerticalPosition4) => {
+  VerticalPosition4[VerticalPosition4["Above"] = 0] = "Above";
+  VerticalPosition4[VerticalPosition4["Below"] = 1] = "Below";
+  VerticalPosition4[VerticalPosition4["Both"] = 2] = "Both";
+  VerticalPosition4[VerticalPosition4["Auto"] = 3] = "Auto";
+  return VerticalPosition4;
+})(VerticalPosition || {});
 var PlayState = /* @__PURE__ */ ((PlayState2) => {
   PlayState2[PlayState2["Playing"] = 0] = "Playing";
   PlayState2[PlayState2["Paused"] = 1] = "Paused";
@@ -527,7 +535,7 @@ var MusicObject = class {
 var import_theory12 = require("@tspro/web-music-score/theory");
 
 // src/score/engine/obj-staff-and-tab.ts
-var import_theory = require("@tspro/web-music-score/theory");
+var import_theory11 = require("@tspro/web-music-score/theory");
 
 // src/score/engine/renderer.ts
 var import_ts_utils_lib2 = require("@tspro/ts-utils-lib");
@@ -945,260 +953,16 @@ var Renderer = class {
 };
 
 // src/score/engine/obj-staff-and-tab.ts
-var import_core3 = require("@tspro/web-music-score/core");
-var import_ts_utils_lib3 = require("@tspro/ts-utils-lib");
-var ObjStaff = class extends MusicObject {
-  constructor(row, staffConfig) {
-    super(row);
-    this.row = row;
-    this.staffConfig = staffConfig;
-    __publicField(this, "clefImageAsset");
-    __publicField(this, "clefLineDiatonicId");
-    __publicField(this, "topLineDiatonicId");
-    __publicField(this, "middleLineDiatonicId");
-    __publicField(this, "bottomLineDiatonicId");
-    __publicField(this, "minDiatonicId");
-    __publicField(this, "maxDiatonicId");
-    __publicField(this, "joinedGrandStaff");
-    __publicField(this, "topLineY", 0);
-    __publicField(this, "bottomLineY", 0);
-    __publicField(this, "objects", []);
-    __publicField(this, "mi");
-    const getDiatonicId = (noteName, isOctaveDown) => import_theory.Note.getNote(noteName).diatonicId - (isOctaveDown ? 7 : 0);
-    if (staffConfig.clef === "G" /* G */) {
-      this.clefImageAsset = 0 /* TrebleClefPng */;
-      this.clefLineDiatonicId = getDiatonicId("G4", staffConfig.isOctaveDown === true);
-      this.middleLineDiatonicId = this.clefLineDiatonicId + 2;
-    } else {
-      this.clefImageAsset = 1 /* BassClefPng */;
-      this.clefLineDiatonicId = getDiatonicId("F3", staffConfig.isOctaveDown === true);
-      this.middleLineDiatonicId = this.clefLineDiatonicId - 2;
-    }
-    this.topLineDiatonicId = this.middleLineDiatonicId + 4;
-    this.bottomLineDiatonicId = this.middleLineDiatonicId - 4;
-    this.minDiatonicId = staffConfig.minNote !== void 0 ? Math.min(getDiatonicId(staffConfig.minNote, false), this.bottomLineDiatonicId) : void 0;
-    this.maxDiatonicId = staffConfig.maxNote !== void 0 ? Math.max(getDiatonicId(staffConfig.maxNote, false), this.topLineDiatonicId) : void 0;
-    this.mi = new MStaff(this);
-  }
-  getMusicInterface() {
-    return this.mi;
-  }
-  get isOctaveDown() {
-    return this.staffConfig.isOctaveDown === true;
-  }
-  getTopLineY() {
-    return this.topLineY;
-  }
-  getMiddleLineY() {
-    return (this.topLineY + this.bottomLineY) / 2;
-  }
-  getBottomLineY() {
-    return this.bottomLineY;
-  }
-  joinGrandStaff(staff) {
-    if (staff !== this) {
-      this.joinedGrandStaff = staff;
-    }
-  }
-  getLineSpacing() {
-    return (this.bottomLineY - this.topLineY) / 4;
-  }
-  getDiatonicSpacing() {
-    return this.getLineSpacing() / 2;
-  }
-  containsDiatonicId(diatonicId) {
-    import_theory.Note.validateDiatonicId(diatonicId);
-    return (this.minDiatonicId === void 0 || diatonicId >= this.minDiatonicId) && (this.maxDiatonicId === void 0 || diatonicId <= this.maxDiatonicId);
-  }
-  getDiatonicIdY(diatonicId) {
-    if (this.containsDiatonicId(diatonicId)) {
-      return this.bottomLineY + (this.bottomLineDiatonicId - diatonicId) * this.getDiatonicSpacing();
-    } else if (this.joinedGrandStaff && this.joinedGrandStaff.containsDiatonicId(diatonicId)) {
-      return this.joinedGrandStaff.getDiatonicIdY(diatonicId);
-    } else {
-      throw new import_core3.MusicError(import_core3.MusicErrorType.Score, "Staff does not contain diatonicId " + diatonicId);
-    }
-  }
-  getActualStaff(diatonicId) {
-    if (this.containsDiatonicId(diatonicId)) {
-      return this;
-    } else if (this.joinedGrandStaff && this.joinedGrandStaff.containsDiatonicId(diatonicId)) {
-      return this.joinedGrandStaff;
-    } else {
-      throw new import_core3.MusicError(import_core3.MusicErrorType.Score, "Staff does not contain diatonicId " + diatonicId);
-    }
-  }
-  getDiatonicIdAt(y) {
-    let diatonicId = Math.round(this.bottomLineDiatonicId - (y - this.bottomLineY) / this.getDiatonicSpacing());
-    return this.containsDiatonicId(diatonicId) ? diatonicId : void 0;
-  }
-  isLine(diatonicId) {
-    return diatonicId % 2 === this.middleLineDiatonicId % 2;
-  }
-  isSpace(diatonicId) {
-    return diatonicId % 2 !== this.middleLineDiatonicId % 2;
-  }
-  containsVoiceId(voiceId) {
-    return !this.staffConfig.voiceIds || this.staffConfig.voiceIds.includes(voiceId);
-  }
-  isGrand() {
-    return this.staffConfig.isGrand === true;
-  }
-  calcTop() {
-    let top = this.topLineY;
-    this.objects.forEach((o) => top = Math.min(top, o.getRect().top));
-    if (this.maxDiatonicId !== void 0) {
-      let y = this.getDiatonicIdY(this.maxDiatonicId);
-      let y2 = this.getDiatonicIdY(this.maxDiatonicId - 1);
-      top = Math.min(top, y - Math.abs(y2 - y) + 1);
-    }
-    return top;
-  }
-  calcBottom() {
-    let bottom = this.bottomLineY;
-    this.objects.forEach((o) => bottom = Math.max(bottom, o.getRect().bottom));
-    if (this.minDiatonicId !== void 0) {
-      let y = this.getDiatonicIdY(this.minDiatonicId);
-      let y2 = this.getDiatonicIdY(this.minDiatonicId + 1);
-      bottom = Math.max(bottom, y + Math.abs(y2 - y) - 1);
-    }
-    return bottom;
-  }
-  addObject(o) {
-    this.objects.push(o);
-  }
-  removeObjects() {
-    this.objects.length = 0;
-  }
-  pick(x, y) {
-    return [this];
-  }
-  layoutHeight(renderer) {
-    let { unitSize } = renderer;
-    let h = unitSize * DocumentSettings.StaffHeight;
-    this.topLineY = -h / 2;
-    this.bottomLineY = h / 2;
-    this.rect = new DivRect(0, 0, this.topLineY, this.bottomLineY);
-  }
-  layoutWidth(renderer) {
-    this.rect.left = this.row.getRect().left;
-    this.rect.right = this.row.getRect().right;
-  }
-  offset(dx, dy) {
-    this.topLineY += dy;
-    this.bottomLineY += dy;
-    this.objects.forEach((o) => {
-      if (o.offsetInPlace) {
-        o.offsetInPlace(0, dy);
-      } else if (o.offset) {
-        o.offset(0, dy);
-      }
-    });
-    this.rect.offsetInPlace(dx, dy);
-  }
-  draw(renderer) {
-  }
-};
-var ObjTab = class extends MusicObject {
-  constructor(row, tabConfig) {
-    super(row);
-    this.row = row;
-    this.tabConfig = tabConfig;
-    __publicField(this, "top", 0);
-    __publicField(this, "bottom", 0);
-    __publicField(this, "objects", []);
-    __publicField(this, "tuningName");
-    __publicField(this, "tuningStrings");
-    __publicField(this, "mi");
-    if (import_ts_utils_lib3.Utils.Is.isArray(tabConfig.tuning)) {
-      this.tuningName = void 0;
-      this.tuningStrings = tabConfig.tuning.map((noteName) => import_theory.Note.getNote(noteName)).reverse();
-    } else if (typeof tabConfig.tuning === "string") {
-      this.tuningName = (0, import_theory.validateTuningName)(tabConfig.tuning);
-      this.tuningStrings = (0, import_theory.getTuningStrings)(this.tuningName);
-    } else {
-      this.tuningName = "Standard";
-      this.tuningStrings = (0, import_theory.getTuningStrings)(this.tuningName);
-    }
-    this.mi = new MTab(this);
-  }
-  getMusicInterface() {
-    return this.mi;
-  }
-  getTuningName() {
-    return this.tuningName;
-  }
-  getTuningStrings() {
-    return this.tuningStrings;
-  }
-  /** Return Y coordinate of string. */
-  getStringY(stringId) {
-    return this.top + (this.bottom - this.top) / 6 * (stringId + 0.5);
-  }
-  getTopStringY() {
-    return this.getStringY(0);
-  }
-  getBottomStringY() {
-    return this.getStringY(5);
-  }
-  getTop() {
-    return this.top;
-  }
-  getBottom() {
-    return this.bottom;
-  }
-  containsVoiceId(voiceId) {
-    return !this.tabConfig.voiceIds || this.tabConfig.voiceIds.includes(voiceId);
-  }
-  calcTop() {
-    return this.top;
-  }
-  calcBottom() {
-    return this.bottom;
-  }
-  addObject(o) {
-    this.objects.push(o);
-  }
-  removeObjects() {
-    this.objects.length = 0;
-  }
-  pick(x, y) {
-    return [this];
-  }
-  layoutHeight(renderer) {
-    let { unitSize } = renderer;
-    let h = unitSize * DocumentSettings.TabHeight;
-    this.top = -h / 2;
-    this.bottom = h / 2;
-    this.rect = new DivRect(0, 0, this.top, this.bottom);
-  }
-  layoutWidth(renderer) {
-    this.rect.left = this.row.getRect().left;
-    this.rect.right = this.row.getRect().right;
-  }
-  offset(dx, dy) {
-    this.top += dy;
-    this.bottom += dy;
-    this.objects.forEach((o) => {
-      if (o.offsetInPlace) {
-        o.offsetInPlace(0, dy);
-      } else if (o.offset) {
-        o.offset(0, dy);
-      }
-    });
-    this.rect.offsetInPlace(dx, dy);
-  }
-  draw(renderer) {
-  }
-};
+var import_core15 = require("@tspro/web-music-score/core");
+var import_ts_utils_lib9 = require("@tspro/ts-utils-lib");
 
 // src/score/engine/obj-measure.ts
-var import_ts_utils_lib9 = require("@tspro/ts-utils-lib");
+var import_ts_utils_lib8 = require("@tspro/ts-utils-lib");
+var import_theory9 = require("@tspro/web-music-score/theory");
 var import_theory10 = require("@tspro/web-music-score/theory");
-var import_theory11 = require("@tspro/web-music-score/theory");
 
 // src/score/engine/acc-state.ts
-var import_theory2 = require("@tspro/web-music-score/theory");
+var import_theory = require("@tspro/web-music-score/theory");
 var AccidentalState = class {
   constructor(measure) {
     this.measure = measure;
@@ -1206,7 +970,7 @@ var AccidentalState = class {
   }
   getAccidentalFromKeySignature(diatonicId) {
     let ks = this.measure.getKeySignature();
-    let accNote = ks.getOrderedAccidentalNotes().find((accNote2) => accNote2.diatonicClass === import_theory2.Note.getDiatonicClass(diatonicId));
+    let accNote = ks.getOrderedAccidentalNotes().find((accNote2) => accNote2.diatonicClass === import_theory.Note.getDiatonicClass(diatonicId));
     return accNote ? accNote.accidental : void 0;
   }
   setAccidental(note) {
@@ -1220,7 +984,7 @@ var AccidentalState = class {
 };
 
 // src/score/engine/obj-signature.ts
-var import_theory3 = require("@tspro/web-music-score/theory");
+var import_theory2 = require("@tspro/web-music-score/theory");
 
 // src/score/engine/obj-image.ts
 var ObjImage = class extends MusicObject {
@@ -1268,7 +1032,7 @@ var ObjImage = class extends MusicObject {
 };
 
 // src/score/engine/obj-accidental.ts
-var import_core4 = require("@tspro/web-music-score/core");
+var import_core3 = require("@tspro/web-music-score/core");
 var ObjAccidental = class extends MusicObject {
   constructor(parent, diatonicId, accidental, color = "black") {
     super(parent);
@@ -1303,7 +1067,7 @@ var ObjAccidental = class extends MusicObject {
         this.rect = DivRect.createSections(unitSize * 1, unitSize * 1, unitSize * 1, unitSize * 1);
         break;
       default:
-        throw new import_core4.MusicError(import_core4.MusicErrorType.Score, "Invalid accidental value: " + this.accidental);
+        throw new import_core3.MusicError(import_core3.MusicErrorType.Score, "Invalid accidental value: " + this.accidental);
     }
   }
   offset(dx, dy) {
@@ -1516,7 +1280,7 @@ var ObjText = class extends MusicObject {
 };
 
 // src/score/engine/obj-signature.ts
-var import_core5 = require("@tspro/web-music-score/core");
+var import_core4 = require("@tspro/web-music-score/core");
 var ObjSignature = class extends MusicObject {
   constructor(measure, staff) {
     super(measure);
@@ -1561,7 +1325,7 @@ var ObjSignature = class extends MusicObject {
       let newKeySignature = measure.getKeySignature();
       this.ksNeutralizeAccidentals = [];
       this.ksNewAccidentals = [];
-      if (prevKeySignature && !import_theory3.KeySignature.equals(newKeySignature, prevKeySignature)) {
+      if (prevKeySignature && !import_theory2.KeySignature.equals(newKeySignature, prevKeySignature)) {
         prevKeySignature.getOrderedAccidentalNotes().forEach((accNote) => {
           this.ksNeutralizeAccidentals.push(new ObjAccidental(this, this.getAccidentalDiatonicId(accNote), 0));
         });
@@ -1587,7 +1351,7 @@ var ObjSignature = class extends MusicObject {
   }
   updateTempo(showTempo) {
     if (showTempo) {
-      let tempoStr = (0, import_theory3.getTempoString)(this.measure.getTempo());
+      let tempoStr = (0, import_theory2.getTempoString)(this.measure.getTempo());
       this.tempoText = new ObjText(this, tempoStr, 0.5, 1);
     } else {
       this.tempoText = void 0;
@@ -1610,9 +1374,9 @@ var ObjSignature = class extends MusicObject {
       }
     }
     if (bottomAccidentalDiatonicId !== void 0) {
-      return import_theory3.Note.findNextDiatonicIdAbove(accNote.diatonicId, bottomAccidentalDiatonicId, false);
+      return import_theory2.Note.findNextDiatonicIdAbove(accNote.diatonicId, bottomAccidentalDiatonicId, false);
     } else {
-      throw new import_core5.MusicError(import_core5.MusicErrorType.Score, "Cannot get accidental diatonicId because note has no accidental.");
+      throw new import_core4.MusicError(import_core4.MusicErrorType.Score, "Cannot get accidental diatonicId because note has no accidental.");
     }
   }
   pick(x, y) {
@@ -1782,22 +1546,24 @@ var ObjSignature = class extends MusicObject {
 };
 
 // src/score/engine/player.ts
-var import_ts_utils_lib6 = require("@tspro/ts-utils-lib");
-var import_theory8 = require("@tspro/web-music-score/theory");
+var import_ts_utils_lib5 = require("@tspro/ts-utils-lib");
+var import_theory7 = require("@tspro/web-music-score/theory");
 var Audio = __toESM(require("@tspro/web-music-score/audio"));
 
 // src/score/engine/obj-rhythm-column.ts
-var import_theory7 = require("@tspro/web-music-score/theory");
+var import_theory6 = require("@tspro/web-music-score/theory");
 
 // src/score/engine/obj-arpeggio.ts
-var _ObjArpeggio = class _ObjArpeggio extends MusicObject {
-  constructor(col, arpeggioDir) {
+var ObjArpeggio = class extends MusicObject {
+  constructor(col, line, arpeggioDir) {
     super(col);
     this.col = col;
+    this.line = line;
     this.arpeggioDir = arpeggioDir;
     __publicField(this, "topArrowHeight", 0);
     __publicField(this, "bottomArrowHeight", 0);
     __publicField(this, "cycleHeight", 0);
+    __publicField(this, "numCycles", 0);
     __publicField(this, "color", "black");
     __publicField(this, "mi");
     this.mi = new MArpeggio(this);
@@ -1812,10 +1578,13 @@ var _ObjArpeggio = class _ObjArpeggio extends MusicObject {
     let { unitSize } = renderer;
     this.topArrowHeight = this.arpeggioDir === 0 /* Up */ ? unitSize : 0;
     this.bottomArrowHeight = this.arpeggioDir === 1 /* Down */ ? unitSize : 0;
+    let top = this.line.getTopLineY();
+    let bottom = this.line.getBottomLineY();
     this.cycleHeight = unitSize * 2;
+    this.numCycles = Math.ceil((bottom - top) / this.cycleHeight) + 2;
     let width = unitSize * 2;
-    let height = _ObjArpeggio.NumCycles * this.cycleHeight + this.topArrowHeight + this.bottomArrowHeight;
-    this.rect = new DivRect(-width / 2, width / 2, -height / 2, height / 2);
+    let height = this.numCycles * this.cycleHeight;
+    this.rect = new DivRect(-width / 2, width / 2, -height / 2 - this.topArrowHeight, height / 2 + this.bottomArrowHeight);
   }
   offset(dx, dy) {
     this.rect.offsetInPlace(dx, dy);
@@ -1825,14 +1594,13 @@ var _ObjArpeggio = class _ObjArpeggio extends MusicObject {
     if (!ctx) {
       return;
     }
-    let { lineWidth, unitSize } = renderer;
+    let { lineWidth } = renderer;
     let { rect, topArrowHeight, bottomArrowHeight } = this;
     renderer.drawDebugRect(this.rect);
     ctx.strokeStyle = ctx.fillStyle = this.color;
     ctx.lineWidth = lineWidth * 2;
     ctx.beginPath();
-    for (let i = 0; i < _ObjArpeggio.NumCycles; i++) {
-      let y = rect.top + topArrowHeight + i * this.cycleHeight;
+    for (let i = 0, y = rect.top + topArrowHeight; i < this.numCycles; i++, y += this.cycleHeight) {
       ctx.moveTo(rect.centerX, y);
       ctx.quadraticCurveTo(rect.left, y + this.cycleHeight / 4, rect.centerX, y + this.cycleHeight / 2);
       ctx.quadraticCurveTo(rect.right, y + this.cycleHeight * 3 / 4, rect.centerX, y + this.cycleHeight);
@@ -1841,31 +1609,29 @@ var _ObjArpeggio = class _ObjArpeggio extends MusicObject {
     if (topArrowHeight > 0) {
       ctx.beginPath();
       ctx.moveTo(rect.centerX, rect.top);
-      ctx.lineTo(rect.right, rect.top + unitSize);
-      ctx.lineTo(rect.left, rect.top + unitSize);
+      ctx.lineTo(rect.right, rect.top + topArrowHeight);
+      ctx.lineTo(rect.left, rect.top + topArrowHeight);
       ctx.fill();
     }
     if (bottomArrowHeight > 0) {
       ctx.beginPath();
       ctx.moveTo(rect.centerX, rect.bottom);
-      ctx.lineTo(rect.left, rect.bottom - unitSize);
-      ctx.lineTo(rect.right, rect.bottom - unitSize);
+      ctx.lineTo(rect.left, rect.bottom - bottomArrowHeight);
+      ctx.lineTo(rect.right, rect.bottom - bottomArrowHeight);
       ctx.fill();
     }
   }
 };
-__publicField(_ObjArpeggio, "NumCycles", 5);
-var ObjArpeggio = _ObjArpeggio;
 
 // src/score/engine/obj-rest.ts
-var import_theory4 = require("@tspro/web-music-score/theory");
-var import_core6 = require("@tspro/web-music-score/core");
+var import_theory3 = require("@tspro/web-music-score/theory");
+var import_core5 = require("@tspro/web-music-score/core");
 function getDiatonicIdFromStaffPos(staffPos) {
   if (typeof staffPos === "number") {
-    return import_theory4.Note.getChromaticNote(staffPos).diatonicId;
+    return import_theory3.Note.getChromaticNote(staffPos).diatonicId;
   } else if (typeof staffPos === "string") {
-    return import_theory4.Note.getNote(staffPos).diatonicId;
-  } else if (staffPos instanceof import_theory4.Note) {
+    return import_theory3.Note.getNote(staffPos).diatonicId;
+  } else if (staffPos instanceof import_theory3.Note) {
     return staffPos.diatonicId;
   } else {
     return void 0;
@@ -1921,7 +1687,7 @@ var ObjRest = class extends MusicObject {
       let hasStaff = this.row.hasStaff;
       let staff2 = this.row.getStaff(diatonicId);
       if (hasStaff && !staff2) {
-        throw new import_core6.MusicError(import_core6.MusicErrorType.Score, "Rest staffPos is out of staff boundaries!");
+        throw new import_core5.MusicError(import_core5.MusicErrorType.Score, "Rest staffPos is out of staff boundaries!");
       }
     }
     this.ownDiatonicId = this.measure.updateOwnDiatonicId(voiceId, diatonicId);
@@ -1935,7 +1701,7 @@ var ObjRest = class extends MusicObject {
     }
     this.color = (_a = options == null ? void 0 : options.color) != null ? _a : "black";
     this.hide = (_b = options == null ? void 0 : options.hide) != null ? _b : false;
-    this.rhythmProps = new import_theory4.RhythmProps(noteLength, options == null ? void 0 : options.dotted, options == null ? void 0 : options.triplet);
+    this.rhythmProps = new import_theory3.RhythmProps(noteLength, options == null ? void 0 : options.dotted, options == null ? void 0 : options.triplet);
     this.mi = new MRest(this);
   }
   getMusicInterface() {
@@ -1962,6 +1728,15 @@ var ObjRest = class extends MusicObject {
   get triplet() {
     return this.rhythmProps.triplet;
   }
+  getStaticObjects(line) {
+    let staticObjects = [];
+    this.staffObjects.forEach((obj) => {
+      if (obj.staff === line) {
+        staticObjects.push(obj);
+      }
+    });
+    return staticObjects;
+  }
   pick(x, y) {
     if (!this.getRect().contains(x, y)) {
       return [];
@@ -2000,22 +1775,22 @@ var ObjRest = class extends MusicObject {
   }
   getRestDotVerticalDisplacement(noteLength) {
     switch (noteLength) {
-      case import_theory4.NoteLength.Whole:
+      case import_theory3.NoteLength.Whole:
         return 1;
-      case import_theory4.NoteLength.Half:
+      case import_theory3.NoteLength.Half:
         return -1;
-      case import_theory4.NoteLength.Quarter:
+      case import_theory3.NoteLength.Quarter:
         return -1;
-      case import_theory4.NoteLength.Eighth:
+      case import_theory3.NoteLength.Eighth:
         return -1;
-      case import_theory4.NoteLength.Sixteenth:
+      case import_theory3.NoteLength.Sixteenth:
         return -1;
-      case import_theory4.NoteLength.ThirtySecond:
+      case import_theory3.NoteLength.ThirtySecond:
         return -3;
-      case import_theory4.NoteLength.SixtyFourth:
+      case import_theory3.NoteLength.SixtyFourth:
         return -3;
       default:
-        throw new import_core6.MusicError(import_core6.MusicErrorType.Score, "Cannot get rest dot vertical displacement because note length is invalid.");
+        throw new import_core5.MusicError(import_core5.MusicErrorType.Score, "Cannot get rest dot vertical displacement because note length is invalid.");
     }
   }
   updateAccidentalState(accState) {
@@ -2033,17 +1808,17 @@ var ObjRest = class extends MusicObject {
     let rightw = 0;
     let toph = 0;
     let bottomh = 0;
-    if (noteLength === import_theory4.NoteLength.Whole) {
+    if (noteLength === import_theory3.NoteLength.Whole) {
       leftw = unitSize;
       rightw = unitSize;
       toph = 0;
       bottomh = unitSize;
-    } else if (noteLength === import_theory4.NoteLength.Half) {
+    } else if (noteLength === import_theory3.NoteLength.Half) {
       leftw = unitSize;
       rightw = unitSize;
       toph = unitSize;
       bottomh = 0;
-    } else if (noteLength === import_theory4.NoteLength.Quarter) {
+    } else if (noteLength === import_theory3.NoteLength.Quarter) {
       leftw = unitSize * 1;
       rightw = unitSize * 1;
       toph = unitSize * 3.2;
@@ -2102,11 +1877,11 @@ var ObjRest = class extends MusicObject {
       let { dotRect, restRect } = obj;
       let x = restRect.centerX;
       let y = restRect.centerY;
-      if (noteLength === import_theory4.NoteLength.Whole) {
+      if (noteLength === import_theory3.NoteLength.Whole) {
         ctx.fillRect(x - unitSize, y, unitSize * 2, unitSize);
-      } else if (noteLength === import_theory4.NoteLength.Half) {
+      } else if (noteLength === import_theory3.NoteLength.Half) {
         ctx.fillRect(x - unitSize, y - unitSize, unitSize * 2, unitSize);
-      } else if (noteLength === import_theory4.NoteLength.Quarter) {
+      } else if (noteLength === import_theory3.NoteLength.Quarter) {
         ctx.beginPath();
         ctx.moveTo(x - unitSize * 0.6, y - unitSize * 3.2);
         ctx.lineTo(x + unitSize * 0.7, y - unitSize * 1.5);
@@ -2172,13 +1947,13 @@ var ObjRest = class extends MusicObject {
 };
 
 // src/score/engine/obj-note-group.ts
-var import_ts_utils_lib5 = require("@tspro/ts-utils-lib");
-var import_theory6 = require("@tspro/web-music-score/theory");
-
-// src/score/engine/obj-beam-group.ts
 var import_ts_utils_lib4 = require("@tspro/ts-utils-lib");
 var import_theory5 = require("@tspro/web-music-score/theory");
-var import_core7 = require("@tspro/web-music-score/core");
+
+// src/score/engine/obj-beam-group.ts
+var import_ts_utils_lib3 = require("@tspro/ts-utils-lib");
+var import_theory4 = require("@tspro/web-music-score/theory");
+var import_core6 = require("@tspro/web-music-score/core");
 var adjustBeamAngle = (dx, dy) => {
   let T = DocumentSettings.BeamAngleFactor;
   if (!Number.isFinite(T) || T === 0) {
@@ -2255,19 +2030,19 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
     __publicField(this, "staffObjects", []);
     this.mi = new MBeamGroup(this);
     if (!symbols.every((s) => s.measure === symbols[0].measure)) {
-      throw new import_core7.MusicError(import_core7.MusicErrorType.Score, "All beam group symbols are not in same measure.");
+      throw new import_core6.MusicError(import_core6.MusicErrorType.Score, "All beam group symbols are not in same measure.");
     } else if (symbols.length < 2) {
-      throw new import_core7.MusicError(import_core7.MusicErrorType.Score, "Beam group need minimum 2 symbols, but " + symbols.length + " given.");
+      throw new import_core6.MusicError(import_core6.MusicErrorType.Score, "Beam group need minimum 2 symbols, but " + symbols.length + " given.");
     }
     if (triplet) {
       if (!symbols.every((s) => s.triplet)) {
-        throw new import_core7.MusicError(import_core7.MusicErrorType.Score, "Not every symbol's triplet property is true.");
+        throw new import_core6.MusicError(import_core6.MusicErrorType.Score, "Not every symbol's triplet property is true.");
       }
       let isGroup = symbols.length < 3 || symbols.some((s) => !(s instanceof ObjNoteGroup)) || symbols.some((s) => s.rhythmProps.flagCount !== symbols[0].rhythmProps.flagCount);
       if (symbols.length === 3 && symbols[0] instanceof ObjNoteGroup && symbols[symbols.length - 1] instanceof ObjNoteGroup && symbols[0].rhythmProps.flagCount === symbols[symbols.length - 1].rhythmProps.flagCount) {
         isGroup = false;
       }
-      if (symbols.some((s) => s.rhythmProps.noteLength >= import_theory5.NoteLength.Quarter)) {
+      if (symbols.some((s) => s.rhythmProps.noteLength >= import_theory4.NoteLength.Quarter)) {
         isGroup = true;
       }
       this.type = isGroup ? 2 /* TripletGroup */ : 1 /* TripletBeam */;
@@ -2279,7 +2054,7 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
       symbols.forEach((s) => s.setBeamGroup(this));
       symbols[0].measure.addBeamGroup(this);
     } else {
-      throw new import_core7.MusicError(import_core7.MusicErrorType.Score, "Cannot add beam group because some symbol already has one.");
+      throw new import_core6.MusicError(import_core6.MusicErrorType.Score, "Cannot add beam group because some symbol already has one.");
     }
   }
   static createBeam(noteGroups) {
@@ -2291,10 +2066,10 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
     if (!symbols.every((s) => s.triplet)) {
       return false;
     }
-    let MaxTripletNoteLenght = import_theory5.NoteLength.Half;
+    let MaxTripletNoteLenght = import_theory4.NoteLength.Half;
     let len = symbols.map((s) => s.rhythmProps.noteLength);
     if (symbols.length == 2) {
-      if (len[0] <= MaxTripletNoteLenght && len[1] === len[0] / 2 && len[0] / 2 >= import_theory5.MinNoteLength || len[1] <= MaxTripletNoteLenght && len[0] === len[1] / 2 && len[1] / 2 >= import_theory5.MinNoteLength) {
+      if (len[0] <= MaxTripletNoteLenght && len[1] === len[0] / 2 && len[0] / 2 >= import_theory4.MinNoteLength || len[1] <= MaxTripletNoteLenght && len[0] === len[1] / 2 && len[1] / 2 >= import_theory4.MinNoteLength) {
         new _ObjBeamGroup(symbols, true);
         return true;
       }
@@ -2418,7 +2193,7 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
       symbolY.forEach((symY, i) => {
         let symX = symbolX[i];
         if (symX !== void 0 && symY !== void 0) {
-          let beamY = import_ts_utils_lib4.Utils.Math.interpolateY(leftX, leftY, rightX, rightY, symX);
+          let beamY = import_ts_utils_lib3.Utils.Math.interpolateY(leftX, leftY, rightX, rightY, symX);
           let raiseY = symY - beamY;
           if (stemDir === 1 /* Up */ && raiseY < 0) {
             raiseBeamY = Math.min(raiseBeamY, raiseY);
@@ -2433,8 +2208,8 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
       let obj = new ObjStaffBeamGroup(mainStaff, this);
       if (this.type === 2 /* TripletGroup */) {
         let ef = unitSize / (rightX - leftX);
-        let l = import_ts_utils_lib4.Utils.Math.interpolateCoord(leftX, leftY + groupLineDy, rightX, rightY + groupLineDy, -ef);
-        let r = import_ts_utils_lib4.Utils.Math.interpolateCoord(leftX, leftY + groupLineDy, rightX, rightY + groupLineDy, 1 + ef);
+        let l = import_ts_utils_lib3.Utils.Math.interpolateCoord(leftX, leftY + groupLineDy, rightX, rightY + groupLineDy, -ef);
+        let r = import_ts_utils_lib3.Utils.Math.interpolateCoord(leftX, leftY + groupLineDy, rightX, rightY + groupLineDy, 1 + ef);
         obj.points.push(new BeamPoint(leftStaff, this, leftSymbol, l.x, l.y));
         obj.points.push(new BeamPoint(rightStaff, this, rightSymbol, r.x, r.y));
         obj.tripletNumberOffsetY = 0;
@@ -2492,7 +2267,7 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
         obj.points.forEach((pt) => {
           if (pt.symbol instanceof ObjNoteGroup) {
             if (pt !== left && pt !== right) {
-              pt.y = import_ts_utils_lib4.Utils.Math.interpolateY(left.x, left.y, right.x, right.y, pt.x);
+              pt.y = import_ts_utils_lib3.Utils.Math.interpolateY(left.x, left.y, right.x, right.y, pt.x);
             }
             pt.symbol.setStemTipY(pt.staff, pt.y);
           }
@@ -2517,8 +2292,8 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
         let r = obj.points[obj.points.length - 1];
         if (l && r) {
           let tf = obj.tripletNumber ? obj.tripletNumber.getRect().width / (r.x - l.x) * 1.2 : 0;
-          let lc = import_ts_utils_lib4.Utils.Math.interpolateCoord(l.x, l.y, r.x, r.y, 0.5 - tf / 2);
-          let rc = import_ts_utils_lib4.Utils.Math.interpolateCoord(l.x, l.y, r.x, r.y, 0.5 + tf / 2);
+          let lc = import_ts_utils_lib3.Utils.Math.interpolateCoord(l.x, l.y, r.x, r.y, 0.5 - tf / 2);
+          let rc = import_ts_utils_lib3.Utils.Math.interpolateCoord(l.x, l.y, r.x, r.y, 0.5 + tf / 2);
           let tipH = this.stemDir === 1 /* Up */ ? unitSize : -unitSize;
           renderer.drawLine(l.x, l.y, lc.x, lc.y, color, lineWidth);
           renderer.drawLine(rc.x, rc.y, r.x, r.y, color, lineWidth);
@@ -2561,13 +2336,13 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
 };
 
 // src/score/engine/obj-note-group.ts
-var import_core8 = require("@tspro/web-music-score/core");
+var import_core7 = require("@tspro/web-music-score/core");
 function sortNoteStringData(notes, strings) {
-  let stringArr = import_ts_utils_lib5.Utils.Arr.isArray(strings) ? strings : strings !== void 0 ? [strings] : [];
+  let stringArr = import_ts_utils_lib4.Utils.Arr.isArray(strings) ? strings : strings !== void 0 ? [strings] : [];
   let noteStringData = notes.map((note, i) => {
     return { note, string: stringArr[i] };
   });
-  noteStringData = import_ts_utils_lib5.Utils.Arr.removeDuplicatesCmp(noteStringData, (a, b) => import_theory6.Note.equals(a.note, b.note)).sort((a, b) => import_theory6.Note.compareFunc(a.note, b.note));
+  noteStringData = import_ts_utils_lib4.Utils.Arr.removeDuplicatesCmp(noteStringData, (a, b) => import_theory5.Note.equals(a.note, b.note)).sort((a, b) => import_theory5.Note.compareFunc(a.note, b.note));
   return {
     notes: noteStringData.map((e) => e.note),
     strings: noteStringData.every((e) => e.string === void 0) ? void 0 : noteStringData.map((e) => e.string)
@@ -2681,8 +2456,8 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
     __publicField(this, "staffObjects", []);
     __publicField(this, "tabObjects", []);
     __publicField(this, "mi");
-    if (!import_ts_utils_lib5.Utils.Is.isIntegerGte(notes.length, 1)) {
-      throw new import_core8.MusicError(import_core8.MusicErrorType.Score, "Cannot create note group object because notes array is empty.");
+    if (!import_ts_utils_lib4.Utils.Is.isIntegerGte(notes.length, 1)) {
+      throw new import_core7.MusicError(import_core7.MusicErrorType.Score, "Cannot create note group object because notes array is empty.");
     }
     let noteStringData = sortNoteStringData(notes, options == null ? void 0 : options.string);
     this.notes = noteStringData.notes;
@@ -2695,7 +2470,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
     this.staccato = (_b = options == null ? void 0 : options.staccato) != null ? _b : false;
     this.diamond = (_c = options == null ? void 0 : options.diamond) != null ? _c : false;
     this.arpeggio = solveArpeggio(options == null ? void 0 : options.arpeggio);
-    this.rhythmProps = new import_theory6.RhythmProps(noteLength, options == null ? void 0 : options.dotted, options == null ? void 0 : options.triplet);
+    this.rhythmProps = new import_theory5.RhythmProps(noteLength, options == null ? void 0 : options.dotted, options == null ? void 0 : options.triplet);
     this.mi = new MNoteGroup(this);
   }
   getMusicInterface() {
@@ -2721,13 +2496,27 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
   }
   startConnective(connectiveProps) {
     if (!this.row.hasStaff && connectiveProps.connective === 0 /* Tie */) {
-      throw new import_core8.MusicError(import_core8.MusicErrorType.Score, "Ties not implemented for guitar tabs alone, staff is required!");
+      throw new import_core7.MusicError(import_core7.MusicErrorType.Score, "Ties not implemented for guitar tabs alone, staff is required!");
     } else if (!this.row.hasStaff && connectiveProps.connective === 1 /* Slur */) {
-      throw new import_core8.MusicError(import_core8.MusicErrorType.Score, "Slurs not implemented for guitar tabs alone, staff is required!");
+      throw new import_core7.MusicError(import_core7.MusicErrorType.Score, "Slurs not implemented for guitar tabs alone, staff is required!");
     }
     this.startConnnectives.push(connectiveProps);
     this.doc.addConnectiveProps(connectiveProps);
   }
+  getStaticObjects(line) {
+    let staticObjects = [];
+    this.staffObjects.forEach((obj) => {
+      if (obj.staff === line) {
+        staticObjects.push(obj);
+      }
+    });
+    this.tabObjects.forEach((obj) => {
+      if (obj.tab === line) {
+        staticObjects.push(obj);
+      }
+    });
+    return staticObjects;
+  }
   pick(x, y) {
     if (!this.getRect().contains(x, y)) {
       return [];
@@ -2756,7 +2545,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
     if (line instanceof ObjStaff) {
       let staff = line;
       if (noteIndex < 0 || noteIndex >= this.notes.length) {
-        throw new import_core8.MusicError(import_core8.MusicErrorType.Score, "Invalid noteIndex: " + noteIndex);
+        throw new import_core7.MusicError(import_core7.MusicErrorType.Score, "Invalid noteIndex: " + noteIndex);
       }
       let obj = this.staffObjects.find((obj2) => obj2.staff === staff);
       if (!obj || noteIndex < 0 || noteIndex >= obj.noteHeadRects.length) {
@@ -2804,7 +2593,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
         case 4 /* StemTip */:
           return { x: centerX, y: stemTip.centerY + (stemDir === 1 /* Up */ ? -padding : padding) };
         default:
-          throw new import_core8.MusicError(import_core8.MusicErrorType.Score, "Invalid noteAnchor: " + noteAnchor);
+          throw new import_core7.MusicError(import_core7.MusicErrorType.Score, "Invalid noteAnchor: " + noteAnchor);
       }
     } else {
       let tab = line;
@@ -2903,7 +2692,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
   getStemHeight(renderer) {
     let { unitSize } = renderer;
     let { noteLength, flagCount } = this.rhythmProps;
-    if (noteLength >= import_theory6.NoteLength.Whole) {
+    if (noteLength >= import_theory5.NoteLength.Whole) {
       return 0;
     } else {
       let addY = this.hasBeamCount() ? DocumentSettings.BeamSeparation : DocumentSettings.FlagSeparation;
@@ -2936,15 +2725,15 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
         return Math.max(this.rhythmProps.ticks, this.measure.getMeasureTicks() - this.col.positionTicks);
       }
       let prev = tieNoteGroups[j - 1];
-      if (prev && prev.notes.some((n) => import_theory6.Note.equals(n, note))) {
+      if (prev && prev.notes.some((n) => import_theory5.Note.equals(n, note))) {
         return 0;
       }
       tieNoteGroups = tieNoteGroups.slice(j);
-      j = tieNoteGroups.findIndex((ng) => ng.notes.every((n) => !import_theory6.Note.equals(n, note)));
+      j = tieNoteGroups.findIndex((ng) => ng.notes.every((n) => !import_theory5.Note.equals(n, note)));
       if (j >= 0) {
         tieNoteGroups = tieNoteGroups.slice(0, j);
       }
-      return import_ts_utils_lib5.Utils.Math.sum(tieNoteGroups.map((ng) => ng.rhythmProps.ticks));
+      return import_ts_utils_lib4.Utils.Math.sum(tieNoteGroups.map((ng) => ng.rhythmProps.ticks));
     });
     return tiedTicks.length === 0 ? this.rhythmProps.ticks : Math.max(...tiedTicks);
   }
@@ -3105,7 +2894,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
       ctx.strokeStyle = ctx.fillStyle = color;
       ctx.lineWidth = lineWidth;
       obj.noteHeadRects.forEach((r) => {
-        let outlinedNoteHead = noteLength >= import_theory6.NoteLength.Half;
+        let outlinedNoteHead = noteLength >= import_theory5.NoteLength.Half;
         if (this.diamond) {
           if (outlinedNoteHead) {
             ctx.beginPath();
@@ -3236,7 +3025,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
         }
       });
     } else {
-      throw new import_core8.MusicError(import_core8.MusicErrorType.Score, "Cannot set triplet beam count because triplet beam group type is invalid.");
+      throw new import_core7.MusicError(import_core7.MusicErrorType.Score, "Cannot set triplet beam count because triplet beam group type is invalid.");
     }
   }
   getDotVerticalDisplacement(staff, diatonicId, stemDir) {
@@ -3262,9 +3051,9 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
 };
 
 // src/score/engine/obj-rhythm-column.ts
-var import_core9 = require("@tspro/web-music-score/core");
+var import_core8 = require("@tspro/web-music-score/core");
 var noteHeadDataCompareFunc = (a, b) => {
-  let cmp = import_theory7.Note.compareFunc(a.note, b.note);
+  let cmp = import_theory6.Note.compareFunc(a.note, b.note);
   if (cmp === 0) {
     cmp = a.noteGroup.stemDir === b.noteGroup.stemDir ? 0 : a.noteGroup.stemDir === 1 /* Up */ ? 1 : -1;
   }
@@ -3305,7 +3094,7 @@ var ObjRhythmColumn = class extends MusicObject {
     if (colId >= 0 && colId < this.measure.getColumnCount()) {
       return this.measure.getColumn(colId + 1);
     } else {
-      throw new import_core9.MusicError(import_core9.MusicErrorType.Score, "Cannot get next column in measure because current column's id in mesure is invalid.");
+      throw new import_core8.MusicError(import_core8.MusicErrorType.Score, "Cannot get next column in measure because current column's id in mesure is invalid.");
     }
   }
   /**
@@ -3332,6 +3121,22 @@ var ObjRhythmColumn = class extends MusicObject {
     this.getRect();
     return this.shapeRects;
   }
+  getStaticObjects(line) {
+    let staticObjects = [];
+    this.voiceSymbol.forEach((symbol) => {
+      if (symbol) {
+        symbol.getRect();
+        symbol.getStaticObjects(line).forEach((obj) => staticObjects.push(obj));
+      }
+    });
+    this.arpeggios.forEach((arpeggio) => {
+      if (arpeggio.line === line) {
+        arpeggio.getRect();
+        staticObjects.push(arpeggio);
+      }
+    });
+    return staticObjects;
+  }
   get doc() {
     return this.measure.doc;
   }
@@ -3369,7 +3174,7 @@ var ObjRhythmColumn = class extends MusicObject {
     validateVoiceId(voiceId);
     this.voiceSymbol[voiceId] = symbol;
     if (symbol instanceof ObjRest) {
-      if (!symbol.hide && symbol.noteLength >= import_theory7.NoteLength.Half) {
+      if (!symbol.hide && symbol.noteLength >= import_theory6.NoteLength.Half) {
         this.minDiatonicId = this.minDiatonicId === void 0 ? symbol.ownDiatonicId : Math.min(this.minDiatonicId, symbol.ownDiatonicId);
         this.maxDiatonicId = this.maxDiatonicId === void 0 ? symbol.ownDiatonicId : Math.max(this.maxDiatonicId, symbol.ownDiatonicId);
       }
@@ -3382,6 +3187,7 @@ var ObjRhythmColumn = class extends MusicObject {
       this.setupNoteHeadDisplacements();
     }
     this.requestLayout();
+    this.requestRectUpdate();
   }
   getVoiceSymbol(voiceId) {
     return this.voiceSymbol[voiceId];
@@ -3390,11 +3196,11 @@ var ObjRhythmColumn = class extends MusicObject {
     let maxNoteLength = Math.max(...this.voiceSymbol.map((s) => s.rhythmProps.noteLength));
     let w = DocumentSettings.NoteHeadWidth;
     switch (maxNoteLength) {
-      case import_theory7.NoteLength.Whole:
+      case import_theory6.NoteLength.Whole:
         return w * 5;
-      case import_theory7.NoteLength.Half:
+      case import_theory6.NoteLength.Half:
         return w * 3;
-      case import_theory7.NoteLength.Quarter:
+      case import_theory6.NoteLength.Quarter:
         return w * 2;
       default:
         return w;
@@ -3436,7 +3242,7 @@ var ObjRhythmColumn = class extends MusicObject {
     }
   }
   getNoteHeadDisplacement(noteGroup, note) {
-    let data = this.noteHeadDisplacements.find((d) => d.noteGroup === noteGroup && import_theory7.Note.equals(d.note, note));
+    let data = this.noteHeadDisplacements.find((d) => d.noteGroup === noteGroup && import_theory6.Note.equals(d.note, note));
     if ((data == null ? void 0 : data.displacement) !== void 0) {
       return data.displacement;
     } else {
@@ -3480,7 +3286,7 @@ var ObjRhythmColumn = class extends MusicObject {
         });
       }
     });
-    playerNotes.sort((a, b) => import_theory7.Note.compareFunc(a.note, b.note));
+    playerNotes.sort((a, b) => import_theory6.Note.compareFunc(a.note, b.note));
     if (this.hasArpeggio() && this.getArpeggioDir() === 1 /* Down */) {
       playerNotes.reverse();
     }
@@ -3496,6 +3302,7 @@ var ObjRhythmColumn = class extends MusicObject {
     if (!this.needLayout) {
       return;
     }
+    this.requestRectUpdate();
     this.rect = new DivRect();
     let { row } = this;
     let { unitSize } = renderer;
@@ -3510,12 +3317,12 @@ var ObjRhythmColumn = class extends MusicObject {
     });
     if (this.arpeggioDir !== void 0) {
       let arpeggioWidth = 0;
-      this.arpeggios = row.getStaves().map((staff) => {
-        let arpeggio = new ObjArpeggio(this, this.getArpeggioDir());
+      this.arpeggios = row.getNotationLines().map((line) => {
+        let arpeggio = new ObjArpeggio(this, line, this.getArpeggioDir());
         arpeggio.layout(renderer);
-        arpeggio.offset(-leftw - arpeggio.getRect().right, staff.getMiddleLineY() - arpeggio.getRect().centerY);
+        arpeggio.offset(-leftw - arpeggio.getRect().right, line.getRect().centerY - arpeggio.getRect().centerY);
         arpeggioWidth = Math.max(arpeggioWidth, arpeggio.getRect().width);
-        staff.addObject(arpeggio);
+        line.addObject(arpeggio);
         return arpeggio;
       });
       leftw += arpeggioWidth;
@@ -3533,7 +3340,6 @@ var ObjRhythmColumn = class extends MusicObject {
     this.rect.left = -leftw;
     this.rect.centerX = 0;
     this.rect.right = rightw;
-    this.requestRectUpdate();
     this.row.getStaves().forEach((staff) => {
       let minDiatonicId = void 0;
       let maxDiatonicId = void 0;
@@ -3728,7 +3534,7 @@ function isTempoText(text) {
 }
 
 // src/score/engine/extension.ts
-var import_core10 = require("@tspro/web-music-score/core");
+var import_core9 = require("@tspro/web-music-score/core");
 function getTextAnchorY(linePos) {
   switch (linePos) {
     case "bottom":
@@ -3764,7 +3570,7 @@ var Extension = class extends MusicObjectLink {
     if (head instanceof ObjText) {
       head.updateAnchorY(getTextAnchorY(linePos));
     } else {
-      throw new import_core10.MusicError(import_core10.MusicErrorType.Score, "Update anchor's y-coordinate is only implemented for text objects.");
+      throw new import_core9.MusicError(import_core9.MusicErrorType.Score, "Update anchor's y-coordinate is only implemented for text objects.");
     }
   }
   isVisible() {
@@ -3844,7 +3650,7 @@ var RitardandoSpeedDiv = 2;
 var CrescendoVolumeAdd = 0.5;
 var DiminuendoVolumeSub = 0.5;
 function calcTicksDuration(ticks, tempo) {
-  let beatTicks = new import_theory8.RhythmProps(tempo.options.beatLength, tempo.options.dotted).ticks;
+  let beatTicks = new import_theory7.RhythmProps(tempo.options.beatLength, tempo.options.dotted).ticks;
   let ticksPerMinute = tempo.beatsPerMinute * beatTicks;
   return 60 * ticks / ticksPerMinute;
 }
@@ -3900,8 +3706,8 @@ var PlayerColumnProps = class {
     return this.speed;
   }
   getTempo() {
-    let speed = import_ts_utils_lib6.Utils.Math.clamp(this.getSpeed(), 0.1, 10);
-    return (0, import_theory8.alterTempoSpeed)(this.measure.getTempo(), speed);
+    let speed = import_ts_utils_lib5.Utils.Math.clamp(this.getSpeed(), 0.1, 10);
+    return (0, import_theory7.alterTempoSpeed)(this.measure.getTempo(), speed);
   }
   setVolume(volume) {
     this.volume = volume;
@@ -3925,7 +3731,7 @@ var PlayerColumnProps = class {
       if (symbolsTicks.length === 0) {
         return 0;
       } else {
-        return import_ts_utils_lib6.Utils.Math.sum(symbolsTicks) / symbolsTicks.length;
+        return import_ts_utils_lib5.Utils.Math.sum(symbolsTicks) / symbolsTicks.length;
       }
     }
   }
@@ -4073,7 +3879,7 @@ var Player = class _Player {
         } else if (layoutObj.musicObj.getLink() instanceof Extension) {
           let extension = layoutObj.musicObj.getLink();
           let { columnRange, extensionBreakText } = extension.getExtensionRangeInfo();
-          let totalTicks = import_ts_utils_lib6.Utils.Math.sum(columnRange.map((c) => c.getTicksToNextColumn()));
+          let totalTicks = import_ts_utils_lib5.Utils.Math.sum(columnRange.map((c) => c.getTicksToNextColumn()));
           switch (text) {
             case "accel." /* accel */: {
               let startSpeed = curSpeed;
@@ -4127,11 +3933,11 @@ var Player = class _Player {
       });
       let speedArr = (_a = speedMap.get(col)) != null ? _a : [];
       if (speedArr.length > 0) {
-        curSpeed = import_ts_utils_lib6.Utils.Math.sum(speedArr) / speedArr.length;
+        curSpeed = import_ts_utils_lib5.Utils.Math.sum(speedArr) / speedArr.length;
       }
       let volumeArr = (_b = volumeMap.get(col)) != null ? _b : [];
       if (volumeArr.length > 0) {
-        curVolume = import_ts_utils_lib6.Utils.Math.sum(volumeArr) / volumeArr.length;
+        curVolume = import_ts_utils_lib5.Utils.Math.sum(volumeArr) / volumeArr.length;
       }
       col.getPlayerProps().setSpeed(curSpeed);
       col.getPlayerProps().setVolume(curVolume);
@@ -4169,11 +3975,11 @@ var Player = class _Player {
     } else {
       let playerNotes = col.getPlayerNotes();
       playerNotes.forEach((note, i) => {
-        let arpeggioDelayTicks = col.hasArpeggio() ? import_theory8.NoteLength.ThirtySecond * i : 0;
+        let arpeggioDelayTicks = col.hasArpeggio() ? import_theory7.NoteLength.ThirtySecond * i : 0;
         let noteSeconds = getDuration(note.ticks + fermataHoldTicks - arpeggioDelayTicks, tempo);
         if (noteSeconds > 0) {
           if (note.staccato) {
-            noteSeconds = Math.min(getDuration(import_theory8.NoteLength.Eighth, tempo) / 2, noteSeconds / 2);
+            noteSeconds = Math.min(getDuration(import_theory7.NoteLength.Eighth, tempo) / 2, noteSeconds / 2);
           }
           let volume = adjustVolume(col.getPlayerProps().getVolume());
           if (note.slur === "slurred") {
@@ -4323,14 +4129,12 @@ var ObjBarLine = class extends MusicObject {
       if (line instanceof ObjStaff) {
         lineCenterY = line.getMiddleLineY();
         lineDotOff = line.getDiatonicSpacing();
-        top = line.getTopLineY();
-        bottom = line.getBottomLineY();
       } else {
-        lineCenterY = (line.getBottom() + line.getTop()) / 2;
-        lineDotOff = (line.getBottom() - line.getTop()) / 6;
-        top = line.getTopStringY();
-        bottom = line.getBottomStringY();
+        lineCenterY = (line.getBottomLineY() + line.getTopLineY()) / 2;
+        lineDotOff = (line.getBottomLineY() - line.getTopLineY()) / 6;
       }
+      top = line.getTopLineY();
+      bottom = line.getBottomLineY();
       switch (barLineType) {
         case 0 /* None */:
           obj.setRect(new DivRect(0, 0, 0, top, 0, bottom));
@@ -4462,8 +4266,8 @@ var ObjBarLineRight = class extends ObjBarLine {
 };
 
 // src/score/engine/obj-ending.ts
-var import_ts_utils_lib7 = require("@tspro/ts-utils-lib");
-var import_core11 = require("@tspro/web-music-score/core");
+var import_ts_utils_lib6 = require("@tspro/ts-utils-lib");
+var import_core10 = require("@tspro/web-music-score/core");
 var ObjEnding = class extends MusicObject {
   constructor(measure, passages) {
     super(measure);
@@ -4473,10 +4277,10 @@ var ObjEnding = class extends MusicObject {
     __publicField(this, "shapeRects", []);
     __publicField(this, "mi");
     this.mi = new MEnding(this);
-    if (!import_ts_utils_lib7.Utils.Is.isIntegerGte(passages.length, 1)) {
-      throw new import_core11.MusicError(import_core11.MusicErrorType.Score, "Passages is empty.");
-    } else if (!this.passages.every((p) => import_ts_utils_lib7.Utils.Is.isIntegerGte(p, 1))) {
-      throw new import_core11.MusicError(import_core11.MusicErrorType.Score, "Invalid passages: " + this.passages);
+    if (!import_ts_utils_lib6.Utils.Is.isIntegerGte(passages.length, 1)) {
+      throw new import_core10.MusicError(import_core10.MusicErrorType.Score, "Passages is empty.");
+    } else if (!this.passages.every((p) => import_ts_utils_lib6.Utils.Is.isIntegerGte(p, 1))) {
+      throw new import_core10.MusicError(import_core10.MusicErrorType.Score, "Invalid passages: " + this.passages);
     }
     this.passages.sort((a, b) => a - b);
     let text = this.passages.map((p) => p + ".").join("");
@@ -4565,9 +4369,9 @@ var ObjFermata = class extends MusicObject {
     let { measure } = anchor;
     let { row } = measure;
     if (row.getTopStaff() !== row.getBottomStaff()) {
-      return [0 /* AboveStaff */, 1 /* BelowStaff */];
+      return [0 /* Above */, 1 /* Below */];
     } else {
-      return [0 /* AboveStaff */];
+      return [0 /* Above */];
     }
   }
   pick(x, y) {
@@ -4588,7 +4392,7 @@ var ObjFermata = class extends MusicObject {
       return;
     }
     let { lineWidth, unitSize } = renderer;
-    let upsideDown = this.pos === 1 /* BelowStaff */;
+    let upsideDown = this.pos === 1 /* Below */;
     let dy = (upsideDown ? unitSize : -unitSize) * 0.7;
     let left = this.rect.left;
     let right = this.rect.right;
@@ -4683,14 +4487,14 @@ var ObjExtensionLine = class extends MusicObject {
 };
 
 // src/score/engine/obj-measure.ts
-var import_core14 = require("@tspro/web-music-score/core");
+var import_core13 = require("@tspro/web-music-score/core");
 
 // src/score/engine/connective-props.ts
-var import_theory9 = require("@tspro/web-music-score/theory");
+var import_theory8 = require("@tspro/web-music-score/theory");
 
 // src/score/engine/obj-connective.ts
-var import_ts_utils_lib8 = require("@tspro/ts-utils-lib");
-var import_core12 = require("@tspro/web-music-score/core");
+var import_ts_utils_lib7 = require("@tspro/ts-utils-lib");
+var import_core11 = require("@tspro/web-music-score/core");
 var ObjConnective = class extends MusicObject {
   constructor(connectiveProps, line, measure, leftNoteGroup, leftNoteId, ...args) {
     super(measure);
@@ -4718,7 +4522,7 @@ var ObjConnective = class extends MusicObject {
       this.rightNoteGroup = args[0];
       this.rightNoteId = args[1];
       this.tieType = void 0;
-    } else if (import_ts_utils_lib8.Utils.Is.isEnumValue(args[0], TieType)) {
+    } else if (import_ts_utils_lib7.Utils.Is.isEnumValue(args[0], TieType)) {
       this.rightNoteGroup = void 0;
       this.rightNoteId = void 0;
       this.tieType = args[0];
@@ -4779,7 +4583,7 @@ var ObjConnective = class extends MusicObject {
       rx = contentRect.right;
       ry = leftPos.y + (rightPos.y - leftPos.y) * tLeft / (tLeft + tRight);
     } else {
-      throw new import_core12.MusicError(import_core12.MusicErrorType.Score, "Cannot layout connective object because no valid left and right note groups.");
+      throw new import_core11.MusicError(import_core11.MusicErrorType.Score, "Cannot layout connective object because no valid left and right note groups.");
     }
     let spanDy = arcDir === "up" ? -1 : 1;
     let arcHeight = spanDy * unitSize * Math.log2(rx - lx) / 3;
@@ -4788,7 +4592,7 @@ var ObjConnective = class extends MusicObject {
     this.rx = rx;
     this.ry = ry;
     this.arcHeight = this.connectiveProps.connective === 2 /* Slide */ ? 0 : arcHeight;
-    let { nx, ny } = import_ts_utils_lib8.Utils.Math.calcNormal(lx, ly, rx, ry);
+    let { nx, ny } = import_ts_utils_lib7.Utils.Math.calcNormal(lx, ly, rx, ry);
     this.cp1x = lx * 0.7 + rx * 0.3 + nx * this.arcHeight;
     this.cp1y = ly * 0.7 + ry * 0.3 + ny * this.arcHeight;
     this.cp2x = lx * 0.3 + rx * 0.7 + nx * this.arcHeight;
@@ -4848,7 +4652,7 @@ var ObjConnective = class extends MusicObject {
 };
 
 // src/score/engine/connective-props.ts
-var import_core13 = require("@tspro/web-music-score/core");
+var import_core12 = require("@tspro/web-music-score/core");
 var ConnectiveProps = class {
   constructor(connective, span, noteAnchor, startNoteGroup) {
     this.connective = connective;
@@ -4928,7 +4732,7 @@ var ConnectiveProps = class {
           let leftNoteGroup = this.noteGroups[i];
           let rightNoteGroup = this.noteGroups[i + 1];
           leftNoteGroup.notes.forEach((leftNote, leftNoteId) => {
-            let rightNoteId = rightNoteGroup.notes.findIndex((rightNote) => import_theory9.Note.equals(rightNote, leftNote));
+            let rightNoteId = rightNoteGroup.notes.findIndex((rightNote) => import_theory8.Note.equals(rightNote, leftNote));
             if (rightNoteId >= 0) {
               this.createObjConnective(leftNoteGroup, leftNoteId, rightNoteGroup, rightNoteId);
             }
@@ -4983,7 +4787,7 @@ var ConnectiveProps = class {
       addConnective(leftNoteGroup.measure, leftNoteGroup, leftNoteId, rightNoteGroup, rightNoteId);
       addConnective(rightNoteGroup.measure, leftNoteGroup, leftNoteId, rightNoteGroup, rightNoteId);
     } else {
-      throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Cannot create connective because it is jumping measures.");
+      throw new import_core12.MusicError(import_core12.MusicErrorType.Score, "Cannot create connective because it is jumping measures.");
     }
   }
 };
@@ -4991,7 +4795,7 @@ var ConnectiveProps = class {
 // src/score/engine/obj-measure.ts
 function validateVoiceId(voiceId) {
   if (getVoiceIds().indexOf(voiceId) < 0) {
-    throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Invalid voiceId: " + voiceId);
+    throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Invalid voiceId: " + voiceId);
   } else {
     return voiceId;
   }
@@ -5002,9 +4806,9 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     this.row = row;
     __publicField(this, "prevMeasure");
     __publicField(this, "nextMeasure");
-    __publicField(this, "keySignature", (0, import_theory10.getDefaultKeySignature)());
-    __publicField(this, "timeSignature", (0, import_theory11.getDefaultTimeSignature)());
-    __publicField(this, "tempo", (0, import_theory11.getDefaultTempo)());
+    __publicField(this, "keySignature", (0, import_theory9.getDefaultKeySignature)());
+    __publicField(this, "timeSignature", (0, import_theory10.getDefaultTimeSignature)());
+    __publicField(this, "tempo", (0, import_theory10.getDefaultTempo)());
     __publicField(this, "alterKeySignature");
     __publicField(this, "alterTimeSignature");
     __publicField(this, "alterTempo");
@@ -5027,7 +4831,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     __publicField(this, "voiceSymbols", []);
     __publicField(this, "lastAddedRhythmColumn");
     __publicField(this, "lastAddedRhythmSymbol");
-    __publicField(this, "addExtensionToMusicObject");
+    __publicField(this, "addExtensionToMusicObjects", []);
     __publicField(this, "layoutObjects", []);
     __publicField(this, "postMeasureBreakWidth", 0);
     __publicField(this, "passCount", 0);
@@ -5039,6 +4843,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     __publicField(this, "endRepeatPlayCount", 2);
     // play twice.
     __publicField(this, "endRepeatPlayCountText");
+    __publicField(this, "staticObjectsCache", /* @__PURE__ */ new Map());
     __publicField(this, "mi");
     this.mi = new MMeasure(this);
     this.prevMeasure = row.doc.getLastMeasure();
@@ -5087,10 +4892,10 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
       if (this.row.hasStaff) {
         diatonicId = this.row.getTopStaff().middleLineDiatonicId;
       } else {
-        diatonicId = import_theory10.Note.getNote("C4").diatonicId;
+        diatonicId = import_theory9.Note.getNote("C4").diatonicId;
       }
     }
-    return this.useDiatonicId[voiceId] = import_theory10.Note.validateDiatonicId(diatonicId);
+    return this.useDiatonicId[voiceId] = import_theory9.Note.validateDiatonicId(diatonicId);
   }
   updateOwnStemDir(symbol, setStemDir) {
     var _a, _b;
@@ -5217,23 +5022,23 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
   setKeySignature(...args) {
     var _a;
     (_a = this.getPrevMeasure()) == null ? void 0 : _a.endSection();
-    if (args[0] instanceof import_theory10.KeySignature) {
+    if (args[0] instanceof import_theory9.KeySignature) {
       this.alterKeySignature = args[0];
-    } else if (args[0] instanceof import_theory10.Scale) {
+    } else if (args[0] instanceof import_theory9.Scale) {
       this.alterKeySignature = args[0];
     } else {
       try {
         let tonic = "" + args[0];
-        let scaleType = (0, import_theory10.validateScaleType)("" + args[1]);
-        this.alterKeySignature = (0, import_theory10.getScale)(tonic, scaleType);
+        let scaleType = (0, import_theory9.validateScaleType)("" + args[1]);
+        this.alterKeySignature = (0, import_theory9.getScale)(tonic, scaleType);
       } catch (e) {
-        throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Cannot set key signature because invalid args: " + args);
+        throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Cannot set key signature because invalid args: " + args);
       }
     }
     this.updateKeySignature();
   }
   updateKeySignature() {
-    this.keySignature = this.prevMeasure ? this.prevMeasure.keySignature : (0, import_theory10.getDefaultKeySignature)();
+    this.keySignature = this.prevMeasure ? this.prevMeasure.keySignature : (0, import_theory9.getDefaultKeySignature)();
     if (this.alterKeySignature) {
       this.keySignature = this.alterKeySignature;
     }
@@ -5248,11 +5053,11 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
   setTimeSignature(timeSignature) {
     var _a;
     (_a = this.getPrevMeasure()) == null ? void 0 : _a.endSection();
-    this.alterTimeSignature = timeSignature instanceof import_theory11.TimeSignature ? timeSignature : new import_theory11.TimeSignature(timeSignature);
+    this.alterTimeSignature = timeSignature instanceof import_theory10.TimeSignature ? timeSignature : new import_theory10.TimeSignature(timeSignature);
     this.updateTimeSignature();
   }
   updateTimeSignature() {
-    this.timeSignature = this.prevMeasure ? this.prevMeasure.timeSignature : (0, import_theory11.getDefaultTimeSignature)();
+    this.timeSignature = this.prevMeasure ? this.prevMeasure.timeSignature : (0, import_theory10.getDefaultTimeSignature)();
     if (this.alterTimeSignature) {
       this.timeSignature = this.alterTimeSignature;
     }
@@ -5273,7 +5078,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
   }
   updateTempo() {
     var _a;
-    this.tempo = this.prevMeasure ? this.prevMeasure.tempo : (0, import_theory11.getDefaultTempo)();
+    this.tempo = this.prevMeasure ? this.prevMeasure.tempo : (0, import_theory10.getDefaultTempo)();
     if (this.alterTempo) {
       let beatsPerMinute = this.alterTempo.beatsPerMinute;
       let beatLength;
@@ -5301,25 +5106,18 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
   getPostMeasureBreakWidth() {
     return this.postMeasureBreakWidth;
   }
-  addLayoutObject(musicObj, layoutGroupId, verticalPos) {
-    let w = new LayoutObjectWrapper(musicObj, layoutGroupId, verticalPos);
-    this.layoutObjects.push(w);
+  addLayoutObject(musicObj, line, layoutGroupId, verticalPos) {
+    this.layoutObjects.push(new LayoutObjectWrapper(musicObj, line, layoutGroupId, verticalPos));
     this.requestLayout();
+    this.requestRectUpdate();
   }
-  addFermata(fermata) {
+  addFermata(staffTabOrGroup, fermata) {
     let anchor = fermata === 1 /* AtMeasureEnd */ ? this.barLineRight : this.lastAddedRhythmColumn;
     if (!anchor) {
-      throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Cannot add Fermata because anchor is undefined.");
+      throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Cannot add Fermata because anchor is undefined.");
     }
-    let fermataObjArr = anchor.getAnchoredLayoutObjects().map((layoutObj) => layoutObj.musicObj).filter((musicObj) => musicObj instanceof ObjFermata);
-    let hasAbove = fermataObjArr.some((obj) => obj.pos === 0 /* AboveStaff */);
-    let hasBelow = fermataObjArr.some((obj) => obj.pos === 1 /* BelowStaff */);
-    ObjFermata.getFermataPositions(anchor).forEach((fermataPos) => {
-      if (fermataPos === 0 /* AboveStaff */ && !hasAbove) {
-        this.addLayoutObject(new ObjFermata(anchor, fermataPos), 0 /* Fermata */, fermataPos);
-      } else if (fermataPos === 1 /* BelowStaff */ && !hasBelow) {
-        this.addLayoutObject(new ObjFermata(anchor, fermataPos), 0 /* Fermata */, fermataPos);
-      }
+    this.forEachStaffGroup(staffTabOrGroup, 0 /* Above */, (line, vpos) => {
+      this.addLayoutObject(new ObjFermata(anchor, vpos), line, 0 /* Fermata */, vpos);
     });
     this.disableExtension();
     this.requestLayout();
@@ -5327,15 +5125,20 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
   hasFermata(anchor) {
     return this.layoutObjects.some((layoutObj) => layoutObj.musicObj instanceof ObjFermata && layoutObj.anchor === anchor);
   }
-  addNavigation(navigation, ...args) {
+  addNavigation(staffTabOrGroup, navigation, ...args) {
+    let addLayoutObjectProps = void 0;
     switch (navigation) {
       case 10 /* Ending */:
         if (this.navigationSet.has(navigation)) {
-          throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Cannot add ending beasure measure already has one.");
+          throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Cannot add ending beasure measure already has one.");
         }
         let anchor = this;
         let passages = args;
-        this.addLayoutObject(new ObjEnding(anchor, passages), 3 /* Ending */, 0 /* AboveStaff */);
+        addLayoutObjectProps = {
+          createObj: () => new ObjEnding(anchor, passages),
+          layoutGroupId: 3 /* Ending */,
+          defaultVerticalPos: 0 /* Above */
+        };
         break;
       case 1 /* DC_al_Coda */:
       case 0 /* DC_al_Fine */:
@@ -5343,37 +5146,53 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
       case 2 /* DS_al_Fine */: {
         let anchor2 = this.barLineRight;
         let text = getNavigationString(navigation);
-        this.addLayoutObject(new ObjText(anchor2, text, 1, 1), 2 /* Navigation */, 0 /* AboveStaff */);
-        this.addNavigation(9 /* EndRepeat */);
+        addLayoutObjectProps = {
+          createObj: () => new ObjText(anchor2, text, 1, 1),
+          layoutGroupId: 2 /* Navigation */,
+          defaultVerticalPos: 0 /* Above */
+        };
+        this.addNavigation(staffTabOrGroup, 9 /* EndRepeat */);
         this.endSong();
         break;
       }
       case 7 /* Fine */: {
         let anchor2 = this.barLineRight;
         let text = getNavigationString(navigation);
-        this.addLayoutObject(new ObjText(anchor2, text, 1, 1), 2 /* Navigation */, 0 /* AboveStaff */);
+        addLayoutObjectProps = {
+          createObj: () => new ObjText(anchor2, text, 1, 1),
+          layoutGroupId: 2 /* Navigation */,
+          defaultVerticalPos: 0 /* Above */
+        };
         break;
       }
       case 6 /* Segno */:
       case 4 /* Coda */: {
         let anchor2 = this.barLineLeft;
         let text = getNavigationString(navigation);
-        this.addLayoutObject(new ObjSpecialText(anchor2, text), 2 /* Navigation */, 0 /* AboveStaff */);
+        addLayoutObjectProps = {
+          createObj: () => new ObjSpecialText(anchor2, text),
+          layoutGroupId: 2 /* Navigation */,
+          defaultVerticalPos: 0 /* Above */
+        };
         break;
       }
       case 5 /* toCoda */: {
         let anchor2 = this.barLineRight;
         let text = getNavigationString(navigation);
-        this.addLayoutObject(new ObjSpecialText(anchor2, text), 2 /* Navigation */, 0 /* AboveStaff */);
+        addLayoutObjectProps = {
+          createObj: () => new ObjSpecialText(anchor2, text),
+          layoutGroupId: 2 /* Navigation */,
+          defaultVerticalPos: 0 /* Above */
+        };
         break;
       }
       case 9 /* EndRepeat */:
         if (args.length === 0) {
           this.endRepeatPlayCount = 2;
-        } else if (import_ts_utils_lib9.Utils.Is.isIntegerGte(args[0], 2)) {
+        } else if (import_ts_utils_lib8.Utils.Is.isIntegerGte(args[0], 2)) {
           this.endRepeatPlayCount = args[0];
         } else {
-          throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Invalid end repeat play count (should be 2 or greater integer): " + args[0]);
+          throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Invalid end repeat play count (should be 2 or greater integer): " + args[0]);
         }
         if (this.endRepeatPlayCount !== 2) {
           let textProps = {
@@ -5384,6 +5203,11 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
         }
         break;
     }
+    if (addLayoutObjectProps) {
+      this.forEachStaffGroup(staffTabOrGroup, addLayoutObjectProps.defaultVerticalPos, (line, vpos) => {
+        this.addLayoutObject(addLayoutObjectProps.createObj(), line, addLayoutObjectProps.layoutGroupId, vpos);
+      });
+    }
     this.navigationSet.add(navigation);
     this.disableExtension();
   }
@@ -5399,70 +5223,125 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
   addConnective(connective, ...args) {
     let anchor = this.lastAddedRhythmSymbol;
     if (!(anchor instanceof ObjNoteGroup)) {
-      throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Connective can be added to note group only.");
+      throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Connective can be added to note group only.");
     }
     if (connective === 0 /* Tie */) {
-      let tieSpan = import_ts_utils_lib9.Utils.Is.isInteger(args[0]) || import_ts_utils_lib9.Utils.Is.isEnumValue(args[0], TieType) ? args[0] : 2;
-      let noteAnchor = import_ts_utils_lib9.Utils.Is.isEnumValue(args[1], NoteAnchor) ? args[1] : 0 /* Auto */;
+      let tieSpan = import_ts_utils_lib8.Utils.Is.isInteger(args[0]) || import_ts_utils_lib8.Utils.Is.isEnumValue(args[0], TieType) ? args[0] : 2;
+      let noteAnchor = import_ts_utils_lib8.Utils.Is.isEnumValue(args[1], NoteAnchor) ? args[1] : 0 /* Auto */;
       anchor.startConnective(new ConnectiveProps(0 /* Tie */, tieSpan, noteAnchor, anchor));
     } else if (connective === 1 /* Slur */) {
-      let slurSpan = import_ts_utils_lib9.Utils.Is.isInteger(args[0]) ? args[0] : 2;
-      let noteAnchor = import_ts_utils_lib9.Utils.Is.isEnumValue(args[1], NoteAnchor) ? args[1] : 0 /* Auto */;
+      let slurSpan = import_ts_utils_lib8.Utils.Is.isInteger(args[0]) ? args[0] : 2;
+      let noteAnchor = import_ts_utils_lib8.Utils.Is.isEnumValue(args[1], NoteAnchor) ? args[1] : 0 /* Auto */;
       anchor.startConnective(new ConnectiveProps(1 /* Slur */, slurSpan, noteAnchor, anchor));
     } else if (connective === 2 /* Slide */) {
-      let noteAnchor = import_ts_utils_lib9.Utils.Is.isEnumValue(args[0], NoteAnchor) ? args[0] : 0 /* Auto */;
+      let noteAnchor = import_ts_utils_lib8.Utils.Is.isEnumValue(args[0], NoteAnchor) ? args[0] : 0 /* Auto */;
       anchor.startConnective(new ConnectiveProps(2 /* Slide */, 2, noteAnchor, anchor));
     }
   }
-  addLabel(label, text) {
+  forEachStaffGroup(staffTabOrGroup, defaultVerticalPos, add) {
+    const lines = this.row.getNotationLines();
+    const performAdd = (lineId, vpos, depth) => {
+      if (depth >= 5) {
+        return;
+      }
+      let success = false;
+      if (typeof lineId === "number") {
+        if (lines[lineId]) {
+          add(lines[lineId], vpos);
+          success = true;
+        }
+      } else if (typeof lineId === "string" && lineId.length > 0) {
+        lines.filter((l) => l.name === lineId).forEach((line) => {
+          add(line, vpos);
+          success = true;
+        });
+      }
+      if (typeof lineId === "string" && !success) {
+        let grp = this.doc.getStaffGroup(lineId);
+        if (grp) {
+          (import_ts_utils_lib8.Utils.Is.isArray(grp.staffsTabsAndGroups) ? grp.staffsTabsAndGroups : [grp.staffsTabsAndGroups]).forEach((lineId2) => {
+            switch (grp.verticalPosition) {
+              case 0 /* Above */:
+                performAdd(lineId2, 0 /* Above */, depth + 1);
+                break;
+              case 1 /* Below */:
+                performAdd(lineId2, 1 /* Below */, depth + 1);
+                break;
+              case 2 /* Both */:
+                performAdd(lineId2, 0 /* Above */, depth + 1);
+                performAdd(lineId2, 1 /* Below */, depth + 1);
+                break;
+              case 3 /* Auto */:
+                performAdd(lineId2, defaultVerticalPos, depth + 1);
+                break;
+            }
+          });
+        }
+      }
+    };
+    if (staffTabOrGroup === void 0) {
+      if (lines.length >= 2 && lines[0] instanceof ObjStaff && lines[0].staffConfig.clef === "G" /* G */ && lines[0].isGrand() && lines[1] instanceof ObjStaff && lines[1].staffConfig.clef === "F" /* F */ && lines[1].isGrand()) {
+        performAdd(defaultVerticalPos === 1 /* Below */ ? 1 : 0, defaultVerticalPos, 0);
+      } else {
+        performAdd(0, defaultVerticalPos, 0);
+      }
+    } else {
+      performAdd(staffTabOrGroup, defaultVerticalPos, 0);
+    }
+  }
+  addLabel(staffTabOrGroup, label, text) {
     let anchor = this.lastAddedRhythmColumn;
     if (!anchor) {
-      throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Cannot add label because anchor is undefined.");
+      throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Cannot add label because anchor is undefined.");
     } else if (text.length === 0) {
-      throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Cannot add label because label text is empty.");
+      throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Cannot add label because label text is empty.");
     }
     let textProps = { text };
     let layoutGroupId;
-    let verticalPos;
+    let defaultVerticalPos;
     switch (label) {
       case 0 /* Note */:
         layoutGroupId = 1 /* NoteLabel */;
-        verticalPos = 1 /* BelowStaff */;
+        defaultVerticalPos = 1 /* Below */;
         break;
       case 1 /* Chord */:
         layoutGroupId = 6 /* ChordLabel */;
-        verticalPos = 0 /* AboveStaff */;
+        defaultVerticalPos = 0 /* Above */;
         break;
     }
-    let textObj = new ObjText(anchor, textProps, 0.5, 1);
-    this.addLayoutObject(textObj, layoutGroupId, verticalPos);
-    this.enableExtension(textObj);
+    this.forEachStaffGroup(staffTabOrGroup, defaultVerticalPos, (line, vpos) => {
+      let textObj = new ObjText(anchor, textProps, 0.5, 1);
+      this.addLayoutObject(textObj, line, layoutGroupId, vpos);
+      this.enableExtension(textObj);
+    });
   }
-  addAnnotation(annotation, text) {
+  addAnnotation(staffTabOrGroup, annotation, text) {
     let anchor = this.lastAddedRhythmColumn;
     if (!anchor) {
-      throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Cannot add annotation because anchor is undefined.");
+      throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Cannot add annotation because anchor is undefined.");
     } else if (text.length === 0) {
-      throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Cannot add annotation because annotation text is empty.");
+      throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Cannot add annotation because annotation text is empty.");
     }
     let textProps = { text };
     let layoutGroupId;
-    let verticalPos;
+    let defaultVerticalPos;
     switch (annotation) {
       case 0 /* Dynamics */:
         layoutGroupId = 5 /* DynamicsAnnotation */;
-        verticalPos = 0 /* AboveStaff */;
+        defaultVerticalPos = 0 /* Above */;
         textProps.italic = true;
         break;
       case 1 /* Tempo */:
         layoutGroupId = 4 /* TempoAnnotation */;
-        verticalPos = 0 /* AboveStaff */;
+        defaultVerticalPos = 0 /* Above */;
         textProps.italic = true;
         break;
     }
-    let textObj = new ObjText(anchor, textProps, 0.5, 1);
-    this.addLayoutObject(textObj, layoutGroupId, verticalPos);
-    this.enableExtension(textObj);
+    this.forEachStaffGroup(staffTabOrGroup, defaultVerticalPos, (line, vpos) => {
+      let textObj = new ObjText(anchor, textProps, 0.5, 1);
+      this.addLayoutObject(textObj, line, layoutGroupId, vpos);
+      this.enableExtension(textObj);
+    });
   }
   endSong() {
     this.isEndSong = true;
@@ -5484,27 +5363,29 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     this.doc.requestNewRow();
     this.disableExtension();
   }
-  enableExtension(musicObj) {
-    this.addExtensionToMusicObject = musicObj;
+  enableExtension(musicObject) {
+    this.addExtensionToMusicObjects.push(musicObject);
   }
   disableExtension() {
-    this.addExtensionToMusicObject = void 0;
+    this.addExtensionToMusicObjects = [];
   }
   addExtension(extensionLength, extensionVisible) {
-    let musicObj = this.addExtensionToMusicObject;
-    let anchor = musicObj == null ? void 0 : musicObj.getParent();
-    if (musicObj instanceof ObjText && anchor instanceof ObjRhythmColumn) {
-      let lineStyle = "dashed";
-      let linePos = "bottom";
-      let extension = new Extension(musicObj, anchor, extensionLength, extensionVisible, lineStyle, linePos);
-      musicObj.setLink(extension);
-      this.disableExtension();
-      this.requestLayout();
-    } else if (musicObj === void 0) {
-      throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Cannot add extension because music object to attach it to is undefined.");
-    } else {
-      throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Cannot add extension becaue no compatible music object to attach it to.");
+    this.addExtensionToMusicObjects.forEach((musicObj) => {
+      let anchor = musicObj.getParent();
+      if (musicObj instanceof ObjText && anchor instanceof ObjRhythmColumn) {
+        let lineStyle = "dashed";
+        let linePos = "bottom";
+        let extension = new Extension(musicObj, anchor, extensionLength, extensionVisible, lineStyle, linePos);
+        musicObj.setLink(extension);
+      } else {
+        throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Cannot add extension becaue no compatible music object to attach it to.");
+      }
+    });
+    if (this.addExtensionToMusicObjects.length === 0) {
+      throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Cannot add extension because music object to attach it to is undefined.");
     }
+    this.disableExtension();
+    this.requestLayout();
   }
   addRhythmSymbol(voiceId, symbol) {
     let { col } = symbol;
@@ -5516,7 +5397,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     this.lastAddedRhythmSymbol = symbol;
   }
   addNoteGroup(voiceId, notes, noteLength, options) {
-    let notes2 = notes.map((note) => typeof note === "string" ? import_theory10.Note.getNote(note) : note);
+    let notes2 = notes.map((note) => typeof note === "string" ? import_theory9.Note.getNote(note) : note);
     let col = this.getRhythmColumn(voiceId);
     this.addRhythmSymbol(voiceId, new ObjNoteGroup(col, voiceId, notes2, noteLength, options));
   }
@@ -5548,7 +5429,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
         return col2;
       }
     }
-    throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Error in rhythm column. Should never get here.");
+    throw new import_core13.MusicError(import_core13.MusicErrorType.Score, "Error in rhythm column. Should never get here.");
   }
   getMeasureTicks() {
     return this.getTimeSignature().measureTicks;
@@ -5600,11 +5481,15 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
   getStaffLineRight() {
     return this.barLineRight.getRect().centerX;
   }
-  getStaticObjects() {
-    return [
-      ...this.getColumns(),
-      ...this.layoutObjects.filter((layoutObj) => layoutObj.isPositionResolved()).map((layoutObj) => layoutObj.musicObj)
-    ];
+  getStaticObjects(line) {
+    let staticObjects = this.staticObjectsCache.get(line);
+    if (!staticObjects) {
+      staticObjects = [];
+      this.getColumns().forEach((col) => col.getStaticObjects(line).forEach((obj) => staticObjects == null ? void 0 : staticObjects.push(obj)));
+      this.staticObjectsCache.set(line, staticObjects);
+    }
+    let layoutObjects = this.layoutObjects.filter((layoutObj) => layoutObj.line === line && layoutObj.isPositionResolved()).map((layoutObj) => layoutObj.musicObj);
+    return layoutObjects.length > 0 ? [...staticObjects, ...layoutObjects] : staticObjects;
   }
   removeLayoutObjects(musicObj) {
     this.layoutObjects = this.layoutObjects.filter((layoutObj) => {
@@ -5632,16 +5517,22 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
   }
   createExtensions() {
     this.layoutObjects.forEach((layoutObj) => {
-      if (layoutObj.musicObj.getLink() instanceof Extension) {
-        let extension = layoutObj.musicObj.getLink();
-        if (extension.getHead() === layoutObj.musicObj) {
-          extension.getTails().forEach((musicObj) => layoutObj.measure.removeLayoutObjects(musicObj));
+      var _a;
+      let { musicObj, measure, layoutGroupId, verticalPos, line } = layoutObj;
+      if (musicObj.getLink() instanceof Extension) {
+        let extension = musicObj.getLink();
+        if (extension.getHead() === musicObj) {
+          extension.getTails().forEach((musicObj2) => measure.removeLayoutObjects(musicObj2));
           let { startColumn, endColumn } = extension.getExtensionRangeInfo();
           if (extension.isVisible() && startColumn !== endColumn) {
             for (let m = startColumn.measure; m !== void 0; m = m === endColumn.measure ? void 0 : m.getNextMeasure()) {
               let leftObj = m === startColumn.measure ? extension.getHead() : m.getBarLineLeft();
               let rightObj = m === endColumn.measure ? endColumn : m.getBarLineRight();
-              m.addLayoutObject(new ObjExtensionLine(m, extension, leftObj, rightObj), layoutObj.layoutGroupId, layoutObj.verticalPos);
+              const lines = m.row.getNotationLines();
+              let line2 = (_a = lines.find((l) => l.name !== "" && l.name === line.name)) != null ? _a : lines[line.id];
+              if (line2) {
+                m.addLayoutObject(new ObjExtensionLine(m, extension, leftObj, rightObj), line2, layoutGroupId, verticalPos);
+              }
             }
           }
         }
@@ -5748,12 +5639,12 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     let consumedTicks = this.getConsumedTicks(voiceId);
     let remainingTicks = measureTicks - consumedTicks;
     let rests = [];
-    let noteLengthValues = import_ts_utils_lib9.Utils.Enum.getEnumValues(import_theory10.NoteLength);
+    let noteLengthValues = import_ts_utils_lib8.Utils.Enum.getEnumValues(import_theory9.NoteLength);
     while (remainingTicks > 0) {
       noteLengthValues.forEach((restLength) => {
-        let restValue = new import_theory10.RhythmProps(restLength, false);
+        let restValue = new import_theory9.RhythmProps(restLength, false);
         if (restValue.canDot()) {
-          let dottedRestValue = new import_theory10.RhythmProps(restLength, true);
+          let dottedRestValue = new import_theory9.RhythmProps(restLength, true);
           while (dottedRestValue.ticks <= remainingTicks) {
             rests.push(dottedRestValue);
             remainingTicks -= dottedRestValue.ticks;
@@ -5778,6 +5669,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     if (!this.needLayout) {
       return;
     }
+    this.staticObjectsCache.clear();
     this.requestRectUpdate();
     let { unitSize } = renderer;
     this.postMeasureBreakWidth = this.hasPostMeasureBreak() ? DocumentSettings.PostMeasureBreakWidth * unitSize : 0;
@@ -5809,7 +5701,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     if (this === this.row.getFirstMeasure()) {
       this.row.getTabs().forEach((tab) => {
         for (let stringId = 0; stringId < 6; stringId++) {
-          let note = tab.getTuningStrings()[stringId].format(import_theory10.PitchNotation.Helmholtz, import_theory10.SymbolSet.Unicode);
+          let note = tab.getTuningStrings()[stringId].format(import_theory9.PitchNotation.Helmholtz, import_theory9.SymbolSet.Unicode);
           let obj = new ObjText(this, { text: note, scale: 0.8 }, 1, 0.5);
           obj.layout(renderer);
           obj.offset(this.tabStringNotesWidth * 0.8, tab.getStringY(stringId));
@@ -5825,6 +5717,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     if (this.endRepeatPlayCountText) {
       this.endRepeatPlayCountText.layout(renderer);
     }
+    this.layoutObjects.forEach((layoutObj) => layoutObj.layout(renderer));
     let padding = renderer.unitSize;
     this.leftSolidAreaWidth = this.tabStringNotesWidth + Math.max(0, ...this.signatures.map((signature) => signature.getRect().width)) + this.barLineLeft.getRect().width + padding;
     this.rightSolidAreaWidth = padding + this.barLineRight.getRect().width;
@@ -5856,7 +5749,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     let columnsAreaLeft = this.rect.left + this.leftSolidAreaWidth;
     let columnsAreaRight = this.rect.right - this.rightSolidAreaWidth;
     let columnsAreaWidth = columnsAreaRight - columnsAreaLeft;
-    let columnsWidth = import_ts_utils_lib9.Utils.Math.sum(this.columns.map((col) => col.getRect().width));
+    let columnsWidth = import_ts_utils_lib8.Utils.Math.sum(this.columns.map((col) => col.getRect().width));
     let columnScale = columnsAreaWidth / columnsWidth;
     let columnLeft = columnsAreaLeft;
     this.columns.forEach((col) => {
@@ -5901,7 +5794,8 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
       ...this.columns.filter((col) => !col.isEmpty()).map((col) => col.getRect().top),
       this.barLineRight.getRect().top,
       ...this.connectives.map((c) => c.getRect().top),
-      ...this.beamGroups.filter((b) => !b.isEmpty()).map((b) => b.getRect().top)
+      ...this.beamGroups.filter((b) => !b.isEmpty()).map((b) => b.getRect().top),
+      ...this.layoutObjects.filter((o) => o.isPositionResolved()).map((o) => o.musicObj.getRect().top)
     );
     this.rect.bottom = Math.max(
       ...this.signatures.map((s) => s.getRect().bottom),
@@ -5910,12 +5804,20 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
       ...this.columns.filter((col) => !col.isEmpty()).map((col) => col.getRect().bottom),
       this.barLineRight.getRect().bottom,
       ...this.connectives.map((c) => c.getRect().bottom),
-      ...this.beamGroups.filter((b) => !b.isEmpty()).map((b) => b.getRect().bottom)
+      ...this.beamGroups.filter((b) => !b.isEmpty()).map((b) => b.getRect().bottom),
+      ...this.layoutObjects.filter((o) => o.isPositionResolved()).map((o) => o.musicObj.getRect().bottom)
     );
+    if (this === this.row.getLastMeasure()) {
+      this.rect.right = Math.max(
+        this.rect.right,
+        ...this.layoutObjects.filter((o) => o.isPositionResolved() && o.musicObj instanceof ObjFermata).map((o) => o.musicObj.getRect().right)
+      );
+    }
     this.row.getNotationLines().forEach((line) => {
       this.rect.top = Math.min(this.rect.top, line.calcTop());
       this.rect.bottom = Math.max(this.rect.bottom, line.calcBottom());
     });
+    this.row.requestRectUpdate();
   }
   offset(dx, dy) {
     this.signatures.forEach((signature) => signature.offset(dx, 0));
@@ -5928,7 +5830,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     }
     this.connectives.forEach((connective) => connective.offset(dx, 0));
     this.beamGroups.forEach((beam) => beam.offset(dx, dy));
-    this.layoutObjects.forEach((layoutObj) => layoutObj.musicObj.offset(dx, dy));
+    this.layoutObjects.forEach((layoutObj) => layoutObj.offset(dx, 0));
     this.rect.offsetInPlace(dx, dy);
     this.requestRectUpdate();
   }
@@ -5943,7 +5845,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
         for (let p = line.bottomLineDiatonicId; p <= line.topLineDiatonicId; p += 2) {
           drawLine(line.getDiatonicIdY(p));
         }
-      } else {
+      } else if (line instanceof ObjTab) {
         for (let stringId = 0; stringId < 6; stringId++) {
           drawLine(line.getStringY(stringId));
         }
@@ -5966,7 +5868,7 @@ __publicField(_ObjMeasure, "MinFlexContentWidth", 10);
 var ObjMeasure2 = _ObjMeasure;
 
 // src/score/engine/layout-object.ts
-var import_core15 = require("@tspro/web-music-score/core");
+var import_core14 = require("@tspro/web-music-score/core");
 var WidenColumnList = [1 /* NoteLabel */, 6 /* ChordLabel */];
 var RowAlignList = [2 /* Navigation */, 3 /* Ending */, 4 /* TempoAnnotation */, 5 /* DynamicsAnnotation */, 6 /* ChordLabel */];
 function requireParentMeasure(p) {
@@ -5976,11 +5878,19 @@ function requireParentMeasure(p) {
     }
     p = p.getParent();
   }
-  throw new import_core15.MusicError(import_core15.MusicErrorType.Score, "Parent measure is required but not found!");
+  throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Parent measure is required but not found!");
 }
+var StaffGroup = class {
+  constructor(groupName, staffsTabsAndGroups, verticalPosition) {
+    this.groupName = groupName;
+    this.staffsTabsAndGroups = staffsTabsAndGroups;
+    this.verticalPosition = verticalPosition;
+  }
+};
 var LayoutObjectWrapper = class {
-  constructor(musicObj, layoutGroupId, verticalPos) {
+  constructor(musicObj, line, layoutGroupId, verticalPos) {
     this.musicObj = musicObj;
+    this.line = line;
     this.layoutGroupId = layoutGroupId;
     this.verticalPos = verticalPos;
     __publicField(this, "anchor");
@@ -5988,15 +5898,15 @@ var LayoutObjectWrapper = class {
     __publicField(this, "row");
     __publicField(this, "layoutGroup");
     __publicField(this, "positionResolved", true);
-    this.measure = requireParentMeasure(musicObj);
+    this.measure = requireParentMeasure(this.musicObj);
     this.row = this.measure.row;
     let anchor = this.musicObj.getParent();
     if (!anchor) {
-      throw new import_core15.MusicError(import_core15.MusicErrorType.Score, "Parent music object is required as an anchor.");
+      throw new import_core14.MusicError(import_core14.MusicErrorType.Score, "Parent music object is required as an anchor.");
     }
     this.anchor = anchor;
     this.anchor.addAnchoredLayoutObject(this);
-    this.layoutGroup = this.measure.doc.getLayoutGroup(layoutGroupId);
+    this.layoutGroup = this.line.getLayoutGroup(layoutGroupId);
     this.layoutGroup.add(this);
   }
   clearPositionResolved() {
@@ -6009,20 +5919,19 @@ var LayoutObjectWrapper = class {
     return this.positionResolved;
   }
   resolveClosestToStaffY(renderer) {
-    let { musicObj, measure, verticalPos } = this;
-    let { row } = measure;
-    let staffTop = row.hasStaff ? row.getTopStaff().getTopLineY() : row.getRect().centerY;
-    let staffBottom = row.hasStaff ? row.getBottomStaff().getBottomLineY() : row.getRect().centerY;
-    let staffPadding = renderer.unitSize * 2;
-    let y = verticalPos === 1 /* BelowStaff */ ? staffBottom + staffPadding + musicObj.getRect().toph : staffTop - staffPadding - musicObj.getRect().bottomh;
-    let staticObjects = measure.getStaticObjects();
+    let { musicObj, measure, verticalPos, line } = this;
+    let lineTop = line.getTopLineY();
+    let lineBottom = line.getBottomLineY();
+    let linePadding = renderer.unitSize * 2;
+    let y = verticalPos === 1 /* Below */ ? lineBottom + linePadding + musicObj.getRect().toph : lineTop - linePadding - musicObj.getRect().bottomh;
+    let staticObjects = measure.getStaticObjects(line);
     let objShapeRects = musicObj.getShapeRects();
     staticObjects.forEach((staticObj) => {
       let staticShapeRects = staticObj.getShapeRects();
       objShapeRects.forEach((objR) => {
         staticShapeRects.forEach((staticR) => {
           if (DivRect.overlapX(objR, staticR)) {
-            y = verticalPos === 1 /* BelowStaff */ ? Math.max(y, staticR.bottom + objR.toph + objR.centerY) : Math.min(y, staticR.top - objR.bottomh - objR.centerY);
+            y = verticalPos === 1 /* Below */ ? Math.max(y, staticR.bottom + objR.toph + objR.centerY) : Math.min(y, staticR.top - objR.bottomh - objR.centerY);
           }
         });
       });
@@ -6036,6 +5945,15 @@ var LayoutObjectWrapper = class {
       return void 0;
     }
   }
+  layout(renderer) {
+    this.line.addObject(this);
+  }
+  offset(dx, dy) {
+    this.musicObj.offset(dx, dy);
+  }
+  getRect() {
+    return this.musicObj.getRect();
+  }
 };
 var LayoutGroup = class {
   constructor(layoutGroupId) {
@@ -6043,8 +5961,8 @@ var LayoutGroup = class {
     __publicField(this, "layoutObjectTable", []);
     __publicField(this, "rowAlign");
     __publicField(this, "widensColumn");
-    this.layoutObjectTable[0 /* AboveStaff */] = [];
-    this.layoutObjectTable[1 /* BelowStaff */] = [];
+    this.layoutObjectTable[0 /* Above */] = [];
+    this.layoutObjectTable[1 /* Below */] = [];
     this.rowAlign = RowAlignList.indexOf(layoutGroupId) >= 0;
     this.widensColumn = WidenColumnList.indexOf(layoutGroupId) >= 0;
   }
@@ -6072,6 +5990,333 @@ var LayoutGroup = class {
   }
 };
 
+// src/score/engine/obj-staff-and-tab.ts
+var ObjNotationLine4 = class extends MusicObject {
+  constructor(parent) {
+    super(parent);
+    __publicField(this, "objects", []);
+    __publicField(this, "layoutGroups", []);
+  }
+  addObject(o) {
+    this.objects.push(o);
+  }
+  removeObjects() {
+    this.objects.length = 0;
+  }
+  getLayoutGroup(lauoutGroupId) {
+    let layoutGroup = this.layoutGroups[lauoutGroupId];
+    if (!layoutGroup) {
+      layoutGroup = this.layoutGroups[lauoutGroupId] = new LayoutGroup(lauoutGroupId);
+    }
+    return layoutGroup;
+  }
+  resetLayoutGroups(renderer) {
+    this.layoutGroups.forEach((layoutGroup) => {
+      if (layoutGroup) {
+        layoutGroup.clearPositionAndLayout(renderer);
+      }
+    });
+  }
+  layoutLayoutGroups(renderer) {
+    this.layoutGroups.forEach((layoutGroup) => {
+      if (layoutGroup) {
+        this.layoutLayoutGroup(renderer, layoutGroup, 0 /* Above */);
+        this.layoutLayoutGroup(renderer, layoutGroup, 1 /* Below */);
+      }
+    });
+  }
+  setObjectY(layoutObj, y) {
+    if (y === void 0) {
+      return;
+    }
+    layoutObj.offset(0, y - layoutObj.getRect().centerY);
+    layoutObj.setPositionResolved();
+  }
+  alignObjectsY(renderer, layoutObjArr) {
+    layoutObjArr = layoutObjArr.filter((layoutObj) => !layoutObj.isPositionResolved());
+    let rowY;
+    layoutObjArr.forEach((layoutObj) => {
+      let y = layoutObj.resolveClosestToStaffY(renderer);
+      rowY = layoutObj.verticalPos === 1 /* Below */ ? Math.max(y, rowY != null ? rowY : y) : Math.min(y, rowY != null ? rowY : y);
+    });
+    layoutObjArr.forEach((layoutObj) => this.setObjectY(layoutObj, rowY));
+  }
+  layoutLayoutGroup(renderer, layoutGroup, verticalPos) {
+    let rowLayoutObjs = layoutGroup.getLayoutObjects(verticalPos).filter((layoutObj) => !layoutObj.isPositionResolved());
+    rowLayoutObjs.forEach((layoutObj) => {
+      let { musicObj, anchor } = layoutObj;
+      if (musicObj instanceof ObjEnding || musicObj instanceof ObjExtensionLine) {
+        musicObj.layoutFitToMeasure(renderer);
+      } else {
+        musicObj.offset(anchor.getRect().centerX - musicObj.getRect().centerX, 0);
+      }
+    });
+    if (layoutGroup.rowAlign) {
+      this.alignObjectsY(renderer, rowLayoutObjs);
+    } else {
+      rowLayoutObjs.forEach((layoutObj) => {
+        let link = layoutObj.musicObj.getLink();
+        if (link && link.getHead() === layoutObj.musicObj) {
+          let objectParts = [link.getHead(), ...link.getTails()];
+          let layoutObjs = rowLayoutObjs.filter((layoutObj2) => objectParts.some((o) => o === layoutObj2.musicObj));
+          this.alignObjectsY(renderer, layoutObjs);
+        } else {
+          this.alignObjectsY(renderer, [layoutObj]);
+        }
+      });
+    }
+  }
+};
+var ObjStaff = class extends ObjNotationLine4 {
+  constructor(row, staffConfig, id) {
+    super(row);
+    this.row = row;
+    this.staffConfig = staffConfig;
+    this.id = id;
+    __publicField(this, "clefImageAsset");
+    __publicField(this, "clefLineDiatonicId");
+    __publicField(this, "topLineDiatonicId");
+    __publicField(this, "middleLineDiatonicId");
+    __publicField(this, "bottomLineDiatonicId");
+    __publicField(this, "minDiatonicId");
+    __publicField(this, "maxDiatonicId");
+    __publicField(this, "joinedGrandStaff");
+    __publicField(this, "topLineY", 0);
+    __publicField(this, "bottomLineY", 0);
+    __publicField(this, "mi");
+    const getDiatonicId = (noteName, isOctaveDown) => import_theory11.Note.getNote(noteName).diatonicId - (isOctaveDown ? 7 : 0);
+    if (staffConfig.clef === "G" /* G */) {
+      this.clefImageAsset = 0 /* TrebleClefPng */;
+      this.clefLineDiatonicId = getDiatonicId("G4", staffConfig.isOctaveDown === true);
+      this.middleLineDiatonicId = this.clefLineDiatonicId + 2;
+    } else {
+      this.clefImageAsset = 1 /* BassClefPng */;
+      this.clefLineDiatonicId = getDiatonicId("F3", staffConfig.isOctaveDown === true);
+      this.middleLineDiatonicId = this.clefLineDiatonicId - 2;
+    }
+    this.topLineDiatonicId = this.middleLineDiatonicId + 4;
+    this.bottomLineDiatonicId = this.middleLineDiatonicId - 4;
+    this.minDiatonicId = staffConfig.minNote !== void 0 ? Math.min(getDiatonicId(staffConfig.minNote, false), this.bottomLineDiatonicId) : void 0;
+    this.maxDiatonicId = staffConfig.maxNote !== void 0 ? Math.max(getDiatonicId(staffConfig.maxNote, false), this.topLineDiatonicId) : void 0;
+    this.mi = new MStaff(this);
+  }
+  getMusicInterface() {
+    return this.mi;
+  }
+  get isOctaveDown() {
+    return this.staffConfig.isOctaveDown === true;
+  }
+  get name() {
+    var _a;
+    return (_a = this.staffConfig.name) != null ? _a : "";
+  }
+  getTopLineY() {
+    return this.topLineY;
+  }
+  getMiddleLineY() {
+    return (this.topLineY + this.bottomLineY) / 2;
+  }
+  getBottomLineY() {
+    return this.bottomLineY;
+  }
+  joinGrandStaff(staff) {
+    if (staff !== this) {
+      this.joinedGrandStaff = staff;
+    }
+  }
+  getLineSpacing() {
+    return (this.bottomLineY - this.topLineY) / 4;
+  }
+  getDiatonicSpacing() {
+    return this.getLineSpacing() / 2;
+  }
+  containsDiatonicId(diatonicId) {
+    import_theory11.Note.validateDiatonicId(diatonicId);
+    return (this.minDiatonicId === void 0 || diatonicId >= this.minDiatonicId) && (this.maxDiatonicId === void 0 || diatonicId <= this.maxDiatonicId);
+  }
+  getDiatonicIdY(diatonicId) {
+    if (this.containsDiatonicId(diatonicId)) {
+      return this.bottomLineY + (this.bottomLineDiatonicId - diatonicId) * this.getDiatonicSpacing();
+    } else if (this.joinedGrandStaff && this.joinedGrandStaff.containsDiatonicId(diatonicId)) {
+      return this.joinedGrandStaff.getDiatonicIdY(diatonicId);
+    } else {
+      throw new import_core15.MusicError(import_core15.MusicErrorType.Score, "Staff does not contain diatonicId " + diatonicId);
+    }
+  }
+  getActualStaff(diatonicId) {
+    if (this.containsDiatonicId(diatonicId)) {
+      return this;
+    } else if (this.joinedGrandStaff && this.joinedGrandStaff.containsDiatonicId(diatonicId)) {
+      return this.joinedGrandStaff;
+    } else {
+      throw new import_core15.MusicError(import_core15.MusicErrorType.Score, "Staff does not contain diatonicId " + diatonicId);
+    }
+  }
+  getDiatonicIdAt(y) {
+    let diatonicId = Math.round(this.bottomLineDiatonicId - (y - this.bottomLineY) / this.getDiatonicSpacing());
+    return this.containsDiatonicId(diatonicId) ? diatonicId : void 0;
+  }
+  isLine(diatonicId) {
+    return diatonicId % 2 === this.middleLineDiatonicId % 2;
+  }
+  isSpace(diatonicId) {
+    return diatonicId % 2 !== this.middleLineDiatonicId % 2;
+  }
+  containsVoiceId(voiceId) {
+    return !this.staffConfig.voiceIds || this.staffConfig.voiceIds.includes(voiceId);
+  }
+  isGrand() {
+    return this.staffConfig.isGrand === true;
+  }
+  calcTop() {
+    let top = this.topLineY;
+    this.objects.forEach((o) => top = Math.min(top, o.getRect().top));
+    if (this.maxDiatonicId !== void 0) {
+      let y = this.getDiatonicIdY(this.maxDiatonicId);
+      let y2 = this.getDiatonicIdY(this.maxDiatonicId - 1);
+      top = Math.min(top, y - Math.abs(y2 - y) + 1);
+    }
+    return top;
+  }
+  calcBottom() {
+    let bottom = this.bottomLineY;
+    this.objects.forEach((o) => bottom = Math.max(bottom, o.getRect().bottom));
+    if (this.minDiatonicId !== void 0) {
+      let y = this.getDiatonicIdY(this.minDiatonicId);
+      let y2 = this.getDiatonicIdY(this.minDiatonicId + 1);
+      bottom = Math.max(bottom, y + Math.abs(y2 - y) - 1);
+    }
+    return bottom;
+  }
+  pick(x, y) {
+    return [this];
+  }
+  layoutHeight(renderer) {
+    let { unitSize } = renderer;
+    let h = unitSize * DocumentSettings.StaffHeight;
+    this.topLineY = -h / 2;
+    this.bottomLineY = h / 2;
+    this.rect = new DivRect(0, 0, this.topLineY, this.bottomLineY);
+  }
+  layoutWidth(renderer) {
+    this.rect.left = this.row.getRect().left;
+    this.rect.right = this.row.getRect().right;
+  }
+  offset(dx, dy) {
+    this.topLineY += dy;
+    this.bottomLineY += dy;
+    this.objects.forEach((o) => {
+      if (o.offsetInPlace) {
+        o.offsetInPlace(0, dy);
+      } else if (o.offset) {
+        o.offset(0, dy);
+      }
+    });
+    this.rect.offsetInPlace(dx, dy);
+  }
+  draw(renderer) {
+  }
+};
+var ObjTab = class extends ObjNotationLine4 {
+  constructor(row, tabConfig, id) {
+    super(row);
+    this.row = row;
+    this.tabConfig = tabConfig;
+    this.id = id;
+    __publicField(this, "top", 0);
+    __publicField(this, "bottom", 0);
+    __publicField(this, "tuningName");
+    __publicField(this, "tuningStrings");
+    __publicField(this, "mi");
+    if (import_ts_utils_lib9.Utils.Is.isArray(tabConfig.tuning)) {
+      this.tuningName = void 0;
+      this.tuningStrings = tabConfig.tuning.map((noteName) => import_theory11.Note.getNote(noteName)).reverse();
+    } else if (typeof tabConfig.tuning === "string") {
+      this.tuningName = (0, import_theory11.validateTuningName)(tabConfig.tuning);
+      this.tuningStrings = (0, import_theory11.getTuningStrings)(this.tuningName);
+    } else {
+      this.tuningName = "Standard";
+      this.tuningStrings = (0, import_theory11.getTuningStrings)(this.tuningName);
+    }
+    this.mi = new MTab(this);
+  }
+  getMusicInterface() {
+    return this.mi;
+  }
+  get name() {
+    var _a;
+    return (_a = this.tabConfig.name) != null ? _a : "";
+  }
+  getTuningName() {
+    return this.tuningName;
+  }
+  getTuningStrings() {
+    return this.tuningStrings;
+  }
+  /** Return Y coordinate of string. */
+  getStringY(stringId) {
+    return this.top + (this.bottom - this.top) / 6 * (stringId + 0.5);
+  }
+  getTopStringY() {
+    return this.getStringY(0);
+  }
+  getBottomStringY() {
+    return this.getStringY(5);
+  }
+  getTopLineY() {
+    return this.getTopStringY();
+  }
+  getBottomLineY() {
+    return this.getBottomStringY();
+  }
+  getTop() {
+    return this.top;
+  }
+  getBottom() {
+    return this.bottom;
+  }
+  containsVoiceId(voiceId) {
+    return !this.tabConfig.voiceIds || this.tabConfig.voiceIds.includes(voiceId);
+  }
+  containsDiatonicId(diatonicId) {
+    return true;
+  }
+  calcTop() {
+    return this.top;
+  }
+  calcBottom() {
+    return this.bottom;
+  }
+  pick(x, y) {
+    return [this];
+  }
+  layoutHeight(renderer) {
+    let { unitSize } = renderer;
+    let h = unitSize * DocumentSettings.TabHeight;
+    this.top = -h / 2;
+    this.bottom = h / 2;
+    this.rect = new DivRect(0, 0, this.top, this.bottom);
+  }
+  layoutWidth(renderer) {
+    this.rect.left = this.row.getRect().left;
+    this.rect.right = this.row.getRect().right;
+  }
+  offset(dx, dy) {
+    this.top += dy;
+    this.bottom += dy;
+    this.objects.forEach((o) => {
+      if (o.offsetInPlace) {
+        o.offsetInPlace(0, dy);
+      } else if (o.offset) {
+        o.offset(0, dy);
+      }
+    });
+    this.rect.offsetInPlace(dx, dy);
+  }
+  draw(renderer) {
+  }
+};
+
 // src/score/engine/obj-score-row.ts
 var import_core16 = require("@tspro/web-music-score/core");
 var ObjScoreRow = class extends MusicObject {
@@ -6100,7 +6345,7 @@ var ObjScoreRow = class extends MusicObject {
     return this.mi;
   }
   createNotationLines() {
-    let notationLines = this.scoreConfig.map((cfg) => cfg.type === "staff" ? new ObjStaff(this, cfg) : new ObjTab(this, cfg));
+    let notationLines = this.scoreConfig.map((cfg, index) => cfg.type === "staff" ? new ObjStaff(this, cfg, index) : new ObjTab(this, cfg, index));
     for (let i = 0; i < notationLines.length - 1; i++) {
       let treble = notationLines[i];
       let bass = notationLines[i + 1];
@@ -6152,6 +6397,12 @@ var ObjScoreRow = class extends MusicObject {
     }
     return void 0;
   }
+  resetLayoutGroups(renderer) {
+    this.notationLines.forEach((line) => line.resetLayoutGroups(renderer));
+  }
+  layoutLayoutGroups(renderer) {
+    this.notationLines.forEach((line) => line.layoutLayoutGroups(renderer));
+  }
   pick(x, y) {
     if (!this.getRect().contains(x, y)) {
       return [];
@@ -6232,7 +6483,6 @@ var ObjScoreRow = class extends MusicObject {
     this.minWidth = 0;
     this.measures.forEach((m) => {
       m.layout(renderer);
-      this.rect.expandInPlace(new DivRect(0, 0, m.getRect().top, m.getRect().bottom));
       this.minWidth += m.getMinWidth();
       this.minWidth += m.getPostMeasureBreakWidth();
     });
@@ -6266,6 +6516,13 @@ var ObjScoreRow = class extends MusicObject {
       m.layoutBeams(renderer);
     });
   }
+  updateRect() {
+    let left = this.measures.length > 0 ? this.measures[0].getRect().left : 0;
+    let right = this.measures.length > 0 ? this.measures[this.measures.length - 1].getRect().right : 0;
+    let top = Math.min(0, ...this.measures.map((m) => m.getRect().top));
+    let bottom = Math.max(0, ...this.measures.map((m) => m.getRect().bottom));
+    this.rect = new DivRect(left, right, top, bottom);
+  }
   alignStemsToBeams() {
     this.measures.forEach((m) => m.alignStemsToBeams());
   }
@@ -6282,7 +6539,6 @@ var ObjScoreRow = class extends MusicObject {
         cur.offset(0, prev.calcBottom() - cur.calcTop() + sep);
       }
     }
-    this.requestRectUpdate();
     this.measures.forEach((m) => {
       m.requestRectUpdate();
       m.getBarLineLeft().requestRectUpdate();
@@ -6295,59 +6551,12 @@ var ObjScoreRow = class extends MusicObject {
         });
       });
     });
-    let lines = this.getNotationLines();
-    this.rect.top = lines[0].calcTop();
-    this.rect.bottom = lines[lines.length - 1].calcBottom();
     this.alignStemsToBeams();
-  }
-  updateRect() {
-  }
-  setObjectY(layoutObj, y) {
-    if (y === void 0) {
-      return;
-    }
-    let { measure, musicObj } = layoutObj;
-    musicObj.offset(0, y - musicObj.getRect().centerY);
-    layoutObj.setPositionResolved();
-    measure.getRect().expandInPlace(musicObj.getRect());
-    this.rect.expandInPlace(measure.getRect());
-  }
-  alignObjectsY(renderer, layoutObjArr) {
-    layoutObjArr = layoutObjArr.filter((layoutObj) => !layoutObj.isPositionResolved());
-    let rowY;
-    layoutObjArr.forEach((layoutObj) => {
-      let y = layoutObj.resolveClosestToStaffY(renderer);
-      rowY = layoutObj.verticalPos === 1 /* BelowStaff */ ? Math.max(y, rowY != null ? rowY : y) : Math.min(y, rowY != null ? rowY : y);
-    });
-    layoutObjArr.forEach((layoutObj) => this.setObjectY(layoutObj, rowY));
-  }
-  layoutLayoutGroup(renderer, layoutGroup, verticalPos) {
-    let rowLayoutObjs = layoutGroup.getLayoutObjects(verticalPos).filter((layoutObj) => layoutObj.row === this && !layoutObj.isPositionResolved());
-    rowLayoutObjs.forEach((layoutObj) => {
-      let { musicObj, anchor } = layoutObj;
-      if (musicObj instanceof ObjEnding || musicObj instanceof ObjExtensionLine) {
-        musicObj.layoutFitToMeasure(renderer);
-      } else {
-        musicObj.offset(anchor.getRect().centerX - musicObj.getRect().centerX, 0);
-      }
-    });
-    if (layoutGroup.rowAlign) {
-      this.alignObjectsY(renderer, rowLayoutObjs);
-    } else {
-      rowLayoutObjs.forEach((layoutObj) => {
-        let link = layoutObj.musicObj.getLink();
-        if (link && link.getHead() === layoutObj.musicObj) {
-          let objectParts = [link.getHead(), ...link.getTails()];
-          let layoutObjs = rowLayoutObjs.filter((layoutObj2) => objectParts.some((o) => o === layoutObj2.musicObj));
-          this.alignObjectsY(renderer, layoutObjs);
-        } else {
-          this.alignObjectsY(renderer, [layoutObj]);
-        }
-      });
-    }
+    this.requestRectUpdate();
   }
   layoutPadding(renderer) {
     let p = renderer.unitSize / 2;
+    this.getRect();
     this.rect.left -= p;
     this.rect.right += p;
     this.rect.top -= p;
@@ -6371,21 +6580,10 @@ var ObjScoreRow = class extends MusicObject {
     ctx.save();
     ctx.rect(this.getRect().left, this.getRect().top, this.getRect().width, this.getRect().height);
     ctx.clip();
-    if (this.getFirstMeasure() && this.notationLines.length > 1 || this.notationLines.length === 1 && this.notationLines[0] instanceof ObjTab) {
+    if (this.getFirstMeasure() && (this.notationLines.length > 1 || this.notationLines[0] instanceof ObjTab)) {
       let left = this.getFirstMeasure().getStaffLineLeft();
-      let tops = [];
-      let bottoms = [];
-      this.notationLines.forEach((line) => {
-        if (line instanceof ObjStaff) {
-          tops.push(line.getTopLineY());
-          bottoms.push(line.getBottomLineY());
-        } else {
-          tops.push(line.getTopStringY());
-          bottoms.push(line.getBottomStringY());
-        }
-      });
-      let top = Math.min(...tops);
-      let bottom = Math.max(...bottoms);
+      let top = Math.min(...this.notationLines.map((line) => line.getTopLineY()));
+      let bottom = Math.max(...this.notationLines.map((line) => line.getBottomLineY()));
       renderer.drawLine(left, top, left, bottom);
     }
     this.measures.forEach((m) => m.draw(renderer));
@@ -6496,9 +6694,9 @@ var ObjDocument = class extends MusicObject {
     __publicField(this, "measuresPerRow", Infinity);
     __publicField(this, "curScoreConfig", [{ type: "staff", clef: "G" /* G */ }]);
     __publicField(this, "header");
-    __publicField(this, "layoutGroups", []);
     __publicField(this, "newRowRequested", false);
     __publicField(this, "allConnectiveProps", []);
+    __publicField(this, "staffGroups", /* @__PURE__ */ new Map());
     __publicField(this, "mi");
     this.mi = new MDocument2(this);
   }
@@ -6564,13 +6762,6 @@ var ObjDocument = class extends MusicObject {
   addConnectiveProps(connectiveProps) {
     this.allConnectiveProps.push(connectiveProps);
   }
-  getLayoutGroup(lauoutGroupId) {
-    let layoutGroup = this.layoutGroups[lauoutGroupId];
-    if (!layoutGroup) {
-      layoutGroup = this.layoutGroups[lauoutGroupId] = new LayoutGroup(lauoutGroupId);
-    }
-    return layoutGroup;
-  }
   setRenderer(renderer) {
     if (this.renderer === renderer) {
       return;
@@ -6636,6 +6827,12 @@ var ObjDocument = class extends MusicObject {
     this.requestLayout();
     return measure;
   }
+  addStaffGroup(groupName, layoutElements, verticalPosition) {
+    this.staffGroups.set(groupName, new StaffGroup(groupName, layoutElements, verticalPosition));
+  }
+  getStaffGroup(groupName) {
+    return this.staffGroups.get(groupName);
+  }
   getVoiceSymbols(voiceId) {
     let voiceSymbols = [];
     this.forEachMeasure((m) => voiceSymbols = voiceSymbols.concat(m.getVoiceSymbols(voiceId)));
@@ -6683,21 +6880,15 @@ var ObjDocument = class extends MusicObject {
     this.forEachMeasure((m) => m.createExtensions());
     this.allConnectiveProps.forEach((props) => props.removeConnectives());
     this.allConnectiveProps.forEach((props) => props.createConnectives());
-    let layoutGroups = this.layoutGroups.filter((layoutGroup) => !!layoutGroup);
-    layoutGroups.forEach((layoutGroup) => layoutGroup.clearPositionAndLayout(renderer));
+    this.rows.forEach((row) => row.resetLayoutGroups(renderer));
     this.rows.forEach((row) => row.layout(renderer));
     let rowWidth = Math.max(
       DocumentSettings.DocumentMinWidth * unitSize,
       ...this.rows.map((row) => 1.4 * row.getMinWidth())
     );
     this.rows.forEach((row) => row.layoutWidth(renderer, rowWidth));
+    this.rows.forEach((row) => row.layoutLayoutGroups(renderer));
     this.rows.forEach((row) => row.layoutPositionLines(renderer));
-    layoutGroups.forEach((layoutGroup) => {
-      this.rows.forEach((row) => {
-        row.layoutLayoutGroup(renderer, layoutGroup, 0 /* AboveStaff */);
-        row.layoutLayoutGroup(renderer, layoutGroup, 1 /* BelowStaff */);
-      });
-    });
     this.rows.forEach((row) => row.layoutPadding(renderer));
     this.rect = new DivRect();
     if (this.header) {
@@ -6922,21 +7113,64 @@ var DocumentBuilder = class {
     this.getMeasure().addRest(voiceId, restLength, options);
     return this;
   }
-  addFermata(fermata) {
-    assertArg(import_ts_utils_lib11.Utils.Is.isEnumValueOrUndefined(fermata, Fermata), "fermata", fermata);
-    this.getMeasure().addFermata(fermata != null ? fermata : 0 /* AtNote */);
+  addFermataInternal(staffTabOrGroup, fermata) {
+    assertArg(import_ts_utils_lib11.Utils.Is.isStringOrUndefined(staffTabOrGroup) || import_ts_utils_lib11.Utils.Is.isIntegerGte(staffTabOrGroup, 0), "staffTabOrGroup", staffTabOrGroup);
+    assertArg(import_ts_utils_lib11.Utils.Is.isEnumValue(fermata, Fermata), "fermata", fermata);
+    this.getMeasure().addFermata(staffTabOrGroup, fermata);
     return this;
   }
-  addNavigation(navigation, ...args) {
+  addFermata(fermata = 0 /* AtNote */) {
+    return this.addFermataInternal(void 0, fermata);
+  }
+  /** @param staffTabOrGroup  - staff/tab index (0=top), staff/tab name, or staff group name. */
+  addFermataTo(staffTabOrGroup, fermata = 0 /* AtNote */) {
+    return this.addFermataInternal(staffTabOrGroup, fermata);
+  }
+  addNavigationInternal(staffTabOrGroup, navigation, ...args) {
+    assertArg(import_ts_utils_lib11.Utils.Is.isStringOrUndefined(staffTabOrGroup) || import_ts_utils_lib11.Utils.Is.isIntegerGte(staffTabOrGroup, 0), "staffTabOrGroup", staffTabOrGroup);
     assertArg(import_ts_utils_lib11.Utils.Is.isEnumValue(navigation, Navigation), "navigation", navigation);
     if (navigation === 9 /* EndRepeat */ && args.length > 0) {
       assertArg(import_ts_utils_lib11.Utils.Is.isIntegerGte(args[0], 1), "playCount", args[0]);
     } else if (navigation === 10 /* Ending */ && args.length > 0) {
       assertArg(args.every((passage) => import_ts_utils_lib11.Utils.Is.isIntegerGte(passage, 1)), "passages", args);
     }
-    this.getMeasure().addNavigation(navigation, ...args);
+    this.getMeasure().addNavigation(staffTabOrGroup, navigation, ...args);
     return this;
   }
+  addNavigation(navigation, ...args) {
+    return this.addNavigationInternal(void 0, navigation, ...args);
+  }
+  addNavigationTo(staffTabOrGroup, navigation, ...args) {
+    return this.addNavigationInternal(staffTabOrGroup, navigation, ...args);
+  }
+  addLabelInternal(staffTabOrGroup, label, text) {
+    assertArg(import_ts_utils_lib11.Utils.Is.isStringOrUndefined(staffTabOrGroup) || import_ts_utils_lib11.Utils.Is.isIntegerGte(staffTabOrGroup, 0), "staffTabOrGroup", staffTabOrGroup);
+    assertArg(import_ts_utils_lib11.Utils.Is.isEnumValue(label, Label), "label", label);
+    assertArg(import_ts_utils_lib11.Utils.Is.isString(text), "text", text);
+    this.getMeasure().addLabel(staffTabOrGroup, label, text);
+    return this;
+  }
+  addLabel(label, text) {
+    return this.addLabelInternal(void 0, label, text);
+  }
+  /** @param staffTabOrGroup  - staff/tab index (0=top), staff/tab name, or staff group name. */
+  addLabelTo(staffTabOrGroup, label, text) {
+    return this.addLabelInternal(staffTabOrGroup, label, text);
+  }
+  addAnnotationInternal(staffTabOrGroup, annotation, text) {
+    assertArg(import_ts_utils_lib11.Utils.Is.isStringOrUndefined(staffTabOrGroup) || import_ts_utils_lib11.Utils.Is.isIntegerGte(staffTabOrGroup, 0), "staffTabOrGroup", staffTabOrGroup);
+    assertArg(import_ts_utils_lib11.Utils.Is.isEnumValue(annotation, Annotation), "annotation", annotation);
+    assertArg(import_ts_utils_lib11.Utils.Is.isString(text), "text", text);
+    this.getMeasure().addAnnotation(staffTabOrGroup, annotation, text);
+    return this;
+  }
+  addAnnotation(annotation, text) {
+    return this.addAnnotationInternal(void 0, annotation, text);
+  }
+  /** @param staffTabOrGroup  - staff/tab index (0=top), staff/tab name, or staff group name. */
+  addAnnotationTo(staffTabOrGroup, annotation, text) {
+    return this.addAnnotationInternal(staffTabOrGroup, annotation, text);
+  }
   addConnective(connective, ...args) {
     assertArg(import_ts_utils_lib11.Utils.Is.isEnumValue(connective, Connective), "connective", connective);
     if (connective === 0 /* Tie */) {
@@ -6958,24 +7192,30 @@ var DocumentBuilder = class {
     }
     return this;
   }
-  addLabel(label, text) {
-    assertArg(import_ts_utils_lib11.Utils.Is.isEnumValue(label, Label), "label", label);
-    assertArg(import_ts_utils_lib11.Utils.Is.isString(text), "text", text);
-    this.getMeasure().addLabel(label, text);
-    return this;
-  }
-  addAnnotation(annotation, text) {
-    assertArg(import_ts_utils_lib11.Utils.Is.isEnumValue(annotation, Annotation), "annotation", annotation);
-    assertArg(import_ts_utils_lib11.Utils.Is.isString(text), "text", text);
-    this.getMeasure().addAnnotation(annotation, text);
-    return this;
-  }
   addExtension(extensionLength, extensionVisible) {
     assertArg(import_ts_utils_lib11.Utils.Is.isIntegerGte(extensionLength, 0) || extensionLength === Infinity || import_ts_utils_lib11.Utils.Is.isEnumValue(extensionLength, import_theory13.NoteLength), "extendionLength", extensionLength);
     assertArg(import_ts_utils_lib11.Utils.Is.isBooleanOrUndefined(extensionVisible), "extensionVisible", extensionVisible);
     this.getMeasure().addExtension(extensionLength, extensionVisible != null ? extensionVisible : true);
     return this;
   }
+  /**
+   * 
+   * @param groupName - Name of staff group.
+   * @param staffsTabsAndGroups - staff/tab index (0=top), staff/tab name, or staff group name. Single value or array.
+   * @param verticalPosition - Vertical position, are elements added above, below or both.
+   * @returns 
+   */
+  addStaffGroup(groupName, staffsTabsAndGroups, verticalPosition = 3 /* Auto */) {
+    assertArg(import_ts_utils_lib11.Utils.Is.isString(groupName) && groupName.length > 0, "groupName", groupName);
+    assertArg(
+      import_ts_utils_lib11.Utils.Is.isString(staffsTabsAndGroups) && staffsTabsAndGroups.length > 0 || import_ts_utils_lib11.Utils.Is.isIntegerGte(staffsTabsAndGroups, 0) || import_ts_utils_lib11.Utils.Is.isArray(staffsTabsAndGroups) && staffsTabsAndGroups.every((line) => import_ts_utils_lib11.Utils.Is.isString(line) && line.length > 0 || import_ts_utils_lib11.Utils.Is.isIntegerGte(line, 0)),
+      "staffsTabsAndGroups",
+      staffsTabsAndGroups
+    );
+    assertArg(import_ts_utils_lib11.Utils.Is.isEnumValue(verticalPosition, VerticalPosition), "verticalPosition", verticalPosition);
+    this.doc.addStaffGroup(groupName, staffsTabsAndGroups, verticalPosition);
+    return this;
+  }
   endSong() {
     this.getMeasure().endSong();
     return this;
@@ -7747,6 +7987,7 @@ var import_core20 = require("@tspro/web-music-score/core");
   StaffPreset,
   Stem,
   TieType,
+  VerticalPosition,
   getStringNumbers,
   getVoiceIds
 });