@tspro/web-music-score 5.4.1 → 5.4.2

package/dist/score/index.mjs

@@ -1,15 +1,15 @@
-/* WebMusicScore v5.4.1 | (c) 2023-2025 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+/* WebMusicScore v5.4.2 | (c) 2023-2025 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
 import {
   MusicError
-} from "../chunk-6P4ECBUH.mjs";
+} from "../chunk-MMWSQGVR.mjs";
 import {
   NoteLengthProps,
   RhythmProps,
   validateNoteLength
-} from "../chunk-A5SMODAT.mjs";
+} from "../chunk-42IBAVOC.mjs";
 import {
   __publicField
-} from "../chunk-U2ACCEHX.mjs";
+} from "../chunk-ROBXPR34.mjs";
 
 // src/score/pub/div-rect.ts
 import { Utils } from "@tspro/ts-utils-lib";
@@ -537,13 +537,52 @@ var MusicObject = class {
   }
   updateRect() {
   }
+  forceRectUpdate() {
+    this.needRectUpdate = true;
+    this.updateRect();
+    this.needRectUpdate = false;
+  }
   getRect() {
-    if (this.needRectUpdate) {
-      this.updateRect();
-      this.needRectUpdate = false;
-    }
+    if (this.needRectUpdate)
+      this.forceRectUpdate();
     return this.rect;
   }
+  offsetX(dx) {
+    this.offset(dx, 0);
+  }
+  offsetY(dy) {
+    this.offset(0, dy);
+  }
+  setLeft(x) {
+    this.offset(x - this.getRect().left, 0);
+  }
+  setRight(x) {
+    this.offset(x - this.getRect().right, 0);
+  }
+  setTop(y) {
+    this.offset(0, y - this.getRect().top);
+  }
+  setBottom(y) {
+    this.offset(0, y - this.getRect().bottom);
+  }
+  setAnchor(x, y) {
+    this.offset(x - this.getRect().anchorX, y - this.getRect().anchorY);
+  }
+  setAnchorX(x) {
+    this.offset(x - this.getRect().anchorX, 0);
+  }
+  setAnchorY(y) {
+    this.offset(0, y - this.getRect().anchorY);
+  }
+  setCenter(x, y) {
+    this.offset(x - this.getRect().centerX, y - this.getRect().centerY);
+  }
+  setCenterX(x) {
+    this.offset(x - this.getRect().centerX, 0);
+  }
+  setCenterY(y) {
+    this.offset(0, y - this.getRect().centerY);
+  }
   /**
    * Most objects are simple rects in shape.
    * Some objects might be more complex consisting of multiple rects.
@@ -587,7 +626,7 @@ var DebugSettings = {
 };
 var DocumentSettings = {
   DocumentScale: 1,
-  DocumentMinWidth: 75,
+  MinStaffWidth: 75,
   MinColumnsWidth: 10,
   ColumnWidthScale: 1.7,
   PostMeasureBreakWidth: 10,
@@ -1149,72 +1188,112 @@ var RenderContext = class {
     }
   }
   arc(x, y, radius, startRadians, endRadians) {
-    var _a;
-    (_a = this.ctx) == null ? void 0 : _a.arc(x, y, radius, startRadians, endRadians);
+    if (this.ctx) this.ctx.arc(x, y, radius, startRadians, endRadians);
+    return this;
   }
   fillCircle(x, y, radius) {
-    if (this.ctx) {
-      this.ctx.beginPath();
-      this.ctx.arc(x, y, radius, 0, 2 * Math.PI);
-      this.ctx.fill();
-    }
+    if (!this.ctx) return this;
+    this.ctx.beginPath();
+    this.ctx.arc(x, y, radius, 0, 2 * Math.PI);
+    this.ctx.fill();
+    return this;
   }
   strokeLine(startX, startY, endX, endY) {
-    if (this.ctx) {
-      this.ctx.beginPath();
-      this.ctx.moveTo(startX, startY);
-      this.ctx.lineTo(endX, endY);
-      this.ctx.stroke();
-    }
+    if (!this.ctx) return this;
+    this.ctx.beginPath();
+    this.ctx.moveTo(startX, startY);
+    this.ctx.lineTo(endX, endY);
+    this.ctx.stroke();
+    return this;
   }
   strokePartialLine(startX, startY, endX, endY, startT, endT) {
+    if (!this.ctx) return this;
     let x1 = startX + (endX - startX) * startT;
     let y1 = startY + (endY - startY) * startT;
     let x2 = startX + (endX - startX) * endT;
     let y2 = startY + (endY - startY) * endT;
-    if (this.ctx) {
-      this.ctx.beginPath();
-      this.ctx.moveTo(x1, y1);
-      this.ctx.lineTo(x2, y2);
-      this.ctx.stroke();
-    }
+    this.ctx.beginPath();
+    this.ctx.moveTo(x1, y1);
+    this.ctx.lineTo(x2, y2);
+    this.ctx.stroke();
+    return this;
   }
+  /** @deprecated - Use {@link drawBracket} instead. */
   drawBrace(rect, side) {
-    if (this.ctx) {
-      let { left, right, width, top, bottom, anchorY } = rect;
-      if (side === "right") {
-        [left, right, width] = [right, left, -width];
-      }
-      this.ctx.beginPath();
-      this.ctx.moveTo(right, top);
-      this.ctx.bezierCurveTo(
-        left + width * 0.1,
-        top,
-        left + width * 0.8,
-        anchorY,
-        left,
-        anchorY
-      );
-      this.ctx.moveTo(right, bottom);
-      this.ctx.bezierCurveTo(
-        left + width * 0.1,
-        bottom,
-        left + width * 0.8,
-        anchorY,
-        left,
-        anchorY
-      );
-      this.ctx.stroke();
+    return this.drawBracket(rect, side === "left" ? "{" : "}");
+  }
+  drawBracket(rect, bracket) {
+    if (!this.ctx) return this;
+    let { left, right, width, top, bottom, height, anchorY } = rect;
+    if ([")", "]", "}", ">"].includes(bracket)) {
+      [left, right, width] = [right, left, -width];
+    }
+    switch (bracket) {
+      case "(":
+      case ")":
+        this.ctx.beginPath();
+        this.ctx.moveTo(right, top);
+        this.ctx.bezierCurveTo(
+          left - width * 0.2,
+          top + height * 0.3,
+          left - width * 0.2,
+          top + height * 0.7,
+          right,
+          bottom
+        );
+        this.ctx.stroke();
+        break;
+      case "{":
+      case "}":
+        this.ctx.beginPath();
+        this.ctx.moveTo(right, top);
+        this.ctx.bezierCurveTo(
+          left + width * 0.1,
+          top,
+          left + width * 0.8,
+          anchorY,
+          left,
+          anchorY
+        );
+        this.ctx.moveTo(right, bottom);
+        this.ctx.bezierCurveTo(
+          left + width * 0.1,
+          bottom,
+          left + width * 0.8,
+          anchorY,
+          left,
+          anchorY
+        );
+        this.ctx.stroke();
+        break;
+      case "[":
+      case "]":
+        this.ctx.beginPath();
+        this.ctx.moveTo(right, top);
+        this.ctx.lineTo(left, top);
+        this.ctx.lineTo(left, bottom);
+        this.ctx.lineTo(right, bottom);
+        this.ctx.stroke();
+        break;
+      case "<":
+      case ">":
+        this.ctx.beginPath();
+        this.ctx.moveTo(right, top);
+        this.ctx.lineTo(left, anchorY);
+        this.ctx.lineTo(right, bottom);
+        this.ctx.stroke();
+        break;
     }
+    return this;
   }
 };
 
 // src/score/engine/obj-staff-and-tab.ts
 import { MusicError as MusicError15, MusicErrorType as MusicErrorType15 } from "@tspro/web-music-score/core";
-import { AnchoredRect as AnchoredRect22, Guard as Guard9, UniMap as UniMap7, Utils as Utils10 } from "@tspro/ts-utils-lib";
+import { AnchoredRect as AnchoredRect22, Guard as Guard9, UniMap as UniMap8, Utils as Utils10 } from "@tspro/ts-utils-lib";
 
 // src/score/engine/obj-measure.ts
-import { Guard as Guard8, IndexArray as IndexArray2, UniMap as UniMap5, TriMap as TriMap2, ValueSet, Utils as Utils9, asMulti, AnchoredRect as AnchoredRect20 } from "@tspro/ts-utils-lib";
+import { Guard as Guard8, IndexArray as IndexArray2, UniMap as UniMap6, TriMap as TriMap2, ValueSet, Utils as Utils9, asMulti, AnchoredRect as AnchoredRect20 } from "@tspro/ts-utils-lib";
 import { getScale, Scale, validateScaleType, Note as Note7, RhythmProps as RhythmProps5, KeySignature as KeySignature2, getDefaultKeySignature, PitchNotation, SymbolSet, validateNoteLength as validateNoteLength2, NoteLengthProps as NoteLengthProps5 } from "@tspro/web-music-score/theory";
 import { getDefaultTempo, getDefaultTimeSignature } from "@tspro/web-music-score/theory";
 
