@tspro/web-music-score 3.0.0 → 3.1.0

package/dist/score/index.mjs

@@ -1,7 +1,7 @@
-/* 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) */
 import {
   __publicField
-} from "../chunk-ZWFAOHYM.mjs";
+} from "../chunk-B4J3KED2.mjs";
 
 // src/score/pub/div-rect.ts
 import { Utils } from "@tspro/ts-utils-lib";
@@ -330,6 +330,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";
@@ -444,7 +451,7 @@ var MusicObject = class {
 import { Note as Note9 } from "@tspro/web-music-score/theory";
 
 // src/score/engine/obj-staff-and-tab.ts
-import { getTuningStrings, Note, validateTuningName } from "@tspro/web-music-score/theory";
+import { getTuningStrings, Note as Note8, validateTuningName } from "@tspro/web-music-score/theory";
 
 // src/score/engine/renderer.ts
 import { Utils as Utils2, Vec2, Device } from "@tspro/ts-utils-lib";
@@ -862,260 +869,16 @@ var Renderer = class {
 };
 
 // src/score/engine/obj-staff-and-tab.ts
-import { MusicError as MusicError3, MusicErrorType as MusicErrorType3 } from "@tspro/web-music-score/core";
-import { Utils as Utils3 } from "@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) => 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) {
-    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 MusicError3(MusicErrorType3.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 MusicError3(MusicErrorType3.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 (Utils3.Is.isArray(tabConfig.tuning)) {
-      this.tuningName = void 0;
-      this.tuningStrings = tabConfig.tuning.map((noteName) => Note.getNote(noteName)).reverse();
-    } else if (typeof tabConfig.tuning === "string") {
-      this.tuningName = validateTuningName(tabConfig.tuning);
-      this.tuningStrings = getTuningStrings(this.tuningName);
-    } else {
-      this.tuningName = "Standard";
-      this.tuningStrings = 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) {
-  }
-};
+import { MusicError as MusicError15, MusicErrorType as MusicErrorType15 } from "@tspro/web-music-score/core";
+import { Utils as Utils9 } from "@tspro/ts-utils-lib";
 
 // src/score/engine/obj-measure.ts
-import { Utils as Utils9 } from "@tspro/ts-utils-lib";
-import { getScale, Scale, validateScaleType, Note as Note8, NoteLength as NoteLength6, RhythmProps as RhythmProps4, KeySignature as KeySignature2, getDefaultKeySignature, PitchNotation, SymbolSet } from "@tspro/web-music-score/theory";
+import { Utils as Utils8 } from "@tspro/ts-utils-lib";
+import { getScale, Scale, validateScaleType, Note as Note7, NoteLength as NoteLength6, RhythmProps as RhythmProps4, KeySignature as KeySignature2, getDefaultKeySignature, PitchNotation, SymbolSet } from "@tspro/web-music-score/theory";
 import { getDefaultTempo, TimeSignature, getDefaultTimeSignature } from "@tspro/web-music-score/theory";
 
 // src/score/engine/acc-state.ts
-import { Note as Note2 } from "@tspro/web-music-score/theory";
+import { Note } from "@tspro/web-music-score/theory";
 var AccidentalState = class {
   constructor(measure) {
     this.measure = measure;
@@ -1123,7 +886,7 @@ var AccidentalState = class {
   }
   getAccidentalFromKeySignature(diatonicId) {
     let ks = this.measure.getKeySignature();
-    let accNote = ks.getOrderedAccidentalNotes().find((accNote2) => accNote2.diatonicClass === Note2.getDiatonicClass(diatonicId));
+    let accNote = ks.getOrderedAccidentalNotes().find((accNote2) => accNote2.diatonicClass === Note.getDiatonicClass(diatonicId));
     return accNote ? accNote.accidental : void 0;
   }
   setAccidental(note) {
@@ -1137,7 +900,7 @@ var AccidentalState = class {
 };
 
 // src/score/engine/obj-signature.ts
-import { Note as Note3, getTempoString, KeySignature } from "@tspro/web-music-score/theory";
+import { Note as Note2, getTempoString, KeySignature } from "@tspro/web-music-score/theory";
 
 // src/score/engine/obj-image.ts
 var ObjImage = class extends MusicObject {
@@ -1185,7 +948,7 @@ var ObjImage = class extends MusicObject {
 };
 
 // src/score/engine/obj-accidental.ts
-import { MusicError as MusicError4, MusicErrorType as MusicErrorType4 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError3, MusicErrorType as MusicErrorType3 } from "@tspro/web-music-score/core";
 var ObjAccidental = class extends MusicObject {
   constructor(parent, diatonicId, accidental, color = "black") {
     super(parent);
@@ -1220,7 +983,7 @@ var ObjAccidental = class extends MusicObject {
         this.rect = DivRect.createSections(unitSize * 1, unitSize * 1, unitSize * 1, unitSize * 1);
         break;
       default:
-        throw new MusicError4(MusicErrorType4.Score, "Invalid accidental value: " + this.accidental);
+        throw new MusicError3(MusicErrorType3.Score, "Invalid accidental value: " + this.accidental);
     }
   }
   offset(dx, dy) {
@@ -1433,7 +1196,7 @@ var ObjText = class extends MusicObject {
 };
 
 // src/score/engine/obj-signature.ts
-import { MusicError as MusicError5, MusicErrorType as MusicErrorType5 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError4, MusicErrorType as MusicErrorType4 } from "@tspro/web-music-score/core";
 var ObjSignature = class extends MusicObject {
   constructor(measure, staff) {
     super(measure);
@@ -1527,9 +1290,9 @@ var ObjSignature = class extends MusicObject {
       }
     }
     if (bottomAccidentalDiatonicId !== void 0) {
-      return Note3.findNextDiatonicIdAbove(accNote.diatonicId, bottomAccidentalDiatonicId, false);
+      return Note2.findNextDiatonicIdAbove(accNote.diatonicId, bottomAccidentalDiatonicId, false);
     } else {
-      throw new MusicError5(MusicErrorType5.Score, "Cannot get accidental diatonicId because note has no accidental.");
+      throw new MusicError4(MusicErrorType4.Score, "Cannot get accidental diatonicId because note has no accidental.");
     }
   }
   pick(x, y) {
@@ -1699,22 +1462,24 @@ var ObjSignature = class extends MusicObject {
 };
 
 // src/score/engine/player.ts
-import { Utils as Utils6 } from "@tspro/ts-utils-lib";
+import { Utils as Utils5 } from "@tspro/ts-utils-lib";
 import { NoteLength as NoteLength5, RhythmProps as RhythmProps3, alterTempoSpeed } from "@tspro/web-music-score/theory";
 import * as Audio from "@tspro/web-music-score/audio";
 
 // src/score/engine/obj-rhythm-column.ts
-import { Note as Note6, NoteLength as NoteLength4 } from "@tspro/web-music-score/theory";
+import { Note as Note5, NoteLength as NoteLength4 } from "@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);
@@ -1729,10 +1494,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);
@@ -1742,14 +1510,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);
@@ -1758,31 +1525,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
-import { Note as Note4, NoteLength, RhythmProps } from "@tspro/web-music-score/theory";
-import { MusicError as MusicError6, MusicErrorType as MusicErrorType6 } from "@tspro/web-music-score/core";
+import { Note as Note3, NoteLength, RhythmProps } from "@tspro/web-music-score/theory";
+import { MusicError as MusicError5, MusicErrorType as MusicErrorType5 } from "@tspro/web-music-score/core";
 function getDiatonicIdFromStaffPos(staffPos) {
   if (typeof staffPos === "number") {
-    return Note4.getChromaticNote(staffPos).diatonicId;
+    return Note3.getChromaticNote(staffPos).diatonicId;
   } else if (typeof staffPos === "string") {
-    return Note4.getNote(staffPos).diatonicId;
-  } else if (staffPos instanceof Note4) {
+    return Note3.getNote(staffPos).diatonicId;
+  } else if (staffPos instanceof Note3) {
     return staffPos.diatonicId;
   } else {
     return void 0;
@@ -1838,7 +1603,7 @@ var ObjRest = class extends MusicObject {
       let hasStaff = this.row.hasStaff;
       let staff2 = this.row.getStaff(diatonicId);
       if (hasStaff && !staff2) {
-        throw new MusicError6(MusicErrorType6.Score, "Rest staffPos is out of staff boundaries!");
+        throw new MusicError5(MusicErrorType5.Score, "Rest staffPos is out of staff boundaries!");
       }
     }
     this.ownDiatonicId = this.measure.updateOwnDiatonicId(voiceId, diatonicId);
@@ -1879,6 +1644,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 [];
@@ -1932,7 +1706,7 @@ var ObjRest = class extends MusicObject {
       case NoteLength.SixtyFourth:
         return -3;
       default:
-        throw new MusicError6(MusicErrorType6.Score, "Cannot get rest dot vertical displacement because note length is invalid.");
+        throw new MusicError5(MusicErrorType5.Score, "Cannot get rest dot vertical displacement because note length is invalid.");
     }
   }
   updateAccidentalState(accState) {
@@ -2089,13 +1863,13 @@ var ObjRest = class extends MusicObject {
 };
 
 // src/score/engine/obj-note-group.ts
-import { Utils as Utils5 } from "@tspro/ts-utils-lib";
-import { Note as Note5, NoteLength as NoteLength3, RhythmProps as RhythmProps2 } from "@tspro/web-music-score/theory";
+import { Utils as Utils4 } from "@tspro/ts-utils-lib";
+import { Note as Note4, NoteLength as NoteLength3, RhythmProps as RhythmProps2 } from "@tspro/web-music-score/theory";
 
 // src/score/engine/obj-beam-group.ts
-import { Utils as Utils4 } from "@tspro/ts-utils-lib";
+import { Utils as Utils3 } from "@tspro/ts-utils-lib";
 import { MinNoteLength, NoteLength as NoteLength2 } from "@tspro/web-music-score/theory";
-import { MusicError as MusicError7, MusicErrorType as MusicErrorType7 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError6, MusicErrorType as MusicErrorType6 } from "@tspro/web-music-score/core";
 var adjustBeamAngle = (dx, dy) => {
   let T = DocumentSettings.BeamAngleFactor;
   if (!Number.isFinite(T) || T === 0) {
@@ -2172,13 +1946,13 @@ 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 MusicError7(MusicErrorType7.Score, "All beam group symbols are not in same measure.");
+      throw new MusicError6(MusicErrorType6.Score, "All beam group symbols are not in same measure.");
     } else if (symbols.length < 2) {
-      throw new MusicError7(MusicErrorType7.Score, "Beam group need minimum 2 symbols, but " + symbols.length + " given.");
+      throw new MusicError6(MusicErrorType6.Score, "Beam group need minimum 2 symbols, but " + symbols.length + " given.");
     }
     if (triplet) {
       if (!symbols.every((s) => s.triplet)) {
-        throw new MusicError7(MusicErrorType7.Score, "Not every symbol's triplet property is true.");
+        throw new MusicError6(MusicErrorType6.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) {
@@ -2196,7 +1970,7 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
       symbols.forEach((s) => s.setBeamGroup(this));
       symbols[0].measure.addBeamGroup(this);
     } else {
-      throw new MusicError7(MusicErrorType7.Score, "Cannot add beam group because some symbol already has one.");
+      throw new MusicError6(MusicErrorType6.Score, "Cannot add beam group because some symbol already has one.");
     }
   }
   static createBeam(noteGroups) {
@@ -2335,7 +2109,7 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
       symbolY.forEach((symY, i) => {
         let symX = symbolX[i];
         if (symX !== void 0 && symY !== void 0) {
-          let beamY = Utils4.Math.interpolateY(leftX, leftY, rightX, rightY, symX);
+          let beamY = Utils3.Math.interpolateY(leftX, leftY, rightX, rightY, symX);
           let raiseY = symY - beamY;
           if (stemDir === 1 /* Up */ && raiseY < 0) {
             raiseBeamY = Math.min(raiseBeamY, raiseY);
@@ -2350,8 +2124,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 = Utils4.Math.interpolateCoord(leftX, leftY + groupLineDy, rightX, rightY + groupLineDy, -ef);
-        let r = Utils4.Math.interpolateCoord(leftX, leftY + groupLineDy, rightX, rightY + groupLineDy, 1 + ef);
+        let l = Utils3.Math.interpolateCoord(leftX, leftY + groupLineDy, rightX, rightY + groupLineDy, -ef);
+        let r = Utils3.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;
@@ -2409,7 +2183,7 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
         obj.points.forEach((pt) => {
           if (pt.symbol instanceof ObjNoteGroup) {
             if (pt !== left && pt !== right) {
-              pt.y = Utils4.Math.interpolateY(left.x, left.y, right.x, right.y, pt.x);
+              pt.y = Utils3.Math.interpolateY(left.x, left.y, right.x, right.y, pt.x);
             }
             pt.symbol.setStemTipY(pt.staff, pt.y);
           }
@@ -2434,8 +2208,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 = Utils4.Math.interpolateCoord(l.x, l.y, r.x, r.y, 0.5 - tf / 2);
-          let rc = Utils4.Math.interpolateCoord(l.x, l.y, r.x, r.y, 0.5 + tf / 2);
+          let lc = Utils3.Math.interpolateCoord(l.x, l.y, r.x, r.y, 0.5 - tf / 2);
+          let rc = Utils3.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);
@@ -2478,13 +2252,13 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
 };
 
 // src/score/engine/obj-note-group.ts
-import { MusicError as MusicError8, MusicErrorType as MusicErrorType8 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError7, MusicErrorType as MusicErrorType7 } from "@tspro/web-music-score/core";
 function sortNoteStringData(notes, strings) {
-  let stringArr = Utils5.Arr.isArray(strings) ? strings : strings !== void 0 ? [strings] : [];
+  let stringArr = Utils4.Arr.isArray(strings) ? strings : strings !== void 0 ? [strings] : [];
   let noteStringData = notes.map((note, i) => {
     return { note, string: stringArr[i] };
   });
-  noteStringData = Utils5.Arr.removeDuplicatesCmp(noteStringData, (a, b) => Note5.equals(a.note, b.note)).sort((a, b) => Note5.compareFunc(a.note, b.note));
+  noteStringData = Utils4.Arr.removeDuplicatesCmp(noteStringData, (a, b) => Note4.equals(a.note, b.note)).sort((a, b) => Note4.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)
@@ -2598,8 +2372,8 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
     __publicField(this, "staffObjects", []);
     __publicField(this, "tabObjects", []);
     __publicField(this, "mi");
-    if (!Utils5.Is.isIntegerGte(notes.length, 1)) {
-      throw new MusicError8(MusicErrorType8.Score, "Cannot create note group object because notes array is empty.");
+    if (!Utils4.Is.isIntegerGte(notes.length, 1)) {
+      throw new MusicError7(MusicErrorType7.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;
@@ -2638,13 +2412,27 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
   }
   startConnective(connectiveProps) {
     if (!this.row.hasStaff && connectiveProps.connective === 0 /* Tie */) {
-      throw new MusicError8(MusicErrorType8.Score, "Ties not implemented for guitar tabs alone, staff is required!");
+      throw new MusicError7(MusicErrorType7.Score, "Ties not implemented for guitar tabs alone, staff is required!");
     } else if (!this.row.hasStaff && connectiveProps.connective === 1 /* Slur */) {
-      throw new MusicError8(MusicErrorType8.Score, "Slurs not implemented for guitar tabs alone, staff is required!");
+      throw new MusicError7(MusicErrorType7.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 [];
@@ -2673,7 +2461,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
     if (line instanceof ObjStaff) {
       let staff = line;
       if (noteIndex < 0 || noteIndex >= this.notes.length) {
-        throw new MusicError8(MusicErrorType8.Score, "Invalid noteIndex: " + noteIndex);
+        throw new MusicError7(MusicErrorType7.Score, "Invalid noteIndex: " + noteIndex);
       }
       let obj = this.staffObjects.find((obj2) => obj2.staff === staff);
       if (!obj || noteIndex < 0 || noteIndex >= obj.noteHeadRects.length) {
@@ -2721,7 +2509,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
         case 4 /* StemTip */:
           return { x: centerX, y: stemTip.centerY + (stemDir === 1 /* Up */ ? -padding : padding) };
         default:
-          throw new MusicError8(MusicErrorType8.Score, "Invalid noteAnchor: " + noteAnchor);
+          throw new MusicError7(MusicErrorType7.Score, "Invalid noteAnchor: " + noteAnchor);
       }
     } else {
       let tab = line;
@@ -2853,15 +2641,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) => Note5.equals(n, note))) {
+      if (prev && prev.notes.some((n) => Note4.equals(n, note))) {
         return 0;
       }
       tieNoteGroups = tieNoteGroups.slice(j);
-      j = tieNoteGroups.findIndex((ng) => ng.notes.every((n) => !Note5.equals(n, note)));
+      j = tieNoteGroups.findIndex((ng) => ng.notes.every((n) => !Note4.equals(n, note)));
       if (j >= 0) {
         tieNoteGroups = tieNoteGroups.slice(0, j);
       }
-      return Utils5.Math.sum(tieNoteGroups.map((ng) => ng.rhythmProps.ticks));
+      return Utils4.Math.sum(tieNoteGroups.map((ng) => ng.rhythmProps.ticks));
     });
     return tiedTicks.length === 0 ? this.rhythmProps.ticks : Math.max(...tiedTicks);
   }
@@ -3153,7 +2941,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
         }
       });
     } else {
-      throw new MusicError8(MusicErrorType8.Score, "Cannot set triplet beam count because triplet beam group type is invalid.");
+      throw new MusicError7(MusicErrorType7.Score, "Cannot set triplet beam count because triplet beam group type is invalid.");
     }
   }
   getDotVerticalDisplacement(staff, diatonicId, stemDir) {
@@ -3179,9 +2967,9 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
 };
 
 // src/score/engine/obj-rhythm-column.ts
-import { MusicError as MusicError9, MusicErrorType as MusicErrorType9 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError8, MusicErrorType as MusicErrorType8 } from "@tspro/web-music-score/core";
 var noteHeadDataCompareFunc = (a, b) => {
-  let cmp = Note6.compareFunc(a.note, b.note);
+  let cmp = Note5.compareFunc(a.note, b.note);
   if (cmp === 0) {
     cmp = a.noteGroup.stemDir === b.noteGroup.stemDir ? 0 : a.noteGroup.stemDir === 1 /* Up */ ? 1 : -1;
   }
@@ -3222,7 +3010,7 @@ var ObjRhythmColumn = class extends MusicObject {
     if (colId >= 0 && colId < this.measure.getColumnCount()) {
       return this.measure.getColumn(colId + 1);
     } else {
-      throw new MusicError9(MusicErrorType9.Score, "Cannot get next column in measure because current column's id in mesure is invalid.");
+      throw new MusicError8(MusicErrorType8.Score, "Cannot get next column in measure because current column's id in mesure is invalid.");
     }
   }
   /**
@@ -3249,6 +3037,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;
   }
@@ -3299,6 +3103,7 @@ var ObjRhythmColumn = class extends MusicObject {
       this.setupNoteHeadDisplacements();
     }
     this.requestLayout();
+    this.requestRectUpdate();
   }
   getVoiceSymbol(voiceId) {
     return this.voiceSymbol[voiceId];
@@ -3353,7 +3158,7 @@ var ObjRhythmColumn = class extends MusicObject {
     }
   }
   getNoteHeadDisplacement(noteGroup, note) {
-    let data = this.noteHeadDisplacements.find((d) => d.noteGroup === noteGroup && Note6.equals(d.note, note));
+    let data = this.noteHeadDisplacements.find((d) => d.noteGroup === noteGroup && Note5.equals(d.note, note));
     if ((data == null ? void 0 : data.displacement) !== void 0) {
       return data.displacement;
     } else {
@@ -3397,7 +3202,7 @@ var ObjRhythmColumn = class extends MusicObject {
         });
       }
     });
-    playerNotes.sort((a, b) => Note6.compareFunc(a.note, b.note));
+    playerNotes.sort((a, b) => Note5.compareFunc(a.note, b.note));
     if (this.hasArpeggio() && this.getArpeggioDir() === 1 /* Down */) {
       playerNotes.reverse();
     }
@@ -3413,6 +3218,7 @@ var ObjRhythmColumn = class extends MusicObject {
     if (!this.needLayout) {
       return;
     }
+    this.requestRectUpdate();
     this.rect = new DivRect();
     let { row } = this;
     let { unitSize } = renderer;
@@ -3427,12 +3233,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;
@@ -3450,7 +3256,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;
@@ -3645,7 +3450,7 @@ function isTempoText(text) {
 }
 
 // src/score/engine/extension.ts
-import { MusicError as MusicError10, MusicErrorType as MusicErrorType10 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError9, MusicErrorType as MusicErrorType9 } from "@tspro/web-music-score/core";
 function getTextAnchorY(linePos) {
   switch (linePos) {
     case "bottom":
@@ -3681,7 +3486,7 @@ var Extension = class extends MusicObjectLink {
     if (head instanceof ObjText) {
       head.updateAnchorY(getTextAnchorY(linePos));
     } else {
-      throw new MusicError10(MusicErrorType10.Score, "Update anchor's y-coordinate is only implemented for text objects.");
+      throw new MusicError9(MusicErrorType9.Score, "Update anchor's y-coordinate is only implemented for text objects.");
     }
   }
   isVisible() {
@@ -3817,7 +3622,7 @@ var PlayerColumnProps = class {
     return this.speed;
   }
   getTempo() {
-    let speed = Utils6.Math.clamp(this.getSpeed(), 0.1, 10);
+    let speed = Utils5.Math.clamp(this.getSpeed(), 0.1, 10);
     return alterTempoSpeed(this.measure.getTempo(), speed);
   }
   setVolume(volume) {
@@ -3842,7 +3647,7 @@ var PlayerColumnProps = class {
       if (symbolsTicks.length === 0) {
         return 0;
       } else {
-        return Utils6.Math.sum(symbolsTicks) / symbolsTicks.length;
+        return Utils5.Math.sum(symbolsTicks) / symbolsTicks.length;
       }
     }
   }
@@ -3990,7 +3795,7 @@ var Player = class _Player {
         } else if (layoutObj.musicObj.getLink() instanceof Extension) {
           let extension = layoutObj.musicObj.getLink();
           let { columnRange, extensionBreakText } = extension.getExtensionRangeInfo();
-          let totalTicks = Utils6.Math.sum(columnRange.map((c) => c.getTicksToNextColumn()));
+          let totalTicks = Utils5.Math.sum(columnRange.map((c) => c.getTicksToNextColumn()));
           switch (text) {
             case "accel." /* accel */: {
               let startSpeed = curSpeed;
@@ -4044,11 +3849,11 @@ var Player = class _Player {
       });
       let speedArr = (_a = speedMap.get(col)) != null ? _a : [];
       if (speedArr.length > 0) {
-        curSpeed = Utils6.Math.sum(speedArr) / speedArr.length;
+        curSpeed = Utils5.Math.sum(speedArr) / speedArr.length;
       }
       let volumeArr = (_b = volumeMap.get(col)) != null ? _b : [];
       if (volumeArr.length > 0) {
-        curVolume = Utils6.Math.sum(volumeArr) / volumeArr.length;
+        curVolume = Utils5.Math.sum(volumeArr) / volumeArr.length;
       }
       col.getPlayerProps().setSpeed(curSpeed);
       col.getPlayerProps().setVolume(curVolume);
@@ -4240,14 +4045,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));
@@ -4379,8 +4182,8 @@ var ObjBarLineRight = class extends ObjBarLine {
 };
 
 // src/score/engine/obj-ending.ts
-import { Utils as Utils7 } from "@tspro/ts-utils-lib";
-import { MusicError as MusicError11, MusicErrorType as MusicErrorType11 } from "@tspro/web-music-score/core";
+import { Utils as Utils6 } from "@tspro/ts-utils-lib";
+import { MusicError as MusicError10, MusicErrorType as MusicErrorType10 } from "@tspro/web-music-score/core";
 var ObjEnding = class extends MusicObject {
   constructor(measure, passages) {
     super(measure);
@@ -4390,10 +4193,10 @@ var ObjEnding = class extends MusicObject {
     __publicField(this, "shapeRects", []);
     __publicField(this, "mi");
     this.mi = new MEnding(this);
-    if (!Utils7.Is.isIntegerGte(passages.length, 1)) {
-      throw new MusicError11(MusicErrorType11.Score, "Passages is empty.");
-    } else if (!this.passages.every((p) => Utils7.Is.isIntegerGte(p, 1))) {
-      throw new MusicError11(MusicErrorType11.Score, "Invalid passages: " + this.passages);
+    if (!Utils6.Is.isIntegerGte(passages.length, 1)) {
+      throw new MusicError10(MusicErrorType10.Score, "Passages is empty.");
+    } else if (!this.passages.every((p) => Utils6.Is.isIntegerGte(p, 1))) {
+      throw new MusicError10(MusicErrorType10.Score, "Invalid passages: " + this.passages);
     }
     this.passages.sort((a, b) => a - b);
     let text = this.passages.map((p) => p + ".").join("");
@@ -4482,9 +4285,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) {
@@ -4505,7 +4308,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;
@@ -4600,14 +4403,14 @@ var ObjExtensionLine = class extends MusicObject {
 };
 
 // src/score/engine/obj-measure.ts
-import { MusicError as MusicError14, MusicErrorType as MusicErrorType14 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError13, MusicErrorType as MusicErrorType13 } from "@tspro/web-music-score/core";
 
 // src/score/engine/connective-props.ts
-import { Note as Note7 } from "@tspro/web-music-score/theory";
+import { Note as Note6 } from "@tspro/web-music-score/theory";
 
 // src/score/engine/obj-connective.ts
-import { Utils as Utils8 } from "@tspro/ts-utils-lib";
-import { MusicError as MusicError12, MusicErrorType as MusicErrorType12 } from "@tspro/web-music-score/core";
+import { Utils as Utils7 } from "@tspro/ts-utils-lib";
+import { MusicError as MusicError11, MusicErrorType as MusicErrorType11 } from "@tspro/web-music-score/core";
 var ObjConnective = class extends MusicObject {
   constructor(connectiveProps, line, measure, leftNoteGroup, leftNoteId, ...args) {
     super(measure);
@@ -4635,7 +4438,7 @@ var ObjConnective = class extends MusicObject {
       this.rightNoteGroup = args[0];
       this.rightNoteId = args[1];
       this.tieType = void 0;
-    } else if (Utils8.Is.isEnumValue(args[0], TieType)) {
+    } else if (Utils7.Is.isEnumValue(args[0], TieType)) {
       this.rightNoteGroup = void 0;
       this.rightNoteId = void 0;
       this.tieType = args[0];
@@ -4696,7 +4499,7 @@ var ObjConnective = class extends MusicObject {
       rx = contentRect.right;
       ry = leftPos.y + (rightPos.y - leftPos.y) * tLeft / (tLeft + tRight);
     } else {
-      throw new MusicError12(MusicErrorType12.Score, "Cannot layout connective object because no valid left and right note groups.");
+      throw new MusicError11(MusicErrorType11.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;
@@ -4705,7 +4508,7 @@ var ObjConnective = class extends MusicObject {
     this.rx = rx;
     this.ry = ry;
     this.arcHeight = this.connectiveProps.connective === 2 /* Slide */ ? 0 : arcHeight;
-    let { nx, ny } = Utils8.Math.calcNormal(lx, ly, rx, ry);
+    let { nx, ny } = Utils7.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;
@@ -4765,7 +4568,7 @@ var ObjConnective = class extends MusicObject {
 };
 
 // src/score/engine/connective-props.ts
-import { MusicError as MusicError13, MusicErrorType as MusicErrorType13 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError12, MusicErrorType as MusicErrorType12 } from "@tspro/web-music-score/core";
 var ConnectiveProps = class {
   constructor(connective, span, noteAnchor, startNoteGroup) {
     this.connective = connective;
@@ -4845,7 +4648,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) => Note7.equals(rightNote, leftNote));
+            let rightNoteId = rightNoteGroup.notes.findIndex((rightNote) => Note6.equals(rightNote, leftNote));
             if (rightNoteId >= 0) {
               this.createObjConnective(leftNoteGroup, leftNoteId, rightNoteGroup, rightNoteId);
             }
@@ -4900,7 +4703,7 @@ var ConnectiveProps = class {
       addConnective(leftNoteGroup.measure, leftNoteGroup, leftNoteId, rightNoteGroup, rightNoteId);
       addConnective(rightNoteGroup.measure, leftNoteGroup, leftNoteId, rightNoteGroup, rightNoteId);
     } else {
-      throw new MusicError13(MusicErrorType13.Score, "Cannot create connective because it is jumping measures.");
+      throw new MusicError12(MusicErrorType12.Score, "Cannot create connective because it is jumping measures.");
     }
   }
 };
@@ -4908,7 +4711,7 @@ var ConnectiveProps = class {
 // src/score/engine/obj-measure.ts
 function validateVoiceId(voiceId) {
   if (getVoiceIds().indexOf(voiceId) < 0) {
-    throw new MusicError14(MusicErrorType14.Score, "Invalid voiceId: " + voiceId);
+    throw new MusicError13(MusicErrorType13.Score, "Invalid voiceId: " + voiceId);
   } else {
     return voiceId;
   }
@@ -4944,7 +4747,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);
@@ -4956,6 +4759,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();
@@ -5004,10 +4808,10 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
       if (this.row.hasStaff) {
         diatonicId = this.row.getTopStaff().middleLineDiatonicId;
       } else {
-        diatonicId = Note8.getNote("C4").diatonicId;
+        diatonicId = Note7.getNote("C4").diatonicId;
       }
     }
-    return this.useDiatonicId[voiceId] = Note8.validateDiatonicId(diatonicId);
+    return this.useDiatonicId[voiceId] = Note7.validateDiatonicId(diatonicId);
   }
   updateOwnStemDir(symbol, setStemDir) {
     var _a, _b;
@@ -5144,7 +4948,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
         let scaleType = validateScaleType("" + args[1]);
         this.alterKeySignature = getScale(tonic, scaleType);
       } catch (e) {
-        throw new MusicError14(MusicErrorType14.Score, "Cannot set key signature because invalid args: " + args);
+        throw new MusicError13(MusicErrorType13.Score, "Cannot set key signature because invalid args: " + args);
       }
     }
     this.updateKeySignature();
@@ -5218,25 +5022,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 MusicError14(MusicErrorType14.Score, "Cannot add Fermata because anchor is undefined.");
+      throw new MusicError13(MusicErrorType13.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();
@@ -5244,15 +5041,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 MusicError14(MusicErrorType14.Score, "Cannot add ending beasure measure already has one.");
+          throw new MusicError13(MusicErrorType13.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 */:
@@ -5260,37 +5062,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 (Utils9.Is.isIntegerGte(args[0], 2)) {
+        } else if (Utils8.Is.isIntegerGte(args[0], 2)) {
           this.endRepeatPlayCount = args[0];
         } else {
-          throw new MusicError14(MusicErrorType14.Score, "Invalid end repeat play count (should be 2 or greater integer): " + args[0]);
+          throw new MusicError13(MusicErrorType13.Score, "Invalid end repeat play count (should be 2 or greater integer): " + args[0]);
         }
         if (this.endRepeatPlayCount !== 2) {
           let textProps = {
@@ -5301,6 +5119,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();
   }
@@ -5316,70 +5139,125 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
   addConnective(connective, ...args) {
     let anchor = this.lastAddedRhythmSymbol;
     if (!(anchor instanceof ObjNoteGroup)) {
-      throw new MusicError14(MusicErrorType14.Score, "Connective can be added to note group only.");
+      throw new MusicError13(MusicErrorType13.Score, "Connective can be added to note group only.");
     }
     if (connective === 0 /* Tie */) {
-      let tieSpan = Utils9.Is.isInteger(args[0]) || Utils9.Is.isEnumValue(args[0], TieType) ? args[0] : 2;
-      let noteAnchor = Utils9.Is.isEnumValue(args[1], NoteAnchor) ? args[1] : 0 /* Auto */;
+      let tieSpan = Utils8.Is.isInteger(args[0]) || Utils8.Is.isEnumValue(args[0], TieType) ? args[0] : 2;
+      let noteAnchor = Utils8.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 = Utils9.Is.isInteger(args[0]) ? args[0] : 2;
-      let noteAnchor = Utils9.Is.isEnumValue(args[1], NoteAnchor) ? args[1] : 0 /* Auto */;
+      let slurSpan = Utils8.Is.isInteger(args[0]) ? args[0] : 2;
+      let noteAnchor = Utils8.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 = Utils9.Is.isEnumValue(args[0], NoteAnchor) ? args[0] : 0 /* Auto */;
+      let noteAnchor = Utils8.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) {
+          (Utils8.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 MusicError14(MusicErrorType14.Score, "Cannot add label because anchor is undefined.");
+      throw new MusicError13(MusicErrorType13.Score, "Cannot add label because anchor is undefined.");
     } else if (text.length === 0) {
-      throw new MusicError14(MusicErrorType14.Score, "Cannot add label because label text is empty.");
+      throw new MusicError13(MusicErrorType13.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 MusicError14(MusicErrorType14.Score, "Cannot add annotation because anchor is undefined.");
+      throw new MusicError13(MusicErrorType13.Score, "Cannot add annotation because anchor is undefined.");
     } else if (text.length === 0) {
-      throw new MusicError14(MusicErrorType14.Score, "Cannot add annotation because annotation text is empty.");
+      throw new MusicError13(MusicErrorType13.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;
@@ -5401,27 +5279,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 MusicError14(MusicErrorType14.Score, "Cannot add extension because music object to attach it to is undefined.");
-    } else {
-      throw new MusicError14(MusicErrorType14.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 MusicError13(MusicErrorType13.Score, "Cannot add extension becaue no compatible music object to attach it to.");
+      }
+    });
+    if (this.addExtensionToMusicObjects.length === 0) {
+      throw new MusicError13(MusicErrorType13.Score, "Cannot add extension because music object to attach it to is undefined.");
     }
+    this.disableExtension();
+    this.requestLayout();
   }
   addRhythmSymbol(voiceId, symbol) {
     let { col } = symbol;
@@ -5433,7 +5313,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     this.lastAddedRhythmSymbol = symbol;
   }
   addNoteGroup(voiceId, notes, noteLength, options) {
-    let notes2 = notes.map((note) => typeof note === "string" ? Note8.getNote(note) : note);
+    let notes2 = notes.map((note) => typeof note === "string" ? Note7.getNote(note) : note);
     let col = this.getRhythmColumn(voiceId);
     this.addRhythmSymbol(voiceId, new ObjNoteGroup(col, voiceId, notes2, noteLength, options));
   }
@@ -5465,7 +5345,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
         return col2;
       }
     }
-    throw new MusicError14(MusicErrorType14.Score, "Error in rhythm column. Should never get here.");
+    throw new MusicError13(MusicErrorType13.Score, "Error in rhythm column. Should never get here.");
   }
   getMeasureTicks() {
     return this.getTimeSignature().measureTicks;
@@ -5517,11 +5397,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) => {
@@ -5549,16 +5433,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);
+              }
             }
           }
         }
@@ -5665,7 +5555,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     let consumedTicks = this.getConsumedTicks(voiceId);
     let remainingTicks = measureTicks - consumedTicks;
     let rests = [];
-    let noteLengthValues = Utils9.Enum.getEnumValues(NoteLength6);
+    let noteLengthValues = Utils8.Enum.getEnumValues(NoteLength6);
     while (remainingTicks > 0) {
       noteLengthValues.forEach((restLength) => {
         let restValue = new RhythmProps4(restLength, false);
@@ -5695,6 +5585,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;
@@ -5742,6 +5633,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;
@@ -5773,7 +5665,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 = Utils9.Math.sum(this.columns.map((col) => col.getRect().width));
+    let columnsWidth = Utils8.Math.sum(this.columns.map((col) => col.getRect().width));
     let columnScale = columnsAreaWidth / columnsWidth;
     let columnLeft = columnsAreaLeft;
     this.columns.forEach((col) => {
@@ -5818,7 +5710,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),
@@ -5827,12 +5720,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));
@@ -5845,7 +5746,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();
   }
@@ -5860,7 +5761,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));
         }
@@ -5883,7 +5784,7 @@ __publicField(_ObjMeasure, "MinFlexContentWidth", 10);
 var ObjMeasure2 = _ObjMeasure;
 
 // src/score/engine/layout-object.ts
-import { MusicError as MusicError15, MusicErrorType as MusicErrorType15 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError14, MusicErrorType as MusicErrorType14 } from "@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) {
@@ -5893,11 +5794,19 @@ function requireParentMeasure(p) {
     }
     p = p.getParent();
   }
-  throw new MusicError15(MusicErrorType15.Score, "Parent measure is required but not found!");
+  throw new MusicError14(MusicErrorType14.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");
@@ -5905,15 +5814,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 MusicError15(MusicErrorType15.Score, "Parent music object is required as an anchor.");
+      throw new MusicError14(MusicErrorType14.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() {
@@ -5926,20 +5835,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);
           }
         });
       });
@@ -5953,6 +5861,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) {
@@ -5960,8 +5877,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;
   }
@@ -5989,6 +5906,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) => Note8.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) {
+    Note8.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 MusicError15(MusicErrorType15.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 MusicError15(MusicErrorType15.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 (Utils9.Is.isArray(tabConfig.tuning)) {
+      this.tuningName = void 0;
+      this.tuningStrings = tabConfig.tuning.map((noteName) => Note8.getNote(noteName)).reverse();
+    } else if (typeof tabConfig.tuning === "string") {
+      this.tuningName = validateTuningName(tabConfig.tuning);
+      this.tuningStrings = getTuningStrings(this.tuningName);
+    } else {
+      this.tuningName = "Standard";
+      this.tuningStrings = 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
 import { MusicError as MusicError16, MusicErrorType as MusicErrorType16 } from "@tspro/web-music-score/core";
 var ObjScoreRow = class extends MusicObject {
@@ -6017,7 +6261,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];
@@ -6069,6 +6313,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 [];
@@ -6149,7 +6399,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();
     });
@@ -6183,6 +6432,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());
   }
@@ -6199,7 +6455,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();
@@ -6212,59 +6467,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;
@@ -6288,21 +6496,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));
@@ -6413,9 +6610,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);
   }
@@ -6481,13 +6678,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;
@@ -6553,6 +6743,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)));
@@ -6600,21 +6796,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) {
@@ -6839,21 +7029,64 @@ var DocumentBuilder = class {
     this.getMeasure().addRest(voiceId, restLength, options);
     return this;
   }
-  addFermata(fermata) {
-    assertArg(Utils11.Is.isEnumValueOrUndefined(fermata, Fermata), "fermata", fermata);
-    this.getMeasure().addFermata(fermata != null ? fermata : 0 /* AtNote */);
+  addFermataInternal(staffTabOrGroup, fermata) {
+    assertArg(Utils11.Is.isStringOrUndefined(staffTabOrGroup) || Utils11.Is.isIntegerGte(staffTabOrGroup, 0), "staffTabOrGroup", staffTabOrGroup);
+    assertArg(Utils11.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(Utils11.Is.isStringOrUndefined(staffTabOrGroup) || Utils11.Is.isIntegerGte(staffTabOrGroup, 0), "staffTabOrGroup", staffTabOrGroup);
     assertArg(Utils11.Is.isEnumValue(navigation, Navigation), "navigation", navigation);
     if (navigation === 9 /* EndRepeat */ && args.length > 0) {
       assertArg(Utils11.Is.isIntegerGte(args[0], 1), "playCount", args[0]);
     } else if (navigation === 10 /* Ending */ && args.length > 0) {
       assertArg(args.every((passage) => Utils11.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(Utils11.Is.isStringOrUndefined(staffTabOrGroup) || Utils11.Is.isIntegerGte(staffTabOrGroup, 0), "staffTabOrGroup", staffTabOrGroup);
+    assertArg(Utils11.Is.isEnumValue(label, Label), "label", label);
+    assertArg(Utils11.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(Utils11.Is.isStringOrUndefined(staffTabOrGroup) || Utils11.Is.isIntegerGte(staffTabOrGroup, 0), "staffTabOrGroup", staffTabOrGroup);
+    assertArg(Utils11.Is.isEnumValue(annotation, Annotation), "annotation", annotation);
+    assertArg(Utils11.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(Utils11.Is.isEnumValue(connective, Connective), "connective", connective);
     if (connective === 0 /* Tie */) {
@@ -6875,24 +7108,30 @@ var DocumentBuilder = class {
     }
     return this;
   }
-  addLabel(label, text) {
-    assertArg(Utils11.Is.isEnumValue(label, Label), "label", label);
-    assertArg(Utils11.Is.isString(text), "text", text);
-    this.getMeasure().addLabel(label, text);
-    return this;
-  }
-  addAnnotation(annotation, text) {
-    assertArg(Utils11.Is.isEnumValue(annotation, Annotation), "annotation", annotation);
-    assertArg(Utils11.Is.isString(text), "text", text);
-    this.getMeasure().addAnnotation(annotation, text);
-    return this;
-  }
   addExtension(extensionLength, extensionVisible) {
     assertArg(Utils11.Is.isIntegerGte(extensionLength, 0) || extensionLength === Infinity || Utils11.Is.isEnumValue(extensionLength, NoteLength7), "extendionLength", extensionLength);
     assertArg(Utils11.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(Utils11.Is.isString(groupName) && groupName.length > 0, "groupName", groupName);
+    assertArg(
+      Utils11.Is.isString(staffsTabsAndGroups) && staffsTabsAndGroups.length > 0 || Utils11.Is.isIntegerGte(staffsTabsAndGroups, 0) || Utils11.Is.isArray(staffsTabsAndGroups) && staffsTabsAndGroups.every((line) => Utils11.Is.isString(line) && line.length > 0 || Utils11.Is.isIntegerGte(line, 0)),
+      "staffsTabsAndGroups",
+      staffsTabsAndGroups
+    );
+    assertArg(Utils11.Is.isEnumValue(verticalPosition, VerticalPosition), "verticalPosition", verticalPosition);
+    this.doc.addStaffGroup(groupName, staffsTabsAndGroups, verticalPosition);
+    return this;
+  }
   endSong() {
     this.getMeasure().endSong();
     return this;
@@ -7663,6 +7902,7 @@ export {
   StaffPreset,
   Stem,
   TieType,
+  VerticalPosition,
   getStringNumbers,
   getVoiceIds
 };