@tspro/web-music-score 5.4.0 → 5.4.2

package/dist/score/index.mjs

@@ -1,15 +1,15 @@
-/* WebMusicScore v5.4.0 | (c) 2023 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-ZWUBO5EW.mjs";
+} from "../chunk-MMWSQGVR.mjs";
 import {
   NoteLengthProps,
   RhythmProps,
   validateNoteLength
-} from "../chunk-MHDBTCVG.mjs";
+} from "../chunk-42IBAVOC.mjs";
 import {
   __publicField
-} from "../chunk-AUT4C6TY.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,9 @@ var DebugSettings = {
 };
 var DocumentSettings = {
   DocumentScale: 1,
-  DocumentMinWidth: 75,
+  MinStaffWidth: 75,
+  MinColumnsWidth: 10,
+  ColumnWidthScale: 1.7,
   PostMeasureBreakWidth: 10,
   NoteDotSpace: 0.5,
   NoteAccSpace: 0.5,
@@ -1147,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 AnchoredRect23, 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 AnchoredRect21 } 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";
 
@@ -1640,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);
     }
@@ -1661,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;
       });
@@ -1670,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;
       });
@@ -1680,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;
@@ -1808,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);
     }
@@ -1816,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;
@@ -2124,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);
     });
@@ -2632,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);
         }
@@ -2696,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);
         }
       });
@@ -2873,7 +2976,7 @@ var ObjRhythmColumn = class extends MusicObject {
     return Math.max(0, nextPositionTicks - curPositionTicks);
   }
   getShapeRects() {
-    this.getRect();
+    this.forceRectUpdate();
     return this.shapeRects;
   }
   get doc() {
@@ -2948,23 +3051,6 @@ var ObjRhythmColumn = class extends MusicObject {
   addLyricsObject(lyricsObj) {
     this.lyricsObject.set(lyricsObj.verse, lyricsObj.line, lyricsObj.vpos, lyricsObj);
   }
-  getMinWidth() {
-    let maxNoteSize = Math.max(...this.voiceSymbol.mapToArray((s) => s.rhythmProps.noteSize));
-    let w = DocumentSettings.NoteHeadWidth;
-    switch (maxNoteSize) {
-      case 1:
-        return w * 5;
-      // whole note
-      case 2:
-        return w * 3;
-      // half note
-      case 4:
-        return w * 2;
-      // quarter note
-      default:
-        return w;
-    }
-  }
   updateNoteDisplacements() {
     let data = [];
     this.voiceSymbol.forEach((symbol) => {
@@ -3055,13 +3141,11 @@ var ObjRhythmColumn = class extends MusicObject {
     if (!this.needLayout) {
       return;
     }
-    this.requestRectUpdate();
-    this.rect = new AnchoredRect10();
     let { row } = this;
-    let { unitSize } = ctx;
-    let halfMinWidth = this.getMinWidth() * unitSize / 2;
-    let leftw = halfMinWidth;
-    let rightw = halfMinWidth;
+    this.rect = new AnchoredRect10();
+    this.requestRectUpdate();
+    let leftw = 0;
+    let rightw = 0;
     this.voiceSymbol.forEach((symbol) => {
       symbol.layout(ctx, accState);
       let r = symbol.getRect();
@@ -3069,31 +3153,30 @@ var ObjRhythmColumn = class extends MusicObject {
       rightw = Math.max(rightw, r.rightw);
     });
     if (this.arpeggioDir !== void 0) {
-      let arpeggioWidth = 0;
-      this.arpeggios = row.getNotationLines().map((line) => {
-        let arpeggio = new ObjArpeggio(this, line, this.getArpeggioDir());
-        arpeggio.layout(ctx);
-        arpeggio.offset(-leftw - arpeggio.getRect().right, line.getRect().anchorY - arpeggio.getRect().anchorY);
-        arpeggioWidth = Math.max(arpeggioWidth, arpeggio.getRect().width);
-        line.addObject(arpeggio);
-        this.measure.addStaticObject(line, arpeggio);
-        return arpeggio;
+      this.arpeggios = row.getNotationLines().map((line) => new ObjArpeggio(this, line, this.getArpeggioDir()));
+      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.setAnchor(-leftw - arpeggioWidth / 2, a.line.getRect().anchorY);
+        a.line.addObject(a);
+        this.measure.addStaticObject(a.line, a);
       });
       leftw += arpeggioWidth;
     } else {
       this.arpeggios = [];
     }
-    let widenColumnObjs = this.getAnchoredLayoutObjects().filter((layoutObj) => layoutObj.layoutGroup.widensColumn);
-    if (widenColumnObjs.length > 0) {
-      widenColumnObjs.forEach((layoutObj) => {
-        leftw = Math.max(leftw, layoutObj.musicObj.getRect().leftw);
-        rightw = Math.max(rightw, layoutObj.musicObj.getRect().rightw);
-      });
-    }
-    this.voiceSymbol.forEach((symbol) => symbol.updateAccidentalState(accState));
+    const noteSizes = this.voiceSymbol.mapToArray((s) => s.rhythmProps.noteSize);
+    const maxNoteSize = Math.min(8, Math.max(1, ...noteSizes));
+    const MinColumnWidth = Math.ceil(8 / maxNoteSize) * DocumentSettings.NoteHeadWidth * ctx.unitSize * 0.75;
+    leftw = Math.max(leftw, MinColumnWidth / 2);
+    rightw = Math.max(rightw, MinColumnWidth / 2);
+    leftw *= DocumentSettings.ColumnWidthScale;
+    rightw *= DocumentSettings.ColumnWidthScale;
     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) => {
       let minDiatonicId = void 0;
       let maxDiatonicId = void 0;
@@ -3121,12 +3204,48 @@ var ObjRhythmColumn = class extends MusicObject {
       }
     });
   }
+  layoutReserveSpace(ctx) {
+    const columns = this.measure.getColumns();
+    const extraSpace = ctx.unitSize;
+    this.getAnchoredLayoutObjects().forEach((obj) => {
+      if (obj.layoutGroup.reserveSpace) {
+        const i = columns.indexOf(this);
+        if (i < 0) return;
+        const leftOverflow = obj.getRect().leftw - this.getRect().leftw;
+        if (leftOverflow > 0) {
+          const prevCol = columns[i - 1];
+          if (prevCol) {
+            prevCol.getAnchoredLayoutObjects().forEach((prevObj) => {
+              if (prevObj.layoutGroupId === obj.layoutGroupId) {
+                const rightOverflow2 = prevObj.getRect().rightw - prevCol.getRect().rightw;
+                this.rect.left -= Math.max(rightOverflow2 + leftOverflow, 0) + extraSpace;
+                this.requestRectUpdate();
+              }
+            });
+          }
+        }
+        const rightOverflow = obj.getRect().rightw - this.getRect().rightw;
+        if (rightOverflow > 0) {
+          const nextCol = columns[i + 1];
+          if (nextCol) {
+            nextCol.getAnchoredLayoutObjects().forEach((nextObj) => {
+              if (nextObj.layoutGroupId === obj.layoutGroupId) {
+                const leftOverflow2 = nextObj.getRect().leftw - nextCol.getRect().leftw;
+                this.rect.right += Math.max(rightOverflow + leftOverflow2, 0) + extraSpace;
+                this.requestRectUpdate();
+              }
+            });
+          }
+        }
+      }
+    });
+  }
   layoutDone() {
     this.needLayout = false;
   }
   updateRect() {
     this.shapeRects = [
-      ...this.voiceSymbol.filter((s) => !!s).mapToArray((s) => s.getRect().clone()),
+      ...this.voiceSymbol.filter((s) => s !== void 0).mapToArray((s) => s.getRect().clone()),
       ...this.arpeggios.map((a) => a.getRect().clone())
     ];
     this.rect.top = Math.min(...this.shapeRects.map((r) => r.top));
@@ -3207,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,
@@ -3224,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,
@@ -3804,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;
@@ -3822,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;
@@ -3838,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];
       }
@@ -3856,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;
@@ -3866,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 {
@@ -4078,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),
@@ -4505,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);
       }
     });
   }
@@ -5076,7 +5193,7 @@ var ConnectiveProps = class {
 };
 
 // src/score/engine/obj-lyrics.ts
-import { AnchoredRect as AnchoredRect19, Guard as Guard7 } from "@tspro/ts-utils-lib";
+import { Guard as Guard7 } from "@tspro/ts-utils-lib";
 var ObjLyrics = class extends MusicObject {
   constructor(col, verse, line, vpos, lyricsLength, lyricsText, lyricsOptions) {
     super(col);
@@ -5094,7 +5211,7 @@ var ObjLyrics = class extends MusicObject {
     let halign = (lyricsOptions == null ? void 0 : lyricsOptions.align) === "left" /* Left */ ? 0 : (lyricsOptions == null ? void 0 : lyricsOptions.align) === "right" /* Right */ ? 1 : 0.5;
     this.hyphen = Guard7.isEnumValue(lyricsOptions == null ? void 0 : lyricsOptions.hyphen, LyricsHyphen) ? lyricsOptions == null ? void 0 : lyricsOptions.hyphen : void 0;
     this.text = new ObjText(this, { text: lyricsText, color: this.color, scale: 0.8 }, halign, 0);