@@ -1642,20 +1721,21 @@ var ObjStaffSignature = class extends MusicObject {
     if (this.clefImage) {
       x += paddingX;
       this.clefImage.layout(ctx);
-      this.clefImage.offset(x, staff.getDiatonicIdY(staff.clefLineDiatonicId));
+      this.clefImage.setAnchor(x, staff.getDiatonicIdY(staff.clefLineDiatonicId));
       this.rect.expandInPlace(this.clefImage.getRect());
       x = this.rect.right;
       if (this.eightBelowClef) {
         let r = this.clefImage.getRect();
         this.eightBelowClef.layout(ctx);
-        this.eightBelowClef.offset(r.centerX, Math.max(r.anchorY + r.height * 0.3, staff.getBottomLineY()));
+        this.eightBelowClef.setCenterX(r.centerX);
+        this.eightBelowClef.setTop(Math.max(r.anchorY + r.height * 0.3, staff.getBottomLineY()));
         this.rect.expandInPlace(this.eightBelowClef.getRect());
       }
     }
     if (this.measureNumber) {
       this.measureNumber.layout(ctx);
-      let y = Math.min(staff.getTopLineY(), this.clefImage ? this.clefImage.getRect().top : staff.getTopLineY());
-      this.measureNumber.offset(0, y);
+      this.measureNumber.setLeft(0);
+      this.measureNumber.setBottom(Math.min(staff.getTopLineY(), this.clefImage ? this.clefImage.getRect().top : staff.getTopLineY()));
       this.rect.expandInPlace(this.measureNumber.getRect());
       x = Math.max(x, this.rect.right);
     }
@@ -1663,7 +1743,8 @@ var ObjStaffSignature = class extends MusicObject {
       x += paddingX;
       this.ksNeutralizeAccidentals.forEach((objAcc) => {
         objAcc.layout(ctx);
-        objAcc.offset(x + objAcc.getRect().leftw, staff.getDiatonicIdY(objAcc.diatonicId));
+        objAcc.setLeft(x);
+        objAcc.setAnchorY(staff.getDiatonicIdY(objAcc.diatonicId));
         this.rect.expandInPlace(objAcc.getRect());
         x = this.rect.right;
       });
@@ -1672,7 +1753,8 @@ var ObjStaffSignature = class extends MusicObject {
       x += paddingX;
       this.ksNewAccidentals.forEach((objAcc) => {
         objAcc.layout(ctx);
-        objAcc.offset(x + objAcc.getRect().leftw, staff.getDiatonicIdY(objAcc.diatonicId));
+        objAcc.setLeft(x);
+        objAcc.setAnchorY(staff.getDiatonicIdY(objAcc.diatonicId));
         this.rect.expandInPlace(objAcc.getRect());
         x = this.rect.right;
       });
@@ -1682,24 +1764,34 @@ var ObjStaffSignature = class extends MusicObject {
     (_b = this.beatSizeText) == null ? void 0 : _b.layout(ctx);
     let tsWidth = Math.max((_d = (_c = this.beatCountText) == null ? void 0 : _c.getRect().width) != null ? _d : 0, (_f = (_e = this.beatSizeText) == null ? void 0 : _e.getRect().width) != null ? _f : 0);
     if (this.beatCountText) {
-      this.beatCountText.offset(x + tsWidth / 2 + paddingX, staff.getDiatonicIdY(staff.middleLineDiatonicId + 2));
+      this.beatCountText.setCenter(
+        x + tsWidth / 2 + paddingX,
+        staff.getDiatonicIdY(staff.middleLineDiatonicId + 2)
+      );
       this.rect.expandInPlace(this.beatCountText.getRect());
       right = Math.max(right, this.rect.right);
     }
     if (this.beatSizeText) {
-      this.beatSizeText.offset(x + tsWidth / 2 + paddingX, staff.getDiatonicIdY(staff.bottomLineDiatonicId + 2));
+      this.beatSizeText.setCenter(
+        x + tsWidth / 2 + paddingX,
+        staff.getDiatonicIdY(staff.bottomLineDiatonicId + 2)
+      );
       this.rect.expandInPlace(this.beatSizeText.getRect());
       right = Math.max(right, this.rect.right);
     }
     x = right;
     if (this.tempoText) {
-      let tempoBottom = Math.min(
-        this.clefImage ? this.clefImage.getRect().top : staff.getTopLineY(),
-        ...this.ksNeutralizeAccidentals.map((o) => o.getRect().top),
-        ...this.ksNewAccidentals.map((o) => o.getRect().top)
-      );
       this.tempoText.layout(ctx);
-      this.tempoText.offset(x, tempoBottom);
+      this.tempoText.setCenterX(x);
+      this.tempoText.setBottom(staff.getTopLineY());
+      if (this.clefImage && AnchoredRect6.overlap(this.clefImage.getRect(), this.tempoText.getRect())) {
+        this.tempoText.setBottom(this.clefImage.getRect().top);
+      }
+      [...this.ksNeutralizeAccidentals, ...this.ksNewAccidentals].forEach((acc) => {
+        if (this.tempoText && AnchoredRect6.overlap(acc.getRect(), this.tempoText.getRect())) {
+          this.tempoText.setBottom(acc.getRect().top);
+        }
+      });
       this.rect.expandInPlace(this.tempoText.getRect());
     }
     this.rect.right += paddingX;
@@ -1810,7 +1902,8 @@ var ObjTabSignature = class extends MusicObject {
     this.rect = new AnchoredRect6();
     if (this.measureNumber) {
       this.measureNumber.layout(ctx);
-      this.measureNumber.offset(0, topLineY);
+      this.measureNumber.setLeft(0);
+      this.measureNumber.setBottom(topLineY);
       this.rect.expandInPlace(this.measureNumber.getRect());
       x = Math.max(x, this.rect.right);
     }
@@ -1818,16 +1911,23 @@ var ObjTabSignature = class extends MusicObject {
     (_b = this.beatSizeText) == null ? void 0 : _b.layout(ctx);
     let tsWidth = Math.max((_d = (_c = this.beatCountText) == null ? void 0 : _c.getRect().width) != null ? _d : 0, (_f = (_e = this.beatSizeText) == null ? void 0 : _e.getRect().width) != null ? _f : 0);
     if (this.beatCountText) {
-      this.beatCountText.offset(0 + tsWidth / 2 + paddingX, tab.getRect().anchorY - this.beatCountText.getRect().bottomh);
+      this.beatCountText.setCenter(
+        0 + tsWidth / 2 + paddingX,
+        tab.getRect().anchorY - this.beatCountText.getRect().bottomh
+      );
       this.rect.expandInPlace(this.beatCountText.getRect());
     }
     if (this.beatSizeText) {
-      this.beatSizeText.offset(0 + tsWidth / 2 + paddingX, tab.getRect().anchorY + this.beatSizeText.getRect().toph);
+      this.beatSizeText.setCenter(
+        0 + tsWidth / 2 + paddingX,
+        tab.getRect().anchorY + this.beatSizeText.getRect().toph
+      );
       this.rect.expandInPlace(this.beatSizeText.getRect());
     }
     if (this.tempoText) {
       this.tempoText.layout(ctx);
-      this.tempoText.offset(x + unitSize * 2, topLineY);
+      this.tempoText.setLeft(x + unitSize * 2);
+      this.tempoText.setBottom(topLineY);
       this.rect.expandInPlace(this.tempoText.getRect());
     }
     this.rect.right += paddingX;
@@ -2126,7 +2226,7 @@ var _ObjRest = class _ObjRest extends MusicObject {
         let dotY = this.getRestDotVerticalDisplacement(noteSize) * unitSize;
         obj.dotRects.push(AnchoredRect8.createCentered(dotX, dotY, dotWidth, dotWidth));
       }
-      obj.offset(0, staff.getDiatonicIdY(diatonicId));
+      obj.setAnchor(0, staff.getDiatonicIdY(diatonicId));
       this.staffObjects.push(obj);
       this.measure.addStaticObject(staff, obj);
     });
@@ -2634,7 +2734,10 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
           let acc = obj.accidentals[noteIndex] = new ObjAccidental(this, note.diatonicId, note.accidental, this.color);
           if (acc) {
             acc.layout(ctx);
-            acc.offset(-noteHeadRect.leftw - unitSize * DocumentSettings.NoteAccSpace - acc.getRect().rightw, noteY);
+            acc.setAnchor(
+              -noteHeadRect.leftw - unitSize * DocumentSettings.NoteAccSpace - acc.getRect().rightw,
+              noteY
+            );
           }
           noteStaff.addObject(acc);
         }
@@ -2698,9 +2801,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
           let color = fretId < 0 ? "red" : "black";
           let fretNumber = new ObjText(this, { text: String(fretId), color, bgcolor: "white" }, 0.5, 0.5);
           fretNumber.layout(ctx);
-          let x = this.col.getRect().anchorX;
-          let y = tab.getStringY(stringNumber - 1);
-          fretNumber.offset(x, y);
+          fretNumber.setAnchor(this.col.getRect().anchorX, tab.getStringY(stringNumber - 1));
           obj.fretNumbers.push(fretNumber);
         }
       });
