@tspro/web-music-score 5.4.2 → 5.5.0

package/dist/score/index.mjs

@@ -1,18 +1,126 @@
-/* WebMusicScore v5.4.2 | (c) 2023-2025 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+/* WebMusicScore v5.5.0 | (c) 2023-2025 PahkaSoft | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
 import {
   MusicError
-} from "../chunk-MMWSQGVR.mjs";
+} from "../chunk-2DCCUAGC.mjs";
 import {
   NoteLengthProps,
   RhythmProps,
   validateNoteLength
-} from "../chunk-42IBAVOC.mjs";
+} from "../chunk-33HIE3HR.mjs";
 import {
-  __publicField
-} from "../chunk-ROBXPR34.mjs";
+  AnchoredRect,
+  BiMap,
+  IndexArray,
+  Rect,
+  TriMap,
+  UniMap,
+  ValueSet,
+  Vec,
+  asMulti,
+  device_exports,
+  guard_exports,
+  utils_exports
+} from "../chunk-T6TYLAJE.mjs";
+import {
+  __publicField,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-BMKUAUSJ.mjs";
+
+// src/score/engine/settings.ts
+var DebugSettings = {
+  DrawDebugRects: false,
+  DisableBeams: false
+};
+var DocumentSettings = {
+  DocumentScale: 1,
+  MinStaffWidth: 75,
+  MinColumnsWidth: 10,
+  ColumnWidthScale: 1.7,
+  PostMeasureBreakWidth: 10,
+  NoteDotSpace: 0.5,
+  NoteAccSpace: 0.5,
+  NoteHeadWidth: 2,
+  NoteHeadHeight: 1.3,
+  DiamondNoteHeadSize: 1.8,
+  DotSize: 0.8,
+  StemHeight: 7,
+  // One octave
+  FlagWidth: 1.5,
+  FlagHeight: 4,
+  FlagSeparation: 2,
+  BeamSeparation: 1.25,
+  BeamAngleFactor: 0.5,
+  BeamThickness: 4,
+  RestDotSpace: 0.5,
+  LedgerLineWidth: 3.6,
+  StubTieLength: 5,
+  StaffHeight: 8,
+  TabHeight: 20
+};
+var DocumentColor = {
+  HilightStaffPos: "#55cc55",
+  HilightObject: "#55cc55",
+  PlayCursor: "#44aa44",
+  Background: "white",
+  Header_Title: "black",
+  Header_Composer: "black",
+  Header_Arranger: "black",
+  RowGroup_Instrument: "black",
+  RowGroup_Frame: "black",
+  Staff_Frame: "black",
+  Staff_Note: "black",
+  Staff_Rest: "black",
+  Staff_Connective: "black",
+  Staff_Signature_Clef: "black",
+  Staff_Signature_Key: "black",
+  Staff_Signature_Time: "black",
+  Staff_Signature_Tempo: "black",
+  Staff_Signature_MeasureNum: "black",
+  Staff_Element_Fermata: "black",
+  Staff_Element_Annotation: "black",
+  Staff_Element_Navigation: "black",
+  Staff_Element_Label: "black",
+  Tab_Frame: "black",
+  Tab_Note: "black",
+  Tab_Rest: "black",
+  Tab_Connective: "black",
+  Tab_Tuning: "black",
+  //Tab_Signature_Clef: "black",
+  //Tab_Signature_Key: "black",
+  Tab_Signature_Time: "black",
+  Tab_Signature_Tempo: "black",
+  Tab_Signature_MeasureNum: "black",
+  Tab_Element_Fermata: "black",
+  Tab_Element_Annotation: "black",
+  Tab_Element_Navigation: "black",
+  Tab_Element_Label: "black"
+};
+
+// src/score/pub/color.ts
+function eq(a, b) {
+  return a.toLocaleLowerCase() === b.toLocaleLowerCase();
+}
+function setColor(color, ...colorAttrs) {
+  const setBacground = colorAttrs.length === 1 && eq(colorAttrs[0], "background");
+  const setAllColors = colorAttrs.length === 0;
+  if (eq(color, ""))
+    color = setBacground ? "white" : "black";
+  let noMatch = true;
+  for (const key in DocumentColor) {
+    const keyAttrs = key.split("_");
+    const isColorMatch = colorAttrs.length > 0 && colorAttrs.every((a) => keyAttrs.some((b) => eq(a, b)));
+    const isBgColorMatch = keyAttrs.length === 1 && eq(keyAttrs[0], "background");
+    if (setAllColors && !isBgColorMatch || isColorMatch) {
+      DocumentColor[key] = color;
+      noMatch = false;
+    }
+  }
+  if (noMatch)
+    console.error(`Color attrs ${utils_exports.Str.stringify(colorAttrs)} did not match any color.`);
+}
 
 // src/score/pub/div-rect.ts
-import { Utils } from "@tspro/ts-utils-lib";
 var DivRect = class _DivRect {
   constructor(...args) {
     __publicField(this, "left");
@@ -284,10 +392,10 @@ var DivRect = class _DivRect {
   clipInPlace(clipRect) {
     this.left = Math.max(this.left, clipRect.left);
     this.right = Math.min(this.right, clipRect.right);
-    this.anchorX = Utils.Math.clamp(this.anchorX, this.left, this.right);
+    this.anchorX = utils_exports.Math.clamp(this.anchorX, this.left, this.right);
     this.top = Math.max(this.top, clipRect.top);
     this.bottom = Math.min(this.bottom, clipRect.bottom);
-    this.anchorY = Utils.Math.clamp(this.anchorY, this.top, this.bottom);
+    this.anchorY = utils_exports.Math.clamp(this.anchorY, this.top, this.bottom);
     return this;
   }
   /**
@@ -333,11 +441,7 @@ var DivRect = class _DivRect {
   }
 };
 
-// src/score/pub/document-builder.ts
-import { Guard as Guard12, Utils as Utils12 } from "@tspro/ts-utils-lib";
-
 // src/score/pub/types.ts
-import { Guard } from "@tspro/ts-utils-lib";
 var StaffPreset = /* @__PURE__ */ ((StaffPreset2) => {
   StaffPreset2["Treble"] = "treble";
   StaffPreset2["Bass"] = "bass";
@@ -356,7 +460,7 @@ function getVoiceIds() {
   return [0, 1, 2, 3];
 }
 function isVoiceId(voiceId) {
-  return Guard.isIncluded(voiceId, getVoiceIds());
+  return guard_exports.isIncluded(voiceId, getVoiceIds());
 }
 function validateVoiceId(voiceId) {
   if (isVoiceId(voiceId)) {
@@ -369,7 +473,7 @@ function getStringNumbers() {
   return [1, 2, 3, 4, 5, 6];
 }
 function isStringNumber(stringNum) {
-  return Guard.isIncluded(stringNum, getStringNumbers());
+  return guard_exports.isIncluded(stringNum, getStringNumbers());
 }
 function validateStringNumber(stringNum) {
   if (isStringNumber(stringNum)) {
@@ -382,7 +486,7 @@ function getVerseNumbers() {
   return [1, 2, 3];
 }
 function isVerseNumber(verse) {
-  return Guard.isIncluded(verse, getVerseNumbers());
+  return guard_exports.isIncluded(verse, getVerseNumbers());
 }
 function validateVerseNumber(verseNum) {
   if (isVerseNumber(verseNum)) {
@@ -497,7 +601,6 @@ var PlayState = /* @__PURE__ */ ((PlayState2) => {
 })(PlayState || {});
 
 // src/score/engine/music-object.ts
-import { AnchoredRect } from "@tspro/ts-utils-lib";
 var MusicObjectLink = class {
   constructor(head) {
     __publicField(this, "head");
@@ -526,6 +629,7 @@ var MusicObject = class {
     this.parent = parent;
     __publicField(this, "anchoredLayoutObjects", []);
     __publicField(this, "link");
+    __publicField(this, "userData", {});
     __publicField(this, "rect", new AnchoredRect());
     __publicField(this, "needRectUpdate", true);
   }
@@ -616,58 +720,411 @@ import { Note as Note9 } from "@tspro/web-music-score/theory";
 // src/score/engine/obj-staff-and-tab.ts
 import { getTuningStrings, Note as Note8, validateTuningName } from "@tspro/web-music-score/theory";
 
-// src/score/engine/render-context.ts
-import { Utils as Utils2, Vec, Device, UniMap, AnchoredRect as AnchoredRect2 } from "@tspro/ts-utils-lib";
+// node_modules/color-name-to-code/dist/color-name.enum.js
+var ColorName;
+(function(ColorName2) {
+  ColorName2["AliceBlue"] = "aliceblue";
+  ColorName2["AntiqueWhite"] = "antiquewhite";
+  ColorName2["Aqua"] = "aqua";
+  ColorName2["Aquamarine"] = "aquamarine";
+  ColorName2["Azure"] = "azure";
+  ColorName2["Beige"] = "beige";
+  ColorName2["Bisque"] = "bisque";
+  ColorName2["Black"] = "black";
+  ColorName2["BlanchedAlmond"] = "blanchedalmond";
+  ColorName2["Blue"] = "blue";
+  ColorName2["BlueViolet"] = "blueviolet";
+  ColorName2["Brown"] = "brown";
+  ColorName2["BurlyWood"] = "burlywood";
+  ColorName2["CadetBlue"] = "cadetblue";
+  ColorName2["Chartreuse"] = "chartreuse";
+  ColorName2["Chocolate"] = "chocolate";
+  ColorName2["Coral"] = "coral";
+  ColorName2["CornflowerBlue"] = "cornflowerblue";
+  ColorName2["CornSilk"] = "cornsilk";
+  ColorName2["Crimson"] = "crimson";
+  ColorName2["Cyan"] = "cyan";
+  ColorName2["DarkBlue"] = "darkblue";
+  ColorName2["DarkCyan"] = "darkcyan";
+  ColorName2["DarkGoldenRod"] = "darkgoldenrod";
+  ColorName2["DarkGray"] = "darkgray";
+  ColorName2["DarkGreen"] = "darkgreen";
+  ColorName2["DarkGrey"] = "darkgrey";
+  ColorName2["DarkKhaki"] = "darkkhaki";
+  ColorName2["DarkMagenta"] = "darkmagenta";
+  ColorName2["DarkOliveGreen"] = "darkolivegreen";
+  ColorName2["DarkOrange"] = "darkorange";
+  ColorName2["DarkOrchid"] = "darkorchid";
+  ColorName2["DarkRed"] = "darkred";
+  ColorName2["DarkSalmon"] = "darksalmon";
+  ColorName2["DarkSeaGreen"] = "darkseagreen";
+  ColorName2["DarkSlateBlue"] = "darkslateblue";
+  ColorName2["DarkSlateGray"] = "darkslategray";
+  ColorName2["DarkSlateGrey"] = "darkslategrey";
+  ColorName2["DarkTurquoise"] = "darkturquoise";
+  ColorName2["DarkViolet"] = "darkviolet";
+  ColorName2["DeepPink"] = "deeppink";
+  ColorName2["DeepSkyBlue"] = "deepskyblue";
+  ColorName2["DimGray"] = "dimgray";
+  ColorName2["DimGrey"] = "dimgrey";
+  ColorName2["DodgerBlue"] = "dodgerblue";
+  ColorName2["FireBrick"] = "firebrick";
+  ColorName2["FloralWhite"] = "floralwhite";
+  ColorName2["ForestGreen"] = "forestgreen";
+  ColorName2["Fuchsia"] = "fuchsia";
+  ColorName2["Gainsboro"] = "gainsboro";
+  ColorName2["GhostWhite"] = "ghostwhite";
+  ColorName2["Gold"] = "gold";
+  ColorName2["GoldenRod"] = "goldenrod";
+  ColorName2["Gray"] = "gray";
+  ColorName2["Green"] = "green";
+  ColorName2["GreenYellow"] = "greenyellow";
+  ColorName2["Grey"] = "grey";
+  ColorName2["Honeydew"] = "honeydew";
+  ColorName2["HotPink"] = "hotpink";
+  ColorName2["IndianRed"] = "indianred";
+  ColorName2["Indigo"] = "indigo";
+  ColorName2["Ivory"] = "ivory";
+  ColorName2["Khaki"] = "khaki";
+  ColorName2["Lavender"] = "lavender";
+  ColorName2["LavenderBlush"] = "lavenderblush";
+  ColorName2["LawnGreen"] = "lawngreen";
+  ColorName2["LemonChiffon"] = "lemonchiffon";
+  ColorName2["LightBlue"] = "lightblue";
+  ColorName2["LightCoral"] = "lightcoral";
+  ColorName2["LightCyan"] = "lightcyan";
+  ColorName2["LightGoldenRodYellow"] = "lightgoldenrodyellow";
+  ColorName2["LightGray"] = "lightgray";
+  ColorName2["LightGreen"] = "lightgreen";
+  ColorName2["LightGrey"] = "lightgrey";
+  ColorName2["LightPink"] = "lightpink";
+  ColorName2["LightSalmon"] = "lightsalmon";
+  ColorName2["LightSeaGreen"] = "lightseagreen";
+  ColorName2["LightSkyBlue"] = "lightskyblue";
+  ColorName2["LightSlateGray"] = "lightslategray";
+  ColorName2["LightSlateGrey"] = "lightslategrey";
+  ColorName2["LightSteelBlue"] = "lightsteelblue";
+  ColorName2["LightYellow"] = "lightyellow";
+  ColorName2["Lime"] = "lime";
+  ColorName2["LimeGreen"] = "limegreen";
+  ColorName2["Linen"] = "linen";
+  ColorName2["Magenta"] = "magenta";
+  ColorName2["Maroon"] = "maroon";
+  ColorName2["MediumAquamarine"] = "mediumaquamarine";
+  ColorName2["MediumBlue"] = "mediumblue";
+  ColorName2["MediumOrchid"] = "mediumorchid";
+  ColorName2["MediumPurple"] = "mediumpurple";
+  ColorName2["MediumSeaGreen"] = "mediumseagreen";
+  ColorName2["MediumSlateBlue"] = "mediumslateblue";
+  ColorName2["MediumSpringGreen"] = "mediumspringgreen";
+  ColorName2["MediumTurquoise"] = "mediumturquoise";
+  ColorName2["MediumVioletRed"] = "mediumvioletred";
+  ColorName2["MidnightBlue"] = "midnightblue";
+  ColorName2["MintCream"] = "mintcream";
+  ColorName2["MistyRose"] = "mistyrose";
+  ColorName2["Moccasin"] = "moccasin";
+  ColorName2["NavajoWhite"] = "navajowhite";
+  ColorName2["Navy"] = "navy";
+  ColorName2["OldLace"] = "oldlace";
+  ColorName2["Olive"] = "olive";
+  ColorName2["OliveDrab"] = "olivedrab";
+  ColorName2["Orange"] = "orange";
+  ColorName2["OrangeRed"] = "orangered";
+  ColorName2["Orchid"] = "orchid";
+  ColorName2["PaleGoldenRod"] = "palegoldenrod";
+  ColorName2["PaleGreen"] = "palegreen";
+  ColorName2["PaleTurquoise"] = "paleturquoise";
+  ColorName2["PaleVioletRed"] = "palevioletred";
+  ColorName2["PapayaWhip"] = "papayawhip";
+  ColorName2["PeachPuff"] = "peachpuff";
+  ColorName2["Peru"] = "peru";
+  ColorName2["Pink"] = "pink";
+  ColorName2["Plum"] = "plum";
+  ColorName2["PowderBlue"] = "powderblue";
+  ColorName2["Purple"] = "purple";
+  ColorName2["RebeccaPurple"] = "rebeccapurple";
+  ColorName2["Red"] = "red";
+  ColorName2["RosyBrown"] = "rosybrown";
+  ColorName2["RoyalBlue"] = "royalblue";
+  ColorName2["SaddleBrown"] = "saddlebrown";
+  ColorName2["Salmon"] = "salmon";
+  ColorName2["SandyBrown"] = "sandybrown";
+  ColorName2["SeaGreen"] = "seagreen";
+  ColorName2["SeaShell"] = "seashell";
+  ColorName2["Sienna"] = "sienna";
+  ColorName2["Silver"] = "silver";
+  ColorName2["SkyBlue"] = "skyblue";
+  ColorName2["SlateBlue"] = "slateblue";
+  ColorName2["SlateGray"] = "slategray";
+  ColorName2["SlateGrey"] = "slategrey";
+  ColorName2["Snow"] = "snow";
+  ColorName2["SpringGreen"] = "springgreen";
+  ColorName2["SteelBlue"] = "steelblue";
+  ColorName2["Tan"] = "tan";
+  ColorName2["Teal"] = "teal";
+  ColorName2["Thistle"] = "thistle";
+  ColorName2["Tomato"] = "tomato";
+  ColorName2["Turquoise"] = "turquoise";
+  ColorName2["Violet"] = "violet";
+  ColorName2["Wheat"] = "wheat";
+  ColorName2["White"] = "white";
+  ColorName2["WhiteSmoke"] = "whitesmoke";
+  ColorName2["Yellow"] = "yellow";
+  ColorName2["YellowGreen"] = "yellowgreen";
+})(ColorName = ColorName || (ColorName = {}));
 
-// src/score/engine/settings.ts
-var DebugSettings = {
-  DrawDebugRects: false,
-  DisableBeams: false
+// node_modules/color-name-to-code/dist/color-code-format.enum.js
+var ColorCodeFormat;
+(function(ColorCodeFormat2) {
+  ColorCodeFormat2["Hex"] = "hex";
+  ColorCodeFormat2["RGB"] = "rgb";
+  ColorCodeFormat2["Array"] = "array";
+})(ColorCodeFormat = ColorCodeFormat || (ColorCodeFormat = {}));
+
+// node_modules/color-name-to-code/node_modules/color-name/index.js
+var color_name_default = {
+  aliceblue: [240, 248, 255],
+  antiquewhite: [250, 235, 215],
+  aqua: [0, 255, 255],
+  aquamarine: [127, 255, 212],
+  azure: [240, 255, 255],
+  beige: [245, 245, 220],
+  bisque: [255, 228, 196],
+  black: [0, 0, 0],
+  blanchedalmond: [255, 235, 205],
+  blue: [0, 0, 255],
+  blueviolet: [138, 43, 226],
+  brown: [165, 42, 42],
+  burlywood: [222, 184, 135],
+  cadetblue: [95, 158, 160],
+  chartreuse: [127, 255, 0],
+  chocolate: [210, 105, 30],
+  coral: [255, 127, 80],
+  cornflowerblue: [100, 149, 237],
+  cornsilk: [255, 248, 220],
+  crimson: [220, 20, 60],
+  cyan: [0, 255, 255],
+  darkblue: [0, 0, 139],
+  darkcyan: [0, 139, 139],
+  darkgoldenrod: [184, 134, 11],
+  darkgray: [169, 169, 169],
+  darkgreen: [0, 100, 0],
+  darkgrey: [169, 169, 169],
+  darkkhaki: [189, 183, 107],
+  darkmagenta: [139, 0, 139],
+  darkolivegreen: [85, 107, 47],
+  darkorange: [255, 140, 0],
+  darkorchid: [153, 50, 204],
+  darkred: [139, 0, 0],
+  darksalmon: [233, 150, 122],
+  darkseagreen: [143, 188, 143],
+  darkslateblue: [72, 61, 139],
+  darkslategray: [47, 79, 79],
+  darkslategrey: [47, 79, 79],
+  darkturquoise: [0, 206, 209],
+  darkviolet: [148, 0, 211],
+  deeppink: [255, 20, 147],
+  deepskyblue: [0, 191, 255],
+  dimgray: [105, 105, 105],
+  dimgrey: [105, 105, 105],
+  dodgerblue: [30, 144, 255],
+  firebrick: [178, 34, 34],
+  floralwhite: [255, 250, 240],
+  forestgreen: [34, 139, 34],
+  fuchsia: [255, 0, 255],
+  gainsboro: [220, 220, 220],
+  ghostwhite: [248, 248, 255],
+  gold: [255, 215, 0],
+  goldenrod: [218, 165, 32],
+  gray: [128, 128, 128],
+  green: [0, 128, 0],
+  greenyellow: [173, 255, 47],
+  grey: [128, 128, 128],
+  honeydew: [240, 255, 240],
+  hotpink: [255, 105, 180],
+  indianred: [205, 92, 92],
+  indigo: [75, 0, 130],
+  ivory: [255, 255, 240],
+  khaki: [240, 230, 140],
+  lavender: [230, 230, 250],
+  lavenderblush: [255, 240, 245],
+  lawngreen: [124, 252, 0],
+  lemonchiffon: [255, 250, 205],
+  lightblue: [173, 216, 230],
+  lightcoral: [240, 128, 128],
+  lightcyan: [224, 255, 255],
+  lightgoldenrodyellow: [250, 250, 210],
+  lightgray: [211, 211, 211],
+  lightgreen: [144, 238, 144],
+  lightgrey: [211, 211, 211],
+  lightpink: [255, 182, 193],
+  lightsalmon: [255, 160, 122],
+  lightseagreen: [32, 178, 170],
+  lightskyblue: [135, 206, 250],
+  lightslategray: [119, 136, 153],
+  lightslategrey: [119, 136, 153],
+  lightsteelblue: [176, 196, 222],
+  lightyellow: [255, 255, 224],
+  lime: [0, 255, 0],
+  limegreen: [50, 205, 50],
+  linen: [250, 240, 230],
+  magenta: [255, 0, 255],
+  maroon: [128, 0, 0],
+  mediumaquamarine: [102, 205, 170],
+  mediumblue: [0, 0, 205],
+  mediumorchid: [186, 85, 211],
+  mediumpurple: [147, 112, 219],
+  mediumseagreen: [60, 179, 113],
+  mediumslateblue: [123, 104, 238],
+  mediumspringgreen: [0, 250, 154],
+  mediumturquoise: [72, 209, 204],
+  mediumvioletred: [199, 21, 133],
+  midnightblue: [25, 25, 112],
+  mintcream: [245, 255, 250],
+  mistyrose: [255, 228, 225],
+  moccasin: [255, 228, 181],
+  navajowhite: [255, 222, 173],
+  navy: [0, 0, 128],
+  oldlace: [253, 245, 230],
+  olive: [128, 128, 0],
+  olivedrab: [107, 142, 35],
+  orange: [255, 165, 0],
+  orangered: [255, 69, 0],
+  orchid: [218, 112, 214],
+  palegoldenrod: [238, 232, 170],
+  palegreen: [152, 251, 152],
+  paleturquoise: [175, 238, 238],
+  palevioletred: [219, 112, 147],
+  papayawhip: [255, 239, 213],
+  peachpuff: [255, 218, 185],
+  peru: [205, 133, 63],
+  pink: [255, 192, 203],
+  plum: [221, 160, 221],
+  powderblue: [176, 224, 230],
+  purple: [128, 0, 128],
+  rebeccapurple: [102, 51, 153],
+  red: [255, 0, 0],
+  rosybrown: [188, 143, 143],
+  royalblue: [65, 105, 225],
+  saddlebrown: [139, 69, 19],
+  salmon: [250, 128, 114],
+  sandybrown: [244, 164, 96],
+  seagreen: [46, 139, 87],
+  seashell: [255, 245, 238],
+  sienna: [160, 82, 45],
+  silver: [192, 192, 192],
+  skyblue: [135, 206, 235],
+  slateblue: [106, 90, 205],
+  slategray: [112, 128, 144],
+  slategrey: [112, 128, 144],
+  snow: [255, 250, 250],
+  springgreen: [0, 255, 127],
+  steelblue: [70, 130, 180],
+  tan: [210, 180, 140],
+  teal: [0, 128, 128],
+  thistle: [216, 191, 216],
+  tomato: [255, 99, 71],
+  turquoise: [64, 224, 208],
+  violet: [238, 130, 238],
+  wheat: [245, 222, 179],
+  white: [255, 255, 255],
+  whitesmoke: [245, 245, 245],
+  yellow: [255, 255, 0],
+  yellowgreen: [154, 205, 50]
 };
-var DocumentSettings = {
-  DocumentScale: 1,
-  MinStaffWidth: 75,
-  MinColumnsWidth: 10,
-  ColumnWidthScale: 1.7,
-  PostMeasureBreakWidth: 10,
-  NoteDotSpace: 0.5,
-  NoteAccSpace: 0.5,
-  NoteHeadWidth: 2,
-  NoteHeadHeight: 1.3,
-  DiamondNoteHeadSize: 1.8,
-  DotSize: 0.8,
-  StemHeight: 7,
-  // One octave
-  FlagWidth: 1.5,
-  FlagHeight: 4,
-  FlagSeparation: 2,
-  BeamSeparation: 1.25,
-  BeamAngleFactor: 0.5,
-  BeamThickness: 4,
-  RestDotSpace: 0.5,
-  LedgerLineWidth: 3.6,
-  StubTieLength: 5,
-  StaffHeight: 8,
-  TabHeight: 20
+
+// node_modules/color-name-to-code/dist/color-names.js
+var colorNames = color_name_default;
+
+// node_modules/color-name-to-code/dist/color-array-to-hex.js
+var colorArrayToHexDefaultOptions = {
+  hash: true,
+  lowercase: false,
+  short: false
 };
+function colorArrayToHex(arr, partialOptions) {
+  const options = __spreadValues(__spreadValues({}, colorArrayToHexDefaultOptions), partialOptions);
+  const { hash, lowercase, short } = options;
+  let hex = arr.map((num) => {
+    let str = num.toString(16);
+    str = str.length === 1 ? `0${str}` : str;
+    return str;
+  }).join("");
+  if (short) {
+    const chars = [...hex];
+    if (chars[0] === chars[1] && chars[2] === chars[3] && chars[4] === chars[5]) {
+      hex = `${chars[0]}${chars[2]}${chars[4]}`;
+    }
+  }
+  hex = lowercase ? hex.toLowerCase() : hex.toUpperCase();
+  if (hash) {
+    hex = `#${hex}`;
+  }
+  return hex;
+}
 
-// src/score/engine/render-context.ts
-import { MusicError as MusicError2, MusicErrorType as MusicErrorType2 } from "@tspro/web-music-score/core";
+// node_modules/color-name-to-code/dist/color-array-to-rgb.js
+function colorArrayToRGB(arr, alpha = 1) {
+  alpha = Math.min(1, Math.max(0, alpha));
+  if (alpha < 1) {
+    return `rgba(${arr[0]}, ${arr[1]}, ${arr[2]}, ${alpha})`;
+  }
+  return `rgb(${arr[0]}, ${arr[1]}, ${arr[2]})`;
+}
 
-// src/score/engine/assets/F-clef.png
-var F_clef_default = "data:image/png;base64,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IHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDo0MDc4NWMzNi00MDFkLTRhNmUtOTE4Ny0wNDU1MjgyYzRkZjYiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Nzg3YjYxN2YtMjg1MS00YzhlLTg2MTYtZWM3NGMwYzYwMWVlIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZTdhYTQxY2EtM2JiMy00ZTliLTk0NDEtOWU1M2ZlMmJmMzlmIgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgR0lNUDpBUEk9IjIuMCIKICAgR0lNUDpQbGF0Zm9ybT0iV2luZG93cyIKICAgR0lNUDpUaW1lU3RhbXA9IjE2ODY2MTM5NDcxOTU2ODAiCiAgIEdJTVA6VmVyc2lvbj0iMi4xMC4zNCIKICAgdGlmZjpPcmllbnRhdGlvbj0iMSIKICAgeG1wOkNyZWF0b3JUb29sPSJHSU1QIDIuMTAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjM6MDY6MTNUMDI6NTI6MjUrMDM6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIzOjA2OjEzVDAyOjUyOjI1KzAzOjAwIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjczNjZiZjQtZWRkMy00MTk4LTk2MmEtZTllMzkxMGU1OGJlIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKFdpbmRvd3MpIgogICAgICBzdEV2dDp3aGVuPSIyMDIyLTA4LTIyVDAyOjU1OjM2Ii8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InNhdmVkIgogICAgICBzdEV2dDpjaGFuZ2VkPSIvIgogICAgICBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjk2NWUxMzc5LTBkOWYtNDk4Mi1hZDcwLTkzOGM5YzM5YTRmMyIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iR2ltcCAyLjEwIChXaW5kb3dzKSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMi0wOS0xMVQxNjozNTowMCIvPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMGZiYTBhMy05MjliLTQ1NGUtOGM0Yy04ZWQ4YzhhYmFkZGMiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkdpbXAgMi4xMCAoV2luZG93cykiCiAgICAgIHN0RXZ0OndoZW49IjIwMjMtMDYtMTBUMTc6NTA6MDkiLz4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDBmYjM4YTMtZjZiMi00NjQ1LTliMTYtMjlhNWE0ODZlMjhhIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKFdpbmRvd3MpIgogICAgICBzdEV2dDp3aGVuPSIyMDIzLTA2LTEzVDAyOjUyOjI3Ii8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/PsIRrtIAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfnBgwXNBsqJURsAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAABF9JREFUeNrtmluIF1Ucxz9/E8P1VnnJ9dJWC4Frmq2JJmqolGEILoQvK2gZeXlRCSm1Fx9UEsJQERWsXhRftECs0Gq70EK9ZHlbFyHbds3VVXFX91+7664P81tYhpnfmft//st84TzMzDm/8/vOnPO7nYEMGTJkyJAhQ4YMGSJBLkJZw4FyYAIwDHgU+A9oAxqBv4C7xfyySoBlwKfAFaAb6DG0euAzoAoYXCxEnwH2A60eCGrtFrALGJNWokNEwY6QRO2tFXgPGJAmss8DlyImam/fASPTQHaeGJueBFod8FQhrfSLwM+ynDX8L1/oV+BP4LZY58eBUUAlMB94ycPSvQTMERmJ4jGgwYPh2Qg84VFmGbAP6DTI/aoQS/lzg1JfA2MDyn4ZuGaQvyZJspUGv3oKGBhyjmeBJmWOmxLMJIITiiIXIgwaZgFdylxbDeNHANXAZmAVUBpEiScNe2xRxC/3Y2WuRmUlLRHD1rd/HljvV4F3FAVqYlhNo4B7Pl/wdPEMbmOq/ShwRBH0Vkxb6LAy536fW64HuOpn8vOKoLKYCC9Q5rzs0L/JQxDjyYPkgHYXAW0xGslByrLuFuPUFw0eCI92mmiAQ4LgZoEbYyTcAZxVPsJk271ag7x6cWueCLvhfsyu8LzybKLtersUF9ywxe2BnXBnAZOUJuXZeNv1OSki3LLdzwPrgONuguw+7g7wAHjEoW+vEagAXgeelr1yUSZoCUn4hvJsqMO9byRaWyLGtFkiwOtBJnYzBKcVg/ZuSMIrlHl3RrWMnFK1OqX/q8oXOAisDqFLVxL7xonw9yHk7Q5RoxpuyLdjI3wmhLzBwMqAY0ck4SGcCNeKIQqKOTF84RtxEu4BPgohc2QM467HSRjgqBL5mBDUPU1Rnl1JwqBNUuJqrW0M+OLdYuk8Cdas38Rf4b3FR0HP/nLdZNYaioKbxSVuA6ZGQfoNvNWlO6VvEKxW5O5yGbNc4ml7ZrUtCtLjgGMSdjop9Q+wMIT8GoXwKw79ZxrKUG9r+a8flMoyr5AA4ybwo1QgggYHpZJ6Ou3Ta5IpddvufwEsVWQ2xFisCI1Nypf6RMmsIql4JI0S8bFuSs9UvmCgikeh8b6i8C/KuKOYD+VShzGSwLsprRnByYYYoSqNhE8qCv/kYfxrYjT7jmuPIC+PBWsVsl1YRzBeE45qqWGtwjo1SR0WoZ8a7KAfYa5h7/2OVaPuF1gqtS83srclpi565IAP0c+b7wOz+wPZckOc3Jt0LC52oiXABx7y6VasGnfRYgiwwRAu9raGqPLXQmAGcADvvyN+m9bgXnP4i4E9wN8+KiJ5WQG5QilumnioJP9lwHPANKw/fF7A+fxJw2ms/y9SFdiPBf4Vn9hJNL8T/iFxbyoxgej+m6zBOtnLpXlvhiXcDOyVJV8UCEL4KnBI/OnAtBP0q+ADMTq/SfshrdUFr4TzwJdY9d57WIdYzRIk1GMdeXSQIUOGDBmSwUMtd8u2ArdcUAAAAABJRU5ErkJggg==";
+// node_modules/color-name-to-code/dist/color-name-to-code.js
+var colorNameToCodeDefaultOptions = __spreadProps(__spreadValues({}, colorArrayToHexDefaultOptions), {
+  fallback: true,
+  alpha: 1,
+  format: ColorCodeFormat.Hex
+});
+function colorNameToCode(value, partialOptions = {}) {
+  const options = __spreadValues(__spreadValues({}, colorNameToCodeDefaultOptions), partialOptions);
+  const { fallback, format, hash, lowercase, short, alpha } = options;
+  value = `${value}`;
+  const colorName = value.toLowerCase().replaceAll(/[^a-z]/g, "");
+  let colorArray = colorNames[colorName];
+  if (!colorArray) {
+    if (!fallback) {
+      throw new Error(`no matching color found for '${value}'`);
+    }
+    const hex = value.toLowerCase().replaceAll(/[^\da-f]/g, "");
+    colorArray = (hex.length <= 3 ? [hex.slice(0, 1).repeat(2), hex.slice(1, 2).repeat(2), hex.slice(2, 3).repeat(2)] : [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)]).map((str) => Number.parseInt(str.length < 2 ? `${"0".repeat(2 - str.length)}${str}` : str, 16));
+  }
+  switch (format) {
+    case ColorCodeFormat.Array: {
+      return [...colorArray];
+    }
+    case ColorCodeFormat.RGB: {
+      return colorArrayToRGB(colorArray, alpha);
+    }
+    default: {
+      return colorArrayToHex(colorArray, { hash, lowercase, short });
+    }
+  }
+}
 
 // src/score/engine/assets/G-clef.png
 var G_clef_default = "data:image/png;base64,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TTpEb2N1bWVudElEPSJnaW1wOmRvY2lkOmdpbXA6NDA3ODVjMzYtNDAxZC00YTZlLTkxODctMDQ1NTI4MmM0ZGY2IgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhiZTJkYzc1LTVlYjQtNDk0Yy1iNWRlLWQ2MzZkNzZhNjI2YiIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmU3YWE0MWNhLTNiYjMtNGU5Yi05NDQxLTllNTNmZTJiZjM5ZiIKICAgZGM6Rm9ybWF0PSJpbWFnZS9wbmciCiAgIEdJTVA6QVBJPSIyLjAiCiAgIEdJTVA6UGxhdGZvcm09IldpbmRvd3MiCiAgIEdJTVA6VGltZVN0YW1wPSIxNjg2NDA4NjA5MzE2NDM4IgogICBHSU1QOlZlcnNpb249IjIuMTAuMzQiCiAgIHRpZmY6T3JpZW50YXRpb249IjEiCiAgIHhtcDpDcmVhdG9yVG9vbD0iR0lNUCAyLjEwIgogICB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzOjA2OjEwVDE3OjUwOjA5KzAzOjAwIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyMzowNjoxMFQxNzo1MDowOSswMzowMCI+CiAgIDx4bXBNTTpIaXN0b3J5PgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InNhdmVkIgogICAgICBzdEV2dDpjaGFuZ2VkPSIvIgogICAgICBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjI3MzY2YmY0LWVkZDMtNDE5OC05NjJhLWU5ZTM5MTBlNThiZSIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iR2ltcCAyLjEwIChXaW5kb3dzKSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMi0wOC0yMlQwMjo1NTozNiIvPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo5NjVlMTM3OS0wZDlmLTQ5ODItYWQ3MC05MzhjOWMzOWE0ZjMiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkdpbXAgMi4xMCAoV2luZG93cykiCiAgICAgIHN0RXZ0OndoZW49IjIwMjItMDktMTFUMTY6MzU6MDAiLz4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MTBmYmEwYTMtOTI5Yi00NTRlLThjNGMtOGVkOGM4YWJhZGRjIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKFdpbmRvd3MpIgogICAgICBzdEV2dDp3aGVuPSIyMDIzLTA2LTEwVDE3OjUwOjA5Ii8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/Ppn4NIQAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfnBgoOMgm5WlWBAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAACHtJREFUeNrtnXuQVmMcxz+77cauTWUpbGSVu2w3BpnUEBq3chkmBjGayG1GBuNWLtUgw5SJkBkjl4QKg1wyQyarK0lRSlstU20bWam9+OM8O3P6vc8553nOe97tnO18Z84f57zP7XvOc/ndnueFfQx5e6neUmAI0B3oDPwD/AJ8Dvzcml5we+Al4D+gyeOaB1S0BrLHAut9iLqvf4ERSSZbBmwwJOu+RieV8JwQZJuARjXWE4WBIck2X38AByaJ8MwsCTcBTyWFbCFQFwHhv4DiKBqUn2PCPYEin9+bgI3AUuBPn3TtgMuT8IWv8vlq7wLdRPrTgPke6d9JAuFbPBo/3UfKK1TCh8yzIQmEb/cYjx0C8pUDuzV5D477GN6mefY+UBuQby0wV/O8U9wJr9E8W2iY92vNs45xJ6zTfKoN827UPNsdd8K1SlJyo8Awb7XhEIkVYYAVmjXVBPtr1uyqJBBeLu5LDPMdppkPdiaRcHvDfKeJ+++SIFoCLBP3R1toWW58lhQFogiodwkPlYZf1y1w/AcclCQVcYWQtILwqiA8M2lGgDcFgSN90nbXiJUXRdWQ/BYiLMdxH5+0k8VavRb4JGmEl4j7vh7pRgDni2fj1RyQKBwiuqjui/Un015dBbQloXCbaTdrZuUajTp4IwnGbEHmKPX8QmCHhuwC9p4rKBI8IghdB0zCsT1Lsg0+4zwxuEiQqqcVmGWDlAETk+zSJE9Ublyjuqof2TrgxKQT7anMNSZfd1iSiZYCUwy+avP1dJLJXglsxdyV8hHQJolEDwBewc5v9J3Klzj0xYnTsCG7W4mdicMdwC7CeQaPTBLRAjUxZeMKvSwpZPcDPghBUGpE45JAthjH92NLdiUwSDz7NO5k24YkuwTHGZYvtKMtcSabD7wVguy37OkilU7v8rgSfjoE2c816+wkkebKOJK9NgTZ2Wpykxgu0k2IG9lTcMIBbchOx9tTWKHpBbFBoZpwbMi+iL9FtEC8wG1xIvyQJdlJhuVWinzd4kD2cJxYZlOyky3KfkHkvSoOhF+2IPu8Zdk3x82O1QV96JDumhJSu5KB4XsVEwzJziCcy2Z/8UK3K5G1PZnhDi2iBW02IDvPY501xY8BuvJ6JcY+AQzAPCDGGucZkF2GefiCxFk4AWoN2K0AG4HHiSBATWJqQMXr1Qxui3Jlv8o2nHiHIl4UFeF1+G/ACOMGuZVoYqfd12qgX7ZkuwZUMjyEoWBaxETd1y5gVDaEr/YpfGqIyW9ODsm6r7FhCY/z6T625tTpLUS2+bo3DOHZHoVdYFnOqBYmG3rbz1JNQbZ2p2MsZfAor604G8OMsUVTyEBLwjMsv4r7vkapl28AH+PEWNqu1++ZNjRPk3mFJdnjDBu4HBipVoUGsewVaGb6fjgRPSsMSQ8wNb/KjA9bEp5osIzcLUitEml6BNQxxGPoWVtROmoynmFJ+CefRvytxFaJt0W6GwwtqE8GkA56cZSSGVxiI74FhTUM9ch3f0irCerleNU3wbZL2xrJzwhp+hks0s6PaBitMsnsXk7WWlY8xKPi7fjvOZI94x/sHOQFPobGw+U4kHBvrrDVRrw2RE4L6C3V7Ln3sBg43qLeeuAxj996BxHeJCYxm2i4Gh8RMwjL/BpqgA/VpKgTgnwJuzdXtbWUWpZpntUCiwwlPDf6WBLeBSzWPO8URFjuHOthUWm1ptJFaizZErb9wvJjNaMkiLDck2CrYD8n7k13hUrCvUIYB3Vdui6I8FI1qzbjUstKXwe+EV3aBKtE40pwjsKwwQEeuoEv4d3ALNf9ycCpFpU24ngRVrvkYNN8y7Ps1rqlb3MQYXCc3m7YytOb1FCYa2lhzHbiqjAoU4s2GoG+D+Fg85VGijq/ssh7qEboqLGZB6QDvBLHdZpLnK6R0EzlgNs0hGfZVJ6v1lV3ARNzTLhYo0sfY5h3sYWy4ole7Blh16ismrnEStFok/ou05BdR8iA1QfJDN2/PoeEZZTQkwZL0RoN4bvCNiCPzONlGpVJNBe7Tu4TdX1h2bbmmLCCbMfWAvTew6iDQy/QzLReZJ/RtKk+pFiagXZqmdCdyzGG8J5Eic6aOuSe4yK8A+RGRfn2/SqqwdmbVBZBPX/gHbh2MfAbEbtbTAQEr7itehyX6DDCn6zyCZlhUHcoTc7Ltj2WHKNcLexBRvaFaqxdr0Q/k2OixmNudN9uo+BEMcsOAB4AzrXIU6vUxlrVU3YqJaMEOELZoUzW0PeBezz04JyjN07o0mZy7zD7EjiTmKAQOAfHJlyJ/xmWtsHlo1UPCI28FnoBJym9urtaYspwdrOUKkmprerC/6pl7lel/HdxlTORBB/7aIJnLSQuK40orlisUWRaNXpoxnHX1ky4DZlhTkNbc5duwAlNjLRb58f8Ky/e1wgv2dcmrr6aiSur3agFOWxsL6XM91a6crUSCWfi+H9NoDtEsIKY7YI52sNQ4D5uZpBFeTKMamScyJqeFL4L8yOjfhB5x8Rp0ppoaPEoBF4j86A/HerEfUlcCB8GXGGRvqPSZYPQIeAF7DXC/bE3fJsY2eWsvCEuhMtC9oouAROgPPxveVwIN4TM53f08tnifgfmh/nmnPC6kPk2+fx2k7ifpWb4WKAT9mG+foFvMqqvkRj+pYntFp0HPMrZj8wg1VieEd8Tc6NdFXr3TCFOgLc77TZifE7AaAOyv+MY9iS64pxBK7vyJXHWcLy8eu4T0dybo9vhBMBMJvMwwEbgzqSodnfhvxOtDieQzOv3ncRkE7UNytV4tJ295+LsnUgsugKPAt/jvQm7DmcX2+Bcj7eWRjFwAo4rtYOa1avUMrSTFClSpEiRIkWKFClSpEiRIkWKFClSpEiRIkWKFClSpEiRIgL8D6ed2EKeJMaTAAAAAElFTkSuQmCC";
 
+// src/score/engine/assets/F-clef.png
+var F_clef_default = "data:image/png;base64,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IHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDo0MDc4NWMzNi00MDFkLTRhNmUtOTE4Ny0wNDU1MjgyYzRkZjYiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Nzg3YjYxN2YtMjg1MS00YzhlLTg2MTYtZWM3NGMwYzYwMWVlIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZTdhYTQxY2EtM2JiMy00ZTliLTk0NDEtOWU1M2ZlMmJmMzlmIgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgR0lNUDpBUEk9IjIuMCIKICAgR0lNUDpQbGF0Zm9ybT0iV2luZG93cyIKICAgR0lNUDpUaW1lU3RhbXA9IjE2ODY2MTM5NDcxOTU2ODAiCiAgIEdJTVA6VmVyc2lvbj0iMi4xMC4zNCIKICAgdGlmZjpPcmllbnRhdGlvbj0iMSIKICAgeG1wOkNyZWF0b3JUb29sPSJHSU1QIDIuMTAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjM6MDY6MTNUMDI6NTI6MjUrMDM6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIzOjA2OjEzVDAyOjUyOjI1KzAzOjAwIj4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjczNjZiZjQtZWRkMy00MTk4LTk2MmEtZTllMzkxMGU1OGJlIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKFdpbmRvd3MpIgogICAgICBzdEV2dDp3aGVuPSIyMDIyLTA4LTIyVDAyOjU1OjM2Ii8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InNhdmVkIgogICAgICBzdEV2dDpjaGFuZ2VkPSIvIgogICAgICBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjk2NWUxMzc5LTBkOWYtNDk4Mi1hZDcwLTkzOGM5YzM5YTRmMyIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iR2ltcCAyLjEwIChXaW5kb3dzKSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMi0wOS0xMVQxNjozNTowMCIvPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMGZiYTBhMy05MjliLTQ1NGUtOGM0Yy04ZWQ4YzhhYmFkZGMiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkdpbXAgMi4xMCAoV2luZG93cykiCiAgICAgIHN0RXZ0OndoZW49IjIwMjMtMDYtMTBUMTc6NTA6MDkiLz4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDBmYjM4YTMtZjZiMi00NjQ1LTliMTYtMjlhNWE0ODZlMjhhIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKFdpbmRvd3MpIgogICAgICBzdEV2dDp3aGVuPSIyMDIzLTA2LTEzVDAyOjUyOjI3Ii8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/PsIRrtIAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfnBgwXNBsqJURsAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAABF9JREFUeNrtmluIF1Ucxz9/E8P1VnnJ9dJWC4Frmq2JJmqolGEILoQvK2gZeXlRCSm1Fx9UEsJQERWsXhRftECs0Gq70EK9ZHlbFyHbds3VVXFX91+7664P81tYhpnfmft//st84TzMzDm/8/vOnPO7nYEMGTJkyJAhQ4YMGSJBLkJZw4FyYAIwDHgU+A9oAxqBv4C7xfyySoBlwKfAFaAb6DG0euAzoAoYXCxEnwH2A60eCGrtFrALGJNWokNEwY6QRO2tFXgPGJAmss8DlyImam/fASPTQHaeGJueBFod8FQhrfSLwM+ynDX8L1/oV+BP4LZY58eBUUAlMB94ycPSvQTMERmJ4jGgwYPh2Qg84VFmGbAP6DTI/aoQS/lzg1JfA2MDyn4ZuGaQvyZJspUGv3oKGBhyjmeBJmWOmxLMJIITiiIXIgwaZgFdylxbDeNHANXAZmAVUBpEiScNe2xRxC/3Y2WuRmUlLRHD1rd/HljvV4F3FAVqYlhNo4B7Pl/wdPEMbmOq/ShwRBH0Vkxb6LAy536fW64HuOpn8vOKoLKYCC9Q5rzs0L/JQxDjyYPkgHYXAW0xGslByrLuFuPUFw0eCI92mmiAQ4LgZoEbYyTcAZxVPsJk271ag7x6cWueCLvhfsyu8LzybKLtersUF9ywxe2BnXBnAZOUJuXZeNv1OSki3LLdzwPrgONuguw+7g7wAHjEoW+vEagAXgeelr1yUSZoCUn4hvJsqMO9byRaWyLGtFkiwOtBJnYzBKcVg/ZuSMIrlHl3RrWMnFK1OqX/q8oXOAisDqFLVxL7xonw9yHk7Q5RoxpuyLdjI3wmhLzBwMqAY0ck4SGcCNeKIQqKOTF84RtxEu4BPgohc2QM467HSRjgqBL5mBDUPU1Rnl1JwqBNUuJqrW0M+OLdYuk8Cdas38Rf4b3FR0HP/nLdZNYaioKbxSVuA6ZGQfoNvNWlO6VvEKxW5O5yGbNc4ml7ZrUtCtLjgGMSdjop9Q+wMIT8GoXwKw79ZxrKUG9r+a8flMoyr5AA4ybwo1QgggYHpZJ6Ou3Ta5IpddvufwEsVWQ2xFisCI1Nypf6RMmsIql4JI0S8bFuSs9UvmCgikeh8b6i8C/KuKOYD+VShzGSwLsprRnByYYYoSqNhE8qCv/kYfxrYjT7jmuPIC+PBWsVsl1YRzBeE45qqWGtwjo1SR0WoZ8a7KAfYa5h7/2OVaPuF1gqtS83srclpi565IAP0c+b7wOz+wPZckOc3Jt0LC52oiXABx7y6VasGnfRYgiwwRAu9raGqPLXQmAGcADvvyN+m9bgXnP4i4E9wN8+KiJ5WQG5QilumnioJP9lwHPANKw/fF7A+fxJw2ms/y9SFdiPBf4Vn9hJNL8T/iFxbyoxgej+m6zBOtnLpXlvhiXcDOyVJV8UCEL4KnBI/OnAtBP0q+ADMTq/SfshrdUFr4TzwJdY9d57WIdYzRIk1GMdeXSQIUOGDBmSwUMtd8u2ArdcUAAAAABJRU5ErkJggg==";
+
 // src/score/engine/render-context.ts
-var HilightStaffPosRectColor = "#55cc55";
-var HilightObjectRectColor = "#55cc55";
-var PlayPosIndicatorColor = "#44aa44";
-var ImageAssets = new UniMap([
-  [0 /* G_Clef */, { src: G_clef_default }],
-  [1 /* F_Clef */, { src: F_clef_default }]
+var ImageData = new UniMap([
+  [0 /* G_Clef */, G_clef_default],
+  [1 /* F_Clef */, F_clef_default]
 ]);
+var getImageData = (asset) => ImageData.getOrDefault(asset, "");
+var ImageCache = new BiMap();
+function colorNameToRGBA(name, alpha = 1) {
+  const hex = colorNameToCode(name).replace("#", "");
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const a = Math.round(alpha * 255);
+  return [r, g, b, a];
+}
 function staffPosEquals(a, b) {
   if (!a && !b) return true;
   else if (!a || !b) return false;
@@ -702,23 +1159,9 @@ var RenderContext = class {
     __publicField(this, "onMouseLeaveFn");
     __publicField(this, "onTouchEndFn");
     this.devicePixelRatio = window.devicePixelRatio;
-    this.fontSize = Device.FontSize * DocumentSettings.DocumentScale * this.devicePixelRatio;
+    this.fontSize = device_exports.FontSize * DocumentSettings.DocumentScale * this.devicePixelRatio;
     this.unitSize = this.fontSize * 0.3;
     this._lineWidth = this.unitSize * 0.2;
-    ImageAssets.forEach((asset) => {
-      if (asset.finished !== true) {
-        const img = new Image();
-        img.src = asset.src;
-        img.onload = () => {
-          asset.img = img;
-          this.finishImageAsset(asset);
-        };
-        img.onerror = () => {
-          this.finishImageAsset(asset);
-          throw new MusicError2(MusicErrorType2.Score, "Failed to load image: " + asset.src);
-        };
-      }
-    });
     this.onClickFn = this.onClick.bind(this);
     this.onMouseMoveFn = this.onMouseMove.bind(this);
     this.onMouseLeaveFn = this.onMouseLeave.bind(this);
@@ -731,16 +1174,66 @@ var RenderContext = class {
     var _a;
     return (_a = this.mdoc) == null ? void 0 : _a.getMusicObject();
   }
-  finishImageAsset(asset) {
-    asset.finished = true;
-    let allFinished = ImageAssets.every((asset2) => asset2.finished === true);
-    if (allFinished) {
-      this.onLoad();
-    }
+  getImageAsset(asset, color) {
+    var _a;
+    color != null ? color : color = "";
+    return (_a = ImageCache.getOrCreate(asset, color, () => {
+      const a = { src: getImageData(asset), color, loaded: false, colorized: false };
+      const img = new Image();
+      img.src = a.src;
+      img.onload = () => {
+        a.img = img;
+        this.onImageLoaded(a);
+      };
+      img.onerror = () => {
+        console.error("Failed to load image: " + a.src);
+      };
+      return a;
+    })) == null ? void 0 : _a.img;
   }
-  getImageAsset(imageAsset) {
+  forceDraw() {
     var _a;
-    return (_a = ImageAssets.get(imageAsset)) == null ? void 0 : _a.img;
+    (_a = this.doc) == null ? void 0 : _a.requestFullLayout();
+    this.draw();
+  }
+  onImageLoaded(data) {
+    if (data.loaded || !data.img) return;
+    if (data.colorized || data.color === "") {
+      this.forceDraw();
+      data.loaded = true;
+      return;
+    }
+    const [nr, ng, nb, na] = colorNameToRGBA(data.color);
+    const threshold = 40;
+    const canvas = document.createElement("canvas");
+    canvas.width = data.img.width;
+    canvas.height = data.img.height;
+    const ctx = canvas.getContext("2d");
+    if (ctx == null) {
+      console.error("Failed to colorize image: ctx = null.");
+      return;
+    }
+    ctx.drawImage(data.img, 0, 0);
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const d = imageData.data;
+    for (let i = 0; i < d.length; i += 4) {
+      const r = d[i], g = d[i + 1], b = d[i + 2], a = d[i + 3];
+      if (a === 0) continue;
+      if (r < threshold && g < threshold && b < threshold) {
+        d[i + 0] = nr;
+        d[i + 1] = ng;
+        d[i + 2] = nb;
+      }
+    }
+    ctx.putImageData(imageData, 0, 0);
+    data.img.src = canvas.toDataURL("image/png");
+    data.img.onload = () => {
+      data.colorized = true;
+      this.onImageLoaded(data);
+    };
+    data.img.onerror = () => {
+      console.error("Failed to colorize image.");
+    };
   }
   setDocument(mdoc) {
     if (this.mdoc === mdoc) {
@@ -860,12 +1353,6 @@ var RenderContext = class {
   onTouchEnd(e) {
     this.usingTouch = true;
   }
-  onLoad() {
-    if (this.doc) {
-      this.doc.requestFullLayout();
-      this.draw();
-    }
-  }
   hilightObject(obj) {
     this.hilightedObj = obj;
   }
@@ -914,7 +1401,7 @@ var RenderContext = class {
     if (!staff) {
       return;
     }
-    this.fillColor(HilightStaffPosRectColor);
+    this.fillColor(DocumentColor.HilightStaffPos);
     this.fillRect(staff.row.getRect().left, staff.getDiatonicIdY(diatonicId) - unitSize, staff.row.getRect().width, 2 * unitSize);
     if (mousePos !== void 0) {
       this.drawLedgerLines(staff, diatonicId, mousePos.x);
@@ -926,13 +1413,13 @@ var RenderContext = class {
       return;
     }
     let rect = hilightedObj.getRect();
-    this.lineColor(HilightObjectRectColor);
+    this.lineColor(DocumentColor.HilightObject);
     this.strokeRect(rect.left, rect.top, rect.width, rect.height);
   }
   drawPlayCursor() {
     let { cursorRect: r } = this;
     if (r) {
-      this.color(PlayPosIndicatorColor).lineWidth(2).strokeLine(r.centerX, r.top, r.centerX, r.bottom);
+      this.color(DocumentColor.PlayCursor).lineWidth(2).strokeLine(r.centerX, r.top, r.centerX, r.bottom);
     }
   }
   txFromScreenCoord(screenCoord) {
@@ -942,8 +1429,10 @@ var RenderContext = class {
     return coord.div(this.devicePixelRatio);
   }
   clearCanvas() {
-    var _a;
-    (_a = this.ctx) == null ? void 0 : _a.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+    if (this.ctx) {
+      this.ctx.canvas.style.background = DocumentColor.Background;
+      this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+    }
   }
   drawDebugRect(r) {
     if (DebugSettings.DrawDebugRects) {
@@ -998,7 +1487,7 @@ var RenderContext = class {
       toph = unitSize * (0.5 + flagCount - adj);
       bottomh = unitSize * (1 + flagCount + adj);
     }
-    return new AnchoredRect2(-leftw, 0, rightw, -toph, 0, bottomh);
+    return new AnchoredRect(-leftw, 0, rightw, -toph, 0, bottomh);
   }
   drawRest(restSize, x, y) {
     let { unitSize } = this;
@@ -1184,7 +1673,7 @@ var RenderContext = class {
       this.ctx.font = savedFont;
       return metrics.width;
     } else {
-      return Utils2.Dom.getCanvasTextWidth(text, font);
+      return utils_exports.Dom.getCanvasTextWidth(text, font);
     }
   }
   arc(x, y, radius, startRadians, endRadians) {
@@ -1289,11 +1778,9 @@ var RenderContext = class {
 };
 
 // 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 UniMap8, Utils as Utils10 } from "@tspro/ts-utils-lib";
+import { MusicError as MusicError13, MusicErrorType as MusicErrorType13 } from "@tspro/web-music-score/core";
 
 // src/score/engine/obj-measure.ts
-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";
 
@@ -1323,7 +1810,6 @@ var AccidentalState = class {
 import { Note as Note2, getTempoString, KeySignature } from "@tspro/web-music-score/theory";
 
 // src/score/engine/obj-image.ts
-import { AnchoredRect as AnchoredRect3 } from "@tspro/ts-utils-lib";
 var ObjImage = class extends MusicObject {
   constructor(parent, image, anchorX, anchorY, imageScale) {
     super(parent);
@@ -1346,9 +1832,9 @@ var ObjImage = class extends MusicObject {
     try {
       let w = image.naturalWidth * imageScale * unitSize;
       let h = image.naturalHeight * imageScale * unitSize;
-      this.rect = AnchoredRect3.createSections(w * anchorX, w * (1 - anchorX), h * anchorY, h * (1 - anchorY));
+      this.rect = AnchoredRect.createSections(w * anchorX, w * (1 - anchorX), h * anchorY, h * (1 - anchorY));
     } catch (err) {
-      this.rect = new AnchoredRect3();
+      this.rect = new AnchoredRect();
     }
   }
   offset(dx, dy) {
@@ -1362,8 +1848,7 @@ var ObjImage = class extends MusicObject {
 };
 
 // src/score/engine/obj-accidental.ts
-import { MusicError as MusicError3, MusicErrorType as MusicErrorType3 } from "@tspro/web-music-score/core";
-import { AnchoredRect as AnchoredRect4 } from "@tspro/ts-utils-lib";
+import { MusicError as MusicError2, MusicErrorType as MusicErrorType2 } from "@tspro/web-music-score/core";
 var ObjAccidental = class extends MusicObject {
   constructor(parent, diatonicId, accidental, color = "black") {
     super(parent);
@@ -1383,22 +1868,22 @@ var ObjAccidental = class extends MusicObject {
     let { unitSize } = ctx;
     switch (this.accidental) {
       case -2:
-        this.rect = AnchoredRect4.createSections(unitSize * 1.25, unitSize * 1.25, unitSize * 4, unitSize * 1.2);
+        this.rect = AnchoredRect.createSections(unitSize * 1.25, unitSize * 1.25, unitSize * 4, unitSize * 1.2);
         break;
       case -1:
-        this.rect = AnchoredRect4.createSections(unitSize * 0.75, unitSize * 0.75, unitSize * 4, unitSize * 1.2);
+        this.rect = AnchoredRect.createSections(unitSize * 0.75, unitSize * 0.75, unitSize * 4, unitSize * 1.2);
         break;
       case 0:
-        this.rect = AnchoredRect4.createSections(unitSize * 0.75, unitSize * 0.75, unitSize * 2.2, unitSize * 2.2);
+        this.rect = AnchoredRect.createSections(unitSize * 0.75, unitSize * 0.75, unitSize * 2.2, unitSize * 2.2);
         break;
       case 1:
-        this.rect = AnchoredRect4.createSections(unitSize * 0.75, unitSize * 0.75, unitSize * 2, unitSize * 2);
+        this.rect = AnchoredRect.createSections(unitSize * 0.75, unitSize * 0.75, unitSize * 2, unitSize * 2);
         break;
       case 2:
-        this.rect = AnchoredRect4.createSections(unitSize * 1, unitSize * 1, unitSize * 1, unitSize * 1);
+        this.rect = AnchoredRect.createSections(unitSize * 1, unitSize * 1, unitSize * 1, unitSize * 1);
         break;
       default:
-        throw new MusicError3(MusicErrorType3.Score, "Invalid accidental value: " + this.accidental);
+        throw new MusicError2(MusicErrorType2.Score, "Invalid accidental value: " + this.accidental);
     }
   }
   offset(dx, dy) {
@@ -1438,7 +1923,6 @@ var ObjAccidental = class extends MusicObject {
 };
 
 // src/score/engine/obj-text.ts
-import { AnchoredRect as AnchoredRect5 } from "@tspro/ts-utils-lib";
 var DefaultBoxedPadding = 0.5;
 var ObjText = class extends MusicObject {
   constructor(parent, text, anchorX, anchorY) {
@@ -1475,7 +1959,7 @@ var ObjText = class extends MusicObject {
     if (this.textLines.length === 0) {
       this.textLines = [""];
     }
-    this.rect = new AnchoredRect5();
+    this.rect = new AnchoredRect();
     this.mi = new MText(this);
   }
   getMusicInterface() {
@@ -1484,18 +1968,6 @@ var ObjText = class extends MusicObject {
   getText() {
     return this.text;
   }
-  updateAnchorX(anchorX) {
-    this.anchorX = anchorX;
-    let { width } = this.rect;
-    this.rect.left = this.rect.anchorX - width * anchorX;
-    this.rect.right = this.rect.anchorX + width * (1 - anchorX);
-  }
-  updateAnchorY(anchorY) {
-    this.anchorY = anchorY;
-    let { height } = this.rect;
-    this.rect.top = this.rect.anchorY - height * anchorY;
-    this.rect.bottom = this.rect.anchorY + height * (1 - anchorY);
-  }
   pick(x, y) {
     return this.rect.contains(x, y) ? [this] : [];
   }
@@ -1511,7 +1983,7 @@ var ObjText = class extends MusicObject {
     if (this.boxed === "square" || this.boxed === "circle") {
       h = w = Math.max(h, w);
     }
-    this.rect = AnchoredRect5.createSections(w * anchorX, w * (1 - anchorX), h * anchorY, h * (1 - anchorY));
+    this.rect = AnchoredRect.createSections(w * anchorX, w * (1 - anchorX), h * anchorY, h * (1 - anchorY));
   }
   offset(dx, dy) {
     this.rect.offsetInPlace(dx, dy);
@@ -1557,8 +2029,7 @@ var ObjText = class extends MusicObject {
 };
 
 // src/score/engine/obj-signature.ts
-import { MusicError as MusicError4, MusicErrorType as MusicErrorType4 } from "@tspro/web-music-score/core";
-import { AnchoredRect as AnchoredRect6 } from "@tspro/ts-utils-lib";
+import { MusicError as MusicError3, MusicErrorType as MusicErrorType3 } from "@tspro/web-music-score/core";
 var ObjStaffSignature = class extends MusicObject {
   constructor(measure, staff) {
     super(measure);
@@ -1575,22 +2046,29 @@ var ObjStaffSignature = class extends MusicObject {
     __publicField(this, "mi");
     this.mi = new MStaffSignature(this);
   }
+  get doc() {
+    return this.measure.doc;
+  }
   getMusicInterface() {
     return this.mi;
   }
   updateClefImage(ctx, showClef) {
     if (showClef) {
-      let img = ctx.getImageAsset(this.staff.clefImageAsset);
+      let color = DocumentColor.Staff_Signature_Clef;
+      if (["black", "#000", "#000000"].includes(color))
+        color = "";
+      let img = ctx.getImageAsset(this.staff.clefImageAsset, color);
       this.clefImage = img ? new ObjImage(this, img, 0, 0.5, 0.1) : void 0;
-      this.eightBelowClef = this.clefImage && this.staff.isOctaveDown ? new ObjText(this, "8", 0.5, 0) : void 0;
+      this.eightBelowClef = this.clefImage && this.staff.isOctaveDown ? new ObjText(this, { text: "8", color }, 0.5, 0) : void 0;
     } else {
       this.clefImage = void 0;
     }
   }
   updateMeasureNumber(showMeasureNumber) {
     if (showMeasureNumber) {
+      let color = DocumentColor.Staff_Signature_MeasureNum;
       let text = this.measure.getMeasureNumber().toString();
-      this.measureNumber = new ObjText(this, text, 0, 1);
+      this.measureNumber = new ObjText(this, { text, color }, 0, 1);
     } else {
       this.measureNumber = void 0;
     }
@@ -1598,6 +2076,7 @@ var ObjStaffSignature = class extends MusicObject {
   updateKeySignature(showKeySignature) {
     if (showKeySignature) {
       let { measure } = this;
+      let color = DocumentColor.Staff_Signature_Key;
       let prevMeasure = measure.getPrevMeasure();
       let prevKeySignature = prevMeasure ? prevMeasure.getKeySignature() : void 0;
       let newKeySignature = measure.getKeySignature();
@@ -1605,11 +2084,11 @@ var ObjStaffSignature = class extends MusicObject {
       this.ksNewAccidentals = [];
       if (prevKeySignature && !KeySignature.equals(newKeySignature, prevKeySignature)) {
         prevKeySignature.getOrderedAccidentalNotes().forEach((accNote) => {
-          this.ksNeutralizeAccidentals.push(new ObjAccidental(this, this.getAccidentalDiatonicId(accNote), 0));
+          this.ksNeutralizeAccidentals.push(new ObjAccidental(this, this.getAccidentalDiatonicId(accNote), 0, color));
         });
       }
       newKeySignature.getOrderedAccidentalNotes().forEach((accNote) => {
-        this.ksNewAccidentals.push(new ObjAccidental(this, this.getAccidentalDiatonicId(accNote), accNote.accidental));
+        this.ksNewAccidentals.push(new ObjAccidental(this, this.getAccidentalDiatonicId(accNote), accNote.accidental, color));
       });
     } else {
       this.ksNeutralizeAccidentals = [];
@@ -1619,18 +2098,20 @@ var ObjStaffSignature = class extends MusicObject {
   updateTimeSignature(showTimeSignature) {
     if (showTimeSignature) {
       let timeSignature = this.measure.getTimeSignature();
+      let color = DocumentColor.Staff_Signature_Time;
       let beatCount = timeSignature.beatCount.toString();
-      this.beatCountText = new ObjText(this, { text: beatCount, scale: 1.4 }, 0.5, 0.5);
+      this.beatCountText = new ObjText(this, { text: beatCount, color, scale: 1.4 }, 0.5, 0.5);
       let beatSize = timeSignature.beatSize.toString();
-      this.beatSizeText = new ObjText(this, { text: beatSize, scale: 1.4 }, 0.5, 0.5);
+      this.beatSizeText = new ObjText(this, { text: beatSize, color, scale: 1.4 }, 0.5, 0.5);
     } else {
       this.beatCountText = this.beatSizeText = void 0;
     }
   }
   updateTempo(showTempo) {
     if (showTempo) {
-      let tempoStr = getTempoString(this.measure.getTempo());
-      this.tempoText = new ObjText(this, tempoStr, 0.5, 1);
+      let color = DocumentColor.Staff_Signature_Tempo;
+      let text = getTempoString(this.measure.getTempo());
+      this.tempoText = new ObjText(this, { text, color }, 0.5, 1);
     } else {
       this.tempoText = void 0;
     }
@@ -1654,7 +2135,7 @@ var ObjStaffSignature = class extends MusicObject {
     if (bottomAccidentalDiatonicId !== void 0) {
       return Note2.findNextDiatonicIdAbove(accNote.diatonicId, bottomAccidentalDiatonicId, false);
     } else {
-      throw new MusicError4(MusicErrorType4.Score, "Cannot get accidental diatonicId because note has no accidental.");
+      throw new MusicError3(MusicErrorType3.Score, "Cannot get accidental diatonicId because note has no accidental.");
     }
   }
   pick(x, y) {
@@ -1717,7 +2198,7 @@ var ObjStaffSignature = class extends MusicObject {
     let { staff } = this;
     let paddingX = unitSize;
     let x = 0;
-    this.rect = new AnchoredRect6();
+    this.rect = new AnchoredRect();
     if (this.clefImage) {
       x += paddingX;
       this.clefImage.layout(ctx);
@@ -1784,11 +2265,11 @@ var ObjStaffSignature = class extends MusicObject {
       this.tempoText.layout(ctx);
       this.tempoText.setCenterX(x);
       this.tempoText.setBottom(staff.getTopLineY());
-      if (this.clefImage && AnchoredRect6.overlap(this.clefImage.getRect(), this.tempoText.getRect())) {
+      if (this.clefImage && AnchoredRect.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())) {
+        if (this.tempoText && AnchoredRect.overlap(acc.getRect(), this.tempoText.getRect())) {
           this.tempoText.setBottom(acc.getRect().top);
         }
       });
@@ -1835,10 +2316,14 @@ var ObjTabSignature = class extends MusicObject {
   getMusicInterface() {
     return this.mi;
   }
+  get doc() {
+    return this.measure.doc;
+  }
   updateMeasureNumber(showMeasureNumber) {
     if (showMeasureNumber) {
+      let color = DocumentColor.Tab_Signature_MeasureNum;
       let text = this.measure.getMeasureNumber().toString();
-      this.measureNumber = new ObjText(this, text, 0, 1);
+      this.measureNumber = new ObjText(this, { text, color }, 0, 1);
     } else {
       this.measureNumber = void 0;
     }
@@ -1846,18 +2331,20 @@ var ObjTabSignature = class extends MusicObject {
   updateTimeSignature(showTimeSignature) {
     if (showTimeSignature) {
       let timeSignature = this.measure.getTimeSignature();
+      let color = DocumentColor.Tab_Signature_Time;
       let beatCount = timeSignature.beatCount.toString();
-      this.beatCountText = new ObjText(this, { text: beatCount, scale: 1.4 }, 0.5, 0.5);
+      this.beatCountText = new ObjText(this, { text: beatCount, color, scale: 1.4 }, 0.5, 0.5);
       let beatSize = timeSignature.beatSize.toString();
-      this.beatSizeText = new ObjText(this, { text: beatSize, scale: 1.4 }, 0.5, 0.5);
+      this.beatSizeText = new ObjText(this, { text: beatSize, color, scale: 1.4 }, 0.5, 0.5);
     } else {
       this.beatCountText = this.beatSizeText = void 0;
     }
   }
   updateTempo(showTempo) {
     if (showTempo) {
-      let tempoStr = getTempoString(this.measure.getTempo());
-      this.tempoText = new ObjText(this, tempoStr, 0, 1);
+      let color = DocumentColor.Tab_Signature_Tempo;
+      let text = getTempoString(this.measure.getTempo());
+      this.tempoText = new ObjText(this, { text, color }, 0, 1);
     } else {
       this.tempoText = void 0;
     }
@@ -1899,7 +2386,7 @@ var ObjTabSignature = class extends MusicObject {
     let paddingX = unitSize;
     let x = 0;
     let topLineY = tab.getTopLineY();
-    this.rect = new AnchoredRect6();
+    this.rect = new AnchoredRect();
     if (this.measureNumber) {
       this.measureNumber.layout(ctx);
       this.measureNumber.setLeft(0);
@@ -1950,7 +2437,6 @@ var ObjTabSignature = class extends MusicObject {
 };
 
 // src/score/engine/player.ts
-import { Rect as Rect2, UniMap as UniMap3, Utils as Utils5 } from "@tspro/ts-utils-lib";
 import { NoteLength as NoteLength4, RhythmProps as RhythmProps4, alterTempoSpeed } from "@tspro/web-music-score/theory";
 import * as Audio from "@tspro/web-music-score/audio";
 
@@ -1958,7 +2444,6 @@ import * as Audio from "@tspro/web-music-score/audio";
 import { Note as Note5 } from "@tspro/web-music-score/theory";
 
 // src/score/engine/obj-arpeggio.ts
-import { AnchoredRect as AnchoredRect7 } from "@tspro/ts-utils-lib";
 var ObjArpeggio = class extends MusicObject {
   constructor(col, line, arpeggioDir) {
     super(col);
@@ -1989,7 +2474,7 @@ var ObjArpeggio = class extends MusicObject {
     this.numCycles = Math.ceil((bottom - top) / this.cycleHeight) + 2;
     let width = unitSize * 2;
     let height = this.numCycles * this.cycleHeight;
-    this.rect = new AnchoredRect7(-width / 2, width / 2, -height / 2 - this.topArrowHeight, height / 2 + this.bottomArrowHeight);
+    this.rect = new AnchoredRect(-width / 2, width / 2, -height / 2 - this.topArrowHeight, height / 2 + this.bottomArrowHeight);
   }
   offset(dx, dy) {
     this.rect.offsetInPlace(dx, dy);
@@ -2025,8 +2510,7 @@ var ObjArpeggio = class extends MusicObject {
 
 // src/score/engine/obj-rest.ts
 import { Note as Note3, NoteLengthProps as NoteLengthProps2, RhythmProps as RhythmProps2, Tuplet } from "@tspro/web-music-score/theory";
-import { MusicError as MusicError5, MusicErrorType as MusicErrorType5 } from "@tspro/web-music-score/core";
-import { AnchoredRect as AnchoredRect8 } from "@tspro/ts-utils-lib";
+import { MusicError as MusicError4, MusicErrorType as MusicErrorType4 } from "@tspro/web-music-score/core";
 function getDiatonicIdFromStaffPos(staffPos) {
   if (typeof staffPos === "number") {
     return Note3.getChromaticNote(staffPos).diatonicId;
@@ -2043,7 +2527,7 @@ var ObjStaffRest = class extends MusicObject {
     super(staff);
     this.staff = staff;
     this.rest = rest;
-    __publicField(this, "restRect", new AnchoredRect8());
+    __publicField(this, "restRect", new AnchoredRect());
     __publicField(this, "dotRects", []);
     __publicField(this, "mi");
     staff.addObject(this);
@@ -2091,7 +2575,7 @@ var _ObjRest = class _ObjRest extends MusicObject {
     }
     this.runningDiatonicId = this.setDiatonicId;
     this.runningStemDir = "up" /* Up */;
-    this.color = (_c = options == null ? void 0 : options.color) != null ? _c : "black";
+    this.color = (_c = options == null ? void 0 : options.color) != null ? _c : DocumentColor.Staff_Rest;
     this.hide = (_d = options == null ? void 0 : options.hide) != null ? _d : false;
     this.oldStyleTriplet = tupletRatio === void 0 && ((options == null ? void 0 : options.triplet) === true || NoteLengthProps2.get(noteLength).isTriplet);
     let dotCount = typeof (options == null ? void 0 : options.dotted) === "number" ? options.dotted > 0 ? options.dotted : void 0 : (options == null ? void 0 : options.dotted) === true ? 1 : void 0;
@@ -2200,7 +2684,7 @@ var _ObjRest = class _ObjRest extends MusicObject {
       case 64:
         return -3;
       default:
-        throw new MusicError5(MusicErrorType5.Score, `Get rest dot vertical displacement: Invalid note size: ${noteSize}`);
+        throw new MusicError4(MusicErrorType4.Score, `Get rest dot vertical displacement: Invalid note size: ${noteSize}`);
     }
   }
   updateAccidentalState(accState) {
@@ -2224,7 +2708,7 @@ var _ObjRest = class _ObjRest extends MusicObject {
         let dotWidth = DocumentSettings.DotSize * unitSize;
         let dotX = obj.restRect.rightw + (DocumentSettings.RestDotSpace + DocumentSettings.DotSize * unitSize) + i * DocumentSettings.DotSize * unitSize * 1.5;
         let dotY = this.getRestDotVerticalDisplacement(noteSize) * unitSize;
-        obj.dotRects.push(AnchoredRect8.createCentered(dotX, dotY, dotWidth, dotWidth));
+        obj.dotRects.push(AnchoredRect.createCentered(dotX, dotY, dotWidth, dotWidth));
       }
       obj.setAnchor(0, staff.getDiatonicIdY(diatonicId));
       this.staffObjects.push(obj);
@@ -2233,7 +2717,7 @@ var _ObjRest = class _ObjRest extends MusicObject {
   }
   updateRect() {
     if (this.staffObjects.length === 0) {
-      this.rect = new AnchoredRect8();
+      this.rect = new AnchoredRect();
     } else {
       this.rect = this.staffObjects[0].getRect().clone();
       if (this.staffObjects.length > 1) {
@@ -2265,18 +2749,17 @@ __publicField(_ObjRest, "UndefinedDiatonicId", Infinity);
 var ObjRest = _ObjRest;
 
 // src/score/engine/obj-note-group.ts
-import { AnchoredRect as AnchoredRect9, Guard as Guard2, Utils as Utils3 } from "@tspro/ts-utils-lib";
 import { Note as Note4, NoteLengthProps as NoteLengthProps3, RhythmProps as RhythmProps3, Tuplet as Tuplet2 } from "@tspro/web-music-score/theory";
-import { MusicError as MusicError6, MusicErrorType as MusicErrorType6 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError5, MusicErrorType as MusicErrorType5 } from "@tspro/web-music-score/core";
 function getArpeggio(a) {
-  return Guard2.isEnumValue(a, Arpeggio) ? a : a === true ? "up" /* Up */ : void 0;
+  return guard_exports.isEnumValue(a, Arpeggio) ? a : a === true ? "up" /* Up */ : void 0;
 }
 function sortNotesAndStrings(notes, strings) {
-  let stringArr = Utils3.Arr.isArray(strings) ? strings : strings !== void 0 ? [strings] : [];
+  let stringArr = utils_exports.Arr.isArray(strings) ? strings : strings !== void 0 ? [strings] : [];
   let noteStringData = notes.map((note, i) => {
     return { note, string: stringArr[i] };
   });
-  noteStringData = Utils3.Arr.removeDuplicates(noteStringData, (a, b) => Note4.equals(a.note, b.note)).sort((a, b) => Note4.compareFunc(a.note, b.note));
+  noteStringData = utils_exports.Arr.removeDuplicates(noteStringData, (a, b) => Note4.equals(a.note, b.note)).sort((a, b) => Note4.compareFunc(a.note, b.note));
   return {
     sortedNotes: noteStringData.map((e) => e.note),
     sortedStrings: noteStringData.every((e) => e.string === void 0) ? void 0 : noteStringData.map((e) => e.string)
@@ -2398,8 +2881,8 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
     __publicField(this, "tabObjects", []);
     __publicField(this, "isNoteDisplaced");
     __publicField(this, "mi");
-    if (!Guard2.isIntegerGte(notes.length, 1)) {
-      throw new MusicError6(MusicErrorType6.Score, "Cannot create note group object because notes array is empty.");
+    if (!guard_exports.isIntegerGte(notes.length, 1)) {
+      throw new MusicError5(MusicErrorType5.Score, "Cannot create note group object because notes array is empty.");
     }
     let { sortedNotes, sortedStrings } = sortNotesAndStrings(notes, options == null ? void 0 : options.string);
     this.notes = sortedNotes;
@@ -2409,7 +2892,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
     this.runningDiatonicId = this.setDiatonicId;
     this.runningStemDir = "up" /* Up */;
     this.runningStringNumbers = [];
-    this.color = (_a = options == null ? void 0 : options.color) != null ? _a : "black";
+    this.color = (_a = options == null ? void 0 : options.color) != null ? _a : DocumentColor.Staff_Note;
     this.staccato = (_b = options == null ? void 0 : options.staccato) != null ? _b : false;
     this.diamond = (_c = options == null ? void 0 : options.diamond) != null ? _c : false;
     this.arpeggio = getArpeggio(options == null ? void 0 : options.arpeggio);
@@ -2451,9 +2934,9 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
   }
   startConnective(connectiveProps) {
     if (!this.row.hasStaff && connectiveProps.connective === "tie" /* Tie */) {
-      throw new MusicError6(MusicErrorType6.Score, "Ties not implemented for guitar tabs alone, staff is required!");
+      throw new MusicError5(MusicErrorType5.Score, "Ties not implemented for guitar tabs alone, staff is required!");
     } else if (!this.row.hasStaff && connectiveProps.connective === "slur" /* Slur */) {
-      throw new MusicError6(MusicErrorType6.Score, "Slurs not implemented for guitar tabs alone, staff is required!");
+      throw new MusicError5(MusicErrorType5.Score, "Slurs not implemented for guitar tabs alone, staff is required!");
     }
     this.startConnnectives.push(connectiveProps);
     this.doc.addConnectiveProps(connectiveProps);
@@ -2491,7 +2974,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
     var _a;
     if (line instanceof ObjStaff) {
       if (noteIndex < 0 || noteIndex >= this.notes.length) {
-        throw new MusicError6(MusicErrorType6.Score, "Invalid noteIndex: " + noteIndex);
+        throw new MusicError5(MusicErrorType5.Score, "Invalid noteIndex: " + noteIndex);
       }
       let obj = this.staffObjects.find((obj2) => obj2.staff === line);
       if (!obj || noteIndex < 0 || noteIndex >= obj.noteHeadRects.length) {
@@ -2539,7 +3022,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
         case "stemTip" /* StemTip */:
           return { x: anchorX, y: stemTip.anchorY + (stemDir === "up" /* Up */ ? -padding : padding) };
         default:
-          throw new MusicError6(MusicErrorType6.Score, "Invalid noteAnchor: " + noteAnchor);
+          throw new MusicError5(MusicErrorType5.Score, "Invalid noteAnchor: " + noteAnchor);
       }
     } else if (line instanceof ObjTab) {
       let fretNumber = (_a = this.tabObjects.find((obj) => obj.tab === line)) == null ? void 0 : _a.fretNumbers[noteIndex];
@@ -2689,7 +3172,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
       if (j >= 0) {
         tieNoteGroups = tieNoteGroups.slice(0, j);
       }
-      return Utils3.Math.sum(tieNoteGroups.map((ng) => ng.rhythmProps.ticks));
+      return utils_exports.Math.sum(tieNoteGroups.map((ng) => ng.rhythmProps.ticks));
     });
     return tiedTicks.length === 0 ? this.rhythmProps.ticks : Math.max(...tiedTicks);
   }
@@ -2728,7 +3211,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
         if (isTopNote && stemDir === "up" /* Up */) stemTipStaff = noteStaff;
         if (isBottomNote && stemDir === "down" /* Down */) stemTipStaff = noteStaff;
         if (isTopNote && stemDir === "down" /* Down */) stemBaseStaff = noteStaff;
-        let noteHeadRect = obj.noteHeadRects[noteIndex] = AnchoredRect9.createCentered(noteX, noteY, noteHeadWidth, noteHeadHeight);
+        let noteHeadRect = obj.noteHeadRects[noteIndex] = AnchoredRect.createCentered(noteX, noteY, noteHeadWidth, noteHeadHeight);
         noteStaff.addObject(noteHeadRect);
         if (accState.needAccidental(note)) {
           let acc = obj.accidentals[noteIndex] = new ObjAccidental(this, note.diatonicId, note.accidental, this.color);
@@ -2744,7 +3227,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
         for (let i = 0; i < dotCount; i++) {
           let dotX = noteHeadRect.right + DocumentSettings.NoteDotSpace * unitSize + dotWidth / 2 + i * dotWidth * 1.5;
           let dotY = noteY + this.getDotVerticalDisplacement(staff, note.diatonicId, stemDir) * unitSize;
-          let r = AnchoredRect9.createCentered(dotX, dotY, dotWidth, dotWidth);
+          let r = AnchoredRect.createCentered(dotX, dotY, dotWidth, dotWidth);
           obj.dotRects.push(r);
           noteStaff.addObject(r);
         }
@@ -2752,13 +3235,13 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
           if (stemDir === "up" /* Up */ && isBottomNote) {
             let dotX = noteX;
             let dotY = noteY + unitSize * (isNoteOnLine ? 3 : 2);
-            let r = AnchoredRect9.createCentered(dotX, dotY, dotWidth, dotWidth);
+            let r = AnchoredRect.createCentered(dotX, dotY, dotWidth, dotWidth);
             obj.dotRects.push(r);
             stemBaseStaff.addObject(r);
           } else if (stemDir === "down" /* Down */ && isTopNote) {
             let dotX = noteX;
             let dotY = noteY - unitSize * (isNoteOnLine ? 3 : 2);
-            let r = AnchoredRect9.createCentered(dotX, dotY, dotWidth, dotWidth);
+            let r = AnchoredRect.createCentered(dotX, dotY, dotWidth, dotWidth);
             obj.dotRects.push(r);
             stemBaseStaff.addObject(r);
           }
@@ -2771,8 +3254,8 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
       let stemTipY = stemDir === "up" /* Up */ ? topNoteY - stemHeight : bottomNoteY + stemHeight;
       let stemBaseY = stemDir === "up" /* Up */ ? bottomNoteY : topNoteY;
       if (hasStem) {
-        obj.stemTip = new AnchoredRect9(stemX, stemX, stemTipY, stemTipY);
-        obj.stemBase = new AnchoredRect9(stemX, stemX, stemBaseY, stemBaseY);
+        obj.stemTip = new AnchoredRect(stemX, stemX, stemTipY, stemTipY);
+        obj.stemBase = new AnchoredRect(stemX, stemX, stemBaseY, stemBaseY);
         stemTipStaff.addObject(obj.stemTip);
         stemBaseStaff.addObject(obj.stemBase);
       }
@@ -2781,7 +3264,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
         let flagHeight = flagCount === 0 ? 0 : DocumentSettings.FlagHeight * unitSize;
         for (let i = 0; i < flagCount; i++) {
           let flagAddY = i * unitSize * DocumentSettings.FlagSeparation;
-          let r = obj.flagRects[i] = stemDir === "up" /* Up */ ? new AnchoredRect9(stemX, stemX + flagWidth, stemTipY + flagAddY, stemTipY + flagHeight + flagAddY) : new AnchoredRect9(stemX, stemX + flagWidth, stemTipY - flagHeight - flagAddY, stemTipY - flagAddY);
+          let r = obj.flagRects[i] = stemDir === "up" /* Up */ ? new AnchoredRect(stemX, stemX + flagWidth, stemTipY + flagAddY, stemTipY + flagHeight + flagAddY) : new AnchoredRect(stemX, stemX + flagWidth, stemTipY - flagHeight - flagAddY, stemTipY - flagAddY);
           stemTipStaff.addObject(r);
         }
       }
@@ -2794,12 +3277,13 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
         return;
       }
       let obj = new ObjTabNoteGroup(tab, this);
+      const bgcolor = DocumentColor.Background;
+      const color = DocumentColor.Tab_Note;
       this.notes.forEach((note, noteIndex) => {
         let stringNumber = this.runningStringNumbers[noteIndex];
-        if (Guard2.isIntegerBetween(stringNumber, 1, 6)) {
+        if (guard_exports.isIntegerBetween(stringNumber, 1, 6)) {
           let fretId = note.chromaticId - tab.getTuningStrings()[stringNumber - 1].chromaticId;
-          let color = fretId < 0 ? "red" : "black";
-          let fretNumber = new ObjText(this, { text: String(fretId), color, bgcolor: "white" }, 0.5, 0.5);
+          let fretNumber = new ObjText(this, { text: String(fretId), color, bgcolor }, 0.5, 0.5);
           fretNumber.layout(ctx);
           fretNumber.setAnchor(this.col.getRect().anchorX, tab.getStringY(stringNumber - 1));
           obj.fretNumbers.push(fretNumber);
@@ -2818,7 +3302,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
     } else if (this.tabObjects.length > 0 && this.tabObjects[0].fretNumbers.length > 0) {
       this.rect = this.tabObjects[0].fretNumbers[0].getRect().clone();
     } else {
-      this.rect = new AnchoredRect9();
+      this.rect = new AnchoredRect();
       return;
     }
     this.staffObjects.forEach((obj) => this.rect.expandInPlace(obj.getRect()));
@@ -2915,8 +3399,7 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
 };
 
 // src/score/engine/obj-rhythm-column.ts
-import { MusicError as MusicError7, MusicErrorType as MusicErrorType7 } from "@tspro/web-music-score/core";
-import { IndexArray, UniMap as UniMap2, TriMap, AnchoredRect as AnchoredRect10 } from "@tspro/ts-utils-lib";
+import { MusicError as MusicError6, MusicErrorType as MusicErrorType6 } from "@tspro/web-music-score/core";
 var ObjRhythmColumn = class extends MusicObject {
   constructor(measure, positionTicks) {
     super(measure);
@@ -2926,8 +3409,8 @@ var ObjRhythmColumn = class extends MusicObject {
     __publicField(this, "lyricsObject", new TriMap());
     __publicField(this, "minDiatonicId");
     __publicField(this, "maxDiatonicId");
-    __publicField(this, "staffMinDiatonicId", new UniMap2());
-    __publicField(this, "staffMaxDiatonicId", new UniMap2());
+    __publicField(this, "staffMinDiatonicId", new UniMap());
+    __publicField(this, "staffMaxDiatonicId", new UniMap());
     __publicField(this, "arpeggioDir");
     __publicField(this, "arpeggios", []);
     __publicField(this, "playerProps");
@@ -2952,7 +3435,7 @@ var ObjRhythmColumn = class extends MusicObject {
     if (colId >= 0 && colId < this.measure.getColumnCount()) {
       return this.measure.getColumn(colId + 1);
     } else {
-      throw new MusicError7(MusicErrorType7.Score, "Cannot get next column in measure because current column's id in mesure is invalid.");
+      throw new MusicError6(MusicErrorType6.Score, "Cannot get next column in measure because current column's id in mesure is invalid.");
     }
   }
   /**
@@ -3142,7 +3625,7 @@ var ObjRhythmColumn = class extends MusicObject {
       return;
     }
     let { row } = this;
-    this.rect = new AnchoredRect10();
+    this.rect = new AnchoredRect();
     this.requestRectUpdate();
     let leftw = 0;
     let rightw = 0;
@@ -3259,6 +3742,7 @@ var ObjRhythmColumn = class extends MusicObject {
     this.rect.offsetInPlace(dx, dy);
   }
   draw(ctx) {
+    ctx.color(DocumentColor.Staff_Frame);
     this.row.getStaves().forEach((staff) => {
       let minDiatonicId = this.staffMinDiatonicId.get(staff);
       let maxDiatonicId = this.staffMaxDiatonicId.get(staff);
@@ -3274,35 +3758,29 @@ var ObjRhythmColumn = class extends MusicObject {
   }
 };
 
-// src/score/engine/extension.ts
-import { MusicError as MusicError8, MusicErrorType as MusicErrorType8 } from "@tspro/web-music-score/core";
-
-// src/score/engine/element-data.ts
-import { Guard as Guard3, Utils as Utils4 } from "@tspro/ts-utils-lib";
-
 // src/score/engine/obj-special-text.ts
-import { AnchoredRect as AnchoredRect11 } from "@tspro/ts-utils-lib";
 var _ObjSpecialText = class _ObjSpecialText extends MusicObject {
-  constructor(parent, text) {
+  constructor(parent, text, color = "black") {
     super(parent);
     this.text = text;
+    this.color = color;
     __publicField(this, "components", []);
     __publicField(this, "mi");
     switch (this.text) {
       case _ObjSpecialText.Coda:
         this.components = [
-          new ObjText(this, { text: "\u{1D10C}", scale: 1.7 }, 0.5, 0.3),
-          new ObjText(this, " Coda", 0, 1)
+          new ObjText(this, { text: "\u{1D10C}", scale: 1.7, color }, 0.5, 0.3),
+          new ObjText(this, { text: " Coda", color }, 0, 1)
         ];
         break;
       case _ObjSpecialText.toCoda:
         this.components = [
-          new ObjText(this, "toCoda ", 1, 1),
-          new ObjText(this, { text: "\u{1D10C}", scale: 1.7 }, 0.5, 0.3)
+          new ObjText(this, { text: "toCoda ", color }, 1, 1),
+          new ObjText(this, { text: "\u{1D10C}", scale: 1.7, color }, 0.5, 0.3)
         ];
         break;
       case _ObjSpecialText.Segno:
-        this.components = [new ObjText(this, { text: "\u{1D10B}", scale: 1.1 }, 0.5, 1)];
+        this.components = [new ObjText(this, { text: "\u{1D10B}", scale: 1.1, color }, 0.5, 1)];
         break;
       default:
         this.components = [];
@@ -3328,7 +3806,7 @@ var _ObjSpecialText = class _ObjSpecialText extends MusicObject {
         codaText.layout(ctx);
         codaSym.setAnchorY(codaText.getRect().centerY);
         codaText.setLeft(codaSym.getRect().right);
-        this.rect = new AnchoredRect11(
+        this.rect = new AnchoredRect(
           codaSym.getRect().left,
           codaSym.getRect().anchorX,
           codaText.getRect().right,
@@ -3345,7 +3823,7 @@ var _ObjSpecialText = class _ObjSpecialText extends MusicObject {
         codaSym.layout(ctx);
         codaSym.setAnchorY(toCodaText.getRect().centerY);
         toCodaText.setRight(codaSym.getRect().left);
-        this.rect = new AnchoredRect11(
+        this.rect = new AnchoredRect(
           toCodaText.getRect().left,
           codaSym.getRect().anchorX,
           codaSym.getRect().right,
@@ -3377,6 +3855,84 @@ __publicField(_ObjSpecialText, "Coda", "Coda \u{1D10C}");
 __publicField(_ObjSpecialText, "Segno", "\u{1D10B}");
 var ObjSpecialText = _ObjSpecialText;
 
+// src/score/engine/extension.ts
+function getTextContent(obj) {
+  if (obj instanceof ObjText || obj instanceof ObjSpecialText)
+    return obj.getText();
+  if (obj instanceof ObjMeasure)
+    return "[measure]";
+  return "";
+}
+var ExtensionRange = class {
+  constructor(startColumn) {
+    this.startColumn = startColumn;
+    __publicField(this, "columnRange");
+    __publicField(this, "stopObject");
+    this.columnRange = [startColumn];
+  }
+  get endColumn() {
+    return this.columnRange[this.columnRange.length - 1];
+  }
+  addColumn(col) {
+    if (this.endColumn !== col) this.columnRange.push(col);
+  }
+  setStopObject(obj) {
+    this.stopObject = obj;
+  }
+};
+var _Extension = class _Extension extends MusicObjectLink {
+  constructor(headObj, startColumn, length, visible, lineStyle, linePos) {
+    super(headObj.musicObj);
+    this.headObj = headObj;
+    __publicField(this, "length");
+    __publicField(this, "visible");
+    __publicField(this, "lineStyle");
+    __publicField(this, "linePos");
+    __publicField(this, "startColumn");
+    this.length = length + 1;
+    this.visible = visible;
+    this.lineStyle = lineStyle;
+    this.linePos = linePos;
+    this.startColumn = startColumn;
+  }
+  isVisible() {
+    return this.visible;
+  }
+  getLineStyle() {
+    return this.lineStyle;
+  }
+  getLinePos() {
+    return this.linePos;
+  }
+  whatStopped(col) {
+    const m = col.measure;
+    const cols = m.getColumns();
+    const stoppingCol = col.getAnchoredLayoutObjects().filter((obj) => obj !== this.headObj && obj.layoutGroupId === this.headObj.layoutGroupId).map((obj) => obj.musicObj).filter((obj) => obj instanceof ObjText || obj instanceof ObjSpecialText)[0];
+    return stoppingCol ? stoppingCol : col === cols[cols.length - 1] && m.hasEndSection() || m.hasEndSong() || _Extension.StopNavigations.some((nav) => m.hasNavigation(nav)) ? m.getBarLineRight() : void 0;
+  }
+  getRange() {
+    let { startColumn, length } = this;
+    let curColumn = startColumn;
+    let range = new ExtensionRange(curColumn);
+    let ticksLeft = length;
+    while (true) {
+      if (ticksLeft <= 0) return range;
+      const stopObject = this.whatStopped(curColumn);
+      if (stopObject !== void 0) {
+        range.setStopObject(stopObject);
+        return range;
+      }
+      ticksLeft -= curColumn.getTicksToNextColumn();
+      curColumn = curColumn.getNextColumn();
+      if (!curColumn) return range;
+      if (ticksLeft > 0)
+        range.addColumn(curColumn);
+    }
+  }
+};
+__publicField(_Extension, "StopNavigations", ["endRepeat" /* EndRepeat */, "ending" /* Ending */]);
+var Extension = _Extension;
+
 // src/score/engine/element-data.ts
 function getNavigationString(navigation) {
   switch (navigation) {
@@ -3400,140 +3956,24 @@ function getNavigationString(navigation) {
       return navigation[0].toUpperCase() + navigation.substring(1);
   }
 }
-function isDynamicsText(text) {
-  return Guard3.isEnumValue(text, DynamicsAnnotation);
-}
 function getDynamicsVolume(text) {
   if (/^(p+|f+|m|mp|mf)$/.test(text)) {
-    let volume = 0.5 - Utils4.Str.charCount(text, "p") * 0.1 + Utils4.Str.charCount(text, "f") * 0.1;
-    return Utils4.Math.clamp(volume, 0, 1);
+    let volume = 0.5 - utils_exports.Str.charCount(text, "p") * 0.1 + utils_exports.Str.charCount(text, "f") * 0.1;
+    return utils_exports.Math.clamp(volume, 0, 1);
   } else {
     return void 0;
   }
 }
-function isTempoText(text) {
-  return Guard3.isEnumValue(text, TempoAnnotation);
-}
 function getAnnotation(text) {
-  if (Guard3.isEnumValue(text, DynamicsAnnotation)) {
+  if (guard_exports.isEnumValue(text, DynamicsAnnotation)) {
     return "dynamics" /* Dynamics */;
-  } else if (Guard3.isEnumValue(text, TempoAnnotation)) {
+  } else if (guard_exports.isEnumValue(text, TempoAnnotation)) {
     return "tempo" /* Tempo */;
   } else {
     return void 0;
   }
 }
 
-// src/score/engine/extension.ts
-function getTextAnchorY(linePos) {
-  switch (linePos) {
-    case "bottom":
-      return 0.8;
-    case "middle":
-      return 0.5;
-  }
-}
-function getContext(elementText) {
-  if (isDynamicsText(elementText)) {
-    return 2 /* Volume */;
-  } else if (isTempoText(elementText)) {
-    return 1 /* Tempo */;
-  } else {
-    return 0 /* Undefined */;
-  }
-}
-var Extension = class extends MusicObjectLink {
-  constructor(head, startColumn, length, visible, lineStyle, linePos) {
-    super(head);
-    __publicField(this, "length");
-    __publicField(this, "visible");
-    __publicField(this, "lineStyle");
-    __publicField(this, "linePos");
-    __publicField(this, "startColumn");
-    __publicField(this, "context");
-    this.length = length;
-    this.visible = visible;
-    this.lineStyle = lineStyle;
-    this.linePos = linePos;
-    this.startColumn = startColumn;
-    this.context = head instanceof ObjText ? getContext(head.getText()) : 0 /* Undefined */;
-    if (head instanceof ObjText) {
-      head.updateAnchorY(getTextAnchorY(linePos));
-    } else {
-      throw new MusicError8(MusicErrorType8.Score, "Update anchor's y-coordinate is only implemented for text objects.");
-    }
-  }
-  isVisible() {
-    return this.visible;
-  }
-  getLineStyle() {
-    return this.lineStyle;
-  }
-  getLinePos() {
-    return this.linePos;
-  }
-  getSpanBreakText(col, context) {
-    if (col === col.measure.getColumn(0)) {
-      let prevMeasure = col.measure.getPrevMeasure();
-      if (prevMeasure) {
-        if (prevMeasure.hasEndSection() || prevMeasure.hasEndSong()) {
-          return "section-break";
-        }
-        let elemArr = ["endRepeat" /* EndRepeat */, "ending" /* Ending */];
-        for (let i = 0; i < elemArr.length; i++) {
-          if (prevMeasure.hasNavigation(elemArr[i])) {
-            return "section-break";
-          }
-        }
-      }
-    }
-    if (context === 1 /* Tempo */) {
-      let objArr = col.getAnchoredLayoutObjects();
-      for (let i = 0; i < objArr.length; i++) {
-        let text = objArr[i].getTextContent();
-        if (text && isTempoText(text)) {
-          return text;
-        }
-      }
-    } else if (context === 2 /* Volume */) {
-      let objArr = col.getAnchoredLayoutObjects();
-      for (let i = 0; i < objArr.length; i++) {
-        let text = objArr[i].getTextContent();
-        if (text && isDynamicsText(text)) {
-          return text;
-        }
-      }
-    }
-    return void 0;
-  }
-  getExtensionRangeInfo() {
-    let { startColumn, length: extensionLength, context } = this;
-    let columnRange = [startColumn];
-    if (extensionLength <= 0) {
-      return { startColumn, endColumn: startColumn, columnRange, extensionBreakText: void 0 };
-    }
-    let ticksLeft = extensionLength;
-    let endColumn = startColumn;
-    while (true) {
-      let nextColumn = endColumn.getNextColumn();
-      if (!nextColumn) {
-        return { startColumn, endColumn, columnRange, extensionBreakText: void 0 };
-      }
-      let extensionBreakText = this.getSpanBreakText(nextColumn, context);
-      if (extensionBreakText !== void 0) {
-        return { startColumn, endColumn, columnRange, extensionBreakText };
-      }
-      ticksLeft -= endColumn.getTicksToNextColumn();
-      if (ticksLeft <= 0) {
-        return { startColumn, endColumn, columnRange, extensionBreakText: void 0 };
-      } else {
-        endColumn = nextColumn;
-        columnRange.push(endColumn);
-      }
-    }
-  }
-};
-
 // src/score/engine/player.ts
 var AccelerandoSpeedMul = 2;
 var RitardandoSpeedDiv = 2;
@@ -3573,7 +4013,7 @@ var PlayerColumnProps = class {
     return this.speed;
   }
   getTempo() {
-    let speed = Utils5.Math.clamp(this.getSpeed(), 0.1, 10);
+    let speed = utils_exports.Math.clamp(this.getSpeed(), 0.1, 10);
     return alterTempoSpeed(this.measure.getTempo(), speed);
   }
   setVolume(volume) {
@@ -3598,7 +4038,7 @@ var PlayerColumnProps = class {
       if (symbolsTicks.length === 0) {
         return 0;
       } else {
-        return Utils5.Math.sum(symbolsTicks) / symbolsTicks.length;
+        return utils_exports.Math.sum(symbolsTicks) / symbolsTicks.length;
       }
     }
   }
@@ -3721,8 +4161,8 @@ var Player = class _Player {
     }
     let curSpeed = 1;
     let curVolume = getDefaultVolume();
-    let speedMap = new UniMap3();
-    let volumeMap = new UniMap3();
+    let speedMap = new UniMap();
+    let volumeMap = new UniMap();
     const pushSpeed = (col, speed) => speedMap.getOrCreate(col, []).push(speed);
     const pushVolume = (col, volume) => volumeMap.getOrCreate(col, []).push(volume);
     this.playerColumnSequence.forEach((col) => {
@@ -3730,8 +4170,7 @@ var Player = class _Player {
         return;
       }
       col.getAnchoredLayoutObjects().forEach((layoutObj) => {
-        var _a;
-        let text = (_a = layoutObj.getTextContent()) != null ? _a : "";
+        const text = getTextContent(layoutObj.musicObj);
         let vol;
         if (text === "a tempo" /* a_tempo */) {
           curSpeed = 1;
@@ -3739,14 +4178,15 @@ var Player = class _Player {
           curVolume = vol;
         } else if (layoutObj.musicObj.getLink() instanceof Extension) {
           let extension = layoutObj.musicObj.getLink();
-          let { columnRange, extensionBreakText } = extension.getExtensionRangeInfo();
-          let totalTicks = Utils5.Math.sum(columnRange.map((c) => c.getTicksToNextColumn()));
+          const range = extension.getRange();
+          const stopText = range.stopObject ? getTextContent(range.stopObject) : "";
+          let totalTicks = utils_exports.Math.sum(range.columnRange.map((c) => c.getTicksToNextColumn()));
           switch (text) {
             case "accel." /* accel */: {
               let startSpeed = curSpeed;
               let endSpeed = startSpeed * AccelerandoSpeedMul;
               let accuTicks = 0;
-              columnRange.forEach((c) => {
+              range.columnRange.forEach((c) => {
                 accuTicks += c.getTicksToNextColumn();
                 pushSpeed(c, startSpeed + (endSpeed - startSpeed) * accuTicks / totalTicks);
               });
@@ -3756,7 +4196,7 @@ var Player = class _Player {
               let startSpeed = curSpeed;
               let endSpeed = startSpeed / RitardandoSpeedDiv;
               let accuTicks = 0;
-              columnRange.forEach((c) => {
+              range.columnRange.forEach((c) => {
                 accuTicks += c.getTicksToNextColumn();
                 pushSpeed(c, startSpeed + (endSpeed - startSpeed) * accuTicks / totalTicks);
               });
@@ -3765,11 +4205,11 @@ var Player = class _Player {
             case "cresc." /* cresc */: {
               let startVol = curVolume;
               let endVol = startVol + CrescendoVolumeAdd;
-              if (extensionBreakText && (vol = getDynamicsVolume(extensionBreakText)) !== void 0 && vol > startVol) {
+              if (range.stopObject && (vol = getDynamicsVolume(stopText)) !== void 0 && vol > startVol) {
                 endVol = vol;
               }
               let accuTicks = 0;
-              columnRange.forEach((c) => {
+              range.columnRange.forEach((c) => {
                 accuTicks += c.getTicksToNextColumn();
                 pushVolume(c, startVol + (endVol - startVol) * accuTicks / totalTicks);
               });
@@ -3779,11 +4219,11 @@ var Player = class _Player {
             case "dim." /* dim */: {
               let startVol = curVolume;
               let endVol = startVol - DiminuendoVolumeSub;
-              if (extensionBreakText && (vol = getDynamicsVolume(extensionBreakText)) !== void 0 && vol < startVol) {
+              if (range.stopObject && (vol = getDynamicsVolume(stopText)) !== void 0 && vol < startVol) {
                 endVol = vol;
               }
               let accuTicks = 0;
-              columnRange.forEach((c) => {
+              range.columnRange.forEach((c) => {
                 accuTicks += c.getTicksToNextColumn();
                 pushVolume(c, startVol + (endVol - startVol) * accuTicks / totalTicks);
               });
@@ -3794,11 +4234,11 @@ var Player = class _Player {
       });
       let speedArr = speedMap.getOrDefault(col, []);
       if (speedArr.length > 0) {
-        curSpeed = Utils5.Math.sum(speedArr) / speedArr.length;
+        curSpeed = utils_exports.Math.sum(speedArr) / speedArr.length;
       }
       let volumeArr = volumeMap.getOrDefault(col, []);
       if (volumeArr.length > 0) {
-        curVolume = Utils5.Math.sum(volumeArr) / volumeArr.length;
+        curVolume = utils_exports.Math.sum(volumeArr) / volumeArr.length;
       }
       col.getPlayerProps().setSpeed(curSpeed);
       col.getPlayerProps().setVolume(curVolume);
@@ -3918,17 +4358,17 @@ var Player = class _Player {
     let measure = col.measure;
     let x = col.getRect().anchorX;
     let { top, height } = measure.row.getRect();
-    return new Rect2(x, top, 0, height);
+    return new Rect(x, top, 0, height);
   }
 };
 
 // src/score/engine/obj-bar-line.ts
-import { AnchoredRect as AnchoredRect13, UniMap as UniMap4 } from "@tspro/ts-utils-lib";
 var ObjStaffBarLine = class extends MusicObject {
-  constructor(barLine, line) {
+  constructor(barLine, line, rowGroup) {
     super(line);
     this.barLine = barLine;
     this.line = line;
+    this.rowGroup = rowGroup;
     __publicField(this, "vlines", []);
     __publicField(this, "dots", []);
     __publicField(this, "mi");
@@ -3942,12 +4382,12 @@ var ObjStaffBarLine = class extends MusicObject {
     return this.getRect().contains(x, y) ? [this] : [];
   }
   updateRect() {
-    this.rect = new AnchoredRect13(0, 0, this.line.getTopLineY(), this.line.getBottomLineY());
+    this.rect = new AnchoredRect(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))
+      (l) => this.rect.expandInPlace(new AnchoredRect(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))
+      (d) => this.rect.expandInPlace(new AnchoredRect(d.x - d.r, d.x + d.r, d.y - d.r, d.y + d.r))
     );
   }
   offset(dx, dy) {
@@ -3964,9 +4404,15 @@ var ObjBarLine = class extends MusicObject {
     super(measure);
     this.measure = measure;
     __publicField(this, "notationLineObjects", []);
-    __publicField(this, "notationLineObjectsByGrp", new UniMap4());
+    __publicField(this, "notationLineObjectsByGrp", new UniMap());
     __publicField(this, "barLineType", 0 /* None */);
   }
+  get doc() {
+    return this.measure.doc;
+  }
+  get row() {
+    return this.measure.row;
+  }
   pick(x, y) {
     if (!this.getRect().contains(x, y)) {
       return [];
@@ -3994,7 +4440,7 @@ var ObjBarLine = class extends MusicObject {
     this.notationLineObjectsByGrp.clear();
     row.getRowGroups().forEach((grp) => {
       grp.lines.forEach((line) => {
-        let obj = new ObjStaffBarLine(this, line);
+        let obj = new ObjStaffBarLine(this, line, grp);
         this.notationLineObjects.push(obj);
         this.notationLineObjectsByGrp.getOrCreate(grp, []).push(obj);
         let lineCenterY;
@@ -4058,7 +4504,7 @@ var ObjBarLine = class extends MusicObject {
         this.rect.expandInPlace(this.notationLineObjects[i].getRect());
       }
     } else {
-      this.rect = new AnchoredRect13();
+      this.rect = new AnchoredRect();
     }
   }
   offset(dx, dy) {
@@ -4069,16 +4515,10 @@ var ObjBarLine = class extends MusicObject {
     if (this.barLineType === 0 /* None */)
       return;
     ctx.drawDebugRect(this.getRect());
-    ctx.color("black");
-    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));
-        }
-      });
-    }
+    this.notationLineObjects.forEach((o) => {
+      o.vlines.forEach((l) => o.line.drawVerticalLine(ctx, l.left, l.width));
+      o.dots.forEach((d) => ctx.fillCircle(d.x, d.y, d.r));
+    });
   }
 };
 var ObjBarLineLeft = class extends ObjBarLine {
@@ -4143,25 +4583,25 @@ var ObjBarLineRight = class extends ObjBarLine {
 };
 
 // src/score/engine/obj-ending.ts
-import { AnchoredRect as AnchoredRect14, Guard as Guard4 } from "@tspro/ts-utils-lib";
-import { MusicError as MusicError9, MusicErrorType as MusicErrorType9 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError7, MusicErrorType as MusicErrorType7 } from "@tspro/web-music-score/core";
 var ObjEnding = class extends MusicObject {
-  constructor(measure, passages) {
+  constructor(measure, color, passages) {
     super(measure);
     this.measure = measure;
+    this.color = color;
     this.passages = passages;
     __publicField(this, "endingText");
     __publicField(this, "shapeRects", []);
     __publicField(this, "mi");
     this.mi = new MEnding(this);
-    if (!Guard4.isIntegerGte(passages.length, 1)) {
-      throw new MusicError9(MusicErrorType9.Score, "Passages is empty.");
-    } else if (!this.passages.every((p) => Guard4.isIntegerGte(p, 1))) {
-      throw new MusicError9(MusicErrorType9.Score, "Invalid passages: " + this.passages);
+    if (!guard_exports.isIntegerGte(passages.length, 1)) {
+      throw new MusicError7(MusicErrorType7.Score, "Passages is empty.");
+    } else if (!this.passages.every((p) => guard_exports.isIntegerGte(p, 1))) {
+      throw new MusicError7(MusicErrorType7.Score, "Invalid passages: " + this.passages);
     }
     this.passages.sort((a, b) => a - b);
-    let text = this.passages.map((p) => p + ".").join("");
-    this.endingText = new ObjText(this, text, 0, 1);
+    const text = this.passages.map((p) => p + ".").join("");
+    this.endingText = new ObjText(this, { text, color }, 0, 1);
   }
   getMusicInterface() {
     return this.mi;
@@ -4184,7 +4624,7 @@ var ObjEnding = class extends MusicObject {
     return this.rect.contains(x, y) ? [this] : [];
   }
   layout(ctx) {
-    this.rect = new AnchoredRect14();
+    this.rect = new AnchoredRect();
     this.shapeRects = [this.rect.clone()];
   }
   layoutFitToMeasure(ctx) {
@@ -4194,13 +4634,13 @@ var ObjEnding = class extends MusicObject {
     let textRect = this.endingText.getRect();
     let measureContent = measure.getColumnsContentRect();
     let endingHeight = textRect.height;
-    this.rect = new AnchoredRect14(measureContent.left + unitSize, measureContent.right - unitSize, -endingHeight, 0);
+    this.rect = new AnchoredRect(measureContent.left + unitSize, measureContent.right - unitSize, -endingHeight, 0);
     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),
-      new AnchoredRect14(this.rect.right - 1, this.rect.right, this.rect.top, this.rect.bottom),
+      new AnchoredRect(this.rect.left, this.rect.left + 1, this.rect.top, this.rect.bottom),
+      new AnchoredRect(this.rect.left, this.rect.right, this.rect.top, this.rect.top + 1),
+      new AnchoredRect(this.rect.right - 1, this.rect.right, this.rect.top, this.rect.bottom),
       this.endingText.getRect().clone()
     ];
   }
@@ -4212,7 +4652,7 @@ var ObjEnding = class extends MusicObject {
   draw(ctx) {
     let { rect } = this;
     ctx.drawDebugRect(this.rect);
-    ctx.color("black").lineWidth(1);
+    ctx.color(this.color).lineWidth(1);
     ctx.beginPath();
     ctx.moveTo(rect.left, rect.bottom);
     ctx.lineTo(rect.left, rect.top);
@@ -4226,9 +4666,8 @@ var ObjEnding = class extends MusicObject {
 };
 
 // src/score/engine/obj-beam-group.ts
-import { AnchoredRect as AnchoredRect15, Utils as Utils6 } from "@tspro/ts-utils-lib";
 import { NoteLength as NoteLength5, Tuplet as Tuplet3, NoteLengthProps as NoteLengthProps4 } from "@tspro/web-music-score/theory";
-import { MusicError as MusicError10, MusicErrorType as MusicErrorType10 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError8, MusicErrorType as MusicErrorType8 } from "@tspro/web-music-score/core";
 var adjustBeamAngle = (dx, dy) => {
   let T = DocumentSettings.BeamAngleFactor;
   if (!Number.isFinite(T) || T === 0) {
@@ -4256,7 +4695,7 @@ var BeamPoint = class {
     this.beamGroup.requestRectUpdate();
   }
   getRect() {
-    return new AnchoredRect15(this.x, this.x, this.x, this.y - this.topBeamsHeight, this.y, this.y + this.bottomBeamsHeight);
+    return new AnchoredRect(this.x, this.x, this.x, this.y - this.topBeamsHeight, this.y, this.y + this.bottomBeamsHeight);
   }
 };
 var ObjStaffBeamGroup = class extends MusicObject {
@@ -4313,9 +4752,9 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
     this.mi = new MBeamGroup(this);
     let beamGroupName = tupletRatio ? "Tuplet" : "BeamGroup";
     if (!symbols.every((s) => s.measure === symbols[0].measure)) {
-      throw new MusicError10(MusicErrorType10.Score, `All ${beamGroupName} symbols are not in same measure.`);
+      throw new MusicError8(MusicErrorType8.Score, `All ${beamGroupName} symbols are not in same measure.`);
     } else if (symbols.length < 2) {
-      throw new MusicError10(MusicErrorType10.Score, `${beamGroupName} needs minimum 2 symbols, but ${symbols.length} given.`);
+      throw new MusicError8(MusicErrorType8.Score, `${beamGroupName} needs minimum 2 symbols, but ${symbols.length} given.`);
     }
     if (tupletRatio !== void 0) {
       let isGroup = symbols.length < 3 || symbols.some((s) => !(s instanceof ObjNoteGroup)) || symbols.some((s) => s.rhythmProps.flagCount !== symbols[0].rhythmProps.flagCount);
@@ -4335,7 +4774,7 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
       symbols.forEach((s) => s.setBeamGroup(this));
       symbols[0].measure.addBeamGroup(this);
     } else {
-      throw new MusicError10(MusicErrorType10.Score, `Cannot add ${beamGroupName} because some symbol already has one.`);
+      throw new MusicError8(MusicErrorType8.Score, `Cannot add ${beamGroupName} because some symbol already has one.`);
     }
     if (this.type === 0 /* RegularBeam */) {
       this.symbols.filter((sym) => sym instanceof ObjNoteGroup).some((sym, i) => {
@@ -4350,7 +4789,7 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
       if (this.type === 0 /* RegularBeam */) {
         throw new InvalidBeamGroup(this, "Beam symbols have different voiceId.");
       } else {
-        throw new MusicError10(MusicErrorType10.Score, `Tuplet symbols have different voiceId.`);
+        throw new MusicError8(MusicErrorType8.Score, `Tuplet symbols have different voiceId.`);
       }
     }
     symbols[0].row.getStaves().forEach((staff) => {
@@ -4534,7 +4973,7 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
       symbolY.forEach((symY, i) => {
         let symX = symbolX[i];
         if (symX !== void 0 && symY !== void 0) {
-          let beamY = Utils6.Math.interpolateY(leftX, leftY, rightX, rightY, symX);
+          let beamY = utils_exports.Math.interpolateY(leftX, leftY, rightX, rightY, symX);
           let raiseY = symY - beamY;
           if (stemDir === "up" /* Up */ && raiseY < 0) {
             raiseBeamY = Math.min(raiseBeamY, raiseY);
@@ -4549,8 +4988,8 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
       let obj = new ObjStaffBeamGroup(mainStaff, this);
       if (type === 2 /* TupletGroup */) {
         let ef = unitSize / (rightX - leftX);
-        let l = Utils6.Math.interpolateCoord(leftX, leftY + groupLineDy, rightX, rightY + groupLineDy, -ef);
-        let r = Utils6.Math.interpolateCoord(leftX, leftY + groupLineDy, rightX, rightY + groupLineDy, 1 + ef);
+        let l = utils_exports.Math.interpolateCoord(leftX, leftY + groupLineDy, rightX, rightY + groupLineDy, -ef);
+        let r = utils_exports.Math.interpolateCoord(leftX, leftY + groupLineDy, rightX, rightY + groupLineDy, 1 + ef);
         obj.points.push(new BeamPoint(leftStaff, this, leftSymbol, l.x, l.y));
         obj.points.push(new BeamPoint(rightStaff, this, rightSymbol, r.x, r.y));
         obj.tupletNumberOffsetY = 0;
@@ -4599,7 +5038,7 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
   }
   updateRect() {
     if (this.staffObjects.length === 0) {
-      this.rect = new AnchoredRect15();
+      this.rect = new AnchoredRect();
     } else {
       this.staffObjects.forEach((obj) => obj.updateRect());
       this.rect = this.staffObjects[0].getRect().clone();
@@ -4616,7 +5055,7 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
         obj.points.forEach((pt) => {
           if (pt.symbol instanceof ObjNoteGroup) {
             if (pt !== left && pt !== right) {
-              pt.y = Utils6.Math.interpolateY(left.x, left.y, right.x, right.y, pt.x);
+              pt.y = utils_exports.Math.interpolateY(left.x, left.y, right.x, right.y, pt.x);
             }
             pt.symbol.setStemTipY(pt.staff, pt.y);
           }
@@ -4642,8 +5081,8 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
         let { x: rx, y: ry } = obj.points[obj.points.length - 1];
         if (obj.tupletNumber) {
           let tf = obj.tupletNumber.getRect().width / (rx - lx) * 1.2;
-          let lc = Utils6.Math.interpolateCoord(lx, ly, rx, ry, 0.5 - tf / 2);
-          let rc = Utils6.Math.interpolateCoord(lx, ly, rx, ry, 0.5 + tf / 2);
+          let lc = utils_exports.Math.interpolateCoord(lx, ly, rx, ry, 0.5 - tf / 2);
+          let rc = utils_exports.Math.interpolateCoord(lx, ly, rx, ry, 0.5 + tf / 2);
           ctx.strokeLine(lx, ly, lc.x, lc.y);
           ctx.strokeLine(rc.x, rc.y, rx, ry);
         } else {
@@ -4757,12 +5196,11 @@ var ObjBeamGroup = class _ObjBeamGroup extends MusicObject {
 };
 
 // src/score/engine/obj-fermata.ts
-import { AnchoredRect as AnchoredRect16 } from "@tspro/ts-utils-lib";
 var ObjFermata = class extends MusicObject {
-  constructor(parent, pos) {
+  constructor(parent, pos, color) {
     super(parent);
     this.pos = pos;
-    __publicField(this, "color", "black");
+    this.color = color;
     __publicField(this, "mi");
     this.mi = new MFermata(this);
   }
@@ -4785,7 +5223,7 @@ var ObjFermata = class extends MusicObject {
     let { unitSize } = ctx;
     let width = unitSize * 4;
     let height = unitSize * 3;
-    this.rect = new AnchoredRect16(-width / 2, width / 2, -height, 0);
+    this.rect = new AnchoredRect(-width / 2, width / 2, -height, 0);
   }
   offset(dx, dy) {
     this.rect.offsetInPlace(dx, dy);
@@ -4800,7 +5238,7 @@ var ObjFermata = class extends MusicObject {
     let bottom = (upsideDown ? this.rect.top : this.rect.bottom) + dy;
     let height = bottom - top;
     ctx.drawDebugRect(this.rect);
-    ctx.color("black").lineWidth(1);
+    ctx.color(this.color).lineWidth(1);
     ctx.beginPath();
     ctx.moveTo(left, bottom);
     ctx.bezierCurveTo(left, top, right, top, right, bottom);
@@ -4813,15 +5251,19 @@ var ObjFermata = class extends MusicObject {
 };
 
 // src/score/engine/obj-extension-line.ts
-import { AnchoredRect as AnchoredRect17 } from "@tspro/ts-utils-lib";
+function isExtensionStartObject(obj) {
+  return obj instanceof ObjText || obj instanceof ObjSpecialText;
+}
+function isExtensionStopObject(obj) {
+  return obj instanceof ObjBarLineRight || obj instanceof ObjText || obj instanceof ObjSpecialText;
+}
 var ObjExtensionLine = class extends MusicObject {
-  constructor(measure, line, extension, leftObj, rightObj) {
+  constructor(measure, line, extension, cols) {
     super(measure);
     this.measure = measure;
     this.line = line;
     this.extension = extension;
-    this.leftObj = leftObj;
-    this.rightObj = rightObj;
+    this.cols = cols;
     __publicField(this, "mi");
     extension.addTail(this);
     this.mi = new MExtensionLine(this);
@@ -4832,52 +5274,61 @@ var ObjExtensionLine = class extends MusicObject {
   getMusicInterface() {
     return this.mi;
   }
-  getLineLeft() {
-    if (this.leftObj instanceof ObjBarLineLeft) {
-      return this.leftObj.getRect().anchorX;
-    } else {
-      return this.leftObj.getRect().right;
-    }
-  }
-  getLineRight() {
-    if (this.rightObj instanceof ObjRhythmColumn) {
-      let col = this.rightObj;
-      let nextCol = col.getNextColumn();
-      if (nextCol && nextCol.measure === col.measure) {
-        return (col.getRect().right + nextCol.getRect().left) / 2;
-      } else {
-        return (col.getRect().right + col.measure.getBarLineRight().getRect().left) / 2;
-      }
-    } else {
-      return this.rightObj.getRect().anchorX;
-    }
+  getLineLeft(ctx) {
+    let obj = this.cols[0];
+    if (isExtensionStartObject(obj))
+      return obj.getRect().right + ctx.unitSize;
+    if (obj instanceof ObjBarLineLeft)
+      return obj.getRect().anchorX;
+    if (obj instanceof ObjRhythmColumn) {
+      const mcols = obj.measure.getColumns();
+      if (obj === mcols[0])
+        return obj.measure.getRect().left;
+    }
+    return obj.getRect().right;
+  }
+  getLineRight(ctx) {
+    let obj = this.cols[this.cols.length - 1];
+    if (isExtensionStopObject(obj))
+      return obj.getRect().left - ctx.unitSize;
+    if (obj instanceof ObjRhythmColumn) {
+      const mcols = obj.measure.getColumns();
+      if (obj === mcols[mcols.length - 1])
+        return obj.measure.getRect().right;
+      let next = obj.getNextColumn();
+      if (next && next.measure === obj.measure)
+        return (obj.getRect().right + next.getRect().left) / 2;
+    }
+    return obj.getRect().anchorX;
   }
   layoutFitToMeasure(ctx) {
-    let { unitSize } = ctx;
-    let lineLeft = this.getLineLeft();
-    let lineRight = this.getLineRight();
-    let lineRectH = unitSize;
-    this.rect = new AnchoredRect17(lineLeft, lineRight, -lineRectH / 2, lineRectH / 2);
+    let recth = ctx.unitSize;
+    let lineLeft = this.getLineLeft(ctx);
+    let lineRight = this.getLineRight(ctx);
+    [lineLeft, lineRight] = [Math.min(lineLeft, lineRight), Math.max(lineLeft, lineRight)];
+    this.rect = new AnchoredRect(lineLeft, lineRight, -recth / 2, recth / 2);
   }
   pick(x, y) {
     return this.rect.contains(x, y) ? [this] : [];
   }
   layout(ctx) {
-    this.rect = new AnchoredRect17();
+    this.rect = new AnchoredRect();
   }
   offset(dx, dy) {
     this.rect.offsetInPlace(dx, dy);
   }
   draw(ctx) {
     let { rect } = this;
-    if (this.extension.getLineStyle() === "dashed") {
+    const head = this.extension.headObj.musicObj;
+    const color = String(head.userData["extension-color"]);
+    if (this.extension.getLineStyle() === "dashed")
       ctx.setLineDash([7, 3]);
-    }
-    ctx.color("black").lineWidth(1);
+    ctx.color(color).lineWidth(1);
     ctx.strokeLine(rect.left, rect.anchorY, rect.right, rect.anchorY);
     ctx.setLineDash([]);
     let tails = this.extension.getTails();
-    if (tails.length > 0 && this === tails[tails.length - 1]) {
+    let last = tails[tails.length - 1];
+    if (this === last && !isExtensionStopObject(this.cols[this.cols.length - 1])) {
       let tipH = rect.anchorY > this.line.getRect().anchorY ? -ctx.unitSize : ctx.unitSize;
       ctx.strokeLine(rect.right, rect.anchorY, rect.right, rect.anchorY + tipH);
     }
@@ -4885,14 +5336,13 @@ var ObjExtensionLine = class extends MusicObject {
 };
 
 // src/score/engine/obj-measure.ts
-import { MusicError as MusicError13, MusicErrorType as MusicErrorType13 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError11, MusicErrorType as MusicErrorType11 } from "@tspro/web-music-score/core";
 
 // src/score/engine/connective-props.ts
 import { Note as Note6 } from "@tspro/web-music-score/theory";
 
 // src/score/engine/obj-connective.ts
-import { AnchoredRect as AnchoredRect18, Guard as Guard5, Utils as Utils7 } from "@tspro/ts-utils-lib";
-import { MusicError as MusicError11, MusicErrorType as MusicErrorType11 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError9, MusicErrorType as MusicErrorType9 } from "@tspro/web-music-score/core";
 var ObjConnective = class extends MusicObject {
   constructor(connectiveProps, line, measure, leftNoteGroup, leftNoteId, ...args) {
     var _a;
@@ -4922,7 +5372,7 @@ var ObjConnective = class extends MusicObject {
       this.rightNoteGroup = args[0];
       this.rightNoteId = args[1];
       this.tieType = void 0;
-    } else if (Guard5.isEnumValue(args[0], TieType)) {
+    } else if (guard_exports.isEnumValue(args[0], TieType)) {
       this.rightNoteGroup = void 0;
       this.rightNoteId = void 0;
       this.tieType = args[0];
@@ -4933,6 +5383,9 @@ var ObjConnective = class extends MusicObject {
   getMusicInterface() {
     return this.mi;
   }
+  get doc() {
+    return this.measure.doc;
+  }
   isInsideMeasure() {
     return this.rightNoteGroup === void 0 || this.leftNoteGroup.measure === this.rightNoteGroup.measure;
   }
@@ -4983,7 +5436,7 @@ var ObjConnective = class extends MusicObject {
       rx = contentRect.right;
       ry = leftPos.y + (rightPos.y - leftPos.y) * tLeft / (tLeft + tRight);
     } else {
-      throw new MusicError11(MusicErrorType11.Score, "Cannot layout connective object because no valid left and right note groups.");
+      throw new MusicError9(MusicErrorType9.Score, "Cannot layout connective object because no valid left and right note groups.");
     }
     let spanDy = arcDir === "up" ? -1 : 1;
     let arcHeight = spanDy * unitSize * Math.log2(rx - lx) / 3;
@@ -4992,12 +5445,12 @@ var ObjConnective = class extends MusicObject {
     this.rx = rx;
     this.ry = ry;
     this.arcHeight = this.connectiveProps.connective === "slide" /* Slide */ ? 0 : arcHeight;
-    let { nx, ny } = Utils7.Math.calcNormal(lx, ly, rx, ry);
+    let { nx, ny } = utils_exports.Math.calcNormal(lx, ly, rx, ry);
     this.cp1x = lx * 0.7 + rx * 0.3 + nx * this.arcHeight;
     this.cp1y = ly * 0.7 + ry * 0.3 + ny * this.arcHeight;
     this.cp2x = lx * 0.3 + rx * 0.7 + nx * this.arcHeight;
     this.cp2y = ly * 0.3 + ry * 0.7 + ny * this.arcHeight;
-    this.rect = new AnchoredRect18(
+    this.rect = new AnchoredRect(
       Math.min(this.lx, this.cp1x, this.cp2x, this.rx),
       Math.max(this.lx, this.cp1x, this.cp2x, this.rx),
       Math.min(this.ly, this.cp1y, this.cp2y, this.ry),
@@ -5029,7 +5482,10 @@ var ObjConnective = class extends MusicObject {
     ctx.drawDebugRect(rect);
     let t = _lineWidth * 1.5;
     let s = _lineWidth * 0.25;
-    ctx.color("black").lineWidth(1);
+    ctx.lineWidth(1);
+    ctx.color(
+      this.line instanceof ObjTab ? DocumentColor.Tab_Connective : DocumentColor.Staff_Connective
+    );
     if (this.arcHeight === 0) {
       ctx.beginPath();
       ctx.moveTo(this.lx, this.ly);
@@ -5047,8 +5503,7 @@ var ObjConnective = class extends MusicObject {
 };
 
 // src/score/engine/connective-props.ts
-import { MusicError as MusicError12, MusicErrorType as MusicErrorType12 } from "@tspro/web-music-score/core";
-import { Guard as Guard6 } from "@tspro/ts-utils-lib";
+import { MusicError as MusicError10, MusicErrorType as MusicErrorType10 } from "@tspro/web-music-score/core";
 var ConnectiveProps = class {
   constructor(connective, span, noteAnchor, startNoteGroup) {
     this.connective = connective;
@@ -5121,7 +5576,7 @@ var ConnectiveProps = class {
     this.noteGroups[0].row.getNotationLines().forEach((line) => {
       this.computeParams(line);
       if (connective === "tie" /* Tie */) {
-        if (Guard6.isEnumValue(span, TieType)) {
+        if (guard_exports.isEnumValue(span, TieType)) {
           let leftNoteGroup = this.noteGroups[0];
           for (let noteId = 0; noteId < leftNoteGroup.notes.length; noteId++) {
             this.createObjConnectiveWithTieType(line, leftNoteGroup, noteId, span);
@@ -5187,13 +5642,12 @@ var ConnectiveProps = class {
       addConnective(leftNoteGroup.measure, leftNoteGroup, leftNoteId, rightNoteGroup, rightNoteId);
       addConnective(rightNoteGroup.measure, leftNoteGroup, leftNoteId, rightNoteGroup, rightNoteId);
     } else {
-      throw new MusicError12(MusicErrorType12.Score, "Cannot create connective because it is jumping measures.");
+      throw new MusicError10(MusicErrorType10.Score, "Cannot create connective because it is jumping measures.");
     }
   }
 };
 
 // src/score/engine/obj-lyrics.ts
-import { Guard as Guard7 } from "@tspro/ts-utils-lib";
 var ObjLyrics = class extends MusicObject {
   constructor(col, verse, line, vpos, lyricsLength, lyricsText, lyricsOptions) {
     super(col);
@@ -5209,7 +5663,7 @@ var ObjLyrics = class extends MusicObject {
     __publicField(this, "mi");
     this.rhythmProps = RhythmProps.get(lyricsLength);
     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.hyphen = guard_exports.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 = this.text.getRect().clone();
     this.mi = new MLyrics(this);
@@ -5259,7 +5713,6 @@ var ObjLyrics = class extends MusicObject {
 };
 
 // src/score/engine/obj-tab-rhythm.ts
-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);
@@ -5268,22 +5721,25 @@ var ObjTabRhythm = class extends MusicObject {
     __publicField(this, "voiceId");
     __publicField(this, "mi");
     // Keep non-static
-    __publicField(this, "tupletPartsTextObjMap", new UniMap5());
+    __publicField(this, "tupletPartsTextObjMap", new UniMap());
     this.voiceId = getVoiceIds().filter((voiceId) => tab.containsVoiceId(voiceId));
-    this.rect = new AnchoredRect19();
+    this.rect = new AnchoredRect();
     this.mi = new MTabRhythm(this);
   }
   getMusicInterface() {
     return this.mi;
   }
+  get doc() {
+    return this.measure.doc;
+  }
   pick(x, y) {
     return this.rect.contains(x, y) ? [this] : [];
   }
   layout(ctx) {
     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 AnchoredRect19();
+    let numColsInVoiceId = getVoiceIds().map((voiceId) => utils_exports.Math.sum(columns.map((col) => col.getVoiceSymbol(voiceId) ? 1 : 0)));
+    this.voiceId.sort((a, b) => utils_exports.Math.cmp(numColsInVoiceId[a], numColsInVoiceId[b]));
+    this.rect = new AnchoredRect();
   }
   hasTuplets() {
     return this.measure.getBeamGroups().some((beamGroup) => beamGroup.isTuplet());
@@ -5305,7 +5761,7 @@ var ObjTabRhythm = class extends MusicObject {
   }
   draw(ctx) {
     ctx.drawDebugRect(this.rect);
-    ctx.color("black").lineWidth(1);
+    ctx.lineWidth(1);
     let { unitSize, fontSize } = ctx;
     let flagSize = unitSize;
     let dotSpace = unitSize;
@@ -5327,20 +5783,23 @@ var ObjTabRhythm = class extends MusicObject {
         let nextSym = symbols[j + 1];
         let colX = sym.col.getRect().anchorX;
         if (sym instanceof ObjNoteGroup) {
+          ctx.lineWidth(1);
+          ctx.color(DocumentColor.Tab_Note);
           if (sym.rhythmProps.noteSize >= 2) {
             ctx.lineWidth(sym.rhythmProps.noteSize === 4 ? 2 : 1);
             ctx.strokeLine(colX, stemBottom, colX, stemTop);
           }
-          ctx.lineWidth(1);
           if (symbols.length === 1) {
             for (let i = 0; i < sym.rhythmProps.flagCount; i++) {
-              ctx.drawFlag(new AnchoredRect19(colX, colX + flagSize, stemTop + i * flagSize, stemTop + (i + 2) * flagSize), "up");
+              ctx.drawFlag(new AnchoredRect(colX, colX + flagSize, stemTop + i * flagSize, stemTop + (i + 2) * flagSize), "up");
             }
           }
           for (let i = 0; i < sym.rhythmProps.dotCount; i++) {
             ctx.fillCircle(colX + dotSpace * (i + 1), stemBottom - dotWidth, dotWidth);
           }
         } else if (sym instanceof ObjRest) {
+          ctx.lineWidth(1);
+          ctx.color(DocumentColor.Tab_Rest);
           let cx = colX;
           let cy = (stemTop + stemBottom) / 2;
           let scale = 0.65;
@@ -5361,6 +5820,7 @@ var ObjTabRhythm = class extends MusicObject {
           let leftBeamCount = left.hasTuplet() ? 1 : left instanceof ObjNoteGroup ? left.getRightBeamCount() : 1;
           let rightBeamCount = right.hasTuplet() ? 1 : right instanceof ObjNoteGroup ? right.getLeftBeamCount() : 1;
           let maxBeamCount = Math.max(leftBeamCount, rightBeamCount);
+          ctx.color(DocumentColor.Tab_Note);
           ctx.lineWidth(2);
           for (let i = 0; i < maxBeamCount; i++) {
             let leftT = rightBeamCount > leftBeamCount && i >= leftBeamCount ? 0.75 : 0;
@@ -5376,6 +5836,7 @@ var ObjTabRhythm = class extends MusicObject {
           }
         }
         if (beamGroup && beamGroup.isTuplet()) {
+          ctx.color(DocumentColor.Tab_Note);
           let cx = (symbols[0].col.getRect().anchorX + symbols[symbols.length - 1].col.getRect().anchorX) / 2;
           let text = beamGroup.getTupletRatioText();
           let textObj = this.tupletPartsTextObjMap.get(text);
@@ -5398,11 +5859,19 @@ var ObjTabRhythm = class extends MusicObject {
 };
 
 // src/score/engine/obj-measure.ts
+function getExtensionAnchorY(linePos) {
+  switch (linePos) {
+    case "bottom":
+      return 0.8;
+    case "middle":
+      return 0.5;
+  }
+}
 function getExtensionTicks(extensionLength) {
   if (typeof extensionLength === "string") {
     extensionLength = [extensionLength];
   }
-  if (Guard8.isArray(extensionLength)) {
+  if (guard_exports.isArray(extensionLength)) {
     let totalTicks = 0;
     for (let i = 0; i < extensionLength.length; ) {
       let str = extensionLength[i];
@@ -5433,7 +5902,7 @@ function getVerseLayoutGroupId(verse) {
     case 3:
       return 10 /* LyricsVerse3 */;
     default:
-      throw new MusicError13(MusicErrorType13.Unknown, "VerseNumber is not 1, 2 or 3.");
+      throw new MusicError11(MusicErrorType11.Unknown, "VerseNumber is not 1, 2 or 3.");
   }
 }
 var MeasureRegions = class {
@@ -5479,10 +5948,10 @@ var ObjMeasure = class extends MusicObject {
     __publicField(this, "measureId");
     __publicField(this, "regions", new MeasureRegions());
     __publicField(this, "needLayout", true);
-    __publicField(this, "voiceSymbols", asMulti(new IndexArray2()));
+    __publicField(this, "voiceSymbols", asMulti(new IndexArray()));
     __publicField(this, "lastAddedRhythmColumn");
     __publicField(this, "lastAddedRhythmSymbol");
-    __publicField(this, "addExtensionToMusicObjects", []);
+    __publicField(this, "addExtensionTo", []);
     __publicField(this, "layoutObjects", []);
     __publicField(this, "postMeasureBreakWidth", 0);
     __publicField(this, "passCount", 0);
@@ -5494,8 +5963,8 @@ var ObjMeasure = class extends MusicObject {
     __publicField(this, "endRepeatPlayCount", 2);
     // play twice.
     __publicField(this, "endRepeatPlayCountText");
-    __publicField(this, "staticObjectsCache", new UniMap6());
-    __publicField(this, "lyricsObjectsCache", new TriMap2());
+    __publicField(this, "staticObjectsCache", new UniMap());
+    __publicField(this, "lyricsObjectsCache", new TriMap());
     __publicField(this, "mi");
     this.mi = new MMeasure(this);
     this.prevMeasure = row.doc.getLastMeasure();
@@ -5536,7 +6005,7 @@ var ObjMeasure = class extends MusicObject {
   updateRunningArguments(runningArgs) {
     var _a;
     runningArgs != null ? runningArgs : runningArgs = [];
-    let numVoices = Utils9.Math.sum(getVoiceIds().map((voiceId) => this.getVoiceSymbols(voiceId).length > 0 ? 1 : 0));
+    let numVoices = utils_exports.Math.sum(getVoiceIds().map((voiceId) => this.getVoiceSymbols(voiceId).length > 0 ? 1 : 0));
     getVoiceIds().forEach((voiceId) => {
       var _a2;
       const getDefaultDiatonicId = () => {
@@ -5674,6 +6143,12 @@ var ObjMeasure = class extends MusicObject {
   isLastMeasure() {
     return this.nextMeasure === void 0;
   }
+  isFirstMeasureInRow() {
+    return this === this.row.getFirstMeasure();
+  }
+  isLastMeasureInRow() {
+    return this === this.row.getLastMeasure();
+  }
   getNextMeasure() {
     return this.nextMeasure;
   }
@@ -5695,7 +6170,7 @@ var ObjMeasure = class extends MusicObject {
       this.alterKeySignature = args[0];
     } else if (args[0] instanceof Scale) {
       this.alterKeySignature = args[0];
-    } else if (Guard8.isNonEmptyString(args[0])) {
+    } else if (guard_exports.isNonEmptyString(args[0])) {
       if (args.length === 1) {
         this.alterKeySignature = getScale(args[0]);
       } else if (args.length === 2) {
@@ -5704,7 +6179,7 @@ var ObjMeasure = class extends MusicObject {
           let scaleType = validateScaleType("" + args[1]);
           this.alterKeySignature = getScale(tonic, scaleType);
         } catch (e) {
-          throw new MusicError13(MusicErrorType13.Score, "Cannot set key signature because invalid args: " + args);
+          throw new MusicError11(MusicErrorType11.Score, "Cannot set key signature because invalid args: " + args);
         }
       }
     }
@@ -5788,9 +6263,11 @@ var ObjMeasure = class extends MusicObject {
     return this.postMeasureBreakWidth;
   }
   addLayoutObject(musicObj, line, layoutGroupId, verticalPos) {
-    this.layoutObjects.push(new LayoutObjectWrapper(musicObj, line, layoutGroupId, verticalPos));
+    const layoutObj = new LayoutObjectWrapper(musicObj, line, layoutGroupId, verticalPos);
+    this.layoutObjects.push(layoutObj);
     this.requestLayout();
     this.requestRectUpdate();
+    return layoutObj;
   }
   forEachStaffGroup(staffTabOrGroups, defaultVerticalPos, addFn) {
     const lines = this.row.getNotationLines();
@@ -5806,7 +6283,7 @@ var ObjMeasure = class extends MusicObject {
           let grp = this.doc.getStaffGroup(staffTabOrGroup);
           if (grp && !prevGroups.includes(staffTabOrGroup)) {
             let curGroups = [...prevGroups, staffTabOrGroup];
-            (Guard8.isArray(grp.staffsTabsAndGroups) ? grp.staffsTabsAndGroups : [grp.staffsTabsAndGroups]).forEach((staffTabOrGroup2) => {
+            (guard_exports.isArray(grp.staffsTabsAndGroups) ? grp.staffsTabsAndGroups : [grp.staffsTabsAndGroups]).forEach((staffTabOrGroup2) => {
               switch (grp.verticalPosition) {
                 case "above" /* Above */:
                   addToStaffTabOrGroup(staffTabOrGroup2, 0 /* Above */, curGroups);
@@ -5833,7 +6310,7 @@ var ObjMeasure = class extends MusicObject {
       } else {
         addToStaffTabOrGroup(0, defaultVerticalPos);
       }
-    } else if (Guard8.isArray(staffTabOrGroups)) {
+    } else if (guard_exports.isArray(staffTabOrGroups)) {
       staffTabOrGroups.forEach((staffTabOrGroup) => addToStaffTabOrGroup(staffTabOrGroup, defaultVerticalPos));
     } else {
       addToStaffTabOrGroup(staffTabOrGroups, defaultVerticalPos);
@@ -5842,10 +6319,11 @@ var ObjMeasure = class extends MusicObject {
   addFermata(staffTabOrGroups, fermata) {
     let anchor = fermata === "atMeasureEnd" /* AtMeasureEnd */ ? this.barLineRight : this.lastAddedRhythmColumn;
     if (!anchor) {
-      throw new MusicError13(MusicErrorType13.Score, "Cannot add Fermata because anchor is undefined.");
+      throw new MusicError11(MusicErrorType11.Score, "Cannot add Fermata because anchor is undefined.");
     }
     this.forEachStaffGroup(staffTabOrGroups, 0 /* Above */, (line, vpos) => {
-      this.addLayoutObject(new ObjFermata(anchor, vpos), line, 1 /* Fermata */, vpos);
+      const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Fermata : DocumentColor.Tab_Element_Fermata;
+      this.addLayoutObject(new ObjFermata(anchor, vpos, color), line, 1 /* Fermata */, vpos);
     });
     this.disableExtension();
     this.requestLayout();
@@ -5858,12 +6336,15 @@ var ObjMeasure = class extends MusicObject {
     switch (navigation) {
       case "ending" /* Ending */:
         if (this.navigationSet.has(navigation)) {
-          throw new MusicError13(MusicErrorType13.Score, "Cannot add ending beasure measure already has one.");
+          throw new MusicError11(MusicErrorType11.Score, "Cannot add ending beasure measure already has one.");
         }
         let anchor = this;
         let passages = args;
         addLayoutObjectProps = {
-          createObj: () => new ObjEnding(anchor, passages),
+          createObj: (line) => {
+            const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Navigation : DocumentColor.Tab_Element_Navigation;
+            return new ObjEnding(anchor, color, passages);
+          },
           layoutGroupId: 4 /* Ending */,
           defaultVerticalPos: 0 /* Above */
         };
@@ -5875,7 +6356,10 @@ var ObjMeasure = class extends MusicObject {
         let anchor2 = this.barLineRight;
         let text = getNavigationString(navigation);
         addLayoutObjectProps = {
-          createObj: () => new ObjText(anchor2, text, 1, 1),
+          createObj: (line) => {
+            const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Navigation : DocumentColor.Tab_Element_Navigation;
+            return new ObjText(anchor2, { text, color }, 1, 1);
+          },
           layoutGroupId: 3 /* Navigation */,
           defaultVerticalPos: 0 /* Above */
         };
@@ -5887,7 +6371,10 @@ var ObjMeasure = class extends MusicObject {
         let anchor2 = this.barLineRight;
         let text = getNavigationString(navigation);
         addLayoutObjectProps = {
-          createObj: () => new ObjText(anchor2, text, 1, 1),
+          createObj: (line) => {
+            const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Navigation : DocumentColor.Tab_Element_Navigation;
+            return new ObjText(anchor2, { text, color }, 1, 1);
+          },
           layoutGroupId: 3 /* Navigation */,
           defaultVerticalPos: 0 /* Above */
         };
@@ -5898,7 +6385,10 @@ var ObjMeasure = class extends MusicObject {
         let anchor2 = this.barLineLeft;
         let text = getNavigationString(navigation);
         addLayoutObjectProps = {
-          createObj: () => new ObjSpecialText(anchor2, text),
+          createObj: (line) => {
+            const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Navigation : DocumentColor.Tab_Element_Navigation;
+            return new ObjSpecialText(anchor2, text, color);
+          },
           layoutGroupId: 3 /* Navigation */,
           defaultVerticalPos: 0 /* Above */
         };
@@ -5908,7 +6398,10 @@ var ObjMeasure = class extends MusicObject {
         let anchor2 = this.barLineRight;
         let text = getNavigationString(navigation);
         addLayoutObjectProps = {
-          createObj: () => new ObjSpecialText(anchor2, text),
+          createObj: (line) => {
+            const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Navigation : DocumentColor.Tab_Element_Navigation;
+            return new ObjSpecialText(anchor2, text, color);
+          },
           layoutGroupId: 3 /* Navigation */,
           defaultVerticalPos: 0 /* Above */
         };
@@ -5917,15 +6410,17 @@ var ObjMeasure = class extends MusicObject {
       case "endRepeat" /* EndRepeat */:
         if (args.length === 0) {
           this.endRepeatPlayCount = 2;
-        } else if (Guard8.isIntegerGte(args[0], 2)) {
+        } else if (guard_exports.isIntegerGte(args[0], 2)) {
           this.endRepeatPlayCount = args[0];
         } else {
-          throw new MusicError13(MusicErrorType13.Score, "Invalid end repeat play count (should be 2 or greater integer): " + args[0]);
+          throw new MusicError11(MusicErrorType11.Score, "Invalid end repeat play count (should be 2 or greater integer): " + args[0]);
         }
         if (this.endRepeatPlayCount !== 2) {
-          let textProps = {
-            text: "" + this.endRepeatPlayCount + "x",
-            scale: 0.8
+          const text = `${this.endRepeatPlayCount}x`;
+          const textProps = {
+            text,
+            scale: 0.8,
+            color: DocumentColor.Staff_Frame
           };
           this.endRepeatPlayCountText = new ObjText(this, textProps, 0.5, 1);
         }
@@ -5933,7 +6428,7 @@ var ObjMeasure = class extends MusicObject {
     }
     if (addLayoutObjectProps) {
       this.forEachStaffGroup(staffTabOrGroups, addLayoutObjectProps.defaultVerticalPos, (line, vpos) => {
-        this.addLayoutObject(addLayoutObjectProps.createObj(), line, addLayoutObjectProps.layoutGroupId, vpos);
+        this.addLayoutObject(addLayoutObjectProps.createObj(line), line, addLayoutObjectProps.layoutGroupId, vpos);
       });
     }
     this.navigationSet.add(navigation);
@@ -5945,38 +6440,45 @@ var ObjMeasure = class extends MusicObject {
   addAnnotation(staffTabOrGroups, annotation, text) {
     let anchor = this.lastAddedRhythmColumn;
     if (!anchor) {
-      throw new MusicError13(MusicErrorType13.Score, "Cannot add annotation because anchor is undefined.");
+      throw new MusicError11(MusicErrorType11.Score, "Cannot add annotation because anchor is undefined.");
     } else if (text.length === 0) {
-      throw new MusicError13(MusicErrorType13.Score, "Cannot add annotation because annotation text is empty.");
+      throw new MusicError11(MusicErrorType11.Score, "Cannot add annotation because annotation text is empty.");
     }
     let textProps = { text };
     let layoutGroupId;
     let defaultVerticalPos;
+    let linePos;
     switch (annotation) {
       case "dynamics" /* Dynamics */:
         layoutGroupId = 6 /* DynamicsAnnotation */;
         defaultVerticalPos = 0 /* Above */;
         textProps.italic = true;
+        linePos = "bottom";
         break;
       case "tempo" /* Tempo */:
         layoutGroupId = 5 /* TempoAnnotation */;
         defaultVerticalPos = 0 /* Above */;
         textProps.italic = true;
+        linePos = "bottom";
         break;
     }
+    const anchorX = 0.5;
+    const anchorY = getExtensionAnchorY(linePos);
     this.disableExtension();
     this.forEachStaffGroup(staffTabOrGroups, defaultVerticalPos, (line, vpos) => {
-      let textObj = new ObjText(anchor, textProps, 0.5, 1);
-      this.addLayoutObject(textObj, line, layoutGroupId, vpos);
-      this.enableExtension(textObj);
+      const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Annotation : DocumentColor.Tab_Element_Annotation;
+      textProps.color = color;
+      let textObj = new ObjText(anchor, textProps, anchorX, anchorY);
+      const layoutObj = this.addLayoutObject(textObj, line, layoutGroupId, vpos);
+      this.enableExtension(layoutObj, color);
     });
   }
   addLabel(staffTabOrGroups, label, text) {
     let anchor = this.lastAddedRhythmColumn;
     if (!anchor) {
-      throw new MusicError13(MusicErrorType13.Score, "Cannot add label because anchor is undefined.");
+      throw new MusicError11(MusicErrorType11.Score, "Cannot add label because anchor is undefined.");
     } else if (text.length === 0) {
-      throw new MusicError13(MusicErrorType13.Score, "Cannot add label because label text is empty.");
+      throw new MusicError11(MusicErrorType11.Score, "Cannot add label because label text is empty.");
     }
     let textProps = { text };
     let layoutGroupId;
@@ -5993,52 +6495,57 @@ var ObjMeasure = class extends MusicObject {
     }
     this.disableExtension();
     this.forEachStaffGroup(staffTabOrGroups, defaultVerticalPos, (line, vpos) => {
+      const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Label : DocumentColor.Tab_Element_Label;
+      textProps.color = color;
       let textObj = new ObjText(anchor, textProps, 0.5, 1);
-      this.addLayoutObject(textObj, line, layoutGroupId, vpos);
-      this.enableExtension(textObj);
+      const layoutObj = this.addLayoutObject(textObj, line, layoutGroupId, vpos);
+      this.enableExtension(layoutObj, color);
     });
   }
   addConnective(connective, ...args) {
     let anchor = this.lastAddedRhythmSymbol;
     if (!(anchor instanceof ObjNoteGroup)) {
-      throw new MusicError13(MusicErrorType13.Score, "Connective can be added to note group only.");
+      throw new MusicError11(MusicErrorType11.Score, "Connective can be added to note group only.");
     }
     if (connective === "tie" /* Tie */) {
-      let tieSpan = Guard8.isInteger(args[0]) || Guard8.isEnumValue(args[0], TieType) ? args[0] : 2;
-      let noteAnchor = Guard8.isEnumValue(args[1], NoteAnchor) ? args[1] : "auto" /* Auto */;
+      let tieSpan = guard_exports.isInteger(args[0]) || guard_exports.isEnumValue(args[0], TieType) ? args[0] : 2;
+      let noteAnchor = guard_exports.isEnumValue(args[1], NoteAnchor) ? args[1] : "auto" /* Auto */;
       anchor.startConnective(new ConnectiveProps("tie" /* Tie */, tieSpan, noteAnchor, anchor));
     } else if (connective === "slur" /* Slur */) {
-      let slurSpan = Guard8.isInteger(args[0]) ? args[0] : 2;
-      let noteAnchor = Guard8.isEnumValue(args[1], NoteAnchor) ? args[1] : "auto" /* Auto */;
+      let slurSpan = guard_exports.isInteger(args[0]) ? args[0] : 2;
+      let noteAnchor = guard_exports.isEnumValue(args[1], NoteAnchor) ? args[1] : "auto" /* Auto */;
       anchor.startConnective(new ConnectiveProps("slur" /* Slur */, slurSpan, noteAnchor, anchor));
     } else if (connective === "slide" /* Slide */) {
-      let noteAnchor = Guard8.isEnumValue(args[0], NoteAnchor) ? args[0] : "auto" /* Auto */;
+      let noteAnchor = guard_exports.isEnumValue(args[0], NoteAnchor) ? args[0] : "auto" /* Auto */;
       anchor.startConnective(new ConnectiveProps("slide" /* Slide */, 2, noteAnchor, anchor));
     }
   }
   addExtension(extensionLength, extensionVisible) {
-    this.addExtensionToMusicObjects.forEach((musicObj) => {
-      let anchor = musicObj.getParent();
+    this.addExtensionTo.forEach((data) => {
+      const { layoutObj, color } = data;
+      const { musicObj } = layoutObj;
+      musicObj.userData["extension-color"] = color;
+      const anchor = musicObj.getParent();
       if (musicObj instanceof ObjText && anchor instanceof ObjRhythmColumn) {
         let lineStyle = "dashed";
         let linePos = "bottom";
-        let extension = new Extension(musicObj, anchor, getExtensionTicks(extensionLength), extensionVisible, lineStyle, linePos);
+        let extension = new Extension(layoutObj, anchor, getExtensionTicks(extensionLength), extensionVisible, lineStyle, linePos);
         musicObj.setLink(extension);
       } else {
-        throw new MusicError13(MusicErrorType13.Score, "Cannot add extension becaue no compatible music object to attach it to.");
+        throw new MusicError11(MusicErrorType11.Score, "Cannot add extension becaue no compatible music object to attach it to.");
       }
     });
-    if (this.addExtensionToMusicObjects.length === 0) {
-      throw new MusicError13(MusicErrorType13.Score, "Cannot add extension because music object to attach it to is undefined.");
+    if (this.addExtensionTo.length === 0) {
+      throw new MusicError11(MusicErrorType11.Score, "Cannot add extension because music object to attach it to is undefined.");
     }
     this.disableExtension();
     this.requestLayout();
   }
-  enableExtension(musicObject) {
-    this.addExtensionToMusicObjects.push(musicObject);
+  enableExtension(layoutObj, color) {
+    this.addExtensionTo.push({ layoutObj, color });
   }
   disableExtension() {
-    this.addExtensionToMusicObjects = [];
+    this.addExtensionTo = [];
   }
   getEnding() {
     return this.layoutObjects.map((layoutObj) => layoutObj.musicObj).find((musicObj) => musicObj instanceof ObjEnding);
@@ -6098,7 +6605,7 @@ var ObjMeasure = class extends MusicObject {
       col.addLyricsObject(lyricsObj);
       let lyricsArr = this.lyricsObjectsCache.getOrCreate(line, vpos, verse, []);
       lyricsArr.push(lyricsObj);
-      lyricsArr.sort((a, b) => Utils9.Math.cmp(a.col.positionTicks, b.col.positionTicks));
+      lyricsArr.sort((a, b) => utils_exports.Math.cmp(a.col.positionTicks, b.col.positionTicks));
       (_a = lyricsObj.measure.getPrevLyricsObject(lyricsObj)) == null ? void 0 : _a.setNextLyricsObject(lyricsObj);
       this.addLayoutObject(lyricsObj, line, getVerseLayoutGroupId(verse), vpos);
       this.lastAddedRhythmColumn = col;
@@ -6128,7 +6635,7 @@ var ObjMeasure = class extends MusicObject {
         return col2;
       }
     }
-    throw new MusicError13(MusicErrorType13.Score, "Error in rhythm column. Should never get here.");
+    throw new MusicError11(MusicErrorType11.Score, "Error in rhythm column. Should never get here.");
   }
   getMeasureTicks() {
     return this.getTimeSignature().measureTicks;
@@ -6147,7 +6654,7 @@ var ObjMeasure = class extends MusicObject {
   }
   // Get content rect excluding signature
   getColumnsContentRect() {
-    return new AnchoredRect20(
+    return new AnchoredRect(
       this.barLineLeft.getRect().anchorX,
       this.barLineRight.getRect().anchorX,
       this.getRect().top,
@@ -6230,24 +6737,35 @@ var ObjMeasure = class extends MusicObject {
   }
   createExtensions() {
     this.layoutObjects.forEach((layoutObj) => {
-      var _a;
       let { musicObj, measure, layoutGroupId, verticalPos, line } = layoutObj;
       if (musicObj.getLink() instanceof Extension) {
         let extension = musicObj.getLink();
-        if (extension.getHead() === musicObj) {
-          extension.getTails().forEach((musicObj2) => measure.removeLayoutObjects(musicObj2));
-          let { startColumn, endColumn } = extension.getExtensionRangeInfo();
-          if (extension.isVisible() && startColumn !== endColumn) {
-            for (let m = startColumn.measure; m !== void 0; m = m === endColumn.measure ? void 0 : m.getNextMeasure()) {
-              let leftObj = m === startColumn.measure ? extension.getHead() : m.getBarLineLeft();
-              let rightObj = m === endColumn.measure ? endColumn : m.getBarLineRight();
-              const lines = m.row.getNotationLines();
-              let line2 = (_a = lines.find((l) => l.name !== "" && l.name === line.name)) != null ? _a : lines[line.id];
-              if (line2) {
-                m.addLayoutObject(new ObjExtensionLine(m, line2, extension, leftObj, rightObj), line2, layoutGroupId, verticalPos);
-              }
-            }
-          }
+        if (extension.getHead() !== musicObj)
+          return;
+        extension.getTails().forEach((musicObj2) => measure.removeLayoutObjects(musicObj2));
+        if (!extension.isVisible())
+          return;
+        const range = extension.getRange();
+        const rcols = range.columnRange.slice();
+        for (let isFirst = true; rcols.length > 1; isFirst = false) {
+          const { measure: measure2 } = rcols[0];
+          const i = rcols.findIndex((col) => col.measure !== measure2);
+          const mcols = rcols.splice(0, i > 0 ? i : rcols.length);
+          if (mcols.length < 2) continue;
+          const lineMatch = measure2.row.findMatchingLine(line);
+          if (!lineMatch) continue;
+          const isLast = rcols.length === 0;
+          const extCols = [
+            ...isFirst ? [musicObj] : [],
+            ...mcols,
+            ...isLast && range.stopObject ? [range.stopObject] : []
+          ];
+          measure2.addLayoutObject(
+            new ObjExtensionLine(measure2, lineMatch, extension, extCols),
+            lineMatch,
+            layoutGroupId,
+            verticalPos
+          );
         }
       }
     });
@@ -6301,7 +6819,7 @@ var ObjMeasure = class extends MusicObject {
         let beamGroupSize = ts.beamGroupSizes[groupId];
         let beamGroupSizeList = [beamGroupSize];
         if (beamGroupSize.length > 1) {
-          beamGroupSizeList.unshift([Utils9.Math.sum(beamGroupSize)]);
+          beamGroupSizeList.unshift([utils_exports.Math.sum(beamGroupSize)]);
         }
         let beamCreated = false;
         let groupStartTicksSave = groupStartTicks;
@@ -6316,7 +6834,7 @@ var ObjMeasure = class extends MusicObject {
               let symbolEndTicks = symbolStartTicks + symbol.rhythmProps.ticks;
               return symbolStartTicks >= groupStartTicks && symbolEndTicks <= groupEndTicks;
             });
-            let groupSymbolsTicks = Utils9.Math.sum(groupSymbols.map((sym) => sym.rhythmProps.ticks));
+            let groupSymbolsTicks = utils_exports.Math.sum(groupSymbols.map((sym) => sym.rhythmProps.ticks));
             if (groupSymbolsTicks === beamGroupTicks && groupSymbols.every((n) => n instanceof ObjNoteGroup) && (groupSymbols.every((n) => n.rhythmProps.flagCount === 1) || beamGroupSizeList.length === 0)) {
               if (ObjBeamGroup.createBeam(groupSymbols)) {
                 beamCreated = true;
@@ -6347,7 +6865,7 @@ var ObjMeasure = class extends MusicObject {
         this.completeRests(getVoiceIds().filter((id) => this.getConsumedTicks(id) > 0));
       }
       return;
-    } else if (Guard8.isArray(voiceId)) {
+    } else if (guard_exports.isArray(voiceId)) {
       voiceId.forEach((id) => this.completeRests(id));
       return;
     } else {
@@ -6386,7 +6904,7 @@ var ObjMeasure = class extends MusicObject {
     this.requestRectUpdate();
     let { unitSize } = ctx;
     this.postMeasureBreakWidth = this.hasPostMeasureBreak() ? DocumentSettings.PostMeasureBreakWidth * unitSize : 0;
-    let isFirstMeasureInRow = this === this.row.getFirstMeasure();
+    let isFirstMeasureInRow = this.isFirstMeasureInRow();
     let isAfterMeasureBreak = ((_a = this.getPrevMeasure()) == null ? void 0 : _a.hasPostMeasureBreak()) === true;
     this.regions.tabTuning_0 = isFirstMeasureInRow && this.row.hasTab ? unitSize * 4 : 0;
     let showClef = isFirstMeasureInRow || isAfterMeasureBreak;
@@ -6419,11 +6937,12 @@ var ObjMeasure = class extends MusicObject {
       }
     });
     this.tabStringNotes.length = 0;
-    if (this === this.row.getFirstMeasure()) {
+    if (this.isFirstMeasureInRow()) {
       this.row.getTabs().forEach((tab) => {
         for (let stringId = 0; stringId < 6; stringId++) {
           let note = tab.getTuningStrings()[stringId].format(PitchNotation.Helmholtz, SymbolSet.Unicode);
-          let obj = new ObjText(this, { text: note, scale: 0.8 }, 1, 0.5);
+          let color = DocumentColor.Tab_Tuning;
+          let obj = new ObjText(this, { text: note, scale: 0.8, color }, 1, 0.5);
           obj.layout(ctx);
           obj.setRight(this.regions.tabTuning_0 * 0.8);
           obj.setCenterY(tab.getStringY(stringId));
@@ -6456,7 +6975,7 @@ var ObjMeasure = class extends MusicObject {
       return;
     }
     width = Math.max(width, this.getMinWidth());
-    this.rect = new AnchoredRect20();
+    this.rect = new AnchoredRect();
     this.rect.anchorX = this.rect.left + width / 2;
     this.rect.right = this.rect.left + width;
     this.signatures.forEach((signature) => {
@@ -6541,7 +7060,7 @@ var ObjMeasure = class extends MusicObject {
       ...this.beamGroups.filter((b) => !b.isEmpty()).map((b) => b.getRect().bottom),
       ...this.layoutObjects.filter((o) => o.isPositionResolved()).map((o) => o.musicObj.getRect().bottom)
     );
-    if (this === this.row.getLastMeasure()) {
+    if (this.isLastMeasureInRow()) {
       this.rect.right = Math.max(
         this.rect.right,
         ...this.layoutObjects.filter((o) => o.isPositionResolved() && o.musicObj instanceof ObjFermata).map((o) => o.musicObj.getRect().right)
@@ -6569,21 +7088,31 @@ var ObjMeasure = class extends MusicObject {
   }
   draw(ctx) {
     ctx.drawDebugRect(this.getRect());
+    ctx.lineWidth(1);
     let left = this.getStaffLineLeft();
     let right = this.getStaffLineRight();
-    ctx.color("black").lineWidth(1);
-    const drawLine = (y) => ctx.strokeLine(left, y, right, y);
+    const drawLine = (y, color) => ctx.color(color).strokeLine(left, y, right, y);
     this.row.getNotationLines().forEach((line) => {
       if (line instanceof ObjStaff) {
         for (let p = line.bottomLineDiatonicId; p <= line.topLineDiatonicId; p += 2) {
-          drawLine(line.getDiatonicIdY(p));
+          drawLine(line.getDiatonicIdY(p), DocumentColor.Staff_Frame);
         }
       } else if (line instanceof ObjTab) {
         for (let stringId = 0; stringId < 6; stringId++) {
-          drawLine(line.getStringY(stringId));
+          drawLine(line.getStringY(stringId), DocumentColor.Tab_Frame);
         }
       }
     });
+    if (this.isFirstMeasureInRow() && this.row.getNotationLines().length === 1) {
+      this.row.getTabs().forEach((tab) => {
+        const grp = tab.getRowGroup();
+        if (grp.hasBrace) return;
+        const left2 = this.getStaffLineLeft();
+        const top = tab.getTopLineY();
+        const bottom = tab.getBottomLineY();
+        ctx.color(DocumentColor.Tab_Frame).lineWidth(1).strokeLine(left2, top, left2, bottom);
+      });
+    }
     this.signatures.forEach((signature) => signature.draw(ctx));
     this.tabStringNotes.forEach((obj) => obj.draw(ctx));
     this.barLineLeft.draw(ctx);
@@ -6599,8 +7128,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 UniMap7 } from "@tspro/ts-utils-lib";
+import { MusicError as MusicError12, MusicErrorType as MusicErrorType12 } from "@tspro/web-music-score/core";
 var LayoutGroupId = /* @__PURE__ */ ((LayoutGroupId2) => {
   LayoutGroupId2[LayoutGroupId2["TabRhythm"] = 0] = "TabRhythm";
   LayoutGroupId2[LayoutGroupId2["Fermata"] = 1] = "Fermata";
@@ -6615,7 +7143,7 @@ var LayoutGroupId = /* @__PURE__ */ ((LayoutGroupId2) => {
   LayoutGroupId2[LayoutGroupId2["LyricsVerse3"] = 10] = "LyricsVerse3";
   return LayoutGroupId2;
 })(LayoutGroupId || {});
-var LayoutGroupIdAttrs = new UniMap7([
+var LayoutGroupIdAttrs = new UniMap([
   [0 /* TabRhythm */, { rowAlign: true }],
   [1 /* Fermata */, { reserveSpace: true }],
   [2 /* NoteLabel */, { reserveSpace: true }],
@@ -6635,7 +7163,7 @@ function requireParentMeasure(p) {
     }
     p = p.getParent();
   }
-  throw new MusicError14(MusicErrorType14.Score, "Parent measure is required but not found!");
+  throw new MusicError12(MusicErrorType12.Score, "Parent measure is required but not found!");
 }
 var StaffGroup = class {
   constructor(groupName, staffsTabsAndGroups, verticalPosition) {
@@ -6659,7 +7187,7 @@ var LayoutObjectWrapper = class {
     this.row = this.measure.row;
     let anchor = this.musicObj.getParent();
     if (!anchor) {
-      throw new MusicError14(MusicErrorType14.Score, "Parent music object is required as an anchor.");
+      throw new MusicError12(MusicErrorType12.Score, "Parent music object is required as an anchor.");
     }
     this.anchor = anchor;
     this.anchor.addAnchoredLayoutObject(this);
@@ -6687,7 +7215,7 @@ var LayoutObjectWrapper = class {
       let staticShapeRects = staticObj.getShapeRects();
       objShapeRects.forEach((objR) => {
         staticShapeRects.forEach((staticR) => {
-          if (AnchoredRect21.overlapX(objR, staticR)) {
+          if (AnchoredRect.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);
           }
         });
@@ -6695,13 +7223,6 @@ var LayoutObjectWrapper = class {
     });
     return y;
   }
-  getTextContent() {
-    if (this.musicObj instanceof ObjText || this.musicObj instanceof ObjSpecialText) {
-      return this.musicObj.getText();
-    } else {
-      return void 0;
-    }
-  }
   layout(ctx) {
     this.line.addObject(this);
   }
@@ -6719,7 +7240,7 @@ var LayoutGroup = class {
   constructor(layoutGroupId) {
     this.layoutGroupId = layoutGroupId;
     // key = VerticalPos
-    __publicField(this, "layoutObject", asMulti2(new IndexArray3()));
+    __publicField(this, "layoutObject", asMulti(new IndexArray()));
     __publicField(this, "rowAlign");
     __publicField(this, "reserveSpace");
     __publicField(this, "padding");
@@ -6749,12 +7270,15 @@ var LayoutGroup = class {
 };
 
 // src/score/engine/obj-staff-and-tab.ts
-var ObjNotationLine5 = class extends MusicObject {
+var ObjNotationLine6 = class extends MusicObject {
   constructor(row) {
     super(row);
     this.row = row;
     __publicField(this, "objects", []);
-    __publicField(this, "layoutGroups", new UniMap8());
+    __publicField(this, "layoutGroups", new UniMap());
+  }
+  getRowGroup() {
+    return this.row.getRowGroupByLineId(this.id);
   }
   addObject(o) {
     this.objects.push(o);
@@ -6769,7 +7293,7 @@ var ObjNotationLine5 = class extends MusicObject {
     this.layoutGroups.forEach((layoutGroup) => layoutGroup.layout(ctx));
   }
   layoutLayoutGroups(ctx) {
-    for (const groupId of Utils10.Enum.getEnumValues(LayoutGroupId)) {
+    for (const groupId of utils_exports.Enum.getEnumValues(LayoutGroupId)) {
       const layoutGroup = this.getLayoutGroup(groupId);
       if (layoutGroup) {
         this.layoutLayoutGroup(ctx, layoutGroup, 0 /* Above */);
@@ -6820,11 +7344,20 @@ var ObjNotationLine5 = class extends MusicObject {
       });
     }
   }
+  drawVerticalLine(ctx, left, width, isSystemBarLine = false) {
+    ctx.color(this.getConfig().type === "tab" ? DocumentColor.Tab_Frame : DocumentColor.Staff_Frame);
+    const i = this.row.getNotationLines().indexOf(this);
+    const nextLine = i >= 0 ? this.row.getNotationLines()[i + 1] : void 0;
+    const isGroupLine = this.getRowGroup().lines.length > 1;
+    const isGrandTreble = this instanceof ObjStaff && this.isGrandTreble();
+    const top = this.getTopLineY();
+    const bottom = nextLine && (isSystemBarLine || isGroupLine || isGrandTreble) ? nextLine.getTopLineY() : this.getBottomLineY();
+    ctx.fillRect(left, top, width, bottom - top);
+  }
 };
-var ObjStaff = class extends ObjNotationLine5 {
+var ObjStaff = class extends ObjNotationLine6 {
   constructor(row, staffConfig, id) {
     super(row);
-    this.row = row;
     this.staffConfig = staffConfig;
     this.id = id;
     __publicField(this, "clefImageAsset");
@@ -6848,7 +7381,7 @@ var ObjStaff = class extends ObjNotationLine5 {
       this.clefLineDiatonicId = getDiatonicId("F3", staffConfig.isOctaveDown === true);
       this.middleLineDiatonicId = this.clefLineDiatonicId - 2;
     } else {
-      throw new MusicError15(MusicErrorType15.Score, `Invalid staffConfig.clef ${staffConfig.clef}.`);
+      throw new MusicError13(MusicErrorType13.Score, `Invalid staffConfig.clef ${staffConfig.clef}.`);
     }
     this.topLineDiatonicId = this.middleLineDiatonicId + 4;
     this.bottomLineDiatonicId = this.middleLineDiatonicId - 4;
@@ -6879,9 +7412,14 @@ var ObjStaff = class extends ObjNotationLine5 {
     return this.bottomLineY;
   }
   joinGrandStaff(staff) {
-    if (staff !== this) {
+    if (staff !== this)
       this.joinedGrandStaff = staff;
-    }
+  }
+  isGrandTreble() {
+    return this.joinedGrandStaff !== void 0 && this.staffConfig.clef === "G" /* G */;
+  }
+  isGrandBass() {
+    return this.joinedGrandStaff !== void 0 && this.staffConfig.clef === "F" /* F */;
   }
   getLineSpacing() {
     return (this.bottomLineY - this.topLineY) / 4;
@@ -6899,7 +7437,7 @@ var ObjStaff = class extends ObjNotationLine5 {
     } else if (this.joinedGrandStaff && this.joinedGrandStaff.containsDiatonicId(diatonicId)) {
       return this.joinedGrandStaff.getDiatonicIdY(diatonicId);
     } else {
-      throw new MusicError15(MusicErrorType15.Score, "Staff does not contain diatonicId " + diatonicId);
+      throw new MusicError13(MusicErrorType13.Score, "Staff does not contain diatonicId " + diatonicId);
     }
   }
   getActualStaff(diatonicId) {
@@ -6908,7 +7446,7 @@ var ObjStaff = class extends ObjNotationLine5 {
     } else if (this.joinedGrandStaff && this.joinedGrandStaff.containsDiatonicId(diatonicId)) {
       return this.joinedGrandStaff;
     } else {
-      throw new MusicError15(MusicErrorType15.Score, "Staff does not contain diatonicId " + diatonicId);
+      throw new MusicError13(MusicErrorType13.Score, "Staff does not contain diatonicId " + diatonicId);
     }
   }
   getDiatonicIdAt(y) {
@@ -6922,7 +7460,7 @@ var ObjStaff = class extends ObjNotationLine5 {
     return diatonicId % 2 !== this.middleLineDiatonicId % 2;
   }
   containsVoiceId(voiceId) {
-    return Guard9.isUndefined(this.staffConfig.voiceId) || Utils10.Arr.toArray(this.staffConfig.voiceId).includes(voiceId);
+    return guard_exports.isUndefined(this.staffConfig.voiceId) || utils_exports.Arr.toArray(this.staffConfig.voiceId).includes(voiceId);
   }
   calcTop() {
     let top = this.topLineY;
@@ -6952,7 +7490,7 @@ var ObjStaff = class extends ObjNotationLine5 {
     let h = unitSize * DocumentSettings.StaffHeight;
     this.topLineY = -h / 2;
     this.bottomLineY = h / 2;
-    this.rect = new AnchoredRect22(0, 0, this.topLineY, this.bottomLineY);
+    this.rect = new AnchoredRect(0, 0, this.topLineY, this.bottomLineY);
   }
   layoutWidth(ctx) {
     this.rect.left = this.row.getRect().left;
@@ -6973,10 +7511,9 @@ var ObjStaff = class extends ObjNotationLine5 {
   draw(ctx) {
   }
 };
-var ObjTab = class extends ObjNotationLine5 {
+var ObjTab = class extends ObjNotationLine6 {
   constructor(row, tabConfig, id) {
     super(row);
-    this.row = row;
     this.tabConfig = tabConfig;
     this.id = id;
     __publicField(this, "top", 0);
@@ -6984,7 +7521,7 @@ var ObjTab = class extends ObjNotationLine5 {
     __publicField(this, "tuningName");
     __publicField(this, "tuningStrings");
     __publicField(this, "mi");
-    if (Guard9.isArray(tabConfig.tuning)) {
+    if (guard_exports.isArray(tabConfig.tuning)) {
       this.tuningName = void 0;
       this.tuningStrings = tabConfig.tuning.map((noteName) => Note8.getNote(noteName)).reverse();
     } else if (typeof tabConfig.tuning === "string") {
@@ -7035,7 +7572,7 @@ var ObjTab = class extends ObjNotationLine5 {
     return this.bottom;
   }
   containsVoiceId(voiceId) {
-    return Guard9.isUndefined(this.tabConfig.voiceId) || Utils10.Arr.toArray(this.tabConfig.voiceId).includes(voiceId);
+    return guard_exports.isUndefined(this.tabConfig.voiceId) || utils_exports.Arr.toArray(this.tabConfig.voiceId).includes(voiceId);
   }
   containsDiatonicId(diatonicId) {
     return true;
@@ -7058,7 +7595,7 @@ var ObjTab = class extends ObjNotationLine5 {
     let h = unitSize * DocumentSettings.TabHeight;
     this.top = -h / 2;
     this.bottom = h / 2;
-    this.rect = new AnchoredRect22(0, 0, this.top, this.bottom);
+    this.rect = new AnchoredRect(0, 0, this.top, this.bottom);
   }
   layoutWidth(ctx) {
     this.rect.left = this.row.getRect().left;
@@ -7081,11 +7618,15 @@ 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";
+import { MusicError as MusicError14, MusicErrorType as MusicErrorType14 } from "@tspro/web-music-score/core";
 
 // src/score/engine/obj-score-row-group.ts
-import { AnchoredRect as AnchoredRect23 } from "@tspro/ts-utils-lib";
+function parseInstr(instr) {
+  const instrName = (instr.startsWith("!{") ? instr.substring(2) : instr.startsWith("!") ? instr.substring(1) : instr).trim();
+  const hideInstr = instr.startsWith("!");
+  const hideBrace = instr.startsWith("!{");
+  return { instrName, hideInstr, hideBrace };
+}
 var ObjScoreRowGroup = class extends MusicObject {
   constructor(lines) {
     var _a;
@@ -7093,11 +7634,16 @@ var ObjScoreRowGroup = class extends MusicObject {
     this.lines = lines;
     __publicField(this, "space", 0);
     __publicField(this, "instrument");
+    __publicField(this, "hasBrace");
     __publicField(this, "instrText");
-    __publicField(this, "braceRect", new AnchoredRect23());
+    __publicField(this, "braceRect", new AnchoredRect());
     __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);
+    const color = DocumentColor.RowGroup_Instrument;
+    const instr = parseInstr((_a = lines[0].getConfig().instrument) != null ? _a : "");
+    this.instrument = instr.instrName;
+    this.hasBrace = instr.hideBrace ? false : this.hasInstrument && lines.length >= 2;
+    const text = instr.hideInstr ? "" : this.instrument;
+    this.instrText = new ObjText(this, { text, color, scale: 1 }, 1, 0.5);
     this.mi = new MScoreRowGroup(this);
   }
   getMusicInterface() {
@@ -7106,12 +7652,12 @@ var ObjScoreRowGroup = class extends MusicObject {
   get row() {
     return this.lines[0].row;
   }
-  get hasBrace() {
-    return this.hasInstrument && this.lines.length > 1;
-  }
   get hasInstrument() {
     return this.instrument.length > 0;
   }
+  hasNotationLine(line) {
+    return this.lines.includes(line);
+  }
   pick(x, y) {
     if (!this.getRect().contains(x, y))
       return [];
@@ -7129,7 +7675,7 @@ var ObjScoreRowGroup = class extends MusicObject {
   layout(ctx) {
     this.space = ctx.unitSize;
     this.instrText.layout(ctx);
-    this.braceRect = new AnchoredRect23(-(this.hasBrace ? ctx.unitSize * 5 : 0), 0, 0, 0);
+    this.braceRect = new AnchoredRect(-(this.hasBrace ? ctx.unitSize * 5 : 0), 0, 0, 0);
     this.forceRectUpdate();
   }
   layoutToNotationLines() {
@@ -7146,7 +7692,8 @@ var ObjScoreRowGroup = class extends MusicObject {
   draw(ctx) {
     this.instrText.draw(ctx);
     if (this.hasBrace) {
-      ctx.color("brack").lineWidth(1).drawBracket(this.braceRect, "{");
+      const r = this.braceRect;
+      ctx.color(DocumentColor.RowGroup_Frame).lineWidth(1).drawBracket(r, "{");
     }
   }
 };
@@ -7200,6 +7747,7 @@ var ObjScoreRow = class extends MusicObject {
     __publicField(this, "staves");
     __publicField(this, "tabs");
     __publicField(this, "measures", []);
+    __publicField(this, "rowGroupByLine");
     __publicField(this, "needLayout", true);
     __publicField(this, "mi");
     this.notationLines = this.createNotationLines();
@@ -7216,6 +7764,7 @@ var ObjScoreRow = class extends MusicObject {
       }
     }
     this.rowGroups = lineGroups.filter((lines) => lines.length > 0).map((lines) => new ObjScoreRowGroup(lines));
+    this.rowGroupByLine = this.notationLines.map((line) => this.rowGroups.find((grp) => grp.lines.includes(line)));
     if (this.prevRow) {
       this.prevRow.nextRow = this;
     }
@@ -7242,9 +7791,12 @@ var ObjScoreRow = class extends MusicObject {
   getRowGroups() {
     return this.rowGroups;
   }
+  getRowGroupByLineId(id) {
+    return this.rowGroupByLine[id];
+  }
   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
+      (curLine) => utils_exports.Obj.deepEqual(line.row.scoreConfig, curLine.row.scoreConfig) && line.id === curLine.id || guard_exports.isNonEmptyString(line.getConfig().name) && line.getConfig().name === curLine.getConfig().name && line.getConfig().type === curLine.getConfig().type
     );
   }
   get regions() {
@@ -7267,7 +7819,7 @@ var ObjScoreRow = class extends MusicObject {
     if (topStaff) {
       return topStaff;
     } else {
-      throw new MusicError16(MusicErrorType16.Score, "Top staff is required!");
+      throw new MusicError14(MusicErrorType14.Score, "Top staff is required!");
     }
   }
   getBottomStaff() {
@@ -7275,7 +7827,7 @@ var ObjScoreRow = class extends MusicObject {
     if (bottomStaff) {
       return bottomStaff;
     } else {
-      throw new MusicError16(MusicErrorType16.Score, "Bottom staff is required!");
+      throw new MusicError14(MusicErrorType14.Score, "Bottom staff is required!");
     }
   }
   getStaff(diatonicId) {
@@ -7322,7 +7874,7 @@ var ObjScoreRow = class extends MusicObject {
     let r = this.getRect();
     let firstMeasure = this.getFirstMeasure();
     let left = firstMeasure ? firstMeasure.getColumnsContentRect().left : r.left;
-    return new AnchoredRect24(left, (left + r.right) / 2, r.right, r.top, r.anchorY, r.bottom);
+    return new AnchoredRect(left, (left + r.right) / 2, r.right, r.top, r.anchorY, r.bottom);
   }
   getDiatonicIdAt(y) {
     for (let i = 0; i < this.notationLines.length; i++) {
@@ -7369,7 +7921,7 @@ var ObjScoreRow = class extends MusicObject {
         return "up" /* Up */;
       }
       let diatonicIds = noteGroupDiatonicIds.length > 0 ? noteGroupDiatonicIds : restDiatonicIds;
-      let avgDiatonicId = Math.floor(Utils11.Math.avg(...diatonicIds));
+      let avgDiatonicId = Math.floor(utils_exports.Math.avg(...diatonicIds));
       let staves = this.getStaves().filter((staff) => staff.containsVoiceId(voiceId) && staff.containsDiatonicId(avgDiatonicId));
       return staves.length > 0 ? avgDiatonicId >= staves[0].middleLineDiatonicId ? "down" /* Down */ : "up" /* Up */ : "up" /* Up */;
     }
@@ -7401,7 +7953,7 @@ var ObjScoreRow = class extends MusicObject {
     if (!this.needLayout) {
       return;
     }
-    this.rect = new AnchoredRect24(this.regions.left, this.regions.right, 0, 0);
+    this.rect = new AnchoredRect(this.regions.left, this.regions.right, 0, 0);
     this.notationLines.forEach((line) => line.layoutWidth(ctx));
     this.rowGroups.forEach((grp) => grp.setRight(this.regions.instrRight));
     let targetColumnsAreaWidth = this.regions.staffWidth;
@@ -7440,7 +7992,7 @@ var ObjScoreRow = class extends MusicObject {
       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);
+    this.rect = new AnchoredRect(left, right, top, bottom);
   }
   alignStemsToBeams() {
     this.measures.forEach((m) => m.alignStemsToBeams());
@@ -7484,6 +8036,10 @@ var ObjScoreRow = class extends MusicObject {
     this.notationLines.forEach((l) => l.offset(dx, dy));
     this.rowGroups.forEach((grp) => grp.offset(dx, dy));
   }
+  getStaffLineLeft() {
+    var _a;
+    return (_a = this.getFirstMeasure()) == null ? void 0 : _a.getStaffLineLeft();
+  }
   draw(ctx) {
     ctx.drawDebugRect(this.getRect());
     const { left, top, width, height } = this.getRect();
@@ -7491,21 +8047,18 @@ var ObjScoreRow = class extends MusicObject {
     ctx.save();
     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();
-      let top2 = Math.min(...this.notationLines.map((line) => line.getTopLineY()));
-      let bottom = Math.max(...this.notationLines.map((line) => line.getBottomLineY()));
-      ctx.color("black").lineWidth(1).strokeLine(left2, top2, left2, bottom);
-    }
     this.measures.forEach((m) => m.draw(ctx));
     this.notationLines.forEach((m) => m.draw(ctx));
+    const staffLeft = this.getStaffLineLeft();
+    if (staffLeft !== void 0 && this.notationLines.length > 1) {
+      this.notationLines.forEach((line) => line.drawVerticalLine(ctx, staffLeft, ctx._lineWidth, true));
+    }
     this.rowGroups.forEach((grp) => grp.draw(ctx));
     ctx.restore();
   }
 };
 
 // src/score/engine/obj-header.ts
-import { AnchoredRect as AnchoredRect25 } from "@tspro/ts-utils-lib";
 var ObjHeader = class extends MusicObject {
   constructor(doc, title, composer, arranger) {
     super(doc);
@@ -7518,9 +8071,12 @@ var ObjHeader = class extends MusicObject {
     __publicField(this, "arrangerText");
     __publicField(this, "mi");
     this.mi = new MHeader(this);
-    this.titleText = this.title ? new ObjText(this, { text: this.title, scale: 2 }, 0.5, 0) : void 0;
-    this.composerText = this.composer ? new ObjText(this, this.composer, 1, 0) : void 0;
-    this.arrangerText = this.arranger ? new ObjText(this, "Arr.: " + this.arranger, 1, 0) : void 0;
+    const titleColor = DocumentColor.Header_Title;
+    const compColor = DocumentColor.Header_Composer;
+    const arrColor = DocumentColor.Header_Arranger;
+    this.titleText = this.title ? new ObjText(this, { text: this.title, color: titleColor, scale: 2 }, 0.5, 0) : void 0;
+    this.composerText = this.composer ? new ObjText(this, { text: this.composer, color: compColor }, 1, 0) : void 0;
+    this.arrangerText = this.arranger ? new ObjText(this, { text: "Arr.: " + this.arranger, color: arrColor }, 1, 0) : void 0;
   }
   getMusicInterface() {
     return this.mi;
@@ -7553,7 +8109,7 @@ var ObjHeader = class extends MusicObject {
     let top = 0;
     const left = this.doc.regions.staffLeft;
     const right = this.doc.regions.staffRight;
-    this.rect = new AnchoredRect25(left, right, 0, 0);
+    this.rect = new AnchoredRect(left, right, 0, 0);
     if (this.titleText) {
       this.titleText.layout(ctx);
       this.titleText.setCenterX((left + right) / 2);
@@ -7602,8 +8158,7 @@ var ObjHeader = class extends MusicObject {
 };
 
 // src/score/engine/obj-document.ts
-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";
+import { MusicError as MusicError15, MusicErrorType as MusicErrorType15 } from "@tspro/web-music-score/core";
 var ObjDocument = class extends MusicObject {
   constructor() {
     super(void 0);
@@ -7617,7 +8172,7 @@ var ObjDocument = class extends MusicObject {
     __publicField(this, "header");
     __publicField(this, "newRowRequested", false);
     __publicField(this, "allConnectiveProps", []);
-    __publicField(this, "staffGroups", new UniMap9());
+    __publicField(this, "staffGroups", new UniMap());
     __publicField(this, "mi");
     this.mi = new MDocument2(this);
   }
@@ -7625,7 +8180,7 @@ var ObjDocument = class extends MusicObject {
     return this.mi;
   }
   setScoreConfiguration(config) {
-    if (Guard11.isEnumValue(config, StaffPreset)) {
+    if (guard_exports.isEnumValue(config, StaffPreset)) {
       switch (config) {
         default:
         case "treble" /* Treble */:
@@ -7653,7 +8208,7 @@ var ObjDocument = class extends MusicObject {
           ];
           break;
       }
-    } else if (Guard11.isArray(config)) {
+    } else if (guard_exports.isArray(config)) {
       this.curScoreConfig = config;
     } else {
       this.curScoreConfig = [config];
@@ -7666,10 +8221,10 @@ var ObjDocument = class extends MusicObject {
       }
       if (treble && treble.type === "staff" && treble.isGrand) {
         if (treble.grandId !== void 0) {
-          throw new MusicError17(MusicErrorType17.Score, `Grand staff error: mixing isGrand and grandId!`);
+          throw new MusicError15(MusicErrorType15.Score, `Grand staff error: mixing isGrand and grandId!`);
         } else if (bass && bass.type === "staff" && bass.isGrand) {
           if (bass.grandId !== void 0) {
-            throw new MusicError17(MusicErrorType17.Score, `Grand staff error: mixing isGrand and grandId!`);
+            throw new MusicError15(MusicErrorType15.Score, `Grand staff error: mixing isGrand and grandId!`);
           } else {
             treble.grandId = grandId;
             bass.grandId = grandId;
@@ -7677,7 +8232,7 @@ var ObjDocument = class extends MusicObject {
             cfgId += 2;
           }
         } else {
-          throw new MusicError17(MusicErrorType17.Score, `Grand staff error: invalid use of isGrand!`);
+          throw new MusicError15(MusicErrorType15.Score, `Grand staff error: invalid use of isGrand!`);
         }
       } else {
         cfgId++;
@@ -7688,20 +8243,20 @@ var ObjDocument = class extends MusicObject {
       let bass = this.curScoreConfig[cfgId + 1];
       if (treble && bass && treble.type === "staff" && bass.type === "staff" && treble.grandId !== void 0 && treble.grandId === bass.grandId) {
         if (usedGrandIdes.includes(treble.grandId)) {
-          throw new MusicError17(MusicErrorType17.Score, `Grand staff error: grandId "${treble.grandId}" already used!`);
+          throw new MusicError15(MusicErrorType15.Score, `Grand staff error: grandId "${treble.grandId}" already used!`);
         } else if (treble.clef !== "G" /* G */) {
-          throw new MusicError17(MusicErrorType17.Score, `Grand staff error: Invalid treble clef "${treble.clef}"!`);
+          throw new MusicError15(MusicErrorType15.Score, `Grand staff error: Invalid treble clef "${treble.clef}"!`);
         } else if (bass.clef !== "F" /* F */) {
-          throw new MusicError17(MusicErrorType17.Score, `Grand staff error: Invalid treble clef "${treble.clef}"!`);
+          throw new MusicError15(MusicErrorType15.Score, `Grand staff error: Invalid treble clef "${treble.clef}"!`);
         } else if (treble.isOctaveDown || bass.isOctaveDown) {
-          throw new MusicError17(MusicErrorType17.Score, `Grand staff error: cannot use isOctaveDown option!`);
+          throw new MusicError15(MusicErrorType15.Score, `Grand staff error: cannot use isOctaveDown option!`);
         }
         usedGrandIdes.push(treble.grandId);
         treble.minNote = "C4";
         bass.maxNote = "B3";
         cfgId += 2;
       } else if (treble && treble.type === "staff" && treble.grandId !== void 0) {
-        throw new MusicError17(MusicErrorType17.Score, `Grand staff error: invalid use of grandId "${treble.grandId}"!`);
+        throw new MusicError15(MusicErrorType15.Score, `Grand staff error: invalid use of grandId "${treble.grandId}"!`);
       } else {
         cfgId++;
       }
@@ -7847,7 +8402,7 @@ var ObjDocument = class extends MusicObject {
     this.rows.forEach((row) => row.layoutStretch(ctx));
     this.rows.forEach((row) => row.layoutLayoutGroups(ctx));
     this.rows.forEach((row) => row.layoutSetNotationLines(ctx));
-    this.rect = new AnchoredRect26();
+    this.rect = new AnchoredRect();
     if (this.header) {
       this.header.layout(ctx);
       this.rect.expandInPlace(this.header.getRect());
@@ -7864,13 +8419,10 @@ var ObjDocument = class extends MusicObject {
   }
   drawContent() {
     const { ctx } = this;
-    if (!ctx) {
-      return;
-    }
+    if (!ctx) return;
     this.rows.forEach((row) => row.draw(ctx));
-    if (this.header) {
+    if (this.header)
       this.header.draw(ctx);
-    }
   }
   pickStaffPosAt(x, y) {
     if (!this.rect.contains(x, y)) {
@@ -7913,7 +8465,7 @@ var ObjDocument = class extends MusicObject {
 
 // src/score/pub/document-builder.ts
 import { BeamGrouping, isNoteLength, isTupletRatio, KeySignature as KeySignature3, Note as Note10, NoteLength as NoteLength8, RhythmProps as RhythmProps6, Scale as Scale2, ScaleType, SymbolSet as SymbolSet2, TimeSignature as TimeSignature2, TimeSignatures, TuningNameList } from "@tspro/web-music-score/theory";
-import { MusicError as MusicError18, MusicErrorType as MusicErrorType18 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError16, MusicErrorType as MusicErrorType16 } from "@tspro/web-music-score/core";
 var assertingFunction = "";
 function setAssertFunction(fnName, ...fnArgs) {
   let argsStr = fnArgs.map((arg) => JSON.stringify(arg)).join(", ");
@@ -7921,95 +8473,95 @@ function setAssertFunction(fnName, ...fnArgs) {
 }
 function assertArg(...conditions) {
   conditions.forEach((condition) => {
-    if (!condition) throw new MusicError18(MusicErrorType18.Score, assertingFunction);
+    if (!condition) throw new MusicError16(MusicErrorType16.Score, assertingFunction);
   });
 }
 function assertArgMsg(condition, msg) {
-  if (!condition) throw new MusicError18(MusicErrorType18.Score, msg);
+  if (!condition) throw new MusicError16(MusicErrorType16.Score, msg);
 }
 function assertBaseConfig(baseConfig) {
   var _a;
   assertArg(
-    Guard12.isObject(baseConfig),
-    Guard12.isStringOrUndefined(baseConfig.name),
-    Guard12.isUndefined(baseConfig.voiceId) || isVoiceId(baseConfig.voiceId) || Guard12.isArray(baseConfig.voiceId) && baseConfig.voiceId.every((voiceId) => isVoiceId(voiceId))
+    guard_exports.isObject(baseConfig),
+    guard_exports.isStringOrUndefined(baseConfig.name),
+    guard_exports.isUndefined(baseConfig.voiceId) || isVoiceId(baseConfig.voiceId) || guard_exports.isArray(baseConfig.voiceId) && baseConfig.voiceId.every((voiceId) => isVoiceId(voiceId))
   );
-  if (!Guard12.isUndefined(baseConfig.voiceIds)) {
-    assertArg(isVoiceId(baseConfig.voiceIds) || Guard12.isArray(baseConfig.voiceIds) && baseConfig.voiceIds.every((voiceId) => isVoiceId(voiceId)));
+  if (!guard_exports.isUndefined(baseConfig.voiceIds)) {
+    assertArg(isVoiceId(baseConfig.voiceIds) || guard_exports.isArray(baseConfig.voiceIds) && baseConfig.voiceIds.every((voiceId) => isVoiceId(voiceId)));
     console.warn(`Staff/tab config property 'voiceIds' is deprecated, use 'voiceId' instead.`);
-    let arr = Utils12.Arr.toArray((_a = baseConfig.voiceId) != null ? _a : []);
-    Utils12.Arr.toArray(baseConfig.voiceIds).forEach((voiceId) => arr.push(voiceId));
+    let arr = utils_exports.Arr.toArray((_a = baseConfig.voiceId) != null ? _a : []);
+    utils_exports.Arr.toArray(baseConfig.voiceIds).forEach((voiceId) => arr.push(voiceId));
     baseConfig.voiceId = arr;
   }
-  if (Guard12.isArray(baseConfig.voiceId)) {
-    baseConfig.voiceId = Utils12.Arr.removeDuplicates(baseConfig.voiceId);
+  if (guard_exports.isArray(baseConfig.voiceId)) {
+    baseConfig.voiceId = utils_exports.Arr.removeDuplicates(baseConfig.voiceId);
   }
-  assertArg(Guard12.isStringOrUndefined(baseConfig.instrument));
+  assertArg(guard_exports.isStringOrUndefined(baseConfig.instrument));
 }
 function assertStaffConfig(staffConfig) {
   assertBaseConfig(staffConfig);
   assertArg(
-    Guard12.isObject(staffConfig),
-    Guard12.isStrictEqual(staffConfig.type, "staff"),
-    Guard12.isEnumValue(staffConfig.clef, Clef),
-    Guard12.isBooleanOrUndefined(staffConfig.isOctaveDown),
-    Guard12.isUndefined(staffConfig.minNote) || Note10.isNote(staffConfig.minNote),
-    Guard12.isUndefined(staffConfig.maxNote) || Note10.isNote(staffConfig.maxNote),
-    Guard12.isStringOrUndefined(staffConfig.grandId),
-    Guard12.isBooleanOrUndefined(staffConfig.isGrand)
+    guard_exports.isObject(staffConfig),
+    guard_exports.isStrictEqual(staffConfig.type, "staff"),
+    guard_exports.isEnumValue(staffConfig.clef, Clef),
+    guard_exports.isBooleanOrUndefined(staffConfig.isOctaveDown),
+    guard_exports.isUndefined(staffConfig.minNote) || Note10.isNote(staffConfig.minNote),
+    guard_exports.isUndefined(staffConfig.maxNote) || Note10.isNote(staffConfig.maxNote),
+    guard_exports.isStringOrUndefined(staffConfig.grandId),
+    guard_exports.isBooleanOrUndefined(staffConfig.isGrand)
   );
-  if (!Guard12.isUndefined(staffConfig.isGrand))
+  if (!guard_exports.isUndefined(staffConfig.isGrand))
     console.warn(`Staff config property 'isGrand' is deprecated, use 'grandId' instead.`);
 }
 function assertTabConfig(tabConfig) {
   assertBaseConfig(tabConfig);
   assertArg(
-    Guard12.isObject(tabConfig),
-    Guard12.isStrictEqual(tabConfig.type, "tab"),
-    Guard12.isUndefined(tabConfig.tuning) || Guard12.isString(tabConfig.tuning) && Guard12.isIncluded(tabConfig.tuning, TuningNameList) || Guard12.isArray(tabConfig.tuning) && Guard12.isStrictEqual(tabConfig.tuning.length, getStringNumbers().length && tabConfig.tuning.every((s) => Note10.isNote(s)))
+    guard_exports.isObject(tabConfig),
+    guard_exports.isStrictEqual(tabConfig.type, "tab"),
+    guard_exports.isUndefined(tabConfig.tuning) || guard_exports.isString(tabConfig.tuning) && guard_exports.isIncluded(tabConfig.tuning, TuningNameList) || guard_exports.isArray(tabConfig.tuning) && guard_exports.isStrictEqual(tabConfig.tuning.length, getStringNumbers().length && tabConfig.tuning.every((s) => Note10.isNote(s)))
   );
 }
 function assertNoteOptions(noteOptions) {
   assertArg(
-    Guard12.isObject(noteOptions),
-    Guard12.isBooleanOrUndefined(noteOptions.dotted) || Guard12.isIntegerGte(noteOptions.dotted, 0),
-    Guard12.isEnumValueOrUndefined(noteOptions.stem, Stem),
-    Guard12.isStringOrUndefined(noteOptions.color),
-    Guard12.isBooleanOrUndefined(noteOptions.arpeggio) || Guard12.isEnumValue(noteOptions.arpeggio, Arpeggio),
-    Guard12.isBooleanOrUndefined(noteOptions.staccato),
-    Guard12.isBooleanOrUndefined(noteOptions.diamond),
-    Guard12.isBooleanOrUndefined(noteOptions.triplet),
-    Guard12.isUndefined(noteOptions.string) || isStringNumber(noteOptions.string) || Guard12.isEmptyArray(noteOptions.string) || Guard12.isNonEmptyArray(noteOptions.string) && noteOptions.string.every((string) => isStringNumber(string))
+    guard_exports.isObject(noteOptions),
+    guard_exports.isBooleanOrUndefined(noteOptions.dotted) || guard_exports.isIntegerGte(noteOptions.dotted, 0),
+    guard_exports.isEnumValueOrUndefined(noteOptions.stem, Stem),
+    guard_exports.isStringOrUndefined(noteOptions.color),
+    guard_exports.isBooleanOrUndefined(noteOptions.arpeggio) || guard_exports.isEnumValue(noteOptions.arpeggio, Arpeggio),
+    guard_exports.isBooleanOrUndefined(noteOptions.staccato),
+    guard_exports.isBooleanOrUndefined(noteOptions.diamond),
+    guard_exports.isBooleanOrUndefined(noteOptions.triplet),
+    guard_exports.isUndefined(noteOptions.string) || isStringNumber(noteOptions.string) || guard_exports.isEmptyArray(noteOptions.string) || guard_exports.isNonEmptyArray(noteOptions.string) && noteOptions.string.every((string) => isStringNumber(string))
   );
-  assertArgMsg(Guard12.isUndefined(noteOptions.tieSpan), `NoteOptions.tieSpan was removed. Use addConnective("tie", tieSpan)`);
-  assertArgMsg(Guard12.isUndefined(noteOptions.slurSpan), `NoteOptions.slurSpan was removed. Use addConnective("slur", slurSpan)`);
+  assertArgMsg(guard_exports.isUndefined(noteOptions.tieSpan), `NoteOptions.tieSpan was removed. Use addConnective("tie", tieSpan)`);
+  assertArgMsg(guard_exports.isUndefined(noteOptions.slurSpan), `NoteOptions.slurSpan was removed. Use addConnective("slur", slurSpan)`);
 }
 function assertRestOptions(restOptions) {
   assertArg(
-    Guard12.isObject(restOptions),
-    Guard12.isBooleanOrUndefined(restOptions.dotted) || Guard12.isIntegerGte(restOptions.dotted, 0),
-    Guard12.isStringOrUndefined(restOptions.staffPos) || Guard12.isInteger(restOptions.staffPos) || restOptions.staffPos instanceof Note10,
-    Guard12.isStringOrUndefined(restOptions.color),
-    Guard12.isBooleanOrUndefined(restOptions.hide),
-    Guard12.isBooleanOrUndefined(restOptions.triplet)
+    guard_exports.isObject(restOptions),
+    guard_exports.isBooleanOrUndefined(restOptions.dotted) || guard_exports.isIntegerGte(restOptions.dotted, 0),
+    guard_exports.isStringOrUndefined(restOptions.staffPos) || guard_exports.isInteger(restOptions.staffPos) || restOptions.staffPos instanceof Note10,
+    guard_exports.isStringOrUndefined(restOptions.color),
+    guard_exports.isBooleanOrUndefined(restOptions.hide),
+    guard_exports.isBooleanOrUndefined(restOptions.triplet)
   );
 }
 function assertLyricsOptions(lyricsOptions) {
   assertArg(
-    Guard12.isObject(lyricsOptions),
-    Guard12.isEnumValueOrUndefined(lyricsOptions.align, LyricsAlign),
-    Guard12.isEnumValueOrUndefined(lyricsOptions.hyphen, LyricsHyphen)
+    guard_exports.isObject(lyricsOptions),
+    guard_exports.isEnumValueOrUndefined(lyricsOptions.align, LyricsAlign),
+    guard_exports.isEnumValueOrUndefined(lyricsOptions.hyphen, LyricsHyphen)
   );
 }
 function assertMeasureOptions(measureOptions) {
   assertArg(
-    Guard12.isObject(measureOptions),
-    Guard12.isBooleanOrUndefined(measureOptions.showNumber)
+    guard_exports.isObject(measureOptions),
+    guard_exports.isBooleanOrUndefined(measureOptions.showNumber)
   );
 }
 function assertStaffTabOrGRoups(staffTabOrGroups) {
   assertArg(
-    Guard12.isStringOrUndefined(staffTabOrGroups) || Guard12.isIntegerGte(staffTabOrGroups, 0) || Guard12.isNonEmptyArray(staffTabOrGroups) && staffTabOrGroups.every((staffTabOrGroup) => Guard12.isString(staffTabOrGroup) || Guard12.isIntegerGte(staffTabOrGroup, 0))
+    guard_exports.isStringOrUndefined(staffTabOrGroups) || guard_exports.isIntegerGte(staffTabOrGroups, 0) || guard_exports.isNonEmptyArray(staffTabOrGroups) && staffTabOrGroups.every((staffTabOrGroup) => guard_exports.isString(staffTabOrGroup) || guard_exports.isIntegerGte(staffTabOrGroup, 0))
   );
 }
 var _DocumentBuilder = class _DocumentBuilder {
@@ -8023,19 +8575,19 @@ var _DocumentBuilder = class _DocumentBuilder {
   }
   setScoreConfiguration(config) {
     setAssertFunction("setScoreConfiguration", config);
-    if (Guard12.isEnumValue(config, StaffPreset)) {
+    if (guard_exports.isEnumValue(config, StaffPreset)) {
       this.doc.setScoreConfiguration(config);
-    } else if (Guard12.isObject(config) && config.type === "staff") {
+    } else if (guard_exports.isObject(config) && config.type === "staff") {
       assertStaffConfig(config);
       this.doc.setScoreConfiguration(config);
-    } else if (Guard12.isObject(config) && config.type === "tab") {
+    } else if (guard_exports.isObject(config) && config.type === "tab") {
       assertTabConfig(config);
       this.doc.setScoreConfiguration(config);
-    } else if (Guard12.isNonEmptyArray(config)) {
+    } else if (guard_exports.isNonEmptyArray(config)) {
       config.forEach((c) => {
-        if (Guard12.isObject(c) && c.type === "staff") {
+        if (guard_exports.isObject(c) && c.type === "staff") {
           assertStaffConfig(c);
-        } else if (Guard12.isObject(c) && c.type === "tab") {
+        } else if (guard_exports.isObject(c) && c.type === "tab") {
           assertTabConfig(c);
         } else {
           assertArg(false);
@@ -8068,9 +8620,9 @@ var _DocumentBuilder = class _DocumentBuilder {
   setHeader(title, composer, arranger) {
     setAssertFunction("setHeader", title, composer, arranger);
     assertArg(
-      Guard12.isStringOrUndefined(title),
-      Guard12.isStringOrUndefined(composer),
-      Guard12.isStringOrUndefined(arranger)
+      guard_exports.isStringOrUndefined(title),
+      guard_exports.isStringOrUndefined(composer),
+      guard_exports.isStringOrUndefined(arranger)
     );
     this.doc.setHeader(title, composer, arranger);
     return this;
@@ -8082,7 +8634,7 @@ var _DocumentBuilder = class _DocumentBuilder {
    */
   setMeasuresPerRow(measuresPerRow) {
     setAssertFunction("setMeasuresPerRow", measuresPerRow);
-    assertArg(Guard12.isIntegerGte(measuresPerRow, 1) || Guard12.isPosInfinity(measuresPerRow));
+    assertArg(guard_exports.isIntegerGte(measuresPerRow, 1) || guard_exports.isPosInfinity(measuresPerRow));
     this.doc.setMeasuresPerRow(measuresPerRow);
     return this;
   }
@@ -8100,7 +8652,7 @@ var _DocumentBuilder = class _DocumentBuilder {
   }
   setKeySignature(...args) {
     setAssertFunction("setKeySignature", ...args);
-    assertArg(args[0] instanceof Scale2 || args[0] instanceof KeySignature3 || Guard12.isNonEmptyString(args[0]) && Guard12.isEnumValueOrUndefined(args[1], ScaleType));
+    assertArg(args[0] instanceof Scale2 || args[0] instanceof KeySignature3 || guard_exports.isNonEmptyString(args[0]) && guard_exports.isEnumValueOrUndefined(args[1], ScaleType));
     this.getMeasure().setKeySignature(...args);
     return this;
   }
@@ -8108,9 +8660,9 @@ var _DocumentBuilder = class _DocumentBuilder {
     setAssertFunction("setTimeSignature", ...args);
     if (args[0] instanceof TimeSignature2) {
       this.getMeasure().setTimeSignature(args[0]);
-    } else if (Guard12.isEnumValue(args[0], TimeSignatures) && Guard12.isEnumValueOrUndefined(args[1], BeamGrouping)) {
+    } else if (guard_exports.isEnumValue(args[0], TimeSignatures) && guard_exports.isEnumValueOrUndefined(args[1], BeamGrouping)) {
       this.getMeasure().setTimeSignature(new TimeSignature2(args[0], args[1]));
-    } else if (Guard12.isIntegerGte(args[0], 1) && Guard12.isIntegerGte(args[1], 1) && Guard12.isEnumValueOrUndefined(args[2], BeamGrouping)) {
+    } else if (guard_exports.isIntegerGte(args[0], 1) && guard_exports.isIntegerGte(args[1], 1) && guard_exports.isEnumValueOrUndefined(args[2], BeamGrouping)) {
       this.getMeasure().setTimeSignature(new TimeSignature2(args[0], args[1], args[2]));
     } else {
       assertArg(false);
@@ -8120,8 +8672,8 @@ var _DocumentBuilder = class _DocumentBuilder {
   setTempo(beatsPerMinute, beatLength, dotted) {
     setAssertFunction("setTempo", beatsPerMinute, beatLength, dotted);
     assertArg(
-      Guard12.isIntegerGte(beatsPerMinute, 1),
-      Guard12.isUndefined(beatLength) && Guard12.isUndefined(dotted) || isNoteLength(beatLength) && (Guard12.isBooleanOrUndefined(dotted) || Guard12.isIntegerGte(dotted, 0))
+      guard_exports.isIntegerGte(beatsPerMinute, 1),
+      guard_exports.isUndefined(beatLength) && guard_exports.isUndefined(dotted) || isNoteLength(beatLength) && (guard_exports.isBooleanOrUndefined(dotted) || guard_exports.isIntegerGte(dotted, 0))
     );
     this.getMeasure().setTempo(beatsPerMinute, beatLength, dotted);
     return this;
@@ -8138,15 +8690,15 @@ var _DocumentBuilder = class _DocumentBuilder {
     setAssertFunction("addNote", voiceId, note, noteLength, noteOptions);
     assertArg(
       isVoiceId(voiceId),
-      note instanceof Note10 || Guard12.isNonEmptyString(note) || Guard12.isArray(note) && note.every((note2) => note2 instanceof Note10 || Guard12.isNonEmptyString(note2)),
+      note instanceof Note10 || guard_exports.isNonEmptyString(note) || guard_exports.isArray(note) && note.every((note2) => note2 instanceof Note10 || guard_exports.isNonEmptyString(note2)),
       isNoteLength(noteLength)
     );
     noteOptions != null ? noteOptions : noteOptions = {};
     assertNoteOptions(noteOptions);
-    if (Guard12.isArray(note)) {
+    if (guard_exports.isArray(note)) {
       let string = noteOptions.string;
       note.forEach((note2, noteId) => {
-        noteOptions.string = Guard12.isArray(string) ? string[noteId] : string;
+        noteOptions.string = guard_exports.isArray(string) ? string[noteId] : string;
         this.getMeasure().addNoteGroup(voiceId, [note2], noteLength, noteOptions);
       });
     } else {
@@ -8166,7 +8718,7 @@ var _DocumentBuilder = class _DocumentBuilder {
     setAssertFunction("addChord", voiceId, notes, noteLength, noteOptions);
     assertArg(
       isVoiceId(voiceId),
-      Guard12.isNonEmptyArray(notes) && notes.every((note) => note instanceof Note10 || Guard12.isNonEmptyString(note)),
+      guard_exports.isNonEmptyArray(notes) && notes.every((note) => note instanceof Note10 || guard_exports.isNonEmptyString(note)),
       isNoteLength(noteLength)
     );
     noteOptions != null ? noteOptions : noteOptions = {};
@@ -8211,24 +8763,24 @@ var _DocumentBuilder = class _DocumentBuilder {
     setAssertFunction("addTuplet", voiceId, tupletRatio);
     assertArg(
       isVoiceId(voiceId),
-      Guard12.isFunction(tupletBuilder),
-      isTupletRatio(tupletRatio) && Guard12.isBooleanOrUndefined(tupletRatio.showRatio)
+      guard_exports.isFunction(tupletBuilder),
+      isTupletRatio(tupletRatio) && guard_exports.isBooleanOrUndefined(tupletRatio.showRatio)
     );
     let tupletSymbols = [];
     const helper = {
       addNote: (note, noteLength, noteOptions) => {
         setAssertFunction("addTuplet => addNote", note, noteLength, noteOptions);
         assertArg(
-          note instanceof Note10 || Guard12.isNonEmptyString(note) || Guard12.isArray(note) && note.every((note2) => note2 instanceof Note10 || Guard12.isNonEmptyString(note2)),
+          note instanceof Note10 || guard_exports.isNonEmptyString(note) || guard_exports.isArray(note) && note.every((note2) => note2 instanceof Note10 || guard_exports.isNonEmptyString(note2)),
           isNoteLength(noteLength)
         );
         noteOptions != null ? noteOptions : noteOptions = {};
         delete noteOptions.triplet;
         assertNoteOptions(noteOptions);
-        if (Guard12.isArray(note)) {
+        if (guard_exports.isArray(note)) {
           let string = noteOptions.string;
           note.forEach((note2, noteId) => {
-            noteOptions.string = Guard12.isArray(string) ? string[noteId] : string;
+            noteOptions.string = guard_exports.isArray(string) ? string[noteId] : string;
             let s = this.getMeasure().addNoteGroup(voiceId, [note2], noteLength, noteOptions, tupletRatio);
             tupletSymbols.push(s);
           });
@@ -8241,7 +8793,7 @@ var _DocumentBuilder = class _DocumentBuilder {
       addChord: (notes, noteLength, noteOptions) => {
         setAssertFunction("addTuplet => addChord", notes, noteLength, noteOptions);
         assertArg(
-          Guard12.isNonEmptyArray(notes) && notes.every((note) => note instanceof Note10 || Guard12.isNonEmptyString(note)),
+          guard_exports.isNonEmptyArray(notes) && notes.every((note) => note instanceof Note10 || guard_exports.isNonEmptyString(note)),
           isNoteLength(noteLength)
         );
         noteOptions != null ? noteOptions : noteOptions = {};
@@ -8271,8 +8823,8 @@ var _DocumentBuilder = class _DocumentBuilder {
     assertStaffTabOrGRoups(staffTabOrGroups);
     assertArg(
       isVerseNumber(verse),
-      Guard12.isEnumValue(lyricsLength, NoteLength8),
-      Guard12.isString(lyricsText) || Guard12.isArray(lyricsText) && lyricsText.every((text) => Guard12.isString(text))
+      guard_exports.isEnumValue(lyricsLength, NoteLength8),
+      guard_exports.isString(lyricsText) || guard_exports.isArray(lyricsText) && lyricsText.every((text) => guard_exports.isString(text))
     );
     lyricsOptions != null ? lyricsOptions : lyricsOptions = {};
     assertLyricsOptions(lyricsOptions);
@@ -8281,7 +8833,7 @@ var _DocumentBuilder = class _DocumentBuilder {
     } else {
       (_a = lyricsOptions.align) != null ? _a : lyricsOptions.align = this.currentLyricsAlign;
     }
-    if (Guard12.isArray(lyricsText)) {
+    if (guard_exports.isArray(lyricsText)) {
       lyricsText.forEach((text) => this.getMeasure().addLyrics(staffTabOrGroups, verse, lyricsLength, text, lyricsOptions));
     } else {
       this.getMeasure().addLyrics(staffTabOrGroups, verse, lyricsLength, lyricsText, lyricsOptions);
@@ -8315,7 +8867,7 @@ var _DocumentBuilder = class _DocumentBuilder {
   }
   addFermataInternal(staffTabOrGroups, fermata) {
     assertStaffTabOrGRoups(staffTabOrGroups);
-    assertArg(Guard12.isEnumValue(fermata, Fermata));
+    assertArg(guard_exports.isEnumValue(fermata, Fermata));
     this.getMeasure().addFermata(staffTabOrGroups, fermata);
     return this;
   }
@@ -8341,7 +8893,7 @@ var _DocumentBuilder = class _DocumentBuilder {
   addNavigationInternal(staffTabOrGroups, navigation, ...args) {
     assertStaffTabOrGRoups(staffTabOrGroups);
     assertArg(
-      Guard12.isStrictEqual(navigation, "endRepeat" /* EndRepeat */) && Guard12.isStrictEqual(args.length, 1) || Guard12.isStrictEqual(navigation, "ending" /* Ending */) && Guard12.isIntegerGte(args.length, 1) && args.every((passage) => Guard12.isIntegerGte(passage, 1)) || Guard12.isEnumValue(navigation, Navigation) && Guard12.isEmptyArray(args)
+      guard_exports.isStrictEqual(navigation, "endRepeat" /* EndRepeat */) && guard_exports.isStrictEqual(args.length, 1) || guard_exports.isStrictEqual(navigation, "ending" /* Ending */) && guard_exports.isIntegerGte(args.length, 1) && args.every((passage) => guard_exports.isIntegerGte(passage, 1)) || guard_exports.isEnumValue(navigation, Navigation) && guard_exports.isEmptyArray(args)
     );
     this.getMeasure().addNavigation(staffTabOrGroups, navigation, ...args);
     return this;
@@ -8357,12 +8909,12 @@ var _DocumentBuilder = class _DocumentBuilder {
   addAnnotationInternal(staffTabOrGroups, annotation, text) {
     annotation != null ? annotation : annotation = getAnnotation(text);
     if (annotation === void 0) {
-      throw new MusicError18(MusicErrorType18.Score, `Annotation text "${text}" is not known annotation.`);
+      throw new MusicError16(MusicErrorType16.Score, `Annotation text "${text}" is not known annotation.`);
     }
     assertStaffTabOrGRoups(staffTabOrGroups);
     assertArg(
-      Guard12.isEnumValue(annotation, Annotation),
-      Guard12.isNonEmptyString(text)
+      guard_exports.isEnumValue(annotation, Annotation),
+      guard_exports.isNonEmptyString(text)
     );
     this.getMeasure().addAnnotation(staffTabOrGroups, annotation, text);
     return this;
@@ -8386,8 +8938,8 @@ var _DocumentBuilder = class _DocumentBuilder {
   addLabelInternal(staffTabOrGroups, label, text) {
     assertStaffTabOrGRoups(staffTabOrGroups);
     assertArg(
-      Guard12.isEnumValue(label, Label),
-      Guard12.isNonEmptyString(text)
+      guard_exports.isEnumValue(label, Label),
+      guard_exports.isNonEmptyString(text)
     );
     this.getMeasure().addLabel(staffTabOrGroups, label, text);
     return this;
@@ -8415,21 +8967,21 @@ var _DocumentBuilder = class _DocumentBuilder {
   }
   addConnective(connective, ...args) {
     setAssertFunction("addConnective", connective, ...args);
-    assertArg(Guard12.isEnumValue(connective, Connective));
+    assertArg(guard_exports.isEnumValue(connective, Connective));
     if (connective === "tie" /* Tie */) {
-      assertArg(Guard12.isIntegerOrUndefined(args[0]) || Guard12.isEnumValue(args[0], TieType));
-      assertArg(Guard12.isEnumValueOrUndefined(args[1], NoteAnchor));
+      assertArg(guard_exports.isIntegerOrUndefined(args[0]) || guard_exports.isEnumValue(args[0], TieType));
+      assertArg(guard_exports.isEnumValueOrUndefined(args[1], NoteAnchor));
       let tieSpan = args[0];
       let noteAnchor = args[1];
       this.getMeasure().addConnective(connective, tieSpan, noteAnchor);
     } else if (connective === "slur" /* Slur */) {
-      assertArg(Guard12.isIntegerOrUndefined(args[0]));
-      assertArg(Guard12.isEnumValueOrUndefined(args[1], NoteAnchor));
+      assertArg(guard_exports.isIntegerOrUndefined(args[0]));
+      assertArg(guard_exports.isEnumValueOrUndefined(args[1], NoteAnchor));
       let slurSpan = args[0];
       let noteAnchor = args[1];
       this.getMeasure().addConnective(connective, slurSpan, noteAnchor);
     } else if (connective === "slide" /* Slide */) {
-      assertArg(Guard12.isEnumValueOrUndefined(args[0], NoteAnchor));
+      assertArg(guard_exports.isEnumValueOrUndefined(args[0], NoteAnchor));
       let noteAnchor = args[0];
       this.getMeasure().addConnective(connective, noteAnchor);
     }
@@ -8449,20 +9001,20 @@ var _DocumentBuilder = class _DocumentBuilder {
    */
   addExtension(extensionBuilder) {
     setAssertFunction("addExtension");
-    assertArgMsg(Guard12.isFunctionOrUndefined(extensionBuilder), "addExtension() has new usage, e.g. addExtension(ext => ext.measures(2)).");
+    assertArgMsg(guard_exports.isFunctionOrUndefined(extensionBuilder), "addExtension() has new usage, e.g. addExtension(ext => ext.measures(2)).");
     let ticks = 0;
     let visible = true;
     const helper = {
       notes: (noteLength, noteCount) => {
         setAssertFunction("addExtension.notes", noteLength, noteCount);
         assertArg(isNoteLength(noteLength));
-        assertArg(Guard12.isUndefined(noteCount) || Guard12.isNumber(noteCount) && noteCount >= 0);
+        assertArg(guard_exports.isUndefined(noteCount) || guard_exports.isNumber(noteCount) && noteCount >= 0);
         ticks += RhythmProps6.get(noteLength).ticks * (noteCount != null ? noteCount : 1);
         return helper;
       },
       measures: (measureCount) => {
         setAssertFunction("addExtension.measures", measureCount);
-        assertArg(Guard12.isNumber(measureCount) && measureCount >= 1);
+        assertArg(guard_exports.isNumber(measureCount) && measureCount >= 1);
         ticks += this.getMeasure().getMeasureTicks() * measureCount;
         return helper;
       },
@@ -8495,9 +9047,9 @@ var _DocumentBuilder = class _DocumentBuilder {
   addStaffGroup(groupName, staffsTabsAndGroups, verticalPosition = "auto" /* Auto */) {
     setAssertFunction("addStaffGroup", groupName, staffsTabsAndGroups, verticalPosition);
     assertArg(
-      Guard12.isNonEmptyString(groupName),
-      Guard12.isNonEmptyString(staffsTabsAndGroups) || Guard12.isIntegerGte(staffsTabsAndGroups, 0) || Guard12.isNonEmptyArray(staffsTabsAndGroups) && staffsTabsAndGroups.every((line) => Guard12.isNonEmptyString(line) || Guard12.isIntegerGte(line, 0)),
-      Guard12.isEnumValue(verticalPosition, VerticalPosition)
+      guard_exports.isNonEmptyString(groupName),
+      guard_exports.isNonEmptyString(staffsTabsAndGroups) || guard_exports.isIntegerGte(staffsTabsAndGroups, 0) || guard_exports.isNonEmptyArray(staffsTabsAndGroups) && staffsTabsAndGroups.every((line) => guard_exports.isNonEmptyString(line) || guard_exports.isIntegerGte(line, 0)),
+      guard_exports.isEnumValue(verticalPosition, VerticalPosition)
     );
     this.doc.addStaffGroup(groupName, staffsTabsAndGroups, verticalPosition);
     return this;
@@ -8537,7 +9089,7 @@ var _DocumentBuilder = class _DocumentBuilder {
    */
   completeRests(voiceId) {
     setAssertFunction("completeRests", voiceId);
-    assertArg(Guard12.isUndefined(voiceId) || isVoiceId(voiceId) || Guard12.isArray(voiceId) && voiceId.every((id) => isVoiceId(id)));
+    assertArg(guard_exports.isUndefined(voiceId) || isVoiceId(voiceId) || guard_exports.isArray(voiceId) && voiceId.every((id) => isVoiceId(id)));
     this.getMeasure().completeRests(voiceId);
     return this;
   }
@@ -8551,8 +9103,8 @@ var _DocumentBuilder = class _DocumentBuilder {
   addScaleArpeggio(scale, bottomNote, numOctaves) {
     setAssertFunction("addScaleArpeggio", scale, bottomNote, numOctaves);
     assertArg(
-      Guard12.isNonEmptyString(bottomNote),
-      Guard12.isIntegerGte(numOctaves, 1)
+      guard_exports.isNonEmptyString(bottomNote),
+      guard_exports.isIntegerGte(numOctaves, 1)
     );
     let ts = this.getMeasure().getTimeSignature();
     let notes = scale.getScaleNotes(bottomNote, numOctaves);
@@ -8571,7 +9123,7 @@ __publicField(_DocumentBuilder, "DefaultMeasureOptions", {});
 var DocumentBuilder = _DocumentBuilder;
 
 // src/score/pub/event.ts
-import { MusicError as MusicError19, MusicErrorType as MusicErrorType19 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError17, MusicErrorType as MusicErrorType17 } from "@tspro/web-music-score/core";
 var ScoreEvent = class {
   /**
    * Create new score event instance.
@@ -8614,7 +9166,7 @@ var ScoreObjectEvent = class extends ScoreEvent {
     this.renderContext = renderContext;
     this.objects = objects;
     if (arguments.length === 0) {
-      throw new MusicError19(MusicErrorType19.Score, "Empty array in score object event!");
+      throw new MusicError17(MusicErrorType17.Score, "Empty array in score object event!");
     }
   }
   /**
@@ -8639,21 +9191,19 @@ 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 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";
-import { MusicError as MusicError20, MusicErrorType as MusicErrorType20 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError18, MusicErrorType as MusicErrorType18 } from "@tspro/web-music-score/core";
 function assertArg2(condition, argName, argValue) {
   if (!condition) {
-    throw new MusicError20(MusicErrorType20.Score, `Invalid arg: ${argName} = ${argValue}`);
+    throw new MusicError18(MusicErrorType18.Score, `Invalid arg: ${argName} = ${argValue}`);
   }
 }
 function getNotationLine(line) {
   if (line instanceof ObjStaff || line instanceof ObjTab) {
     return line.getMusicInterface();
   } else {
-    throw new MusicError20(MusicErrorType20.Score, `Notation line not staff nor tab.`);
+    throw new MusicError18(MusicErrorType18.Score, `Notation line not staff nor tab.`);
   }
 }
 var MusicInterface5 = class {
@@ -8823,7 +9373,7 @@ var _MDocument = class _MDocument extends MusicInterface5 {
    * @returns - Player instance.
    */
   play(playStateChangeListener) {
-    assertArg2(Guard13.isFunctionOrUndefined(playStateChangeListener), "playStateChangeListener", playStateChangeListener);
+    assertArg2(guard_exports.isFunctionOrUndefined(playStateChangeListener), "playStateChangeListener", playStateChangeListener);
     return new MPlayer(this, playStateChangeListener).play();
   }
 };
@@ -8853,7 +9403,7 @@ var _MEnding = class _MEnding extends MusicInterface5 {
    * @returns - Boolean whether this ending has asked passage number.
    */
   hasPassage(passage) {
-    assertArg2(Guard13.isIntegerGte(passage, 1), "passage", passage);
+    assertArg2(guard_exports.isIntegerGte(passage, 1), "passage", passage);
     return this.obj.hasPassage(passage);
   }
 };
@@ -9005,7 +9555,7 @@ var _MStaffBarLine = class _MStaffBarLine extends MusicInterface5 {
     if (barLine instanceof ObjBarLineLeft || barLine instanceof ObjBarLineRight) {
       return barLine.getMusicInterface();
     } else {
-      throw new MusicError20(MusicErrorType20.Score, `Bar line not left nor right.`);
+      throw new MusicError18(MusicErrorType18.Score, `Bar line not left nor right.`);
     }
   }
   /**
@@ -9539,10 +10089,10 @@ __publicField(_MExtensionLine, "Name", "ExtensionLine");
 var MExtensionLine = _MExtensionLine;
 
 // src/score/pub/music-interface.ts
-import { MusicError as MusicError21, MusicErrorType as MusicErrorType21 } from "@tspro/web-music-score/core";
+import { MusicError as MusicError19, MusicErrorType as MusicErrorType19 } from "@tspro/web-music-score/core";
 function assertArg3(condition, argName, argValue) {
   if (!condition) {
-    throw new MusicError21(MusicErrorType21.Score, `Invalid arg: ${argName} = ${argValue}`);
+    throw new MusicError19(MusicErrorType19.Score, `Invalid arg: ${argName} = ${argValue}`);
   }
 }
 function require_t(t, message) {
@@ -9561,7 +10111,7 @@ var _MPlayer = class _MPlayer {
   constructor(doc, playStateChangeListener) {
     __publicField(this, "player");
     assertArg3(doc instanceof MDocument2, "doc", doc);
-    assertArg3(Guard14.isFunctionOrUndefined(playStateChangeListener), "playStateChangeListener", playStateChangeListener);
+    assertArg3(guard_exports.isFunctionOrUndefined(playStateChangeListener), "playStateChangeListener", playStateChangeListener);
     this.player = new Player();
     this.player.setDocument(doc.getMusicObject());
     this.player.setCursorPositionChangeListener((cursorRect) => {
@@ -9605,7 +10155,7 @@ var _MPlayer = class _MPlayer {
     return this;
   }
 };
-__publicField(_MPlayer, "currentlyPlaying", new ValueSet2());
+__publicField(_MPlayer, "currentlyPlaying", new ValueSet());
 var MPlayer = _MPlayer;
 var MRenderContext2 = class {
   /**
@@ -9621,7 +10171,7 @@ var MRenderContext2 = class {
    * @returns - This render context instance.
    */
   setDocument(doc) {
-    assertArg3(Guard14.isUndefined(doc) || doc instanceof MDocument2, "doc", doc);
+    assertArg3(guard_exports.isUndefined(doc) || doc instanceof MDocument2, "doc", doc);
     this.ctx.setDocument(doc);
     return this;
   }
@@ -9631,7 +10181,7 @@ var MRenderContext2 = class {
    * @returns - This render context instance.
    */
   setCanvas(canvas) {
-    canvas = require_t(Utils13.Dom.getCanvas(canvas), typeof canvas === "string" ? "Cannot set render canvas because invalid canvas id: " + canvas : "Cannot set render canvas because given canvas is undefined.");
+    canvas = require_t(utils_exports.Dom.getCanvas(canvas), typeof canvas === "string" ? "Cannot set render canvas because invalid canvas id: " + canvas : "Cannot set render canvas because given canvas is undefined.");
     this.ctx.setCanvas(canvas);
     return this;
   }
@@ -9640,7 +10190,7 @@ var MRenderContext2 = class {
    * @param scoreEventListener - Score event listener.
    */
   setScoreEventListener(scoreEventListener) {
-    assertArg3(Guard14.isFunctionOrUndefined(scoreEventListener), "scoreEventListener", scoreEventListener);
+    assertArg3(guard_exports.isFunctionOrUndefined(scoreEventListener), "scoreEventListener", scoreEventListener);
     this.ctx.setScoreEventListener(scoreEventListener);
   }
   /**
@@ -9715,7 +10265,7 @@ var _MPlaybackButtons = class _MPlaybackButtons {
    * @returns 
    */
   setDocument(doc) {
-    assertArg3(Guard14.isUndefined(doc) || doc instanceof MDocument2, "doc", doc);
+    assertArg3(guard_exports.isUndefined(doc) || doc instanceof MDocument2, "doc", doc);
     this.onStop();
     if (doc) {
       this.player = new MPlayer(doc, (playState) => {
@@ -9759,9 +10309,9 @@ var _MPlaybackButtons = class _MPlaybackButtons {
    * @returns - This playback buttons class instance.
    */
   setPlayButton(btn, btnLabel) {
-    assertArg3(Guard14.isStringOrUndefined(btnLabel), "btnLabel", btnLabel);
+    assertArg3(guard_exports.isStringOrUndefined(btnLabel), "btnLabel", btnLabel);
     _MPlaybackButtons.removeOnClickListeners(this.playButton, this.onPlay);
-    this.playButton = require_t(Utils13.Dom.getButton(btn), "Play button required!");
+    this.playButton = require_t(utils_exports.Dom.getButton(btn), "Play button required!");
     this.playLabel = btnLabel != null ? btnLabel : "Play";
     _MPlaybackButtons.removeOnClickListeners(this.playButton, "all");
     _MPlaybackButtons.addOnClickListener(this.playButton, this.onPlay);
@@ -9775,9 +10325,9 @@ var _MPlaybackButtons = class _MPlaybackButtons {
    * @returns - This playback buttons class instance.
    */
   setStopButton(btn, btnLabel) {
-    assertArg3(Guard14.isStringOrUndefined(btnLabel), "btnLabel", btnLabel);
+    assertArg3(guard_exports.isStringOrUndefined(btnLabel), "btnLabel", btnLabel);
     _MPlaybackButtons.removeOnClickListeners(this.stopButton, this.onStop);
-    this.stopButton = require_t(Utils13.Dom.getButton(btn), "Stop button required!");
+    this.stopButton = require_t(utils_exports.Dom.getButton(btn), "Stop button required!");
     this.stopLabel = btnLabel != null ? btnLabel : "Stop";
     _MPlaybackButtons.removeOnClickListeners(this.stopButton, "all");
     _MPlaybackButtons.addOnClickListener(this.stopButton, this.onStop);
@@ -9792,10 +10342,10 @@ var _MPlaybackButtons = class _MPlaybackButtons {
    * @returns - This playback buttons class instance.
    */
   setPlayStopButton(btn, playLabel, stopLabel) {
-    assertArg3(Guard14.isStringOrUndefined(playLabel), "playLabel", playLabel);
-    assertArg3(Guard14.isStringOrUndefined(stopLabel), "stopLabel", stopLabel);
+    assertArg3(guard_exports.isStringOrUndefined(playLabel), "playLabel", playLabel);
+    assertArg3(guard_exports.isStringOrUndefined(stopLabel), "stopLabel", stopLabel);
     _MPlaybackButtons.removeOnClickListeners(this.playStopButton, this.onPlayStop);
-    this.playStopButton = require_t(Utils13.Dom.getButton(btn), "Play/stop button required!");
+    this.playStopButton = require_t(utils_exports.Dom.getButton(btn), "Play/stop button required!");
     this.playLabel = playLabel != null ? playLabel : "Play";
     this.stopLabel = stopLabel != null ? stopLabel : "Stop";
     _MPlaybackButtons.removeOnClickListeners(this.playStopButton, "all");
@@ -9810,9 +10360,9 @@ var _MPlaybackButtons = class _MPlaybackButtons {
    * @returns - This playback buttons class instance.
    */
   setPauseButton(btn, btnLabel) {
-    assertArg3(Guard14.isStringOrUndefined(btnLabel), "btnLabel", btnLabel);
+    assertArg3(guard_exports.isStringOrUndefined(btnLabel), "btnLabel", btnLabel);
     _MPlaybackButtons.removeOnClickListeners(this.pauseButton, this.onPause);
-    this.pauseButton = require_t(Utils13.Dom.getButton(btn), "Pause button required!");
+    this.pauseButton = require_t(utils_exports.Dom.getButton(btn), "Pause button required!");
     this.pauseLabel = btnLabel != null ? btnLabel : "Pause";
     _MPlaybackButtons.removeOnClickListeners(this.pauseButton, "all");
     _MPlaybackButtons.addOnClickListener(this.pauseButton, this.onPause);
@@ -9833,12 +10383,12 @@ var _MPlaybackButtons = class _MPlaybackButtons {
     this.savedOnClickListeners.set(btn, curListeners);
   }
   static addOnClickListener(btn, onClickListener) {
-    assertArg3(Guard14.isFunction(onClickListener), "onClick", onClickListener);
+    assertArg3(guard_exports.isFunction(onClickListener), "onClick", onClickListener);
     btn.addEventListener("click", onClickListener);
     this.savedOnClickListeners.getOrCreate(btn, []).push(onClickListener);
   }
 };
-__publicField(_MPlaybackButtons, "savedOnClickListeners", new UniMap10());
+__publicField(_MPlaybackButtons, "savedOnClickListeners", new UniMap());
 var MPlaybackButtons = _MPlaybackButtons;
 
 // src/score/index.ts
@@ -9909,6 +10459,7 @@ export {
   isStringNumber,
   isVerseNumber,
   isVoiceId,
+  setColor,
   validateStringNumber,
   validateVerseNumber,
   validateVoiceId