-    this.rect = new AnchoredRect19();
+    this.rect = this.text.getRect().clone();
     this.mi = new MLyrics(this);
   }
   getMusicInterface() {
@@ -5110,7 +5227,7 @@ var ObjLyrics = class extends MusicObject {
     this.nextLyricsObject = lyricsObj;
   }
   pick(x, y) {
-    return this.rect.contains(x, y) ? [this] : [];
+    return this.getRect().contains(x, y) ? [this] : [];
   }
   layout(ctx) {
     this.text.layout(ctx);
@@ -5131,8 +5248,8 @@ var ObjLyrics = class extends MusicObject {
       let maxw = r ? (r.left - l.right) * 0.85 : hyphenw;
       let w = this.hyphen === "-" /* Hyphen */ ? Math.min(hyphenw, maxw) : maxw;
       if (w > 0) {
-        let cx = r ? (r.left + l.right) / 2 : l.right + w / 0.85;
-        let cy = l.centerY / 2;
+        let cx = r ? (l.right + r.left) / 2 : l.right + w / 0.85;
+        let cy = l.centerY;
         ctx.moveTo(cx - w / 2, cy);
         ctx.lineTo(cx + w / 2, cy);
         ctx.stroke();
@@ -5142,7 +5259,7 @@ var ObjLyrics = class extends MusicObject {
 };
 
 // src/score/engine/obj-tab-rhythm.ts
-import { AnchoredRect as AnchoredRect20, 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);
@@ -5151,9 +5268,9 @@ 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 AnchoredRect20();
+    this.rect = new AnchoredRect19();
     this.mi = new MTabRhythm(this);
   }
   getMusicInterface() {
@@ -5166,7 +5283,7 @@ var ObjTabRhythm = class extends MusicObject {
     let columns = this.measure.getColumns();
     let numColsInVoiceId = getVoiceIds().map((voiceId) => Utils8.Math.sum(columns.map((col) => col.getVoiceSymbol(voiceId) ? 1 : 0)));
     this.voiceId.sort((a, b) => Utils8.Math.cmp(numColsInVoiceId[a], numColsInVoiceId[b]));
-    this.rect = new AnchoredRect20();
+    this.rect = new AnchoredRect19();
   }
   hasTuplets() {
     return this.measure.getBeamGroups().some((beamGroup) => beamGroup.isTuplet());
@@ -5217,7 +5334,7 @@ var ObjTabRhythm = class extends MusicObject {
           ctx.lineWidth(1);
           if (symbols.length === 1) {
             for (let i = 0; i < sym.rhythmProps.flagCount; i++) {
-              ctx.drawFlag(new AnchoredRect20(colX, colX + flagSize, stemTop + i * flagSize, stemTop + (i + 2) * flagSize), "up");
+              ctx.drawFlag(new AnchoredRect19(colX, colX + flagSize, stemTop + i * flagSize, stemTop + (i + 2) * flagSize), "up");
             }
           }
           for (let i = 0; i < sym.rhythmProps.dotCount; i++) {
@@ -5266,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) {
@@ -5320,7 +5436,27 @@ function getVerseLayoutGroupId(verse) {
       throw new MusicError13(MusicErrorType13.Unknown, "VerseNumber is not 1, 2 or 3.");
   }
 }
-var _ObjMeasure = class _ObjMeasure extends MusicObject {
+var MeasureRegions = class {
+  constructor() {
+    __publicField(this, "tabTuning_0", 0);
+    __publicField(this, "signature_1", 0);
+    __publicField(this, "leftBarLine_2", 0);
+    __publicField(this, "padding_3", 0);
+    __publicField(this, "columnsMin_4", 0);
+    __publicField(this, "padding_5", 0);
+    __publicField(this, "rightBarLine_6", 0);
+  }
+  get leftSolid() {
+    return this.tabTuning_0 + this.signature_1 + this.leftBarLine_2 + this.padding_3;
+  }
+  get columnsMin() {
+    return this.columnsMin_4;
+  }
+  get rightSolid() {
+    return this.padding_5 + this.rightBarLine_6;
+  }
+};
+var ObjMeasure = class extends MusicObject {
   constructor(row, options) {
     super(row);
     this.row = row;
@@ -5340,12 +5476,9 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     __publicField(this, "barLineRight");
     __publicField(this, "connectives", []);
     __publicField(this, "beamGroups", []);
-    __publicField(this, "tabStringNotesWidth", 0);
     __publicField(this, "measureId");
+    __publicField(this, "regions", new MeasureRegions());
     __publicField(this, "needLayout", true);
-    __publicField(this, "leftSolidAreaWidth", 0);
-    __publicField(this, "minColumnsAreaWidth", 0);
-    __publicField(this, "rightSolidAreaWidth", 0);
     __publicField(this, "voiceSymbols", asMulti(new IndexArray2()));
     __publicField(this, "lastAddedRhythmColumn");
     __publicField(this, "lastAddedRhythmSymbol");
@@ -5361,7 +5494,7 @@ var _ObjMeasure = class _ObjMeasure 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);
@@ -6014,34 +6147,34 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
   }
   // Get content rect excluding signature
   getColumnsContentRect() {
-    return new AnchoredRect21(
+    return new AnchoredRect20(
       this.barLineLeft.getRect().anchorX,
       this.barLineRight.getRect().anchorX,
       this.getRect().top,
       this.getRect().bottom
     );
   }
-  getLeftSolidAreaWidth() {
-    return this.leftSolidAreaWidth;
+  getLeftSolidWidth() {
+    return this.regions.leftSolid;
   }
-  getMinColumnsAreaWidth() {
-    return this.minColumnsAreaWidth;
+  getMinColumnsWidth() {
+    return this.regions.columnsMin;
   }
-  getRightSolidAreaWidth() {
-    return this.rightSolidAreaWidth;
+  getRightSolidWidth() {
+    return this.regions.rightSolid;
   }
-  getSolidAreaWidth() {
-    return this.leftSolidAreaWidth + this.rightSolidAreaWidth;
+  getTotalSolidWidth() {
+    return this.getLeftSolidWidth() + this.getRightSolidWidth();
   }
   getMinWidth() {
-    return this.leftSolidAreaWidth + this.minColumnsAreaWidth + this.rightSolidAreaWidth;
+    return this.getLeftSolidWidth() + this.getMinColumnsWidth() + this.getRightSolidWidth();
   }
   getStaffLineLeft() {
     let prev = this.getPrevMeasure();
     if (prev && prev.row === this.row && !prev.hasPostMeasureBreak()) {
       return prev.getStaffLineRight();
     } else {
-      return this.getRect().left + this.tabStringNotesWidth;
+      return this.getRect().left + this.regions.tabTuning_0;
     }
   }
   getStaffLineRight() {
@@ -6255,7 +6388,7 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     this.postMeasureBreakWidth = this.hasPostMeasureBreak() ? DocumentSettings.PostMeasureBreakWidth * unitSize : 0;
     let isFirstMeasureInRow = this === this.row.getFirstMeasure();
     let isAfterMeasureBreak = ((_a = this.getPrevMeasure()) == null ? void 0 : _a.hasPostMeasureBreak()) === true;
-    this.tabStringNotesWidth = isFirstMeasureInRow && this.row.hasTab ? unitSize * 4 : 0;
+    this.regions.tabTuning_0 = isFirstMeasureInRow && this.row.hasTab ? unitSize * 4 : 0;
     let showClef = isFirstMeasureInRow || isAfterMeasureBreak;
     let showMeasureNumber = this.options.showNumber === false ? false : this.options.showNumber === true || isFirstMeasureInRow && !this.row.isFirstRow();
     let showKeySignature = isFirstMeasureInRow || isAfterMeasureBreak || !!this.alterKeySignature;
@@ -6292,7 +6425,8 @@ var _ObjMeasure = class _ObjMeasure 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.tabStringNotesWidth * 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);
         }
@@ -6301,50 +6435,54 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     this.barLineLeft.layout(ctx);
     const accState = new AccidentalState(this);
     this.columns.forEach((col) => col.layout(ctx, accState));
+    this.columns.forEach((col) => col.layoutReserveSpace(ctx));
     this.barLineRight.layout(ctx);
-    if (this.endRepeatPlayCountText) {
+    if (this.endRepeatPlayCountText)
       this.endRepeatPlayCountText.layout(ctx);
-    }
-    this.layoutObjects.forEach((layoutObj) => layoutObj.layout(ctx));
+    this.layoutObjects.forEach((obj) => obj.layout(ctx));
     let padding = ctx.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;
-    this.minColumnsAreaWidth = 0;
-    this.columns.forEach((col) => this.minColumnsAreaWidth += col.getRect().width);
-    this.minColumnsAreaWidth = Math.max(this.minColumnsAreaWidth, _ObjMeasure.MinFlexContentWidth * unitSize);
+    this.regions.signature_1 = Math.max(0, ...this.signatures.map((signature) => signature.getRect().width));
+    this.regions.leftBarLine_2 = this.barLineLeft.getRect().width;
+    this.regions.padding_3 = padding;
+    this.regions.columnsMin_4 = Math.max(
+      DocumentSettings.MinColumnsWidth * unitSize,
+      this.columns.map((col) => col.getRect().width).reduce((acc, cur) => acc + cur)
+    );
+    this.regions.padding_5 = padding;
+    this.regions.rightBarLine_6 = this.barLineRight.getRect().width;
   }
   layoutWidth(ctx, width) {
     if (!this.needLayout) {
       return;
     }
     width = Math.max(width, this.getMinWidth());
-    this.rect = new AnchoredRect21();
+    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.tabStringNotesWidth - 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.tabStringNotesWidth + signaturesWidth - rect.left, -rect.anchorY);
-    rect = this.barLineRight.getRect();
-    this.barLineRight.offset(this.rect.right - rect.right, -rect.anchorY);
+    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.offset(this.barLineRight.getRect().left, this.barLineRight.getRect().top);
-    }
-    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 columnScale = columnsAreaWidth / columnsWidth;
-    let columnLeft = columnsAreaLeft;
+      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;
+    let columnsMinWidth = this.regions.columnsMin;
+    let columnScale = columnsWidth / columnsMinWidth;
+    let curColumnLeft = columnsLeft;
     this.columns.forEach((col) => {
-      rect = col.getRect();
-      let columnAnchorX = columnLeft + rect.leftw * columnScale;
-      col.offset(columnAnchorX - rect.anchorX, -rect.anchorY);
-      columnLeft += rect.width * columnScale;
+      let rect = col.getRect();
+      let columnAnchorX = curColumnLeft + rect.leftw * columnScale;
+      col.setAnchor(columnAnchorX, this.rect.anchorY);
+      curColumnLeft += rect.width * columnScale;
     });
     getVoiceIds().forEach((voiceId) => {
       const symbols = this.getVoiceSymbols(voiceId);
@@ -6352,8 +6490,7 @@ var _ObjMeasure = class _ObjMeasure 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) {
@@ -6422,9 +6559,8 @@ var _ObjMeasure = class _ObjMeasure 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));
@@ -6461,12 +6597,10 @@ var _ObjMeasure = class _ObjMeasure extends MusicObject {
     this.beamGroups.forEach((beam) => beam.draw(ctx));
   }
 };
-__publicField(_ObjMeasure, "MinFlexContentWidth", 10);
-var ObjMeasure = _ObjMeasure;
 
 // src/score/engine/layout-object.ts
 import { MusicError as MusicError14, MusicErrorType as MusicErrorType14 } from "@tspro/web-music-score/core";
-import { AnchoredRect as AnchoredRect22, 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";
@@ -6481,18 +6615,18 @@ 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 */, {}],
-  [2 /* NoteLabel */, { widen: true }],
+  [1 /* Fermata */, { reserveSpace: true }],
+  [2 /* NoteLabel */, { reserveSpace: true }],
   [3 /* Navigation */, { rowAlign: true }],
   [4 /* Ending */, { rowAlign: true, padding: 2 }],
   [5 /* TempoAnnotation */, { rowAlign: true, padding: 2 }],
   [6 /* DynamicsAnnotation */, { rowAlign: true, padding: 2 }],
-  [7 /* ChordLabel */, { widen: true, rowAlign: true }],
-  [8 /* LyricsVerse1 */, { rowAlign: true }],
-  [9 /* LyricsVerse2 */, { rowAlign: true }],
-  [10 /* LyricsVerse3 */, { rowAlign: true }]
+  [7 /* ChordLabel */, { reserveSpace: true, rowAlign: true }],
+  [8 /* LyricsVerse1 */, { reserveSpace: true, rowAlign: true }],
+  [9 /* LyricsVerse2 */, { reserveSpace: true, rowAlign: true }],
+  [10 /* LyricsVerse3 */, { reserveSpace: true, rowAlign: true }]
 ]);
 function requireParentMeasure(p) {
   while (p) {
@@ -6553,7 +6687,7 @@ var LayoutObjectWrapper = class {
       let staticShapeRects = staticObj.getShapeRects();
       objShapeRects.forEach((objR) => {
         staticShapeRects.forEach((staticR) => {
-          if (AnchoredRect22.overlapX(objR, staticR)) {
+          if (AnchoredRect21.overlapX(objR, staticR)) {
             y = verticalPos === 1 /* Below */ ? Math.max(y, staticR.bottom + objR.toph + objR.anchorY) : Math.min(y, staticR.top - objR.bottomh - objR.anchorY);
           }
         });
@@ -6574,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();
   }
@@ -6584,11 +6721,11 @@ var LayoutGroup = class {
     // key = VerticalPos
     __publicField(this, "layoutObject", asMulti2(new IndexArray3()));
     __publicField(this, "rowAlign");
-    __publicField(this, "widensColumn");
+    __publicField(this, "reserveSpace");
     __publicField(this, "padding");
     var _a, _b, _c, _d;
     this.rowAlign = ((_a = LayoutGroupIdAttrs.get(layoutGroupId)) == null ? void 0 : _a.rowAlign) === true;
-    this.widensColumn = ((_b = LayoutGroupIdAttrs.get(layoutGroupId)) == null ? void 0 : _b.widen) === true;
+    this.reserveSpace = ((_b = LayoutGroupIdAttrs.get(layoutGroupId)) == null ? void 0 : _b.reserveSpace) === true;
     this.padding = (_d = (_c = LayoutGroupIdAttrs.get(layoutGroupId)) == null ? void 0 : _c.padding) != null ? _d : 0;
   }
   getLayoutObjects(verticalPos) {
@@ -6617,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);
@@ -6644,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) {
@@ -6665,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) {
@@ -6815,7 +6952,7 @@ var ObjStaff = class extends ObjNotationLine5 {
     let h = unitSize * DocumentSettings.StaffHeight;
     this.topLineY = -h / 2;
     this.bottomLineY = h / 2;
-    this.rect = new AnchoredRect23(0, 0, this.topLineY, this.bottomLineY);
+    this.rect = new AnchoredRect22(0, 0, this.topLineY, this.bottomLineY);
   }
   layoutWidth(ctx) {
     this.rect.left = this.row.getRect().left;
@@ -6921,7 +7058,7 @@ var ObjTab = class extends ObjNotationLine5 {
     let h = unitSize * DocumentSettings.TabHeight;
     this.top = -h / 2;
     this.bottom = h / 2;
-    this.rect = new AnchoredRect23(0, 0, this.top, this.bottom);
+    this.rect = new AnchoredRect22(0, 0, this.top, this.bottom);
   }
   layoutWidth(ctx) {
     this.rect.left = this.row.getRect().left;
@@ -6946,6 +7083,111 @@ 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 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);
@@ -6953,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");
@@ -6975,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;
     }
@@ -7002,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;
   }
@@ -7055,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 [];
     }
@@ -7065,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];
       }
@@ -7119,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 */;
@@ -7138,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;
@@ -7152,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 AnchoredRect24(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.getSolidAreaWidth() + m.getPostMeasureBreakWidth();
-      minColumnsAreaWidth += m.getMinColumnsAreaWidth();
+      targetColumnsAreaWidth -= m.getTotalSolidWidth() + m.getPostMeasureBreakWidth();
+      minColumnsAreaWidth += m.getMinColumnsWidth();
     });
     let columnsAreaScale = targetColumnsAreaWidth / minColumnsAreaWidth;
-    let x = this.doc.getInstrumentGroupSize(ctx).braceRight;
+    let x = this.regions.staffLeft;
     this.measures.forEach((m) => {
-      let newMeasureWidth = m.getSolidAreaWidth() + m.getMinColumnsAreaWidth() * columnsAreaScale;
+      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();
     });
@@ -7192,10 +7427,19 @@ 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;
+    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() {
@@ -7208,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) => {
@@ -7226,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;
@@ -7254,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();
@@ -7270,22 +7499,7 @@ var ObjScoreRow = class extends MusicObject {
     }
     this.measures.forEach((m) => m.draw(ctx));
     this.notationLines.forEach((m) => m.draw(ctx));
-    let grpSize = this.doc.getInstrumentGroupSize(ctx);
-    this.instrumentNames.forEach((obj, i) => {
-      let grp = this.instrumentLineGroups[i];
-      if (grp.length > 1) {
-        let r = new AnchoredRect24(
-          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();
   }
 };
@@ -7295,6 +7509,7 @@ 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;
@@ -7334,24 +7549,29 @@ var ObjHeader = class extends MusicObject {
     }
     return [this];
   }
-  layoutWidth(ctx, left, right) {
+  layout(ctx) {
     let top = 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());
     }
@@ -7382,13 +7602,14 @@ var ObjHeader = class extends MusicObject {
 };
 
 // src/score/engine/obj-document.ts
-import { AnchoredRect as AnchoredRect26, 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 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);
@@ -7396,7 +7617,7 @@ var ObjDocument = class extends MusicObject {
     __publicField(this, "header");
     __publicField(this, "newRowRequested", false);
     __publicField(this, "allConnectiveProps", []);
-    __publicField(this, "staffGroups", new UniMap8());
+    __publicField(this, "staffGroups", new UniMap9());
     __publicField(this, "mi");
     this.mi = new MDocument2(this);
   }
@@ -7593,18 +7814,6 @@ var ObjDocument = class extends MusicObject {
       this.ctx.updateCursorRect(cursorRect);
     }
   }
-  getInstrumentGroupSize(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;
-    return {
-      nameLeft: 0,
-      nameRight: nameWidth,
-      braceLeft: nameWidth + padding,
-      braceRight: nameWidth + padding + braceWidth + padding
-    };
-  }
   requestLayout() {
     this.needLayout = true;
   }
@@ -7632,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 left = this.getInstrumentGroupSize(ctx).braceRight;
-    let right = Math.max(
-      DocumentSettings.DocumentMinWidth * unitSize,
-      ...this.rows.map((row) => 1.4 * row.getMinWidth())
-    );
-    this.rows.forEach((row) => row.layoutWidth(ctx, left, right));
+    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 AnchoredRect26();
     if (this.header) {
-      this.header.layoutWidth(ctx, left, right);
+      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) {
@@ -8431,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";
@@ -8778,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 */
@@ -8797,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.`);
     }
   }
   /**
@@ -8809,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) {
@@ -9091,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) {
@@ -9609,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
@@ -9649,13 +9878,14 @@ export {
   MRest,
   MRhythmColumn,
   MScoreRow,
+  MScoreRowGroup,
   MSpecialText,
   MStaff,
+  MStaffBarLine,
   MStaffBeamGroup,
   MStaffNoteGroup,
   MStaffRest,
   MStaffSignature,
-  MStaffTabBarLine,
   MTab,
   MTabNoteGroup,
   MTabRhythm,