@@ -2875,7 +2976,7 @@ var ObjRhythmColumn = class extends MusicObject {
     return Math.max(0, nextPositionTicks - curPositionTicks);
   }
   getShapeRects() {
-    this.getRect();
+    this.forceRectUpdate();
     return this.shapeRects;
   }
   get doc() {
@@ -3041,6 +3142,8 @@ var ObjRhythmColumn = class extends MusicObject {
       return;
     }
     let { row } = this;
+    this.rect = new AnchoredRect10();
+    this.requestRectUpdate();
     let leftw = 0;
     let rightw = 0;
     this.voiceSymbol.forEach((symbol) => {
@@ -3054,7 +3157,7 @@ var ObjRhythmColumn = class extends MusicObject {
       this.arpeggios.forEach((a) => a.layout(ctx));
       const arpeggioWidth = this.arpeggios.map((a) => a.getRect().width).reduce((accState2, cur) => Math.max(accState2, cur)) + ctx.unitSize;
       this.arpeggios.forEach((a) => {
-        a.offset(-leftw - arpeggioWidth + a.getRect().leftw, a.line.getRect().anchorY - a.getRect().anchorY);
+        a.setAnchor(-leftw - arpeggioWidth / 2, a.line.getRect().anchorY);
         a.line.addObject(a);
         this.measure.addStaticObject(a.line, a);
       });
@@ -3069,7 +3172,9 @@ var ObjRhythmColumn = class extends MusicObject {
     rightw = Math.max(rightw, MinColumnWidth / 2);
     leftw *= DocumentSettings.ColumnWidthScale;
     rightw *= DocumentSettings.ColumnWidthScale;
-    this.rect = new AnchoredRect10(-leftw, 0, rightw, 0, 0, 0);
+    this.rect.left = -leftw;
+    this.rect.anchorX = 0;
+    this.rect.right = rightw;
     this.requestRectUpdate();
     this.voiceSymbol.forEach((symbol) => symbol.updateAccidentalState(accState));
     this.row.getStaves().forEach((staff) => {
@@ -3221,8 +3326,8 @@ var _ObjSpecialText = class _ObjSpecialText extends MusicObject {
         let codaText = this.components[1];
         codaSym.layout(ctx);
         codaText.layout(ctx);
-        codaSym.offset(0, codaText.getRect().centerY);
-        codaText.offset(codaSym.getRect().right, 0);
+        codaSym.setAnchorY(codaText.getRect().centerY);
+        codaText.setLeft(codaSym.getRect().right);
         this.rect = new AnchoredRect11(
           codaSym.getRect().left,
           codaSym.getRect().anchorX,
@@ -3238,8 +3343,8 @@ var _ObjSpecialText = class _ObjSpecialText extends MusicObject {
         let codaSym = this.components[1];
         toCodaText.layout(ctx);
         codaSym.layout(ctx);
-        codaSym.offset(0, toCodaText.getRect().centerY);
-        toCodaText.offset(codaSym.getRect().left, 0);
+        codaSym.setAnchorY(toCodaText.getRect().centerY);
+        toCodaText.setRight(codaSym.getRect().left);
         this.rect = new AnchoredRect11(
           toCodaText.getRect().left,
           codaSym.getRect().anchorX,
@@ -3818,17 +3923,17 @@ var Player = class _Player {
 };
 
 // src/score/engine/obj-bar-line.ts
-import { AnchoredRect as AnchoredRect13 } from "@tspro/ts-utils-lib";
-var ObjStaffTabBarLine = class extends MusicObject {
+import { AnchoredRect as AnchoredRect13, UniMap as UniMap4 } from "@tspro/ts-utils-lib";
+var ObjStaffBarLine = class extends MusicObject {
   constructor(barLine, line) {
     super(line);
     this.barLine = barLine;
     this.line = line;
-    __publicField(this, "verticalLines", []);
+    __publicField(this, "vlines", []);
     __publicField(this, "dots", []);
     __publicField(this, "mi");
     line.addObject(this);
-    this.mi = new MStaffTabBarLine(this);
+    this.mi = new MStaffBarLine(this);
   }
   getMusicInterface() {
     return this.mi;
@@ -3836,11 +3941,17 @@ var ObjStaffTabBarLine = class extends MusicObject {
   pick(x, y) {
     return this.getRect().contains(x, y) ? [this] : [];
   }
-  setRect(r) {
-    this.rect = r;
+  updateRect() {
+    this.rect = new AnchoredRect13(0, 0, this.line.getTopLineY(), this.line.getBottomLineY());
+    this.vlines.forEach(
+      (l) => this.rect.expandInPlace(new AnchoredRect13(l.left, l.left + l.width, this.rect.top, this.rect.bottom))
+    );
+    this.dots.forEach(
+      (d) => this.rect.expandInPlace(new AnchoredRect13(d.x - d.r, d.x + d.r, d.y - d.r, d.y + d.r))
+    );
   }
   offset(dx, dy) {
-    this.verticalLines.forEach((l) => l.left += dx);
+    this.vlines.forEach((l) => l.left += dx);
     this.dots.forEach((d) => {
       d.x += dx;
       d.y += dy;
@@ -3852,16 +3963,16 @@ var ObjBarLine = class extends MusicObject {
   constructor(measure) {
     super(measure);
     this.measure = measure;
-    __publicField(this, "staffTabObjects", []);
-    __publicField(this, "staffTabObjectGroups", []);
+    __publicField(this, "notationLineObjects", []);
+    __publicField(this, "notationLineObjectsByGrp", new UniMap4());
     __publicField(this, "barLineType", 0 /* None */);
   }
   pick(x, y) {
     if (!this.getRect().contains(x, y)) {
       return [];
     }
-    for (let i = 0; i < this.staffTabObjects.length; i++) {
-      let arr = this.staffTabObjects[i].pick(x, y);
+    for (let i = 0; i < this.notationLineObjects.length; i++) {
+      let arr = this.notationLineObjects[i].pick(x, y);
       if (arr.length > 0) {
         return [this, ...arr];
       }
@@ -3870,7 +3981,6 @@ var ObjBarLine = class extends MusicObject {
   }
   layout(ctx) {
     this.requestRectUpdate();
-    this.staffTabObjects.length = 0;
     this.barLineType = this.solveBarLineType();
     let { unitSize, _lineWidth } = ctx;
     let { measure, barLineType } = this;
@@ -3880,102 +3990,95 @@ var ObjBarLine = class extends MusicObject {
     let spaceW = 0.7 * unitSize;
     let dotW = DocumentSettings.DotSize * unitSize;
     let dotRadius = dotW / 2;
-    row.getNotationLines().forEach((line) => {
-      let obj = new ObjStaffTabBarLine(this, line);
-      let lineCenterY;
-      let lineDotOff;
-      let top, bottom;
-      const addVerticalLine = (left, width) => {
-        obj.verticalLines.push({ left, width });
-      };
-      const addDotPair = (cx) => {
-        for (let i = -1; i <= 1; i += 2) {
-          let y = lineCenterY + i * lineDotOff;
-          obj.dots.push({ x: cx, y, r: dotRadius });
+    this.notationLineObjects = [];
+    this.notationLineObjectsByGrp.clear();
+    row.getRowGroups().forEach((grp) => {
+      grp.lines.forEach((line) => {
+        let obj = new ObjStaffBarLine(this, line);
+        this.notationLineObjects.push(obj);
+        this.notationLineObjectsByGrp.getOrCreate(grp, []).push(obj);
+        let lineCenterY;
+        let lineDotOff;
+        const addVerticalLine = (left, width) => {
+          obj.vlines.push({ left, width });
+        };
+        const addDotPair = (cx) => {
+          for (let i = -1; i <= 1; i += 2) {
+            let y = lineCenterY + i * lineDotOff;
+            obj.dots.push({ x: cx, y, r: dotRadius });
+          }
+        };
+        if (line instanceof ObjStaff) {
+          lineCenterY = line.getMiddleLineY();
+          lineDotOff = line.getDiatonicSpacing();
+        } else {
+          lineCenterY = (line.getBottomLineY() + line.getTopLineY()) / 2;
+          lineDotOff = (line.getBottomLineY() - line.getTopLineY()) / 6;
         }
-      };
-      if (line instanceof ObjStaff) {
-        lineCenterY = line.getMiddleLineY();
-        lineDotOff = line.getDiatonicSpacing();
-      } else {
-        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 AnchoredRect13(0, 0, 0, top, 0, bottom));
-          break;
-        case 1 /* Single */:
-          obj.setRect(new AnchoredRect13(-thinW, 0, 0, top, 0, bottom));
-          addVerticalLine(-thinW, thinW);
-          break;
-        case 2 /* Double */:
-          obj.setRect(new AnchoredRect13(-thinW - spaceW - thinW, 0, 0, top, 0, bottom));
-          addVerticalLine(-thinW - spaceW - thinW, thinW);
-          addVerticalLine(-thinW, thinW);
-          break;
-        case 3 /* EndSong */:
-          obj.setRect(new AnchoredRect13(-thicW - spaceW - thinW, 0, 0, top, 0, bottom));
-          addVerticalLine(-thinW - spaceW - thicW, thinW);
-          addVerticalLine(-thicW, thicW);
-          break;
-        case 4 /* StartRepeat */:
-          obj.setRect(new AnchoredRect13(0, 0, thicW + spaceW + thinW + spaceW + dotW, top, 0, bottom));
-          addVerticalLine(0, thicW);
-          addVerticalLine(thicW + spaceW, thinW);
-          addDotPair(thicW + spaceW + thinW + spaceW + dotRadius);
-          break;
-        case 5 /* EndRepeat */:
-          obj.setRect(new AnchoredRect13(-thicW - spaceW - thinW - spaceW - dotW, 0, 0, top, 0, bottom));
-          addVerticalLine(-thinW - spaceW - thicW, thinW);
-          addVerticalLine(-thicW, thicW);
-          addDotPair(-thinW - spaceW - thicW - spaceW - dotRadius);
-          break;
-        case 6 /* EndStartRepeat */:
-          obj.setRect(new AnchoredRect13(-dotW - spaceW - thinW - spaceW - thicW / 2, 0, thicW / 2 + spaceW + thinW + spaceW + dotW, top, 0, bottom));
-          addVerticalLine(-thicW / 2, thicW);
-          addVerticalLine(-thicW / 2 - spaceW - thinW, thinW);
-          addVerticalLine(thicW / 2 + spaceW, thinW);
-          addDotPair(-thicW / 2 - spaceW - thinW - spaceW - dotRadius);
-          addDotPair(thicW / 2 + spaceW + thinW + spaceW + dotRadius);
-          break;
-      }
-      this.staffTabObjects.push(obj);
+        switch (barLineType) {
+          case 0 /* None */:
+            break;
+          case 1 /* Single */:
+            addVerticalLine(-thinW, thinW);
+            break;
+          case 2 /* Double */:
+            addVerticalLine(-thinW - spaceW - thinW, thinW);
+            addVerticalLine(-thinW, thinW);
+            break;
+          case 3 /* EndSong */:
+            addVerticalLine(-thinW - spaceW - thicW, thinW);
+            addVerticalLine(-thicW, thicW);
+            break;
+          case 4 /* StartRepeat */:
+            addVerticalLine(0, thicW);
+            addVerticalLine(thicW + spaceW, thinW);
+            addDotPair(thicW + spaceW + thinW + spaceW + dotRadius);
+            break;
+          case 5 /* EndRepeat */:
+            addVerticalLine(-thinW - spaceW - thicW, thinW);
+            addVerticalLine(-thicW, thicW);
+            addDotPair(-thinW - spaceW - thicW - spaceW - dotRadius);
+            break;
+          case 6 /* EndStartRepeat */:
+            addVerticalLine(-thicW / 2, thicW);
+            addVerticalLine(-thicW / 2 - spaceW - thinW, thinW);
+            addVerticalLine(thicW / 2 + spaceW, thinW);
+            addDotPair(-thicW / 2 - spaceW - thinW - spaceW - dotRadius);
+            addDotPair(thicW / 2 + spaceW + thinW + spaceW + dotRadius);
+            break;
+        }
+        obj.forceRectUpdate();
+      });
     });
-    this.staffTabObjectGroups = row.getInstrumentLineGroups().map(
-      (lines) => lines.map((line) => this.staffTabObjects.find((obj) => obj.line === line)).filter((obj) => obj !== void 0)
-    );
   }
   updateRect() {
-    if (this.staffTabObjects.length > 0) {
-      this.rect = this.staffTabObjects[0].getRect().clone();
-      for (let i = 1; i < this.staffTabObjects.length; i++) {
-        this.rect.expandInPlace(this.staffTabObjects[i].getRect());
+    if (this.notationLineObjects.length > 0) {
+      this.rect = this.notationLineObjects[0].getRect().clone();
+      for (let i = 1; i < this.notationLineObjects.length; i++) {
+        this.rect.expandInPlace(this.notationLineObjects[i].getRect());
       }
     } else {
       this.rect = new AnchoredRect13();
     }
   }
   offset(dx, dy) {
-    this.staffTabObjects.forEach((obj) => obj.offset(dx, 0));
+    this.notationLineObjects.forEach((obj) => obj.offset(dx, 0));
     this.requestRectUpdate();
   }
   draw(ctx) {
-    if (this.barLineType === 0 /* None */) {
+    if (this.barLineType === 0 /* None */)
       return;
-    }
     ctx.drawDebugRect(this.getRect());
     ctx.color("black");
-    this.staffTabObjectGroups.forEach((objs) => {
-      if (objs.length > 0) {
-        objs.forEach((obj) => obj.dots.forEach((d) => ctx.fillCircle(d.x, d.y, d.r)));
-        let top = objs[0].getRect().top;
-        let height = objs[objs.length - 1].getRect().bottom - top;
-        objs[0].verticalLines.forEach((vline) => ctx.fillRect(vline.left, top, vline.width, height));
-      }
-    });
+    for (const [grp, objects] of this.notationLineObjectsByGrp) {
+      objects.forEach((obj, i) => {
+        obj.dots.forEach((d) => ctx.fillCircle(d.x, d.y, d.r));
+        if (i === 0) {
+          let { top, height } = obj.barLine.getRect();
+          obj.vlines.forEach((l) => ctx.fillRect(l.left, top, l.width, height));
+        }
+      });
+    }
   }
 };
 var ObjBarLineLeft = class extends ObjBarLine {
@@ -4092,7 +4195,8 @@ var ObjEnding = class extends MusicObject {
     let measureContent = measure.getColumnsContentRect();
     let endingHeight = textRect.height;
     this.rect = new AnchoredRect14(measureContent.left + unitSize, measureContent.right - unitSize, -endingHeight, 0);
-    this.endingText.offset(this.rect.left + unitSize / 2, this.rect.bottom);
+    this.endingText.setLeft(this.rect.left + unitSize / 2);
+    this.endingText.setBottom(this.rect.bottom);
     this.shapeRects = [
       new AnchoredRect14(this.rect.left, this.rect.left + 1, this.rect.top, this.rect.bottom),
       new AnchoredRect14(this.rect.left, this.rect.right, this.rect.top, this.rect.top + 1),
@@ -4519,8 +4623,7 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
         });
       }
       if (obj.tupletNumber) {
-        let y = (left.y + right.y) / 2 + obj.tupletNumberOffsetY;
-        obj.tupletNumber.offset(0, -obj.tupletNumber.getRect().anchorY + y);
+        obj.tupletNumber.setAnchorY((left.y + right.y) / 2 + obj.tupletNumberOffsetY);
       }
     });
   }
@@ -5156,7 +5259,7 @@ var ObjLyrics = class extends MusicObject {
 };
 
 // src/score/engine/obj-tab-rhythm.ts
-import { AnchoredRect as AnchoredRect19, UniMap as UniMap4, Utils as Utils8 } from "@tspro/ts-utils-lib";
+import { AnchoredRect as AnchoredRect19, UniMap as UniMap5, Utils as Utils8 } from "@tspro/ts-utils-lib";
 var ObjTabRhythm = class extends MusicObject {
   constructor(measure, tab) {
     super(measure);
@@ -5165,7 +5268,7 @@ var ObjTabRhythm = class extends MusicObject {
     __publicField(this, "voiceId");
     __publicField(this, "mi");
     // Keep non-static
-    __publicField(this, "tupletPartsTextObjMap", new UniMap4());
+    __publicField(this, "tupletPartsTextObjMap", new UniMap5());
     this.voiceId = getVoiceIds().filter((voiceId) => tab.containsVoiceId(voiceId));
     this.rect = new AnchoredRect19();
     this.mi = new MTabRhythm(this);
@@ -5280,8 +5383,7 @@ var ObjTabRhythm = class extends MusicObject {
             this.tupletPartsTextObjMap.set(text, textObj = new ObjText(this, { text, scale: 0.75 }, 0.5, 0.5));
             textObj.layout(ctx);
           }
-          textObj.offset(-textObj.getRect().anchorX, -textObj.getRect().anchorY);
-          textObj.offset(cx, stemTop - fontSize / 2);
+          textObj.setCenter(cx, stemTop - fontSize / 2);
           textObj.draw(ctx);
         }
         if (symbols.length > 1) {
@@ -5392,7 +5494,7 @@ var ObjMeasure = class extends MusicObject {
     __publicField(this, "endRepeatPlayCount", 2);
     // play twice.
     __publicField(this, "endRepeatPlayCountText");
-    __publicField(this, "staticObjectsCache", new UniMap5());
+    __publicField(this, "staticObjectsCache", new UniMap6());
     __publicField(this, "lyricsObjectsCache", new TriMap2());
     __publicField(this, "mi");
     this.mi = new MMeasure(this);
@@ -6323,7 +6425,8 @@ var ObjMeasure = class extends MusicObject {
           let note = tab.getTuningStrings()[stringId].format(PitchNotation.Helmholtz, SymbolSet.Unicode);
           let obj = new ObjText(this, { text: note, scale: 0.8 }, 1, 0.5);
           obj.layout(ctx);
-          obj.offset(this.regions.tabTuning_0 * 0.8, tab.getStringY(stringId));
+          obj.setRight(this.regions.tabTuning_0 * 0.8);
+          obj.setCenterY(tab.getStringY(stringId));
           this.tabStringNotes.push(obj);
           tab.addObject(obj);
         }
@@ -6349,7 +6452,6 @@ var ObjMeasure = class extends MusicObject {
     this.regions.rightBarLine_6 = this.barLineRight.getRect().width;
   }
   layoutWidth(ctx, width) {
-    var _a;
     if (!this.needLayout) {
       return;
     }
@@ -6357,17 +6459,19 @@ var ObjMeasure = class extends MusicObject {
     this.rect = new AnchoredRect20();
     this.rect.anchorX = this.rect.left + width / 2;
     this.rect.right = this.rect.left + width;
-    let rect;
     this.signatures.forEach((signature) => {
-      rect = signature.getRect();
-      signature.offset(this.rect.left + this.regions.tabTuning_0 - rect.left, -rect.anchorY);
+      signature.setLeft(this.rect.left + this.regions.tabTuning_0);
+      signature.setAnchorY(this.rect.anchorY);
     });
     let signaturesWidth = Math.max(0, ...this.signatures.map((signature) => signature.getRect().width));
-    rect = this.barLineLeft.getRect();
-    this.barLineLeft.offset(this.rect.left + this.regions.tabTuning_0 + signaturesWidth - rect.left, -rect.anchorY);
-    rect = this.barLineRight.getRect();
-    this.barLineRight.offset(this.rect.right - rect.right, -rect.anchorY);
-    (_a = this.endRepeatPlayCountText) == null ? void 0 : _a.offset(this.barLineRight.getRect().left, this.barLineRight.getRect().top);
+    this.barLineLeft.setLeft(this.rect.left + this.regions.tabTuning_0 + signaturesWidth);
+    this.barLineLeft.setAnchorY(this.rect.anchorY);
+    this.barLineRight.setRight(this.rect.right);
+    this.barLineRight.setAnchorY(this.rect.anchorY);
+    if (this.endRepeatPlayCountText) {
+      this.endRepeatPlayCountText.setCenterX(this.barLineRight.getRect().left);
+      this.endRepeatPlayCountText.setBottom(this.barLineRight.getRect().top);
+    }
     let columnsLeft = this.rect.left + this.regions.leftSolid;
     let columnsRight = this.rect.right - this.regions.rightSolid;
     let columnsWidth = columnsRight - columnsLeft;
@@ -6375,9 +6479,9 @@ var ObjMeasure = class extends MusicObject {
     let columnScale = columnsWidth / columnsMinWidth;
     let curColumnLeft = columnsLeft;
     this.columns.forEach((col) => {
-      rect = col.getRect();
+      let rect = col.getRect();
       let columnAnchorX = curColumnLeft + rect.leftw * columnScale;
-      col.offset(columnAnchorX - rect.anchorX, -rect.anchorY);
+      col.setAnchor(columnAnchorX, this.rect.anchorY);
       curColumnLeft += rect.width * columnScale;
     });
     getVoiceIds().forEach((voiceId) => {
@@ -6386,8 +6490,7 @@ var ObjMeasure = class extends MusicObject {
       if (!onlyRest) return;
       const isOnlySymbolInCol = getVoiceIds().map((voiceId2) => onlyRest.col.getVoiceSymbol(voiceId2)).filter((sym) => sym !== void 0 && sym !== onlyRest).length === 0;
       if (isOnlySymbolInCol) return;
-      const r = this.getColumnsContentRect();
-      onlyRest.offset(r.centerX - onlyRest.getRect().anchorX, 0);
+      onlyRest.setAnchorX(this.getColumnsContentRect().centerX);
     });
   }
   layoutConnectives(ctx) {
@@ -6456,9 +6559,8 @@ var ObjMeasure = class extends MusicObject {
     this.barLineLeft.offset(dx, dy);
     this.columns.forEach((col) => col.offset(dx, dy));
     this.barLineRight.offset(dx, dy);
-    if (this.endRepeatPlayCountText) {
+    if (this.endRepeatPlayCountText)
       this.endRepeatPlayCountText.offset(dx, dy);
-    }
     this.connectives.forEach((connective) => connective.offset(dx, 0));
     this.beamGroups.forEach((beam) => beam.offset(dx, dy));
     this.layoutObjects.forEach((layoutObj) => layoutObj.offset(dx, 0));
@@ -6498,7 +6600,7 @@ var ObjMeasure = class extends MusicObject {
 
 // src/score/engine/layout-object.ts
 import { MusicError as MusicError14, MusicErrorType as MusicErrorType14 } from "@tspro/web-music-score/core";
-import { AnchoredRect as AnchoredRect21, asMulti as asMulti2, IndexArray as IndexArray3, UniMap as UniMap6 } from "@tspro/ts-utils-lib";
+import { AnchoredRect as AnchoredRect21, asMulti as asMulti2, IndexArray as IndexArray3, UniMap as UniMap7 } from "@tspro/ts-utils-lib";
 var LayoutGroupId = /* @__PURE__ */ ((LayoutGroupId2) => {
   LayoutGroupId2[LayoutGroupId2["TabRhythm"] = 0] = "TabRhythm";
   LayoutGroupId2[LayoutGroupId2["Fermata"] = 1] = "Fermata";
@@ -6513,7 +6615,7 @@ var LayoutGroupId = /* @__PURE__ */ ((LayoutGroupId2) => {
   LayoutGroupId2[LayoutGroupId2["LyricsVerse3"] = 10] = "LyricsVerse3";
   return LayoutGroupId2;
 })(LayoutGroupId || {});
-var LayoutGroupIdAttrs = new UniMap6([
+var LayoutGroupIdAttrs = new UniMap7([
   [0 /* TabRhythm */, { rowAlign: true }],
   [1 /* Fermata */, { reserveSpace: true }],
   [2 /* NoteLabel */, { reserveSpace: true }],
@@ -6606,6 +6708,9 @@ var LayoutObjectWrapper = class {
   offset(dx, dy) {
     this.musicObj.offset(dx, dy);
   }
+  setAnchorY(y) {
+    this.musicObj.setAnchorY(y);
+  }
   getRect() {
     return this.musicObj.getRect();
   }
@@ -6649,7 +6754,7 @@ var ObjNotationLine5 = class extends MusicObject {
     super(row);
     this.row = row;
     __publicField(this, "objects", []);
-    __publicField(this, "layoutGroups", new UniMap7());
+    __publicField(this, "layoutGroups", new UniMap8());
   }
   addObject(o) {
     this.objects.push(o);
@@ -6676,7 +6781,7 @@ var ObjNotationLine5 = class extends MusicObject {
     if (y === void 0) {
       return;
     }
-    layoutObj.offset(0, y - layoutObj.getRect().anchorY);
+    layoutObj.setAnchorY(y - layoutObj.getRect().anchorY);
     layoutObj.setPositionResolved();
   }
   alignObjectsY(ctx, layoutObjects, verticalPos) {
@@ -6697,7 +6802,7 @@ var ObjNotationLine5 = class extends MusicObject {
       if (musicObj instanceof ObjEnding || musicObj instanceof ObjExtensionLine || musicObj instanceof ObjTabRhythm) {
         musicObj.layoutFitToMeasure(ctx);
       } else {
-        musicObj.offset(anchor.getRect().anchorX - musicObj.getRect().anchorX, 0);
+        musicObj.setAnchorX(anchor.getRect().anchorX);
       }
     });
     if (layoutGroup.rowAlign) {
@@ -6977,7 +7082,112 @@ var ObjTab = class extends ObjNotationLine5 {
 
 // src/score/engine/obj-score-row.ts
 import { MusicError as MusicError16, MusicErrorType as MusicErrorType16 } from "@tspro/web-music-score/core";
-import { AnchoredRect as AnchoredRect23, Guard as Guard10, Utils as Utils11 } from "@tspro/ts-utils-lib";
+import { AnchoredRect as AnchoredRect24, Guard as Guard10, Utils as Utils11 } from "@tspro/ts-utils-lib";
+
+// src/score/engine/obj-score-row-group.ts
+import { AnchoredRect as AnchoredRect23 } from "@tspro/ts-utils-lib";
+var ObjScoreRowGroup = class extends MusicObject {
+  constructor(lines) {
+    var _a;
+    super(lines[0].row);
+    this.lines = lines;
+    __publicField(this, "space", 0);
+    __publicField(this, "instrument");
+    __publicField(this, "instrText");
+    __publicField(this, "braceRect", new AnchoredRect23());
+    __publicField(this, "mi");
+    this.instrument = (_a = lines[0].getConfig().instrument) != null ? _a : "";
+    this.instrText = new ObjText(this, { text: this.instrument, color: "black", scale: 1 }, 1, 0.5);
+    this.mi = new MScoreRowGroup(this);
+  }
+  getMusicInterface() {
+    return this.mi;
+  }
+  get row() {
+    return this.lines[0].row;
+  }
+  get hasBrace() {
+    return this.hasInstrument && this.lines.length > 1;
+  }
+  get hasInstrument() {
+    return this.instrument.length > 0;
+  }
+  pick(x, y) {
+    if (!this.getRect().contains(x, y))
+      return [];
+    let arr = this.instrText.pick(x, y);
+    if (arr.length > 0) {
+      return [this, ...arr];
+    }
+    return [this];
+  }
+  updateRect() {
+    this.instrText.setRight(this.braceRect.left - this.space);
+    this.instrText.setCenterY(this.braceRect.anchorY);
+    this.rect = this.instrText.getRect().clone().expandInPlace(this.braceRect);
+  }
+  layout(ctx) {
+    this.space = ctx.unitSize;
+    this.instrText.layout(ctx);
+    this.braceRect = new AnchoredRect23(-(this.hasBrace ? ctx.unitSize * 5 : 0), 0, 0, 0);
+    this.forceRectUpdate();
+  }
+  layoutToNotationLines() {
+    this.braceRect.top = this.lines[0].getTopLineY();
+    this.braceRect.bottom = this.lines[this.lines.length - 1].getBottomLineY();
+    this.braceRect.anchorY = this.braceRect.centerY;
+    this.forceRectUpdate();
+  }
+  offset(dx, dy) {
+    this.instrText.offset(dx, dy);
+    this.braceRect.offsetInPlace(dx, dy);
+    this.rect.offsetInPlace(dx, dy);
+  }
+  draw(ctx) {
+    this.instrText.draw(ctx);
+    if (this.hasBrace) {
+      ctx.color("brack").lineWidth(1).drawBracket(this.braceRect, "{");
+    }
+  }
+};
+
+// src/score/engine/obj-score-row.ts
+var ScoreRowRegions = class {
+  constructor() {
+    __publicField(this, "instrWidth", 0);
+    __publicField(this, "staffWidth", 0);
+  }
+  resetWidths() {
+    this.instrWidth = this.staffWidth = 0;
+  }
+  addRowInstrWidth(w) {
+    this.instrWidth = Math.max(this.instrWidth, w);
+  }
+  addRowstaffWidth(w) {
+    this.staffWidth = Math.max(this.staffWidth, w);
+  }
+  get instrLeft() {
+    return 0;
+  }
+  get instrRight() {
+    return this.instrWidth;
+  }
+  get staffLeft() {
+    return this.instrRight;
+  }
+  get staffRight() {
+    return this.staffLeft + this.staffWidth;
+  }
+  get left() {
+    return this.instrLeft;
+  }
+  get right() {
+    return this.staffRight;
+  }
+  get width() {
+    return this.instrWidth + this.staffWidth;
+  }
+};
 var ObjScoreRow = class extends MusicObject {
   constructor(doc, prevRow, scoreConfig) {
     super(doc);
@@ -6985,12 +7195,10 @@ var ObjScoreRow = class extends MusicObject {
     this.prevRow = prevRow;
     this.scoreConfig = scoreConfig;
     __publicField(this, "nextRow");
-    __publicField(this, "minWidth", 0);
     __publicField(this, "notationLines");
-    __publicField(this, "instrumentLineGroups");
+    __publicField(this, "rowGroups");
     __publicField(this, "staves");
     __publicField(this, "tabs");
-    __publicField(this, "instrumentNames");
     __publicField(this, "measures", []);
     __publicField(this, "needLayout", true);
     __publicField(this, "mi");
@@ -7007,10 +7215,7 @@ var ObjScoreRow = class extends MusicObject {
         prevGroup.push(line);
       }
     }
-    this.instrumentLineGroups = lineGroups;
-    this.instrumentNames = this.instrumentLineGroups.map((lines) => {
-      return lines.length > 0 && Guard10.isNonEmptyString(lines[0].getConfig().instrument) ? new ObjText(this, String(lines[0].getConfig().instrument), 0, 0.5) : void 0;
-    });
+    this.rowGroups = lineGroups.filter((lines) => lines.length > 0).map((lines) => new ObjScoreRowGroup(lines));
     if (this.prevRow) {
       this.prevRow.nextRow = this;
     }
@@ -7034,14 +7239,17 @@ var ObjScoreRow = class extends MusicObject {
   getNotationLines() {
     return this.notationLines;
   }
-  getInstrumentLineGroups() {
-    return this.instrumentLineGroups;
+  getRowGroups() {
+    return this.rowGroups;
   }
   findMatchingLine(line) {
     return line.row === this ? line : this.notationLines.find(
       (curLine) => Utils11.Obj.deepEqual(line.row.scoreConfig, curLine.row.scoreConfig) && line.id === curLine.id || Guard10.isNonEmptyString(line.getConfig().name) && line.getConfig().name === curLine.getConfig().name && line.getConfig().type === curLine.getConfig().type
     );
   }
+  get regions() {
+    return this.doc.regions;
+  }
   getStaves() {
     return this.staves;
   }
@@ -7087,7 +7295,6 @@ var ObjScoreRow = class extends MusicObject {
     this.notationLines.forEach((line) => line.layoutLayoutGroups(ctx));
   }
   pick(x, y) {
-    var _a, _b;
     if (!this.getRect().contains(x, y)) {
       return [];
     }
@@ -7097,8 +7304,8 @@ var ObjScoreRow = class extends MusicObject {
         return [this, ...arr];
       }
     }
-    for (let i = 0; i < this.instrumentNames.length; i++) {
-      let arr = (_b = (_a = this.instrumentNames[i]) == null ? void 0 : _a.pick(x, y)) != null ? _b : [];
+    for (let i = 0; i < this.rowGroups.length; i++) {
+      let arr = this.rowGroups[i].pick(x, y);
       if (arr.length > 0) {
         return [this, ...arr];
       }
@@ -7115,7 +7322,7 @@ var ObjScoreRow = class extends MusicObject {
     let r = this.getRect();
     let firstMeasure = this.getFirstMeasure();
     let left = firstMeasure ? firstMeasure.getColumnsContentRect().left : r.left;
-    return new AnchoredRect23(left, (left + r.right) / 2, r.right, r.top, r.anchorY, r.bottom);
+    return new AnchoredRect24(left, (left + r.right) / 2, r.right, r.top, r.anchorY, r.bottom);
   }
   getDiatonicIdAt(y) {
     for (let i = 0; i < this.notationLines.length; i++) {
@@ -7151,9 +7358,6 @@ var ObjScoreRow = class extends MusicObject {
   getLastMeasure() {
     return this.measures.length > 0 ? this.measures[this.measures.length - 1] : void 0;
   }
-  getMinWidth() {
-    return this.minWidth;
-  }
   solveAutoStemDir(symbols) {
     if (symbols.length === 0) {
       return "up" /* Up */;
@@ -7170,9 +7374,6 @@ var ObjScoreRow = class extends MusicObject {
       return staves.length > 0 ? avgDiatonicId >= staves[0].middleLineDiatonicId ? "down" /* Down */ : "up" /* Up */ : "up" /* Up */;
     }
   }
-  getInstrumentNameWidth(ctx) {
-    return Math.max(0, ...this.instrumentNames.map((obj) => obj ? obj.getRect().width : 0));
-  }
   requestLayout() {
     if (!this.needLayout) {
       this.needLayout = true;
@@ -7184,37 +7385,39 @@ var ObjScoreRow = class extends MusicObject {
       return;
     }
     this.requestRectUpdate();
-    this.instrumentNames.forEach((obj) => obj == null ? void 0 : obj.layout(ctx));
     this.notationLines.forEach((line) => {
       line.removeObjects();
       line.layoutHeight(ctx);
     });
-    this.minWidth = 0;
-    this.measures.forEach((m) => {
-      m.layout(ctx);
-      this.minWidth += m.getMinWidth();
-      this.minWidth += m.getPostMeasureBreakWidth();
+    this.rowGroups.forEach((grp) => {
+      grp.layout(ctx);
+      this.regions.addRowInstrWidth(grp.getRect().width);
     });
+    this.measures.forEach((m) => m.layout(ctx));
+    let packedWidth = this.measures.map((m) => m.getMinWidth() + m.getPostMeasureBreakWidth()).reduce((acc, cur) => acc + cur);
+    this.regions.addRowstaffWidth(packedWidth);
   }
-  layoutWidth(ctx, left, right) {
+  layoutStretch(ctx) {
     if (!this.needLayout) {
       return;
     }
-    this.rect = new AnchoredRect23(0, right, 0, 0);
+    this.rect = new AnchoredRect24(this.regions.left, this.regions.right, 0, 0);
     this.notationLines.forEach((line) => line.layoutWidth(ctx));
-    let targetColumnsAreaWidth = right - left;
+    this.rowGroups.forEach((grp) => grp.setRight(this.regions.instrRight));
+    let targetColumnsAreaWidth = this.regions.staffWidth;
     let minColumnsAreaWidth = 0;
     this.measures.forEach((m) => {
       targetColumnsAreaWidth -= m.getTotalSolidWidth() + m.getPostMeasureBreakWidth();
       minColumnsAreaWidth += m.getMinColumnsWidth();
     });
     let columnsAreaScale = targetColumnsAreaWidth / minColumnsAreaWidth;
-    let x = this.doc.getInstrumentGroupRegions(ctx).braceRight;
+    let x = this.regions.staffLeft;
     this.measures.forEach((m) => {
       let newMeasureWidth = m.getTotalSolidWidth() + m.getMinColumnsWidth() * columnsAreaScale;
       m.layoutWidth(ctx, newMeasureWidth);
       let r = m.getRect();
-      m.offset(x - r.left, -r.anchorY);
+      m.setLeft(x);
+      m.setAnchorY(0);
       x += r.width;
       x += m.getPostMeasureBreakWidth();
     });
@@ -7224,11 +7427,20 @@ var ObjScoreRow = class extends MusicObject {
     });
   }
   updateRect() {
-    let left = 0;
-    let right = this.measures.length > 0 ? this.measures[this.measures.length - 1].getRect().right : left;
-    let top = this.measures.length > 0 ? Math.min(...this.measures.map((m) => m.getRect().top)) : 0;
-    let bottom = this.measures.length > 0 ? Math.max(...this.measures.map((m) => m.getRect().bottom)) : 0;
-    this.rect = new AnchoredRect23(left, right, top, bottom);
+    var _a;
+    let left = this.regions.left;
+    let right = this.regions.right;
+    let top = 0;
+    let bottom = 0;
+    const fermata = (_a = this.getLastMeasure()) == null ? void 0 : _a.getBarLineRight().getAnchoredLayoutObjects().map((o) => o.musicObj).find((o) => o instanceof ObjFermata);
+    if (fermata) {
+      right = Math.max(right, fermata.getRect().right);
+    }
+    if (this.measures.length > 0) {
+      top = Math.min(...this.measures.map((m) => m.getRect().top));
+      bottom = Math.max(...this.measures.map((m) => m.getRect().bottom));
+    }
+    this.rect = new AnchoredRect24(left, right, top, bottom);
   }
   alignStemsToBeams() {
     this.measures.forEach((m) => m.alignStemsToBeams());
@@ -7240,10 +7452,10 @@ var ObjScoreRow = class extends MusicObject {
       let cur = this.notationLines[i];
       if (prev instanceof ObjStaff && cur instanceof ObjStaff && prev.staffConfig.grandId !== void 0 && prev.staffConfig.grandId === cur.staffConfig.grandId) {
         let dy = prev.getBottomLineY() - cur.getTopLineY() + unitSize * 6;
-        cur.offset(0, dy);
+        cur.offsetY(dy);
       } else {
         let dy = prev.calcBottom() - cur.calcTop() + unitSize * 3;
-        cur.offset(0, dy);
+        cur.offsetY(dy);
       }
     }
     this.measures.forEach((m) => {
@@ -7258,26 +7470,10 @@ var ObjScoreRow = class extends MusicObject {
         });
       });
     });
-    this.instrumentNames.forEach((obj, i) => {
-      let grp = this.instrumentLineGroups[i];
-      if (obj && grp.length > 0) {
-        obj.offset(
-          -obj.getRect().left,
-          -obj.getRect().anchorY + (grp[0].getRect().top + grp[grp.length - 1].getRect().bottom) / 2
-        );
-      }
-    });
+    this.rowGroups.forEach((grp) => grp.layoutToNotationLines());
     this.alignStemsToBeams();
     this.requestRectUpdate();
   }
-  layoutPadding(ctx) {
-    let p = ctx.unitSize / 2;
-    this.getRect();
-    this.rect.left -= p;
-    this.rect.right += p;
-    this.rect.top -= p;
-    this.rect.bottom += p;
-  }
   layoutDone() {
     this.measures.forEach((m) => m.layoutDone());
     this.needLayout = false;
@@ -7286,13 +7482,14 @@ var ObjScoreRow = class extends MusicObject {
     this.measures.forEach((m) => m.offset(dx, dy));
     this.rect.offsetInPlace(dx, dy);
     this.notationLines.forEach((l) => l.offset(dx, dy));
-    this.instrumentNames.forEach((obj) => obj == null ? void 0 : obj.offset(dx, dy));
+    this.rowGroups.forEach((grp) => grp.offset(dx, dy));
   }
   draw(ctx) {
     ctx.drawDebugRect(this.getRect());
+    const { left, top, width, height } = this.getRect();
+    const p = ctx._lineWidth;
     ctx.save();
-    let { left, top, width, height } = this.getRect();
-    ctx.rect(left, top, width, height);
+    ctx.rect(left - p, top, width + 2 * p, height);
     ctx.clip();
     if (this.getFirstMeasure() && (this.notationLines.length > 1 || this.notationLines[0] instanceof ObjTab)) {
       let left2 = this.getFirstMeasure().getStaffLineLeft();
@@ -7302,31 +7499,17 @@ var ObjScoreRow = class extends MusicObject {
     }
     this.measures.forEach((m) => m.draw(ctx));
     this.notationLines.forEach((m) => m.draw(ctx));
-    let grpSize = this.doc.getInstrumentGroupRegions(ctx);
-    this.instrumentNames.forEach((obj, i) => {
-      let grp = this.instrumentLineGroups[i];
-      if (grp.length > 1) {
-        let r = new AnchoredRect23(
-          grpSize.braceLeft,
-          grpSize.braceRight,
-          grp[0].getTopLineY(),
-          grp[grp.length - 1].getBottomLineY()
-        );
-        ctx.color("brack").lineWidth(1).drawBrace(r, "left");
-      }
-      if (obj) {
-        obj.draw(ctx);
-      }
-    });
+    this.rowGroups.forEach((grp) => grp.draw(ctx));
     ctx.restore();
   }
 };
 
 // src/score/engine/obj-header.ts
-import { AnchoredRect as AnchoredRect24 } from "@tspro/ts-utils-lib";
+import { AnchoredRect as AnchoredRect25 } from "@tspro/ts-utils-lib";
 var ObjHeader = class extends MusicObject {
   constructor(doc, title, composer, arranger) {
     super(doc);
+    this.doc = doc;
     this.title = title;
     this.composer = composer;
     this.arranger = arranger;
@@ -7366,24 +7549,29 @@ var ObjHeader = class extends MusicObject {
     }
     return [this];
   }
-  layoutWidth(ctx, left, right) {
+  layout(ctx) {
     let top = 0;
-    this.rect = new AnchoredRect24(left, right, 0, 0);
+    const left = this.doc.regions.staffLeft;
+    const right = this.doc.regions.staffRight;
+    this.rect = new AnchoredRect25(left, right, 0, 0);
     if (this.titleText) {
       this.titleText.layout(ctx);
-      this.titleText.offset((left + right) / 2, top);
+      this.titleText.setCenterX((left + right) / 2);
+      this.titleText.setTop(top);
       top += this.titleText.getRect().height;
       this.rect.expandInPlace(this.titleText.getRect());
     }
     if (this.composerText) {
       this.composerText.layout(ctx);
-      this.composerText.offset(right, top);
+      this.composerText.setRight(right);
+      this.composerText.setTop(top);
       top += this.composerText.getRect().height;
       this.rect.expandInPlace(this.composerText.getRect());
     }
     if (this.arrangerText) {
       this.arrangerText.layout(ctx);
-      this.arrangerText.offset(right, top);
+      this.arrangerText.setRight(right);
+      this.arrangerText.setTop(top);
       top += this.arrangerText.getRect().height;
       this.rect.expandInPlace(this.arrangerText.getRect());
     }
@@ -7414,30 +7602,14 @@ var ObjHeader = class extends MusicObject {
 };
 
 // src/score/engine/obj-document.ts
-import { AnchoredRect as AnchoredRect25, Guard as Guard11, UniMap as UniMap8 } from "@tspro/ts-utils-lib";
+import { AnchoredRect as AnchoredRect26, Guard as Guard11, UniMap as UniMap9 } from "@tspro/ts-utils-lib";
 import { MusicError as MusicError17, MusicErrorType as MusicErrorType17 } from "@tspro/web-music-score/core";
-var InstrumentGroupRegions = class {
-  constructor() {
-    __publicField(this, "nameLeft", 0);
-    __publicField(this, "nameRight", 0);
-    __publicField(this, "braceLeft", 0);
-    __publicField(this, "braceRight", 0);
-  }
-  get left() {
-    return this.nameLeft;
-  }
-  get right() {
-    return this.braceRight;
-  }
-  get width() {
-    return this.right - this.left;
-  }
-};
 var ObjDocument = class extends MusicObject {
   constructor() {
     super(void 0);
     __publicField(this, "needLayout", true);
     __publicField(this, "ctx");
+    __publicField(this, "regions", new ScoreRowRegions());
     __publicField(this, "rows", []);
     __publicField(this, "measures", []);
     __publicField(this, "measuresPerRow", Infinity);
@@ -7445,8 +7617,7 @@ var ObjDocument = class extends MusicObject {
     __publicField(this, "header");
     __publicField(this, "newRowRequested", false);
     __publicField(this, "allConnectiveProps", []);
-    __publicField(this, "staffGroups", new UniMap8());
-    __publicField(this, "instrumentGroupRegions", new InstrumentGroupRegions());
+    __publicField(this, "staffGroups", new UniMap9());
     __publicField(this, "mi");
     this.mi = new MDocument2(this);
   }
@@ -7643,17 +7814,6 @@ var ObjDocument = class extends MusicObject {
       this.ctx.updateCursorRect(cursorRect);
     }
   }
-  getInstrumentGroupRegions(ctx) {
-    let nameWidth = Math.max(0, ...this.rows.map((row) => row.getInstrumentNameWidth(ctx)));
-    let hasName = nameWidth > 0;
-    let padding = hasName ? ctx.unitSize : 0;
-    let braceWidth = hasName ? ctx.unitSize * 5 : 0;
-    this.instrumentGroupRegions.nameLeft = 0;
-    this.instrumentGroupRegions.nameRight = nameWidth;
-    this.instrumentGroupRegions.braceLeft = nameWidth + padding;
-    this.instrumentGroupRegions.braceRight = nameWidth + padding + braceWidth + padding;
-    return this.instrumentGroupRegions;
-  }
   requestLayout() {
     this.needLayout = true;
   }
@@ -7681,28 +7841,27 @@ var ObjDocument = class extends MusicObject {
     this.allConnectiveProps.forEach((props) => props.removeConnectives());
     this.allConnectiveProps.forEach((props) => props.createConnectives());
     this.rows.forEach((row) => row.resetLayoutGroups(ctx));
+    this.regions.resetWidths();
+    this.regions.addRowstaffWidth(DocumentSettings.MinStaffWidth * unitSize);
     this.rows.forEach((row) => row.layout(ctx));
-    let rowLeft = this.getInstrumentGroupRegions(ctx).right;
-    let rowRight = rowLeft + Math.max(
-      DocumentSettings.DocumentMinWidth * unitSize,
-      ...this.rows.map((row) => row.getMinWidth())
-    );
-    this.rows.forEach((row) => row.layoutWidth(ctx, rowLeft, rowRight));
+    this.rows.forEach((row) => row.layoutStretch(ctx));
     this.rows.forEach((row) => row.layoutLayoutGroups(ctx));
     this.rows.forEach((row) => row.layoutSetNotationLines(ctx));
-    this.rows.forEach((row) => row.layoutPadding(ctx));
-    this.rect = new AnchoredRect25();
+    this.rect = new AnchoredRect26();
     if (this.header) {
-      this.header.layoutWidth(ctx, rowLeft, rowRight);
+      this.header.layout(ctx);
       this.rect.expandInPlace(this.header.getRect());
     }
     this.rows.forEach((row) => {
-      row.offset(-this.rect.left, this.rect.bottom + unitSize * 2 - row.getRect().top);
+      row.setLeft(0);
+      row.setTop(this.rect.bottom + unitSize * 2);
       this.rect.expandInPlace(row.getRect());
     });
     this.rows.forEach((row) => row.layoutDone());
     this.needLayout = false;
   }
+  offset(dx, dy) {
+  }
   drawContent() {
     const { ctx } = this;
     if (!ctx) {
@@ -8480,7 +8639,7 @@ var ScoreObjectEvent = class extends ScoreEvent {
 
 // src/score/pub/music-interface.ts
 import * as Audio2 from "@tspro/web-music-score/audio";
-import { Guard as Guard14, UniMap as UniMap9, ValueSet as ValueSet2, Utils as Utils13 } from "@tspro/ts-utils-lib";
+import { Guard as Guard14, UniMap as UniMap10, ValueSet as ValueSet2, Utils as Utils13 } from "@tspro/ts-utils-lib";
 
 // src/score/pub/music-objects.ts
 import { Guard as Guard13 } from "@tspro/ts-utils-lib";
@@ -8827,10 +8986,10 @@ var _MBarLineLeft = class _MBarLineLeft extends MusicInterface5 {
 /** Object name. */
 __publicField(_MBarLineLeft, "Name", "BarLineLeft");
 var MBarLineLeft = _MBarLineLeft;
-var _MStaffTabBarLine = class _MStaffTabBarLine extends MusicInterface5 {
+var _MStaffBarLine = class _MStaffBarLine extends MusicInterface5 {
   /** @internal */
   constructor(obj) {
-    super(_MStaffTabBarLine.Name);
+    super(_MStaffBarLine.Name);
     this.obj = obj;
   }
   /** @internal */
@@ -8846,7 +9005,7 @@ var _MStaffTabBarLine = class _MStaffTabBarLine extends MusicInterface5 {
     if (barLine instanceof ObjBarLineLeft || barLine instanceof ObjBarLineRight) {
       return barLine.getMusicInterface();
     } else {
-      throw new MusicError20(MusicErrorType20.Score, `Bar line not let nor right.`);
+      throw new MusicError20(MusicErrorType20.Score, `Bar line not left nor right.`);
     }
   }
   /**
@@ -8858,8 +9017,8 @@ var _MStaffTabBarLine = class _MStaffTabBarLine extends MusicInterface5 {
   }
 };
 /** Object name. */
-__publicField(_MStaffTabBarLine, "Name", "StaffTabBarLine");
-var MStaffTabBarLine = _MStaffTabBarLine;
+__publicField(_MStaffBarLine, "Name", "StaffBarLine");
+var MStaffBarLine = _MStaffBarLine;
 var _MNoteGroup = class _MNoteGroup extends MusicInterface5 {
   /** @internal */
   constructor(obj) {
@@ -9140,6 +9299,27 @@ var _MScoreRow = class _MScoreRow extends MusicInterface5 {
 /** Object name. */
 __publicField(_MScoreRow, "Name", "ScoreRow");
 var MScoreRow = _MScoreRow;
+var _MScoreRowGroup = class _MScoreRowGroup extends MusicInterface5 {
+  /** @internal */
+  constructor(obj) {
+    super(_MScoreRowGroup.Name);
+    this.obj = obj;
+  }
+  /** @internal */
+  getMusicObject() {
+    return this.obj;
+  }
+  /**
+   * Get instrument name.
+   * @returns - instrument name.
+   */
+  getInstrument() {
+    return this.obj.instrument;
+  }
+};
+/** Object name. */
+__publicField(_MScoreRowGroup, "Name", "ScoreRowGroup");
+var MScoreRowGroup = _MScoreRowGroup;
 var _MStaff = class _MStaff extends MusicInterface5 {
   /** @internal */
   constructor(obj) {
@@ -9658,7 +9838,7 @@ var _MPlaybackButtons = class _MPlaybackButtons {
     this.savedOnClickListeners.getOrCreate(btn, []).push(onClickListener);
   }
 };
-__publicField(_MPlaybackButtons, "savedOnClickListeners", new UniMap9());
+__publicField(_MPlaybackButtons, "savedOnClickListeners", new UniMap10());
 var MPlaybackButtons = _MPlaybackButtons;
 
 // src/score/index.ts
@@ -9698,13 +9878,14 @@ export {
   MRest,
   MRhythmColumn,
   MScoreRow,
+  MScoreRowGroup,
   MSpecialText,
   MStaff,
+  MStaffBarLine,
   MStaffBeamGroup,
   MStaffNoteGroup,
   MStaffRest,
   MStaffSignature,
-  MStaffTabBarLine,
   MTab,
   MTabNoteGroup,
   MTabRhythm,